:root{
  color-scheme:light dark;
  --bg:#f4f6f9; --surface:#fff; --surface-2:#fafbfd; --surface-3:#f1f4f8; --sunken:#f1f4f8;
  --line:#e6eaf1; --border-2:#d5dbe6; --hover:#f3f6fb;
  --ink:#0f1622; --ink-2:#3b4557; --ink-3:#727c8e; --ink-4:#98a1b2;
  --accent:#b06e12; --accent-2:#8f5709; --accent-ink:#fff; --accent-soft:#fbeeda; --accent-line:#ebd4ac;
  --ok:#137a50; --pos:#137a50; --pos-soft:#e4f3ec; --ok-bg:#e4f3ec;
  --bad:#bc3a34; --neg:#bc3a34; --neg-soft:#fbe9e7; --bad-bg:#fbe9e7;
  --warn:#9a6a12; --warn-soft:#f8eed6; --warn-bg:#f8eed6; --muted-bg:#f1f4f8;
  --shadow:0 1px 2px rgba(16,22,34,.04),0 4px 16px rgba(16,22,34,.05);
  --shadow-lg:0 8px 40px rgba(16,22,34,.14);
  --rail:#0e1420; --rail-2:#161e2b; --rail-line:#232e3f; --rail-ink:#aeb7c6; --rail-ink-2:#6b7789;
  --r:11px; --r-sm:8px; --r-xs:6px;
  --f-disp:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-ui:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080b11; --surface:#0f141d; --surface-2:#131a24; --surface-3:#1a222e; --sunken:#1a222e;
  --line:#212b39; --border-2:#2c3948; --hover:#161e29;
  --ink:#ebeff6; --ink-2:#aeb8c7; --ink-3:#7c8698; --ink-4:#5b6474;
  --accent:#e7a73e; --accent-2:#f0ba5f; --accent-ink:#1b1206; --accent-soft:#2a2010; --accent-line:#4a3a1b;
  --ok:#41c287; --pos:#41c287; --pos-soft:#10241b; --ok-bg:#10241b;
  --bad:#f0655c; --neg:#f0655c; --neg-soft:#2a1614; --bad-bg:#2a1614;
  --warn:#e1a63c; --warn-soft:#251c0e; --warn-bg:#251c0e; --muted-bg:#1a222e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 10px 44px rgba(0,0,0,.6);
  --rail:#0a0e15; --rail-2:#111825; --rail-line:#1e2836; --rail-ink:#9aa5b5; --rail-ink-2:#5e6a7c;
}}
:root[data-theme="dark"]{
  --bg:#080b11; --surface:#0f141d; --surface-2:#131a24; --surface-3:#1a222e; --sunken:#1a222e;
  --line:#212b39; --border-2:#2c3948; --hover:#161e29;
  --ink:#ebeff6; --ink-2:#aeb8c7; --ink-3:#7c8698; --ink-4:#5b6474;
  --accent:#e7a73e; --accent-2:#f0ba5f; --accent-ink:#1b1206; --accent-soft:#2a2010; --accent-line:#4a3a1b;
  --ok:#41c287; --pos:#41c287; --pos-soft:#10241b; --ok-bg:#10241b;
  --bad:#f0655c; --neg:#f0655c; --neg-soft:#2a1614; --bad-bg:#2a1614;
  --warn:#e1a63c; --warn-soft:#251c0e; --warn-bg:#251c0e; --muted-bg:#1a222e;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 10px 44px rgba(0,0,0,.6);
  --rail:#0a0e15; --rail-2:#111825; --rail-line:#1e2836; --rail-ink:#9aa5b5; --rail-ink-2:#5e6a7c;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 var(--f-ui)}
a{color:var(--accent)}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:650;letter-spacing:-.01em}
h1{font-size:24px}
h2{font-size:16px}
p{margin:0 0 12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.muted{color:var(--ink-3)}
.dim{opacity:.55}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.hide{display:none}
.spacer{flex:1}

/* ── the shell: deep-ink left rail + slim sticky top bar ──────────────────
   The cockpit's identity. .app is the two-column grid; .rail is the dark
   navigation rail (dark in both themes — it is ink, not surface); .main is
   the scrolling column with its own sticky .top bar and a padded .content
   well. layout() in html.ts emits exactly this frame. */
/* minmax(0,1fr), NOT a bare 1fr: 1fr means minmax(auto,1fr), whose auto minimum is the main column's
   min-content — a wide table. Safari (iOS especially) then refuses to shrink the track below that, so
   the table's own .scroll container never becomes narrower than the table and cannot scroll, and the
   columns are clipped with no way to reach them. minmax(0,1fr) pins the minimum to 0 so the track
   always fits the viewport and the table scrolls inside .scroll as intended. */
.app{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
@media (max-width:900px){.app{grid-template-columns:64px minmax(0,1fr)}}

.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;border-right:1px solid var(--rail-line)}
.rail .brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;text-decoration:none}
.rail .brand .mark{width:30px;height:30px;border-radius:var(--r-sm);flex:none;
  background:linear-gradient(150deg,#b06e12,#7c4a08);display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(176,110,18,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.rail .brand .mark svg{width:16px;height:16px}
.rail .brand .wm{font-family:var(--f-disp);font-weight:700;font-size:18px;letter-spacing:-.02em;
  color:#fff;line-height:1}
.rail .brand .wm small{display:block;font-family:var(--f-ui);font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rail-ink-2);margin-top:3px}
.rail .nav{display:flex;flex-direction:column;gap:1px;padding:6px 12px;overflow-y:auto;flex:1}
.rail .nav .sec{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rail-ink-2);padding:16px 12px 7px;font-weight:600}
.rail .nav a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--r-sm);
  color:var(--rail-ink);font-weight:500;font-size:13.5px;position:relative;
  transition:background .12s,color .12s;text-decoration:none}
.rail .nav a svg{width:17px;height:17px;flex:none;opacity:.82}
.rail .nav a:hover{background:var(--rail-2);color:#fff}
.rail .nav a.on{background:var(--rail-2);color:#fff}
.rail .nav a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.rail .nav a.on svg{opacity:1;color:var(--accent-2)}
.rail .nav a .lbl{flex:1}
.rail-foot{padding:12px;border-top:1px solid var(--rail-line);display:flex;align-items:center;gap:10px}
.rail-foot .av{width:30px;height:30px;border-radius:var(--r-sm);flex:none;display:grid;
  place-items:center;color:#fff;font-weight:600;font-size:12px;
  background:linear-gradient(140deg,#3a4658,#232e3f)}
.rail-foot .who{line-height:1.25;min-width:0;display:flex;flex-direction:column}
.rail-foot .who b{font-size:12px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:150px}
.rail-foot .who span{font-size:11px;color:var(--rail-ink-2)}
@media (max-width:900px){
  .rail .brand .wm,.rail .nav a .lbl,.rail .nav .sec,.rail-foot .who{display:none}
  .rail .nav a{justify-content:center}
  .rail .brand{justify-content:center;padding:18px 0}
}

/* min-width:0 lets the minmax(0,1fr) grid track shrink below a wide table's content so the table's
   own .scroll container becomes the horizontal scroller. Deliberately NO overflow-x:clip/hidden here:
   on iOS Safari a clipped ancestor around a sticky-celled scroll container stops the container from
   scrolling at all, so the table gets clipped and "stuck" in portrait. Without it the worst case is a
   page that scrolls sideways (usable); the intended case is the table scrolling inside .scroll. */
.main{min-width:0;display:flex;flex-direction:column}
.main-bare{max-width:1240px;margin:0 auto;padding:26px 20px 72px}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:13px 26px}
.top .top-title h1{font-family:var(--f-disp);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
.top .top-title .crumb{color:var(--ink-3);font-size:12.5px;margin-top:1px}
.top .who,.top form{margin:0}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--ink-2);
  box-shadow:var(--shadow);cursor:pointer;padding:0}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.iconbtn svg{width:16px;height:16px}
.acct{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:6px 11px;box-shadow:var(--shadow);cursor:pointer;text-align:left}
.acct .dot{width:7px;height:7px;border-radius:50%;background:var(--pos);
  box-shadow:0 0 0 3px var(--pos-soft);flex:none}
.acct b{font-size:12.5px;font-weight:600;display:block}
.acct span{font-size:11px;color:var(--ink-3)}
.range{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:3px;box-shadow:var(--shadow);gap:2px}
.range a,.range button,.range span{border:0;background:transparent;color:var(--ink-3);font:inherit;
  font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-xs);text-decoration:none}
.range a:hover,.range button:hover{color:var(--ink);cursor:pointer}
.range a.on,.range button.on,.range span.on{background:var(--ink);color:var(--surface)}
.range a.on:hover,.range button.on:hover{color:var(--surface)}
@media (max-width:1080px){.acct span{display:none}}
/* The date-range control lives in the toolbar next to the table: preset chips + a Custom popover. */
.daterange{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.daterange .range{flex-wrap:wrap}

.content{padding:22px 26px 60px;max-width:1520px;width:100%;min-width:0}
/* Full-bleed opt-in (layout({wide})): the reporting console fills the whole column, edge to edge,
   so its wide table + KPI strip use every pixel the rail leaves. Padding aligns the content with
   the sticky top bar; min-width:0 lets the pane shrink so wide children scroll inside their own
   .scroll container instead of pushing the page body sideways. Other pages keep the measured cap. */
.content-wide{max-width:none;min-width:0}
@media (max-width:640px){.content{padding:18px 16px 52px}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 22px}
.lede{margin:0;color:var(--ink-3);max-width:62ch}
/* Revenue-pending banner (Today/Yesterday, or any window past the KAYAK cutoff): a soft warn strip
   that keeps a not-yet-reported day from reading as zero performance. */
.rnotice{margin:12px 0 0;padding:10px 14px;border:1px solid var(--warn);border-radius:var(--r-sm);
  background:var(--warn-bg);color:var(--warn);font-size:13px;line-height:1.5;max-width:none}
.rnotice b{font-weight:700}
.rnotice-tag{display:inline-block;margin-right:8px;padding:1px 9px;border-radius:999px;
  background:var(--warn);color:var(--surface);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;vertical-align:1px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:0 0 18px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0 0 14px}
.card-note{color:var(--ink-3);font-size:13px}
.card-foot{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Live Events — expandable per-event CAPI rows: a scannable summary line that opens to every field
   plus Meta's full response. Native <details>, so no inline script under the strict admin CSP. */
.evlist{display:flex;flex-direction:column;gap:6px}
.evempty{color:var(--ink-3);margin:2px 0 0}
.evrow{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.evrow>summary.evsum{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:64px auto minmax(58px,auto) 1fr auto auto;gap:12px;align-items:center;
  padding:9px 14px;font-size:13px}
.evrow>summary.evsum::-webkit-details-marker{display:none}
.evrow>summary.evsum:hover{background:var(--muted-bg)}
.evrow[open]>summary.evsum{border-bottom:1px solid var(--line)}
.evtime{color:var(--ink-3);font-variant-numeric:tabular-nums}
.evval{font-variant-numeric:tabular-nums;font-weight:600}
.evdest{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evbody{padding:12px 14px;background:var(--surface-2)}
.evkv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0 0 12px;font-size:12.5px}
.evkv dt{color:var(--ink-3);font-weight:600}
.evkv dd{margin:0;word-break:break-word}
.evkv code{font-size:12px}
.fbresp-head{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.fbresp{margin:0;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:360px;
  background:var(--muted-bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;
  font-size:12px;line-height:1.5}
/* Event Match Quality card: per-event score + identifier coverage chips (green ≥90%, amber ≥25%, red below). */
.emq-list{display:flex;flex-direction:column;gap:10px}
.emq-row{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
.emq-ev{display:flex;align-items:center;gap:10px;font-size:13px}
.emq-covs{display:flex;flex-wrap:wrap;gap:5px}
.emq-cov{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.emq-ok{background:var(--ok-bg);color:var(--ok)}
.emq-warn{background:var(--warn-bg);color:var(--warn)}
.emq-bad{background:var(--bad-bg);color:var(--bad)}
.emq-muted{background:var(--muted-bg);color:var(--ink-3)}
.emq-none{font-size:11px;color:var(--ink-3)}
@media (max-width:640px){
  .evrow>summary.evsum{grid-template-columns:56px auto 1fr auto;gap:8px}
  .evrow>summary.evsum .evdest{display:none}
  .evkv{grid-template-columns:1fr}
  .evkv dt{margin-top:4px}
}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow)}
.stat-label{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.stat-value{font-family:var(--f-disp);font-size:30px;line-height:1.15;font-weight:600;
  font-variant-numeric:tabular-nums;margin:6px 0 0;letter-spacing:-.02em}
.stat-note{font-size:13px;color:var(--ink-2);margin:4px 0 0}
.stat.is-bad .stat-value{color:var(--bad)}
.stat.is-warn .stat-value{color:var(--warn)}
.stat.is-ok .stat-value{color:var(--ok)}

.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow-x:auto;margin:0 0 4px;max-width:100%;min-width:0}
.tablewrap .scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
caption{text-align:left;color:var(--ink-3);font-size:13px;padding:10px 14px 4px}
th,td{padding:9px 12px;text-align:left;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  font-weight:600;white-space:nowrap;border-bottom:1px solid var(--line)}
tbody tr+tr td{border-top:1px solid var(--line)}
tbody tr:hover td{background:var(--hover)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.money{font-weight:600;font-variant-numeric:tabular-nums}
.empty{color:var(--ink-3);padding:14px 12px}

/* ── dense reporting table (opt-in) ──────────────────────────────────────
   .tablewrap now gives every table a card shell, so existing pages get the
   new surface/border/shadow language for free. A table that also carries
   .rtable opts into the tighter, right-aligned, sticky-header treatment
   the reporting views need; everything else keeps the plain left-aligned
   defaults above, so pages that don't use it are unaffected. */
table.rtable{min-width:920px}
table.rtable thead th{position:sticky;top:0;background:var(--surface-2);z-index:2;
  text-align:right}
table.rtable thead th.l{text-align:left}
table.rtable thead th.act{color:var(--accent)}
table.rtable tbody td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.rtable tbody td.l{text-align:left;white-space:normal}
table.rtable tfoot td{padding:12px;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums;background:var(--surface-2);
  border-top:2px solid var(--border-2);font-size:14px}
table.rtable tfoot td.l{text-align:left;font-family:var(--f-disp)}

.grp{cursor:pointer}
.grp>td{font-weight:600}
.cname{display:flex;align-items:center;gap:11px}
.cname.tight{gap:9px}
.cname .txt b{display:block;font-weight:600;font-size:13.5px}
.cname .txt small{color:var(--ink-3);font-size:11.5px;font-family:var(--f-mono)}
.chev{width:19px;height:19px;border-radius:var(--r-xs);display:grid;place-items:center;
  color:var(--ink-3);border:1px solid var(--line);flex:none;transition:transform .18s}
.grp.open .chev{transform:rotate(90deg);color:var(--accent);
  border-color:var(--accent-line);background:var(--accent-soft)}
.child{display:none;background:var(--surface-2)}
.child.show{display:table-row}
.child .cname{padding-left:30px}
/* Drilldown indent levels: ad set (lvl1) under campaign, ad (lvl2) under ad set. */
.cname.lvl1{padding-left:26px}
.cname.lvl2{padding-left:52px}
/* An ad-set row is a child AND a grp: a slightly lighter ground than a leaf child. */
.child.grp{background:var(--surface-3)}
.flag{font-size:18px}

.field{display:block;margin:0 0 14px;max-width:44rem}
.field-label{display:block;font-size:14px;font-weight:600;margin:0 0 5px}
.field-hint{display:block;font-size:13px;color:var(--ink-3);margin:5px 0 0}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:8px 10px}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{min-height:96px;resize:vertical}
input:disabled,textarea:disabled,input[readonly]{background:var(--sunken);color:var(--ink-2)}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 14px}
legend{font-size:13px;font-weight:600;color:var(--ink-2);padding:0 6px}
.row{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin:0 0 10px}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.inline .field{flex:1 1 190px;margin:0}

.btn{font:inherit;font-weight:600;font-size:14px;line-height:1.2;cursor:pointer;
  padding:9px 14px;border-radius:var(--r-xs);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);width:auto;box-shadow:var(--shadow)}
.btn:hover{background:var(--hover)}
.btn[disabled]{opacity:.55;cursor:default}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border-color:var(--accent-2);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-danger{color:var(--bad);border-color:var(--bad)}
.btn-quiet{background:none;border-color:transparent;color:var(--ink-2);
  padding:6px 8px;box-shadow:none}
.btn-quiet:hover{color:var(--ink);background:var(--hover)}

.badge{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;
  padding:1px 8px;border-radius:20px;background:var(--muted-bg);color:var(--ink-2);
  white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-bad{background:var(--bad-bg);color:var(--bad)}
.badge-info{background:var(--muted-bg);color:var(--accent)}

/* ── reporting chips: ROI, status pills, ABO/CBO tags ────────────────────
   Green/red (--pos/--neg) is reserved for money — profit, ROI. Status
   and format stay on the neutral/amber scale so color alone tells you
   whether a number is good or bad, not just what kind of row it is. */
.roi{font-weight:700;padding:2px 8px;border-radius:var(--r-xs);display:inline-block;
  min-width:58px;text-align:center;font-variant-numeric:tabular-nums}
.roi.up{background:var(--pos-soft);color:var(--pos)}
.roi.down{background:var(--neg-soft);color:var(--neg)}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:20px;border:1px solid transparent}
.pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.on{background:var(--pos-soft);color:var(--pos)}
.pill.off{background:var(--surface-3);color:var(--ink-3)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}

.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-xs);
  background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line)}
.tag.abo{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.tag.cbo{background:#ede7fb;color:#6c43c9;border-color:#e0d6f6}
:root[data-theme="dark"] .tag.cbo{background:#221a38;color:#b79bf0;border-color:#332651}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.cbo{
  background:#221a38;color:#b79bf0;border-color:#332651}}

.chip{font-weight:600;font-variant-numeric:tabular-nums;padding:1px 6px;
  border-radius:var(--r-xs);font-size:11.5px}
.chip.up{background:var(--pos-soft);color:var(--pos)}
.chip.down{background:var(--neg-soft);color:var(--neg)}
.chip.flat{background:var(--surface-3);color:var(--ink-3)}

/* ── KPI cards (reporting overview strip) ────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin:0 0 18px}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.kpis{grid-template-columns:1fr}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .lab{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:11.5px;
  font-weight:600;letter-spacing:.02em}
.kpi .lab .ic{width:24px;height:24px;border-radius:var(--r-xs);background:var(--surface-3);
  display:grid;place-items:center;color:var(--ink-2)}
.kpi.hl .lab .ic{background:var(--accent-soft);color:var(--accent)}
.kpi .val{font-family:var(--f-disp);font-size:26px;font-weight:600;letter-spacing:-.025em;
  margin:11px 0 3px;font-variant-numeric:tabular-nums}
.kpi .sub{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3)}
.spark{display:inline-block;vertical-align:middle;width:78px;height:26px}
.kpi .spark{position:absolute;right:12px;bottom:12px;width:78px;height:30px;opacity:.9}

.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0 12px}
.search{flex:1;min-width:190px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:0 12px;box-shadow:var(--shadow)}
.search input{border:0;background:transparent;outline:none;color:var(--ink);
  font:inherit;font-size:13.5px;padding:9px 0;width:100%}
.selpill{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:8px 11px;
  font-size:13px;font-weight:500;color:var(--ink-2);box-shadow:var(--shadow)}
.selpill b{color:var(--ink)}

.rtabs{display:flex;gap:2px;background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px}
.rtabs button{border:0;background:transparent;color:var(--ink-3);font-weight:600;
  font-size:13px;padding:7px 14px;border-radius:var(--r-xs);display:flex;
  align-items:center;gap:7px;cursor:pointer;font:inherit}
.rtabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* ── popover menus (the toolbar's Custom-dates popover) ──────────────────── */
details.colmenu{position:relative}
details.colmenu>summary{list-style:none;cursor:pointer}
details.colmenu>summary::-webkit-details-marker{display:none}
.colmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:172px;
  max-height:320px;overflow:auto;display:grid;gap:1px;padding:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.colopt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-xs);
  font-size:13px;cursor:pointer;white-space:nowrap;color:var(--ink-2)}
.colopt:hover{background:var(--hover);color:var(--ink)}
.colopt input{width:auto;margin:0}
.filterpop{min-width:250px;padding:12px}
.filterpop .field{margin:0 0 10px}
.filterpop form>.btn{width:100%;margin-top:2px}
/* ── inline editable Budget column cell (reporting console) ──────────────── */
.rview .bwrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rview .bwrap .bchanged{font-size:9.5px;color:var(--ink-4);white-space:nowrap}
.rview form.bcell{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.rview form.bcell .binput{width:62px;padding:3px 6px;font-size:12.5px;text-align:right;
  font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--surface);color:var(--ink)}
.rview form.bcell .binput:focus{outline:2px solid var(--accent);outline-offset:-1px}
.rview form.bcell .bset{flex:none;width:22px;height:24px;padding:0;font-size:12px;line-height:1;
  color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);
  cursor:pointer}
.rview form.bcell .bset:hover{color:var(--accent-ink,var(--ink));background:var(--accent);border-color:var(--accent)}

/* ── the per-level column picker (reporting console) ─────────────────────── */
.rview-bar{display:flex;justify-content:flex-end;padding:0 0 10px}
.colpick-list{min-width:270px;max-height:66vh;padding:12px}
.colpick-form{display:grid;gap:2px}
/* Search field at the top of the picker (mirrors the reference column-customization panel). */
.colpick-search{margin:0 0 8px}
.colpick-search input{width:100%;padding:7px 10px;font-size:12.5px;border:1px solid var(--line);
  border-radius:var(--r-xs);background:var(--surface);color:var(--ink)}
/* The reorderable rows: a drag grip, a visibility toggle, the label, and a muted source tag. */
.colpick-rows{display:grid;gap:1px;max-height:44vh;overflow:auto}
.colrow{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:var(--r-xs);
  border:1px solid transparent;background:var(--surface)}
.colrow:hover{background:var(--hover)}
.colrow.dragging{opacity:.5;border-color:var(--accent);background:var(--surface-2)}
.colrow[hidden]{display:none}
.colgrip{cursor:grab;color:var(--ink-3);font-size:13px;line-height:1;user-select:none;
  letter-spacing:-2px;flex:none}
.colrow .colopt{flex:1;min-width:0;margin:0;padding:0;background:none}
.colrow .colopt:hover{background:none}
.colrow .colnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colsrc{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);flex:none}
.colpick-list input[type="checkbox"]{accent-color:var(--accent)}
.colpick-foot{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.colpick-foot .btn{flex:1}
/* A caret on the "Columns" trigger (and the Custom-dates trigger) so both read as menus,
   and an open/active state so the button doesn't look inert while its panel is showing. */
.rpt .colpick>summary,.rpt .daterange-menu>summary{display:inline-flex;align-items:center;gap:6px}
.rpt .colpick>summary::after,.rpt .daterange-menu>summary::after{content:"▾";font-size:10px;
  line-height:1;color:var(--ink-4);transition:transform .15s,color .15s}
.rpt .colpick[open]>summary::after,.rpt .daterange-menu[open]>summary::after{
  transform:rotate(180deg);color:var(--ink-2)}
.rpt .colpick[open]>summary,.rpt .daterange-menu[open]>summary{
  background:var(--hover);border-color:var(--border-2);color:var(--ink)}

/* ── owner-only live controls on a reporting campaign/ad-set row ──────────── */
.rowctl{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.rowctl form{margin:0}
.ctl-toggle .btn{padding:5px 10px;font-size:12.5px;box-shadow:none}
.ctl-budget{display:flex;align-items:center;gap:4px}
.ctl-budget input{width:74px;padding:5px 7px;font-size:12.5px;margin:0}
.ctl-budget .btn{padding:5px 9px;font-size:12.5px;box-shadow:none}

/* ── creative tiles ───────────────────────────────────────────────────── */
.cre{width:38px;height:38px;border-radius:var(--r-xs);flex:none;position:relative;
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cre.big{width:100%;height:150px;border-radius:var(--r-sm)}
.cre.md{width:50px;height:50px;border-radius:var(--r-xs)}
.cre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.35))}
.cre .vt{position:absolute;left:6px;bottom:5px;z-index:2;color:#fff;font-size:9px;
  font-weight:700;letter-spacing:.05em;background:rgba(0,0,0,.4);padding:1px 5px;
  border-radius:4px}
.cre .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;color:#fff}
.sunset{background:linear-gradient(150deg,#ffb25a,#f0577e 70%,#b23a7e)}
.ocean{background:linear-gradient(150deg,#5ac6e8,#1e6fa8 75%,#134e82)}
.pool{background:linear-gradient(150deg,#57d6bc,#1e97b4 70%,#146c93)}
.dusk{background:linear-gradient(150deg,#8a78e0,#b23a8e 80%,#7a2c74)}
.sand{background:linear-gradient(150deg,#f3d08c,#d69a4a 75%,#b0742c)}
.night{background:linear-gradient(150deg,#3e5a86,#1c2c4c 75%,#131f38)}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}
.crecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
.crecard .body{padding:13px 14px}
.crecard .nm{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crecard .nm b{font-size:13.5px;font-weight:600}
.crecard .met{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:12px}
.crecard .met .c span{display:block;font-size:10px;color:var(--ink-4);
  text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.crecard .met .c b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.crecard .foot{border-top:1px solid var(--line);padding:9px 14px;display:flex;
  align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}

/* ── expanded creative panel (By-creative drilldown) ─────────────────────── */
.crepanel{display:flex;gap:18px;padding:16px;align-items:flex-start;flex-wrap:wrap}
.crepanel-media{flex:none;width:min(260px,100%)}
.crepanel-media .cre.big{height:150px}
.crepanel-body{flex:1;min-width:220px}
.crepanel-head{display:flex;align-items:center;gap:12px}
.crepanel-head b{font-family:var(--f-disp);font-size:15px;font-weight:600}
.crepanel-sub{color:var(--ink-3);font-size:12.5px;margin-top:3px}
.crepanel-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  gap:12px;margin-top:14px}
.cm span{display:block;font-size:10.5px;color:var(--ink-4);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600}
.cm b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--f-disp)}

.bar{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.bar.inline{width:60px;margin:0;display:inline-block}

.foot-note{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-4);font-size:12px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px}

@keyframes sf-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-overlay,.toast{animation:none}}

/* ── in-page confirm modal (replaces the browser's window.confirm) ────────── */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(8,11,17,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:sf-fade .15s ease}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);max-width:410px;width:100%;padding:22px 22px 18px}
.modal-msg{font-size:14.5px;color:var(--ink);margin:0 0 18px;line-height:1.55}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ── toast stack, lower-right (write-result feedback) ─────────────────────── */
.toasts{position:fixed;right:18px;bottom:18px;z-index:110;display:flex;flex-direction:column;
  gap:10px;max-width:340px}
.toast{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-3);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:11px 14px;font-size:13.5px;
  animation:sf-fade .2s ease}
.toast.ok{border-left-color:var(--pos)}
.toast.bad{border-left-color:var(--neg)}
.toast.info{border-left-color:var(--accent)}
.toast b{display:block;font-weight:600;color:var(--ink)}
.toast span{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}

.flash{margin:0 0 20px;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);
  font-size:14px}
.flash-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.flash-error{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}

pre,code,.mono{font-family:var(--f-mono)}
pre{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:11px 13px;overflow-x:auto;font-size:13px;line-height:1.5;margin:0 0 12px;
  white-space:pre-wrap;word-break:break-word}
.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;
  margin:0 0 16px;padding:0;list-style:none}
.codes li{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:9px 12px;font-family:var(--f-mono);font-size:14px;letter-spacing:.04em}
.err{color:var(--bad);font-size:14px;margin:10px 0 0;min-height:1.2em}
.narrow{max-width:34rem;margin:8vh auto 0}

/* ── the lander editor ─────────────────────────────────────────────────────
   A sticky bar keeps the identity and the save actions in reach on a page that
   runs long; numbered <details> cards are the sections; each block is its own
   card with a header the operator can read collapsed. Nothing animates. */
.editor-sticky{position:sticky;top:0;z-index:30;margin:-26px -20px 22px;padding:0 20px;
  background:var(--bg)}
.editor-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-top:none;border-radius:0 0 var(--r) var(--r);padding:12px 18px;
  box-shadow:var(--shadow)}
.bar-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.bar-id h1{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:34ch}
.bar-note{font-size:13px;color:var(--ink-3);white-space:nowrap}
.bar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.error-banner{background:var(--bad-bg);border:1px solid var(--bad);border-radius:var(--r);
  color:var(--bad);padding:10px 14px;margin:8px 0 0;font-size:15px}
.error-banner a{color:var(--bad);font-weight:600}

details.sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin:0 0 14px}
details.sec>summary{display:flex;align-items:baseline;gap:12px;cursor:pointer;
  padding:14px 18px;list-style:none}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"+";margin-left:auto;color:var(--ink-3);
  font-weight:600;font-size:17px}
details.sec[open]>summary::after{content:"–"}
details.sec[open]>summary{border-bottom:1px solid var(--line)}
.sec-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);font-size:13px;font-weight:700;text-align:center;line-height:24px;
  align-self:center}
.sec-title{font-size:16px;font-weight:650}
.sec-note{font-size:13px;color:var(--ink-3)}
.sec-body{padding:16px 18px}
.sec-body .card{border:none;padding:0;margin:0 0 14px;box-shadow:none}

details.blk{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);
  margin:0 0 12px}
details.blk>summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 14px;list-style:none;min-width:0}
details.blk>summary::-webkit-details-marker{display:none}
details.blk>summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-weight:600}
details.blk[open]>summary::after{content:"–"}
.blk-excerpt{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.blk-tools{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 8px;
  border-bottom:1px solid var(--line);margin:0 0 4px}
.blk-fields{padding:10px 14px 14px}
.blk-fields .row{background:var(--surface)}
.ro{display:block;padding:8px 0;color:var(--ink-2);font-family:var(--f-mono);font-size:14px;
  overflow-wrap:anywhere}
.opt-lines{margin:-6px 0 14px;padding:0 0 0 18px;color:var(--ink-3);font-size:13px;
  max-width:44rem}
.opt-lines li{margin:0 0 2px}

/* ══ the three-level reporting console ═══════════════════════════════════════
   Everything below styles the Facebook-Ads-Manager-style console that
   reporting.view.ts renders (the sortable per-level table, the level tabs +
   breadcrumb, the bulk bar, the campaign tag chips) and the full-screen
   bottom-sheet drawer. Generic class names (.tabs, .tab, .name, .switch…) are
   scoped under the .rpt root so they cannot bleed into any other admin screen;
   the drawer's own classes are unique and live at document scope because the
   sheet is a body-level sibling of the console, not a descendant. */

/* ── KPI strip: the console shows six numbers, not the shared strip's five ── */
.rpt .kpis{grid-template-columns:repeat(6,1fr)}
@media (max-width:1180px){.rpt .kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.rpt .kpis{grid-template-columns:repeat(2,1fr)}}
.rpt .kpi.accent{background:linear-gradient(180deg,var(--accent-soft),var(--surface));
  border-color:var(--accent-line)}
.rpt .kpi.accent .lab .ic{background:var(--accent-soft);color:var(--accent)}

/* ── level tabs + breadcrumb ─────────────────────────────────────────────── */
.rpt .tabsrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.rpt .tabs{display:inline-flex;background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:4px;gap:3px}
.rpt .tab{border:0;background:transparent;color:var(--ink-3);font:inherit;font-weight:600;
  font-size:13px;padding:7px 15px;border-radius:var(--r-xs);cursor:pointer;display:flex;
  align-items:center;gap:8px}
.rpt .tab .n{font-size:11px;font-weight:700;background:var(--line);color:var(--ink-3);
  padding:1px 7px;border-radius:20px;font-variant-numeric:tabular-nums}
.rpt .tab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.rpt .tab.on .n{background:var(--accent);color:var(--accent-ink)}
.rpt .crumb{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.rpt .crumb[hidden]{display:none}
.rpt .crumb b{color:var(--ink);font-weight:700}
.rpt .crumb .x{cursor:pointer;border:1px solid var(--line);border-radius:var(--r-xs);
  width:20px;height:20px;display:grid;place-items:center;background:var(--surface);
  color:var(--ink-3);font:inherit;font-size:11px;padding:0;line-height:1}
.rpt .crumb .x:hover{color:var(--ink);background:var(--hover)}

/* ── bulk bar (owner-only): shown by JS once a row is picked ──────────────── */
.rpt .bulk{display:none;align-items:center;gap:10px;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--ink);border-radius:var(--r-sm);
  padding:9px 14px;margin:0 0 12px;font-weight:600;flex-wrap:wrap}
.rpt .bulk.show{display:flex}
.rpt .bulk .bulklab{flex:1;min-width:90px}
.rpt .bulk .bulklab b{font-weight:800}
.rpt .bulk .bulktag{display:flex;align-items:center;gap:6px}
.rpt .bulk .bulktag input{width:118px;margin:0;padding:6px 9px;font-size:12.5px}
.rpt .bulk .btn{padding:6px 12px;font-size:12.5px;box-shadow:none}

/* ── the level table: a full-width, pinned-name, sortable table ──────────── */
/* overflow:visible (not hidden) so the Columns dropdown is never clipped by a short table; the
   horizontal scroll lives on the inner .scroll, and .scroll clips the table to the card's rounding. */
.rpt{min-width:0;max-width:100%}
.rpt .rview{padding:0;min-width:0}
.rpt .rview .scroll{overflow-x:auto;border-radius:inherit;min-width:0;max-width:100%;
  -webkit-overflow-scrolling:touch}
.rpt table.rtable{min-width:1120px}
.rpt table.rtable thead th{cursor:pointer;user-select:none;padding:11px 12px;vertical-align:middle;
  position:relative}
.rpt table.rtable thead th .ar{opacity:0;margin-left:4px;font-size:10px}
/* A persistent dim arrow on every SORTABLE header so columns read as sortable at a glance (mobile has
   no hover to reveal it); the active-sort column brightens to full below. */
.rpt table.rtable thead th[data-report-sort] .ar{opacity:.4}
.rpt table.rtable thead th[aria-sort]{color:var(--ink)}
.rpt table.rtable thead th[aria-sort] .ar{opacity:1;color:var(--accent)}
.rpt table.rtable thead th:hover{color:var(--ink)}
/* ── resizable columns: a drag handle on each header's right edge (phase 4) ───
   The hit target is a wide, invisible strip; the affordance is a crisp 2px rule
   centred in it that surfaces (muted) when the header is hovered and brightens to
   the accent when the grip itself is — so a column edge reads as a real, grabbable
   divider rather than a flat block. col-resize cursor throughout the drag. */
.rpt table.rtable thead th .rz{position:absolute;top:0;right:0;width:11px;height:100%;
  cursor:col-resize;user-select:none;touch-action:none;z-index:5;
  display:flex;align-items:center;justify-content:center}
.rpt table.rtable thead th .rz::before{content:"";width:2px;height:56%;border-radius:2px;
  background:transparent;transition:background .12s,height .12s}
.rpt table.rtable thead th:hover .rz::before{background:var(--border-2)}
.rpt table.rtable thead th .rz:hover::before{background:var(--accent);height:100%}
.rpt table.rtable.resizing{cursor:col-resize;user-select:none}
.rpt table.rtable.resizing thead th .rz::before{background:var(--border-2)}
.rpt table.rtable.resizing thead th .rz:hover::before{background:var(--accent);height:100%}
.rpt table.rtable th.pin,.rpt table.rtable td.pin{position:sticky;left:0;text-align:left;
  min-width:250px}
/* table-layout is auto (not fixed), so with .nm .t{max-width:none} the pinned cell's min-content
   would otherwise BE the longest name in the column, and the column could never be dragged narrower
   than that. Bounding the flex row itself by the header's width (mirrored onto --namew by the resize
   JS below) breaks that feedback loop: the row's min-content contribution is clamped to --namew, its
   children shrink (min-width:0 throughout), and .nm .t ellipsizes at the cell edge instead. 226px is
   the 250px default pinned-column width minus 24px of cell padding (9px*2 desktop / 8px*2 phone). */
.rpt table.rtable td.pin .name{max-width:var(--namew,226px)}
.rpt table.rtable thead th.pin{z-index:3;background:var(--surface-2)}
.rpt table.rtable tbody td.pin{z-index:1;background:var(--surface)}
.rpt table.rtable tbody tr:hover td.pin{background:var(--hover)}
.rpt table.rtable tbody tr.sel{background:var(--accent-soft)}
.rpt table.rtable tbody tr.sel td.pin{background:var(--accent-soft)}
.rpt table.rtable tfoot td.pin{background:var(--surface-2);z-index:1}
.rpt table.rtable tbody td{padding:9px 12px}
/* Phones (portrait) AND short landscape screens: a 250px pinned name column eats a phone's whole
   width, so narrow it and tighten cell padding — the table still scrolls horizontally inside .scroll,
   but far more of it is usable at a glance. Landscape is matched on height+orientation so a wide-but-
   short phone (e.g. 812×375) gets the same dense treatment a narrow portrait phone does. */
@media (max-width:640px),(orientation:landscape) and (max-height:600px){
  /* position:static (NOT sticky) on phones: a sticky left:0 frozen column BLOCKS horizontal
     touch-scroll of its overflow container on iOS Safari — the columns end up cut off with no way to
     reach them ("stuck on the name column"). Dropping the freeze lets the whole table scroll
     normally; a frozen first column is a desktop nicety, not a phone one. */
  .rpt table.rtable th.pin,.rpt table.rtable td.pin{position:static;min-width:150px}
  .rpt table.rtable td.pin .name{max-width:var(--namew,126px)}
  .rpt table.rtable thead th,.rpt table.rtable tbody td{padding:8px 10px}
  .rpt .name{gap:8px}
  .rpt .name .thumb{width:26px;height:26px}
  /* The date presets: a compact ONE-line strip that scrolls horizontally instead of a tall wrapped
     block that overflows the screen. It takes its own full-width row in the wrapping toolbar; the
     chips never wrap and the strip scrolls under a thumb, with the scrollbar hidden. */
  .rpt .toolbar .range{flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rpt .toolbar .range::-webkit-scrollbar{display:none}
  .rpt .toolbar .range a,.rpt .range-custom{flex:none;white-space:nowrap}
  /* Market / Campaign / Custom dates / Apply / Export each take a full row and stretch, so the
     toolbar reads as a clean stack rather than cramped half-width inline fields. */
  .rpt .toolbar .field{flex:1 1 100%;min-width:0}
  .rpt .toolbar .field input{flex:1;min-width:0;width:auto}
  .rpt .toolbar .filters>.daterange-menu,.rpt .toolbar .filters>.btn-primary,.rpt .toolbar>.btn[data-export]{
    flex:1 1 100%}
  .rpt .toolbar .daterange-menu>summary.btn,.rpt .toolbar .filters>.btn-primary,.rpt .toolbar>.btn[data-export]{
    width:100%;justify-content:center;text-align:center}
  /* The Custom-dates control: on mobile the From/To fields drop INLINE below the button (not an
     absolutely-positioned overlay, which iOS mis-places and which can cover Apply). When open, the
     details grows and pushes Apply/Export down in the normal flow — no overlap, nothing off-screen.
     Fields stack full-width (they inherit the toolbar's inline-flex otherwise and mis-align). */
  .rpt .toolbar .daterange-menu .filterpop{position:static;left:auto;right:auto;top:auto;
    min-width:0;width:100%;max-width:100%;margin-top:8px;box-shadow:none;border:1px solid var(--line)}
  .rpt .toolbar .filterpop .field{flex-direction:column;align-items:stretch;gap:5px;width:100%}
  .rpt .toolbar .filterpop .field-label{white-space:normal}
  .rpt .toolbar .filterpop .field input{width:100%;min-width:0}
}

/* ── the pinned Name cell: checkbox · thumb · name · tags · pill · toggle · ⋮ */
.rpt .name{display:flex;align-items:center;gap:10px;min-width:0}
.rpt .name .pick,.rpt .selall{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;
  flex:none;margin:0}
.rpt .selall{width:14px;height:14px;vertical-align:-2px;margin-right:8px}
.rpt .thumb{width:30px;height:30px;border-radius:var(--r-xs);object-fit:cover;flex:none;
  background:var(--surface-3)}
/* Full-size creative preview (click/Enter a thumbnail). One reused <dialog>; CSP-safe (no inline). */
.rpt .thumb[data-lightbox],.drawer .cthumb[data-lightbox]{cursor:zoom-in}
.rpt .thumb[data-lightbox]:focus-visible,.drawer .cthumb[data-lightbox]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
dialog.lightbox{border:0;background:transparent;padding:0;max-width:94vw;max-height:94vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(0,0,0,.74)}
dialog.lightbox .lightbox-img{display:block;max-width:94vw;max-height:94vh;width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:0 24px 70px rgba(0,0,0,.55);cursor:zoom-out}
/* Campaign/ad-set creative tile: the representative image with a "how many creatives" count badge. */
.rpt .tile{position:relative;flex:none;width:30px;height:30px;display:inline-block}
.rpt .tile .thumb{width:30px;height:30px}
.rpt .tile .thumb-n{position:absolute;right:-5px;bottom:-5px;min-width:15px;height:15px;padding:0 3px;
  display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;
  line-height:1;color:var(--accent-ink);background:var(--accent);border:1.5px solid var(--surface);
  border-radius:9px;font-variant-numeric:tabular-nums}
.rpt .nm{min-width:0;cursor:pointer;flex:1 1 auto}
.rpt .nm .t{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
  max-width:none;white-space:nowrap;display:block}
.rpt .nm .s{font-size:11px;color:var(--ink-4);font-family:var(--f-mono)}

/* ── campaign tag chips + the ＋ add affordance ──────────────────────────── */
.rpt .tagrow{display:inline-flex;align-items:center;gap:5px;margin-left:2px}
.rpt .tagchip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:1px 7px;border-radius:5px;white-space:nowrap}
.rpt .tagchip .tagrm{border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;
  font-size:12px;line-height:1;padding:0;opacity:.55}
.rpt .tagchip .tagrm:hover{opacity:1}
.rpt .addtag{width:19px;height:19px;border-radius:5px;border:1px dashed var(--line);
  background:transparent;color:var(--ink-3);font-size:12px;line-height:1;cursor:pointer;
  display:none;place-items:center;flex:none;padding:0}
.rpt tbody tr:hover .addtag{display:grid}
.rpt .addtag:hover{border-style:solid;color:var(--ink)}

/* ── status pills (Active / Paused / Pending), each with a leading dot ────── */
.rpt .pill.active{color:var(--pos);background:var(--pos-soft)}
.rpt .pill.paused{color:var(--ink-3);background:var(--surface-3)}
.rpt .pill.pending{color:var(--warn);background:var(--warn-soft)}
.rpt .pill.active::before,.rpt .pill.paused::before,.rpt .pill.pending::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── the pause/resume toggle, drawn as an iOS-style switch ─────────────────── */
.rpt .ctl-toggle{margin:0;display:inline-block}
.rpt .switch{margin-left:6px;width:30px;height:17px;border-radius:20px;background:var(--line);
  position:relative;cursor:pointer;flex:none;transition:background .15s;border:0;padding:0}
.rpt .switch::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:left .15s}
.rpt .switch.on{background:var(--pos)}
.rpt .switch.on::after{left:15px}

/* ── the ⋮ drawer trigger ────────────────────────────────────────────────── */
.rpt .kebab{margin-left:auto;flex:none;width:26px;height:26px;border-radius:var(--r-xs);
  border:1px solid transparent;background:transparent;color:var(--ink-3);font-size:16px;
  line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.rpt tbody tr:hover .kebab{border-color:var(--line);background:var(--surface)}
.rpt .kebab:hover{color:var(--ink);background:var(--hover)}

/* ── ROAS mini-bar: the inline SVG the view draws, not the .bar progress box ── */
.rpt .roas{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.rpt .roas .bar{height:5px;background:none;border-radius:3px;color:var(--pos);margin:0;
  overflow:visible;display:inline-block}
/* A losing ROAS (<1) draws the bar in the loss colour too, so the mini-bar and the number agree. */
.rpt .roas.neg .bar{color:var(--neg);opacity:.75}
.rpt .roas b{font-weight:800}

/* ── the per-pane foot band + provenance legend ──────────────────────────── */
.rpt .rview .foot-note{margin-top:0;padding:10px 14px;font-size:11.5px;color:var(--ink-4);
  border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-start}
.rpt .rview .foot-note .unmapped-note{font-style:italic}
.rpt .rview .empty{padding:20px 16px}
.rpt .legend{display:flex;gap:14px;flex-wrap:wrap;margin:14px 2px 0;font-size:11.5px;
  color:var(--ink-3)}
.rpt .legend b{color:var(--ink)}
.rpt .legend code{font-family:var(--f-mono)}
.rpt .range-custom{padding:5px 11px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.rpt .range-custom.on{background:var(--ink);color:var(--surface);border-radius:var(--r-xs)}

/* ── the filter toolbar, reflowed onto ONE wrapping line ──────────────────────
   presets (.range chip group) · Market · Campaign · Custom dates · Apply. The
   GET form is display:contents so its fields flow as direct flex items of the
   .toolbar row (order + graceful flex-wrap on narrow widths) while still
   submitting natively; each field is an inline label+input, compact and aligned. */
.rpt .toolbar{gap:8px 10px}
.rpt .filters{display:contents}
.rpt .toolbar .field{display:inline-flex;align-items:center;gap:7px;margin:0;max-width:none;width:auto}
.rpt .toolbar .field-label{margin:0;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.rpt .toolbar .field input{width:auto;min-width:120px;padding:7px 10px;font-size:13px;box-shadow:var(--shadow)}
.rpt .toolbar .daterange-menu>summary.btn{padding:7px 12px;font-size:13px}
.rpt .toolbar .filters>.btn-primary{padding:7px 14px;font-size:13px}
/* Premium toolbar affordances: a resting fill on preset-chip hover (not just a colour
   shift), and a live border on the filter inputs on hover/focus so the form feels tactile.
   All scoped to .rpt so the shared topbar .range is untouched; both themes via tokens. */
.rpt .range a:not(.on):hover{background:var(--hover)}
.rpt .toolbar .field input{transition:border-color .12s,box-shadow .12s}
.rpt .toolbar .field input:hover{border-color:var(--border-2)}
.rpt .toolbar .field input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.rpt .toolbar .field input:focus-visible{outline:none}

/* ══ the full-screen bottom-sheet drawer ════════════════════════════════════ */
.scrim{position:fixed;inset:0;background:rgba(8,11,17,.5);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:90}
.scrim.show{opacity:1;pointer-events:auto}
.scrim[hidden]{display:none}
.drawer{position:fixed;left:0;right:0;bottom:0;top:3vh;background:var(--bg);
  border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;
  box-shadow:var(--shadow-lg);transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);z-index:100;display:flex;
  flex-direction:column}
.drawer.show{transform:none}
.drawer::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:44px;height:4px;border-radius:3px;background:var(--border-2)}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}
.drawer .dhead{padding:22px 22px 16px;border-bottom:1px solid var(--line);display:flex;
  align-items:flex-start;gap:12px}
.drawer .ava{width:40px;height:40px;border-radius:var(--r-sm);flex:none;background:var(--surface-3)}
.drawer .dhead-t{min-width:0}
.drawer .dhead .t{font-family:var(--f-disp);font-size:17px;font-weight:650;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer .dhead .m{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.drawer .dhead .tags{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.drawer .meta-btn{margin-left:auto;display:flex;gap:8px;flex:none}
.drawer .meta-open{display:inline-flex;align-items:center;border:0;background:var(--accent);
  color:var(--accent-ink);font-weight:700;border-radius:var(--r-xs);padding:0 14px;height:32px;
  cursor:pointer;font:inherit;font-size:12.5px;text-decoration:none}
.drawer .close{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs);
  width:32px;height:32px;cursor:pointer;color:var(--ink-3);font-size:16px;padding:0}
.drawer .close:hover{color:var(--ink);background:var(--hover)}
.drawer .dkpis{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:14px 22px;
  border-bottom:1px solid var(--line)}
@media (max-width:720px){.drawer .dkpis{grid-template-columns:repeat(3,1fr);gap:12px}}
.drawer .dkpi .lab{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3)}
.drawer .dkpi .val{font-family:var(--f-disp);font-size:19px;font-weight:700;letter-spacing:-.02em;
  margin-top:2px;font-variant-numeric:tabular-nums}
.drawer .dtabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);
  overflow-x:auto}
.drawer .dtab{border:0;background:transparent;color:var(--ink-3);font:inherit;font-weight:700;
  font-size:12.5px;padding:12px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.drawer .dtab.on{color:var(--ink);border-bottom-color:var(--accent)}
.drawer .dtab[hidden]{display:none}
.drawer .dbody{flex:1;overflow:auto;padding:0}
.drawer .dbody .dscroll{overflow-x:auto;width:100%}
.drawer .dbody table{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
.drawer .dbody thead th{position:sticky;top:0;background:var(--bg);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700;
  padding:10px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.drawer .dbody thead th.l{text-align:left}
/* Sortable drawer-table headers: same arrow + aria-sort affordance as the main
   console table (scoped to the drawer so a click here never touches the page table). */
.drawer .dbody thead th[data-dsort]{cursor:pointer;user-select:none}
.drawer .dbody thead th .ar{opacity:0;margin-left:4px;font-size:9px}
/* Same persistent dim arrow so every drawer column reads as tap-to-sort (the ad-set/campaign pop-up
   had NO visible affordance at all — no default-sorted column — so sorting looked absent). */
.drawer .dbody thead th[data-dsort] .ar{opacity:.45}
.drawer .dbody thead th[aria-sort]{color:var(--ink)}
.drawer .dbody thead th[aria-sort] .ar{opacity:1;color:var(--accent)}
.drawer .dbody thead th[data-dsort]:hover{color:var(--ink)}
.drawer .dbody th.pin,.drawer .dbody td.pin{position:sticky;left:0;background:var(--bg);
  text-align:left}
.drawer .dbody tbody td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.drawer .dbody tbody td.pin{background:var(--bg)}
/* Destinations tab: hotel name over a muted city/country sub-line, in the pinned first cell. */
.drawer .dbody .destname{font-weight:600;white-space:normal}
.drawer .dbody .destloc{font-size:11px;color:var(--ink-3);margin-top:1px;white-space:normal}
.drawer .dbody tbody tr:hover td{background:var(--hover)}
.drawer .dbody tfoot td{padding:11px 14px;text-align:right;font-weight:700;
  border-top:2px solid var(--border-2);background:var(--surface-2);font-variant-numeric:tabular-nums}
.drawer .dbody tfoot td.pin{text-align:left;background:var(--surface-2)}
.drawer .dbody .empty{padding:24px 22px;color:var(--ink-3)}
.drawer .dempty{padding:52px 24px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.drawer .dempty-t{font-family:var(--f-disp);font-size:14.5px;font-weight:650;color:var(--ink-2);
  letter-spacing:-.01em}
.drawer .dempty-s{font-size:12.5px;color:var(--ink-3);max-width:44ch;line-height:1.55}
.drawer .dfresh{padding:12px 22px;margin:0;font-size:11px;color:var(--ink-4)}
.drawer .blog{padding:6px 0}
.drawer .blog .row{display:flex;align-items:center;gap:12px;padding:12px 22px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin:0}
.drawer .blog .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.drawer .blog .when{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  width:132px;flex:none}
.drawer .blog .chg{font-weight:600}
.drawer .blog .chg .from{color:var(--ink-3);text-decoration:line-through;font-weight:500;
  margin-right:2px}
.drawer .blog .who{margin-left:auto;font-size:11.5px;color:var(--ink-4)}
/* ── Creatives tab: the entity's ads, dense table with a pinned image + name column ───────────── */
.drawer .dbody td.cpin{min-width:238px}
.drawer .ccell{display:flex;align-items:center;gap:11px;text-align:left}
/* No background on the base rule (it would outrank the global gradient class on the placeholder
   span); only the loaded <img> gets a neutral ground while it decodes. */
.drawer .cthumb{width:44px;height:44px;border-radius:var(--r-xs);object-fit:cover;flex:none}
.drawer img.cthumb{background:var(--surface-3)}
.drawer .cmeta{min-width:0}
.drawer .cname{font-weight:650;font-size:13px;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:220px}
.drawer .csub{display:flex;align-items:center;gap:7px;margin-top:3px}
.drawer .cid{font-size:11px;color:var(--ink-4);font-family:var(--f-mono)}
.drawer .cstat{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:1px 7px;border-radius:999px;flex:none}
.drawer .cstat.active{color:var(--pos);background:var(--pos-soft)}
.drawer .cstat.paused{color:var(--ink-3);background:var(--surface-3)}
/* ── the drawer per-tab column picker ("Columns") ─────────────────────────────
   A right-aligned bar above each drawer table: a live "n / N columns" count and a
   "Columns" trigger that drops a checkbox menu of the tab's full catalog. Apply
   persists the selection per user; Reset clears back to the tab defaults. Mirrors
   the main console's column picker, scoped to the drawer. */
.drawer .dcolbar{display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:10px 22px;border-bottom:1px solid var(--line);position:relative}
.drawer .dcolcount{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.drawer .dcolbtn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs);
  height:30px;padding:0 12px;cursor:pointer;font:inherit;font-size:12px;font-weight:650;color:var(--ink-2)}
.drawer .dcolbtn:hover{background:var(--hover);color:var(--ink)}
.drawer .dcolmenu{position:absolute;top:44px;right:22px;z-index:5;width:min(280px,calc(100vw - 44px));
  max-height:60vh;overflow:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:8px}
.drawer .dcolmenu[hidden]{display:none}
.drawer .dcollist{display:flex;flex-direction:column}
.drawer .dcolopt{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r-xs);
  cursor:pointer;font-size:12.5px}
.drawer .dcolopt:hover{background:var(--hover)}
.drawer .dcolopt input{margin:0;width:16px;height:16px;flex:none;accent-color:var(--accent)}
.drawer .dcolname{color:var(--ink-2)}
.drawer .dcolactions{display:flex;gap:8px;justify-content:flex-end;padding:8px 4px 2px;margin-top:4px;
  border-top:1px solid var(--line)}
.drawer .dcolreset{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs);
  height:30px;padding:0 12px;cursor:pointer;font:inherit;font-size:12px;color:var(--ink-3)}
.drawer .dcolreset:hover{color:var(--ink);background:var(--hover)}
.drawer .dcolapply{border:0;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-xs);
  height:30px;padding:0 14px;cursor:pointer;font:inherit;font-size:12px;font-weight:700}
/* ── the persistent drawer toolbar: window (From/To) on the left, live entity controls on the right ── */
.drawer .dtoolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;
  flex-wrap:wrap;padding:10px 22px;border-bottom:1px solid var(--line)}
.drawer .dtoolbar[hidden]{display:none}
.drawer .dtool-date,.drawer .dtool-entity{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drawer .dtool-lbl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.drawer .dtool-dinput{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs);
  height:30px;padding:0 8px;font:inherit;font-size:12.5px;color:var(--ink);box-shadow:var(--shadow);
  flex:0 0 auto;width:150px;max-width:44vw}
.drawer .dtool-sep{color:var(--ink-3)}
.drawer .dtool-budget{display:flex;align-items:center;gap:6px}
/* Cloned status/toggle/budget controls keep their table classes; the originals are scoped to
   .rpt / .rview (which the drawer is not inside), so re-style them here for the drawer toolbar. */
.drawer .dtoolbar .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 10px;border-radius:999px}
.drawer .dtoolbar .pill.active{color:var(--pos);background:var(--pos-soft)}
.drawer .dtoolbar .pill.paused{color:var(--ink-3);background:var(--surface-3)}
.drawer .dtoolbar .pill.pending{color:var(--warn);background:var(--warn-soft)}
.drawer .dtoolbar .pill.active::before,.drawer .dtoolbar .pill.paused::before,.drawer .dtoolbar .pill.pending::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* .switch / .ctl-toggle are used both by the toolbar's cloned entity controls AND the Creatives tab's
   per-ad turn-off toggle, so they are scoped to the whole drawer (the originals are .rpt-only). */
.drawer .ctl-toggle{margin:0;display:inline-block}
.drawer .switch{width:34px;height:19px;border-radius:20px;background:var(--line);position:relative;
  cursor:pointer;flex:none;transition:background .15s;border:0;padding:0}
.drawer .switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;transition:left .15s}
.drawer .switch.on{background:var(--pos)}
.drawer .switch.on::after{left:17px}
/* The creative row's toggle sits inline in the sub-line, a touch smaller. */
.drawer .csub .ctl-toggle{margin-left:4px}
.drawer .csub .switch{width:30px;height:17px}
.drawer .csub .switch::after{width:13px;height:13px}
.drawer .csub .switch.on::after{left:15px}
.drawer .dtoolbar .bwrap{display:flex;align-items:center;gap:6px}
.drawer .dtoolbar form.bcell{display:inline-flex;align-items:center;gap:5px}
.drawer .dtoolbar form.bcell .binput{width:78px;padding:5px 8px;font-size:12.5px;text-align:right;
  border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);color:var(--ink)}
.drawer .dtoolbar form.bcell .binput:focus{outline:2px solid var(--accent);outline-offset:-1px}
.drawer .dtoolbar form.bcell .bset{flex:none;width:28px;height:30px;padding:0;font-size:13px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);color:var(--ink-2)}
.drawer .dtoolbar form.bcell .bset:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.drawer .dtoolbar .bchanged{display:none}
/* ── daily trend peek: a floating card (desktop hover) / bottom sheet (touch) showing each metric's
   day-by-day movement. Appended to <body>, so its selectors are unscoped. ── */
.rpt td.num.pkable{cursor:help}
.rpt td.num.pkable:hover{background:var(--muted-bg)}
.peek{position:fixed;z-index:80;width:492px;max-width:calc(100vw - 16px);max-height:78vh;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
  padding:12px 14px;font-size:12.5px;color:var(--ink);opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .12s ease,transform .12s ease}
.peek.show{opacity:1;transform:none;pointer-events:auto}
.peek-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.peek-title{font-weight:700;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:62%}
.peek-sub{font-size:11px;color:var(--ink-3);white-space:nowrap;flex:none}
.peek-load,.peek-empty{padding:20px 2px;color:var(--ink-3);text-align:center}
/* the prominent trend bar for the hovered field */
.pk-chart{margin-bottom:12px}
.pk-chart-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.pk-chart-name{font-weight:700;font-size:12px;color:var(--accent);letter-spacing:.01em}
.pk-chart-val{margin-left:auto;font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.pk-chart .pk-delta{flex:none;font-size:12px}
.pk-chart-bars{position:relative;display:flex;align-items:flex-end;gap:3px;height:78px}
.pk-baseline{position:absolute;left:0;right:0;height:1px;background:var(--ink-3);opacity:.4;z-index:1}
.pk-colbar{position:relative;flex:1 1 0;min-width:0;height:100%}
.pk-cbar{position:absolute;left:1px;right:1px;bottom:0;min-height:2px;border-radius:2px 2px 0 0;
  background:var(--accent);opacity:.9}
.pk-cbar.neg{background:var(--neg);border-radius:0 0 2px 2px}
.pk-cbar.empty{background:var(--line);opacity:.5}
.pk-chart-days{display:flex;gap:3px;margin-top:4px}
.pk-cday{flex:1 1 0;min-width:0;text-align:center;font-size:9.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden}
/* the day-by-day general-stats table behind the trend bar */
.pk-daily-wrap{border-top:1px solid var(--line);padding-top:10px}
.pk-daily-cap{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.pk-daily-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px}
.pk-daily{border-collapse:collapse;font-size:11px;width:100%}
.pk-daily th,.pk-daily td{padding:4px 8px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.pk-daily thead th{position:sticky;top:0;z-index:2;background:var(--surface);color:var(--ink-3);
  font-weight:600;border-bottom:1px solid var(--line)}
.pk-daily .pk-d-day{position:sticky;left:0;z-index:1;text-align:left;background:var(--surface);
  font-weight:600;color:var(--ink-2)}
.pk-daily thead th.pk-d-day{z-index:3}
.pk-daily tbody td{color:var(--ink);border-bottom:1px solid var(--surface-2)}
.pk-daily tbody tr:last-child td{border-bottom:0}
.pk-daily .pk-hotcol{background:var(--accent-soft)}
.pk-daily thead th.pk-hotcol{color:var(--accent)}
.pk-delta{text-align:right;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-delta.pos{color:var(--pos)}
.pk-delta.neg{color:var(--neg)}
.pk-delta.flat{color:var(--ink-3)}
.peek-foot{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-3)}
.peek-scrim{position:fixed;inset:0;background:rgba(16,22,34,.32);z-index:79;opacity:0;pointer-events:none;
  transition:opacity .15s ease}
.peek-scrim.show{opacity:1;pointer-events:auto}
/* ── mobile: tighten the drawer + its picker on small screens so nothing overflows the
   viewport and every control stays tap-sized. The tables already scroll horizontally
   (.dscroll / .rview .scroll), so the phone layout is: full-height sheet, wrapped KPI
   grid, scrollable tabs, and a picker menu that never exceeds the screen width. The
   landscape clause catches a wide-but-short phone (e.g. 812×375), where a top:3vh sheet
   would leave almost no height — it goes full-height there too. */
@media (max-width:640px),(orientation:landscape) and (max-height:600px){
  .drawer{top:0;border-radius:0}
  .drawer .dhead{padding:16px 16px 12px}
  .drawer .dkpis{padding:12px 16px}
  .drawer .dcolbar{padding:9px 16px}
  /* Stack the toolbar's two groups (Window / entity controls) into full-width rows so nothing is
     squeezed off the edge, and grow every control to a tap-friendly height — same treatment the
     main table's toolbar gets on a phone. */
  .drawer .dtoolbar{padding:10px 16px;flex-direction:column;align-items:stretch;gap:12px}
  .drawer .dtool-date,.drawer .dtool-entity{width:100%;gap:8px 10px}
  .drawer .dtool-dinput{flex:1 1 0;width:auto;max-width:none;min-width:0;height:36px}
  .drawer .dtool-budget{flex:1 1 100%}
  .drawer .dtoolbar form.bcell{flex:1 1 auto}
  .drawer .dtoolbar form.bcell .binput{flex:1 1 auto;width:auto;min-width:0;height:36px}
  .drawer .dtoolbar form.bcell .bset{height:36px;width:36px}
  .drawer .dcolmenu{right:16px}
  .drawer .dbody .dfresh{padding:12px 16px}
  .drawer .dbody thead th,.drawer .dbody tbody td,.drawer .dbody tfoot td{padding:9px 11px}
  /* Same iOS fix as the main table: an un-frozen pinned cell so the drawer table scrolls on touch. */
  .drawer .dbody th.pin,.drawer .dbody td.pin{position:static}
  .drawer .meta-btn .meta-open span{display:none}
  /* The trend peek becomes a bottom sheet on a phone: full-width, tap-outside to dismiss, with a
     grabber, and roomier rows for touch. */
  .peek.sheet{left:0;right:0;bottom:0;top:auto!important;width:auto;max-width:none;max-height:82vh;
    border-radius:16px 16px 0 0;padding:14px 16px 22px;transform:translateY(14px)}
  .peek.sheet.show{transform:none}
  .peek.sheet .peek-head{padding-top:6px}
  .peek.sheet::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:var(--line)}
  .peek.sheet .pk-chart-bars{height:104px}
  .peek.sheet .pk-daily th,.peek.sheet .pk-daily td{padding:7px 10px;font-size:12px}
}

/* ─────────────────────────────── KAYAK Insights ────────────────────────────────
   The /insights page reuses the console shell wholesale (.rpt root, .kpis strip,
   table.rtable + data-report-sort for free sorting), so only what the console
   genuinely lacks lives here: a seven-card strip, the three-up lever grid, the
   status list, the CSP-safe share bar, and the definition notes. Every colour
   and radius is an existing token. */
.rpt.ins .kpis{grid-template-columns:repeat(7,1fr)}
@media (max-width:1400px){.rpt.ins .kpis{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.rpt.ins .kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rpt.ins .kpis{grid-template-columns:1fr}}
.ins .kpi .val{font-size:23px}
.ins .kpi .lab{text-transform:none}

/* The filter form IS the toolbar, so its selects need the compact treatment the
   toolbar's inputs already get. */
.ins .toolbar{margin:16px 0 14px}
.ins .toolbar .field select{width:auto;min-width:130px;padding:7px 10px;font-size:13px;
  box-shadow:var(--shadow)}
.ins .toolbar .field input{min-width:96px}

/* ── the data-freshness line: three or four dotted facts, one per source ───── */
.ins .status{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;
  gap:6px 20px;font-size:12.5px;color:var(--ink-3)}
.ins .status li{display:flex;align-items:baseline;gap:8px}
.ins .status b{color:var(--ink);font-weight:600}
.ins .status .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--pos);
  position:relative;top:-1px}
.ins .status .dot.warn{background:var(--warn)}

/* ── the three lever cards, side by side on a wide screen ──────────────────── */
.ins .insgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:0 0 4px}
@media (max-width:1180px){.ins .insgrid3{grid-template-columns:1fr}}
.ins .insv{padding:15px 0 6px;margin:0 0 18px;overflow:hidden}
.ins .insgrid3 .insv{margin:0}
.ins .insv-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 16px}
.ins .insv h2{font-size:15px}
.ins .insv h2 .q{font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:0}
.ins .insv-head .btn{flex:none;padding:4px 10px;font-size:11.5px;box-shadow:none}
.ins .hint{margin:7px 16px 11px;font-size:12.5px;color:var(--ink-3);max-width:70ch}
.ins .insv .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The console's 1120px floor is for a pinned-name table with a dozen metric
   columns; a six-column lever card is far narrower, and forcing it to scroll
   would defeat the three-up grid. Two classes rather than one: the rule this
   overrides (.rpt table.rtable) has identical specificity to a bare .ins
   selector, which therefore won only by sitting later in the file — a reorder
   would have silently restored the 1120px floor and made every lever card
   scroll. Adding .rpt wins on specificity instead of on position. */
.rpt.ins table.rtable{min-width:0}
.ins .insgrid3 table.rtable{min-width:390px}
.ins [data-report-view="destinations"] table.rtable{min-width:940px}
.ins table.rtable thead th{background:var(--surface-2)}
.ins table.rtable tbody td{padding:8px 12px}
.ins .nm{cursor:default}
.ins .nm .s{font-family:var(--f-ui);font-size:11px;color:var(--ink-4);display:block}
.ins .name{gap:8px;flex-wrap:wrap}
.ins .pill{font-size:10.5px;padding:2px 7px;flex:none}
/* An ROI inside ±1 pp is not a signal in either direction — the console defines
   .roi.up / .roi.down, so only the neutral state is new. */
.ins .roi.flat{background:var(--surface-3);color:var(--ink-3)}
.ins .kpi .val .flat{color:var(--ink-3)}
.ins .kpi .val .up{color:var(--pos)}
.ins .kpi .val .down{color:var(--neg)}

/* ── the share-of-leads bar: a native <progress>, because the admin CSP forbids
      the inline style="width:N%" the mockup used. The value is an attribute; the
      three vendor pseudo-elements are the only way to paint the track/fill. ─── */
.ins td[data-col="share"]{white-space:nowrap}
.ins progress.share{vertical-align:middle;width:58px;height:6px;border:0;border-radius:3px;
  background:var(--surface-3);appearance:none;-webkit-appearance:none}
.ins progress.share::-webkit-progress-bar{background:var(--surface-3);border-radius:3px}
.ins progress.share::-webkit-progress-value{background:var(--ink-4);border-radius:3px}
.ins progress.share::-moz-progress-bar{background:var(--ink-4);border-radius:3px}
.ins .pct{display:inline-block;min-width:44px;margin-left:8px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
/* The row the landers actually send traffic into: amber bar, amber left edge. */
.ins tbody tr.cur{background:var(--accent-soft)}
.ins tbody tr.cur td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.ins tbody tr.cur progress.share::-webkit-progress-value{background:var(--accent)}
.ins tbody tr.cur progress.share::-moz-progress-bar{background:var(--accent)}
.ins tbody tr.dim{color:var(--ink-3)}
.ins tbody tr.dim .nm .t{font-weight:500}
.ins .cta{font-weight:600;white-space:nowrap}

/* ── the Phase-2 placeholder and the definition notes ─────────────────────── */
.ins .insphase{border-style:dashed;border-color:var(--border-2);background:var(--surface-2);
  box-shadow:none}
.ins .insphase h2{font-size:15px}
.ins .insphase .hint{margin:8px 0 0}
.ins .insnotes-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  margin:22px 2px 10px}
.ins .notes{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:12.5px;
  color:var(--ink-3);max-width:110ch}
.ins .notes li{padding-left:13px;position:relative;line-height:1.6}
.ins .notes li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--line)}
.ins .notes b{color:var(--ink-2)}

/* ─────────────────────────────── URL builder ─────────────────────────────── */
kbd{font-family:var(--f-mono);font-size:11px;background:var(--sunken);border:1px solid var(--border-2);
  border-radius:4px;padding:1px 5px;color:var(--ink-2)}
.utmb-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 20px}
.utmb-tab{font:inherit;font-weight:600;font-size:14px;cursor:pointer;background:none;border:0;
  color:var(--ink-3);padding:9px 15px;border-bottom:2px solid transparent;margin-bottom:-1px}
.utmb-tab:hover{color:var(--ink)}
.utmb-tab.on{color:var(--accent-2);border-bottom-color:var(--accent)}
.utmb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px 18px}
.utmb-fields .field,.utmb-dims .field{margin:0;max-width:none}
.utmb-check{flex-direction:row;align-items:center;gap:9px;align-self:end;padding-bottom:8px}
.utmb-check input{width:auto;accent-color:var(--accent)}
.utmb-check .field-label{margin:0}
.utmb-advanced,.utmb-shared{margin:18px 0 0}
.utmb-shared{border-top:1px solid var(--line);padding-top:4px}
.utmb-advanced summary,.utmb-shared summary{cursor:pointer;font-weight:600;font-size:14px;
  color:var(--ink-2);padding:7px 0;list-style-position:inside}
.utmb-advanced summary:hover,.utmb-shared summary:hover{color:var(--ink)}
.utmb-advanced .utmb-fields,.utmb-shared .utmb-fields{margin-top:12px}
.utmb-preview{margin:22px 0 0;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px}
.utmb-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 11px}
.utmb-preview-head .field-label{margin:0}
.utmb-url{display:block;font-family:var(--f-mono);font-size:12.5px;line-height:1.65;color:var(--ink);
  word-break:break-all;user-select:all}
.utmb-url .utmb-hl{color:var(--accent-2);font-weight:600}
.utmb-warn{margin:11px 0 0;font-size:13px;color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--warn-soft);border-radius:var(--r-xs);padding:8px 11px}
.utmb-lede{color:var(--ink-3);font-size:14px;line-height:1.55;margin:0 0 18px;max-width:74ch}
.utmb-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:15px 18px}
.utmb-checks{display:flex;flex-direction:column;gap:7px;max-height:190px;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:var(--surface)}
.utmb-checks label{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;margin:0}
.utmb-checks input{width:auto;accent-color:var(--accent)}
.utmb-checks .utmb-sub{color:var(--ink-4);font-size:12px}
.utmb-genbar{display:flex;align-items:center;gap:10px;margin:20px 0 14px;flex-wrap:wrap}
.utmb-genbar .spacer{flex:1;min-width:8px}
.utmb-count{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.utmb-out .empty{padding:26px 12px;text-align:center}
.utmb-gridwrap{overflow:auto;max-height:62vh}
table.utmb-grid{width:100%;border-collapse:collapse;font-size:13px}
table.utmb-grid th{position:sticky;top:0;background:var(--surface-3);text-align:left;padding:8px 7px;
  font-size:11.5px;font-weight:650;color:var(--ink-2);white-space:nowrap;z-index:2;
  border-bottom:1px solid var(--border-2)}
table.utmb-grid td{padding:0;border-bottom:1px solid var(--line);vertical-align:middle}
table.utmb-grid tr:hover td{background:var(--hover)}
table.utmb-grid input,table.utmb-grid select{border:0;border-radius:0;background:transparent;
  padding:7px 7px;font-size:13px;min-width:9ch}
table.utmb-grid input:focus,table.utmb-grid select:focus{outline:2px solid var(--accent);
  outline-offset:-2px;background:var(--surface);position:relative;z-index:1}
table.utmb-grid td.utmb-cell-url{max-width:300px}
table.utmb-grid .utmb-url{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:0 7px;user-select:all}
.utmb-gridcheck{text-align:center}.utmb-gridcheck input{width:auto;accent-color:var(--accent)}
.utmb-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ink-4)}
.utmb-dot.ok{background:var(--ok)}.utmb-dot.warn{background:var(--warn)}.utmb-dot.bad{background:var(--bad)}
.utmb-rm{cursor:pointer;background:none;border:0;color:var(--ink-4);font-size:17px;line-height:1;padding:4px 9px}
.utmb-rm:hover{color:var(--bad)}
.utmb-ref-group{margin:0 0 24px}.utmb-ref-group:last-child{margin-bottom:0}
.utmb-ref-group h3{font-size:14px;font-weight:650;margin:0 0 4px}
.utmb-ref-group p{color:var(--ink-3);font-size:13.5px;line-height:1.5;margin:0 0 11px;max-width:74ch}
.utmb-ref table{font-size:13px}.utmb-ref th{white-space:nowrap}
.utmb-ref td:first-child code{color:var(--accent-2);font-weight:600;white-space:nowrap}
.utmb-eg code{color:var(--ink-3)}
@media (max-width:720px){
  .utmb-tabs{overflow-x:auto;scrollbar-width:none}.utmb-tabs::-webkit-scrollbar{display:none}
  .utmb-preview-head{flex-direction:column;align-items:stretch;gap:9px}
  .utmb-preview-head .btn{width:100%}
}