/* MediaLens design system - consolidated tokens + components.
   Forked from adlens (~/Projects/adray/public/app/index.html) - same visual language
   (white/ink/Heebo/border-radius:0/borders-not-shadows/RTL/tabular numerals), single
   MediaLens accent swap. This is the ONE shared file every page links - no per-page :root. */
:root { --ink:#16161A; --gray:#74747E; --faint:#E4E4E9; --accent:#2F5AF0; --accent-pressed:#2440C8; --ok:#1B7F4B; --amber:#E6A23C; --wash:#FAFAFB; --radius:0; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Heebo',sans-serif; color:var(--ink); background:#fff; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px 80px; }
.brand { font-weight:900; letter-spacing:-.02em; direction:ltr; unicode-bidi:isolate; display:inline-block; }
.brand .dot { color:var(--accent); }
.ad { direction:ltr; unicode-bidi:isolate; }
.bdot { color:var(--accent); }
.num { font-variant-numeric:tabular-nums; }
a { color:inherit; }
button { font-family:inherit; cursor:pointer; }

/* login */
#login { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; }
#login .brand { font-size:44px; }
#login .sub { color:var(--gray); margin:10px 0 42px; font-size:17px; }
.platforms { display:flex; align-items:center; gap:18px; margin-top:46px; }
.platforms img { height:20px; width:20px; opacity:.85; }
.platforms .cap { font-size:12.5px; color:var(--gray); }
.chip { display:inline-flex; align-items:center; gap:8px; }
.chip img { height:16px; width:16px; vertical-align:-3px; }
#login form { display:flex; flex-direction:column; gap:12px; width:320px; }
#login input { padding:13px 16px; border:1px solid var(--faint); font-size:16px; font-family:inherit; direction:ltr; text-align:center; }
#login input:focus { outline:none; border-color:var(--ink); }
#login button { padding:13px; background:var(--ink); color:#fff; border:none; font-size:16px; font-weight:700; }
#login .msg { font-size:14px; color:var(--gray); text-align:center; min-height:20px; margin-top:8px; }
#login .msg.err { color:var(--accent); }

/* app */
#app { display:none; }
header { display:flex; align-items:baseline; justify-content:space-between; padding:34px 0 26px; border-bottom:1px solid var(--faint); }
header .brand { font-size:24px; }
header .side { display:flex; align-items:baseline; gap:20px; font-size:14px; color:var(--gray); }
header select { font-family:inherit; font-size:14px; border:none; border-bottom:1px solid var(--faint); background:none; padding:2px 4px; color:var(--ink); }
header input[type="date"] { font-family:inherit; font-size:13px; border:none; border-bottom:1px solid var(--faint); background:none; padding:2px; color:var(--ink); direction:ltr; }
header .logout { background:none; border:none; color:var(--gray); font-size:14px; }

h1 { font-size:34px; font-weight:900; margin:40px 0 6px; letter-spacing:-.01em; }
.period { color:var(--gray); font-size:15px; }
.coverage { display:none; margin-top:10px; font-size:14px; color:#8A5A00; background:#FFF7E8; border:1px solid #F0DFB8; padding:10px 14px; max-width:720px; }
.newtenant { border:1px solid var(--faint); border-inline-start:3px solid var(--accent); padding:34px 38px; margin-top:34px; max-width:720px; }
.newtenant .et-title { font-size:22px; font-weight:900; letter-spacing:-.01em; }
.newtenant p { font-size:16px; line-height:1.6; margin-top:12px; color:var(--ink); }
.newtenant p.et-hint { font-size:14px; color:var(--gray); margin-top:10px; }
/* new-tenant mode: hide the empty data sections, keep only the waiting state */
.wrap.empty .kpis, .wrap.empty .kicker, .wrap.empty #digest, .wrap.empty #findings,
.wrap.empty .ask, .wrap.empty .suggest, .wrap.empty .split, .wrap.empty .split-legend,
.wrap.empty .tscroll, .wrap.empty .chart, .wrap.empty #findingsSec, .wrap.empty #bottomLine { display:none !important; }
.kicker { font-size:13px; font-weight:700; color:var(--gray); letter-spacing:.13em; margin:52px 0 18px; }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; border-top:1px solid var(--faint); }
.kpi { padding:22px 0 14px; border-left:1px solid var(--faint); padding-inline-start:22px; position:relative; }
.kpi:first-child { padding-inline-start:0; }
.kpi:last-child { border-left:none; }
.kpi .v { font-size:36px; font-weight:900; letter-spacing:-.02em; line-height:1.1; }
.kpi .l { font-size:13.5px; color:var(--gray); margin-top:3px; }
.kpi.leak .v { color:var(--accent); }
.kpi .delta { font-size:12.5px; font-weight:700; margin-top:8px; display:inline-block; }
.kpi .delta.up { color:var(--ok); } .kpi .delta.down { color:var(--accent); } .kpi .delta.flat { color:var(--gray); font-weight:400; }
.kpi .spark { display:block; margin-top:10px; width:100%; max-width:170px; height:26px; }
.kpi .actual { font-size:12.5px; color:var(--gray); margin-top:8px; }
.kpi .actual b { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700; }
.split { display:flex; height:10px; margin:16px 0 8px; overflow:hidden; }
.split div { height:100%; }
.split-legend { display:flex; gap:22px; font-size:13px; color:var(--gray); margin-bottom:14px; }
.split-legend b { color:var(--ink); font-variant-numeric:tabular-nums; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:6px; vertical-align:1px; }
.hint { font-size:12.5px; color:var(--gray); font-weight:400; letter-spacing:0; }
.prio-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-inline-end:8px; background:var(--gray); vertical-align:1px; }
.prio-dot.p1 { background:var(--accent); } .prio-dot.p2 { background:#E6A23C; }
/* Ask MediaLens */
.ask { border:1px solid var(--faint); margin-top:8px; }
.ask form { display:flex; }
.ask input { flex:1; border:none; padding:14px 16px; font-size:15.5px; font-family:inherit; background:none; }
.ask input:focus { outline:none; }
.ask button { border:none; background:var(--ink); color:#fff; padding:0 22px; font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer; }
.ask button:disabled { background:var(--gray); }
.qa { padding:0 16px; }
.qa .q { font-weight:700; font-size:14.5px; margin:14px 0 6px; color:var(--gray); }
.qa .a { font-size:15.5px; line-height:1.6; padding-bottom:14px; border-bottom:1px solid var(--faint); max-width:860px; }
.qa .a:last-child { border-bottom:none; }
.suggest { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.suggest button { background:#FAFAFB; border:1px solid var(--faint); padding:5px 12px; font-size:12.5px; color:var(--ink); font-family:inherit; cursor:pointer; }

table { width:100%; border-collapse:collapse; font-size:15.5px; }
th { text-align:right; font-size:12.5px; font-weight:700; color:var(--gray); padding:0 0 10px; border-bottom:1.5px solid var(--ink); }
td { padding:12px 0; border-bottom:1px solid var(--faint); }
th.n, td.n { text-align:left; direction:ltr; font-variant-numeric:tabular-nums; }
td .zero { color:var(--accent); font-weight:700; }
#campaigns tbody tr.camp { cursor:pointer; }
#campaigns tbody tr.camp:hover td { background:#FAFAFB; }
td .chev { color:var(--gray); font-size:11px; margin-inline-end:8px; display:inline-block; transition:transform .15s; }
tr.open .chev { transform:rotate(90deg); }
tr.drill > td { padding:0 24px 18px; border-bottom:1px solid var(--faint); }
tr.drill table { font-size:13.5px; }
tr.drill th { border-bottom:1px solid var(--gray); font-size:11.5px; }
tr.drill td { padding:8px 0; }
.drill-note { color:var(--gray); font-size:13px; padding:10px 0; }

.chart { margin-top:6px; }
.chart svg { width:100%; height:auto; display:block; }

.finding { border-top:1px solid var(--faint); padding:24px 0; }
.finding .top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.finding h3 { font-size:19px; font-weight:700; }
.finding .impact { color:var(--accent); font-weight:900; font-size:19px; white-space:nowrap; }
.finding p { color:var(--ink); font-size:15.5px; line-height:1.55; margin-top:8px; max-width:820px; }
.finding .action { margin-top:12px; border-inline-start:2px solid var(--ink); padding:3px 14px 3px 0; font-size:14.5px; line-height:1.5; color:var(--ink); max-width:820px; }
.finding .action b { color:var(--gray); font-weight:700; }
.finding details { margin-top:10px; font-size:14px; }
.finding summary { cursor:pointer; color:var(--gray); }
.ev { margin-top:10px; border:1px solid var(--faint); background:#FAFAFB; padding:14px 16px; }
.ev table { font-size:13.5px; }
.ev td, .ev th { padding:7px 0 7px 18px; }
.ev .kv { display:flex; gap:8px; padding:4px 0; font-size:13.5px; }
.ev .kv b { font-variant-numeric:tabular-nums; }
.ev .note { color:var(--gray); font-size:12.5px; margin-top:8px; }
.prio { font-size:12px; font-weight:700; color:var(--gray); letter-spacing:.08em; }
.prio.p1 { color:var(--accent); }
.finding.resolving { opacity:.35; transition:opacity .3s; }
.finding .resolve { margin-top:12px; background:none; border:1px solid var(--faint); padding:6px 14px; font-size:13px; color:var(--gray); font-family:inherit; }
.finding .resolve:hover { border-color:var(--ink); color:var(--ink); }
.finding .resolve:disabled { opacity:.5; }
.finding .agree { margin-top:12px; margin-inline-end:8px; background:none; border:1px solid var(--faint); padding:6px 14px; font-size:13px; color:var(--gray); font-family:inherit; }
.finding .agree:hover { border-color:var(--ok); color:var(--ok); }
.finding .agree.on { border-color:var(--ok); color:var(--ok); font-weight:700; }
.finding .agree:disabled { opacity:.5; }
.agree-count { font-size:12.5px; color:var(--gray); font-weight:400; letter-spacing:0; }
.agree-count b { color:var(--ok); font-weight:700; }

/* bottom line (MER) band */
.bottomline { border-top:2px solid var(--ink); margin-top:14px; padding:16px 0 15px; display:none; }
.bottomline .bl-line1 { display:flex; align-items:baseline; gap:8px 14px; flex-wrap:wrap; }
.bottomline .bl-kicker { font-size:17.5px; font-weight:700; color:var(--gray); }
.bottomline .bl-sent { font-size:17.5px; }
.bottomline .bl-sent b { font-weight:900; font-size:20px; }
.bottomline .bl-verdict { font-size:16px; font-weight:900; margin-top:10px; line-height:1.5; max-width:820px; }
.bottomline .bl-verdict.win { color:var(--ok); }
.bottomline .bl-verdict.lose { color:var(--accent); }
.bottomline .bl-verdict.unknown { color:var(--ink); }
.bottomline .bl-verdict b { font-size:19px; }
.bottomline .bl-sub { font-size:13px; color:var(--gray); margin-top:9px; }
.bottomline .bl-sub .linklike { font-size:13px; }
.bottomline .bl-cta { display:inline-block; margin-top:10px; background:var(--ink); color:#fff; border:none; font-family:inherit; font-size:13.5px; font-weight:700; padding:8px 16px; cursor:pointer; }
.bottomline .bl-cta:hover { background:#000; }

/* "how we computed" explainers */
.linklike { background:none; border:none; padding:0; color:var(--gray); font-size:12.5px; text-decoration:underline; text-underline-offset:3px; font-family:inherit; cursor:pointer; }
.linklike:hover { color:var(--ink); }
.modal { position:fixed; inset:0; background:rgba(20,20,26,.55); display:none; align-items:center; justify-content:center; padding:18px; z-index:1000; }
.modal.open { display:flex; }
.modal .card { background:#fff; max-width:560px; width:100%; padding:28px 30px; border:1px solid var(--ink); max-height:86vh; overflow:auto; }
.modal h3 { font-size:19px; font-weight:900; }
.modal p { font-size:15px; line-height:1.6; margin-top:10px; }
.modal .close { margin-top:18px; background:var(--ink); color:#fff; border:none; padding:9px 22px; font-size:14px; font-weight:700; }
.modal .chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.modal .chips button { background:none; border:1px solid var(--faint); padding:8px 14px; font-size:13.5px; color:var(--ink); font-family:inherit; }
.modal .chips button:hover { border-color:var(--ink); }
.modal .chips button.on { border-color:var(--ink); background:var(--ink); color:#fff; font-weight:700; }
.modal .chipmsg { font-size:13px; margin-top:8px; min-height:16px; color:var(--gray); }

.empty { color:var(--gray); padding:30px 0; font-size:15px; }
.digest { border:1px solid var(--faint); background:#FAFAFB; padding:22px 26px; margin-top:6px; }
.digest .date { font-size:12.5px; color:var(--gray); margin-bottom:8px; }
.digest p { font-size:16.5px; line-height:1.6; max-width:860px; }
.runbtn { background:none; border:1px solid var(--faint); padding:6px 14px; font-size:13px; color:var(--ink); font-family:inherit; }
.runbtn:disabled { color:var(--gray); }
footer { margin-top:80px; padding-top:20px; border-top:1px solid var(--faint); display:flex; justify-content:space-between; color:var(--gray); font-size:13.5px; }
@media (max-width:720px){ .kpis{grid-template-columns:repeat(2,1fr);} .kpi{border-left:none;padding-inline-start:0;}
  header{flex-wrap:wrap; gap:10px;} .hover-hint{display:none;} }
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tscroll table { min-width:640px; }
.kpi.leak { cursor:pointer; }
.kpi.leak:hover .v { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.ask .a, .qa .a { white-space:pre-line; }