/* ===========================================================================
   Design system.

   Two rules shape everything here:

   1. THIN LETTERFORMS. Body text is 300, display type 200. Thin type reads as
      premium -- but it also loses legibility fast, so it is used honestly:
        - never below 14px at weight 300
        - UI chrome (buttons, labels, badges) sits at 450-500, because thin
          text at small sizes in a dense interface is a readability failure,
          not a style
        - thin type gets MORE colour contrast and MORE letter-spacing at
          display sizes, where tight tracking would otherwise look slack
      Saying this out loud matters: "thin everywhere" and "legible" conflict,
      and the resolution is deliberate rather than accidental.

   2. DERIVED, NOT DECLARED. Every surface, border, hover and state colour is
      computed from the four brand tokens with color-mix(). A partner changing
      --brand-accent restyles the whole interface coherently and cannot
      produce an unreadable one.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap");
/* TODO before production: self-host. A third-party font CDN is a privacy and
   performance dependency, and whitelabel partners may supply their own. */

:root {
  /* --- neutrals: one ramp, slightly warm, never pure black ------------- */
  --ink-900: #14171a;
  --ink-700: #3d454d;
  --ink-500: #697480;
  --ink-400: #8e99a4;
  --ink-200: #d6dce2;
  --ink-100: #e9edf1;
  --ink-050: #f5f7f9;
  --paper:   #ffffff;

  /* --- semantic surfaces, all derived -------------------------------- */
  --bg:        var(--ink-050);
  --surface:   var(--paper);
  --surface-2: color-mix(in srgb, var(--brand-accent) 3%, var(--paper));
  --border:    var(--ink-200);
  --border-soft: var(--ink-100);
  --hover:     color-mix(in srgb, var(--brand-accent) 5%, var(--paper));

  --text:      var(--ink-900);
  --text-soft: var(--ink-700);
  --muted:     var(--ink-500);
  --hint:      var(--ink-400);

  --accent:      var(--brand-accent);
  --accent-ink:  var(--brand-accent-ink);
  --accent-weak: color-mix(in srgb, var(--brand-accent) 10%, var(--paper));
  --accent-line: color-mix(in srgb, var(--brand-accent) 28%, var(--paper));
  --accent-hover: color-mix(in srgb, var(--brand-accent) 85%, white);

  /* --- severity: hue is fixed, but tints follow the brand so an alert
         never looks pasted in from another product ---------------------- */
  --critical:      #a4303f;
  --critical-weak: color-mix(in srgb, #a4303f 8%, var(--paper));
  --critical-line: color-mix(in srgb, #a4303f 25%, var(--paper));
  --warn:          #8a6411;
  --warn-weak:     color-mix(in srgb, #8a6411 9%, var(--paper));
  --warn-line:     color-mix(in srgb, #8a6411 25%, var(--paper));
  --ok:            #2f6b4f;
  --ok-weak:       color-mix(in srgb, #2f6b4f 8%, var(--paper));
  --info:          var(--ink-500);
  --info-weak:     var(--ink-050);

  /* --- type scale. Thin by default; chrome steps up. ------------------ */
  --w-display: 200;
  --w-body: 300;
  --w-medium: 450;   /* labels, buttons -- NOT 300: too fragile at 13px */
  --w-strong: 550;   /* numbers that must be read at a glance */

  --t-display: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  --t-h2: 1.3rem;
  --t-h3: 1.0625rem;
  --t-body: 0.9375rem;   /* 15px -- the floor for weight 300 */
  --t-small: 0.875rem;   /* 14px -- absolute floor at 300 */
  --t-micro: 0.75rem;    /* 12px -- only ever at --w-medium or above */

  /* Rounder than the first pass, matching Outreach's 16/12 scale -- the
     softer radius is a real part of why that product reads as finished. */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --gap: 1rem;
  --shadow: 0 1px 2px rgb(20 23 26 / 4%), 0 8px 24px -16px rgb(20 23 26 / 18%);

  color-scheme: light;
}

/* --- dark mode: a token REMAP, not a second stylesheet. Same convention
       as the GreenmorMail webmail, which keeps one source of truth. ------ */
:root[data-theme="dark"] {
  --ink-900: #eef1f4;
  --ink-700: #c2cad2;
  --ink-500: #93a0ab;
  --ink-400: #74818c;
  --ink-200: #343c44;
  --ink-100: #262d34;
  --ink-050: #1a1f24;
  --paper:   #11151a;
  --bg: #0d1013;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 70%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #eef1f4; --ink-700: #c2cad2; --ink-500: #93a0ab;
    --ink-400: #74818c; --ink-200: #343c44; --ink-100: #262d34;
    --ink-050: #1a1f24; --paper: #11151a; --bg: #0d1013;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--brand-font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: 1.6;
  letter-spacing: 0.004em;        /* thin type needs a touch of air */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- layout: mobile first, ALWAYS. 16px side gutter, no horizontal scroll */
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 16px; }

h1, h2, h3 { font-family: var(--brand-font-display); margin: 0; }
h1 {
  font-size: var(--t-display);
  font-weight: var(--w-display);
  letter-spacing: -0.022em;      /* display sizes need tightening back up */
  line-height: 1.12;
}
h2 { font-size: var(--t-h2); font-weight: 250; letter-spacing: -0.012em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-medium); letter-spacing: -0.004em; }

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.lede { font-size: 1.0625rem; font-weight: var(--w-body); color: var(--text-soft); max-width: 46ch; }
.muted { color: var(--muted); }
.micro { font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: 0.02em; }

/* Numbers are read, not prose: tabular, and heavier so they hold at a glance. */
.num { font-variant-numeric: tabular-nums; font-weight: var(--w-strong); letter-spacing: -0.01em; }

/* --- app chrome ------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar .inner { display: flex; align-items: center; gap: .75rem; min-height: 56px; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: var(--w-medium); letter-spacing: -0.01em; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--brand-tint)));
}
.brand-name::after { content: var(--brand-name); }
.spacer { flex: 1 1 auto; }

/* --- cards ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 1.125rem; }
@media (min-width: 40rem) { .card-pad { padding: 1.375rem 1.5rem; } }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 52rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ⚠️ Grid and flex children default to min-width:auto, so a child containing
   anything with a min-width (the data table below) REFUSES to shrink and
   pushes the whole page wider than the viewport. On a phone that clips every
   line of body copy on the right. This one line is the fix, and it is the
   single most common way a "mobile-first" layout silently is not. */
.grid > *, .card { min-width: 0; }

/* --- badges ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .02em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge.critical { color: var(--critical); background: var(--critical-weak); border-color: var(--critical-line); }
.badge.warn     { color: var(--warn);     background: var(--warn-weak);     border-color: var(--warn-line); }
.badge.info     { color: var(--info);     background: var(--info-weak);     border-color: var(--border); }
.badge.ok       { color: var(--ok);       background: var(--ok-weak);       border-color: color-mix(in srgb, var(--ok) 22%, var(--paper)); }

/* Confidence is deliberately quiet -- it qualifies a claim, it is not the claim. */
.conf { font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--hint); letter-spacing: .02em; }

/* --- a finding ---------------------------------------------------------
   Severity shows as a left rule, not a filled card: a feed of saturated
   panels reads as noise, and everything here is already important. */
.finding {
  display: grid; gap: .6rem;
  padding: 1rem 1.125rem 1.125rem;
  border-left: 2px solid var(--border);
  border-bottom: 1px solid var(--border-soft);
}
.finding:last-child { border-bottom: 0; }
.finding.critical { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 2.5%, transparent); }
.finding.warn     { border-left-color: var(--warn);     background: color-mix(in srgb, var(--warn) 2.5%, transparent); }
.finding.info     { border-left-color: var(--ink-200); }

.finding-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.finding-head h3 { flex: 1 1 18ch; min-width: 0; }
.finding-body { color: var(--text-soft); max-width: 68ch; }
.finding-action {
  color: var(--text); background: var(--accent-weak);
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  padding: .6rem .75rem; max-width: 68ch;
}
.finding-action strong { font-weight: var(--w-medium); }

/* --- EVIDENCE. The verbatim provider response, shown as a quotation and
       never paraphrased. This element is the product's whole argument, so it
       is styled to look like primary source material, not UI copy. -------- */
.evidence {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-small); font-weight: 400; line-height: 1.5;
  color: var(--text-soft);
  background: var(--ink-050);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: .6rem .7rem;
  overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}
.evidence .tag { color: var(--hint); }

/* --- health factors ---------------------------------------------------- */
.factor { display: grid; gap: .4rem; padding: .85rem 0; border-bottom: 1px solid var(--border-soft); }
.factor:last-child { border-bottom: 0; }
.factor-top { display: flex; align-items: baseline; gap: .5rem; }
.factor-top .name { font-weight: var(--w-medium); }
.factor-top .score { margin-left: auto; font-size: 1.05rem; }
.meter { height: 4px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter.poor > span { background: var(--critical); }
.meter.watch > span { background: var(--warn); }
.meter.good > span { background: var(--ok); }
.meter.nodata > span { background: var(--ink-200); }

/* --- tables ------------------------------------------------------------ */
.scroll-x { overflow-x: auto; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 34rem; }
table.data th {
  text-align: left; font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding: .5rem .6rem; border-bottom: 1px solid var(--border);
}
table.data td { padding: .55rem .6rem; border-bottom: 1px solid var(--border-soft); }
table.data tbody tr:hover { background: var(--hover); }
table.data td.n { text-align: right; font-variant-numeric: tabular-nums; }

.section-label {
  font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .5rem;
}
.empty { color: var(--muted); padding: 1.25rem 1.125rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- form controls ------------------------------------------------------
   Inputs sit at weight 400, not 300: user-entered text must be unambiguous,
   and thin type in a field reads as placeholder text. */
.input {
  width: 100%;
  font: inherit; font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
}
.input:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
  border-color: var(--accent);
}

.btn {
  font: inherit; font-weight: var(--w-medium);
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .5rem .85rem; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }
.btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.btn.ghost {
  color: var(--text-soft); background: transparent; border-color: var(--border);
  padding: .3rem .6rem;
}
.btn.ghost:hover { background: var(--hover); color: var(--text); }


/* ===========================================================================
   Application shell -- TWO rails.
   ---------------------------------------------------------------------------
   Phone:   top bar + ONE drawer carrying both levels (products, then the open
            product's sections). Two nested drawers at this width is unusable.
   >=62rem: rail 1 (products, 5rem) + rail 2 (sections, 13.5rem), both fixed.

   Nothing here names a colour; all of it resolves through --accent and the ink
   ramp, so the four whitelabel dials keep working.
   =========================================================================== */

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.shell { min-height: 100dvh; background: var(--bg); }

/* --- phone top bar ------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .5rem;
  height: 3rem; padding: 0 .5rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.bar-ws {
  font-size: var(--t-small); font-weight: var(--w-medium);
  color: var(--text); min-width: 0;
}
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  color: var(--text-soft); background: none; border: 0;
  border-radius: var(--radius-sm); cursor: pointer;
}
.iconbtn:hover { background: var(--hover); color: var(--accent); }

.scrim {
  position: fixed; inset: 0; z-index: 35;
  /* NOT --ink-900: dark mode remaps it to a light ink, which would turn the
     scrim into a white flash. A scrim is always black. */
  background: rgb(0 0 0 / .42); border: 0; padding: 0;
}

/* --- rail 1: products (desktop only) ------------------------------------ */
.prail { display: none; }

/* --- rail 2 / the drawer ------------------------------------------------- */
.nav {
  position: fixed; z-index: 40; inset: 0 auto 0 0;
  width: min(17rem, 84vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  /* Off-canvas rather than display:none, so opening is a transform (cheap,
     and it animates) instead of a relayout. */
  transform: translateX(-100%);
  transition: transform .18s ease;
}
.nav.open { transform: none; box-shadow: 0 0 2rem rgb(0 0 0 / .18); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

.nav-head { padding: .9rem 1rem .5rem; }
.nav-product {
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--accent);
}
.nav-ws { padding: 0 1rem .75rem; border-bottom: 1px solid var(--border-soft); }
.wsname {
  display: block; font-size: var(--t-micro); font-weight: var(--w-medium);
  color: var(--muted);
}
.wspick {
  font: inherit; font-size: var(--t-small); font-weight: var(--w-medium);
  width: 100%; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .4rem 1.6rem .4rem .55rem;
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 54%, calc(100% - 9px) 54%;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.wspick:hover { border-color: var(--accent-line); }

.nav-scroll { flex: 1; overflow-y: auto; padding: .25rem 0 1rem; }
.nav-group {
  padding: .9rem 1rem .3rem;
  font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .08em; text-transform: uppercase; color: var(--hint);
}
.nav-item {
  display: flex; align-items: flex-start; gap: .6rem;
  /* 44px of touch target -- the one number here that is a floor, not a taste. */
  min-height: 2.75rem; padding: .5rem 1rem;
  font-size: var(--t-small); font-weight: var(--w-body);
  color: var(--text-soft); text-decoration: none;
  border-left: 2px solid transparent;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active {
  color: var(--accent); background: var(--accent-weak);
  border-left-color: var(--accent); font-weight: var(--w-medium);
}
.nav-ico { display: inline-flex; flex: none; color: inherit; padding-top: .1rem; }
.nav-hint {
  display: block; font-size: var(--t-micro); font-weight: var(--w-medium);
  color: var(--hint); margin-top: .1rem;
}
.nav-item.active .nav-hint { color: var(--accent); opacity: .7; }

.nav-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-top: 1px solid var(--border-soft);
}
.nav-user {
  flex: 1; min-width: 0;
  font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--muted);
  text-decoration: none;
}
.nav-user:hover { color: var(--accent); }

.body { min-width: 0; }

/* --- both rails permanent ----------------------------------------------- */
@media (min-width: 62rem) {
  .bar, .scrim { display: none; }
  /* The drawer carries the products only when it is the sole nav. */
  .nav-products { display: none; }

  .prail {
    position: fixed; z-index: 41; inset: 0 auto 0 0; width: 5rem;
    display: flex; flex-direction: column; align-items: stretch;
    padding: .5rem .35rem 1rem;
    background: var(--surface-2); border-right: 1px solid var(--border);
    overflow-y: auto;
  }
  .prail-brand {
    display: flex; align-items: center; justify-content: center;
    height: 2.75rem; margin-bottom: .5rem;
  }
  .prail-item {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .5rem .25rem; border-radius: var(--radius-sm);
    color: var(--muted); text-decoration: none; text-align: center;
  }
  .prail-item:hover { background: var(--hover); color: var(--text); }
  .prail-item.active { background: var(--accent-weak); color: var(--accent); }
  .prail-label {
    font-size: 0.6875rem; font-weight: var(--w-medium); line-height: 1.2;
    /* 11px is below the 12px floor, so it is allowed only here: one or two
       words, at weight 450, with nothing to mistake it for. */
    overflow-wrap: anywhere;
  }

  .nav {
    left: 5rem; width: 13.5rem;
    transform: none; box-shadow: none; transition: none;
  }
  .body { margin-left: 18.5rem; }
}

/* ---------------------------------------------------------------------------
   Section rail -- a THIRD level, inside the page body, for a section with many
   small pages (used by the settings tiers). Scrolling tabs on a phone, a
   column from 48rem.
   --------------------------------------------------------------------------- */
.railed { display: block; }
.rail {
  display: flex; gap: .25rem; overflow-x: auto;
  margin: 0 0 1.25rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--border); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-item {
  display: flex; align-items: center; gap: .45rem;
  flex: none; min-height: 2.5rem; padding: .35rem .7rem;
  font-size: var(--t-small); font-weight: var(--w-body);
  color: var(--text-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.rail-item:hover { color: var(--text); }
.rail-item.active {
  color: var(--accent); border-bottom-color: var(--accent);
  font-weight: var(--w-medium);
}
.rail-hint { display: none; }

@media (min-width: 48rem) {
  .railed {
    display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem;
    align-items: start;
  }
  .rail {
    display: block; overflow: visible; margin: 0; padding: 0;
    border-bottom: 0; border-right: 1px solid var(--border);
  }
  .rail-item {
    display: block; padding: .6rem .9rem .6rem 0;
    border-bottom: 0; border-right: 2px solid transparent;
    margin-right: -1px; white-space: normal;
  }
  .rail-item.active { border-bottom-color: transparent; border-right-color: var(--accent); }
  .rail-hint {
    display: block; margin-top: .15rem;
    font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--hint);
  }
}

/* ===========================================================================
   THE COMPONENT VOCABULARY
   ---------------------------------------------------------------------------
   Ported from GreenmorMail Outreach's `.o*` set (app.css:471-640), which is the
   reason every Outreach screen reads as one product: 34 classes, and each page
   is assembled from them rather than hand-styled.

   Two deliberate differences:

   1. Every colour resolves through a token. Outreach hardcodes #f3f4f6,
      #111827, #e5e7eb, emerald-700 -- including in its own tab underline --
      and each one would silently break the four whitelabel dials.
   2. Weights stay thin. Outreach's stat value is 700; ours is --w-strong (550),
      which is the token that exists for exactly this job: a number read at a
      glance. Size carries the emphasis instead of weight.

   Add to this file rather than writing page-local CSS. A one-off style in a
   page is how a vocabulary stops being one.
   =========================================================================== */

/* --- page frame ---------------------------------------------------------- */
.page {
  padding: 1.25rem 1rem 2.5rem;
  max-width: 68rem;
  margin: 0 auto;
}
.page-narrow { max-width: 50rem; }
@media (min-width: 40rem) { .page { padding: 1.75rem 1.5rem 3rem; } }

/* Page header: icon tile, title, and ONE line saying what the page is for.
   The sentence is not decoration -- it is where a screen earns its place. */
.phead {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.5rem;
}
.phead-icon {
  width: 2.5rem; height: 2.5rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-weak); color: var(--accent);
}
.phead-body { min-width: 0; flex: 1; }
.phead h1, .phead h2 {
  font-size: var(--t-h3); font-weight: var(--w-medium);
  color: var(--text); margin: 0; letter-spacing: -0.004em;
}
.phead p {
  font-size: var(--t-micro); font-weight: var(--w-medium);
  color: var(--muted); margin: .25rem 0 0;
}
/* Actions that belong to the page, not to a section. */
.toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* --- stat tile ----------------------------------------------------------- */
.stats {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 1.25rem;
}
.stats > * { min-width: 0; }
.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .875rem 1rem;
}
.stat .label {
  display: flex; align-items: center; gap: .25rem;
  font-size: var(--t-micro); font-weight: var(--w-medium);
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.stat .value {
  font-size: 1.5rem; font-weight: var(--w-strong);
  color: var(--text); margin-top: .35rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.stat .delta {
  font-size: var(--t-micro); font-weight: var(--w-medium);
  color: var(--hint); margin-top: .1rem;
}
.stat.critical .value { color: var(--critical); }
.stat.warn .value     { color: var(--warn); }
.stat.ok .value       { color: var(--ok); }
/* An unmeasurable number is an em dash, never a zero and never 100 -- a score
   of 100 for "no data" reads as flawless. This bit us on the health panel. */
.stat .value.none { color: var(--hint); font-weight: var(--w-medium); }

/* --- segmented control (pills) ------------------------------------------- */
.pills {
  display: inline-flex; gap: .25rem; padding: .25rem;
  background: var(--ink-050); border-radius: var(--radius);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; padding: .35rem .8rem; border: 0; cursor: pointer;
  font: inherit; font-size: var(--t-small); font-weight: var(--w-medium);
  border-radius: var(--radius-sm);
  color: var(--muted); background: transparent; white-space: nowrap;
}
.pill:hover { color: var(--text); }
.pill.active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

/* --- underline tabs (for a section WITHIN a page) ------------------------ */
.tabs {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border); margin-bottom: 1.25rem;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: .55rem .8rem; border: 0; background: none;
  cursor: pointer; font: inherit;
  font-size: var(--t-small); font-weight: var(--w-body);
  color: var(--text-soft); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent); border-bottom-color: var(--accent);
  font-weight: var(--w-medium);
}

/* --- form field ---------------------------------------------------------- */
.field { display: block; margin-bottom: 1rem; }
.flabel {
  display: block; margin-bottom: .35rem;
  font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--text-soft);
}
.fhint {
  display: block; margin-top: .35rem;
  font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--hint);
}
.fhint a { color: var(--accent); }
.ferror {
  display: block; margin-top: .35rem;
  font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--critical);
}
.field-row { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.input:disabled, .input[readonly] {
  background: var(--ink-050); color: var(--hint); cursor: not-allowed;
}
textarea.input { resize: vertical; min-height: 5rem; }

/* --- list of rows -------------------------------------------------------- */
.list {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.row {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none; color: inherit;
}
.row:last-child { border-bottom: 0; }
a.row:hover, button.row:hover { background: var(--hover); }
.row-main { min-width: 0; flex: 1; }
.row-name {
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub {
  font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--muted);
  margin-top: .1rem;
}
@media (min-width: 40rem) { .row { padding: .875rem 1.25rem; } }

/* --- label/value pairs --------------------------------------------------- */
.kv { display: grid; gap: .75rem 1.5rem; }
@media (min-width: 34rem) {
  .kv { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.kv > div { min-width: 0; }
.kv .k {
  font-size: var(--t-micro); font-weight: var(--w-medium); color: var(--muted);
}
.kv .v {
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text);
  overflow-wrap: anywhere;
}

/* --- button variants (.btn / .btn.ghost already exist) ------------------- */
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.danger {
  color: var(--critical); background: var(--surface);
  border-color: var(--critical-line);
}
.btn.danger:hover { background: var(--critical-weak); }
.btn.sm { padding: .3rem .6rem; font-size: var(--t-micro); }
.btn.lg { padding: .65rem 1.3rem; font-size: var(--t-body); }
.btn.block { display: block; width: 100%; }
/* An icon-only button still needs a name for a screen reader -- pass
   aria-label, never rely on the glyph. */
.btn.icon { padding: .45rem; line-height: 0; }

/* --- notices ------------------------------------------------------------- */
.notice {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem;
  font-size: var(--t-small); font-weight: var(--w-body); color: var(--text-soft);
}
.notice.ok       { border-color: var(--ok);            background: var(--ok-weak); }
.notice.warn     { border-color: var(--warn-line);     background: var(--warn-weak); }
.notice.critical { border-color: var(--critical-line); background: var(--critical-weak); }
.notice strong { font-weight: var(--w-medium); }
.notice.ok strong       { color: var(--ok); }
.notice.warn strong     { color: var(--warn); }
.notice.critical strong { color: var(--critical); }

/* --- sheet: a bottom sheet on a phone, a side panel on a desktop ---------
   Used by the review screens (Autopilot runs, Precision drafts), where the
   list must stay visible while one item is being read. */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgb(0 0 0 / .42); border: 0; padding: 0;
}
.sheet {
  position: fixed; z-index: 55; inset: auto 0 0 0;
  max-height: 88dvh; display: flex; flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -0.5rem 2rem rgb(0 0 0 / 18%);
}
.sheet-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem; border-bottom: 1px solid var(--border-soft);
}
.sheet-title {
  flex: 1; min-width: 0;
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-body { overflow-y: auto; padding: 1rem; }
.sheet-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-top: 1px solid var(--border-soft);
}
@media (min-width: 48rem) {
  .sheet {
    inset: 0 0 0 auto; width: min(34rem, 100%);
    max-height: none; border-radius: 0;
    border-top: 0; border-left: 1px solid var(--border);
    box-shadow: -0.5rem 0 2rem rgb(0 0 0 / 14%);
  }
}

/* --- misc ---------------------------------------------------------------- */
.hstack { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vstack { display: grid; gap: 1rem; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Platform console. The customer shell with ONE rail, and a visible marker
   that this is staff territory: a change made here affects every client, and
   that should be obvious without reading the URL.
   --------------------------------------------------------------------------- */
.shell.admin .nav {
  background: var(--ink-050);
  border-right-color: var(--border);
}
.shell.admin .nav-product { color: var(--text); }
.shell.admin .nav-head {
  border-top: 3px solid var(--warn);
  padding-top: .8rem;
}
.shell.admin .bar { border-top: 3px solid var(--warn); }

@media (min-width: 62rem) {
  /* One rail, not two: there is no product switcher here. */
  .shell.admin .nav { left: 0; width: 15rem; }
  .shell.admin .body { margin-left: 15rem; }
}