/* ==========================================================================
   Bantam Ads Dashboard — design tokens carried from
   reference/bantam-ads-tracker.html, extended for the four screens.
   Desktop-first at 1440.
   ========================================================================== */
:root{
  --canvas:#EEF1F5; --surface:#FFFFFF; --ink:#17222E; --ink-soft:#5A6B7C;
  --line:#DCE3EA; --line-soft:#E8EDF2;
  --brand:#0E6E5C; --brand-ink:#0A5346; --brand-soft:#E3F2EE;
  --warn:#B4690E; --warn-soft:#FCF3E3; --bad:#BF3B2B; --bad-soft:#FBEAE7;
  --good:#1E7F4F; --good-soft:#E6F4EC;
  --meta:#1877F2; --meta-soft:#E7F0FE;
  --google:#E09600; --google-soft:#FDF3DF;
  --stackadapt:#6E4AFF; --stackadapt-soft:#EFEAFF;
  --disney:#0B3A82; --disney-soft:#E6EDF8;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(23,34,46,.06), 0 4px 14px rgba(23,34,46,.05);
  --fs-base:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:var(--fs-base);}
body{
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  background:var(--canvas); color:var(--ink); min-height:100vh; line-height:1.45;
}
h1,h2,h3,.display{font-family:'Space Grotesk','Public Sans',sans-serif;}
button{font-family:inherit; font-size:1rem; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:1rem;}
.num{font-variant-numeric:tabular-nums;}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
[hidden]{display:none !important;}

/* ---------- Shell ---------- */
.shell{display:grid; grid-template-columns:232px 1fr; min-height:100vh;}
.rail{
  background:var(--ink); color:#E7EDF3; padding:1.4rem 1rem;
  display:flex; flex-direction:column; gap:.35rem; position:sticky; top:0; height:100vh;
}
.rail .wordmark{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:.01em; padding:.25rem .65rem 1.1rem; display:flex; align-items:center; gap:.55rem;
}
.wordmark .mark{
  width:26px; height:26px; border-radius:7px; flex:none;
  background:linear-gradient(135deg, var(--meta) 0 33%, var(--google) 33% 66%, var(--stackadapt) 66% 100%);
}
.wordmark small{
  display:block; font-family:'Public Sans'; font-weight:500; font-size:.72rem;
  color:#93A5B6; letter-spacing:.06em; text-transform:uppercase;
}
.navbtn{
  display:flex; align-items:center; gap:.6rem; width:100%;
  background:none; border:none; color:#B9C6D2; text-align:left;
  padding:.62rem .65rem; border-radius:8px; font-size:1rem; font-weight:500;
}
.navbtn:hover{background:rgba(255,255,255,.08); color:#fff;}
.navbtn.active{background:rgba(255,255,255,.14); color:#fff; font-weight:600;}
.navbtn:focus-visible{outline:2px solid #7FD1BF; outline-offset:2px;}
.navbtn[disabled]{opacity:.4; cursor:not-allowed;}
.navbtn .count{
  margin-left:auto; background:var(--warn); color:#fff; font-size:.72rem; font-weight:700;
  min-width:20px; text-align:center; padding:.05rem .35rem; border-radius:999px;
}
.rail .foot{margin-top:auto; font-size:.78rem; color:#7E90A2; padding:.5rem .65rem;}
.rail .foot .dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:.4rem; background:var(--good); vertical-align:baseline;
}
.rail .foot.stale .dot{background:var(--warn);}
.rail .foot.err .dot{background:var(--bad);}
.rail .viewer{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem;
  border-top:1px solid rgba(255,255,255,.1); margin-top:.5rem; font-size:.85rem; color:#B9C6D2;
}
.rail .viewer .av{
  width:24px; height:24px; border-radius:50%; background:var(--brand);
  display:grid; place-items:center; font-size:.72rem; font-weight:700; color:#fff; flex:none;
}

.main{padding:1.6rem 2rem 4rem; max-width:1240px; width:100%;}
.topbar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-bottom:1.1rem;}
.topbar h1{font-size:1.45rem; font-weight:700; margin-right:auto;}
.filters{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.filters label{font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
.filters select{
  padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-weight:500;
}
.filters select:focus-visible{outline:2px solid var(--brand); outline-offset:1px;}

/* ---------- Cards & KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-bottom:1.2rem;}
.kpi{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.9rem 1rem;
}
.kpi .label{font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.kpi .val{font-family:'Space Grotesk'; font-size:1.5rem; font-weight:600; margin-top:.15rem;}
.kpi .sub{font-size:.8rem; color:var(--ink-soft); margin-top:.1rem;}
.kpi .delta{font-size:.82rem; font-weight:600; margin-top:.1rem;}
.delta.up{color:var(--good);} .delta.down{color:var(--bad);} .delta.flat{color:var(--ink-soft);}
.delta.invert.up{color:var(--bad);} .delta.invert.down{color:var(--good);}

.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin-bottom:1.2rem;
}
.card h2{font-size:1.05rem; font-weight:600; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.card h2 .sub{font-family:'Public Sans'; font-size:.82rem; font-weight:500; color:var(--ink-soft); margin-left:auto;}
.card h3{font-size:.92rem; font-weight:600; margin-bottom:.4rem;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;}
.detail-layout{display:grid; grid-template-columns:1fr 340px; gap:1.2rem; align-items:start;}

/* ---------- Chips & badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.38rem; font-size:.8rem; font-weight:600;
  padding:.16rem .55rem; border-radius:999px; white-space:nowrap;
}
.chip .pdot{width:8px; height:8px; border-radius:50%;}
.chip.meta{background:var(--meta-soft); color:#0F5CC0;} .chip.meta .pdot{background:var(--meta);}
.chip.google{background:var(--google-soft); color:#8A5C00;} .chip.google .pdot{background:var(--google);}
.chip.youtube{background:var(--bad-soft); color:#9B2F22;} .chip.youtube .pdot{background:#CE2B21;}
.chip.stackadapt{background:var(--stackadapt-soft); color:#4B2ECC;} .chip.stackadapt .pdot{background:var(--stackadapt);}
.chip.disneyhulu{background:var(--disney-soft); color:var(--disney);} .chip.disneyhulu .pdot{background:var(--disney);}
.chip.tech{background:var(--brand-soft); color:var(--brand-ink);}
.chip.neutral{background:var(--line-soft); color:var(--ink-soft);}

.badge{font-size:.78rem; font-weight:700; padding:.14rem .5rem; border-radius:6px; white-space:nowrap;}
.badge.ontrack,.badge.healthy{background:var(--good-soft); color:var(--good);}
.badge.watch{background:var(--warn-soft); color:var(--warn);}
.badge.attention,.badge.fatigued{background:var(--bad-soft); color:var(--bad);}
.badge.na{background:var(--line-soft); color:var(--ink-soft);}
.badge.new{background:var(--brand-soft); color:var(--brand-ink);}
.est{font-size:.72rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}

/* ---------- Health meter (from reference) ---------- */
.meter{display:inline-flex; gap:2.5px; vertical-align:middle;}
.meter i{width:9px; height:14px; border-radius:2.5px; background:var(--line);}
.meter.healthy i.on{background:var(--good);}
.meter.watch i.on{background:var(--warn);}
.meter.fatigued i.on{background:var(--bad);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.45rem; border-radius:var(--radius-sm);
  padding:.55rem 1rem; font-weight:600; border:1px solid transparent;
}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.btn.primary{background:var(--brand); color:#fff;}
.btn.primary:hover{background:var(--brand-ink);}
.btn.ghost{background:var(--surface); border-color:var(--line); color:var(--ink);}
.btn.ghost:hover{border-color:var(--ink-soft);}
.btn.amber{background:var(--warn-soft); border-color:#E9CE9B; color:var(--warn);}
.btn.amber:hover{background:#F8E9CC;}
.btn.small{padding:.35rem .7rem; font-size:.88rem;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:.95rem;}
th{
  text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); padding:.45rem .6rem; border-bottom:1.5px solid var(--line); white-space:nowrap;
}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--ink);}
td{padding:.6rem; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
td.num, th.num{text-align:right;}
/* The watchlist is dense; without minimums the campaign name wraps to
   three lines and the governing-metric column squeezes to nothing. */
table.watch{min-width:1120px;}
table.watch th:first-child, table.watch td:first-child{min-width:210px;}
table.watch td:nth-child(6){min-width:210px;}
table.watch th:nth-child(2), table.watch td:nth-child(2){white-space:nowrap;}
.cellmain{font-weight:600;}
.cellsub{font-size:.8rem; color:var(--ink-soft);}
.scrollx{overflow-x:auto;}
tr.status-attention td:first-child{border-left:3px solid var(--bad); padding-left:.7rem;}
tr.status-watch td:first-child{border-left:3px solid var(--warn); padding-left:.7rem;}
tr.status-ontrack td:first-child{border-left:3px solid var(--good); padding-left:.7rem;}
tr.expander{cursor:pointer;}
tr.expander:hover{background:#F7F9FB;}
tr.flagrow td{
  background:var(--bad-soft); font-size:.85rem; color:#7E2A1E;
  border-bottom:1px solid var(--line-soft); padding:.5rem .7rem .6rem 1rem;
}
tr.flagrow.watchlvl td{background:var(--warn-soft); color:#7A470A;}
tr.flagrow .fl{display:block; margin:.12rem 0;}

/* ---------- Alert banners ---------- */
.banner{
  display:flex; gap:.9rem; align-items:flex-start; border-radius:var(--radius);
  padding:1rem 1.1rem; margin-bottom:1.1rem; border:1px solid;
}
.banner .ico{font-size:1.15rem; line-height:1.2; flex:none;}
.banner .body{flex:1;}
.banner .body strong{font-weight:700;}
.banner p{font-size:.92rem; margin-top:.15rem;}
.banner.bad{background:var(--bad-soft); border-color:#EFC9C2; color:#7E2A1E;}
.banner.warn{background:var(--warn-soft); border-color:#E9CE9B; color:#7A470A;}
.banner.info{background:var(--brand-soft); border-color:#B9DED4; color:var(--brand-ink);}

/* ---------- Empty states (three distinct kinds) ---------- */
.empty{
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:1.5rem 1.2rem; text-align:center; color:var(--ink-soft); background:#FBFCFD;
}
.empty .t{font-weight:600; color:var(--ink); font-size:.95rem;}
.empty .d{font-size:.85rem; margin-top:.25rem;}
.empty.inline{padding:.9rem; text-align:left;}

/* ---------- Legend ---------- */
.legend{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.84rem; color:var(--ink-soft);}
.legend .item{display:flex; gap:.4rem; align-items:center;}
.legend .sw{width:12px; height:12px; border-radius:3px;}

/* ---------- Cards screen ---------- */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1rem;}
.ctile{
  background:var(--surface); border:1px solid var(--line-soft); border-left:4px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.1rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.ctile.status-attention{border-left-color:var(--bad);}
.ctile.status-watch{border-left-color:var(--warn);}
.ctile.status-ontrack{border-left-color:var(--good);}
.ctile .name{font-family:'Space Grotesk'; font-weight:600; font-size:1.05rem;}
.ctile .meta-line{font-size:.82rem; color:var(--ink-soft);}
.ctile .bignum{font-family:'Space Grotesk'; font-size:1.7rem; font-weight:600; line-height:1.1;}
.ctile .benchline{font-size:.8rem; color:var(--ink-soft);}
.ctile .ministats{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; border-top:1px solid var(--line-soft); padding-top:.55rem;}
.ctile .ministats .lbl{font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.ctile .ministats .v{font-weight:600;}
.ctile .warnstrip{
  background:var(--bad-soft); color:#7E2A1E; font-size:.82rem;
  border-radius:var(--radius-sm); padding:.45rem .6rem;
}
.ctile .warnstrip.watchlvl{background:var(--warn-soft); color:#7A470A;}
.pill{
  display:inline-block; font-size:.76rem; font-weight:700; padding:.1rem .5rem;
  border-radius:999px; background:var(--line-soft); color:var(--ink-soft);
}
.pill.soon{background:var(--warn-soft); color:var(--warn);}
.pill.over{background:var(--bad-soft); color:var(--bad);}

/* ---------- Progress bar ---------- */
.bar{height:8px; border-radius:999px; background:var(--line-soft); overflow:hidden;}
.bar i{display:block; height:100%; background:var(--brand); border-radius:999px;}
.bar.over i{background:var(--bad);}
.bar.under i{background:var(--warn);}
.barrow{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-soft); margin-top:.25rem;}

/* ---------- Benchmark scale (signature) ---------- */
.scale{padding:.6rem .2rem 1.4rem;}
.scale svg{width:100%; height:104px; overflow:visible;}
.scale .cap{font-size:.84rem; color:var(--ink-soft); margin-top:.5rem;}

/* ---------- Weekly bars ---------- */
.weekbars svg{width:100%; height:170px; overflow:visible;}
.annot{font-size:.8rem; color:var(--warn); font-weight:600; margin-top:.4rem;}

/* ---------- Flags panel ---------- */
.flag{border-left:3px solid var(--bad); background:var(--bad-soft); border-radius:var(--radius-sm); padding:.7rem .8rem; margin-bottom:.7rem;}
.flag.watchlvl{border-left-color:var(--warn); background:var(--warn-soft);}
.flag.infolvl{border-left-color:var(--brand); background:var(--brand-soft);}
.flag .t{font-weight:700; font-size:.9rem;}
.flag .e{font-size:.85rem; margin-top:.2rem; color:#4A5563;}

/* ---------- Left rail (cards screen) ---------- */
.withrail{display:grid; grid-template-columns:230px 1fr; gap:1.2rem; align-items:start;}
.siderail{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem;}
.siderail h3{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:.9rem 0 .4rem;}
.siderail h3:first-child{margin-top:0;}
.siderail .opt{display:flex; align-items:center; gap:.45rem; font-size:.9rem; padding:.2rem 0;}
.siderail .opt .n{margin-left:auto; font-size:.8rem; color:var(--ink-soft);}
.togglerow{display:flex; flex-wrap:wrap; gap:.35rem;}
.togglechip{
  font-size:.8rem; font-weight:600; padding:.25rem .6rem; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
}
.togglechip.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.togglechip[disabled]{opacity:.45; cursor:not-allowed;}

/* ---------- Setup screen ---------- */
.setupcard{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.2rem; overflow:hidden;}
.setupcard > header{padding:1rem 1.2rem; border-bottom:1px solid var(--line-soft); display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;}
.setupcard > header .nm{font-family:'Space Grotesk'; font-weight:600; font-size:1.05rem;}
.setupbody{display:grid; grid-template-columns:300px 1fr; gap:0;}
.observed{background:#FAFBFC; border-right:1px solid var(--line-soft); padding:1rem 1.2rem; font-size:.88rem;}
.observed dl{display:grid; grid-template-columns:auto 1fr; gap:.3rem .7rem;}
.observed dt{font-weight:600; color:var(--ink-soft); font-size:.8rem;}
.observed dd{text-align:right;}
.form{padding:1rem 1.2rem;}
.field{margin-bottom:.85rem;}
.field label{display:block; font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.2rem;}
.field input[type=text], .field input[type=number], .field textarea, .field select{
  width:100%; padding:.45rem .6rem; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--ink);
}
.field textarea{min-height:64px; resize:vertical; font-size:.85rem; line-height:1.4;}
.field .hint{font-size:.78rem; color:var(--ink-soft); margin-top:.2rem;}
.field .hint.warn{color:var(--warn); font-weight:600;}
.fieldrow{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
.checkrow{display:flex; align-items:center; gap:.5rem; font-size:.9rem;}
.techpicker{display:flex; flex-wrap:wrap; gap:.35rem;}
.zipout{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
  background:#F7F9FB; border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  padding:.5rem .6rem; max-height:96px; overflow:auto; word-break:break-all;
}
.marginal{font-size:.78rem; color:var(--warn); margin-top:.3rem;}
.rowout{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem;
  background:var(--ink); color:#D9E2EA; border-radius:var(--radius-sm);
  padding:.6rem .7rem; overflow-x:auto; white-space:pre; margin-top:.4rem;
}
.checkitem{display:flex; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--line-soft); font-size:.9rem;}
.checkitem:last-child{border-bottom:none;}
.checkitem .sev{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.1rem .4rem; border-radius:4px; flex:none; height:fit-content;}
.checkitem .sev.high{background:var(--bad-soft); color:var(--bad);}
.checkitem .sev.med{background:var(--warn-soft); color:var(--warn);}
.checkitem .sev.low{background:var(--line-soft); color:var(--ink-soft);}
.checkitem .txt strong{display:block; font-weight:600;}
.checkitem .txt span{color:var(--ink-soft); font-size:.85rem;}

/* ---------- Gate (passphrase) ---------- */
.gate{min-height:100vh; display:grid; place-items:center; padding:2rem;}
.gatebox{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.8rem; max-width:420px; width:100%;}
.gatebox h1{font-size:1.25rem; margin-bottom:.3rem;}
.gatebox p{font-size:.9rem; color:var(--ink-soft); margin-bottom:1rem;}
.gatebox input{width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.8rem;}
.gatebox .err{color:var(--bad); font-size:.85rem; margin-bottom:.6rem; font-weight:600;}

/* ---------- Misc ---------- */
.loading{padding:3rem; text-align:center; color:var(--ink-soft);}
.sronly{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.crumb{font-size:.86rem; color:var(--ink-soft); margin-bottom:.4rem;}
.crumb a{font-weight:600;}
.tabletitle{display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem;}
.tabletitle h2{font-size:1.05rem;}
.muted{color:var(--ink-soft);}
.right{text-align:right;}
.mt{margin-top:1rem;} .mb{margin-bottom:1rem;}