/* ── type ──────────────────────────────────────────────────
   Gelion, self-hosted. It is the portal's typeface and the single
   biggest reason Command looked like a different product: everything
   else can match and mismatched letterforms still read as elsewhere.

   Self-hosted rather than linked, because the portal serves these
   without an Access-Control-Allow-Origin header and fonts are
   CORS-checked — a cross-origin @font-face would silently fall back,
   which is worse than not trying. Same registered domain, so the
   licence that covers togohealth.com covers this subdomain; worth a
   glance at the licence terms if Command ever moves to its own domain.

   `swap`: text renders immediately in the fallback and reflows when
   Gelion lands, rather than leaving the page blank while it loads. */
@font-face{font-family:Gelion;src:url(/fonts/Gelion-Light.woff2)format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Gelion;src:url(/fonts/Gelion-Regular.woff2)format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gelion;src:url(/fonts/Gelion-Medium.woff2)format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gelion;src:url(/fonts/Gelion-SemiBold.woff2)format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Gelion;src:url(/fonts/Gelion-Bold.woff2)format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Gelion;src:url(/fonts/Gelion-Black.woff2)format('woff2');
  font-weight:900;font-style:normal;font-display:swap}

/* ═══════════════════════════════════════════════════════════════════
   Command — design tokens and shell.
   One place for colour, type and spacing. Modules must not invent
   their own palette; if you need a colour that isn't here, add a
   token rather than a hex value in a module.

   The palette is the PORTAL's, taken from its live daisyUI theme, so
   that moving between portal.togohealth.com and Command does not feel
   like moving between two products. Command is a different app on a
   different host, but to the person using it, it is the same system
   and the same login.

   Portal tokens, for anyone comparing (styles/globals.css — the daisyUI
   theme `normal` plus the @theme gray scale, read 2026-09-25 by compiling
   the portal's own CSS rather than reading it, because the two
   declarations of --color-primary resolve differently than they look):
     primary #4b8de6 (primary-400 #5da3eb is the logo blue) · secondary #00aab7
     base-100 #fff · base-200 #e9edf0 · base-300 #e2e8ec · content #3a4344
     gray 50 #f1f5f8 · 100 #e4eaee · 200 #d5dde1 · 600 #8d9a9e · 700 #748285
     info #3abff8 · success #36d399 · warning #fbbd23 · error #f87272
     radius: field/box .5rem, selector 1rem · every border gray-200

   This block used to say base-200 #f8f8f8 and content #18181b. Those are
   daisyUI's stock `light` values, which the portal overrides — so Command
   had been faithfully copying a theme the portal does not use, and its
   neutral zinc greys were most of why it read as a different product.
   The portal's greys are cool (hue ~195°), not neutral.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#e9edf0;         /* base-200: the page ground */
  --panel:#fff;         /* base-100 */
  --panel-2:#f1f5f8;    /* gray-50: inset fills inside a white card */
  --panel-3:#e2e8ec;    /* base-300: table heads, toolbar strips */
  --ink:#3a4344;        /* base-content = gray-900 */
  --ink-2:#586466;      /* gray-800: secondary copy */
  --muted:#748285;      /* gray-700: labels, helper text */
  --faint:#8d9a9e;      /* gray-600: sidebar text, breadcrumbs */
  --line:#d5dde1;       /* gray-200: the portal's default border */
  --line-2:#e4eaee;     /* gray-100: row dividers, .shell>nav hover */
  --line-strong:color-mix(in srgb,#3a4344 20%,transparent); /* daisyUI input border */
  --accent:#4b8de6; --accent-2:#3670da; --accent-soft:#f0f7fe;
  /* The portal's btn-primary puts a dark label on the blue (primary-content
     #000). White on #4b8de6 is 3.3:1 and fails AA; this passes. */
  --accent-ink:#0b1a2e;
  --secondary:#00aab7;  /* teal: the portal's focus ring and brand accent */
  --focus:#00aab7;
  --good:#36d399; --warn:#fbbd23; --bad:#f87272; --info:#3abff8;
  /* A status WORD needs a darker shade than a status FILL — #fbbd23 text on
     white is unreadable. Fills use the base token; words use these. */
  --good-text:#0f7a55; --warn-text:#8a5a00; --bad-text:#c13b3b; --info-text:#0b76a8;
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
  --shadow:var(--shadow-sm);
  /* .5rem / 1rem, matching the portal's --radius-field and --radius-selector */
  --r:8px; --r-sm:6px; --r-pill:999px;
  --nav-w:216px;
}
/* The portal ships a light theme only. Command keeps its dark mode — people do
   use it — but derives it from the SAME cool hue family rather than a second
   palette, keeping the portal's steps between ground, panel and line. */
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  --bg:#12171a; --panel:#1b2124; --panel-2:#222a2e; --panel-3:#283136;
  --ink:#e4eaee; --ink-2:#c5cfd4; --muted:#a3b0b5; --faint:#8d9a9e;
  --line:#2f393d; --line-2:#252d31; --line-strong:color-mix(in srgb,#e4eaee 20%,transparent);
  --accent:#5da3eb; --accent-2:#7cb6ef; --accent-soft:#172737; --accent-ink:#0b1a2e;
  --secondary:#18c1cd; --focus:#18c1cd;
  --good:#36d399; --warn:#fbbd23; --bad:#f87272; --info:#3abff8;
  --good-text:#36d399; --warn-text:#fbbd23; --bad-text:#f87272; --info-text:#3abff8;
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/.4),0 1px 2px -1px rgb(0 0 0/.4);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.45),0 4px 6px -4px rgb(0 0 0/.45);
}}
:root[data-theme="dark"]{
  --bg:#12171a; --panel:#1b2124; --panel-2:#222a2e; --panel-3:#283136;
  --ink:#e4eaee; --ink-2:#c5cfd4; --muted:#a3b0b5; --faint:#8d9a9e;
  --line:#2f393d; --line-2:#252d31; --line-strong:color-mix(in srgb,#e4eaee 20%,transparent);
  --accent:#5da3eb; --accent-2:#7cb6ef; --accent-soft:#172737; --accent-ink:#0b1a2e;
  --secondary:#18c1cd; --focus:#18c1cd;
  --good:#36d399; --warn:#fbbd23; --bad:#f87272; --info:#3abff8;
  --good-text:#36d399; --warn-text:#fbbd23; --bad-text:#f87272; --info-text:#3abff8;
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/.4),0 1px 2px -1px rgb(0 0 0/.4);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.45),0 4px 6px -4px rgb(0 0 0/.45);
}

*{box-sizing:border-box}
/* The portal's UI text is text-sm — 14px on a 20px line — and it tracks
   nothing: no negative letter-spacing anywhere, headings included. */
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/20px Gelion,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
p{line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
/* Gelion is loaded at 300-700 and 900. A weight between two cuts (650, 680)
   is synthesised by the browser, which is part of why headings looked off. */
h1,h2,h3{margin:0;font-weight:600}
/* daisyUI .link: underlined in the surrounding colour. The portal keeps blue
   for the ACTIVE state (current nav item, current crumb), not for "clickable". */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
a:hover{text-decoration-color:currentColor}
.card h2 a,.page-head a,.empty a,.banner a{color:var(--accent);text-decoration:none}
.card h2 a:hover,.page-head a:hover,.empty a:hover,.banner a:hover{text-decoration:underline}

/* The portal's focus convention: a 2px teal ring with a 2px gap, keyboard only.
   Command had one focus rule in the whole stylesheet. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
input.field:focus-visible,select.tenant:focus-visible{border-color:var(--ink)}
.shell>nav a:focus-visible{outline-offset:-2px}

/* Portal scrollbars: 10px, round thumb at ~30% ink, so they invert in dark. */
:root{scrollbar-color:color-mix(in srgb,var(--ink) 35%,transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{border-radius:10px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
*::-webkit-scrollbar-track{background:transparent}

/* Secondary copy. Bare .s is the portal's `text-sm text-gray-500` panel copy;
   inside a row or a heading it is the 12px meta line. */
.s{color:var(--muted);font-size:14px;line-height:20px}

/* ── top bar ───────────────────────────────────────────────
   The portal has no header BAR: its title row sits straight on the grey
   ground with no fill and no border, and white only begins at the cards.
   Command's row now does the same — same ground as the page, so the eye
   meets the content, not a strip of chrome above it.

   The brand stays here rather than moving into the sidebar the way the
   portal's does: the portal's rail hides its wordmark until hover, and
   "Command" top-left was asked for (Greg, 2026-09-21). The wordmark is the
   PRODUCT, the avatar carries the org. */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:0 32px 0 20px;height:60px;background:var(--bg);border-bottom:0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;
  line-height:24px;color:var(--ink);text-decoration:none}
/* The mark is a circle already, so it needs no background, no radius and no
   letter — it carries its own. Sized, not scaled: width and height are on the
   element too, so the header does not reflow while the SVG loads. */
.brand .avatar{width:38px;height:38px;display:block;flex:none}
.top .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:0;
  border-radius:var(--r-pill);background:var(--panel);box-shadow:var(--shadow-sm);
  font-size:12px;line-height:16px;font-weight:500;color:var(--ink-2)}
/* daisyUI .select by hand: white field, 20%-ink border, 8px radius, drawn
   chevron. 36px tall, the portal's button height, so a select and a button
   in one row line up. */
select.tenant{font-size:14px;line-height:20px;color:var(--ink);background-color:var(--panel);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:7px 30px 7px 12px;max-width:230px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
select.tenant:disabled,input.field:disabled{background-color:var(--panel-2);border-color:var(--panel-2);
  color:color-mix(in srgb,var(--ink) 45%,transparent);cursor:not-allowed}

/* A role dropdown sits where a pill sat, so it is sized like one rather than
   like the group switcher — a full-width select in a list row reads as the
   row's subject instead of one attribute of it. */
select.role-sel{font-size:12px;line-height:16px;font-weight:600;padding:5px 26px 5px 10px;max-width:none;
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px)}
select.role-sel:disabled{opacity:.55}
.grant-edit{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:2px 0 12px}
.grant-edit[hidden]{display:none}
.grant-item:last-child .row{border-bottom:0}
.grant-item:has(.grant-edit:not([hidden])) .row{border-bottom:0}

/* ── forms ───────────────────────────────────────────────── */
/* daisyUI .input: a WHITE field, not a grey inset — the grey was Command's. */
input.field{flex:1;min-width:200px;padding:7px 12px;border-radius:var(--r);font-size:14px;line-height:20px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink)}
input.field::placeholder{color:color-mix(in srgb,currentColor 50%,transparent);opacity:1}
code.val{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── grouped lists (Access): a heading per group inside one card ── */
.sub-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 0 2px;
  padding-bottom:8px;border-bottom:1px solid var(--line);font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.card .sub-h:first-of-type{margin-top:0}
.card h2 .toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}

/* ── layout ──────────────────────────────────────────────── */
/* ── sidebar ───────────────────────────────────────────────
   The portal's rail, matched: 3.5rem of icons, expanding to 14rem on
   hover. The expansion OVERLAYS rather than pushing — the portal makes
   it absolute so the page beneath never reflows, which is what keeps a
   pointer crossing the rail from shoving the content it was heading
   for.

   Timings are the portal's too: slow to open (200ms delay, ease-in) so
   a pointer passing through does not trigger it, quicker to close. */
.shell{display:grid;grid-template-columns:56px 1fr;min-height:calc(100vh - 60px)}
.shell>nav{position:relative;z-index:30;width:56px}
/* White and lifted off the ground by shadow-lg at ALL times, with no border —
   the portal's rail is always a panel, not only while it is open. */
.shell>nav .rail{position:absolute;inset:0 auto 0 0;min-width:56px;max-width:56px;
  height:100%;overflow-x:hidden;overflow-y:auto;background:var(--panel);
  border-right:0;box-shadow:var(--shadow-lg);padding:10px 0;
  font-size:14px;line-height:20px;font-weight:500;color:var(--faint);
  transition:min-width .3s ease-out,max-width .3s ease-out}
.shell>nav:hover .rail{min-width:224px;max-width:224px;
  transition:min-width .2s ease-in .2s,max-width .2s ease-in .2s}
/* A drop shadow on a near-black ground is invisible, so in dark the rail
   would merge with the page. The hairline comes back there only. */
:root[data-theme="dark"] .shell>nav .rail{border-right:1px solid var(--line)}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
  .shell>nav .rail{border-right:1px solid var(--line)}
}}
/* Labels are hidden by width, not by display:none — the text stays in the
   accessibility tree, so the rail is navigable by screen reader while collapsed. */
.shell>nav .lbl{white-space:nowrap;opacity:0;transition:opacity .15s ease-out}
.shell>nav:hover .lbl{opacity:1;transition:opacity .2s ease-in .2s}
/* The portal has no group headings; its only separator is a teal hairline.
   Command keeps its groups (they are its information architecture) as that
   hairline when collapsed and a quiet label when open, at a constant height
   so nothing reflows as the rail expands. */
.shell>nav .grp{margin:8px 10px 0;padding:8px 8px 2px;height:34px;border-top:1px solid color-mix(in srgb,var(--secondary) 22%,var(--panel));
  font-size:11px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);overflow:hidden;white-space:nowrap}
/* Portal geometry: 36px rows, 6px padding, 20px icon with a 2px margin, a 24px
   icon-label gap, 6px radius — which centres the icon in the 56px rail. */
.shell>nav a{display:flex;align-items:center;gap:24px;margin:0 10px;padding:6px;min-width:0;position:relative;
  border-radius:var(--r-sm);color:inherit;text-decoration:none;font-weight:500;
  transition:color .2s cubic-bezier(0,0,.2,1),background-color .2s cubic-bezier(0,0,.2,1)}
.shell>nav a:hover{background:var(--line-2);color:var(--ink-2)}
/* Active: blue text and a 2px bar at the rail's outer edge — the portal draws it
   as the <li>'s right border; Command has no <li>, so it hangs off the link. */
.shell>nav a[aria-current="page"]{color:var(--accent);font-weight:500}
.shell>nav a[aria-current="page"]::after{content:"";position:absolute;top:0;bottom:0;right:-10px;
  width:2px;background:var(--accent)}
.shell>nav .ico{width:20px;height:20px;margin:2px;flex-shrink:0}
/* The way back to the portal, above Command's own modules and ruled off. */
.nav-portal{color:inherit}
.nav-rule{height:1px;background:color-mix(in srgb,var(--secondary) 22%,var(--panel));margin:6px 0 6px}

/* The portal's inset: 32px beside the title, 16px of rhythm above it. */
main{padding:8px 32px 72px 28px;min-width:0;background:var(--bg)}
.page-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:20px}
/* The portal's h1: text-xl, a 24px line, semibold, single-line. */
.page-head h1{font-size:20px;line-height:24px;font-weight:600;color:var(--ink)}
.page-head p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:20px}

/* ── cards + grid ────────────────────────────────────────── */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* CardEdgeOnMobile, in CSS: bg-base-100, shadow-sm, rounded-lg, p-6. No border —
   the portal separates cards from the ground with a shadow and a lighter page,
   not a hairline, and a border on top of that reads as a heavier product. */
.card{background:var(--panel);border:0;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:24px}
/* Three portal sources agree on an 18px, semibold panel heading. */
.card h2{font-size:18px;line-height:24px;color:var(--ink);font-weight:600;margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.card h2 a,.card h2 .s{font-size:14px;line-height:20px;font-weight:500}
.kpi .n{font-size:24px;line-height:32px;font-weight:700}
.kpi .lbl{color:var(--muted);font-size:14px;line-height:20px;margin-top:2px}
.kpi .delta{font-size:12px;line-height:16px;font-weight:600;margin-top:6px}
.up{color:var(--good-text)} .down{color:var(--bad-text)} .flat{color:var(--muted)}

/* ── rows, tables, bars ──────────────────────────────────── */
.row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row .main{flex:1;min-width:0}
.row .t{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s,.detail-h .s,.sub-h .s{font-size:12px;line-height:16px}
/* A profile label (the portal's dt) and an in-card group heading. Both were
   emitted by app.js with inline styles and no rule. */
.row .k{flex:none;min-width:96px;font-weight:500;color:var(--muted)}
.card .grp{margin:16px 0 4px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.card .grp:first-of-type{margin-top:6px}
.card .grp-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.card .grp-toggle:hover{color:var(--accent)}
.card .grp-toggle:focus-visible{border-radius:var(--r-sm)}
.card .grp-toggle .caret{color:var(--muted);font-size:12px;width:10px;flex:none}
.card .grp-acts{display:flex;justify-content:flex-end;margin:4px 0 -8px}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:7px}

/* ── the entity setup checklist (#766) ─────────────────────────────
   A registry row opens its own checklist in place. Inline rather than on its
   own route because the question being asked is comparative — "which of these
   five is furthest along?" — and answering it should not cost the list. */
.open-row{cursor:pointer;user-select:none}
.open-row:hover .t{color:var(--accent)}
.open-row:focus-visible{border-radius:var(--r-sm)}
.open-row .caret{color:var(--muted);font-size:12px;width:10px;flex:none}
.open-row.is-open{border-bottom:0}
.open-row.is-open .caret{color:var(--accent)}
/* Indented and tinted so the panel reads as belonging to the row above it
   rather than as more registry. */
.detail{margin:0 0 10px 22px;padding:10px 14px;border-left:2px solid var(--accent);
  background:var(--panel-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.detail-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.row.task{padding:7px 0}
.row.task .t{font-weight:500}
/* Confirmation chip: colour plus an icon and a label. Mission-critical items
   keep a calm red border until final green; the chip's own fill stays inside. */
.check-status{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px 8px;background:var(--panel);color:var(--ink-2);
  font-size:13px;line-height:18px}
.check-status .ico{font-weight:700;min-width:1.1em;text-align:center}
.check-status.confirmed{background:#fff6d6;border-color:#e8c860;color:#7a5a00}
.check-status.harper{background:#e6f4ea;border-color:#9fd3ae;color:#1e6b3a}
.check-status.final{background:#2e8b57;border-color:#2e8b57;color:#fff}
.check-status.final .ico{background:#fff;color:#2e8b57;border-radius:50%;width:1.15em;height:1.15em;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.check-status .mini{margin-left:4px;font-weight:600}
.check-status .mini.amber{color:#8a5a00}
.check-status .mini.red{color:#9b2c22}
.mc-mark{color:#9b2c22;font-weight:700;margin-right:6px}
.row.task.mission-open{border:4px solid #f3b4ae;border-radius:var(--r-sm);padding:7px 8px}
.bigstep.mission-open{border:4px solid #f3b4ae}
/* The definition wraps — it is a sentence that changes whether a task is done,
   not a label, and truncating it is how a task gets ticked early. */
.row.task .s{white-space:normal}

/* The checklist as a strip, in the collapsed row. One segment per step, in
   chronological order, so the gap's POSITION is visible — three steps missing
   at the start of formation is a different problem from three at the end, and
   a single percentage cannot tell you which you have. */
.strip-wrap{min-width:190px;text-align:right;flex:none}
.strip{display:flex;gap:2px;justify-content:flex-end;margin-bottom:5px}
.strip .sg{width:7px;height:13px;border-radius:2px;background:var(--line);flex:none}
.strip .sg.done{background:var(--good)}
.strip .sg.in_progress{background:var(--warn)}
.strip .sg.na{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
/* What to do next, computed from where the checklist stopped. Fixed width so
   the pills to its right stay in a column down the list rather than jittering
   with the length of each entity's next step. */
.nextcell{flex:1 1 130px;min-width:0;max-width:240px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Sentence case, as the portal labels everything: there is no 11px uppercase
   tracked label anywhere in it. */
.sec-h{margin:16px 0 4px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.sec-h:first-of-type{margin-top:4px}

/* ── facets ────────────────────────────────────────────────────────
   Chips rather than dropdowns: the whole point is seeing which values EXIST
   and which are selected without opening anything, and a multi-select dropdown
   hides both behind a click and a scroll. */
.facets{display:flex;flex-wrap:wrap;gap:7px 16px;align-items:center;
  margin:10px 0 2px;padding:10px 0 2px;border-top:1px solid var(--line-2)}
.facet{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.facet-l{font-size:12px;line-height:16px;font-weight:500;color:var(--muted);margin-right:2px}
.chip-f{font-size:12px;line-height:16px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer}
.chip-f:hover{border-color:var(--muted);color:var(--ink)}
.chip-f.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip-f.on:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}
.chip-f.clear{margin-left:auto;color:var(--muted);border-style:dashed}

/* ── the entity editor ─────────────────────────────────────────────
   Inside the same panel as the checklist, above it: the details are what the
   checklist is ABOUT, and making them a second place to go is how a category
   stays wrong for a year because fixing it was a detour. */
.detail-form{padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-2)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px 14px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
/* The portal's form label: text-sm, medium, gray-700, 4px above the field. */
.fld>span{font-size:14px;line-height:20px;font-weight:500;color:var(--muted)}
.fld .field,.fld select{width:100%;min-width:0;max-width:none;flex:none}
.detail-form>.fld{margin-top:9px}


.row.task.is-next .t{color:var(--ink)}
.row.task.is-next{background:var(--accent-soft);border-radius:var(--r-sm);
  padding-left:9px;padding-right:9px;margin:0 -9px}

/* Only give up the next step on a genuinely narrow window. 1024 is an ordinary
   laptop, and this column is the reason the row is worth reading. */
@media (max-width:820px){
  .nextcell{display:none}
  .strip-wrap{min-width:0}
}

.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
/* daisyUI badge-soft by hand: the status colour as a tint behind a darker word
   of the same hue. The old pills put the light status colour itself on white,
   which for amber was barely readable. 20px tall, the portal's badge-sm. */
.pill{font-size:12px;line-height:16px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);
  white-space:nowrap;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.pill.good{color:var(--good-text);border-color:color-mix(in srgb,var(--good) 45%,transparent);
  background:color-mix(in srgb,var(--good) 12%,var(--panel))}
.pill.warn{color:var(--warn-text);border-color:color-mix(in srgb,var(--warn) 50%,transparent);
  background:color-mix(in srgb,var(--warn) 14%,var(--panel))}
.pill.bad{color:var(--bad-text);border-color:color-mix(in srgb,var(--bad) 45%,transparent);
  background:color-mix(in srgb,var(--bad) 12%,var(--panel))}
.pill.info{color:var(--info-text);border-color:color-mix(in srgb,var(--info) 45%,transparent);
  background:color-mix(in srgb,var(--info) 12%,var(--panel))}

/* ── buttons ─────────────────────────────────────────────── */
/* daisyUI .btn by hand: a base-200 face, 8px radius, 14px semibold, 36px tall,
   and the .2s ease the portal uses on every control. Hover is a fixed darker
   step, not a brightness filter — a filter also dims the label. */
button,.btn{font-size:14px;line-height:20px;font-weight:600;cursor:pointer;border-radius:var(--r);
  padding:7px 16px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  transition:color .2s cubic-bezier(0,0,.2,1),background-color .2s cubic-bezier(0,0,.2,1),
    border-color .2s cubic-bezier(0,0,.2,1)}
button:hover,.btn:hover{background:color-mix(in srgb,var(--bg),var(--ink) 7%);color:var(--ink)}
button:active,.btn:active{translate:0 .5px}
button:disabled,.btn:disabled{cursor:not-allowed;color:color-mix(in srgb,var(--ink) 35%,transparent);
  background:color-mix(in srgb,var(--ink) 8%,transparent);border-color:transparent;translate:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}

/* ── notices ─────────────────────────────────────────────── */
.banner{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);margin-bottom:16px;font-size:14px;line-height:20px}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.banner.info{border-color:color-mix(in srgb,var(--info) 40%,transparent);
  background:color-mix(in srgb,var(--info) 8%,transparent)}
.banner.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);
  background:color-mix(in srgb,var(--bad) 8%,transparent)}
.empty{text-align:center;padding:34px 20px;color:var(--muted)}
.empty h3{font-size:14px;line-height:20px;font-weight:500;color:var(--ink);margin-bottom:4px}
.cards-todo{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.cards-todo a{font-size:12px;line-height:16px;font-weight:600;text-decoration:none;padding:4px 9px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel)}
code{background:color-mix(in srgb,var(--ink) 7%,transparent);padding:1.5px 5px;
  border-radius:4px;font-size:12px}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .shell>nav{display:flex;overflow-x:auto;gap:4px;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .shell>nav .grp{display:none}
  .shell>nav a{white-space:nowrap}
  main{padding:8px 16px 64px}
}

/* ── signed out ───────────────────────────────────────────────
   Matched to portal.togohealth.com/auth/signin: a grey ground, a
   large extrabold centred heading, then a roomy white card.

   The one deliberate difference is what is IN the card. The portal
   asks for an email and a password; Command must never do that, and
   the whole design of the handoff exists so it cannot. So the card
   holds the action that sends you to the portal to type them there.
   Same frame, same account, one honest difference. */
/* The ground is the app's own --bg now: #e9eaec was a third grey, next to the
   portal's #e9edf0 but not it, and it needed its own dark overrides. */
.auth-page{background:var(--bg);min-height:calc(100vh - 60px);margin:-8px -32px -72px -28px;
  padding:46px 20px 72px}
.auth{max-width:620px;margin:0 auto}
.auth-title{font-size:30px;font-weight:700;line-height:36px;
  text-align:center;color:var(--ink)}
.auth-card{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow-sm);
  padding:38px 40px;margin-top:30px}
.auth-card p{margin:0 0 12px;font-size:16px;line-height:24px}
.auth-card p:last-of-type{margin-bottom:0}
.auth-card .lbl{display:block;font-weight:600;font-size:14px;margin-bottom:8px;color:var(--ink)}
/* The portal's Sign in button: full width, primary, generous, dark label. */
.btn-auth{display:block;width:100%;text-align:center;text-decoration:none;
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--r);
  padding:14px 18px;font-size:16px;line-height:24px;font-weight:600;cursor:pointer}
.btn-auth:hover{background:var(--accent-2)}
.btn-quiet{display:block;width:100%;text-align:center;text-decoration:none;
  background:transparent;color:var(--accent);border:0;padding:13px;font-size:14px;
  font-weight:600;cursor:pointer}
.auth-note{margin-top:20px;font-size:14px;color:var(--muted);text-align:center}
@media(max-width:560px){ .auth-card{padding:26px 20px;border-radius:0}
  .auth-page{margin-left:-16px;margin-right:-16px;padding-left:0;padding-right:0}
  .auth-title{font-size:24px;line-height:32px} }

/* ═══════════════════════ ported pages (#962) ═══════════════════════════
   Components for the pages moved from the old Command Center, built from the
   same tokens so the ported pages read as this app, and modelled on the
   portal's own: its tab strip, its shared Table (base-300 header band,
   semibold 14px heads, muted cells, hairline dividers) and its right-hand
   ContentSidebar for detail. */

/* secondary + ghost buttons — the portal's SecondaryButton and btn-ghost */
.btn-secondary{background:var(--panel);color:var(--ink-2);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--panel-2);color:var(--ink)}
.btn-ghost{background:transparent;border-color:transparent;padding:5px 9px}
.btn-ghost:hover{background:var(--line-2)}
a.btn-primary,a.btn-secondary{display:inline-flex;align-items:center;text-decoration:none;border:1px solid}
a.btn-primary{border-color:var(--accent)}
.bad{color:var(--bad-text)}
.warn-text{color:var(--warn-text)}

/* tabs — an underlined strip, the active tab in the accent */
.tabs{display:flex;gap:4px;overflow-x:auto;margin:0 0 16px;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:9px 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--muted);
  font-weight:500;text-decoration:none;white-space:nowrap;border-radius:var(--r-sm) var(--r-sm) 0 0}
.tabs a:hover{color:var(--ink);background:var(--line-2)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-n{font-size:12px;color:var(--muted);margin-left:4px}

/* a card whose content runs edge to edge (tables) */
.card.flush{padding:0;overflow:hidden}
.card.flush>.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 12px}
.card.flush>.card-h h2{margin:0}
.pad{padding:14px 20px}

/* toolbar above a table */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.toolbar .sp{flex:1}
.toolbar .search{flex:1 1 240px;min-width:180px;max-width:380px}
.card:not(.flush)>.toolbar{padding:0 0 12px;border-bottom:0}

/* the table */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.tbl thead th{position:sticky;top:0;background:var(--panel-3);color:var(--ink);font-weight:600;text-align:left;
  padding:9px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top;white-space:nowrap}
.tbl td b{color:var(--ink);font-weight:600}
.tbl td .s{font-size:12px;line-height:16px;white-space:normal}
.tbl td.wrap,.tbl td.s{white-space:normal;max-width:420px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--panel-2)}
.tbl tr.click:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.tbl-msg{text-align:center!important;color:var(--muted)!important;padding:28px 12px!important;white-space:normal!important}
.tbl.compact td,.tbl.compact th{padding:7px 10px}
.card .tbl.compact{margin:8px 0}
.tbl tr.win td{background:color-mix(in srgb,var(--good) 8%,var(--panel))}
.tbl tr.lose td{background:color-mix(in srgb,var(--bad) 7%,var(--panel))}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--line-2)}

/* small value treatments */
.stars{color:var(--warn);letter-spacing:1px;white-space:nowrap}
.stars .off{color:var(--line)}
.score{display:inline-block;min-width:34px;text-align:center;padding:1px 7px;border-radius:var(--r-pill);
  font-weight:700;font-size:12px;background:var(--panel-2);color:var(--ink-2)}
.score.md{background:color-mix(in srgb,var(--warn) 18%,var(--panel));color:var(--warn-text)}
.score.hi{background:color-mix(in srgb,var(--good) 18%,var(--panel));color:var(--good-text)}

/* the drawer — the portal's ContentSidebar, sliding in from the right */
.veil{position:fixed;inset:0;background:rgb(0 0 0/.25);z-index:60;animation:fade .15s ease-out}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,94vw);z-index:61;background:var(--panel);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slide .2s ease-out}
.drawer-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 12px;
  border-bottom:1px solid var(--line-2)}
.drawer-h h2{font-size:18px;line-height:24px}
.drawer-b{overflow-y:auto;padding:14px 20px 32px}
@keyframes slide{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dl{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:6px 14px;margin:6px 0 4px}
.dl dt{color:var(--muted);font-weight:500}
.dl dd{margin:0;color:var(--ink);word-break:break-word}
.kpis3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpis3>div{background:var(--panel-2);border-radius:var(--r);padding:10px;text-align:center}
.kpis3 b{display:block;font-size:20px;line-height:28px}
.kpis3 span{font-size:12px;color:var(--muted)}
.mini{list-style:none;margin:4px 0;padding:0}
.mini li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.mini li:last-child{border-bottom:0}

/* tinted KPI tile — the portal's TasksDashboard tile, derived from tokens */
.kpi.tint{background:color-mix(in srgb,var(--accent) 7%,var(--panel));border-radius:var(--r);padding:14px 16px}
.kpi.tint .n{font-size:22px;line-height:28px}

/* documents */
.doc{padding:32px 36px}
.eyebrow{font-size:12px;font-weight:600;color:var(--accent);margin:0 0 4px}
.doc-title{font-size:26px;line-height:34px;font-weight:700;margin:0 0 10px;color:var(--ink)}
.lede{font-size:16px;line-height:24px;color:var(--ink-2);max-width:72ch}
.doc-meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:12px;margin:10px 0 16px}
.doc-sec{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-2)}
.doc-sec h2{font-size:20px;line-height:28px;margin:0 0 10px}
.doc-sec p{max-width:78ch}
.doc-h3{font-size:16px;margin:14px 0 4px}
.doc-ul{margin:6px 0 10px;padding-left:20px}
.doc-ul li{margin:3px 0}
blockquote{margin:10px 0;padding:8px 14px;border-left:3px solid var(--accent);color:var(--ink-2);background:var(--panel-2)}
.callout{background:var(--panel-2);border-radius:var(--r);padding:12px 14px;margin:10px 0;border-left:3px solid var(--accent)}
.callout h4{margin:0 0 4px;font-size:14px}
.callout p{margin:4px 0}
.callout .k{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.callout.warn{border-left-color:var(--warn)}
.callout.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--panel))}
.callout.good{border-left-color:var(--good)}
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:10px 0}
.phase{background:var(--panel-2);border-radius:var(--r);padding:12px}
.phase .ph{display:block;font-size:12px;color:var(--accent);font-weight:600}
.phase p{margin:6px 0 0;font-size:13px}
.doc-foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}
.doc-foot p{margin:4px 0}
.matrix{display:grid;grid-template-columns:auto repeat(3,1fr);gap:8px;margin:8px 0;overflow-x:auto}
.mx-h{font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:4px}
.mx-h.row{justify-content:flex-end;align-items:center;text-align:right}
.mx-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;min-height:96px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);font-weight:500}
.mx-cell .cnt{font-size:24px;line-height:28px;font-weight:700;color:var(--ink)}
.mx-cell.good{background:color-mix(in srgb,var(--good) 12%,var(--panel))}
.mx-cell.info{background:color-mix(in srgb,var(--info) 12%,var(--panel))}
.mx-cell.warn{background:color-mix(in srgb,var(--warn) 14%,var(--panel))}
.mx-cell.prize{outline:2px solid var(--accent);outline-offset:1px}
.mx-cell.on{box-shadow:inset 0 0 0 2px var(--ink)}

/* facilities */
.reg{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.staff{min-width:72px;text-align:right;font-size:12px;color:var(--muted);flex:none}
.staff b{color:var(--ink);font-size:14px}
.staff .bar{margin-top:4px}
.roster-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}
.roster-tools .fld{flex:1 1 220px}
.add-contact{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.add-contact .field{flex:1 1 140px;min-width:120px}
.actions{display:flex;gap:10px;align-items:center;margin-top:10px}

/* deal model */
.split{display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--line-2);margin:6px 0}
.split i{display:block;height:100%}
.split .c,.dot.c{background:var(--accent)}
.split .st,.dot.st{background:var(--warn)}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:middle}
.fld input[type=range]{width:100%;accent-color:var(--accent)}
.vs-a{border-top:3px solid var(--accent)}
.vs-b{border-top:3px solid var(--warn)}

/* playbook */
.pb-step{border-top:1px solid var(--line-2);padding:8px 0}
.pb-row{display:flex;align-items:center;gap:8px;cursor:pointer}
.pb-row .sn{min-width:22px;color:var(--muted);font-size:12px;text-align:right}
.pb-row .tt{flex:1;font-weight:500}
.pb-step.on .tt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.pb-step details{margin:4px 0 0 52px}
.pb-step summary{cursor:pointer}
.rule{border-bottom:1px solid var(--line-2)}
.rule h3{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.link-card{display:block;text-decoration:none;font-weight:600;margin-bottom:10px}
.num-in{width:72px!important;min-width:0!important;flex:none!important}
#cl-edit .field{min-width:0;width:100%}

@media (max-width:760px){
  .doc{padding:20px 16px}
  .matrix{grid-template-columns:auto repeat(3,minmax(110px,1fr))}
  .dl{grid-template-columns:1fr}
  .dl dt{margin-top:6px}
}
.hl-bad{color:var(--bad-text);font-weight:600}
.hl-good{color:var(--good-text);font-weight:600}

/* ── Business → Insurance ─────────────────────────────────────────── */
.ins-ans h4{margin:2px 0 6px}
.ins-ans.good{border-left-color:var(--good)}
.ins-ans.warn{border-left-color:var(--warn)}
.ins-ans.bad{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--panel))}
.ins-ans.info{border-left-color:var(--info)}
.ins-mx td{white-space:normal;min-width:150px}
.ins-mx td:first-child{min-width:200px}
.ins-mx .grp-row td{background:var(--panel-2);font-size:12px;line-height:16px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:6px 12px}
.ins-mx td .s{margin-top:4px;max-width:320px}
.ins-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 8px}
.ins-dl dt{color:var(--muted);font-size:14px;line-height:20px}
.ins-dl dd{margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.ins-steps{margin:0 0 10px;padding-left:20px;display:grid;gap:6px}
.ins-line{margin:0 0 6px}
.setup-note{margin-top:6px;width:100%;max-width:560px;font-size:13px;padding:5px 9px}
.row.task .note{margin-top:4px;color:var(--ink-2)}
@media (max-width:640px){.ins-dl{grid-template-columns:1fr}.ins-dl dt{margin-top:4px}}
.add-note{border:0;background:none;padding:2px 0;margin-top:4px;font:inherit;font-size:12px;line-height:16px;
  font-weight:600;color:var(--accent);cursor:pointer}
.add-note:hover{text-decoration:underline}

/* ── Records (CRM phase 1) ── */
.rec-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.rec-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.rec-grid .card{margin-bottom:14px}
.rec-tools,.rec-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rec-kanban{display:flex;gap:10px;padding:0 20px 20px}
.rec-col{flex:1;background:var(--panel-2);border-radius:var(--r);padding:10px;min-height:120px}
.rec-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin-top:8px}
.rec-tl{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line)}
.rec-tl li{margin-bottom:10px}
.rec-list{margin:0;padding-left:18px}
.rec-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.rec-node{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;min-width:190px;box-shadow:var(--shadow-sm)}
.rec-node.root{border:2px solid var(--accent)}
.rec-node a{color:var(--ink);text-decoration:none}
.rec-link{text-align:center;color:var(--faint);margin:6px 0}
.rec-blocked td{background:color-mix(in srgb,var(--bad) 12%,transparent)}
@media (max-width:900px){.rec-grid{grid-template-columns:1fr}}
/* ── Providers: pipeline kanban and the big-step onboarding checklist ── */
.kanban{display:flex;gap:12px;overflow-x:auto;margin-top:12px;align-items:flex-start}
.kcol{min-width:220px;flex:0 0 220px;background:var(--panel-2);border-radius:var(--r);padding:10px}
.kcol h3{margin:0 0 8px;font-size:14px}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:8px}
.kname{font-weight:600}
.bigsteps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bigstep{border:2px solid var(--line);border-radius:var(--r);padding:14px;min-height:110px;background:var(--panel)}
.bigstep .bigmark{font-size:34px;line-height:40px;height:40px;font-weight:700}
.bigstep .biglabel{font-weight:600;margin-top:6px}
.bigstep.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--panel))}
.bigstep.good .bigmark{color:var(--good-text)}
.bigstep.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--panel))}
.bigstep.warn .bigmark{color:var(--warn-text)}
.bigstep.empty{background:var(--panel-3);border-color:var(--line)}
.bigstep.na{border-style:dashed;color:var(--muted)}

/* ── Project tracker ── */
.dt-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.dt-tab{font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;background:var(--panel)}
.dt-tab.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.dt-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin:8px 0 12px}
.dt-head h2{margin:0;font-size:18px}
.dt-jumps{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.dt-sec{margin:16px 0;padding-top:8px;border-top:1px solid var(--line)}
.dt-sec h3{margin:0 0 6px;font-size:16px;display:flex;align-items:center;gap:6px}
.dt-sec .sec-toggle{padding:0 6px}
.dt-sec.sec-collapsed .dt-body{display:none}
.dt-sec.sec-collapsed .sec-toggle{transform:rotate(-90deg)}
.dt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:8px 0 12px}
.dt-stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.dt-stat .n{font-size:20px;font-weight:700}
.dt-stat .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dt-umbrella{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.dt-sec h4{margin:10px 0 4px;font-size:14px}
.dt-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}
.dt-filters select,.dt-filters input,.dt-dialog input,.dt-dialog textarea,.dt-dialog select{
  font:inherit;padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--panel);color:var(--ink)}
.dt-table{overflow-x:auto}
.dt-table table{width:100%;border-collapse:collapse;font-size:13px}
.dt-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:6px 8px;border-bottom:1px solid var(--line)}
.dt-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.dt-table .num{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.dt-table .acts{display:flex;flex-wrap:wrap;gap:4px;min-width:180px}
.dt-dots{display:inline-flex;gap:3px}
.dt-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);display:inline-block}
.dt-dots i.on{background:var(--warn)}
.dt-bar{display:flex;width:140px;height:10px;padding:0;border-radius:99px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2)}
.dt-bar i{display:block;height:100%}
.dt-bar .base{background:var(--good)}
.dt-bar .done{background:var(--accent)}
.dt-bar .rest{background:var(--line)}
.dt-bar .test{background:repeating-linear-gradient(45deg,var(--line-strong),var(--line-strong) 2px,transparent 2px,transparent 4px)}
.dt-bar .opt{background:repeating-linear-gradient(45deg,var(--warn),var(--warn) 2px,transparent 2px,transparent 4px)}
.dt-modal{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 40%,transparent);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
.dt-dialog{background:var(--panel);color:var(--ink);border-radius:var(--r);padding:16px;width:min(560px,100%);max-height:86vh;overflow:auto;box-shadow:var(--shadow)}
.dt-dialog h3{margin:0 0 10px}
.dt-dialog label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:8px 0}
.dt-dialog input,.dt-dialog textarea,.dt-dialog select{width:100%;box-sizing:border-box;margin-top:4px}
.dt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.dt-notes{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.dt-note{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px}
.dt-note p{margin:4px 0}
.dt-envs,.dt-rules,.dt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
.dt-envs div,.dt-rules div,.dt-hub{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--panel);text-decoration:none;color:inherit}
.dt-steps{margin:0;padding-left:18px}
.dt-steps li{margin:8px 0}
.dt-tiles{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.dt-tile{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:8px 12px;min-width:120px;background:var(--panel)}
.dt-tile .hh{font-size:20px;font-weight:700}
.dt-hub .letter{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.dt-toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:8px 14px;border-radius:var(--r-pill);font-size:13px;z-index:40}
@media (max-width:700px){.dt-grid{grid-template-columns:1fr}.dt-head{flex-direction:column;align-items:stretch}}
.dt-chips{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.dt-chip{font:inherit;font-size:12px;line-height:16px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2);cursor:pointer}
.dt-chip:hover{border-color:var(--muted);color:var(--ink)}
.dt-all-clear{padding:8px 12px;border:1px solid color-mix(in srgb,var(--good) 45%,transparent);border-radius:var(--r-sm)}
.dt abbr[title]{text-decoration:underline dotted;cursor:help}