/* Reebok UI components on top of tokens.css: the sidebar shell, the Home page. */
.sidebar{padding:0;display:flex;flex-direction:column}
.sb-head{display:flex;align-items:center;gap:8px;padding:14px 14px 8px}
.sb-head img{width:20px;height:20px;background:var(--white);border-radius:50%;padding:2px;display:block}
.sb-head .brand{font-size:13px;font-weight:var(--w-semibold);color:var(--white);line-height:1.2}
.sb-head .brand small{display:block;font-size:10px;font-weight:var(--w-regular);color:var(--powder)}
.sb-search{margin:4px 10px 8px;position:relative}
.sb-search input{width:100%;padding:7px 30px 7px 10px;border-radius:var(--r-btn);border:1px solid var(--teal-deep);background:var(--teal-deep);color:var(--white);font:inherit;font-size:12px}
.sb-search input::placeholder{color:var(--powder)}
.sb-search kbd{position:absolute;right:8px;top:7px;font-size:9px;color:var(--powder);border:1px solid var(--powder);border-radius:4px;padding:0 4px;font-family:inherit}
.sb-group{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px;cursor:pointer;user-select:none}
.sb-group .eyebrow{color:var(--powder)}
.sb-group .chev{color:var(--powder);display:inline-flex;transition:transform .15s}
.sb-group.closed .chev{transform:rotate(-90deg)}
.sb-items.closed{display:none}
.sidebar button .badge-new{margin-left:auto;font-size:9px;font-weight:var(--w-semibold);letter-spacing:.04em;background:var(--flame);color:var(--white);border-radius:var(--r-pill);padding:1px 7px}
.sidebar button.active .badge-new{background:var(--white);color:var(--flame)}
.sidebar button .dot{margin-left:auto;margin-right:0}
.sidebar .fb{margin-left:auto}
.sidebar button .dot+.fb{margin-left:6px}
.sb-foot{margin-top:auto;padding:12px 14px 14px;font-size:10.5px;color:var(--powder);line-height:1.5;border-top:1px solid var(--teal-deep)}
.sb-foot b{color:var(--white);font-weight:var(--w-semibold)}
.sidebar.mini .sb-head .brand,.sidebar.mini .sb-search,.sidebar.mini .sb-group,.sidebar.mini .sb-foot,.sidebar.mini .badge-new,.sidebar.mini .dot{display:none}

/* Chip-BUTTON filters -- used across Portfolios, Recommendations, Month-on-month-style
   pickers, etc, not just Home. Distinct from the unrelated, already-styled .chip
   (singular, dashboard.html:436/593) used by Harvest and negate's verdict filter. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips button{border:1px solid var(--powder);background:var(--surface);color:var(--text);border-radius:var(--r-pill);font:inherit;font-size:11.5px;padding:3px 10px;cursor:pointer}
.chips button.on{background:var(--teal);border-color:var(--teal);color:var(--white)}
.sidebar.mini .sb-items.closed{display:block}
.sidebar.mini .sb-head{justify-content:center;padding:14px 0 8px}
.sb-hit{background:rgba(255,255,255,.12)}
.month-bar .avatar{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--white);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--w-semibold)}

/* --- Home: the locked reference (03_Design_Reference/home/home_reference.html) ----------
   Reproduced as-is -- grid spans, card shape, palette, pill style, animations, tooltips --
   with the reference's own variable set living on .home (light) and body.dark .home
   (dark), values copied verbatim. Type and inner spacing are the reference's at the 1.55x
   preview zoom its PNGs were shot at; the 9px gap and 14px/18px radii are the literal
   spec. Nothing in here hardcodes a surface or text colour -- those all read the vars. */
.home{--bg:#F6F6F4;--card:#fff;--text:#1D1D20;--sub:#7A8A90;--line:#E6E8E6;--head:#367588;--soft:#F1F2F1;--track:#EEF0EE;--pill:#367588;--pillt:#fff;
  color:var(--text);position:relative}
body.dark .home{--bg:#0F2A33;--card:#163A45;--text:#FFFFFF;--sub:#9FC3CC;--line:#1E4C5A;--head:#9FC3CC;--soft:#12313B;--track:#0F2A33;--pill:#fff;--pillt:#0F2A33}
.home .hcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 18px;min-width:0;position:relative;box-sizing:border-box}
.home .t{font-size:11.5px;color:var(--head);letter-spacing:.08em;font-weight:var(--w-semibold);text-transform:uppercase}
.home .n{font-weight:var(--w-semibold);letter-spacing:-.02em;color:var(--text)}
.home .sub{font-size:10px;color:var(--sub)}
.pp{font-size:11px;padding:3px 11px;border-radius:12px;cursor:pointer;color:var(--sub);white-space:nowrap;line-height:1.4;user-select:none}
.pp.on{background:var(--pill);color:var(--pillt);font-weight:500}
.pp.off{opacity:.38;cursor:not-allowed}
.pill-group{display:inline-flex;gap:3px;background:var(--soft);border-radius:14px;padding:3px;width:fit-content}
.home .teal{background:linear-gradient(120deg,#1B7894 0%,#367588 55%,#2C5F6E 100%);border:none;color:#fff}
.home .teal .t,.home .teal .sub{color:#B8DBD9}
.home .up{color:#1D9E75}body.dark .home .up{color:#8DD9A8}.home .dn{color:#E35D34}body.dark .home .dn{color:#F09595}
.home .lnk{color:var(--head);font-weight:500;cursor:pointer}
.home-tip{position:fixed;pointer-events:none;background:#1D1D20;color:#fff;font-size:11px;padding:6px 11px;border-radius:9px;z-index:9;display:none;white-space:nowrap;font-weight:var(--w-regular)}
.home-tip b{font-weight:var(--w-semibold)}
@keyframes hPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--glow),.5)}70%{box-shadow:0 0 0 11px rgba(var(--glow),0)}}
@keyframes hShine{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.home .proj-pill{animation:none!important}}

/* top row, gear panel, KPI strip */
.home-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;gap:12px}
.home-title{font-size:22px;font-weight:var(--w-semibold);letter-spacing:-.02em}
.home .home-top-r{font-size:12px;white-space:nowrap}
.home .gear-panel{margin-bottom:9px}
.home .gear-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:4px 14px;margin-top:8px}
.home .gear-row{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.kpi-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:9px}
.home .kpi{padding:14px 17px;border-top:2px solid #367588}
.home .kpi.down{border-top-color:#E35D34}
.home .kpi-v{font-size:23px;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .kpi-d{font-size:11px}

/* the 6-column grid; every card is a direct grid item, so it stretches to its row */
.home-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.home-grid>.hcard{min-width:0;display:flex;flex-direction:column}
.home .trend{grid-column:span 4;border-radius:18px 14px 14px 14px;overflow:hidden;padding:0;min-height:230px;display:grid;grid-template-columns:189px minmax(0,1fr)}
.home .donut{grid-column:span 2;border-radius:14px 18px 14px 14px;flex-direction:row;align-items:center;gap:15px;padding:14px 18px;min-height:230px}
.home .perf{grid-column:span 4;padding:12px 18px 14px}
.home .proj{grid-column:span 2}
.home .caps{grid-column:span 4;padding:0;overflow:hidden;min-height:300px}
.home .needs{grid-column:span 2;background:linear-gradient(160deg,#367588,#2C5F6E);align-self:start}
.home .needs-foot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.2);font-size:9.5px;line-height:1.45;color:rgba(255,255,255,.72)}
@media (max-width:1100px){.home-grid{grid-template-columns:1fr}.home-grid>.hcard{grid-column:span 1!important;grid-row:auto!important}.home .trend{grid-template-columns:1fr}}

/* trend */
.home .trend-glow{position:absolute;right:-46px;top:-62px;width:264px;height:264px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.home .trend-l{padding:18px;border-right:1px solid rgba(255,255,255,.2);min-width:0;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
.home .trend-big{line-height:1;margin:9px 0 5px;color:#fff;white-space:nowrap}
.home .trend-delta{display:inline-block;font-size:12px;background:#fff;color:#0F6E56;padding:3px 11px;border-radius:14px;font-weight:var(--w-semibold);white-space:nowrap}
.home .trend-delta.dn{color:#9C4221}.home .trend-delta.muted{color:#7A8A90}
.home .trend-l>.sub{margin-top:12px}
.home .trend-r{padding:14px 18px 12px;min-width:0;display:flex;flex-direction:column;position:relative;z-index:1}
.home .trend-ctl{display:flex;justify-content:flex-end;gap:3px;align-items:center;flex-wrap:wrap;min-height:22px}
.home .trend-pills{display:inline-flex;gap:3px}
.home .trend .pp{color:#B8DBD9}.home .trend .pp.on{background:#fff;color:#1D1D20}
.home .trend-vsep{width:1px;background:rgba(255,255,255,.3);margin:0 5px;height:15px}
.home .trend-plot{position:relative;flex:1;min-height:96px;margin-top:8px}
.home .trend-bars{position:absolute;inset:0;display:flex;align-items:flex-end}
.home .trend-slot{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.home .trend-bar{display:block;width:79%;max-width:40px;border-radius:7px;background:rgba(255,255,255,.55)}
.home .trend-bar.peak{background:#fff}.home .trend-bar.cur{background:#E35D34}
.home .trend-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.home .trend-line polyline{fill:none;stroke:#E35D34;stroke-width:2px;stroke-linejoin:round}
.home .trend-labs{display:flex;margin-top:6px}
.home .trend-labs span{flex:1;min-width:0;text-align:center;font-size:8.5px;color:#B8DBD9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .trend-labs span.cur{color:#FFB8A0}

/* donut */
.home .donut-ring{position:relative;width:96px;height:96px;flex-shrink:0}
.home .donut-ring svg{width:96px;height:96px;overflow:visible;display:block}
.home .seg{cursor:pointer}.home .seg:hover{stroke-width:12}
.home .donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.home .donut-c .n{font-size:12px}.home .donut-c .n.big{font-size:18px}.home .donut-c .sub{font-size:9px}
.home .donut-r{display:flex;flex-direction:column;gap:9px;min-width:0}
.home .donut-leg{display:flex;gap:12px;font-size:11px}

/* performance */
.home .perf-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.home .perf-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.home .perf-pills{display:inline-flex;gap:5px}
.home .perf-modes .mode-perf.on{background:#1D9E75;color:#fff}.home .perf-modes .mode-leak.on{background:#E35D34;color:#fff}
.home .perf-hd{display:flex;gap:9px;font-size:10px;color:var(--sub);letter-spacing:.05em;padding:6px 0 3px;border-bottom:1px solid var(--line);margin-top:6px}
.home .perf-body{overflow:hidden;height:170px}
.home .perf-row{display:flex;align-items:center;gap:9px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--soft);height:34px;box-sizing:border-box}
.home .perf-hd .f1,.home .perf-row .f1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.home .perf-row .f1{font-weight:500}
.home .perf-hd span,.home .perf-row span{text-align:right;flex-shrink:0}
.home .w1{width:93px}.home .w2{width:96px}.home .w3{width:47px;font-weight:var(--w-semibold)}.home .w4{width:53px;font-size:11px}
.home .perf-empty{padding:12px 0}

/* projection */
.home .proj-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.home .proj-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:var(--w-semibold);padding:5px 12px;border-radius:14px;white-space:nowrap;
  background-size:200% 100%;animation:hShine 2.4s linear infinite,hPulse 1.8s ease-out infinite}
.home .proj-pill i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.home .proj-pill.ahead{--glow:29,158,117;color:#fff;background-image:linear-gradient(90deg,#1D9E75,#7FD7B4,#1D9E75)}
.home .proj-pill.paced{--glow:54,117,136;color:#fff;background-image:linear-gradient(90deg,#367588,#7FB3C2,#367588)}
.home .proj-pill.buckle{--glow:239,159,39;color:#1D1D20;background-image:linear-gradient(90deg,#EF9F27,#FFD58A,#EF9F27)}
.home .proj-pill.ease{--glow:227,93,52;color:#fff;background-image:linear-gradient(90deg,#E35D34,#F7A98F,#E35D34)}
.home .proj-pill.watch{color:var(--sub);background:var(--soft);animation:none}
/* four across the card, each a column: ring, label, value, "of target". One grid row,
   so nothing trails below it now the caps card has gone. */
.home .proj-rings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start;margin-bottom:4px}
.home .proj-ring{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.home .proj-ring .ring{width:56px;height:56px;flex-shrink:0}
.home .proj-txt{min-width:0;width:100%}
.home .proj-txt .n{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .proj-txt .sub{font-size:9.5px;letter-spacing:.04em}
.home .proj-txt .sub.s{font-size:9px;line-height:1.3;white-space:normal}
.home .proj-txt .tgt input{width:64px}
.home .proj-foot{margin-top:12px;padding-top:9px;border-top:1px solid var(--line)}
.home .tgt{border-bottom:1px dashed var(--sub);cursor:text}.home .tgt.unset{font-style:italic}
.home .tgt input{width:100px;font:inherit;font-size:11px;padding:1px 4px;border-radius:4px;border:1px solid var(--line);background:var(--card);color:var(--text)}

/* portfolio caps */
.home .caps-band{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 18px;background:#367588;flex-wrap:wrap}
.home .caps-band .t{color:#fff}
.home .caps-pills{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.home .caps-pills .pp{color:#B8DBD9}.home .caps-pills .pp.on{background:#fff;color:#1D1D20}
.home .caps-body{padding:14px 18px 12px;flex:1;display:flex;flex-direction:column}
.home .caps-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.home .caps-l{min-width:0}
.home .caps-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;gap:8px}
.home .caps-big{font-size:24px;white-space:nowrap}
.home .caps-stat{font-size:11.5px;font-weight:500;text-align:right}
.home .caps-chart{position:relative;width:100%;height:140px}
.home .caps-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.home .caps-caplab{position:absolute;right:3px;font-size:8.5px;transform:translateY(-100%);margin-top:-2px;white-space:nowrap}
.home .caps-pt{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:transparent;cursor:pointer}
.home .caps-now{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none}
.home .caps-eta{position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--card);border:2px solid;box-sizing:border-box}
.home .caps-x{display:flex;justify-content:space-between;font-size:9px;margin-top:2px}
.home .caps-g{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.home .gq{text-align:center;cursor:pointer;padding:5px;border-radius:11px;min-width:0}
.home .gq.on{background:var(--soft)}
.home .gq svg{width:71px;height:43px;display:block;margin:0 auto}
.home .gq .sub{font-size:8.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .caps-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.home .caps-empty{padding:16px 0}
.home .caps-hist{margin-top:10px}.home .caps-hist .gr-table{margin:8px 0 0}

/* needs you */
.home .needs .t{margin-bottom:9px}
.home .need{background:rgba(255,255,255,.12);border-left:2px solid #fff;border-radius:0 11px 11px 0;padding:9px 12px;margin-bottom:8px;cursor:pointer}
.home .need:hover{background:rgba(255,255,255,.18)}
.home .need.flame{border-left-color:#E35D34}.home .need.amber{border-left-color:#EF9F27}
.home .need-t{font-size:12px;font-weight:500;color:#fff}

/* scope badges: every block says whether it follows the picker */
.home .scope{display:inline-block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--w-semibold);padding:2px 7px;border-radius:9px;white-space:nowrap;vertical-align:middle;margin-left:8px}
.home .scope.global{background:#1D9E75;color:#fff}
.home .scope.fixed{background:#E35D34;color:#fff}
.home .card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.home .card-head .scope{margin-left:0}
.home .home-top-r .scope{margin:0 10px 0 0}
.home .trend-l>.scope{margin:10px 0 0}
.home .proj-tl{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.home .proj-tl .scope{margin-left:0}
.home .caps-band .scope{margin-left:0;margin-right:auto}

/* performance: rows and the header link open the tab */
.home .perf-r{display:flex;align-items:center;gap:12px}
.home .viewall{font-size:11px;white-space:nowrap}
.home .perf-row{cursor:pointer}
.home .perf-row:hover{background:var(--soft)}

/* month on month */
.home .mom{grid-column:span 4;border-radius:14px 14px 18px 18px;min-height:320px}
.home .mom-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.home .mom-l{display:flex;align-items:center;gap:8px;min-width:0}
.home .mom-l .scope{margin-left:0}
.home .mom-r{display:flex;align-items:center;gap:8px}
.home .mom-pills{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.home .mom-yrs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.home .mom-yrs .ch{font-size:10px;padding:2px 9px;border-radius:11px;border:1px solid var(--line);color:var(--sub);cursor:pointer;white-space:nowrap}
.home .mom-yrs .ch:hover{border-color:var(--teal);color:var(--text)}
.home .mom-yrs .ch.on{background:var(--teal);border-color:var(--teal);color:#fff}
.home .mom-pills .pp.off{opacity:.38;cursor:not-allowed}
.home .mom-wrap{flex:1}
.home .mom-tbl{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}
/* every figure centred, no fills: the same plain reading as every other table */
.home .mom-tbl th,.home .mom-tbl td{padding:4px 4px;height:auto;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;border-bottom:1px solid var(--soft);color:var(--text);background:transparent}
.home .mom-tbl th{font-size:9.5px;color:var(--sub);letter-spacing:.04em;text-transform:uppercase;font-weight:var(--w-semibold);border-bottom:1px solid var(--line);background:transparent;cursor:pointer;user-select:none}
.home .mom-tbl th:hover{color:var(--text)}
.home .mom-tbl th.on{color:var(--teal)}
.home .mom-tbl .mom-dir{margin-left:2px;font-size:8.5px}
.home .mom-tbl th.mom-name,.home .mom-tbl td.mom-name{text-align:left;width:124px;font-weight:500}
.home .mom-tbl th.mom-arrow,.home .mom-tbl td.mom-arrow{width:24px}
/* a year of months in a four-column card: the figures step down rather than clip */
.home .mom-tbl.wide th,.home .mom-tbl.wide td{font-size:9px;padding:4px 1px;letter-spacing:-.015em}
/* the current month's head reads Sep'26·MTD in full at every width: it is given its own
   width and the rest of the months share what is left, so they shrink before it does */
.home .mom-tbl th.mtd,.home .mom-tbl td.mtd{width:64px;white-space:nowrap;overflow:visible;text-overflow:clip}
.home .mom-tbl th{text-transform:none}
/* a year of heads in a four-column card: let the MTD label wrap rather than clip it */
.home .mom-tbl.wide th{white-space:normal;line-height:1.15}
.home .mom-tbl.wide th.mtd{white-space:nowrap}
.home .mom-tbl.wide th.mom-name,.home .mom-tbl.wide td.mom-name{width:84px}
.home .mom-tbl .mtd{color:#E35D34}
.home .mom-tbl tr.mom-row{cursor:pointer}
.home .mom-tbl tr.mom-row:hover td{background:var(--soft)}
.home .mom-tbl tr.mom-total td{font-weight:var(--w-semibold);border-top:2px solid var(--line);border-bottom:0}
.home .mom-empty{padding:12px 0}
.home .mom-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
body.dark .home .mom-tbl tr.mom-row:hover td{background:rgba(255,255,255,.06)}

/* seed chips on a landing tab (outside .home -- they live on every other tab) */
.seed-chips{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s2) 0 0}
.seed-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px 3px 10px;border-radius:var(--r-pill);background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-bg)}
.seed-chip button{border:0;background:transparent;color:inherit;font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:0 2px;width:auto}
.seed-chip button:hover{color:var(--flame)}
/* --- Recommendations, Inventory gate, Portfolio budgets, Campaigns capping ------- */
.rec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:14px}
.rec-card{background:var(--white);border:var(--hairline);border-radius:var(--r-card);padding:12px 14px;border-left:3px solid var(--teal)}
.rec-card.flag{border-left-color:var(--flame)}
.rec-card .n{font-size:26px;font-weight:var(--w-semibold);line-height:1.1}
.rec-card .t{font-size:12.5px;margin-top:4px}
.rec-card .d{font-size:11px;color:var(--text2);margin-top:4px}
.util{display:grid;grid-template-columns:200px 1fr 90px;gap:8px 12px;align-items:center;font-size:12.5px}
.util .track{height:10px;border-radius:5px;background:var(--cultured);border:var(--hairline);overflow:hidden}
.util .track i{display:block;height:100%;background:var(--teal)}
.util .track i.hot{background:var(--flame)}.util .track i.warm{background:var(--amber)}
.util .v{text-align:right;font-variant-numeric:tabular-nums}
.cap-edit{border-bottom:1px dashed var(--teal);cursor:text}
.cap-edit.unset{color:var(--text3);font-style:italic}
.cap-edit input{width:110px;font:inherit;font-size:12px;padding:1px 4px;border-radius:4px;border:1px solid var(--powder)}

/* --- Spend by hour heatmap: shade is the teal token at a per-cell alpha ------------- */
table.hourly td.heat{background:color-mix(in srgb,var(--teal) calc(var(--a,0)*100%),transparent)}
table.hourly td.heat.hot{color:var(--white)}
table.hourly th,table.hourly td{padding:4px 5px;font-size:11px}

/* --- Column-group colour bands above table headers -------------------------------- */
tr.bands th{padding:2px 8px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--w-semibold);color:var(--white);border-bottom:2px solid var(--white);text-align:left;position:sticky;top:0;z-index:3}
tr.bands th.band-ref{background:var(--band-ref)}
tr.bands th.band-ads{background:var(--teal)}
tr.bands th.band-biz{background:var(--band-total)}
tr.bands th.band-work{background:var(--flame)}
tr.bands th.band-none{background:transparent;border-bottom:0}
table:has(tr.bands) thead tr:not(.bands) th{top:19px}
tr.bands th{top:0;z-index:4;height:19px;box-sizing:border-box;line-height:15px}
tr.bands th:first-child{left:auto}

/* ===== PROMPT_08 §1/§6 — one spacing scale (4 · 8 · 12 · 16 · 24), one toolbar, one tab head ===== */
/* tab head: title and count on one line, subtitle under it */
.tab-head{margin-bottom:var(--s3)}
.tab-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.main .tab-head h1{margin:0}
.tab-count{font-size:12.5px;color:var(--text2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tab-head .subtitle{margin:var(--s1) 0 0}
/* toolbar: one row, one height */
.ba-controls,.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.ba-controls .tb-btn,.toolbar .tb-btn,.ba-controls select,.toolbar select,.ba-controls .tb-input,.toolbar .tb-input,.ba-controls .ba-tin,.ba-controls label.tb-btn{height:28px;box-sizing:border-box;padding:0 var(--s3);border-radius:var(--r-btn);font-size:12.5px;line-height:26px;display:inline-flex;align-items:center;gap:6px}
.ba-controls .tb-input,.toolbar .tb-input{padding:0 var(--s2);min-width:160px}
.ba-controls .lbl{font-size:12px;color:var(--text2)}
.ba-controls .lbl+select{margin-left:calc(-1 * var(--s1))}
.dd-menu{min-width:200px;padding:var(--s1)}
.dd-menu .tb-btn{display:flex;width:100%;height:28px;border:0;border-radius:var(--r-btn);background:none;justify-content:flex-start}
.dd-menu .tb-btn:hover{background:var(--cultured)}
.dd-menu label.tb-btn input{display:none}
/* pills and chips: one height */
.pill,.chip{height:20px;line-height:20px;padding:0 var(--s2);box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--s1);border-radius:var(--r-pill)}
/* cards and blocks */
.kpi,.hcard,.rec-card,.card,.ba-hero,.srcmini,.dd-panel{padding:var(--s3) 14px}
.kpis{gap:var(--s3);margin-bottom:var(--s4)}
.section{margin-bottom:var(--s4)}
.section h3,.hcard h3{margin:0 0 var(--s2)}
.note,.empty{margin-bottom:var(--s3)}
.empty{padding:var(--s6) 14px}
/* tables: identical header and body cells, numbers right, text left, status centred */
th,td{padding:6px 9px}
th.num,td.num{text-align:right}
th:first-child,td:first-child{text-align:left}
td.status,th.status,td .status{text-align:center}
td .status{display:inline-block;min-width:78px}

/* ===== PROMPT_08 §1 — one context line per tab; notes live behind Details ===== */
.ctx{background:var(--white);border:var(--hairline);border-radius:var(--r-card);margin-bottom:var(--s3);font-size:12.5px;color:var(--ink)}
.ctx-line{display:flex;align-items:center;gap:var(--s2);padding:0 14px;min-height:32px}
.ctx-i{color:var(--teal);font-size:13px}
.ctx-sum{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-more{background:none;border:0;color:var(--teal);font:inherit;font-size:12.5px;font-weight:var(--w-semibold);cursor:pointer;padding:0;width:auto;white-space:nowrap}
.ctx-body{padding:0 14px var(--s2);border-top:var(--hairline)}
.ctx-body .note{background:transparent;border-left:0;border-radius:0;padding:var(--s2) 0;margin:0;color:var(--ink);border-bottom:var(--hairline);font-size:12.5px}
.ctx-body .note:last-child{border-bottom:0}
.ctx-body .note .ba-controls{margin:var(--s2) 0 0}
/* amber stays for genuine warnings only */
.note.warn{background:var(--warn-bg);border-left:3px solid var(--amber)}

/* ===== PROMPT_08 §5 — Growisto is the product; the account is a switcher beside it ===== */
.month-bar .acct{height:28px;padding:0 var(--s3);border:var(--hairline);border-radius:var(--r-btn);background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;font-weight:var(--w-semibold);display:inline-flex;align-items:center;gap:6px;cursor:default;width:auto;margin-right:var(--s2)}
.month-bar .acct .caret{font-size:10px;color:var(--text2)}

/* ===== Home revamp -- whole-app theme toggle, top-right of the month bar ===== */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);cursor:pointer;border:1px solid var(--border);border-radius:15px;padding:3px 11px;background:var(--surface);font-family:inherit;width:auto;height:auto;margin-right:var(--s2)}
.theme-toggle:hover{border-color:var(--teal)}

/* ===== PROMPT_08 §2/§6 — the campaign/portfolio control rows flow as one row ===== */
.cd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s3)}
.cd-bar .ba-controls{margin:0}
.cd-bar .lbl,.cd-bar span[style*="color:var(--text2)"]{font-size:12px}
details.note-fold>summary{display:flex;align-items:center;gap:var(--s2);cursor:pointer;list-style:none}
.ctx-body details.note-fold .body{padding-top:var(--s2)}

/* A3 — the column picker is multi-select: it stays open until you click away or press Done */
.dd-done{position:sticky;bottom:0;background:var(--white);border-top:var(--hairline);margin:var(--s2) calc(-1 * var(--s3)) calc(-1 * var(--s3));padding:var(--s2) var(--s3);text-align:right}
.dd-done .tb-btn{height:26px;background:var(--teal);color:var(--white);border-color:var(--teal)}

/* ===== PROMPT_09 §C — the page never sprawls, and every table row is identical ===== */
/* Grid children default to min-width:auto and so refuse to shrink below their content:
   once numbers were written in full, the Home block grew to 1,642px inside a 1,185px
   column and pushed the whole page sideways. Every grid cell here may shrink. */
.kpis>*,.rec-cards>*{min-width:0}
/* Fill the screen. A centred column capped at 1,280px left ~285px of dead space down
   each side on a wide monitor while tables scrolled sideways inside it -- the cap was
   protecting line length that tables do not have. Padding keeps it off the edges. */
.main{max-width:none;margin-inline:0;padding:var(--s6) var(--s6)}
.main.wide{max-width:none}
/* one row shape everywhere: same height, same padding, numbers right, text left */
table{width:100%;border-collapse:collapse}
th,td{padding:6px 9px;height:30px;box-sizing:border-box;vertical-align:middle}
th{white-space:nowrap}
/* grid heads wrap to two lines and never ellipsise; colWidth() in grid.js guarantees the
   column is at least as wide as its widest word */
table.gr thead th{white-space:normal;height:auto;min-height:26px;line-height:1.2;padding-top:4px;padding-bottom:4px;overflow:visible;text-overflow:clip}
table.gr thead th .gr-lab{white-space:normal;overflow:visible;text-overflow:clip;display:inline;padding-right:2px}
th.num,td.num,td.right{text-align:right;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
.status,td.status,th.status{text-align:center}

/* ===== grid.js — THE shared table. One colour rule, one row shape, everywhere ===== */
.gr-wrap{overflow:auto;max-height:72vh;border:var(--hairline);border-radius:var(--r-card);background:var(--white);scrollbar-width:thin;scrollbar-color:var(--powder) var(--cultured)}
/* an always-visible bar: a grid wider than its box must read as "more to the right", not
   as a table cut mid-digit */
.gr-wrap::-webkit-scrollbar{height:10px;width:10px}
.gr-wrap::-webkit-scrollbar-track{background:var(--cultured)}
.gr-wrap::-webkit-scrollbar-thumb{background:var(--powder);border-radius:5px;border:2px solid var(--cultured)}
.gr-wrap::-webkit-scrollbar-thumb:hover{background:var(--teal)}
table.gr{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;table-layout:fixed}
table.gr th,table.gr td{padding:3px 8px;height:26px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid var(--powder);border-right:1px solid rgba(184,219,217,.45);font-size:12px}
table.gr thead th{position:sticky;top:0;z-index:3;background:var(--teal);color:var(--white);font-weight:var(--w-semibold);
  letter-spacing:.01em;user-select:none}

table.gr th.num,table.gr td.num{text-align:right;font-variant-numeric:tabular-nums}
table.gr th.txt,table.gr td.txt{text-align:left}
table.gr tbody tr:nth-child(odd) td{background:var(--white)}
table.gr tbody tr:nth-child(even) td{background:var(--cultured)}
table.gr tbody td{color:var(--ink)}
table.gr tbody tr:hover td{background:var(--powder)}
/* the ONLY value colours: a column may tint its own text */
table.gr td.good{color:var(--green);font-weight:var(--w-semibold)}
table.gr td.bad{color:var(--flame);font-weight:var(--w-semibold)}
/* frozen columns and rows */
table.gr th.pin,table.gr td.pin{position:sticky;z-index:2;box-shadow:1px 0 0 var(--powder)}
table.gr thead th.pin{z-index:4}
table.gr tbody tr.gr-frozen td{position:sticky;z-index:1;background:var(--powder)!important}
/* dark: the grid rows follow the theme. They stayed on --white before, which the raisin
   cell text hid; now that cell text is --ink (white in dark) the rows take the dark surfaces */
body.dark .gr-wrap{background:var(--surface);scrollbar-color:var(--border) var(--bg)}
body.dark .gr-wrap::-webkit-scrollbar-track{background:var(--bg)}
body.dark .gr-wrap::-webkit-scrollbar-thumb{background:var(--border);border-color:var(--bg)}
body.dark table.gr tbody tr:nth-child(odd) td{background:var(--surface)}
body.dark table.gr tbody tr:nth-child(even) td{background:var(--hover-tint)}
body.dark table.gr tbody tr:hover td{background:var(--border)}
body.dark table.gr tbody tr.gr-frozen td{background:var(--border)!important}
body.dark table.gr th.pin,body.dark table.gr td.pin{box-shadow:1px 0 0 var(--border)}
body.dark .gr-empty{background:var(--surface)!important}
body.dark .gr-filt.on{background:var(--surface)}
/* the other white-surface pieces whose text is --ink: the context panel, the two header
   popups, the metric tiles and the picker footer take the dark surface too */
body.dark .ctx,body.dark .gr-fpop,body.dark .gr-cpop,body.dark .mtile,body.dark .dd-done,body.dark .st-vgrid .vadd input{background:var(--surface);border-color:var(--border)}
body.dark .gr-fp-op,body.dark .gr-fp-f button{background:var(--surface);border-color:var(--border);color:var(--text)}
/* header controls */
.gr-lab{cursor:pointer;display:inline-block;max-width:calc(100% - 26px);overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.gr-dir{font-style:normal;margin-left:3px}
.gr-pin{position:absolute;right:8px;top:4px;width:14px;height:18px;padding:0;border:0;background:none;color:var(--powder);
  cursor:pointer;font-size:12px;line-height:18px;opacity:.55}
.gr-pin:hover,.gr-pin.on{opacity:1;color:var(--white)}
.gr-grip{position:absolute;right:-3px;top:0;width:7px;height:100%;cursor:col-resize;z-index:5}
table.gr thead th{position:sticky;overflow:visible}

.gr-empty{text-align:center;color:var(--text2);padding:var(--s6)!important;background:var(--white)!important}
.gr-more{font-size:12px;color:var(--text2);margin-top:var(--s2)}
body.gr-resizing{cursor:col-resize;user-select:none}
table.gr tfoot td{position:sticky;bottom:0;z-index:2;background:var(--teal)!important;color:var(--white);
  font-weight:var(--w-semibold);border-top:2px solid var(--white)}
table.gr tfoot td.pin{z-index:3}
.mb-3{margin-bottom:var(--s3)}
.badge-new.stale{background:var(--amber);color:var(--amber-text)}

/* --- the header's own controls: filter, freeze, resize, and drag to reorder --------- */
table.gr thead th{padding-right:34px}
.gr-filt{position:absolute;right:20px;top:4px;width:14px;height:18px;padding:0;border:0;background:none;color:var(--powder);
  cursor:pointer;font-size:10px;line-height:18px;opacity:.6}
.gr-filt:hover{opacity:1;color:var(--white)}
.gr-filt.on{opacity:1;color:var(--flame);background:var(--white);border-radius:3px}
table.gr th.gr-dragging{opacity:.5}
table.gr th.gr-drop{box-shadow:inset 3px 0 0 var(--flame)}
table.gr thead th[draggable]{cursor:grab}
table.gr thead th .gr-lab{cursor:pointer}

/* --- the filter popup: a spreadsheet's filter, not a permanent row of boxes --------- */
.gr-fpop{position:fixed;z-index:200;width:280px;background:var(--white);border:var(--hairline);border-radius:var(--r-card);
  box-shadow:0 10px 30px -8px rgba(29,29,32,.28);padding:var(--s3);font-size:12.5px;color:var(--ink)}
.gr-fp-h{font-weight:var(--w-semibold);margin-bottom:var(--s2)}
.gr-fp-q{width:100%;box-sizing:border-box;height:28px;border:1px solid var(--powder);border-radius:var(--r-btn);
  padding:0 var(--s2);font:inherit;font-size:12.5px;margin-bottom:var(--s2)}
.gr-fp-cond-row{display:flex;align-items:center;gap:6px;margin-bottom:var(--s2)}
.gr-fp-cl{font-size:11px;color:var(--text2);white-space:nowrap}
.gr-fp-op{height:28px;border:1px solid var(--powder);border-radius:var(--r-btn);background:var(--white);
  color:var(--ink);font:inherit;font-size:12.5px;padding:0 4px;width:auto;flex:0 0 auto}
.gr-fp-val{flex:1;min-width:0;height:28px;box-sizing:border-box;border:1px solid var(--powder);border-radius:var(--r-btn);
  padding:0 var(--s2);font:inherit;font-size:12.5px}
.gr-fp-all{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) 0;border-bottom:var(--hairline);margin-bottom:var(--s1)}
.gr-fp-list{max-height:220px;overflow:auto;margin-bottom:var(--s2)}
.gr-fp-row{display:flex;align-items:center;gap:var(--s2);padding:3px 2px;border-radius:4px;cursor:pointer}
.gr-fp-row:hover{background:var(--cultured)}
.gr-fp-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-fp-row i{font-style:normal;color:var(--text3);font-size:11px;font-variant-numeric:tabular-nums}
.gr-fp-note{font-size:11px;color:var(--text2);margin-bottom:var(--s2)}
.gr-fp-f{display:flex;align-items:center;gap:var(--s2)}
.gr-fp-sp{flex:1}
.gr-fp-f button{height:28px;padding:0 var(--s3);border-radius:var(--r-btn);border:1px solid var(--powder);background:var(--white);
  color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;width:auto}
.gr-fp-f .gr-fp-ok{background:var(--teal);border-color:var(--teal);color:var(--white);font-weight:var(--w-semibold)}
.gr-fp-f .gr-fp-clear{border-color:transparent;color:var(--teal)}

/* ===== Home, block 1: five metrics over the picked range, each one swappable ======== */
.metric-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.metric-row>*{min-width:0}
.mtile{background:var(--white);border:var(--hairline);border-radius:var(--r-card);padding:var(--s3) 14px}
.mtile .lab{margin-bottom:var(--s1)}
.mtile .big{font-size:26px;font-weight:var(--w-semibold);line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.mtile .msub{margin-top:var(--s1);font-size:11.5px;color:var(--text2)}
.mtile .msub .delta{display:inline-block;padding:0 6px;border-radius:var(--r-pill);font-size:11px;font-weight:var(--w-semibold)}
.mtile .msub .delta.up{background:var(--good-bg);color:var(--good)}
.mtile .msub .delta.down{background:var(--bad-bg);color:var(--bad)}
.mtile .mwarn{margin-top:var(--s1);font-size:11px;color:var(--amber-text)}

/* ===== grid.js's own toolbar: Columns picker + Reset view, above every table ========= */
.gr-toolbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.gr-toolbar .tb-btn{height:28px}
.gr-spacer{flex:1}
.gr-hidden-note{font-size:11.5px;color:var(--text2)}
.gr-gutter{width:20px;min-width:20px;max-width:20px;padding:0!important;background:inherit;border-right:0!important}
thead .gr-gutter{background:var(--teal)}
.gr-rowpin{width:100%;height:100%;padding:0;border:0;background:none;color:var(--powder);opacity:0;
  cursor:pointer;font-size:11px;line-height:1}
tbody tr:hover .gr-rowpin,.gr-rowpin.on{opacity:1;color:var(--teal)}
.gr-rowpin.on{color:var(--flame)}

/* the Columns picker: every column, grouped, ticks stay open, its own scroll kept ----- */
.gr-cpop{position:fixed;z-index:200;width:260px;background:var(--white);border:var(--hairline);border-radius:var(--r-card);
  box-shadow:0 10px 30px -8px rgba(29,29,32,.28);padding:var(--s3);font-size:12.5px;color:var(--ink)}
.gr-cp-list{max-height:360px;overflow:auto;margin-bottom:var(--s2)}
.gr-cp-list h4{font-size:11px;color:var(--text3);font-weight:var(--w-semibold);margin:var(--s2) 0 var(--s1);letter-spacing:.02em}
.gr-cp-list h4:first-child{margin-top:0}
.gr-cp-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;cursor:pointer}
.gr-cp-row:hover{background:var(--cultured)}
.gr-cp-f{text-align:right;border-top:var(--hairline);padding-top:var(--s2)}
.gr-cp-f button{height:28px;padding:0 var(--s3);border-radius:var(--r-btn);border:0;background:var(--teal);
  color:var(--white);font:inherit;font-size:12.5px;font-weight:var(--w-semibold);cursor:pointer;width:auto}
.gr-table{margin-bottom:var(--s4)}
tr.gr-extra td{background:var(--cultured);padding:var(--s3) 14px;border-bottom:2px solid var(--powder)}
tr.gr-open td{box-shadow:inset 0 -1px 0 var(--teal)}
.gr-expand{background:none;border:0;width:16px;height:16px;padding:0;color:var(--text2);cursor:pointer;
  transform:rotate(0deg);transition:transform .12s}
tr.gr-open .gr-expand{transform:rotate(90deg)}
tr[data-grrow]{cursor:pointer}
tr.gr-dim td{opacity:.55}
/* --- Root cause (03_Design_Reference/rootcause: 01 landing, 03 analysis) ----------
   White canvas like every other tab. Flame = contributor, amber = partial, hairline =
   ruled out, dashed grey = needs a file. */
/* PROMPT_13 A: the whole landing is ONE panel (01_landing_locked: cultured, 14px radius, a
   hairline), content from the top, the three cards growing to fill the viewport below the
   tab title -- no blank band above or below at 1440 or 1280. */
.main:has(.rc-land){display:flex;flex-direction:column;min-height:calc(100vh - 46px);box-sizing:border-box}
.rc-land{flex:1;background:var(--cultured);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.rc-three{flex:1;display:flex;flex-direction:column;min-height:0}
.rc-hero{max-width:560px}
.rc-eyebrow{font-size:10px;letter-spacing:.14em;color:var(--teal);font-weight:var(--w-semibold)}
.rc-hero h2{font-size:26px;font-weight:var(--w-semibold);letter-spacing:-.02em;margin:6px 0 6px}
.rc-hero .sub{line-height:1.6;font-size:13px}
.rc-in{display:flex;gap:8px;align-items:center;margin:18px 0 26px;flex-wrap:wrap}
.rc-pill{display:inline-flex;align-items:center;gap:6px;border:var(--hairline);background:var(--white);border-radius:9px;padding:0 10px;height:36px;font-size:12.5px;color:var(--ink)}
.rc-what{min-width:min(100%,420px);flex:1 1 420px;max-width:560px}
.rc-what input{flex:1;border:0;outline:0;background:transparent;font:inherit;color:inherit;min-width:0}
.rc-what input::placeholder{color:#9AA3A8}
.rc-mag,.rc-car{color:var(--teal)}
.rc-when select{border:0;outline:0;background:transparent;font:inherit;color:inherit;appearance:none;-webkit-appearance:none;padding-right:2px}
.rc-vs{font-size:12px;color:var(--text2)}
.rc-go{height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--raisin);background:var(--raisin);color:#fff;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.rc-go:disabled{opacity:.45;cursor:not-allowed}
.rc-dates{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-14px 0 20px;font-size:11px;color:var(--text2)}
.rc-dates input{font:inherit;font-size:11.5px;padding:3px 7px;border:var(--hairline);border-radius:8px;background:var(--white);color:var(--ink)}
.rc-3h{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.rc-3h b{font-size:14px}
.rc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;flex:1;grid-auto-rows:1fr}
.rc-card{position:relative;border:1px solid var(--powder);border-radius:12px;padding:14px 15px 13px;background:var(--white);cursor:pointer;min-width:0;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box}
.rc-card.flame{border-color:var(--flame)}.rc-card.green{border-color:#1D9E75}.rc-card.amber{border-color:#EF9F27}.rc-card.teal{border-color:var(--teal)}
.rc-card:focus{outline:2px solid var(--teal);outline-offset:1px}
.rc-rank{position:absolute;top:10px;right:13px;font-size:22px;font-weight:var(--w-semibold);color:#EDEDEA;letter-spacing:-.03em}
.rc-k{font-size:9.5px;letter-spacing:.09em;font-weight:var(--w-semibold)}
.rc-card.flame .rc-k{color:var(--flame)}.rc-card.green .rc-k{color:#0F6E56}.rc-card.amber .rc-k{color:#BA7517}.rc-card.teal .rc-k{color:var(--teal)}
.rc-cname{font-size:15px;font-weight:var(--w-semibold);margin:4px 0 2px;padding-right:28px}
.rc-mv{font-size:11.5px;color:var(--text2)}
.rc-cspark{margin-top:8px;flex:1;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.rc-cspark svg{display:block;width:100%;height:44px}
.rc-card.flame .rc-cspark{color:var(--flame)}.rc-card.green .rc-cspark{color:#1D9E75}.rc-card.amber .rc-cspark{color:#EF9F27}.rc-card.teal .rc-cspark{color:var(--teal)}
.rc-lv{font-size:11px;color:var(--text2);margin-top:8px;padding-top:8px;border-top:1px solid #F1F2F1}
.rc-lv b{color:var(--ink);font-weight:var(--w-semibold)}
.rc-foot{font-size:11px;color:var(--text2);margin-top:14px}
/* analysis */
.rc-bar{position:sticky;top:0;z-index:4;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--white);border:var(--hairline);border-radius:9px;padding:7px 10px;margin-bottom:10px}
.rc-bar>b{font-size:13.5px;font-weight:500;margin-right:4px}
.rc-chip{font-size:11.5px;padding:3px 9px;border-radius:7px;border:var(--hairline);background:var(--white);display:inline-flex;align-items:center;gap:6px}
.rc-chip.on{background:var(--raisin);color:#fff;border-color:var(--raisin)}
.rc-chip i{font-style:normal;cursor:pointer;opacity:.7}.rc-chip i:hover{opacity:1}
.rc-metric{margin-left:auto;font-size:12px;color:var(--text2)}
.rc-metric select{border:0;background:transparent;font:inherit;color:var(--ink);appearance:none;-webkit-appearance:none}
.rc-top{display:grid;grid-template-columns:5fr 7fr;gap:9px}
.rc-c{background:var(--white);border:var(--hairline);border-radius:11px;padding:12px 14px;min-width:0}
.rc-hc{background:#0F2A33;color:#fff;border-radius:11px;padding:14px 15px;display:flex;gap:12px;align-items:center}
.rc-ringw{flex-shrink:0;width:78px;text-align:center}
.rc-ringcap{display:block;font-size:9.5px;line-height:1.2;color:#B8DBD9;margin-top:2px}
.rc-ring{width:66px;height:66px;display:block;margin:0 auto}
.rc-t{font-size:11px;color:var(--teal);letter-spacing:.08em;font-weight:500}
.rc-hc .rc-t{color:#B8DBD9}
.rc-hl{font-size:16px;font-weight:500;line-height:1.25;margin-top:3px}
.rc-hs{font-size:11px;color:#9FC3CC;margin-top:5px}
.rc-ba{display:flex;justify-content:space-between;font-size:12.5px;margin:7px 0 5px}
.rc-seg{display:flex;height:22px;border-radius:6px;overflow:hidden;gap:2px;background:var(--cultured)}
.rc-seg .resid{background:#DADDDB}
.rc-leg{display:flex;gap:14px;font-size:11.5px;margin-top:7px;flex-wrap:wrap}
.rc-leg .big b{color:var(--flame)}
.rc-do{margin-top:9px}
.rc-act{display:grid;grid-template-columns:82px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #F1F2F1;font-size:12.5px}
.rc-act:first-of-type{border-top:0}
.rc-act .vb{font-weight:500;padding:3px 8px;border-radius:6px;text-align:center;font-size:11px}
.vb.flame{background:#FDE9D9;color:#9C4221}.vb.amber{background:#FAEEDA;color:#854F0B}.vb.green{background:#E1F5EE;color:#085041}.vb.teal{background:#DDEBF7;color:#1F4E79}
.rc-seeall{display:inline-block;font-size:12px;color:var(--teal);font-weight:500;margin-top:8px;text-decoration:none}
.rc-seeall:hover{text-decoration:underline}
.rc-gl{font-size:12px;font-weight:500;margin:12px 0 6px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rc-gl .sub{font-weight:400}
.rc-src{font-size:9.5px;padding:0 5px;border-radius:4px;background:#F1F2F1;color:#4A4A50;font-weight:500;letter-spacing:.03em}
.rc-src.s-ads{background:#DDEBF7;color:#1F4E79}.rc-src.s-vc{background:#E2EFDA;color:#0F6E56}.rc-src.s-keepa{background:#FAEEDA;color:#854F0B}.rc-src.s-sc,.rc-src.s-ext{background:#F1F2F1;color:#6B7378}
.rc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.rc-tile{position:relative;border:1px solid var(--powder);border-radius:9px;padding:9px 10px;background:var(--white);min-width:0}
.rc-tile .rc-src{position:absolute;top:7px;right:8px}
.rc-tile .lb{font-size:11px;color:var(--text2);padding-right:40px}
.rc-tile .v .pd{font-size:10px;font-weight:var(--w-regular);color:var(--text2)}
.rc-tile .v{font-size:12.5px;font-weight:500;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-tile .d{font-size:11px;font-weight:500;line-height:1.35}
.rc-tile .d.flame{color:var(--flame)}.rc-tile .d.amber{color:#BA7517}.rc-tile .d.green{color:#1D9E75}
.rc-tile.hit{border:1.5px solid var(--flame)}
.rc-tile.part{border:1.5px solid #EF9F27}
.rc-tile.off{background:#FAFAFA;border-style:dashed;border-color:#B0B7BA}
.rc-tile.off .v,.rc-tile.off .lb{color:#B0B7BA}.rc-tile.off .d{color:var(--text2);font-weight:400}
body.dark .rc-c,body.dark .rc-card,body.dark .rc-tile,body.dark .rc-bar,body.dark .rc-pill,body.dark .rc-dates input,body.dark .rc-chip{background:var(--surface)}
body.dark .rc-tile.off{background:transparent}
body.dark .rc-rank{color:#1E4C5A}
body.dark .rc-lv,body.dark .rc-act{border-color:var(--line)}
body.dark .rc-seg{background:var(--line)}
/* dark: the near-black primaries invert to white-on-dark, the fixed greens and ambers take
   the dark palette's readable values, and the headline card stays a shade darker than the page */
body.dark .rc-go{background:var(--text);border-color:var(--text);color:var(--bg)}
body.dark .rc-chip.on{background:var(--text);border-color:var(--text);color:var(--bg)}
body.dark .rc-hc{background:#0B2029;border:1px solid var(--border)}
body.dark .rc-card.green .rc-k{color:var(--good)}body.dark .rc-card.amber .rc-k{color:var(--warn)}
body.dark .rc-what input::placeholder{color:var(--text2)}
body.dark .rc-t,body.dark .rc-eyebrow{color:var(--heading-caps)}
body.dark .rc-seeall{color:var(--powder)}
body.dark .rc-tile .d.amber{color:var(--warn)}body.dark .rc-tile .d.green{color:var(--good)}
body.dark .rc-seg .resid{background:var(--border)}
body.dark .rc-card{border-color:var(--border)}body.dark .rc-card.flame{border-color:var(--flame)}body.dark .rc-card.green{border-color:var(--good)}body.dark .rc-card.amber{border-color:var(--warn)}body.dark .rc-card.teal{border-color:var(--accent)}
@media (max-width:1100px){.rc-top{grid-template-columns:1fr}.rc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rc-cards{grid-template-columns:1fr}}

/* --- Search terms: bucket, served in, status, and the learnt vocabulary ---------- */
.st-b{display:inline-block;font-size:10.5px;font-weight:var(--w-semibold);padding:1px 7px;border-radius:10px;white-space:nowrap}
.st-branded{background:var(--good-bg);color:var(--good)}
.st-generic{background:var(--soft);color:var(--sub)}
.st-compkw{background:#FDECE6;color:#B4431F}
.st-comppt{background:#FDECE6;color:#B4431F}
.st-selfpt{background:var(--powder);color:var(--teal)}
.st-flag{margin-left:5px;color:var(--flame);cursor:help;font-size:10px}
.st-t{font-size:11px;color:var(--sub)}
.st-t.on{color:var(--good);font-weight:var(--w-semibold)}
.st-t.off{color:var(--flame);font-weight:var(--w-semibold)}
.st-act{display:inline-flex;gap:9px;white-space:nowrap}
.st-act a{font-size:11px;color:var(--teal);text-decoration:none}
.st-act a:hover{text-decoration:underline}
.chips.st-chips{margin:6px 0 10px}
.chips .chip.flag.off{border-color:var(--flame)}
.chips .chip.flag{background:var(--flame);border-color:var(--flame);color:#fff}
.st-vocab{margin-top:18px}
.st-vocab-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.st-vocab-top .tb-btn{margin-left:auto}
.st-vgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.st-vgrid .vws{display:flex;flex-wrap:wrap;gap:5px;max-height:190px;overflow:auto;padding:2px}
.st-vgrid .vw{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 4px 2px 8px;border:var(--hairline);border-radius:11px;cursor:help}
.st-vgrid .vw b{cursor:pointer;color:var(--sub);font-weight:400;padding:0 4px}
.st-vgrid .vw b:hover{color:var(--flame)}
.st-vgrid .vadd{margin-top:7px}
.st-vgrid .vadd input{font:inherit;font-size:11px;padding:3px 9px;border:var(--hairline);border-radius:12px;width:100%;background:var(--white);color:var(--ink)}
body.dark .st-compkw,body.dark .st-comppt{background:rgba(227,93,52,.18);color:#F0A78D}
@media (max-width:900px){.st-vgrid{grid-template-columns:1fr}}
/* Daily only: Saturday and Sunday read as one block. Scoped to the grid that asked for it,
   so the house rule that tables carry no row bands still holds everywhere else. */
table.gr[data-grid="daily"] tbody tr.gr-weekend td{background:var(--soft)}
table.gr[data-grid="daily"] tbody tr.gr-weekend:hover td{background:var(--powder)}
table.gr tfoot tr.gr-split td{position:static;background:var(--soft)!important;color:var(--text);font-weight:500;border-top:1px solid var(--line);border-bottom:0}
body.dark table.gr[data-grid="daily"] tbody tr.gr-weekend td{background:rgba(255,255,255,.05)}
.gr-sub{font-size:11px;color:var(--text2);margin-top:2px}
table.gr td.best{background:var(--powder)}
/* pillClass()'s good/warn/bad had no colour anywhere -- acosPill() has always rendered
   these flat; fixing it here colours every existing use (Article wise, Harvest and
   negate) as well as the new portfolio-cap cards. */
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.muted{color:var(--text3)}

/* 2026-09-22 · Data sources › Refresh log, and the masterlist stamp line ------------------ */
.rl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rl-head h3{margin:0}
.rl-head .pill.ok{background:var(--good-bg);color:var(--good)}
.rl-head .pill.bad{background:var(--bad-bg);color:var(--bad)}
.rl-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
.rl-table th,.rl-table td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rl-table th{font-weight:600;color:var(--text2);font-size:11.5px;text-transform:uppercase;letter-spacing:.02em}
.rl-table td.n{text-align:right;font-variant-numeric:tabular-nums}
.rl-table tr.short td{color:var(--bad)}
.rl-steps{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--text2)}
.rl-steps code{font-size:11.5px}
.ml-stamp{font-size:11.5px;color:var(--text2)}
.ml-stamp.amber{color:var(--warn)}