/* Shared look of every portal page: the kayaos brand (docs/portal/brand-guidelines.md, Portal V5 step 1, 8 Nov 2026).
   Glass panels on a deep gradient canvas; a left menu, a top bar, a grid. Dark is the one scheme (Kaya, 8 Nov 18:5x): the tokens sit on :root, no light block ships.
   Phone first under 768 px (drawer, one column, 2-up KPIs); tablet 768 to 1,023 (icons-only menu); desktop from 1,024 (menu 248, 12 columns).
   The old variables (--bg --card --ok --bad --run and their bg pairs, --accent) keep their names and map to the brand's dark tokens, so a page not yet rebuilt renders dark at once. */
:root {
  --canvas:#0a0d16; --blob1:rgba(99,102,241,.30); --blob2:rgba(20,184,166,.18); --blob3:rgba(139,92,246,.22);
  --glass:rgba(22,27,44,.55); --glass-strong:rgba(22,27,44,.82); --glass-border:rgba(255,255,255,.08);
  --shadow-1:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); --shadow-2:0 24px 70px rgba(0,0,0,.6);
  --ink:#e5e9f5; --ink2:#c3cad9; --mute:#8b94a7; --line:rgba(255,255,255,.08);
  --brand:#818cf8; --brand-ink:#a5b4fc; --brand2:#a78bfa; --teal:#2dd4bf; --sky:#38bdf8; --on-brand:#0a0d16; --brand-tint:rgba(129,140,248,.16);
  --grad-brand:linear-gradient(135deg,#4f46e5,#8b5cf6);
  --hero:radial-gradient(420px 220px at 90% 0%, rgba(167,139,250,.38), transparent 70%), linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#4338ca 100%); --hero-ink:#fff;
  --tip:#e5e9f5; --tip-ink:#0a0d16;
  --red:#f87171; --red5:#dc2626; --redbg:rgba(220,38,38,.22); --amber:#fbbf24; --amber5:#f59e0b; --amberbg:rgba(245,158,11,.22);
  --green:#4ade80; --green5:#22c55e; --greenbg:rgba(34,197,94,.22); --grey:#94a3b8; --grey5:#94a3b8; --greybg:rgba(100,116,139,.2);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --t-eyebrow:11px; --t-meta:12px; --t-small:13px; --t-body:15px; --t-h2:17px; --t-title:24px; --t-kpi:30px; --t-display:40px;
  --r-card:20px; --r-tile:14px; --r-ctl:10px; --r-pill:999px; --gutter:16px; --side:248px; --side-min:72px; --top:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* the first round's names, now the brand's dark tokens */
  color-scheme:dark;
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { background:var(--canvas); color:var(--ink2); font:500 var(--t-body)/1.47 var(--font); -webkit-text-size-adjust:100%; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(640px 420px at 8% -8%, var(--blob1), transparent 70%), radial-gradient(520px 380px at 100% 18%, var(--blob2), transparent 70%), radial-gradient(640px 460px at 40% 110%, var(--blob3), transparent 70%); }
.wrap { margin:0; padding:0; }
[hidden] { display:none !important; }
button, select, input, textarea { font:inherit; }
h1, h2, h3, p { margin:0; } h1, h2, h3 { color:var(--ink); text-wrap:balance; }
h1 { font-size:var(--t-title); } h2 { font-size:var(--t-h2); font-weight:700; line-height:24px; margin:0 0 10px; } h3 { font-size:var(--t-body); font-weight:700; margin:14px 0 6px; }
a { color:var(--brand); } .mute { color:var(--mute); } .err { color:var(--red); min-height:1.4em; }
.n, td.n, th.n, .num { font-variant-numeric:tabular-nums; }
.eyebrow { font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); line-height:14px; }

/* ---- the shell: menu, top bar, content (frame built by Portal.buildHead) ---- */
.shell { display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh; min-height:100dvh; transition:grid-template-columns 180ms var(--ease); }
.shell.collapsed { grid-template-columns:var(--side-min) minmax(0,1fr); }
.shell > .col { min-width:0; }
.side { position:sticky; top:0; align-self:start; height:100vh; height:100dvh; display:flex; flex-direction:column; gap:4px; padding:20px 14px; background:var(--glass-strong); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-right:1px solid var(--glass-border); z-index:30; overflow:hidden; }
.side .brandrow { display:flex; align-items:center; gap:10px; padding:4px 8px 18px; color:var(--ink); text-decoration:none; }
.mark { width:32px; height:32px; border-radius:10px; background:var(--grad-brand); color:#fff; display:inline-grid; place-items:center; font-weight:800; font-size:17px; flex:none; box-shadow:0 6px 16px rgba(79,70,229,.35); }
.side .name, .loginmark .name { font-weight:800; letter-spacing:-.02em; font-size:20px; white-space:nowrap; }
.side .item { display:flex; align-items:center; gap:12px; height:44px; width:100%; padding:0 12px; border-radius:var(--r-tile); color:var(--mute); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap; background:none; border:0; cursor:pointer; transition:background 180ms var(--ease), color 180ms var(--ease); }
.side .item:hover { background:var(--glass); color:var(--ink); } .side .item.on { background:var(--brand-tint); color:var(--brand-ink); }
.side .item:focus-visible, .iconbtn:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.side svg { width:22px; height:22px; flex:none; }
.side .foot { margin-top:auto; display:flex; flex-direction:column; gap:4px; }
.side .acct { display:flex; align-items:center; gap:10px; padding:8px; color:var(--ink); font-weight:600; font-size:var(--t-small); white-space:nowrap; min-width:0; } .side .acct span.mute { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.side .closebtn { display:none; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--brand-tint); color:var(--brand-ink); display:inline-grid; place-items:center; font-weight:800; flex:none; }
.shell.collapsed .side .name, .shell.collapsed .side .item span, .shell.collapsed .side .acct span:not(.avatar) { display:none; }
.shell.collapsed .side .item { justify-content:center; padding:0; }
.scrim { display:none; }
.top { position:sticky; top:0; z-index:20; height:var(--top); display:flex; align-items:center; gap:12px; padding:0 24px; background:var(--glass-strong); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid var(--glass-border); }
.top .titles { min-width:0; } .top h1 { font-size:var(--t-title); font-weight:700; letter-spacing:-.01em; line-height:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top .spacer { flex:1; } .top .ctrls { display:flex; align-items:center; gap:8px; }
.iconbtn { width:40px; height:40px; border-radius:var(--r-ctl); border:1px solid var(--glass-border); background:var(--glass); color:var(--ink); display:inline-grid; place-items:center; cursor:pointer; position:relative; padding:0; text-decoration:none; }
.iconbtn svg { width:20px; height:20px; } .iconbtn .dotbadge { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--red5); box-shadow:0 0 0 2px var(--glass-strong); }
.menubtn { display:none; }
.content { padding:24px; max-width:1280px; width:100%; margin:0 auto; }
.content > .grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; margin:0; }
.content > .grid > * { grid-column:span 12; min-width:0; margin-bottom:0; } .content > .grid > .s3 { grid-column:span 3; } .content > .grid > .s4 { grid-column:span 4; } .content > .grid > .s6 { grid-column:span 6; } .content > .grid > .s8 { grid-column:span 8; }
.row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* tablet: icons-only menu */
@media (max-width:1023px) {
  .shell { grid-template-columns:var(--side-min) minmax(0,1fr); }
  .side .name, .side .item span, .side .acct span:not(.avatar), .side .collapse { display:none; }
  .side { padding-left:12px; padding-right:12px; }
  .side .item { justify-content:center; padding:0; }
  .content > .grid > .s3, .content > .grid > .s4 { grid-column:span 6; } .content > .grid > .s8 { grid-column:span 12; }
}
/* phone: a drawer, one column */
@media (max-width:767px) {
  .shell, .shell.collapsed { grid-template-columns:minmax(0,1fr); }
  .side { position:fixed; left:0; top:0; bottom:0; width:min(300px, 84vw); transform:translateX(-104%); transition:transform 180ms var(--ease); padding-left:max(14px, env(safe-area-inset-left, 0px)); }
  .side .name, .side .item span, .side .acct span { display:inline; } .side .item { justify-content:flex-start; padding:0 12px; }
  .side .closebtn { display:inline-grid; position:absolute; top:14px; right:12px; }
  .side.open { transform:none; box-shadow:var(--shadow-2); }
  .scrim { display:block; position:fixed; inset:0; background:rgba(10,13,22,.45); opacity:0; pointer-events:none; transition:opacity 180ms var(--ease); z-index:25; }
  .scrim.on { opacity:1; pointer-events:auto; }
  .menubtn { display:inline-grid; } .iconbtn { width:44px; height:44px; }
  .top { padding:0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); gap:8px; }
  .top h1 { font-size:20px; line-height:24px; } .top .ctrls .hidephone { display:none; }
  .content { padding:var(--gutter) max(var(--gutter), env(safe-area-inset-right, 0px)) 40px max(var(--gutter), env(safe-area-inset-left, 0px)); }
  .content > .grid { gap:16px; } .content > .grid > .s3, .content > .grid > .s4, .content > .grid > .s6, .content > .grid > .s8 { grid-column:span 12; } .content > .grid > .s3.half, .content > .grid > .s6.half { grid-column:span 6; }
}

/* ---- sign-in ---- */
#login { max-width:400px; margin:12vh auto 0; padding:28px 24px; }
.loginmark { display:flex; align-items:center; gap:10px; margin-bottom:6px; color:var(--ink); } .loginmark .mark { width:36px; height:36px; font-size:19px; }
#login label { display:block; font-size:var(--t-small); font-weight:600; color:var(--mute); margin:14px 0 6px; }
#login input { margin-bottom:0; height:44px; } #login button { width:100%; height:44px; margin-top:18px; font-weight:700; } #login .err { margin-top:10px; }

/* ---- panels ---- */
.card { background:var(--glass); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border:1px solid var(--glass-border); border-radius:var(--r-card); box-shadow:var(--shadow-1); padding:20px; min-width:0; }
@media (max-width:767px) { .card { padding:16px; } }
.card .card { box-shadow:none; background:var(--greybg); border-radius:var(--r-tile); backdrop-filter:none; -webkit-backdrop-filter:none; }
.banner { padding:12px 16px; border-radius:var(--r-tile); margin-bottom:16px; font-weight:600; overflow-wrap:anywhere; border:1px solid var(--glass-border); }
.banner.bad, .banner.red { background:var(--redbg); color:var(--red); border-color:rgba(220,38,38,.3); }
.banner.ok, .banner.green { background:var(--greenbg); color:var(--green); border-color:rgba(34,197,94,.3); }
.banner.warn, .banner.amber { background:var(--amberbg); color:var(--amber); border-color:rgba(245,158,11,.35); }
.banner.grey { background:var(--greybg); color:var(--grey); }
.banner.with { display:flex; align-items:center; gap:12px; }
.pill { display:inline-flex; align-items:center; gap:4px; min-height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:var(--t-meta); font-weight:600; background:var(--greybg); color:var(--ink2); white-space:nowrap; }
.pill.success, .pill.ok, .pill.active, .pill.green { background:var(--greenbg); color:var(--green); }
.pill.failure, .pill.bad, .pill.P1, .pill.red { background:var(--redbg); color:var(--red); }
.pill.running, .pill.warn, .pill.P2, .pill.planned, .pill.retired, .pill.amber { background:var(--amberbg); color:var(--amber); }
.pill.P3, .pill.mute, .pill.grey { background:var(--greybg); color:var(--grey); } .pill.brand { background:var(--brand-tint); color:var(--brand-ink); }
.linkish { background:none; border:0; padding:0; color:var(--brand); cursor:pointer; font:inherit; }
details summary { cursor:pointer; color:var(--brand); }
.src { font-size:var(--t-small); color:var(--mute); }
.feedbar p { margin:2px 0; font-size:var(--t-meta); } .feedbar p.banner { font-size:14px; margin:6px 0; padding:8px 12px; } .feedbar { margin-bottom:8px; }


/* ---- tables: the first column stays, the head in mute small ---- */
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-small); }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink2); }
th { color:var(--mute); font-weight:600; font-size:var(--t-small); } td.n, th.n { text-align:right; }
th:first-child, td:first-child { position:sticky; left:0; background:var(--glass-strong); z-index:1; color:var(--ink); }
/* a text column wraps at words and never under 14ch (review F7); only a link may break inside */
td.wrapany { min-width:14ch; overflow-wrap:normal; } td.wrapany a { overflow-wrap:anywhere; }
tr.alert td:first-child { box-shadow:inset 3px 0 var(--red5); } tr.alert td.n.val { color:var(--red); font-weight:700; }
tr.sum td { font-weight:700; color:var(--ink); } td.red { color:var(--red); font-weight:700; } td.amber { color:var(--amber); font-weight:700; } tr.redday td:first-child { box-shadow:inset 3px 0 var(--red5); }

/* ---- forms ---- */
input, select, textarea { width:100%; padding:10px 12px; border:1px solid var(--glass-border); border-radius:var(--r-ctl); background:rgba(255,255,255,.05); color:var(--ink); margin-bottom:10px; max-width:100%; min-height:40px; }
select { width:auto; padding:9px 10px; } select option { background:#161b2c; color:var(--ink); }
button { padding:0 16px; min-height:40px; border-radius:var(--r-ctl); border:0; background:var(--grad-brand); color:#fff; cursor:pointer; font-weight:600; box-shadow:0 6px 16px rgba(79,70,229,.3); }
button.ghost { background:transparent; color:var(--mute); border:1px solid var(--glass-border); box-shadow:none; }
button.small { padding:0 10px; font-size:var(--t-small); min-height:32px; } button.danger { background:var(--red5); }
@media (max-width:767px) { button { min-height:44px; } button.small { min-height:44px; } input, select, textarea { min-height:44px; } }

/* ==== components (dashboard/ui.js, Portal.ui; brand-guidelines §9) ==== */
.chip { font-size:var(--t-meta); line-height:16px; color:var(--mute); min-width:0; } .chip.late { color:var(--amber); } .chip.down { color:var(--red); font-weight:700; }
.card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:6px 12px; margin-bottom:14px; flex-wrap:wrap; }
.card > header h2 { margin:0; } .card > header h2 a { color:inherit; text-decoration:none; }
.row.between { justify-content:space-between; } .row.base { align-items:baseline; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; background:var(--grey5); }
.dot.red { background:var(--red5); } .dot.amber { background:var(--amber5); } .dot.green { background:var(--green5); } .dot.grey { background:var(--grey5); }
.ichip { width:40px; height:40px; border-radius:12px; display:inline-grid; place-items:center; flex:none; background:var(--brand-tint); color:var(--brand); }
.ichip svg { width:20px; height:20px; } .ichip.sm { width:32px; height:32px; border-radius:10px; } .ichip.sm svg { width:16px; height:16px; }
.ichip.violet { background:rgba(139,92,246,.14); color:var(--brand2); } .ichip.teal { background:rgba(20,184,166,.14); color:var(--teal); } .ichip.sky { background:rgba(14,165,233,.14); color:var(--sky); }
.ichip.red { background:var(--redbg); color:var(--red); } .ichip.amber { background:var(--amberbg); color:var(--amber); } .ichip.green { background:var(--greenbg); color:var(--green); } .ichip.grey { background:var(--greybg); color:var(--grey); }

/* hero */
.hero { background:var(--hero); color:var(--hero-ink); border:0; box-shadow:0 16px 40px rgba(49,46,129,.35); position:relative; overflow:hidden; }
.hero .eyebrow, .hero .chip, .hero .lab { color:rgba(255,255,255,.78); } .hero h2, .hero .v { color:#fff; }
.hero .v { font-size:var(--t-display); line-height:44px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hero .ranges { display:flex; gap:4px; } .hero .ranges button { min-height:30px; height:30px; padding:0 12px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; font-size:var(--t-meta); font-weight:600; cursor:pointer; box-shadow:none; }
.hero .ranges button.on { background:#fff; color:#312e81; }
.hero .pill { background:rgba(255,255,255,.14); color:#fff; } .hero .pill.green { color:#86efac; } .hero .pill.red { color:#fca5a5; } .hero .pill.grey { color:rgba(255,255,255,.8); }
.hero .ctl { color:rgba(255,255,255,.88); font-size:var(--t-small); display:flex; align-items:center; gap:6px; } .hero .chart text { fill:rgba(255,255,255,.75); } .hero .chart .lineS { stroke:#fff; } .hero .chart .gridl { stroke:rgba(255,255,255,.12); } .hero .chart .pt { fill:#fff; stroke:#4338ca; } .hero .chart .hair { stroke:rgba(255,255,255,.5); }
.hero .heroflex { display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; } .hero .heroleft { flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:8px; } .hero .heroright { flex:1 1 320px; min-width:0; }
@media (max-width:767px) { .hero .ranges button { min-height:44px; min-width:44px; } }

/* verdict strip and needs-you rows */
.strip { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-card); border:1px solid; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.strip p { font-weight:700; color:var(--ink); } .strip .sub { font-weight:500; color:var(--mute); font-size:var(--t-small); }
.strip.red { background:var(--redbg); border-color:rgba(220,38,38,.3); } .strip.red p { color:var(--red); }
.strip.amber { background:var(--amberbg); border-color:rgba(245,158,11,.35); } .strip.amber p { color:var(--amber); }
.strip.green { background:var(--greenbg); border-color:rgba(34,197,94,.3); } .strip.green p { color:var(--green); }
.strip.grey { background:var(--greybg); border-color:var(--glass-border); } .strip.grey p { color:var(--grey); }
.needs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.needs li { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 0; border-top:1px solid var(--line); } .needs li:first-child { border-top:0; padding-top:0; }
.needs .txt { flex:1 1 0; min-width:0; font-size:var(--t-small); color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .needs .txt small { display:block; font-weight:500; color:var(--mute); overflow:hidden; text-overflow:ellipsis; }
.needs .age { font-size:var(--t-meta); color:var(--mute); white-space:nowrap; } .needs li.more { min-height:44px; } .needs li.more a { font-size:var(--t-small); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.chev { width:18px; height:18px; color:var(--mute); flex:none; }

/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
@media (max-width:1023px) { .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:767px) { .kpis { gap:12px; } }
.kpi { display:flex; flex-direction:column; gap:8px; margin-bottom:0; }
.kpi .toprow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi .lab { font-size:var(--t-small); color:var(--mute); font-weight:600; line-height:18px; }
.kpi .v { font-size:var(--t-kpi); line-height:34px; font-weight:700; color:var(--ink); letter-spacing:-.02em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.kpi .v.red { color:var(--red); } .kpi .v.amber { color:var(--amber); } .kpi .v.grey { color:var(--grey); font-size:var(--t-h2); letter-spacing:0; }
.kpi .deltas { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--t-meta); color:var(--mute); font-variant-numeric:tabular-nums; }
.kpi .ctl { display:flex; align-items:center; gap:6px; font-size:var(--t-small); color:var(--mute); }
.spark { width:100%; height:36px; display:block; } .spark .s { fill:none; stroke:var(--brand); stroke-width:1.5; } .spark .f { opacity:.9; } .spark circle { fill:var(--brand); stroke:var(--glass-strong); stroke-width:2; }
.hero .spark .s { stroke:#fff; } .hero .spark circle { fill:#fff; stroke:#4338ca; }

/* meters */
.meters { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
@media (max-width:1023px) { .meters { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:767px) { .meters { gap:12px; } }
.meter { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin-bottom:0; }
.meter .lab { font-size:var(--t-small); color:var(--mute); font-weight:600; } .meter .big { font-size:var(--t-h2); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.meter .big.red { color:var(--red); } .meter .big.amber { color:var(--amber); } .meter .big.green { color:var(--green); } .meter .big.grey { color:var(--grey); } .meter .sub { font-size:var(--t-meta); color:var(--mute); }
.ring svg { width:96px; height:96px; display:block; } .ring .track { fill:none; stroke-width:12; } .ring .fill { fill:none; stroke-width:12; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; }
.ring .track.red { stroke:var(--redbg); } .ring .track.amber { stroke:var(--amberbg); } .ring .track.green { stroke:var(--greenbg); } .ring .track.grey { stroke:var(--greybg); }
.ring .fill.red { stroke:var(--red5); } .ring .fill.amber { stroke:var(--amber5); } .ring .fill.green { stroke:var(--green5); } .ring .fill.grey { stroke:var(--grey5); }
.ring text { font:700 20px var(--font); fill:var(--ink); font-variant-numeric:tabular-nums; } .ring text.red { fill:var(--red); } .ring text.amber { fill:var(--amber); } .ring text.green { fill:var(--green); }
.gauge svg { width:150px; height:86px; display:block; } .gauge .seg { fill:none; stroke-width:12; stroke-linecap:butt; } .gauge .needle { stroke:var(--ink); stroke-width:3; stroke-linecap:round; } .gauge .pin { fill:var(--ink); stroke:var(--glass-strong); stroke-width:3; }
.donut { display:flex; gap:20px; align-items:center; flex-wrap:wrap; } .donut svg { width:160px; height:160px; flex:none; } .donut .seg { fill:none; stroke-width:22; } .donut text { font:700 24px var(--font); fill:var(--ink); font-variant-numeric:tabular-nums; } .donut text.sub { font:500 12px var(--font); fill:var(--mute); }
ul.legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-width:160px; flex:1; } ul.legend li { display:flex; align-items:center; gap:8px; font-size:var(--t-small); } ul.legend li b { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; } ul.legend li .sh { color:var(--mute); width:44px; text-align:right; }

/* charts */
.chart { position:relative; } .chart > svg { width:100%; display:block; overflow:visible; }
.chart .lineS { fill:none; stroke:var(--brand); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.chart .gridl { stroke:var(--line); stroke-width:1; } .chart .hair { stroke:var(--mute); stroke-width:1; stroke-dasharray:3 3; } .chart .rule { stroke:var(--ink); stroke-width:1.2; stroke-dasharray:5 4; opacity:.7; }
.chart .pt { fill:var(--brand); stroke:#fff; stroke-width:2.5; }
.chart text { font:500 12px var(--font); fill:var(--mute); font-variant-numeric:tabular-nums; }
.chart .tip rect, .chart .tip path { fill:var(--tip); } .chart .tip text { fill:var(--tip-ink); font-weight:600; }
.chart .bar { fill:var(--brand); opacity:.28; } .chart .bar.on { opacity:1; } .chart .rulebg { fill:var(--glass-strong); stroke:var(--glass-border); } .chart .rulelbl { fill:var(--ink); font-weight:600; }

/* projection, recommendation, tracker */
.proj .pt { font-size:var(--t-kpi); font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:34px; font-variant-numeric:tabular-nums; } .proj .pt.amber { color:var(--amber); } .proj .pt.green { color:var(--green); } .proj .pt.red { color:var(--red); } .proj .pt.grey { color:var(--ink); }
.proj .band { font-size:var(--t-small); color:var(--mute); }
.pace { position:relative; height:52px; margin:10px 0 2px; }
.pace .track { position:absolute; left:0; right:0; top:16px; height:12px; border-radius:6px; background:var(--greybg); }
.pace .bandspan { position:absolute; top:16px; height:12px; background:var(--brand); opacity:.15; border-radius:6px; }
.pace .mtd { position:absolute; left:0; top:16px; height:12px; border-radius:6px; background:var(--grad-brand); box-shadow:0 2px 8px rgba(79,70,229,.35); }
.pace .mark { position:absolute; top:10px; width:3px; height:24px; border-radius:2px; background:var(--brand2); } .pace .mark.target { background:var(--ink); width:2px; } .pace .mark.case { top:14px; height:16px; width:1px; background:var(--mute); }
.pace .ml { position:absolute; top:36px; font-size:var(--t-meta); color:var(--mute); white-space:nowrap; transform:translateX(-50%); } .pace .ml.flag { padding:1px 7px; border-radius:6px; background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--ink); font-weight:600; top:-6px; transform:translateX(-100%); }
.rec { display:flex; gap:14px; margin-bottom:0; } .rec > .date { align-self:flex-start; } .rec .body { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.rec .what { font-size:var(--t-h2); font-weight:700; line-height:24px; margin:0; } .rec .why { color:var(--ink2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rec .facts { display:flex; flex-wrap:wrap; gap:6px; } .rec .out { font-size:var(--t-small); } .rec .out b.green { color:var(--green); } .rec .out b.amber { color:var(--amber); } .rec .out b.red { color:var(--red); } .rec .from { font-size:var(--t-meta); color:var(--mute); }
.track5 { display:flex; align-items:flex-start; margin:4px 0 0; }
.track5 .st { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:var(--t-meta); color:var(--mute); position:relative; text-align:center; }
.track5 .st::before { content:""; position:absolute; left:-50%; right:50%; top:10px; height:2px; background:var(--line); } .track5 .st:first-child::before { display:none; }
.track5 .st i { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:var(--glass-strong); position:relative; z-index:1; display:grid; place-items:center; }
.track5 .st i svg { width:12px; height:12px; color:#fff; } .track5 .st.done i { background:var(--brand); border-color:var(--brand); } .track5 .st.now i { border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); } .track5 .st.done::before, .track5 .st.now::before { background:var(--brand); }
.track5 .st.done, .track5 .st.now { color:var(--ink); font-weight:600; } .track5 .st small { font-weight:500; color:var(--mute); }
@media (max-width:767px) { .rec { flex-direction:column; gap:10px; } .rec > .date { width:auto; display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; align-self:flex-start; } .rec > .date b { display:inline; font-size:var(--t-small); } }

/* tables (the .tbl ones the library builds), entries, watch rows */
.scrollwrap { position:relative; }
.scrollwrap::after { content:""; position:absolute; right:0; top:0; bottom:0; width:28px; background:linear-gradient(90deg, transparent, var(--glass-strong)); pointer-events:none; border-radius:0 var(--r-tile) var(--r-tile) 0; } .scrollwrap.end::after { display:none; }
table.tbl th, table.tbl td { white-space:nowrap; } table.tbl th { font-size:var(--t-meta); text-transform:uppercase; letter-spacing:.04em; } table.tbl td:first-child { font-weight:600; }
table.tbl tr.on td { background:var(--brand-tint); } table.tbl tr.on td:first-child { background:var(--glass-strong); }
td.cell { padding:6px; } td.cell > span { display:block; padding:8px 10px; border-radius:var(--r-ctl); background:var(--glass-strong); border:1px solid var(--glass-border); text-align:right; font-variant-numeric:tabular-nums; }
td.cell.now > span { outline:2px solid var(--brand); color:var(--brand); font-weight:700; }
.entries { list-style:none; margin:0; padding:0; } .entries > .entry { display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--line); align-items:flex-start; } .entries > .entry:first-child { border-top:0; padding-top:0; } .entries > .entry:last-child { padding-bottom:0; }
.date { flex:none; width:44px; text-align:center; background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:var(--r-ctl); padding:5px 0; line-height:1.05; box-shadow:var(--shadow-1); }
.date b { display:block; font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; } .date small { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); font-weight:700; }
.entries .body { min-width:0; flex:1; } .entries .title { color:var(--ink); font-weight:600; overflow-wrap:anywhere; } .entries .meta { margin-top:2px; font-size:var(--t-small); color:var(--mute); overflow-wrap:anywhere; }
.watch { display:grid; grid-template-columns:32px minmax(0,1fr) auto 84px; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.watch:first-child { border-top:0; padding-top:0; } .watch .wt { min-width:0; } .watch .lab { font-size:var(--t-small); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.watch .wv { display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .watch .wv b { font-size:var(--t-h2); color:var(--ink); font-variant-numeric:tabular-nums; } .watch .wv b.red { color:var(--red); } .watch .wv b.amber { color:var(--amber); } .watch .wv b.green { color:var(--green); } .watch .wv b.grey { color:var(--grey); }
.watch .spark { height:30px; } @media (max-width:767px) { .watch { grid-template-columns:32px minmax(0,1fr) auto; } .watch .spark { display:none; } }

/* controls, empty state, skeleton */
.seg { display:inline-flex; background:var(--greybg); border-radius:var(--r-pill); padding:3px; gap:2px; }
.seg button { border:0; background:none; color:var(--mute); padding:0 14px; min-height:36px; height:36px; border-radius:var(--r-pill); cursor:pointer; font-weight:600; font-size:var(--t-small); transition:background 180ms var(--ease); box-shadow:none; }
.seg button.on { background:var(--glass-strong); color:var(--ink); box-shadow:var(--shadow-1); } @media (max-width:767px) { .seg button { min-height:44px; height:44px; } }
.daypick { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:var(--r-ctl); border:1px solid var(--glass-border); background:var(--glass); color:var(--ink); font-weight:600; font-size:var(--t-small); position:relative; }
.daypick svg { width:18px; height:18px; color:var(--mute); } .daypick select { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; }
.empty { display:flex; align-items:center; gap:10px; color:var(--mute); font-size:var(--t-small); }
.skel { background:var(--greybg); border-radius:var(--r-tile); min-height:14px; }
@media (prefers-reduced-motion: no-preference) { .skel { background:linear-gradient(90deg, var(--greybg) 25%, var(--line) 50%, var(--greybg) 75%); background-size:200% 100%; animation:sh 1.2s infinite; } @keyframes sh { to { background-position:-200% 0; } } }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .strip, .side, .top { background:var(--glass-strong); } }

/* ---- page layout helpers (Portal V5b) ---- */
.content > .grid > * > .card, .content > .grid > * > .kpis { margin-bottom:0; }
.stack { display:grid; gap:16px; } .gap { margin-top:14px; } .stack > .banner { margin:0; }
.feedfoot { margin-top:24px; } .feedlines { font-size:var(--t-small); color:var(--mute); } .feedlines summary { cursor:pointer; min-height:44px; display:flex; align-items:center; } .feedlines p { margin:4px 0; } .feedbar:empty { display:none; }
.tall .scroll { max-height:420px; overflow:auto; } .tall thead th { position:sticky; top:0; background:var(--glass-strong); z-index:2; } .src.gap { margin-top:12px; } .note { font-size:var(--t-meta); color:var(--mute); font-weight:400; max-width:46ch; white-space:normal; }
.kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 16px; } .kv div { min-width:0; } .kv b { display:block; font-size:var(--t-h2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .kv b.red { color:var(--red); } .kv small { color:var(--mute); font-size:var(--t-small); }
.phonebar { display:none; } @media (max-width:767px) { .phonebar:not(:empty) { display:flex; gap:8px; margin-bottom:16px; } .phonebar > * { flex:1 1 0; min-width:0; } .phonebar .seg { display:flex; } .phonebar .seg button { flex:1 1 0; padding:0 6px; } .phonebar .daypick { width:100%; } }
details.state { margin:0 0 8px; } details.state > summary, details.clip > summary { cursor:pointer; } details.state > summary { min-height:44px; display:flex; align-items:center; font-weight:600; } details.clip > div { margin-top:6px; color:var(--mute); overflow-wrap:anywhere; } details.clip > summary { overflow-wrap:anywhere; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:24px; } @media (max-width:767px) { .grid2 { gap:16px; } }

/* ==== step 8: Mail, System, Blocks, Reports ==== */
.kinds { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.kinds button { min-height:44px; padding:0 14px; background:var(--greybg); color:var(--mute); box-shadow:none; border-radius:var(--r-pill); font-size:var(--t-small); font-weight:600; }
.kinds button.on { background:var(--brand-tint); color:var(--brand-ink); }
.pill.blocked, .pill.foreign, .pill.dead { background:var(--redbg); color:var(--red); } .pill.clean, .pill.ours { background:var(--greenbg); color:var(--green); } .pill.unknown, .pill.unblocked { background:var(--greybg); color:var(--grey); }
.stc small { display:block; margin-top:2px; font-size:var(--t-meta); color:var(--mute); }
.bar { margin-bottom:14px; } .acts { display:flex; gap:6px; }
.form { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; align-items:end; } .form label { display:block; margin-bottom:6px; font-size:var(--t-small); font-weight:600; color:var(--mute); } .form input { margin-bottom:0; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:10px; } .filters input, .filters select { margin-bottom:0; width:100%; } @media (max-width:700px) { .filters { grid-template-columns:1fr 1fr; } .filters input:first-child { grid-column:1 / -1; } }
tr.retired td { color:var(--mute); } .chain { margin:6px 0 0; padding-left:18px; font-size:var(--t-small); overflow-wrap:anywhere; }
.lead { margin:0 0 10px; font-weight:600; color:var(--ink); } .excerpt { overflow-wrap:anywhere; } pre.md { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; margin:0; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--ink2); max-height:70vh; overflow-y:auto; }

/* touch widths up to a tablet's: every tap target is 44 px (the phone block above does the same under 768 px) */
@media (max-width:1023px) { button, button.small { min-height:44px; } input, select, textarea { min-height:44px; } .iconbtn { width:44px; height:44px; } .seg button { min-height:44px; height:44px; } .hero .ranges button { min-height:44px; min-width:44px; } }