/* ============================================================================
   Growyo Brain — design system
   ----------------------------------------------------------------------------
   Shares its DNA with Growyo Reviews (same gray ramp, same indigo accent, same
   4/8px rhythm and radius/shadow scales) so the two internal tools read as one
   suite. Everything here is token-driven: to restyle the portal, change the
   tokens, not the components.

   On colour: the Growyo brand green belongs to the LOGO and to "this is good"
   (enriched, healthy, connected). The accent — the colour of things you click —
   is indigo. Keeping them separate is what lets an "enriched" badge mean
   something instead of blending into every button on the page.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Neutral ramp */
  --gray-50:  #f8fafc;
  --gray-100: #f1f4f8;
  --gray-150: #e9edf3;
  --gray-200: #e2e7ef;
  --gray-300: #d3dae4;
  --gray-400: #aab4c2;
  --gray-500: #7a8597;
  --gray-600: #5a6678;
  --gray-700: #424d5e;
  --gray-800: #2a3340;
  --gray-900: #18202b;
  --gray-950: #0e141c;

  /* One confident accent */
  --accent:        #3257e8;
  --accent-hover:  #2845c4;
  --accent-active: #1f37a0;
  --accent-soft:   #eef2fe;
  --accent-ink:    #2845c4;
  --accent-ring:   rgba(50, 87, 232, 0.35);

  /* Growyo brand green — logo + "this is good" */
  --brand:       #00ad4b;
  --brand-deep:  #005d2c;
  --brand-bright:#00d15f;

  /* Semantic */
  --success:      #15824a;
  --success-soft: #e7f6ed;
  --success-ink:  #0f6b3c;
  --success-line: rgba(21, 130, 74, 0.22);
  --warning:      #9a6a12;
  --warning-soft: #fcf2da;
  --warning-ink:  #845611;
  --warning-line: rgba(154, 106, 18, 0.24);
  --danger:       #c2410c;
  --danger-hover: #a4350a;
  --danger-soft:  #fdeee7;
  --danger-ink:   #9a3412;
  --danger-line:  rgba(194, 65, 12, 0.22);

  /* Surfaces */
  --bg:          var(--gray-100);
  --panel:       #ffffff;
  --panel-soft:  var(--gray-50);
  --line:        var(--gray-200);
  --line-strong: var(--gray-300);
  --ink:         var(--gray-900);
  --ink-soft:    var(--gray-700);
  --muted:       var(--gray-500);

  /* Sidebar */
  --side-bg:        #141b26;
  --side-bg-soft:   #1c2532;
  --side-ink:       #cfd8e3;
  --side-ink-dim:   #8995a6;
  --side-line:      rgba(255, 255, 255, 0.07);
  --side-active-bg: rgba(255, 255, 255, 0.10);

  /* Spacing (4/8px rhythm) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 1px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 18px 44px -12px rgba(16, 24, 40, 0.22), 0 6px 16px -8px rgba(16, 24, 40, 0.12);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur: 150ms;

  --sidebar-w: 252px;
}

/* The portal is LIGHT ONLY, deliberately. `color-scheme: light` above tells the browser to keep
   form controls, scrollbars and the canvas light even when the OS is set to dark, so there is no
   prefers-color-scheme block here — the palette must not follow the system theme. */

/* ------------------------------- Base ----------------------------------- */
* { box-sizing: border-box; }
/* The hidden attribute must always win. Without this, any element that carries an explicit
   display (e.g. .field's grid) ignores hidden entirely — the UA's display:none loses to it. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--accent-ring); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
strong { font-weight: 640; color: var(--ink); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* --------------------------- Shell / sidebar ---------------------------- */
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.sidebar {
  background: var(--side-bg);
  color: var(--side-ink);
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  border-right: 1px solid var(--side-line);
}

.brand { display: block; padding: 0 var(--sp-2); }
.brand img { display: block; width: 150px; max-width: 100%; height: auto; }
.brand:hover { text-decoration: none; }

/* BRAIN reads as the second line of the wordmark, not as a caption: same heavy uppercase weight,
   a cap height matched to GROWYO, and the logo's own gradient stops (identical to the ones in the
   Growyo mark) so the two lines traverse the same green. The emoji leads the word (Zack's call). */
.brand .brand-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.brand .brand-emoji { font-size: 22px; line-height: 1; flex: none; }
.brand .brand-word {
  background: linear-gradient(90deg, #00d15f 0%, #00ad4b 45%, #005d2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* If a browser can't clip a gradient to text, transparent fill would render nothing at all. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand .brand-word { color: var(--brand-bright); -webkit-text-fill-color: currentColor; }
}

.nav { display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto; flex: 1; }
.nav-group { display: grid; gap: 2px; }
.nav-label {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--side-ink-dim);
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--side-ink);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background: var(--side-bg-soft); color: #fff; text-decoration: none; }
.nav a.active { background: var(--side-active-bg); color: #fff; font-weight: 600; }
.nav a.active::before {
  content: "";
  position: absolute;
  left: -4px; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-bright);
}
.nav a .ico { width: 17px; height: 17px; flex: none; opacity: 0.82; }
.nav a.active .ico, .nav a:hover .ico { opacity: 1; }
.nav a .count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  color: var(--side-ink);
}
.nav a .count.alert { background: rgba(217, 164, 65, 0.22); color: #edc47c; }

/* Signed-in identity, pinned to the bottom */
.side-user {
  border-top: 1px solid var(--side-line);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}
.side-user .who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: 0 var(--sp-2); }
.side-user .avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand-bright), var(--brand-deep));
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0;
}
.side-user .email {
  font-size: 12px;
  color: var(--side-ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.side-user form { margin: 0; }
.side-user .signout {
  width: 100%;
  min-height: 32px;
  background: transparent;
  border: 1px solid var(--side-line);
  color: var(--side-ink-dim);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
}
.side-user .signout:hover { background: var(--side-bg-soft); color: #fff; border-color: rgba(255,255,255,0.14); }

main {
  padding: var(--sp-7) var(--sp-8) var(--sp-9);
  max-width: 1320px;
  width: 100%;
  min-width: 0;
}

/* ------------------------------ Headings -------------------------------- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-head .actions { flex: none; }

h1 {
  font-size: 26px; line-height: 1.18; font-weight: 680;
  letter-spacing: -0.024em; margin: 0 0 var(--sp-1); color: var(--ink);
}
h2 {
  font-size: 17px; line-height: 1.3; font-weight: 640;
  letter-spacing: -0.018em; margin: 0 0 var(--sp-4); color: var(--ink);
}
h3 {
  font-size: 13px; font-weight: 650; letter-spacing: -0.008em;
  margin: 0 0 var(--sp-2); color: var(--ink-soft);
}
h2 .h2-note, h1 .h1-note {
  font-weight: 450;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -0.006em;
}
.subtitle { color: var(--muted); margin: 0; font-size: 13.5px; }
.muted { color: var(--muted); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

.breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 550;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}
.breadcrumb:hover { color: var(--accent); text-decoration: none; }

/* -------------------------------- Grid ---------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.five  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stack { display: grid; gap: var(--sp-4); }

/* ------------------------------- Panels --------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.panel.flush { padding: 0; overflow: hidden; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; }
.panel-body { padding: var(--sp-5); }

/* ------------------------------ Metrics --------------------------------- */
.metric { display: flex; flex-direction: column; gap: var(--sp-1); }
.metric .value {
  font-size: 30px; line-height: 1.05; font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.metric .label {
  font-weight: 600; font-size: 13px; color: var(--ink-soft); letter-spacing: -0.006em;
}
.metric .metric-desc { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: var(--sp-1); }
a.panel.metric-link { display: block; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.panel.metric-link:hover {
  text-decoration: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
a.panel.metric-link:hover .value { color: var(--accent); }

/* Accent bar on the left of a metric to key it to a status colour */
.metric.keyed { padding-left: var(--sp-4); border-left: 3px solid var(--line-strong); margin-left: -1px; }
.metric.keyed.ok    { border-left-color: var(--success); }
.metric.keyed.warn  { border-left-color: var(--warning); }
.metric.keyed.info  { border-left-color: var(--accent); }
.metric.keyed.quiet { border-left-color: var(--gray-400); }

/* ------------------------------- Tables --------------------------------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--panel);
  color: var(--muted);
  font-size: 11px; font-weight: 650;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 12px 10px; text-align: left;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
  white-space: nowrap;
}
tbody td {
  border-bottom: 1px solid var(--line);
  text-align: left; padding: 12px; vertical-align: middle; color: var(--ink-soft);
}
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover td { background: var(--panel-soft); }
tbody tr:last-child td { border-bottom: 0; }
td a { font-weight: 560; color: var(--accent); }
td .muted { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody th {
  text-align: left; padding: 12px; color: var(--muted);
  font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
  white-space: nowrap; border-bottom: 1px solid var(--line); vertical-align: top;
}

/* A table that sits flush inside a .panel.flush */
.panel.flush table thead th { padding: var(--sp-4) var(--sp-5) 10px; }
.panel.flush table tbody td { padding: 12px var(--sp-5); }
.table-wrap { overflow-x: auto; }

/* Primary cell: name on top, quiet detail underneath */
.cell-main { display: grid; gap: 1px; min-width: 0; }
.cell-main .sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* ------------------------------ Buttons --------------------------------- */
.actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.inline-form { display: inline-flex; margin: 0; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: -0.006em;
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
button:hover, .button:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
button:active, .button:active { background: var(--accent-active); transform: translateY(0.5px); box-shadow: none; }
button:focus-visible, .button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

button.secondary, .button.secondary {
  background: var(--panel); color: var(--ink); border-color: var(--line-strong);
}
button.secondary:hover, .button.secondary:hover {
  background: var(--panel-soft); border-color: var(--gray-400); color: var(--ink);
}
button.secondary:focus-visible, .button.secondary:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }

button.success, .button.success { background: var(--success); color: #fff; }
button.success:hover, .button.success:hover { background: var(--success-ink); color: #fff; }
button.success:focus-visible, .button.success:focus-visible { box-shadow: 0 0 0 3px rgba(21, 130, 74, 0.35); }

button.ghost, .button.ghost {
  background: transparent; color: var(--ink-soft); border-color: transparent; box-shadow: none;
}
button.ghost:hover, .button.ghost:hover { background: var(--panel-soft); color: var(--ink); }

button.small, .button.small { min-height: 32px; padding: 6px 11px; font-size: 12.5px; }
button:disabled, .button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.linkbtn {
  background: none; border: none; padding: 0; margin: 0; min-height: 0;
  font: inherit; color: var(--accent); cursor: pointer; box-shadow: none;
}
.linkbtn:hover { background: none; color: var(--accent-hover); text-decoration: underline; }

/* --------------------------- Forms / inputs ----------------------------- */
.field { display: grid; gap: var(--sp-2); align-content: start; }
.field > span { font-weight: 600; font-size: 13px; color: var(--ink-soft); }

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: inherit; font-size: 14px; line-height: 1.4;
  background: var(--panel); color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
input:hover, textarea:hover, select:hover { border-color: var(--gray-400); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
textarea { resize: vertical; min-height: 84px; }
input[type="checkbox"], input[type="radio"] {
  width: auto; -webkit-appearance: auto; appearance: auto;
  accent-color: var(--accent); margin-right: var(--sp-2); vertical-align: middle;
}
.help { color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Search box with a leading icon */
.search {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 340px;
}
.search input { padding-left: 36px; }
.search .ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}

/* Filter chips */
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  min-height: 32px;
  box-shadow: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--panel-soft); color: var(--ink); border-color: var(--gray-400); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip[aria-pressed="true"]:hover { background: var(--accent-hover); color: #fff; }
.chip .n { font-variant-numeric: tabular-nums; opacity: 0.72; font-weight: 650; }

.toolbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* -------------------------------- Pills --------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius-pill);
  padding: 3px 9px 3px 8px;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em; line-height: 1.5;
  white-space: nowrap;
  background: var(--gray-150); color: var(--ink-soft);
  border: 1px solid transparent;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.85; flex: none;
}
.pill.no-dot::before { display: none; }
/* A pill carrying a sentence rather than a status word has to be allowed to wrap. Left nowrap it
   is wider than the cell it sits in, which pushes the whole PAGE into a horizontal scroll at
   common laptop widths — the kv column only gets generous below ~1400px. */
.pill.wrap { white-space: normal; text-align: left; }
.pill.wrap::before { margin-top: 0.45em; align-self: flex-start; }
.pill-enriched, .pill-ok {
  background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line);
}
.pill-day-one, .pill-warn {
  background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning-line);
}
.pill-alert { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-line); }
.pill-info { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-ring); }
.pill-none, .pill-quiet {
  background: var(--panel-soft); color: var(--muted); border-color: var(--line);
}

/* ------------------------------ Callouts -------------------------------- */
.callout {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.callout .callout-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.callout .callout-body { min-width: 0; flex: 1; }
.callout h2, .callout h3 { margin-bottom: var(--sp-1); }
.callout.warn {
  background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning-ink);
}
.callout.warn h2, .callout.warn h3, .callout.warn strong { color: var(--warning-ink); }
.callout.danger {
  background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink);
}
.callout.danger h2, .callout.danger h3, .callout.danger strong { color: var(--danger-ink); }
.callout.info { background: var(--accent-soft); border-color: var(--accent-ring); }
.callout.success {
  background: var(--success-soft); border-color: var(--success-line); color: var(--success-ink);
}

/* ------------------------- Key / value lists ---------------------------- */
.kv { display: grid; grid-template-columns: minmax(120px, 168px) minmax(0, 1fr); gap: 10px var(--sp-4); margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; font-weight: 550; }
.kv dd { margin: 0; color: var(--ink); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.kv + .kv { margin-top: 10px; }

/* --------------------------- Disclosure --------------------------------- */
details.disclose {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}
details.disclose > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px var(--sp-4);
  font-weight: 600; font-size: 13.5px; color: var(--ink);
  display: flex; align-items: center; gap: var(--sp-2);
  transition: background var(--dur) var(--ease);
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background: currentColor;
  opacity: 0.55;
  transition: transform var(--dur) var(--ease);
  /* chevron-right */
  -webkit-mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
  mask: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}
details.disclose[open] > summary::before { transform: rotate(90deg); }
details.disclose > summary:hover { background: var(--panel-soft); }
details.disclose[open] > summary { border-bottom: 1px solid var(--line); }
details.disclose .disclose-body { padding: var(--sp-4); }
details.disclose .disclose-body > table { margin-top: 0; }
details.disclose .disclose-body.flush { padding: 0; }
.summary-note { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--muted); }

/* ------------------------------- Lists ---------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}
.checklist li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-top: 8px; opacity: 0.65;
}
.checklist.warn li::before { background: var(--warning); }
/* Short items (a service list) read better across columns than as one long ribbon. */
.checklist.cols { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px var(--sp-5); }
.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.empty {
  color: var(--muted); padding: var(--sp-8) var(--sp-4); text-align: center;
  font-size: 13.5px;
}
.empty strong { display: block; color: var(--ink-soft); margin-bottom: var(--sp-1); font-size: 14px; }

/* ------------------------------- Login ---------------------------------- */
.auth {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--sp-6);
  background:
    radial-gradient(900px 460px at 50% -8%, var(--accent-soft), transparent 68%),
    radial-gradient(620px 320px at 88% 108%, rgba(0, 173, 75, 0.10), transparent 70%),
    var(--bg);
}
.auth .panel {
  width: min(420px, 100%);
  padding: var(--sp-8) var(--sp-7) var(--sp-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.auth .auth-logo { display: block; width: 158px; margin: 0 auto var(--sp-5); }
.auth h1 { font-size: 21px; margin-bottom: var(--sp-2); }
.auth .subtitle { margin-bottom: var(--sp-6); }
.auth .button { width: 100%; min-height: 44px; font-size: 14px; }
.auth .foot { margin-top: var(--sp-5); font-size: 12px; color: var(--muted); }

/* Google's mark sits on white inside the button */
.gmark { width: 18px; height: 18px; background: #fff; border-radius: 2px; padding: 1px; flex: none; }

/* ----------------------------- Standalone ------------------------------- */
/* Error page shown with no shell around it */
.standalone {
  min-height: 100vh;
  display: grid; place-items: center; padding: var(--sp-6);
  background: var(--bg);
}
.standalone .panel {
  width: min(560px, 100%);
  padding: var(--sp-7);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* --------------------------- Coverage bar ------------------------------- */
.bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.bar > span { display: block; height: 100%; min-width: 0; }
.seg-enriched { background: var(--success); }
.seg-day-one  { background: var(--warning); }
.seg-none     { background: var(--gray-300); }

.legend { display: grid; gap: 10px; margin-top: var(--sp-4); }
.legend > div { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--ink-soft); }
.legend .swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend .n { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }

/* --------------------------- Status dots -------------------------------- */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.ok { background: var(--success); }
.dot.warn { background: var(--warning); }
.dot.bad { background: var(--danger); }
.dot.off { background: var(--gray-400); }

.status-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.status-row:last-child { border-bottom: 0; }
.status-row .name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.status-row .name .sub { display: block; font-weight: 450; font-size: 12px; color: var(--muted); }
.status-row .state { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* ------------------------------ JSON editor ----------------------------- */
.code-editor {
  min-height: 420px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--panel-soft);
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 2;
}

/* ---------------------------- Skip link --------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----------------------------- Responsive ------------------------------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  }
  .brand { padding: 0; }
  .brand img { width: 120px; }
  .brand .brand-sub { display: none; }
  .nav {
    flex-direction: row; align-items: center; gap: var(--sp-2);
    flex: 1 1 100%; overflow-x: auto; order: 3;
  }
  .nav-group { grid-auto-flow: column; gap: var(--sp-1); }
  .nav-label { display: none; }
  .nav a { padding: 8px 11px; }
  .nav a.active::before { display: none; }
  .side-user {
    border-top: 0; padding-top: 0; margin-left: auto;
    grid-auto-flow: column; align-items: center; gap: var(--sp-3);
  }
  .side-user .email { display: none; }
  .side-user .signout { width: auto; padding: 6px 11px; }

  main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .grid.two, .grid.three, .grid.four, .grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv { grid-template-columns: 1fr; gap: 2px var(--sp-4); }
  .kv dd { margin-bottom: var(--sp-2); }

  /* Tables scroll sideways inside their wrapper. Without the min-width the columns get squeezed
     until words break one character per line, which is unreadable — a horizontal scroll is the
     honest trade for a dense table on a narrow screen. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap > table { min-width: 640px; }
}

@media (max-width: 560px) {
  .grid.two, .grid.three, .grid.four, .grid.five { grid-template-columns: 1fr; }
  .page-head { display: grid; }
  h1 { font-size: 22px; }
  .search { max-width: none; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  button:active, .button:active, a.panel.metric-link:hover { transform: none; }
}