/* ===========================================================================
   Artemis Ascend — Klaviyo-style design system
   ---------------------------------------------------------------------------
   Layout is a two-column app shell: a permanently dark left rail and a light
   content column that follows the light/dark toggle. The rail collapses to
   icons on desktop and turns into an off-canvas drawer below 1024px.
   Everything else in here is tokens first, components second -- no component
   invents its own colour.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */

:root {
  /* Brand. The lime and the near-black are the whole identity -- lime pops
     hard against the permanently-dark rail, exactly like Klaviyo's own
     product chrome. Every other colour in the file is a neutral or a status
     tint. */
  --lime: #c6f135;
  --lime-hover: #d3fa53;
  --lime-press: #b3dc21;
  --ink: #0b0b0c;

  /* A handful of chips (the topbar avatar, the guide's stage pill, the
     walkthrough's spotlight ring) sit on a background that stays --ink
     regardless of theme, or need to read against both a white and a dark
     content panel at once. --pop is the one accent colour that does not flip
     with the toggle, reserved for exactly those spots -- everywhere else
     "active/positive" uses the theme-aware --ok below. */
  --pop: var(--lime);
  --pop-ink: var(--ink);

  /* Content surfaces. A neutral near-white page so white cards read as
     raised with a hairline border rather than a warm tint or a shadow. */
  --bg: #fafafa;
  --panel: #ffffff;
  --panel-2: #f5f5f5;
  --panel-3: #ebebeb;
  --line: rgba(0,0,0,.08);
  --line-strong: rgba(0,0,0,.16);
  --text: #1d1d1f;
  --text-2: #48484a;
  --muted: #6e6e73;

  --accent: var(--lime);
  --accent-hover: var(--lime-hover);
  --accent-press: var(--lime-press);
  --accent-ink: var(--ink);

  /* Status. Each has a foreground, a tint background, a border tint, and an
     "ink" -- the text colour to put ON TOP of a solid fill of the foreground.
     Needed because --ok inverts in dark mode (dark green on white becomes
     bright mint on dark), so the text sitting on a solid --ok chip has to
     invert with it or the contrast fails. */
  --ok: #16794a;
  --ok-bg: #e6f5ec;
  --ok-line: rgba(22,121,74,.22);
  --ok-ink: #ffffff;
  --warn: #9a5a06;
  --warn-bg: #fdf2e0;
  --warn-line: rgba(154,90,6,.22);
  --crit: #c22e2a;
  --crit-bg: #fdecea;
  --crit-line: rgba(194,46,42,.22);
  --info: #2f6fed;
  --info-bg: #eaf1fe;
  --info-line: rgba(47,111,237,.22);

  /* Chart palette -- six categorical hues, tuned to read clearly on both a
     white and a dark panel so they don't need a per-theme override. */
  --chart-1: #2f6fed;
  --chart-2: #22b573;
  --chart-3: #f0a93c;
  --chart-4: #ef6a8b;
  --chart-5: #8b7cf0;
  --chart-6: #2bb6c9;

  /* The rail is the same near-black in both themes -- it is brand furniture,
     not a content surface, so it does not follow the light/dark toggle. */
  --side-bg: #0b0b0c;
  --side-raised: #17171a;
  --side-active: #212125;
  --side-text: #f5f5f2;
  --side-muted: #93938c;
  --side-line: rgba(255,255,255,.10);
  --side-line-strong: rgba(255,255,255,.22);

  /* Neutral chip that must stay legible in both themes. */
  --chip-ink: #0b0b0c;
  --chip-ink-text: #ffffff;

  /* Shape & depth */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --radius: var(--r-md);          /* legacy aliases still used by components */
  --radius-sm: var(--r-sm);
  --shadow-1: 0 1px 2px rgba(11,11,12,.04);
  --shadow-2: 0 12px 32px rgba(11,11,12,.10), 0 2px 8px rgba(11,11,12,.06);
  --shadow-3: 0 24px 64px rgba(11,11,12,.18);

  /* Rhythm */
  --gap: 16px;
  --pad-x: 40px;

  /* Shell geometry. --rail-w is what the grid actually reads; the two values
     below it are the open and collapsed widths it swaps between. */
  --rail-open: 268px;
  --rail-closed: 76px;
  --rail-w: var(--rail-open);
  --topbar-h: 60px;

  --ease: cubic-bezier(.4,0,.2,1);
}

:root[data-rail="collapsed"] { --rail-w: var(--rail-closed); }

:root[data-theme="dark"] {
  --bg: #0f0f10;
  --panel: #171719;
  --panel-2: #202023;
  --panel-3: #2a2a2e;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);
  --text: #f3f3f0;
  --text-2: #cfcfc9;
  --muted: #999992;
  --blue: #5b8def;
  --blue-hover: #79a3f2;
  --blue-press: #3f6fd8;
  --chart-1: #5b8def;
  --chart-2: #34d399;
  --chart-3: #f0b95c;
  --chart-4: #f386a3;
  --chart-5: #a396f5;
  --chart-6: #4bc9db;
  --ok: #4ed588;
  --ok-bg: rgba(78,213,136,.14);
  --ok-line: rgba(78,213,136,.28);
  --ok-ink: #0b0b0c;
  --warn: #f0a93c;
  --warn-bg: rgba(240,169,60,.14);
  --warn-line: rgba(240,169,60,.28);
  --crit: #ff6257;
  --crit-bg: rgba(255,98,87,.14);
  --crit-line: rgba(255,98,87,.28);
  --info: #5b8def;
  --info-bg: rgba(91,141,239,.14);
  --info-line: rgba(91,141,239,.28);
  --chip-ink: #f3f3f0;
  --chip-ink-text: #0b0b0c;
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 12px 32px rgba(0,0,0,.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,.60);
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll-lock applied while the mobile drawer or the palette is open. */
body.no-scroll { overflow: hidden; }

h1 { font-size: clamp(22px, 2.4vw, 27px); margin: 0 0 6px; font-weight: 640; letter-spacing: -.022em; line-height: 1.22; }
h2 { font-size: 17px; margin: 44px 0 16px; font-weight: 640; letter-spacing: -.012em; line-height: 1.35; }
h2:first-child { margin-top: 0; }
h3 { font-size: 14.5px; margin: 0 0 10px; font-weight: 640; letter-spacing: -.008em; }

p { margin: 0 0 12px; }

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
  transition: text-decoration-color .12s var(--ease);
}
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------------------
   3. App shell
   --------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  transition: grid-template-columns .22s var(--ease);
}

.content-col { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

/* The scrim only exists for the mobile drawer. */
.scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(11,11,12,.44);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s var(--ease);
}
.scrim.show { opacity: 1; }

/* ---------------------------------------------------------------------------
   4. Left rail
   --------------------------------------------------------------------------- */

.sidebar {
  position: sticky; top: 0; z-index: 40;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--side-bg);
  border-right: 1px solid var(--side-line);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--side-text) 16%, transparent) transparent;
}
.sidebar > * { flex: none; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--side-text) 14%, transparent); border-radius: 99px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--side-text) 24%, transparent); }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* --- brand --- */
.brand {
  display: flex; align-items: center; gap: 8px;
  padding: 18px 16px 12px;
  min-height: var(--topbar-h);
}
.brand-link {
  display: flex; align-items: center; gap: 11px;
  flex: 1; min-width: 0;
  text-decoration: none; color: var(--side-text);
  border-radius: var(--r-sm); padding: 2px;
}
.brand-link:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--lime); color: var(--ink);
  font-weight: 800; font-size: 13px; letter-spacing: -.02em;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-size: 14px; font-weight: 640; letter-spacing: -.012em;
  color: var(--side-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: 10.5px; font-weight: 560; letter-spacing: .06em; text-transform: uppercase;
  color: var(--side-muted); margin-top: 2px; white-space: nowrap;
}

.rail-toggle {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--side-muted); cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.rail-toggle:hover { background: var(--side-raised); color: var(--side-text); }
.rail-toggle svg { width: 18px; height: 18px; transition: transform .22s var(--ease); }
:root[data-rail="collapsed"] .rail-toggle svg { transform: rotate(180deg); }

/* --- search launcher --- */
.nav-search {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 24px); margin: 0 12px 14px;
  padding: 8px 10px;
  border: 1px solid var(--side-line); border-radius: var(--r-sm);
  background: var(--side-raised); color: var(--side-muted);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.nav-search:hover { border-color: var(--side-line-strong); color: var(--side-text); }
.nav-search svg { width: 16px; height: 16px; flex: none; }
.nav-search span { flex: 1; min-width: 0; white-space: nowrap; }
.nav-search kbd {
  font: inherit; font-size: 10.5px; font-weight: 600;
  padding: 2px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--side-text) 8%, transparent); color: var(--side-muted);
  border: 1px solid var(--side-line);
}

.sidebar-status { padding: 0 16px 14px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  font-size: 11px; font-weight: 640; line-height: 1.3;
  color: var(--ok-ink); background: var(--ok);
  border-radius: 999px; padding: 5px 10px;
}
.status-pill svg { width: 12px; height: 12px; flex: none; }
.status-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill.warning, .status-pill.high { color: var(--warn); background: var(--warn-bg); }
.status-pill.breach, .status-pill.critical { color: var(--crit); background: var(--crit-bg); }

/* --- nav --- */
.nav-groups { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.nav-label {
  font-size: 10px; font-weight: 660; letter-spacing: .08em; text-transform: uppercase;
  color: var(--side-muted);
  padding: 14px 20px 7px;
}
.nav-rule { display: none; height: 1px; margin: 10px 18px; background: var(--side-line); }

nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--side-text); text-decoration: none;
  transition: background .14s var(--ease);
}
nav a:hover { background: var(--side-raised); text-decoration: none; }
nav a.active { background: var(--side-active); }
/* The lime marker sits inside the pill so it survives the collapsed rail. */
nav a.active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  border-radius: 0 3px 3px 0; background: var(--lime);
}

.nav-icon { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--side-muted); transition: color .14s var(--ease); }
.nav-icon svg { width: 18px; height: 18px; display: block; }
nav a:hover .nav-icon { color: var(--side-text); }
nav a.active .nav-icon { color: var(--lime); }

.nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.nav-text b { font-size: 13px; font-weight: 580; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-text small { font-size: 11px; font-weight: 450; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav a.active .nav-text small { color: color-mix(in srgb, var(--side-text) 62%, transparent); }

/* --- footer --- */
.sidebar-foot { margin-top: auto; padding: 14px 16px 20px; }
.cta-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: 13.5px; font-weight: 650; text-decoration: none;
  white-space: nowrap;
  transition: background .14s var(--ease), transform .06s var(--ease);
}
.cta-button:hover { background: var(--accent-hover); text-decoration: none; }
.cta-button:active { transform: scale(.985); }
.cta-button svg { width: 16px; height: 16px; flex: none; }

.disclaimer { font-size: 10.5px; line-height: 1.6; color: var(--side-muted); margin: 16px 0 0; }
.powered-by { font-size: 10px; color: var(--side-muted); opacity: .68; margin: 10px 0 0; }

/* --- collapsed rail (desktop only) --- */
@media (min-width: 1024px) {
  :root[data-rail="collapsed"] .brand { justify-content: center; padding: 18px 8px 12px; }
  :root[data-rail="collapsed"] .brand-link { flex: none; }
  :root[data-rail="collapsed"] .brand-text,
  :root[data-rail="collapsed"] .rail-toggle,
  :root[data-rail="collapsed"] .nav-search span,
  :root[data-rail="collapsed"] .nav-search kbd,
  :root[data-rail="collapsed"] .nav-text,
  :root[data-rail="collapsed"] .nav-label,
  :root[data-rail="collapsed"] .sidebar-status,
  :root[data-rail="collapsed"] .cta-button span,
  :root[data-rail="collapsed"] .disclaimer,
  :root[data-rail="collapsed"] .powered-by { display: none; }

  :root[data-rail="collapsed"] .nav-rule { display: block; }
  :root[data-rail="collapsed"] .nav-search { justify-content: center; padding: 9px 0; }
  :root[data-rail="collapsed"] nav a { justify-content: center; padding: 10px 0; }
  :root[data-rail="collapsed"] .cta-button { padding: 11px 0; }
  :root[data-rail="collapsed"] .sidebar-foot { padding: 14px 12px 20px; }

  /* Tooltips replace the labels that just disappeared. */
  :root[data-rail="collapsed"] nav a::after,
  :root[data-rail="collapsed"] .nav-search::after,
  :root[data-rail="collapsed"] .cta-button::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) scale(.96);
    padding: 6px 10px; border-radius: var(--r-xs);
    background: var(--ink); color: #fff;
    font-size: 12px; font-weight: 560; white-space: nowrap;
    box-shadow: var(--shadow-2);
    opacity: 0; pointer-events: none;
    transition: opacity .12s var(--ease), transform .12s var(--ease);
    z-index: 60;
  }
  :root[data-rail="collapsed"] .nav-search,
  :root[data-rail="collapsed"] .cta-button { position: relative; }
  :root[data-rail="collapsed"] nav a:hover::after,
  :root[data-rail="collapsed"] .nav-search:hover::after,
  :root[data-rail="collapsed"] .cta-button:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ---------------------------------------------------------------------------
   5. Topbar
   --------------------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--topbar-h);
  padding: 10px var(--pad-x);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }

.topbar-search-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; padding: 0 24px; }
.topbar-search {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 420px;
  padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.topbar-search:hover { border-color: var(--line-strong); background: var(--panel); color: var(--text); }
.topbar-search svg { width: 16px; height: 16px; flex: none; }
.topbar-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search kbd {
  font: inherit; font-size: 10.5px; font-weight: 620;
  padding: 3px 6px; border-radius: 4px; flex: none;
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
}
@media (max-width: 860px) {
  .topbar-search-wrap { padding: 0 8px; }
  .topbar-search span, .topbar-search kbd { display: none; }
  .topbar-search { width: auto; padding: 9px; }
}
@media (max-width: 620px) { .topbar-search-wrap { display: none; } }

.page-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.page-icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line);
}
.page-icon svg { width: 17px; height: 17px; }
.page-title { font-size: 15px; font-weight: 640; letter-spacing: -.014em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.icon-btn {
  width: 34px; height: 34px; padding: 0; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text); cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.icon-btn:hover { background: var(--panel-2); border-color: var(--line-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-btn { display: none; }

/* --- user menu --- */
.menu-wrap { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 560; cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.user-btn:hover { background: var(--panel-2); border-color: var(--line-strong); }
.avatar {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--lime);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.user-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn .chev { width: 14px; height: 14px; color: var(--muted); flex: none; }

.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 232px; padding: 6px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); box-shadow: var(--shadow-2);
  animation: menu-in .14s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head b { display: block; font-size: 13px; font-weight: 620; }
.menu-head small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: var(--r-xs);
  background: none; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
}
.menu button:hover { background: var(--panel-2); }
.menu button svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.menu hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; }
.menu button.danger { color: var(--crit); }
.menu button.danger svg { color: var(--crit); }

/* ---------------------------------------------------------------------------
   6. Main content
   --------------------------------------------------------------------------- */

main {
  width: 100%; margin: 0 auto;
  padding: 32px var(--pad-x) 96px;
  min-width: 0;
}
main:focus { outline: none; }
.loading { color: var(--muted); padding: 40px 0; font-size: 14px; }
.sub { color: var(--muted); margin: 0 0 28px; font-size: 14px; line-height: 1.7; max-width: 74ch; }

/* The dashboard preamble — reads as a briefing, not a card. */
.plain-summary {
  padding: 0 0 26px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.plain-summary p {
  margin: 0 0 12px; max-width: 76ch;
  font-size: 15px; line-height: 1.72; color: var(--text-2);
}
.plain-summary p:last-child { margin-bottom: 0; color: var(--text); }
.plain-summary b { font-weight: 640; color: var(--text); }

/* ---------------------------------------------------------------------------
   7. Cards, grids, KPIs
   --------------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
  min-width: 0;
}

.grid { display: grid; gap: var(--gap); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
  min-width: 0;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.kpi:hover { border-color: var(--line-strong); }
.kpi .label { font-size: 12px; font-weight: 560; color: var(--muted); letter-spacing: -.002em; }
.kpi .value {
  font-size: 24px; font-weight: 660; letter-spacing: -.024em;
  margin-top: 8px; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi .note { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.kpi .note .badge { margin-left: 2px; }

.meter { height: 6px; margin-top: 12px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; transition: width .4s var(--ease); }
.meter i.ok { background: var(--ok); }
.meter i.warning { background: var(--warn); }
.meter i.breach { background: var(--crit); }

/* ---------------------------------------------------------------------------
   8. Badges & pills
   --------------------------------------------------------------------------- */

.badge {
  display: inline-block; padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 620; line-height: 1.45;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::first-letter { text-transform: uppercase; }
.badge.ok { color: var(--ok-ink); background: var(--ok); }
.badge.warning, .badge.high { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.badge.breach, .badge.critical { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
.badge.info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }

/* Per-company colour coding. Fixed hues that do not follow the light/dark
   toggle -- like --pop, these are brand identity for a specific entity, not a
   status tint, so they need to stay recognisable in both themes rather than
   invert with them. */
.company-EasyMeds { --company: #0f9488; --company-ink: #ffffff; }
.company-LucentLabs { --company: #7c4fe0; --company-ink: #ffffff; }
.company-MAIN { --company: #e04e2d; --company-ink: #ffffff; }

.entity-tag {
  display: inline-block; padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 650; line-height: 1.45;
  color: var(--company-ink, #fff); background: var(--company, var(--muted));
  white-space: nowrap;
}

/* A compact dot for spots that already carry their own label text (tabs,
   diagram card titles) -- colour-coded without doubling up on the name. */
.entity-dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--company, var(--muted));
  flex: none; vertical-align: middle;
}

/* Same dot, drawn as an SVG <circle> inside the "how your group works" diagram. */
.sd-dot { fill: var(--company, var(--muted)); }

/* ---------------------------------------------------------------------------
   9. Tables
   --------------------------------------------------------------------------- */

/* Wide tables scroll inside their own box rather than pushing the page
   sideways. app.js wraps every table in main with .table-scroll after render. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px;
  padding: 0 2px;
  scrollbar-width: thin;
}
.table-scroll > table { min-width: 520px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: 10.5px; font-weight: 660; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding-top: 4px; white-space: nowrap;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }

/* ---------------------------------------------------------------------------
   10. Forms
   --------------------------------------------------------------------------- */

label { display: block; font-size: 12.5px; font-weight: 520; color: var(--muted); margin-bottom: 6px; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text);
  font: inherit; font-size: 14px;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
/* 16px on touch keeps iOS Safari from zooming the viewport on focus. */
@media (pointer: coarse) { input, select, textarea { font-size: 16px; } }

input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--text); }
input[type=file] { padding: 8px; }
textarea { min-height: 76px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d6d68' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 34px;
}

.field { margin-bottom: 18px; }
.field .hint, .hint { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px 22px;
}
.form-grid label { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.form-grid label input, .form-grid label select { width: 100%; margin-top: 7px; }

.inline-field { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.inline-field select, .inline-field input { min-width: 170px; display: block; margin-top: 6px; }

.help-icon {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line);
  font-size: 10px; font-weight: 700; cursor: help;
  margin-left: 4px; vertical-align: 1px;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.help-icon:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ---------------------------------------------------------------------------
   11. Buttons
   --------------------------------------------------------------------------- */

button {
  font: inherit; font-size: 13.5px; font-weight: 570;
  padding: 9px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text);
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .06s var(--ease);
}
button:hover { background: var(--panel-2); border-color: var(--muted); }
button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

button.primary { background: var(--chip-ink); color: var(--chip-ink-text); border-color: transparent; }
button.primary:hover { background: color-mix(in srgb, var(--chip-ink) 86%, var(--muted)); border-color: transparent; }

button.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
button.accent:hover { background: var(--accent-hover); border-color: transparent; }

button.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
button.ghost:hover { background: var(--panel-2); border-color: transparent; color: var(--text); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   12. Alerts, checks, doc lists
   --------------------------------------------------------------------------- */

.alert {
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 15px 18px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.6;
}
.alert .t { font-weight: 650; margin-bottom: 3px; }
.alert.critical { background: var(--crit-bg); border-color: var(--crit-line); color: color-mix(in srgb, var(--crit) 78%, var(--text)); }
.alert.high, .alert.warning { background: var(--warn-bg); border-color: var(--warn-line); color: color-mix(in srgb, var(--warn) 74%, var(--text)); }
.alert.normal { background: var(--panel-2); border-color: var(--line); }
.alert.info { background: var(--info-bg); border-color: var(--info-line); color: var(--text); }
.alert a { color: inherit; }

.check {
  display: flex; gap: 13px;
  padding: 15px 18px; margin-bottom: 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); box-shadow: var(--shadow-1);
  transition: border-color .14s var(--ease), opacity .18s var(--ease);
}
.check:hover { border-color: var(--line-strong); }
.check.done { opacity: .48; }
.check input { flex: none; margin-top: 3px; }
.check .body { flex: 1; min-width: 0; }
.check .t { font-weight: 600; margin-bottom: 3px; }
.check .d { font-size: 12.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; }
.check .m { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 8px; }

.cat {
  font-size: 11px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text); margin: 30px 0 12px;
}
.cat:first-child { margin-top: 0; }

.doclist a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text);
  font-size: 13.5px; text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.doclist a:hover { border-color: var(--line-strong); background: var(--panel-2); text-decoration: none; }

pre.doc {
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2);
  font-size: 11.5px; line-height: 1.5;
  overflow-x: auto; max-height: 480px;
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px; color: var(--muted);
}
.empty-state .icon {
  width: 46px; height: 46px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--panel-2); font-size: 18px;
}
.empty-state p { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.65; }
.empty-state a { font-weight: 580; }

/* ---------------------------------------------------------------------------
   13. Tabs
   --------------------------------------------------------------------------- */

.tabs {
  display: inline-flex; gap: 2px; flex-wrap: nowrap; max-width: 100%;
  margin-bottom: 24px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none;
  padding: 8px 16px;
  border: none; border-radius: 999px;
  background: none; color: var(--muted);
  font-weight: 560; white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.tabs button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.tabs button.active { color: var(--chip-ink-text); background: var(--chip-ink); }
.tabs button.active:hover { color: var(--chip-ink-text); background: var(--chip-ink); }

/* ---------------------------------------------------------------------------
   14. Switches & chips
   --------------------------------------------------------------------------- */

.switch-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 18px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.switch-row:hover { border-color: var(--line-strong); }
.switch-row input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch {
  flex: none; margin-top: 1px;
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--panel-3); position: relative;
  transition: background .22s var(--ease);
}
.switch i {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .22s var(--ease);
}
.switch-row input:checked + .switch { background: var(--ok); }
.switch-row input:checked + .switch i { transform: translateX(18px); background: var(--ink); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--text); outline-offset: 3px; }

.switch-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.switch-text b { font-size: 14px; font-weight: 620; }
.switch-text small { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.chip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.chip {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); color: var(--text);
  font: inherit;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.chip:hover { border-color: var(--line-strong); background: var(--panel-2); }
.chip:active { transform: scale(.985); }
.chip-title { font-size: 14px; font-weight: 620; line-height: 1.4; }
.chip-sub { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   15. Inline notes
   --------------------------------------------------------------------------- */

.inline-note {
  margin-top: 14px; padding: 12px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--muted);
  font-size: 13px; line-height: 1.65;
}
.inline-note:empty { display: none; }
.inline-note b { color: var(--text); font-weight: 620; }
.inline-note.ok { background: var(--ok-bg); border-color: var(--ok-line); color: color-mix(in srgb, var(--ok) 80%, var(--text)); }
.inline-note.ok b { color: color-mix(in srgb, var(--ok) 92%, var(--text)); }
.inline-note.warn { background: var(--warn-bg); border-color: var(--warn-line); color: color-mix(in srgb, var(--warn) 80%, var(--text)); }
.inline-note.warn b { color: color-mix(in srgb, var(--warn) 92%, var(--text)); }
.warn-text { color: var(--warn); }

/* ---------------------------------------------------------------------------
   16. Sync badge
   --------------------------------------------------------------------------- */

.sync-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  font-size: 12px; font-weight: 620; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.sync-badge:hover { border-color: var(--line-strong); background: var(--panel-2); text-decoration: none; }
.sync-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sync-badge.ok { color: var(--ok-ink); background: var(--ok); border-color: transparent; }
.sync-badge.info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.sync-badge.warning { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.sync-badge.critical { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
.sync-badge.info .dot { animation: sync-pulse 1.4s ease-in-out infinite; }
@keyframes sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------------------------------------------------------------------
   17. Command palette
   --------------------------------------------------------------------------- */

.palette { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; }
.palette-scrim { position: absolute; inset: 0; background: rgba(11,11,12,.42); backdrop-filter: blur(3px); }
.palette-box {
  position: relative; width: 100%; max-width: 560px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: palette-in .16s var(--ease);
}
@keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

.palette-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette-input-row svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.palette-input-row input {
  flex: 1; border: none; background: none; padding: 0;
  font-size: 15px; color: var(--text);
}
.palette-input-row input:focus { outline: none; box-shadow: none; }
.palette-input-row kbd {
  font: inherit; font-size: 10.5px; font-weight: 620;
  padding: 3px 6px; border-radius: 4px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}

.palette-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
.palette-group { font-size: 10px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 6px; }
.palette-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: none; border-radius: var(--r-sm);
  background: none; color: var(--text);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.palette-item svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.palette-item .pi-text { display: flex; flex-direction: column; min-width: 0; }
.palette-item .pi-text b { font-weight: 570; }
.palette-item .pi-text small { font-size: 11.5px; color: var(--muted); }
.palette-item[aria-selected="true"] { background: var(--panel-2); }
.palette-item[aria-selected="true"] svg { color: var(--text); }
.palette-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------------------
   17b. The step-by-step guide
   Sits at the top of every page. Deliberately not a card: it is instruction,
   not data, so it reads as a tinted brief rather than another panel of figures.
   --------------------------------------------------------------------------- */

.guide {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  margin-bottom: 26px;
  overflow: hidden;
}

.guide-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 18px;
  border: none; border-radius: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.guide-head:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: transparent; }

.guide-stage {
  flex: none; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 680; letter-spacing: .02em; white-space: nowrap;
  background: var(--ink); color: var(--pop);
}
.guide-stage.anytime { background: var(--panel-3); color: var(--text-2); }

.guide-hd { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.guide-hd b { font-size: 13.5px; font-weight: 640; letter-spacing: -.008em; }
.guide-hd small { font-size: 12px; color: var(--muted); }

.guide-chev { flex: none; display: grid; place-items: center; color: var(--muted); }
.guide-chev svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.guide.closed .guide-chev svg { transform: rotate(-90deg); }
.guide.closed .guide-body { display: none; }

.guide-body { padding: 2px 18px 18px; }
.guide-purpose { font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0 0 12px; max-width: 74ch; }
.guide-warn {
  margin: 0 0 14px; padding: 11px 14px;
  border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 13px; line-height: 1.6; color: var(--text); max-width: 74ch;
}

.guide-steps { counter-reset: gstep; list-style: none; margin: 0 0 4px; padding: 0; }
.guide-steps li {
  counter-increment: gstep;
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0 12px 38px;
  border-top: 1px solid var(--line);
}
.guide-steps li::before {
  content: counter(gstep);
  position: absolute; left: 0; top: 12px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-strong);
  font-size: 11.5px; font-weight: 680; color: var(--text);
}
.gs-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.gs-text b { font-size: 13.5px; font-weight: 620; line-height: 1.45; }
.gs-text span { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 72ch; }

.gs-show {
  flex: none; margin-top: 1px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--panel); border-color: var(--line-strong); color: var(--text-2);
}
.gs-show:hover { background: var(--ink); color: #fff; border-color: transparent; }

.guide-next {
  margin-top: 16px; padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}
.gn-label { font-size: 10.5px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.gn-link { font-size: 14px; font-weight: 640; text-decoration: none; }
.gn-link:hover { text-decoration: underline; }
.gn-why { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; }

.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------------------------------------------------------------------------
   17bb. "What do you want to do?" — the task router on the Overview
   --------------------------------------------------------------------------- */

.ask {
  padding: 28px 28px 24px; margin-bottom: 26px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.ask-q { margin: 0 0 4px; font-size: clamp(20px, 2.3vw, 25px); font-weight: 660; letter-spacing: -.024em; }
.ask-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); max-width: 62ch; }

.ask-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-bottom: 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.ask-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.ask-field svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ask-field input { border: none; background: none; padding: 12px 0; font-size: 14.5px; }
.ask-field input:focus { outline: none; box-shadow: none; }

.ask-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 8px; }
.ask-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text);
  font-size: 13.5px; font-weight: 540;
}
.ask-item:hover { border-color: var(--ink); background: var(--panel-2); }
.ask-chev { color: var(--muted); flex: none; }
.ask-item:hover .ask-chev { color: var(--text); }
.ask-empty { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.ask-back {
  padding: 0; margin-bottom: 14px;
  border: none; background: none; color: var(--muted);
  font-size: 12.5px; font-weight: 540;
}
.ask-back:hover { background: none; border-color: transparent; color: var(--text); }
.ask-answer h3 { font-size: 17px; margin-bottom: 8px; }
.ask-what { font-size: 14px; line-height: 1.7; color: var(--text-2); margin: 0 0 16px; max-width: 74ch; }
.ask-how { font-size: 10.5px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ask-steps { margin: 0; padding-left: 20px; }
.ask-steps li { font-size: 13.5px; line-height: 1.6; margin-bottom: 8px; max-width: 72ch; }
.ask-steps li::marker { color: var(--muted); font-weight: 640; }
.ask-caution {
  margin: 14px 0 0; padding: 11px 14px;
  border-left: 3px solid var(--warn); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--warn-bg); color: color-mix(in srgb, var(--warn) 78%, var(--text));
  font-size: 13px; line-height: 1.6; max-width: 74ch;
}
.ask-actions { margin-top: 18px; }

@media (max-width: 620px) {
  .ask { padding: 22px 16px 18px; border-radius: var(--r-md); }
  .ask-actions button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   17c. The walkthrough — dims the page and rings one control at a time
   --------------------------------------------------------------------------- */

.tour { position: fixed; inset: 0; z-index: 150; }

/* Four rectangles around the highlighted control rather than one element with
   a giant spread shadow -- see the note in guide.js. */
.tour-mask { position: fixed; background: rgba(11,11,12,.62); }

.tour-ring {
  position: fixed; border-radius: 10px;
  border: 2px solid var(--pop);
  pointer-events: none;
  transition: top .2s var(--ease), left .2s var(--ease), width .2s var(--ease), height .2s var(--ease);
}

.tour-pop {
  position: fixed; width: min(400px, calc(100vw - 24px));
  padding: 18px 20px 16px;
  border-radius: var(--r-md);
  background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-3);
  animation: menu-in .16s var(--ease);
}
.tour-count { font-size: 10.5px; font-weight: 680; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.tour-title { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.012em; line-height: 1.35; margin-bottom: 7px; }
.tour-body { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-spacer { flex: 1; }
.tour-nav button { padding: 8px 15px; font-size: 13px; }

@media (max-width: 620px) {
  .guide-head { flex-wrap: wrap; gap: 8px 12px; padding: 14px; }
  .guide-stage { order: -1; }
  .guide-hd { flex-basis: 100%; }
  .guide-chev { position: absolute; top: 14px; right: 14px; }
  .guide { position: relative; }
  .guide-body { padding: 2px 14px 16px; }
  .guide-steps li { padding-left: 32px; flex-wrap: wrap; }
  .guide-steps li::before { width: 22px; height: 22px; font-size: 11px; }
  .guide-actions button { flex: 1; }
  .tour-pop { padding: 16px; }
}

/* ---------------------------------------------------------------------------
   17d. Charts — hand-rolled SVG line/bar charts, see lib/charts.js
   --------------------------------------------------------------------------- */

.chart-card { padding-bottom: 8px; }
.chart-wrap { position: relative; width: 100%; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-gridline { stroke: var(--line); stroke-width: 1; }
.chart-axis-label {
  font-size: 9.5px; fill: var(--muted); font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.chart-cat-label { font-size: 10px; }

.chart-threshold { stroke: var(--crit); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .75; }
.chart-threshold-label { font-size: 9.5px; fill: var(--crit); font-weight: 600; }

.chart-line { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--panel); stroke: var(--c); stroke-width: 2; }
.chart-dot-hover { fill: var(--c); stroke: var(--panel); stroke-width: 2; pointer-events: none; }
.chart-guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

.chart-bar { fill: var(--c); transition: opacity .12s var(--ease); }
.chart-bar-hot { opacity: .78; }

.chart-svg { cursor: crosshair; touch-action: pan-y; }

.chart-tip {
  position: absolute; top: 8px; z-index: 4;
  transform: translateX(-50%);
  min-width: 148px; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--ink); color: #fff;
  font-size: 12px; line-height: 1.5;
  box-shadow: var(--shadow-2);
  pointer-events: none;
  white-space: nowrap;
}
.chart-tip.chart-tip-right { transform: translateX(-92%); }
.chart-tip-x { font-size: 10.5px; font-weight: 650; letter-spacing: .02em; color: rgba(255,255,255,.6); margin-bottom: 5px; }
.chart-tip-row { display: flex; align-items: center; gap: 7px; }
.chart-tip-row + .chart-tip-row { margin-top: 3px; }
.chart-tip-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chart-tip-row span { color: rgba(255,255,255,.82); }
.chart-tip-row b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 540; }
.chart-legend-item i { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.chart-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; padding: 20px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  color: var(--muted); font-size: 13px; text-align: center;
}

@media (max-width: 620px) {
  .chart-tip { font-size: 11.5px; min-width: 130px; padding: 8px 10px; }
  .chart-legend { gap: 10px; }
}

/* ---------------------------------------------------------------------------
   18. Toast
   --------------------------------------------------------------------------- */

.toast {
  position: fixed; z-index: 120;
  left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translate(-50%, 10px);
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--ink); color: #fff;
  font-size: 13.5px; line-height: 1.5;
  box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--crit); }
@media (min-width: 700px) {
  .toast { left: auto; right: 22px; transform: translateY(10px); }
  .toast.show { transform: none; }
}

/* ---------------------------------------------------------------------------
   19. Utilities
   --------------------------------------------------------------------------- */

.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
details[open] summary { margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   20. Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1200px) { :root { --pad-x: 32px; } }

/* Below this width the rail leaves the layout and becomes a drawer. */
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .24s var(--ease);
    box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-3); }

  /* The rail toggle is a desktop affordance; on mobile the drawer closes
     from the scrim or the X in the topbar. */
  .rail-toggle { display: none; }
  .menu-btn { display: grid; }
  .topbar { padding: 10px 20px; }
  .page-icon { display: none; }
}

@media (max-width: 860px) {
  :root { --pad-x: 20px; --gap: 12px; }
  main { padding: 24px var(--pad-x) 80px; }
  h2 { margin: 34px 0 14px; font-size: 16px; }
  .card { padding: 20px 18px; border-radius: var(--r-md); }
  .kpi { padding: 18px 18px; }
  .kpi .value { font-size: 22px; }
  .user-name, .user-btn .chev { display: none; }
  .user-btn { padding: 3px; border-color: transparent; background: transparent; }
  .plain-summary p { font-size: 14.5px; }
}

@media (max-width: 620px) {
  .topbar { padding: 8px 16px; gap: 8px; }
  .page-sub { display: none; }
  .page-title { font-size: 14.5px; }
  .sync-badge span:not(.dot) { display: none; }
  .sync-badge { padding: 8px; }
  .topbar-right { gap: 6px; }
  main { padding: 20px 16px 72px; }
  .card { padding: 18px 16px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .chip-row { grid-template-columns: 1fr; }
  .row.end { justify-content: stretch; }
  .row.end button { flex: 1; }
  th, td { padding: 10px 10px; }
  .palette { padding: 8vh 12px 12px; }
  .alert { padding: 14px 15px; }
  .check { padding: 14px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .sidebar, .topbar, .toast, .palette, .scrim, .skip-link, .guide, .tour { display: none !important; }
  .app { grid-template-columns: 1fr; }
  main { padding: 0; max-width: none; }
  .card, .kpi { break-inside: avoid; box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   21. Auth / unlock screen
   --------------------------------------------------------------------------- */

.auth-body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.auth-shell { width: 100%; max-width: 430px; }
.auth-card {
  padding: 40px 34px 32px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--panel); box-shadow: var(--shadow-2);
  text-align: center;
}
.auth-mark {
  width: 52px; height: 52px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 22px; font-weight: 800;
}
.auth-card h1 { font-size: 21px; margin-bottom: 6px; }
.auth-sub { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; }
.auth-card form { text-align: left; }
.auth-submit { width: 100%; padding: 12px; font-size: 14.5px; margin-top: 6px; }
.auth-error {
  margin-bottom: 12px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--crit-line); border-radius: var(--r-sm);
  background: var(--crit-bg); color: color-mix(in srgb, var(--crit) 78%, var(--text));
  font-size: 12.5px; line-height: 1.55;
}
.auth-foot { margin: 22px 0 0; text-align: left; font-size: 11.5px; line-height: 1.65; color: var(--muted); }

@media (max-width: 480px) {
  .auth-card { padding: 32px 22px 26px; border-radius: var(--r-lg); }
}

/* ---------------------------------------------------------------------------
   "How your group works" — the strategy page.

   The diagram is inline SVG rather than an image so its text stays selectable,
   scales with the page, and reads colour from the same variables as everything
   else — which is what lets it follow the light/dark toggle without a second
   copy of the artwork.
   --------------------------------------------------------------------------- */

.struct-hero {
  padding: 22px 24px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.struct-hero h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: .01em; }
.struct-hero p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.72; color: var(--text-2); }
.struct-hero p:last-child { margin-bottom: 0; }

/* The drawing scrolls inside its own box on a narrow screen rather than
   squashing the labels into each other. */
.struct-diagram-wrap {
  overflow-x: auto; padding: 6px 0 2px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.struct-diagram { display: block; width: 100%; min-width: 640px; height: auto; }

.sd-card { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1.2; }
.sd-card-neutral { fill: var(--panel-3); }
.sd-card-earns { fill: var(--ok-bg); stroke: var(--ok-line); }
.sd-card-costs { fill: var(--warn-bg); stroke: var(--warn-line); }

/* Font family is deliberately left to inherit from <body> — the `font:`
   shorthand would reset it to the SVG default serif. */
.sd-title { font-size: 16px; font-weight: 700; fill: var(--text); }
.sd-badge {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.sd-badge-earns { fill: var(--ok); }
.sd-badge-costs { fill: var(--warn); }
.sd-note { font-size: 12px; font-weight: 400; fill: var(--muted); }
.sd-caption { font-size: 13px; font-weight: 500; fill: var(--text-2); }

.sd-flow { fill: none; stroke-width: 2.2; }
.sd-flow-free  { stroke: var(--ok); }
.sd-flow-earns { stroke: var(--info); }
.sd-flow-costs { stroke: var(--warn); stroke-dasharray: 6 5; }
.sd-head-free  { fill: var(--ok); }
.sd-head-earns { fill: var(--info); }
.sd-head-costs { fill: var(--warn); }

.sd-flow-label { font-size: 12px; font-weight: 600; }
.sd-flow-label-free  { fill: var(--ok); }
.sd-flow-label-earns { fill: var(--info); }
.sd-flow-label-costs { fill: var(--warn); }

.struct-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin: 12px 0 26px; padding: 0 4px;
  font-size: 12.5px; color: var(--muted);
}
.struct-legend .sl { display: inline-flex; align-items: center; gap: 7px; }
.struct-legend i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.sl-free  i { background: var(--ok); }
.sl-earns i { background: var(--info); }
.sl-costs i { background: var(--warn); }

.struct-insight p { font-size: 14px; line-height: 1.72; margin: 0 0 12px; color: var(--text-2); }
.struct-insight p:last-child { margin-bottom: 0; }
.struct-rule {
  padding: 13px 16px; border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
  background: var(--panel-2); color: var(--text) !important;
}
.struct-list { margin: 0; padding-left: 18px; line-height: 1.8; }
.struct-list li { margin-bottom: 7px; }
.struct-list li:last-child { margin-bottom: 0; }
.struct-risk .struct-list li b { color: var(--text); }
.struct-dividend-row td { background: var(--ok-bg); }

@media (max-width: 720px) {
  .struct-hero { padding: 18px 16px; }
  .struct-hero p { font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   "What should I do?" — the guided check-up.

   One question per screen, then a ranked plan. The plan's three groups are
   tinted differently on purpose: money found, risk carried and judgement
   needed are not the same kind of thing, and a single undifferentiated list
   invites acting on the third as if it were the first.
   --------------------------------------------------------------------------- */

.advisor { max-width: 720px; margin: 0 auto; }

.adv-progress {
  height: 4px; border-radius: 3px; background: var(--panel-3);
  overflow: hidden; margin-bottom: 14px;
}
.adv-progress i {
  display: block; height: 100%; background: var(--accent);
  border-radius: 3px; transition: width .25s ease;
}
.adv-step {
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.adv-card { padding: 26px 26px 22px; }
.adv-ask { font-size: 21px; line-height: 1.35; margin: 0 0 12px; }
.adv-why {
  font-size: 13.5px; line-height: 1.7; color: var(--text-2);
  margin: 0 0 22px; padding-left: 13px; border-left: 2px solid var(--line-strong);
}

.adv-money { display: flex; align-items: center; gap: 10px; }
.adv-peso { font-size: 26px; font-weight: 600; color: var(--muted); }
.adv-money input {
  flex: 1; font-size: 26px; font-weight: 600; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--text);
}
.adv-money input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.adv-choices { display: grid; gap: 9px; }
.adv-choice {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--text);
  font: inherit; font-size: 14.5px;
}
.adv-choice:hover { border-color: var(--muted); background: var(--panel-3); }
.adv-choice.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.adv-tick {
  width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.adv-choice.on .adv-tick { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.adv-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 24px;
}
.adv-right { display: flex; align-items: center; gap: 10px; }
.adv-foot { margin-top: 14px; text-align: center; }

/* -- the plan -- */
.adv-result-hero { margin-bottom: 26px; }
.adv-result-hero h2 { font-size: 22px; margin: 0 0 10px; }
.adv-result-hero p { font-size: 14.5px; line-height: 1.72; color: var(--text-2); margin: 0 0 10px; }

.advisor h2 { margin-top: 30px; }
.adv-find { margin-bottom: 12px; border-left: 3px solid var(--line-strong); }
.adv-find-money { border-left-color: var(--ok); }
.adv-find-risk { border-left-color: var(--crit); }
.adv-find-judgement { border-left-color: var(--info); }
.adv-find-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.adv-find-head h3 { margin: 0; font-size: 16px; line-height: 1.4; }
.adv-worth { text-align: right; flex: 0 0 auto; }
.adv-worth b { display: block; font-size: 18px; color: var(--ok); white-space: nowrap; }
.adv-find-risk .adv-worth b, .adv-find-judgement .adv-worth b { color: var(--text-2); }
.adv-worth span { font-size: 11px; color: var(--muted); }
.adv-find p { font-size: 13.8px; line-height: 1.7; color: var(--text-2); margin: 0 0 10px; }
.adv-note {
  font-size: 12.8px !important; color: var(--muted) !important;
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel-2);
}
.adv-urgent {
  font-size: 12.8px !important; font-weight: 600;
  color: color-mix(in srgb, var(--warn) 80%, var(--text)) !important;
}
.adv-basis { margin: 10px 0; }
.adv-basis summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted);
  padding: 4px 0; user-select: none;
}
.adv-basis summary:hover { color: var(--text-2); }
.adv-basis p { font-size: 12.5px !important; margin: 8px 0 0; padding-left: 13px; border-left: 2px solid var(--line); }
.adv-go { display: inline-block; font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.adv-redo { margin-top: 26px; text-align: center; }

@media (max-width: 620px) {
  .adv-card { padding: 20px 17px 18px; }
  .adv-ask { font-size: 18px; }
  .adv-money input, .adv-peso { font-size: 21px; }
  .adv-find-head { flex-direction: column; gap: 6px; }
  .adv-worth { text-align: left; }
}

/* ---------------------------------------------------------------------------
   "Accountant's pack".

   The caveat block is deliberately given the weight of a warning rather than
   fine print: handing this over as if it were a set of registered books is the
   one way the page could cause real harm, so it is not something to tuck away
   at the bottom in grey 11px.
   --------------------------------------------------------------------------- */

.cas-intro p { font-size: 14px; line-height: 1.72; color: var(--text-2); margin: 0 0 12px; }
.cas-intro p:last-child { margin-bottom: 0; }
.cas-caveat {
  padding: 13px 16px; border-radius: var(--r-sm);
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  color: color-mix(in srgb, var(--warn) 40%, var(--text)) !important;
}

.cas-controls { margin-top: 16px; }
.cas-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.cas-picker label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 620; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.cas-picker select { min-width: 190px; }
.cas-picker button { margin-left: auto; }

.cas-gap { margin-bottom: 10px; border-left: 3px solid var(--line-strong); }
.cas-gap-high { border-left-color: var(--crit); }
.cas-gap-med { border-left-color: var(--warn); }
.cas-gap-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;
}
.cas-gap-head h3 { margin: 0; font-size: 15.5px; }
.cas-gap p { font-size: 13.5px; line-height: 1.7; color: var(--text-2); margin: 0 0 8px; }

.cas-csv { display: flex; flex-wrap: wrap; gap: 9px; }
.cas-csv button { display: inline-flex; align-items: center; gap: 8px; }
.cas-csv button[disabled] { opacity: .45; cursor: not-allowed; }
.cas-csv .muted {
  font-size: 11.5px; padding: 1px 7px; border-radius: 20px;
  background: var(--panel-3);
}

@media (max-width: 620px) {
  .cas-picker { flex-direction: column; align-items: stretch; }
  .cas-picker button { margin-left: 0; }
  .cas-picker select { width: 100%; }
  .cas-gap-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}