/* Rate Radar — production dashboard (v2 design, real Supabase data).
   Base design system lifted from mockups-v2 (mock.css), + login/brand/routing. */
:root{
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
  /* —— BalticSignsAI brand — light —— */
  --bg:#f8f7f5; --surface:#ffffff; --surface-2:#f1efec;
  --border:#e6e3dd; --border-strong:#d8d5cf;
  --text:#0f1d3a; --text-2:#243456; --muted:#6f6b63;
  --accent:#2563eb; --accent-2:#4279ee; --accent-soft:#eaf1fe; --accent-strong:#1d4fcc;
  --brand:#c02e45; --brand-strong:#a3253a; --brand-soft:#fbe9ec;
  --bad:#c02e45;  --bad-soft:#fbe9ec;
  --good:#2563eb; --good-soft:#eaf1fe;
  --warn:#9c6210; --warn-soft:#f7ecd9;  /* 4.7:1 on bg (was #c47d18 = 3.1 — small-text WCAG fail) */
  --neutral:#6f6b63; --neutral-soft:#efece7;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px; --sp10:40px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sh-sm:0 1px 2px rgba(20,20,40,.05),0 1px 1px rgba(20,20,40,.03);
  --sh-md:0 4px 16px -4px rgba(30,30,60,.10),0 2px 6px -2px rgba(30,30,60,.06);
  --sh-lg:0 18px 48px -12px rgba(30,30,70,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--sp6);overflow:auto;
  background:radial-gradient(120% 120% at 0% 0%, #eef2f8 0%, rgba(255,255,255,0) 44%),radial-gradient(120% 120% at 100% 100%, #eaf1fe 0%, rgba(255,255,255,0) 46%),var(--bg)}
.login-shell{width:100%;max-width:940px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}
/* brand hero */
.login-hero{position:relative;padding:var(--sp10) var(--sp8);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp8);overflow:hidden;border-right:1px solid var(--border);
  background:radial-gradient(120% 120% at 0% 0%, #fbe9ec 0%, rgba(255,255,255,0) 52%),radial-gradient(120% 130% at 100% 100%, #eaf1fe 0%, rgba(255,255,255,0) 55%),var(--surface-2)}
.login-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(37,99,235,.06) 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(to bottom right,#000,transparent 62%);pointer-events:none}
.lh-top{position:relative;z-index:1}
.lh-logo{height:34px;width:auto;display:block}
.lh-name{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.025em;margin-top:var(--sp5);color:var(--text)}
.lh-tag{font-size:13.5px;line-height:1.55;color:var(--text-2);margin-top:var(--sp3);max-width:34ch}
.lh-points{list-style:none;position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sp4)}
.lh-points li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--text-2)}
.lh-points svg{width:18px;height:18px;flex:none;color:var(--accent);stroke-width:1.9;margin-top:1px}
.lh-foot{position:relative;z-index:1;font-size:11.5px;color:var(--muted);font-weight:500}
/* form card */
.login-card{padding:var(--sp10) var(--sp8);display:flex;flex-direction:column;justify-content:center}
.lc-head{margin-bottom:var(--sp4)}
.login-card h1{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.login-card p.sub{color:var(--muted);font-size:13px;margin-top:4px}
.login-card label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:var(--sp4) 0 5px}
.login-card input{width:100%;font-family:var(--font-body);font-size:14px;padding:11px 12px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.label-row{display:flex;align-items:baseline;justify-content:space-between;margin:var(--sp4) 0 5px}
.label-row label{margin:0}
.link-mini{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer}
.link-mini:hover{text-decoration:underline}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;display:grid;place-items:center;color:var(--muted);cursor:pointer;border-radius:6px}
.pw-toggle:hover{color:var(--text-2)}
.pw-toggle svg{width:18px;height:18px;stroke-width:1.9}
.login-card .btn-primary{width:100%;justify-content:center;margin-top:var(--sp5);padding:12px}
.login-card .btn-primary[disabled]{opacity:.65;cursor:default}
.or{display:flex;align-items:center;gap:var(--sp3);margin:var(--sp5) 0;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.btn-ghost{display:flex;align-items:center;width:100%;justify-content:center;gap:8px;padding:11px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost svg{flex:none}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost svg{width:16px;height:16px;stroke-width:1.9}
.login-msg{font-size:12.5px;margin-top:var(--sp4);padding:9px 12px;border-radius:var(--r-sm)}
.login-msg.err{background:var(--bad-soft);color:var(--bad)}
.login-msg.ok{background:var(--good-soft);color:var(--good)}
.lc-secure{display:flex;align-items:center;gap:7px;margin-top:var(--sp6);font-size:11.5px;color:var(--muted);line-height:1.4}
.lc-secure svg{width:14px;height:14px;flex:none;stroke-width:1.8}
@media(max-width:760px){
  .login-shell{grid-template-columns:1fr;max-width:420px}
  .login-hero{padding:var(--sp8) var(--sp6) var(--sp6);border-right:0;border-bottom:1px solid var(--border);align-items:center;text-align:center;gap:var(--sp5)}
  .login-hero .lh-points,.login-hero .lh-foot,.lh-tag{display:none}
  .lh-logo{height:46px;margin:0 auto}
  .lh-name{margin-top:var(--sp3)}
  .login-card{padding:var(--sp6)}
}

/* ---------- LEFT RAIL ---------- */
.rail{background:var(--surface);border-right:1px solid var(--border)}/* stretches full grid-column height (no empty area under it) */
.rail-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:var(--sp6) var(--sp4);gap:var(--sp2);overflow-y:auto}
body{transition:grid-template-columns .18s ease}
.rail-collapse{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;border-radius:7px;border:0;background:none;transition:background .15s,color .15s}
.rail-collapse:hover{background:var(--surface-2);color:var(--text)}
.rail-collapse svg{width:18px;height:18px;stroke-width:1.9}
/* collapsed icon-rail (MCT): hide all labels, center icons, rotate chevron */
.rail-collapsed .rail-inner{padding-left:10px;padding-right:10px}
.rail-collapsed .brand{justify-content:center;padding-left:0;padding-right:0}
.rail-collapsed .brand .rr,.rail-collapsed .brand .divider{display:none}
.rail-collapsed .brand .brand-mark{width:32px;height:32px;max-width:32px}
.rail-collapsed .nav-label{display:none}
.rail-collapsed .nav-item{justify-content:center;gap:0;font-size:0;padding-left:0;padding-right:0}
.rail-collapsed .nav-badge{display:none}
.rail-collapsed .rail-foot{flex-direction:column;gap:8px;padding:var(--sp3) 0}
.rail-collapsed .rail-foot .meta{display:none}
.rail-collapsed .rail-foot .avatar{cursor:pointer}
.rail-collapsed .rail-collapse{margin:0 auto}
/* collapsing the rail must actually free up room: let content fill the regained width */
.rail-collapsed .content{max-width:none}
.brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 var(--sp3) var(--sp6)}
.brand .brand-mark{height:28px;width:28px;flex:none;color:var(--accent);display:none}/* shown only when rail collapsed */
.rail-collapsed .brand .brand-mark{display:block;color:#fff}
.brand .rr{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand .rr span{color:var(--accent)}
.brand .divider{width:1px;height:22px;background:var(--border-strong)}
.nav-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:var(--sp4) var(--sp3) var(--sp2)}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px var(--sp3);border-radius:var(--r-sm);color:var(--text-2);font-weight:500;cursor:pointer;text-decoration:none;position:relative;transition:background .15s,color .15s;border:0;background:none;width:100%;font-family:var(--font-body);font-size:14px;text-align:left}
.nav-item svg{width:18px;height:18px;stroke-width:1.9;flex:none}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-badge{margin-left:auto;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;font-family:var(--font-mono)}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:var(--sp3);border-top:1px solid var(--border)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-weight:700;color:var(--accent);font-size:13px}
.rail-foot .meta{font-size:12px;line-height:1.3;min-width:0}
.rail-foot .meta b{font-weight:600;font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-foot .meta span{color:var(--muted)}
.rail-foot .logout{margin-left:auto;cursor:pointer;color:var(--muted)}
.rail-foot .logout:hover{color:var(--bad)}
.rail-foot .logout svg{width:16px;height:16px}
/* —— BalticSignsAI logo lockup (white rail) —— */
.brand .lockup{height:22px;width:auto;display:block}
.rail-collapsed .brand .lockup{display:none!important}
/* logo light/dark swap (!important to beat .brand .lockup specificity) */
.logo-dark{display:none!important}
html[data-theme="dark"] .logo-light{display:none!important}
html[data-theme="dark"] .logo-dark{display:block!important}

/* ---------- MAIN ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(245,245,248,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:var(--sp4) var(--sp8);display:flex;align-items:center;gap:var(--sp4)}
.page-title{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.page-sub{color:var(--muted);font-size:12.5px;margin-top:1px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp3)}
.seg{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px;box-shadow:var(--sh-sm)}
.seg button{border:0;background:none;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text-2);padding:5px 11px;border-radius:6px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--accent);color:#fff;box-shadow:0 2px 6px -1px rgba(37,99,235,.3)}
.icon-btn{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--text-2);box-shadow:var(--sh-sm)}
.icon-btn svg{width:17px;height:17px;stroke-width:1.9}
.fresh{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
/* topbar controls: custom range + hotel filter */
.tb-ctl{position:relative;display:flex}
/* .popover.tb-pop (2 classes) so it beats the base .popover{width:288px;left:-10px} regardless of source order */
.popover.tb-pop{top:calc(100% + 8px);right:0;left:auto;width:auto;min-width:260px;max-width:min(380px,92vw)}
.tb-pop .range-row{display:flex;gap:10px;margin-top:10px}
.tb-pop .range-row label{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font:600 11px/1 var(--font-body);color:var(--text-2);text-transform:none;letter-spacing:0}
.tb-pop .range-row input{width:100%;min-width:0;font-family:var(--font-body);font-size:12.5px;padding:7px 8px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:var(--text)}
.tb-pop .range-row input:focus{outline:none;border-color:var(--accent)}
.hotel-btn{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--font-body);color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-sm);padding:8px 12px;cursor:pointer;box-shadow:0 2px 6px -1px rgba(37,99,235,.3);white-space:nowrap;max-width:200px}
.hotel-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hotel-btn svg{width:13px;height:13px;stroke-width:2.4;flex:none}
/* show up to ~20 hotels (+ "All") with no inner scroll; scroll only beyond that, capped to viewport */
.hsel-list{max-height:min(720px,80vh);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:1px}
.hsel-list button{text-align:left;font:500 13px/1.3 var(--font-body);color:var(--text-2);background:none;border:0;padding:8px 10px;border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsel-list button:hover{background:var(--surface-2);color:var(--text)}
.hsel-list button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.content{padding:var(--sp8);display:flex;flex-direction:column;gap:var(--sp6);max-width:1760px;width:100%}

/* screen routing */
.screen{display:none}
.screen.active{display:flex;flex-direction:column;gap:var(--sp6)}
.screen-soon{padding:var(--sp10);text-align:center;color:var(--muted);font-size:14px}

/* staggered load */
.rise{opacity:0;transform:translateY(10px);animation:rise .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.04s}.d2{animation-delay:.1s}.d3{animation-delay:.16s}.d4{animation-delay:.22s}.d5{animation-delay:.28s}.d6{animation-delay:.34s}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.eyebrow .dotmark{width:6px;height:6px;border-radius:50%;background:var(--bad)}
.eyebrow .dotmark.b{background:var(--bad)}.eyebrow .dotmark.n{background:var(--neutral)}.eyebrow .dotmark.g{background:var(--good)}
/* KPI numbers: body font (Archivo) at normal weight — matches prototype (NOT the heavy display font) */
.big{font-family:var(--font-body);font-weight:400;font-size:34px;line-height:1}
.sub{color:var(--muted);font-size:12.5px;margin-top:6px}

/* hero (Overview) */
.hero-money{position:relative;overflow:hidden;padding:var(--sp6);background:radial-gradient(120% 140% at 100% 0%, #fbeef0 0%, rgba(255,255,255,0) 55%),var(--surface);border-color:#f1dfe3}
.hero-money::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(192,46,69,.05) 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(to bottom right,#000,transparent 60%);pointer-events:none}
.hero-money .val{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1.05;margin-top:8px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.hero-money .val span{font-size:14px;color:var(--text-2);font-weight:700}
.trend-pill{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--bad);background:var(--bad-soft);padding:3px 9px;border-radius:20px;font-family:var(--font-mono)}
.hero-v2{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp4)}
.hero-stat{padding:var(--sp5);display:flex;flex-direction:column;justify-content:space-between}
/* hero-score: Parity health as the primary card (left, wider) */
.hero-score{position:relative;overflow:hidden;padding:var(--sp6);background:radial-gradient(120% 140% at 0% 0%, #eaf1fe 0%, rgba(255,255,255,0) 58%),var(--surface);border-color:#d8e3fb}
.hero-score::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(37,99,235,.06) 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(to bottom left,#000,transparent 60%);pointer-events:none}
.hero-score>.eyebrow,.hero-score .ph-body{position:relative;z-index:1}
.hero-score .ph-body{gap:var(--sp10);margin-top:var(--sp5)}
.hero-score .ring{width:144px;height:144px}
.hero-score .ring .num{font-size:46px}
.hero-score .ph-head{font-size:11px}
.hero-score .phd{font-size:13px;padding:7px 0}
.hero-desc{font-size:13px;line-height:1.5;color:var(--text-2);margin-top:10px;max-width:40ch}
.hero-caveat{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:5px;max-width:42ch}
#hero-eur{display:inline-block;transform-origin:left center}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
#hero-eur.pop{animation:pop .34s ease}
.metric-toggle{width:fit-content;margin-top:14px}
/* parity health */
.ring{position:relative;width:116px;height:116px;flex:none}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.02em}
.ph-body{display:flex;align-items:center;gap:var(--sp8);margin-top:var(--sp4)}
.ph-drivers{flex:1;display:flex;flex-direction:column}
.ph-head{font:600 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.phd{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:6px 0;border-top:1px solid var(--border)}
.phd:first-child{border-top:0}
.phd span{color:var(--text-2)}.phd b{font:600 12.5px/1 var(--font-mono)}
.info{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--border-strong);color:var(--muted);font:700 10px/1 var(--font-body);cursor:pointer;margin-left:6px}
.info-wrap{position:relative;display:inline-block;vertical-align:middle}
.popover{position:absolute;top:150%;left:-10px;z-index:40;width:288px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:var(--sp4) var(--sp5);display:none;text-align:left;font-weight:400;text-transform:none;letter-spacing:0}
.popover.open{display:block}
.popover b{font:700 13px/1.2 var(--font-display);display:block;margin-bottom:7px;color:var(--text)}
.popover p{font:400 12.5px/1.55 var(--font-body);color:var(--text-2);margin:0}
.popover .pop-formula{color:var(--muted);font-size:11.5px;border-top:1px solid var(--border);padding-top:8px;margin-top:8px}
.popover .pop-link{display:inline-block;margin-top:10px;font:600 12px/1 var(--font-body);color:var(--accent);cursor:pointer}
/* kpi strip */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4)}
.kpi{padding:var(--sp4) var(--sp5)}
.kpi .big{font-size:30px;line-height:1;margin-top:4px}
.kpi .sub{margin-top:4px}
.ctx-line{margin:var(--sp3) 0 var(--sp2);color:var(--muted);font:500 12px/1.6 var(--font-mono);display:flex;gap:var(--sp5);flex-wrap:wrap;padding:0 var(--sp1)}
.ctx-line b{color:var(--text-2)}.ctx-line .ok{color:var(--good)}
.mini-seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;margin-left:auto}
.mini-seg button{border:0;background:none;font:600 11px/1 var(--font-body);color:var(--text-2);padding:4px 9px;border-radius:6px;cursor:pointer}
.mini-seg button.on{background:var(--accent);color:#fff}

/* sections / actions / charts / tables (from mock.css) */
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--sp4)}
.sec-title{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.sec-hint{color:var(--muted);font-size:12.5px}
.sec-link{margin-left:auto;color:var(--accent);font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
.actions{padding:var(--sp2)}
.action{display:flex;align-items:center;gap:var(--sp4);padding:var(--sp4) var(--sp5);border-left:3px solid transparent;border-radius:var(--r-md);transition:background .15s}
.action+.action{border-top:1px solid var(--border)}
.action:hover{background:var(--surface-2)}
.action.sev-hi{border-left-color:var(--bad)}.action.sev-mid{border-left-color:var(--warn)}
.sev-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.sev-hi .sev-ico{background:var(--bad-soft);color:var(--bad)}.sev-mid .sev-ico{background:var(--warn-soft);color:var(--warn)}
.sev-ico svg{width:18px;height:18px;stroke-width:2}
.action .who{font-weight:600;font-size:13.5px}
.action .why{color:var(--text-2);font-size:12.5px;margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.depth{font-family:var(--font-mono);font-weight:600;color:var(--bad)}
.chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--neutral-soft);color:var(--text-2)}
.src{font:600 11px/1 var(--font-mono);color:var(--text-2)}.src .pending{color:var(--muted);font-style:italic}
.spacer{margin-left:auto}
.btn{font-family:var(--font-body);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px -2px rgba(192,46,69,.4)}
.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}
/* Apply-range = utility filter confirm → accent blue (red reserved for real CTAs) */
#cf-apply{background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px -2px rgba(37,99,235,.4)}
#cf-apply:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--sp6)}
.row2.r15{grid-template-columns:1.5fr 1fr}.row2.r14{grid-template-columns:1.4fr 1fr}.row2.r17{grid-template-columns:1.7fr 1fr}
.chart-card{padding:var(--sp5) var(--sp6) var(--sp6)}
.canvas-wrap{position:relative;height:230px;margin-top:var(--sp4)}
.canvas-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted);pointer-events:none}
.legend{display:flex;gap:var(--sp4);margin-top:var(--sp4);flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);font-weight:500}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ota{display:flex;align-items:center;gap:var(--sp4);padding:8px 0}
.ota+.ota{border-top:1px solid var(--border)}
.ota .name{width:172px;flex:none;font-weight:600;font-size:13px;display:flex;align-items:center;gap:7px}
.ota .name .chan{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ota .track{flex:1;height:10px;background:var(--neutral-soft);border-radius:6px;overflow:hidden}
.ota .fill{height:100%;border-radius:6px}
.ota.major .fill{background:var(--accent)}.ota.tail .fill{background:var(--bad)}
.ota .cnt{width:34px;text-align:right;font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--text-2)}
.tag-tail{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--neutral-soft);padding:1px 6px;border-radius:5px;flex:none;white-space:nowrap}
.vis-row{display:flex;align-items:center;gap:var(--sp4);padding:9px 0;border-top:1px solid var(--border)}
.vis-row:first-child{border-top:0}
.vis-row .name{width:150px;font-weight:600;font-size:13px}
.vis-row .track{flex:1;height:10px;background:var(--neutral-soft);border-radius:6px;overflow:hidden}
.vis-row .fill{height:100%;border-radius:6px}
.vis-row .pct{width:54px;text-align:right;font:600 13px/1 var(--font-mono)}
table{width:100%;border-collapse:collapse}
thead th{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 var(--sp4) var(--sp3);border-bottom:1px solid var(--border)}
thead th.num{text-align:right}
tbody td{padding:var(--sp4);border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.h-name{font-weight:600}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;padding:3px 9px 3px 7px;border-radius:20px}
.status svg{width:13px;height:13px;stroke-width:2.2}
.st-bad{background:var(--bad-soft);color:var(--bad)}.st-good{background:var(--good-soft);color:var(--good)}.st-warn{background:var(--warn-soft);color:var(--warn)}.st-neutral{background:var(--neutral-soft);color:var(--neutral)}
.health-cell{display:flex;align-items:center;gap:8px}
/* mini health ring (table cells) — same language as the hero Parity Health ring */
.hring{position:relative;width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;flex:none;background:conic-gradient(var(--c) calc(var(--p) * 3.6deg), var(--border) 0)}
.hring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.hring b{position:relative;font:600 12.5px/1 var(--font-mono);color:var(--text);font-variant-numeric:tabular-nums}
.chev{color:var(--muted)}
.note-banner{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border:1px solid #dcd9fb;border-radius:var(--r-md);padding:var(--sp4) var(--sp5);font-size:12.5px;color:#3b3568}
.note-banner svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:1px}

/* ============ SHARED: subtabs / detail panels (Violators · Visibility · Hotels) ============ */
.subtab{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center}
.subtab button{font:600 13px/1 var(--font-body);color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:7px 14px;border-radius:20px;cursor:pointer;transition:.15s}
.subtab button:hover{border-color:var(--border-strong);color:var(--text)}
.subtab button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
/* Evidence filter bar: single row, never wraps (scrolls if truly narrow); compact pills to fit the pack button */
#ev-filters{flex-wrap:nowrap;overflow-x:auto}
#ev-filters>*{flex:none}
#ev-filters button[data-evf]{padding:6px 11px;font-size:12.5px}
#ev-filters #ev-build-pack{margin-left:8px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:8px;padding:7px 13px}
#ev-filters #ev-build-pack:hover{background:var(--accent);border-color:var(--accent);color:#fff;filter:brightness(.93)}
.cd-title{font:700 20px/1.2 var(--font-display)}
.cd-kpis{display:flex;gap:var(--sp6);margin:var(--sp4) 0 var(--sp2);flex-wrap:wrap}
.cd-kpis .k .n{font:700 22px/1 var(--font-mono)}
.cd-kpis .k .l{font-size:11.5px;color:var(--muted);margin-top:3px}
.cd-sec{font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:var(--sp5) 0 var(--sp2)}
.cd-markets{margin-top:6px;font-size:17px;letter-spacing:2px;min-height:20px}
.mc{font:600 11px/1 var(--font-mono);color:var(--text-2);background:var(--neutral-soft);padding:2px 7px;border-radius:5px;margin-right:5px}
.mh{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3);padding:7px 0;border-top:1px solid var(--border);font-size:13px}
.mh:first-of-type{border-top:0}
.mh>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh .d{flex:none;font:600 12.5px/1 var(--font-mono);color:var(--bad)}
.ev-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp2);margin-top:var(--sp2)}
.ev-mini .e{height:64px;border-radius:var(--r-sm);background:linear-gradient(135deg,#eceaff,#f6f6fb);border:1px solid var(--border);position:relative;display:grid;place-items:center;color:#b9b9cf;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}
.ev-mini .e.loaded svg{display:none}
.ev-mini .e svg{width:20px;height:20px}
.ev-mini .e span{position:absolute;left:8px;bottom:6px;font:600 10px/1 var(--font-mono);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);background:rgba(0,0,0,.18);padding:2px 5px;border-radius:4px}
.offline-note{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp3) var(--sp4);font-size:12px;color:var(--text-2);line-height:1.5;margin-top:var(--sp4)}
.empty{color:var(--muted);font-size:13px;padding:var(--sp4) 0}

/* ============ VIOLATORS ============ */
tr.case{cursor:pointer}
tr.case.sel td{background:var(--accent-soft)}
.ch-name{font-weight:700;font-size:13.5px}
.st{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--font-body);padding:4px 10px;border-radius:20px;white-space:nowrap}
.st svg{width:13px;height:13px;stroke-width:2.2}
.st.active{background:var(--bad-soft);color:var(--bad)}
.st.recovered{background:var(--good-soft);color:var(--good)}

/* ============ VISIBILITY ============ */
.list-scroll{max-height:430px;overflow-y:auto;margin-top:var(--sp3);padding-right:4px}
#vis-dd-hotels{max-height:300px;overflow-y:auto}   /* mobile/base cap */
/* desktop: equal-height cards (as before). Market list = FULL rows, cap ~10 then scroll, with the
   legend right under it (no floating). Any leftover height (few markets) sits as bottom padding. */
@media(min-width:821px){
  #screen-visibility .row2{align-items:stretch}
  #screen-visibility .row2 > .card{display:flex;flex-direction:column;min-width:0}
  #screen-visibility #vis-list{max-height:400px;overflow-y:auto}      /* full rows, exactly 10 markets → scroll beyond */
  #screen-visibility #vis-dd-hotels{max-height:220px;overflow-y:auto} /* right detail bounded → scroll */
}
.mrow{display:flex;align-items:center;gap:var(--sp4);padding:9px var(--sp2);border-radius:8px;cursor:pointer}
.mrow:hover{background:var(--surface-2)}
.mrow.sel{background:var(--accent-soft)}
.mrow .name{width:150px;font-weight:600;font-size:13px}
.mrow .track{flex:1;height:8px;background:var(--neutral-soft);border-radius:6px;overflow:hidden}
.mrow .fill{height:100%;border-radius:6px}
.mrow .pct{width:44px;text-align:right;font:600 13px/1 var(--font-mono)}
.mrow .cnt{width:92px;text-align:right;font:500 11.5px/1 var(--font-mono);color:var(--muted)}

/* ============ HOTELS ============ */
tr.hrow{cursor:pointer}
tr.hrow.sel td{background:var(--accent-soft)}
.arow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--border);font-size:12.5px}
.arow:first-child{border-top:0}
.arow .lbl{color:var(--text-2);display:flex;align-items:center;gap:6px}
.arow input{width:74px;text-align:right;font:600 12.5px/1 var(--font-mono);border:1px solid var(--border-strong);border-radius:6px;padding:5px 7px;background:var(--surface);color:var(--text)}
.arow input:focus{outline:none;border-color:var(--accent)}
.req{color:var(--bad);font-weight:700}
.sysflag{font:600 8.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.03em;color:var(--good);background:var(--good-soft);padding:2px 5px;border-radius:4px}
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:8px}
.comm-grid label{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text-2);gap:6px}
.comm-grid input{width:50px;text-align:right;font:600 11.5px/1 var(--font-mono);border:1px solid var(--border-strong);border-radius:5px;padding:3px 5px;background:var(--surface);color:var(--text)}
.comm-grid input:focus{outline:none;border-color:var(--accent)}
.est-out{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--sp4);padding-top:var(--sp3);border-top:2px solid var(--border-strong)}
.est-out .n{font:700 20px/1 var(--font-mono);color:var(--bad)}
/* Phase B: per-hotel assumptions — saved/default state + persist control */
.assume-badge{font:600 9.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border-radius:20px}
.assume-badge.def{color:var(--muted);background:var(--border)}
.assume-badge.custom{color:var(--accent);background:var(--accent-soft)}
.sysflag.pinned{color:var(--accent);background:var(--accent-soft)}
.save-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:var(--sp3)}
.save-row .btn{padding:7px 14px;font-size:12.5px}
.aderived{font:600 13px/1 var(--font-mono);color:var(--accent)}
/* #13 roles */
.role-chip{font:600 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:20px;white-space:nowrap}
.role-chip.role-edit{color:var(--good);background:var(--good-soft)}
.role-chip.role-view{color:var(--text-2);background:var(--border)}
.readonly-note{margin-top:var(--sp3);padding:9px 13px;border-left:3px solid var(--muted);background:var(--surface-2,var(--accent-soft));border-radius:8px;font-size:12px;line-height:1.45;color:var(--text-2)}
body.role-viewer #hd-assumptions input:disabled{opacity:.7;cursor:not-allowed}
.split-note{margin:0 0 var(--sp4);padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:8px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.split-note b{color:var(--text)}
/* Settings — two-pane shell (Account · Team · How Parity works) */
.set-shell{display:grid;grid-template-columns:208px 1fr;gap:var(--sp6);align-items:start}
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:84px}
.set-nav-label{font:600 10.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 10px;margin-bottom:8px}
.set-nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:var(--r-sm);color:var(--text-2);font:500 13.5px/1 var(--font-body);text-align:left;cursor:pointer;transition:background .15s,color .15s}
.set-nav-item svg{width:17px;height:17px;flex:none}
.set-nav-item:hover{background:var(--surface)}
.set-nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.set-pane{min-width:0;max-width:720px;display:flex;flex-direction:column;gap:var(--sp5)}
.set-view{display:none;flex-direction:column;gap:var(--sp5)}
.set-view.active{display:flex}
body.settings-active .topbar .tb-ctl,body.settings-active #refresh-btn{display:none}
@media(max-width:820px){.set-shell{grid-template-columns:1fr}.set-nav{flex-direction:row;flex-wrap:wrap;position:static;gap:6px}.set-nav-label{display:none}.set-pane{max-width:none}}
/* Account pane */
.acc-id{display:flex;align-items:center;gap:var(--sp4);padding:0 2px}
.acc-avatar{width:50px;height:50px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:700 17px/1 var(--font-display);flex:none}
.acc-id-name{font:700 18px/1.1 var(--font-display);color:var(--text);letter-spacing:-.01em}
.acc-id-sub{display:flex;align-items:center;gap:10px;margin-top:5px;font:500 13px/1 var(--font-mono);color:var(--text-2);flex-wrap:wrap}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);margin-top:var(--sp5)}
.acc-grid label{display:flex;flex-direction:column;gap:6px;font:600 12px/1 var(--font-body);color:var(--text-2)}
.acc-grid input,.acc-grid select{padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font:500 14px/1.2 var(--font-body)}
.acc-grid select{cursor:pointer}
.acc-grid input:focus,.acc-grid select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media(max-width:600px){.acc-grid{grid-template-columns:1fr}}
/* Team pane */
.team-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap}
.team-head .btn[disabled]{opacity:.55;cursor:default}
.team-list{margin-top:var(--sp5);display:flex;flex-direction:column}
.team-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);padding:12px 0;border-top:1px solid var(--border)}
.team-row:first-child{border-top:0}
.team-who{display:flex;align-items:center;gap:12px;min-width:0}
.team-av{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:700 13px/1 var(--font-display);flex:none}
.team-nm{font:600 13.5px/1.2 var(--font-body);color:var(--text)}
.team-you{font:600 9.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:20px;margin-left:2px;vertical-align:middle}
.team-em{font:500 12px/1.3 var(--font-mono);color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-act{display:flex;align-items:center;gap:10px;flex:none}
.team-role{padding:6px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font:600 12.5px/1 var(--font-body);cursor:pointer}
.team-role:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.team-rm{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}
.team-rm:hover{border-color:var(--bad);color:var(--bad)}
.team-rm svg{width:15px;height:15px}
.team-empty{color:var(--muted);font-size:13px;padding:16px 0}
/* Invite */
.invite-form{margin-top:var(--sp5);padding:var(--sp5);border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.invite-form .save-row{justify-content:flex-end;gap:8px}
.invite-result{margin-top:var(--sp5);padding:var(--sp5);border:1px solid var(--good);background:var(--good-soft);border-radius:12px}
.invite-result .ir-head{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.invite-result .ir-head svg{width:18px;height:18px;color:var(--good);flex:none}
.ir-pw{display:flex;align-items:center;gap:10px}
.ir-pw code{flex:1;min-width:0;font:600 14px/1 var(--font-mono);background:var(--bg);border:1px solid var(--border-strong);border-radius:8px;padding:11px 12px;color:var(--text);user-select:all;overflow:auto}
/* How Parity works — methodology page */
.method-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp5)}
.method-wrap .mp,.set-pane .mp{font-size:13.5px;line-height:1.6;color:var(--text-2);margin:var(--sp3) 0 0}
.method-wrap .mp b,.set-pane .mp b{color:var(--text)}
.method-wrap .sec-title{font-size:14.5px}
.mfunnel{margin:var(--sp4) 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.mfunnel li{font-size:13.5px;line-height:1.55;color:var(--text-2)}
.mfunnel li b{color:var(--text)}
.mf{font-family:var(--font-mono);font-size:12px;background:var(--accent-soft);color:var(--accent);padding:2px 6px;border-radius:5px;white-space:nowrap}
.mtable{width:100%;border-collapse:collapse;margin-top:var(--sp3);font-size:13px}
.mtable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border)}
.mtable td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text-2)}
.mtable td.num,.mtable th.num{text-align:right;font-family:var(--font-mono)}
/* worked-example calculation blocks — readable step-by-step chain */
.calc{display:flex;flex-direction:column;gap:var(--sp2);margin-top:var(--sp4)}
.calc .cstep{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);flex-wrap:wrap;padding:var(--sp3) var(--sp4);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--surface-2)}
.calc .cin{font:500 12.5px/1.7 var(--font-mono);color:var(--text-2)}
.calc .cout{margin-left:auto;font:700 14px/1.25 var(--font-body);color:var(--text);white-space:nowrap}
.calc .cstep.total{border-left-color:var(--bad);background:var(--bad-soft)}
.calc .cstep.total .cout{color:var(--bad)}
.mtable tr:last-child td{border-bottom:0}
.cd-bench{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp3);padding:8px 12px;background:var(--bg);border-radius:8px;font-size:12px}
.cd-bench .bch-h{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:10.5px}
.cd-bench #hd-bench-chips{display:inline-flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
.cd-bench .bch{display:inline-flex;align-items:center;gap:5px}
.cd-bench .bl{color:var(--text-2)}
.cd-bench b{font-family:var(--font-mono)}
.set-link{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);margin-top:var(--sp4);padding:var(--sp4);border:1px solid var(--border);border-radius:10px;font-size:13.5px;color:var(--text);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.set-link:hover{background:var(--accent-soft);border-color:var(--accent)}
.set-link svg{width:18px;height:18px;color:var(--muted);flex:none}
.back-link{display:flex;align-items:center;gap:5px;width:100%;max-width:760px;margin:0 auto var(--sp4);font-size:12.5px;color:var(--text-2);cursor:pointer;text-decoration:none}
.back-link:hover{color:var(--accent)}
.back-link svg{width:15px;height:15px}
/* Evidence: personalized / excluded marker */
.ev-anom{opacity:.72}
.ev-anom .shot{filter:grayscale(.35)}
.ev-flag{position:absolute;top:8px;right:8px;z-index:2;font:600 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--warn);padding:4px 7px;border-radius:5px;box-shadow:var(--sh-sm)}
.save-status{font-size:12px;font-weight:600;color:var(--muted)}
.save-status.ok{color:var(--good)}
.save-status.err{color:var(--bad)}

/* ============ EVIDENCE ============ */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp4)}
.ev{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface);box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s;cursor:pointer}
.ev:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.ev .shot{aspect-ratio:4/3;background:linear-gradient(135deg,#eceaff,#f6f6fb);display:grid;place-items:center;color:#b9b9cf;position:relative;background-size:cover;background-position:center top}
.ev .shot.loaded svg{display:none}
.ev .shot svg{width:26px;height:26px}
.ev .shot .cc{position:absolute;top:8px;left:8px;font:600 10px/1 var(--font-mono);background:rgba(255,255,255,.88);padding:3px 6px;border-radius:5px;color:var(--text-2);z-index:1}
.ev .body{padding:var(--sp3) var(--sp4)}
.ev .h{font-weight:600;font-size:13px}
.ev .m{font:500 11.5px/1 var(--font-mono);color:var(--muted);margin-top:3px}
.ev .foot{display:flex;align-items:center;gap:8px;padding:0 var(--sp4) var(--sp4)}
.ev .foot .depth{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .foot [data-complaint]{margin-left:auto;flex:none}
/* status badge overlaid top-right on the thumbnail (smaller) instead of crowding the footer */
.ev .shot .ev-status{position:absolute;top:8px;right:8px;z-index:2}
.ev .shot .ev-status .status{font-size:10.5px;padding:3px 8px 3px 6px;box-shadow:var(--sh-sm);border:1px solid rgba(255,255,255,.55)}
.ev .shot .ev-status .status svg{width:11px;height:11px}
.pack{display:flex;align-items:center;gap:var(--sp4);background:var(--accent-soft);border:0;border-radius:var(--r-md);padding:var(--sp4) var(--sp5);flex-wrap:wrap}
.pack .txt{flex:1;min-width:200px;font-size:13px;color:var(--text)}
.pack .txt b{display:block;margin-bottom:2px}
.pack select{font:600 12.5px/1 var(--font-body);color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 9px;cursor:pointer}
/* lightbox */
#lightbox{position:fixed;inset:0;z-index:120;background:rgba(15,15,25,.82);display:grid;place-items:center;padding:var(--sp8)}
#lightbox .lb-inner{max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:var(--sp3)}
#lightbox img{max-width:100%;max-height:78vh;border-radius:var(--r-md);box-shadow:var(--sh-lg);background:#fff;object-fit:contain}
#lightbox .lb-cap{color:#fff;font:600 13px/1.4 var(--font-mono);text-align:center}
#lightbox .lb-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:grid;place-items:center}
#lightbox .lb-close svg{width:20px;height:20px}
/* email complaint modal */
#email-modal{position:fixed;inset:0;z-index:120;background:rgba(15,15,25,.55);display:flex;align-items:center;justify-content:center;padding:var(--sp6)}
#email-modal .em-card{width:100%;max-width:560px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:var(--sp6)}
#email-modal .em-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp4)}
#email-modal .em-head b{font:700 16px/1 var(--font-display)}
.em-x{width:32px;height:32px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:7px}
.em-x:hover{background:var(--surface-2);color:var(--text)}
.em-x svg{width:18px;height:18px}
#email-modal .em-subject{font:600 13px/1.4 var(--font-body);color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:var(--sp3)}
#email-modal textarea{width:100%;height:240px;resize:vertical;font:400 13px/1.55 var(--font-body);color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:11px 12px;white-space:pre-wrap}
#email-modal textarea:focus{outline:none;border-color:var(--accent)}
#email-modal .em-actions{display:flex;gap:var(--sp3);margin-top:var(--sp4)}
#email-modal .em-actions .btn{flex:1;justify-content:center}
#email-modal .em-pack-row{display:flex;align-items:center;gap:var(--sp4);justify-content:space-between;margin-top:var(--sp3);padding:var(--sp3) var(--sp4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)}
#email-modal .em-pack-info{display:flex;flex-direction:column;gap:3px;min-width:0}
#email-modal .em-pack-info b{font-size:13px}
#email-modal .em-pack-info span{font:500 11.5px/1 var(--font-mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#email-modal .em-pack .btn,#email-modal .em-pack{flex:none}
#email-modal .em-note{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:var(--sp3)}

/* ============ ACTIVITY ============ */
.alert{display:flex;gap:var(--sp4);padding:var(--sp4) var(--sp5);align-items:flex-start;border-top:1px solid var(--border)}
.alert:first-child{border-top:0}
.tico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none}
.tico svg{width:16px;height:16px;stroke-width:2}
.t-disp{background:var(--bad-soft);color:var(--bad)}.t-vis{background:var(--neutral-soft);color:var(--text-2)}.t-rec{background:var(--good-soft);color:var(--good)}.t-new{background:var(--warn-soft);color:var(--warn)}
.alert .txt{flex:1;min-width:0}.alert .txt .msg{font-size:13.5px;line-height:1.45}.alert .txt .sub{font:500 11.5px/1 var(--font-mono);color:var(--muted);margin-top:4px}
.alert .when{font:500 12px/1 var(--font-mono);color:var(--muted);white-space:nowrap}
.day-label{font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:var(--sp5) 0 var(--sp2);padding-left:var(--sp4)}
.day-label:first-child{margin-top:var(--sp2)}
.feed-more{font:500 12px/1.5 var(--font-mono);color:var(--muted);text-align:center;padding:var(--sp4) var(--sp4) var(--sp2);border-top:1px solid var(--border)}
#act-feed{max-height:70vh;overflow-y:auto}
.info-card .it{display:flex;gap:var(--sp3);padding:10px 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2);line-height:1.45}
.info-card .it:first-child{border-top:0}
.info-card .it b{color:var(--text)}
.dotm{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}

/* ============ RESPONSIVE ============ */
.hamburger{display:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.row2>.card{min-width:0}/* let cards shrink so an inner wide table scrolls instead of stretching the page */
/* Violators master|detail: cards are equal height (grid stretch); the RIGHT detail card drives
   the height (its affected-hotels list caps at ~9 rows, then scrolls), and the LEFT channel table
   FILLS that height with rows + scrolls — so no empty void under the table. Page scrolls normally. */
#vd-hotel-list,#md-hotels{max-height:314px;overflow-y:auto;padding-right:4px}   /* 9 whole rows (34+8×35px) → scroll; whole-row height so the last visible row isn't half-clipped */
#screen-violators .vio-scroll,#screen-markets .vio-scroll{max-height:70vh;overflow-y:auto}      /* mobile/base: bounded scroll */
#screen-violators .vio-scroll thead th,#screen-markets .vio-scroll thead th{position:sticky;top:0;background:var(--surface);z-index:1}
#screen-hotels .table-scroll{max-height:70vh;overflow-y:auto}        /* mobile/base bound for the hotels table */
#screen-hotels .table-scroll thead th{position:sticky;top:0;background:var(--surface);z-index:1}
/* dense master|detail tables: tighten cell h-padding so all columns fit the narrower left card */
#screen-hotels tbody td,#screen-hotels thead th,#screen-violators .vio-scroll tbody td,#screen-violators .vio-scroll thead th,#screen-markets .vio-scroll tbody td,#screen-markets .vio-scroll thead th{padding-left:10px;padding-right:10px}
#screen-hotels tbody td:first-child,#screen-hotels thead th:first-child,#screen-violators tbody td:first-child,#screen-violators thead th:first-child,#screen-markets tbody td:first-child,#screen-markets thead th:first-child{padding-left:var(--sp4)}
@media(min-width:821px){
  /* desktop sidebar collapse → narrow icon-rail (MCT pattern; toggled via footer chevron) */
  body.rail-collapsed{grid-template-columns:68px 1fr}
  /* desktop: left list/table card fills the equal-height row (no void), driven by the right detail card */
  #screen-violators .row2 > .card:first-child,#screen-markets .row2 > .card:first-child{display:flex;flex-direction:column}
  #screen-violators .vio-scroll,#screen-markets .vio-scroll{flex:1 1 0;min-height:0;max-height:none;overflow-y:auto}
  #screen-hotels .row2 > .card:first-child{display:flex;flex-direction:column}
  #screen-hotels .row2 > .card:first-child > .table-scroll{flex:1 1 0;min-height:0;max-height:1170px;overflow:auto}  /* fills + scrolls, cap ~15 rows */
}
#rail-backdrop{position:fixed;inset:0;background:rgba(15,15,25,.42);z-index:80;display:none}

/* 821–1180: the 732px control cluster no longer fits beside the title — wrap it to
   its own row instead of growing a page-level horizontal scrollbar (P1-2). */
@media(max-width:1180px){
  .topbar{flex-wrap:wrap;row-gap:var(--sp3)}
  .topbar-right{flex-basis:100%;margin-left:0;flex-wrap:wrap;justify-content:flex-start}
}
@media(max-width:1100px){
  .hero-v2,.row2,.row2.r15,.row2.r14,.row2.r17{grid-template-columns:1fr}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  /* single column: the right detail card no longer drives the list height — restore the
     lists' own height, else flex:1+min-height:0 collapses them to 0px (P1-1). */
  #screen-violators .row2 > .card:first-child,#screen-markets .row2 > .card:first-child,#screen-hotels .row2 > .card:first-child{display:block}
  #screen-violators .vio-scroll,#screen-markets .vio-scroll{flex:none;max-height:420px;overflow-y:auto}
  #screen-hotels .row2 > .card:first-child > .table-scroll{flex:none;max-height:520px;overflow:auto}
}
@media(max-width:820px){
  body{grid-template-columns:1fr}
  .rail{position:fixed;z-index:90;top:0;left:0;height:100vh;width:266px;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--sh-lg)}
  .rail.open{transform:none}
  #rail-backdrop.show{display:block}
  .hamburger{display:grid}
  .rail-collapse{display:none}/* collapse-to-icon is desktop-only; mobile uses the drawer */
  .topbar{padding:var(--sp3) var(--sp4);flex-wrap:wrap;gap:var(--sp3)}
  .page-title{font-size:17px}
  .page-sub{display:none}
  .topbar-right{gap:var(--sp2);flex-wrap:wrap;width:100%;margin-left:0}
  .content{padding:var(--sp4);gap:var(--sp4)}
  .kpi-strip{grid-template-columns:1fr 1fr;gap:var(--sp3)}
  .gallery{grid-template-columns:1fr 1fr;gap:var(--sp3)}
  .big{font-size:26px}.kpi .big{font-size:24px}
  .hero-money .val{font-size:26px}
  .hero-money .val span{font-size:15px}
  .table-scroll table{min-width:560px}
  .popover{width:min(280px,84vw);left:auto;right:-8px}
  .action{flex-wrap:wrap}
  .action .spacer{display:none}
  .action .btn-row{width:100%;margin-top:var(--sp2)}
  .pack .btn-primary,.pack select{width:100%}
  .ring{width:96px;height:96px}.ring .num{font-size:28px}
  /* touch targets ≥40px (P2-6): the audit measured 36px icons, 31px pills, 15px info dots */
  .icon-btn{width:40px;height:40px}
  .seg button{padding:5px 12px;min-height:40px}
  .hotel-btn{min-height:40px}
  .subtab button{padding:7px 14px;min-height:40px}
  .info{width:22px;height:22px;font-size:11px}
  #metric-toggle button{min-height:38px}
  .nav-item{padding:12px var(--sp3)}
}
@media(max-width:430px){
  .kpi-strip,.gallery{grid-template-columns:1fr}
  .ph-body{flex-direction:column;align-items:flex-start;gap:var(--sp4)}
  .ph-drivers{width:100%}
  .cd-kpis{gap:var(--sp4)}
}

/* ============ DARK THEME ============ */
html[data-theme="dark"]{
  --bg:#0a142a; --surface:#122140; --surface-2:#18294f;
  --border:#22304d; --border-strong:#2e4063;
  --text:#f4f6fb; --text-2:#c3cfe4; --muted:#8595b0;
  --accent:#5b8cff; --accent-2:#7aa3ff; --accent-soft:rgba(91,140,255,.16); --accent-strong:#4d7fe8;
  --brand:#d04a5f; --brand-strong:#b83a4e; --brand-soft:rgba(208,74,95,.16);
  --bad:#d04a5f; --bad-soft:rgba(208,74,95,.16);
  --good:#5b8cff; --good-soft:rgba(91,140,255,.16);
  --warn:#d8982f; --warn-soft:rgba(216,152,47,.16);
  --neutral:#8595b0; --neutral-soft:#18294f;
  --sh-sm:0 1px 2px rgba(0,0,0,.4); --sh-md:0 4px 16px -4px rgba(0,0,0,.5); --sh-lg:0 18px 48px -12px rgba(0,0,0,.62);
}
/* dark: white 13px button label needs ≥4.5:1 — brand-strong gives 5.6 (brand was 4.35) */
html[data-theme="dark"] .btn-primary{background:var(--brand-strong);border-color:var(--brand-strong)}
html[data-theme="dark"] .topbar{background:rgba(14,14,19,.82)}
html[data-theme="dark"] .seg button.on,html[data-theme="dark"] .hotel-btn{box-shadow:none}
html[data-theme="dark"] .hero-money{background:radial-gradient(120% 140% at 100% 0%, #2a1722 0%, rgba(0,0,0,0) 55%),var(--surface);border-color:#3a2330}
html[data-theme="dark"] .hero-money::after{background-image:radial-gradient(rgba(255,93,98,.09) 1px,transparent 1px)}
html[data-theme="dark"] .hero-score{background:radial-gradient(120% 140% at 0% 0%, #203a68 0%, rgba(0,0,0,0) 58%),var(--surface);border-color:#2a3f6b}
html[data-theme="dark"] .hero-score::after{background-image:radial-gradient(rgba(91,140,255,.14) 1px,transparent 1px)}
html[data-theme="dark"] .ev .shot,html[data-theme="dark"] .ev-mini .e{background-image:linear-gradient(135deg,#23212f,#191921)}
html[data-theme="dark"] .note-banner{background:var(--accent-soft);border-color:#22324f;color:var(--text-2)}
html[data-theme="dark"] #login{background:radial-gradient(120% 120% at 0% 0%, #131c2e 0%, rgba(0,0,0,0) 44%),radial-gradient(120% 120% at 100% 100%, #16223b 0%, rgba(0,0,0,0) 46%),var(--bg)}
html[data-theme="dark"] .login-hero{background:radial-gradient(120% 120% at 0% 0%, #2c1620 0%, rgba(0,0,0,0) 52%),radial-gradient(120% 130% at 100% 100%, #14223b 0%, rgba(0,0,0,0) 55%),var(--surface-2)}
html[data-theme="dark"] .login-hero::after{background-image:radial-gradient(rgba(77,139,245,.07) 1px,transparent 1px)}
html[data-theme="dark"] #lightbox img{background:var(--surface)}

/* ───────── product tour (Driver.js) — themed to the design system, dark-aware via vars ───────── */
.driver-popover{font-family:var(--font-body);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px -12px rgba(20,20,40,.35);max-width:320px}
.driver-popover-title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text)}
.driver-popover-description{color:var(--text-2);font-size:13px;line-height:1.5}
.driver-popover-progress-text{color:var(--muted);font-size:11px;font-family:var(--font-mono)}
.driver-popover-arrow{display:none}
.driver-popover-footer button{font-family:var(--font-body);font-weight:600;font-size:12.5px;border-radius:8px;text-shadow:none;padding:6px 12px;transition:filter .15s}
/* .driver-popover-footer button (CDN driver.css) outranks a bare class — match its specificity */
.driver-popover-footer button.driver-popover-next-btn{background:var(--brand);color:#fff;border:1px solid var(--brand)}  /* BS primary = crimson (accent-blue is the MG pattern) */
.driver-popover-next-btn:hover{filter:brightness(1.06)}
.driver-popover-prev-btn{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.driver-popover-close-btn{color:var(--muted)}
.driver-popover-close-btn:hover{color:var(--text)}
/* welcome / finish steps — a proper centered card instead of a tiny floating tooltip */
.driver-popover.rr-tour-hero{max-width:460px;padding:28px 30px 22px;text-align:center;border-radius:18px;border-left:4px solid var(--brand)}
.driver-popover.rr-tour-hero .driver-popover-title{font-size:21px;line-height:1.25;margin-bottom:8px}
.driver-popover.rr-tour-hero .driver-popover-description{font-size:14px;line-height:1.6}
.driver-popover.rr-tour-hero .driver-popover-progress-text{display:none}
.driver-popover.rr-tour-hero .driver-popover-footer{margin-top:18px;justify-content:center;gap:10px}