/* admin.css — Codelux hub admin console (SPEC-4.0 §2, layout "H" of SPEC-4.1).
   One file, no external fonts or assets. Dark and light themes share every
   rule; only the tokens change.

   SINGLE SOURCE OF THE VISUAL LANGUAGE: the first two blocks below are copied
   VERBATIM from docs/design/layout-ideas-2026-10-01.html (the developer app
   uses the same ones). Do not edit them here: change the reference, then copy.
   Everything after is derived from them. */

/* ── tokens: verbatim from the reference ─────────────────────────────────── */
:root{
  --bg:#0d1117;--panel:#11161d;--panel2:#161b22;--line:#262c36;--text:#e6edf3;--muted:#8b949e;
  --accent:#58a6ff;--accent-bg:rgba(88,166,255,.14);--green:#3fb950;--green-bg:rgba(63,185,80,.15);
  --purple:#bc8cff;--purple-bg:rgba(188,140,255,.15);--orange:#d29922;--orange-bg:rgba(210,153,34,.15);--red:#f85149;
  --shadow:0 1px 0 rgba(255,255,255,.03);
}
:root[data-theme="light"]{
  --bg:#f6f8fa;--panel:#ffffff;--panel2:#f1f3f6;--line:#d8dee4;--text:#1f2328;--muted:#656d76;
  --accent:#0969da;--accent-bg:rgba(9,105,218,.10);--green:#1a7f37;--green-bg:rgba(26,127,55,.12);
  --purple:#8250df;--purple-bg:rgba(130,80,223,.12);--orange:#9a6700;--orange-bg:rgba(154,103,0,.12);--red:#cf222e;
  --shadow:0 1px 2px rgba(31,35,40,.06);
}

/* ── console aliases: older rule names resolved onto the shared tokens ───── */
:root {
  --surf: var(--panel); --card: var(--panel); --sunk: var(--panel2);
  --border: var(--line); --border-soft: color-mix(in srgb, var(--line) 65%, transparent);
  --faint: var(--muted);
  --yellow: var(--orange); --yellow-soft: var(--orange-bg);
  --green-soft: var(--green-bg); --red-soft: color-mix(in srgb, var(--red) 13%, transparent);
  --accent-soft: var(--accent-bg);
  --hover: color-mix(in srgb, var(--text) 5%, transparent);
  --accent-ink: #0b1020;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --radius: 8px;
  --pop: 0 12px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
  --k-memory:#bc8cff;  --k-memory-bg:rgba(188,140,255,.16);
  --k-journal:#8b9cff; --k-journal-bg:rgba(139,156,255,.16);
  --k-note:#39c5bb;    --k-note-bg:rgba(57,197,187,.15);
  --k-todo:#e3b341;    --k-todo-bg:rgba(227,179,65,.16);
  --k-fact:#56d4f5;    --k-fact-bg:rgba(86,212,245,.14);
  --k-decision:#f778ba;--k-decision-bg:rgba(247,120,186,.15);
  --k-codemap:#3fb950; --k-codemap-bg:rgba(63,185,80,.15);
  --k-file:#9fb3c8;    --k-file-bg:rgba(159,179,200,.14);
  --k-git:#f0883e;     --k-git-bg:rgba(240,136,62,.16);
  --k-lock:#8b949e;    --k-lock-bg:rgba(139,148,158,.16);
  --k-refused:#f85149; --k-refused-bg:rgba(248,81,73,.15);
  --k-message:#58c4ff; --k-message-bg:rgba(88,196,255,.14);
  --k-team:#8b949e;    --k-team-bg:rgba(139,148,158,.14);
  --k-project:#d2a8ff; --k-project-bg:rgba(210,168,255,.14);
  --k-audit:#d29922;   --k-audit-bg:rgba(210,153,34,.15);
  --k-task:#58a6ff;    --k-task-bg:rgba(88,166,255,.14);
}
:root[data-theme="light"] {
  --accent-ink: #ffffff;
  --pop: 0 12px 30px rgba(31, 35, 40, .16);
  color-scheme: light;
  --k-memory:#8250df;  --k-memory-bg:rgba(130,80,223,.12);
  --k-journal:#4c5fd5; --k-journal-bg:rgba(76,95,213,.12);
  --k-note:#0f7b73;    --k-note-bg:rgba(15,123,115,.12);
  --k-todo:#9a6700;    --k-todo-bg:rgba(154,103,0,.12);
  --k-fact:#0a7ea4;    --k-fact-bg:rgba(10,126,164,.12);
  --k-decision:#bf3989;--k-decision-bg:rgba(191,57,137,.12);
  --k-codemap:#1a7f37; --k-codemap-bg:rgba(26,127,55,.12);
  --k-file:#57606a;    --k-file-bg:rgba(87,96,106,.12);
  --k-git:#bc4c00;     --k-git-bg:rgba(188,76,0,.12);
  --k-lock:#6e7781;    --k-lock-bg:rgba(110,119,129,.12);
  --k-refused:#cf222e; --k-refused-bg:rgba(207,34,46,.12);
  --k-message:#0969da; --k-message-bg:rgba(9,105,218,.12);
  --k-team:#6e7781;    --k-team-bg:rgba(110,119,129,.12);
  --k-project:#6639ba; --k-project-bg:rgba(102,57,186,.12);
  --k-audit:#9a6700;   --k-audit-bg:rgba(154,103,0,.12);
  --k-task:#0969da;    --k-task-bg:rgba(9,105,218,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(127, 127, 127, .35) transparent; }

/* ── boot / sign-in / lock screens ─────────────────────────────────────── */
.screen { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.screen-card { width: 100%; max-width: 420px; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 28px; box-shadow: var(--pop); }
.screen-card h1 { font-size: 18px; margin: 14px 0 6px; }
.screen-card p { color: var(--muted); margin-bottom: 10px; }
.screen-card .btn { width: 100%; justify-content: center; margin-top: 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-weight: 700; letter-spacing: .02em; font-size: 15px; }
.brand-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ── shell: layout H — header / teams rail / functions panel / content / footer.
   The page scrolls (not an inner box); header, rail, panel and footer stick. ── */
.shell { display: flex; flex-direction: column; min-height: 100vh; --hdr-h: 54px; --ftr-h: 30px; }
.hdr { position: sticky; top: 0; z-index: 30; height: var(--hdr-h); display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.hdr .brandx { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 800; font-size: 15px; }
.hdr .brandx .brand-name::first-letter { text-transform: uppercase; }
/* 352: the same header as the app: logo + name | divider | path ... search, help, theme, bell, plan, avatar */
.hdr .hdiv { width: 1px; height: 22px; background: var(--line); flex: none; }
.hdr .hlink { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); text-transform: uppercase; text-decoration: none; white-space: nowrap; flex: none; }
.hdr .hlink:hover { color: var(--accent); border-color: var(--accent); }
.hdr .plan-wrap { display: flex; align-items: center; flex: none; }
.hdr .plan-wrap:empty { display: none; }
.plan-pill { font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.plan-pill.free, .plan-pill.team { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.plan-pill.multi { background: var(--purple-bg); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, transparent); }
.plan-pill.trial { background: var(--orange-bg); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
.hpath { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.hpath .sep { color: var(--muted); }
.hpath .hn { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.hpath b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; line-height: 1.3; white-space: nowrap; }
.b-m { background: var(--accent-bg); color: var(--accent); }
.b-mg { background: var(--green-bg); color: var(--green); }
.b-t { background: var(--purple-bg); color: var(--purple); }
.b-o { background: var(--orange-bg); color: var(--orange); }
.srch { margin-left: auto; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; color: var(--muted); min-width: 280px; background: var(--panel2); cursor: pointer; font-size: 13px; }
.srch:hover { border-color: var(--muted); }
.srch .kbds { margin-left: auto; }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--muted); }
.icb { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; background: var(--panel2); cursor: pointer; color: var(--text); padding: 0; flex: none; }
.icb:hover { border-color: var(--muted); }
.icb { position: relative; }
.icb .pip { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
/* every header control is 32 px high, in one row: the avatar too (it was 36 with the button's padding) */
.hdr .menu-wrap { flex: none; display: flex; }
.hdr .menu-wrap .btn { padding: 0; border: 0; border-radius: 8px; }
.hdr .menu-wrap .av { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; background: #1f883d; color: #fff; }
.mid { flex: 1; display: flex; align-items: flex-start; min-width: 0; }
.sides { display: flex; flex: none; position: sticky; top: var(--hdr-h); height: calc(100vh - var(--hdr-h) - var(--ftr-h)); z-index: 6; }

/* team selector in the head of the sidebar; coloured initials with a pending count */
.pj { position: relative; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex: none; color: #fff; }
.pj .nc { position: absolute; right: -6px; top: -6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--orange); color: #111; font-size: 10px; font-weight: 800; display: none; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--panel); }
.pj .nc.on { display: flex; }
.tn-row { display: flex; align-items: center; margin: 1px 6px 1px 2px; }
.tn-row a, .tn-row .tn-label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0; border-radius: 7px; color: var(--text); background: none; border: 0; cursor: pointer; font-size: 13px; text-decoration: none; text-align: left; }
.tn-row a:hover, .tn-row .tn-label:hover { background: var(--panel2); text-decoration: none; }
.tn-row a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.tn-row a .cnt, .tn-row .tn-label .cnt { margin-left: auto; font-size: 11px; color: var(--muted); }
.caret { width: 18px; height: 24px; flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 10px; padding: 0; }
.caret:hover { color: var(--text); }
.tn-kids { margin: 0 6px 4px 22px; border-left: 1px solid var(--line); padding-left: 6px; display: flex; flex-direction: column; }
.tn-kids a { margin: 1px 0; }
.tn-none { padding: 6px 8px; color: var(--muted); font-size: 12px; }
.tleaf { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left; padding: 5px 8px; border-radius: 7px; font-size: 13px; margin: 1px 0; }
.tleaf:hover { background: var(--panel2); }
.tleaf.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.tleaf .pj { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.tleaf .pj .nc { right: -7px; top: -7px; min-width: 15px; height: 15px; font-size: 9px; }
.nav a .cnt.warn, .tn-row a .cnt.warn { background: var(--orange); color: #111; border-radius: 8px; padding: 0 5px; font-weight: 700; }
.pnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.pnm small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pj.c1 { background: #2f81f7; } .pj.c2 { background: #8957e5; } .pj.c3 { background: #1f883d; } .pj.c4 { background: #9a6700; }
.pj.c5 { background: #bf3989; } .pj.c6 { background: #0f7b73; } .pj.all { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0); } 50% { box-shadow: 0 0 0 6px rgba(210, 153, 34, .45), 0 0 18px 4px rgba(210, 153, 34, .55); } }
@keyframes flash { 0% { background: transparent; } 20% { background: var(--orange-bg); } 40% { background: transparent; } 60% { background: var(--orange-bg); } 100% { background: transparent; } }

/* functions panel */
.hpanel { width: 236px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; flex: none; }
.phd .lab { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.phd { padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.phd b { font-size: 15px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.phd b span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phd .t2 { font-size: 12px; color: var(--muted); margin-top: 3px; }
.nav { padding: 4px 0 12px; display: flex; flex-direction: column; }
.nav-group { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 6px; border-radius: 7px; color: var(--text); text-decoration: none; cursor: pointer; font-size: 13px; }
.nav a:hover { background: var(--panel2); text-decoration: none; }
.nav a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.nav a svg { flex: none; opacity: .85; }
.nav a .cnt { margin-left: auto; font-size: 11px; color: var(--muted); }
.pfoot { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.btn.burger { display: none; }
.content { padding: 22px 28px 48px; width: 100%; max-width: 1480px; }
.page-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-h h1 { font-size: 20px; font-weight: 700; }
.top-ctx { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.top-ctx:empty { display: none; }
.ftr { position: sticky; bottom: 0; z-index: 30; height: var(--ftr-h); display: flex; align-items: center; gap: 16px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted); flex: none; white-space: nowrap; overflow: hidden; }
.ftr .ok { display: flex; align-items: center; gap: 6px; }
.ftr .ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.ftr .ok.warn::before { background: var(--orange); }
.ftr .r { margin-left: auto; }

/* command palette (Ctrl+K) */
.palette { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.palette .box { width: 560px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 14px 16px; font-size: 15px; outline: none; }
.palette .opts { max-height: 50vh; overflow-y: auto; padding-bottom: 6px; }
.palette .opt { display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer; }
.palette .opt.on { background: var(--accent-bg); }
.palette .sec { padding: 8px 16px 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.palette .none { padding: 14px 16px; color: var(--muted); }

/* ── controls ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surf); color: var(--text); border-radius: 7px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--accent); }
.btn.danger { color: var(--red); }
.btn.danger:hover:not(:disabled) { border-color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
.btn.sm { padding: 3px 9px; font-size: 11.5px; }
.btn.icon { padding: 6px; }
select.in.sm { padding: 3px 24px 3px 8px; font-size: 12px; }
.in, select.in, textarea.in { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; color: var(--text); font-size: 12.5px; outline: none; min-width: 0; }
.in:focus { border-color: var(--accent); }
textarea.in { width: 100%; resize: vertical; min-height: 70px; font-family: var(--mono); font-size: 12px; }
select.in { cursor: pointer; padding-right: 26px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > label, .lab { font-size: 11px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 11px; color: var(--faint); }
.field .in { width: 100%; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.nw { flex-wrap: nowrap; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; cursor: pointer; }
.check input { margin-top: 2px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surf); flex-wrap: wrap; }
.seg button { background: none; border: 0; color: var(--muted); padding: 6px 12px; cursor: pointer; font-size: 12px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--card); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
:root[data-theme="light"] .seg button.on { background: var(--sunk); }

/* ── cards / grids ──────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h3 { font-size: 13.5px; font-weight: 650; }
.card-h .sub { font-size: 11.5px; color: var(--muted); }
.grid { display: grid; gap: 14px; }
.grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.kpi .k-lab { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .k-val { font-size: 26px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .k-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; min-height: 17px; }
.kpi .k-val.locked { font-size: 13px; font-weight: 500; color: var(--muted); padding: 9px 0 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--faint); flex: none; }
.dot.ok { background: var(--green); } .dot.warn { background: var(--yellow); } .dot.bad { background: var(--red); } .dot.acc { background: var(--accent); }

.notice { border: 1px solid var(--border); background: var(--sunk); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.notice svg { flex: none; margin-top: 1px; }
.notice.warn { border-color: rgba(210, 153, 34, .4); background: var(--yellow-soft); color: var(--yellow); }
.notice.bad { border-color: rgba(248, 81, 73, .35); background: var(--red-soft); color: var(--red); }
.notice.info { border-color: rgba(88, 166, 255, .35); background: var(--accent-soft); color: var(--text); }
.notice b { color: inherit; }
.notice + .notice, .notice + .card, .card + .notice { margin-top: 12px; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; padding: 1px 8px; border-radius: 10px; background: rgba(139, 148, 158, .14); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--green-soft); color: var(--green); }
.pill.warn { background: var(--yellow-soft); color: var(--yellow); }
.pill.bad { background: var(--red-soft); color: var(--red); }
.pill.acc { background: var(--accent-soft); color: var(--accent); }
.pill.soon { border: 1px solid var(--border); background: transparent; text-transform: uppercase; letter-spacing: .05em; font-size: 9.5px; font-weight: 700; }
.key { font-family: var(--mono); font-size: 11px; color: var(--accent); white-space: nowrap; }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; }
.who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.who .nm { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .em { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.bar { height: 6px; background: var(--sunk); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; }
.bar b { display: block; height: 100%; background: var(--accent); }
.bar b.warn { background: var(--yellow); } .bar b.bad { background: var(--red); } .bar b.ok { background: var(--green); }
dl.kv { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 6px 24px; font-size: 12.5px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { min-width: 0; overflow-wrap: anywhere; }

/* ── tables ─────────────────────────────────────────────────────────────── */
/* UI-fix C.7: a table wider than its card scrolls sideways and says so: the side that has more to show fades into a shadow (scroll shadows, pure CSS). */
.tbl-wrap { overflow-x: auto; margin: 0 -4px; -webkit-overflow-scrolling: touch; --hs-bg: var(--panel);
  background:
    linear-gradient(to right, var(--hs-bg) 30%, transparent) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--hs-bg) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--muted) 55%, transparent), transparent) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--muted) 55%, transparent), transparent) 100% 0 / 14px 100% no-repeat scroll; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; font-size: 12.5px; }
.tbl th { color: var(--muted); font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--hover); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* activity strip (events per day) */
.spark { display: grid; grid-auto-flow: column; grid-auto-columns: 9px; gap: 2px; align-items: end; height: 26px; }
.spark i { display: block; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.spark i.zero { background: var(--border); opacity: 1; }
.heat { display: grid; gap: 3px; }
.heat-row { display: grid; grid-template-columns: 160px repeat(var(--days, 14), minmax(10px, 1fr)); gap: 3px; align-items: center; }
.heat-row .hn { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heat-cell { height: 18px; border-radius: 3px; background: var(--sunk); border: 1px solid var(--border-soft); }
.heat-cell.l1 { background: color-mix(in srgb, var(--accent) 25%, var(--sunk)); }
.heat-cell.l2 { background: color-mix(in srgb, var(--accent) 45%, var(--sunk)); }
.heat-cell.l3 { background: color-mix(in srgb, var(--accent) 70%, var(--sunk)); }
.heat-cell.l4 { background: var(--accent); }
.heat-head { font-size: 9.5px; color: var(--faint); text-align: center; }

/* ── key status chip & menus ────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 16px; padding: 4px 11px; font-size: 12px; background: var(--surf); cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--muted); }
.chip.locked { color: var(--yellow); border-color: rgba(210, 153, 34, .45); }
.chip.unlocked { color: var(--green); border-color: rgba(63, 185, 80, .45); }
/* 353: a team key version this tab does not hold yet (a rotation after the keyring): an orange dot on the Teams chip */
.chip { position: relative; }
.chip .kdot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #d18616); box-shadow: 0 0 0 2px var(--bg); }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--surf); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--pop); padding: 6px; z-index: 50; }
.menu .mi { display: flex; width: 100%; gap: 8px; align-items: center; background: none; border: 0; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text); }
.menu .mi:hover { background: var(--hover); }
.menu .mh { padding: 8px 10px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }

/* ── modal ──────────────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(1, 4, 9, .6); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--pop); }
.modal.wide { max-width: 760px; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-h h3 { font-size: 14.5px; font-weight: 650; flex: 1; }
.modal-b { padding: 16px 18px; }
.modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.err { color: var(--red); font-size: 12px; margin-top: 6px; min-height: 0; }
.toast-box { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: calc(100vw - 32px); }
.toast { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 9px 12px; box-shadow: var(--pop); font-size: 12.5px; max-width: 380px; }
.toast.bad { border-left-color: var(--red); } .toast.ok { border-left-color: var(--green); }

/* ── tabs inside a section ──────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 8px 12px; color: var(--muted); font-size: 12.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* provider picker (providers.js) */
.prov { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.prov button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; text-align: left; }
.prov button:hover { border-color: var(--muted); }
.prov button.on { border-color: var(--accent); background: var(--accent-soft); }
.prov button b { font-size: 12.5px; }
.prov button span { font-size: 11px; color: var(--muted); }
/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sides { position: fixed; left: 0; top: var(--hdr-h); bottom: var(--ftr-h); height: auto; width: min(88vw, 280px); transform: translateX(-102%); transition: transform .18s ease; box-shadow: var(--pop); z-index: 90; }
  .shell.nav-open .sides { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(1, 4, 9, .5); z-index: 80; }
  .btn.burger { display: inline-flex; }
  /* the search shrinks to a 32 px icon button like the others; the path gives way (clipped) instead of covering it */
  .srch { min-width: 0; margin-left: auto; padding: 0; width: 32px; height: 32px; justify-content: center; flex: none; border-radius: 8px; }
  .srch .lbl, .srch .kbds { display: none; }
  .hpath { flex: 1 1 auto; overflow: hidden; }
  .hdr .chip { height: 32px; padding: 0 9px; flex: none; border-radius: 8px; }
  .hdr { padding: 0 16px; gap: 8px; } /* the same 16 px gutter as the content */
  .hdr .plan-wrap, .hdr .hlink { display: none; } /* room for the page name on a phone: the plan pill and Help give way (the app drops the plan pill under 600 px too) */
  .hdr .hdiv { display: none; }
  .hdr .brandx .brand-name, .hpath .hn, .hpath .sep { display: none; } /* only the current page stays (no row of lone › separators) */
  .content { padding: 16px 16px 40px; }
  .grid.k2 { grid-template-columns: minmax(0, 1fr); }
  .heat-row { grid-template-columns: 96px repeat(var(--days, 14), minmax(6px, 1fr)); }
}
@media (max-width: 560px) {
  .grid.k4, .grid.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .k-val { font-size: 21px; }
  .top h2 { font-size: 14px; }
  .hide-sm { display: none !important; }
  .hdr .chip { width: 32px; padding: 0; justify-content: center; } /* icon only on a phone: the same 32 px square as the other header buttons */
  .hpath .badge { display: none; } /* the sidebar head shows ENCRYPTED / OPEN; on a phone the header keeps only the page */
  dl.kv { grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
  dl.kv dd { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sides { transition: none; } }


/* tree nodes: every sub-section is a node; the orange number is a button into the right child */
.tn-row a .pnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn.team > .tn-row a .pj, .tn.projn > .tn-row a .pj { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.tn .tn .tn-row a { font-size: 12.5px; padding: 5px 8px; }
.tn .tn .tn .tn-row a { color: var(--muted); }
.tn .tn .tn .tn-row a.on { color: var(--accent); }
span.caret { display: inline-block; cursor: default; }
.nbadge { margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px; background: var(--orange); color: #111; font-size: 10px; font-weight: 800; border: 0; cursor: pointer; padding: 0 5px; line-height: 18px; }
.nbadge:hover { filter: brightness(1.1); }

/* ── Projects (SPEC-4.3) ── */
.pj.arch { opacity: .55; }
.pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 320px; overflow: auto; }
.pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.pick:hover { background: var(--panel2); border-color: var(--accent); }
.pick-t { display: flex; flex-direction: column; min-width: 0; }
.checks { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.chk:hover { background: var(--panel2); }
.chk .small { margin-left: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sw { width: 24px; height: 24px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sw.auto { width: auto; padding: 0 8px; background: var(--panel2); color: var(--muted); font-size: 11px; border-color: var(--line); }
.sw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.checks.inline { flex-direction: row; flex-wrap: wrap; gap: 14px; border: 0; padding: 0; max-height: none; }

/* ── Overview explorer (4.4): team › project › person › work, one row per item ─────────────────── */
.ex-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-bar .ex-filter { flex: 1 1 260px; max-width: 420px; }
.ex-card { padding: 6px; }
.ex-tree { display: flex; flex-direction: column; }
.ex-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px; border-radius: 8px; cursor: pointer; flex-wrap: wrap; outline: none; }
.ex-row:hover { background: var(--hover); }
.ex-row.focus:focus, .ex-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ex-row.hit { background: var(--accent-bg); }
.ex-row .caret { background: none; border: 0; color: var(--muted); width: 16px; flex: none; cursor: pointer; padding: 0; font-size: 12px; }
.ex-row.k-team { margin-top: 4px; border: 1px solid var(--border-soft); background: var(--panel2); }
.ex-row.k-team:hover { background: color-mix(in srgb, var(--panel2) 80%, var(--text) 6%); }
.ex-row.k-project .pj { width: 24px; height: 24px; font-size: 10px; }
.ex-row .av { width: 24px; height: 24px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ex-name { font-weight: 600; color: var(--text); text-decoration: none; }
a.ex-name:hover { color: var(--accent); text-decoration: underline; }
.ex-name.plain { font-weight: 500; }
.ex-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-row .grow { flex: 1 1 8px; }
.ex-row .pill { white-space: nowrap; }
.ex-row.k-task, .ex-row.k-standup, .ex-row.k-usage, .ex-row.k-locked { cursor: default; min-height: 32px; font-size: 12.5px; }
.ex-t { flex: 1 1 220px; min-width: 0; }
.ex-m { white-space: nowrap; }
.ex-block { color: var(--yellow); }
.ex-lockchip { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.ex-prog { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ex-prog .bar { width: 64px; display: inline-block; }
.pill.info { background: var(--accent-soft); color: var(--accent); }
.icb.on { border-color: var(--accent); color: var(--accent); }
/* chips: a wrapped row of pills */
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
@media (max-width: 720px) { .ex-sub { white-space: normal; flex-basis: 100%; } .ex-row { padding-right: 6px; } .ex-row .grow { display: none; } }

/* My account › Billing › Plans (billing.js): four plan cards, then two, then one on a phone */
.grid.plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-card { display: flex; flex-direction: column; }
.plan-card.current { border-color: var(--green); }
.plan-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-price { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; }
.plan-price span { font-size: 12px; font-weight: 500; color: var(--muted); }
.plan-price s { font-size: 14px; font-weight: 500; }
.plan-feats { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; line-height: 1.7; color: var(--text); }
/* Account › Feedback: the 1-5 star rating the site requires */
.stars { display: flex; gap: 4px; }
.stars .star { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.stars .star.on { color: var(--orange); border-color: var(--orange); }
/* My account › Account: the tiles that lead to its pages */
a.card.tile { color: var(--text); text-decoration: none; display: block; }
a.card.tile:hover { border-color: var(--accent); text-decoration: none; }
a.card.tile .card-h { margin-bottom: 6px; color: var(--accent); }
a.card.tile .card-h h3 { color: var(--text); }
@media (max-width: 1100px) { .grid.plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid.plans { grid-template-columns: minmax(0, 1fr); } }

/* 4.6/4.7: pilot banner on top of every page */
.pilot-banner { margin: 0 0 12px; padding: 8px 12px; border: 1px solid rgba(210, 153, 34, .4); background: var(--yellow-soft); color: var(--yellow); border-radius: 8px; font-size: 12.5px; }
.pilot-banner a { color: inherit; font-weight: 600; margin-left: 4px; }
/* SPEC 376 §7.2: a newer hub program is announced (selfupdate.js); a required one in the colour of an alert */
.selfupd-banner { margin: 0 0 12px; padding: 8px 12px; border: 1px solid rgba(88, 166, 255, .35); background: var(--accent-soft); color: var(--text); border-radius: 8px; font-size: 12.5px; display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.selfupd-banner.mandatory { border-color: rgba(248, 81, 73, .45); background: var(--red-soft); color: var(--red); }
.selfupd-banner .selfupd-text { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.selfupd-banner .selfupd-link { color: inherit; font-weight: 600; margin-left: 8px; text-decoration: underline; }
.selfupd-banner .selfupd-req { margin-top: 4px; font-weight: 600; }
.selfupd-banner .btn { flex: none; }
#selfupd-section .kv { margin: 0; }
#selfupd-section input[type=time].in { width: auto; min-width: 96px; }

/* ── 366: downloads as background tasks (js/downloads.js) ─────────────────────────────────────────────────────────────────────── */
.dl-ring { display: block; flex: none; }
.dl-ring .trk { stroke: var(--line); }
.dl-ring .bar { stroke: var(--accent); transition: stroke-dasharray .25s linear; }
.dl-ring.ok .bar { stroke: var(--green); }
.dl-ring.bad .bar { stroke: var(--red); }
.dl-ring .ctr { fill: var(--text); stroke: none; font: 700 11px var(--font); }
.dl-ring.ind { animation: spin 1.1s linear infinite; }
.dl-bad { color: var(--red); }
.dl-ok { color: var(--green); font-weight: 600; }
.dl-warn { color: var(--orange); }
/* the header: the ring with the number of downloads running */
.dl-wrap { position: relative; flex: none; display: flex; align-items: center; }
.dl-wrap[hidden] { display: none; }
.hdr .dl-trigger { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; }
.dl-trigger .dl-ring { position: absolute; inset: 1px; width: 32px; height: 32px; }
.dl-trigger .dl-ic { position: relative; display: flex; }
.dl-trigger.busy .dl-ic { color: var(--accent); animation: dlbob 1.3s ease-in-out infinite; }
.dl-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-sizing: border-box; }
.dl-badge[hidden] { display: none; }
@keyframes dlbob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@keyframes dlslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
.dl-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 32px); background: var(--surf); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--pop); padding: 12px; z-index: 60; }
.dl-panel[hidden] { display: none; }
.dl-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.dl-item { border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; background: var(--sunk); }
.dl-item.downloading, .dl-item.preparing, .dl-item.verifying, .dl-item.queued { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-bg); }
.dl-top { display: flex; align-items: center; gap: 6px; }
.dl-name { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-x { display: inline-flex; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.dl-x:hover { color: var(--text); background: var(--hover); }
.dl-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 6px 0 4px; }
.dl-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s linear; }
.dl-bar.ok i { background: var(--green); }
.dl-bar.bad i { background: var(--red); width: 100% !important; }
.dl-bar.ind i { width: 35% !important; animation: dlslide 1.2s ease-in-out infinite; }
.dl-meta { font-variant-numeric: tabular-nums; color: var(--muted); }
.dl-meta.dl-bad { color: var(--red); }
.dl-foot { margin-top: 10px; display: flex; justify-content: flex-end; }
/* the control in the page: only the button (and, after the end, a short note); progress / spinner / Cancel live in the header indicator */
.dl-td { min-width: 250px; }
.dl-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dl-done { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: 12px; max-width: 320px; }
@media (max-width: 860px) {
  .dl-panel { position: fixed; left: 16px; right: 16px; width: auto; max-width: none; top: calc(var(--hdr-h) + 6px); }
}
@media (max-width: 560px) {
  /* a build is a card, not a row of seven columns: no sideways scroll */
  table.tbl:has(.dl-td) thead { display: none; }
  table.tbl:has(.dl-td), table.tbl:has(.dl-td) tbody { display: block; }
  table.tbl:has(.dl-td) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
  table.tbl:has(.dl-td) td { border: 0; padding: 0; }
  table.tbl:has(.dl-td) td.dl-td { flex: 1 1 100%; min-width: 0; margin-top: 8px; }
  .dl-cell { align-items: stretch; }
  .dl-cell > .btn { justify-content: center; }
  .dl-done { align-items: flex-start; text-align: left; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .dl-ring.ind, .dl-trigger.busy .dl-ic, .dl-bar.ind i { animation: none; } }

/* 372: gate cards — a function outside the plan, or data sealed with a key this tab does not hold (assets/js/gates.js) */
.gate-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; max-width: 860px; }
.gate-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent-bg); color: var(--accent); }
.gate-ic.warn { background: var(--yellow-soft); color: var(--yellow); }
.gate-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.gate-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gate-h h3 { font-size: 15px; font-weight: 650; }
.gate-what { color: var(--text); font-size: 13px; line-height: 1.55; margin: 0; }
.gate-in { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); background: var(--sunk); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; }
.gate-in svg { flex: none; margin-top: 2px; color: var(--muted); }
.gate-actions { margin-top: 2px; }
.gate-actions .btn { text-decoration: none; }
@media (max-width: 560px) { .gate-card { flex-direction: column; padding: 16px; gap: 12px; } }

/* SPEC-UI-5 §4 — the Team view (squadview.js). The chart is planchart.js, the app's drawing: it reads the app's tokens,
   mapped here on the console's (plus the rgb triplets it uses for its translucent fills). */
.sq-host { --border-rgb: 38,44,54; --red-rgb: 248,81,73; --yellow-rgb: 210,153,34; --gray-rgb: 139,148,158; --c-orange: #f0883e; --hover: color-mix(in srgb, var(--text) 5%, transparent); min-width: 0; }
:root[data-theme="light"] .sq-host { --border-rgb: 216,222,228; --red-rgb: 207,34,46; --yellow-rgb: 154,103,0; --gray-rgb: 110,119,129; --c-orange: #bc4c00; }
.sq-ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.sq-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sq-seg button { border: 0; background: var(--panel); padding: 4px 10px; cursor: pointer; color: var(--muted); font: inherit; font-size: 12px; }
.sq-seg button.on { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.sq-pill { border: 1px solid var(--line); border-radius: 16px; padding: 3px 10px; background: var(--panel); cursor: pointer; font: inherit; font-size: 12px; color: var(--text); }
.sq-pill:hover, .sq-seg button:hover { color: var(--accent); }
.sq-sel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; padding: 3px 6px; max-width: 180px; }
.sq-rng { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.sq-now { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.sq-ch { border-radius: 14px; padding: 2px 10px; font-size: 12px; border: 1px solid var(--line); }
.sq-ch.late { color: var(--red); border-color: var(--red); }
.sq-ch.ok { color: var(--green); border-color: var(--green); }
.sq-host .ov-sw { overflow-x: hidden; }
.sq-panel:empty { display: none; }
.sq-p { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); overflow-wrap: anywhere; }
.sq-p-h { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.sq-p-h b { flex: 1; min-width: 0; }
.sq-p-h .key, .sq-p .pc-dep .key { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.sq-p .h { display: flex; gap: 8px; align-items: center; font-weight: 700; margin: 12px 0 4px; font-size: 12.5px; }
.sq-p .h i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.sq-p .pb { height: 8px; border-radius: 4px; background: rgba(var(--border-rgb), .55); position: relative; margin: 8px 0 4px; overflow: hidden; }
.sq-p .pb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.sq-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.sq-t td, .sq-t th { border-bottom: 1px dotted var(--line); padding: 3px 4px; text-align: left; vertical-align: top; }
.sq-t th { color: var(--muted); font-weight: 600; }
.sq-note { margin-top: 10px; }
@media (max-width: 700px) { .sq-rng { margin-left: 0; width: 100%; } }