/* Pico styles elements directly, and a bare class can lose to it (design/README
   section 8). Two rules keep this layout predictable: the hidden attribute
   always wins, and the sidebar is a block, not Pico's flex <nav>. */
[hidden] { display: none !important; }

/* ==========================================================================
   Steward surfaces: layout local to the console and the portal.
   Tokens and components come from /assets/theme.css. Everything below reads
   from those variables so light and dark follow the same tokens.
   ========================================================================== */

.st-app { background: var(--bg-subtle); }

/* ---- top bar ------------------------------------------------------------
   Pico pads body > header by itself, which would make our bar taller than the
   58px the drawer is anchored to, so the padding is set explicitly here. */
.st-appbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: 0;
}
.st-appbar-inner {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 58px;
  padding-inline: clamp(12px, 3vw, 20px);
}
.st-appbar-brand {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em;
  color: var(--text); text-decoration: none; margin-inline-end: auto;
}
.st-appbar-sub {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  font-weight: 500;
}
.st-account {
  display: flex; align-items: center; gap: var(--space-3);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--border);
}
.st-account-id { display: grid; line-height: 1.25; text-align: right; }
.st-account-name { font-size: var(--text-md); font-weight: 650; color: var(--text); }
.st-account-role {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.st-avatar {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); border: 1px solid var(--primary-soft-border);
  color: var(--primary-hover);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .04em;
}
/* ---- Google sign-in control --------------------------------------------
   Google's brand rules: their four-colour mark, a white button, no emoji and
   no icon of our own invention. The white stays white in dark mode on purpose. */
.st-google {
  background: #fff; border-color: #dadce0; color: #3c4043;
  font-weight: 600; white-space: nowrap;
}
.st-google:hover { background: #f8f9fa; border-color: #c3c7cc; color: #202124; }
.st-google:active { background: #f1f3f4; border-color: #c3c7cc; }
.st-google svg { flex: none; }
.st-google-wide { width: 100%; }
/* "or use your email": a quiet divider, not a heading */
.st-or {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0; color: var(--text-muted);
  font-size: var(--text-sm);
}
.st-or::before, .st-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---- signed-in account menu -------------------------------------------- */
.st-account-menu { position: relative; }
.st-account-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); padding: 0 var(--space-2);
  border-radius: var(--radius-sm); margin: 0;
}
.st-account-menu > summary:hover { background: var(--bg-muted); }
.st-account-menu > summary::-webkit-details-marker { display: none; }
.st-account-menu > summary::marker { content: none; }
/* Pico draws a chevron on every summary with ::after; here it is noise. */
.st-account-menu > summary::after { display: none; content: none; }
.st-account-menu[open] > summary { background: var(--bg-muted); }
.st-menu {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 60;
  min-width: min(19rem, calc(100vw - 1.5rem));
  display: grid; gap: 2px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.st-menu-head {
  display: grid; gap: 2px; margin: 0 0 var(--space-2);
  padding: var(--space-3); border-bottom: 1px solid var(--border);
}
.st-menu-email { font-size: var(--text-md); font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.st-menu-note { font-size: var(--text-xs); color: var(--text-muted); }
.st-menu-item {
  display: flex; align-items: center; width: 100%; min-height: var(--tap);
  padding: 0 var(--space-3); margin: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-secondary); cursor: pointer;
  font-family: inherit; font-size: var(--text-md); font-weight: 550;
  text-align: left; text-decoration: none;
}
.st-menu-item:hover { background: var(--bg-muted); color: var(--text); }

.st-navbtn {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  margin: 0;
}
.st-navbtn:hover { background: var(--bg-muted); }
.st-nav-toggle { position: fixed; left: -200px; top: 0; }

/* ---- two column layout: persistent sidebar plus content ----------------- */
.st-layout {
  display: grid; grid-template-columns: 238px minmax(0, 1fr);
  align-items: start;
}
/* A console page with nothing to navigate to (a refusal, a failed sign-in). */
.st-layout-single { grid-template-columns: minmax(0, 1fr); }
.st-sidebar {
  display: block;                /* beats Pico's nav { display: flex } */
  position: sticky; top: 58px;
  height: calc(100vh - 58px); overflow-y: auto;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  padding: var(--space-5) var(--space-3);
}
.st-sidebar-head {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 var(--space-3) var(--space-2);
}
.st-navlist {
  list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: grid; gap: 2px; align-content: start;
}
.st-navlist li { margin: 0; padding: 0; list-style: none; }
/* Pico puts negative side margins on nav lists and nav links (design/README
   section 8). Inside our own sidebar we want none of that. */
.st-sidebar ul, .st-sidebar li, .st-sidebar a { margin-inline: 0; }
.st-navlink {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-md); font-weight: 550;
}
.st-navlink:hover { background: var(--bg-muted); color: var(--text); }
.st-navlink[aria-current=page] {
  background: var(--primary-soft); color: var(--primary-hover);
  box-shadow: inset 3px 0 0 var(--primary);
}
.st-navlink .st-badge { margin-inline-start: auto; }
.st-sidebar-note {
  margin: var(--space-4) var(--space-3) 0; padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--text-muted);
}

/* ---- content ------------------------------------------------------------ */
.st-main { min-width: 0; padding: clamp(18px, 3vw, 34px) clamp(12px, 3vw, 30px) var(--space-8); }
.st-page-head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); margin-bottom: var(--space-5); }
.st-page-head > .st-page-titles { margin-inline-end: auto; min-width: 0; }
.st-page-title { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); line-height: 1.2; margin: 0; letter-spacing: -.02em; }
.st-page-lede { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-md); max-width: 68ch; }
.st-section { margin: 0 0 var(--space-6); }
.st-section-title {
  font-size: var(--text-md); font-weight: 650; color: var(--text);
  margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-3);
}
.st-cards { display: grid; gap: var(--space-4); }
.st-panel-pad { padding: var(--space-2) var(--space-4) 0; }

/* ---- table as cards on a phone ----------------------------------------- */
/* The stacked (card) form of a table is the theme's .st-table-stack /
   .st-table-stack-wide component. What lives here is the console's own table
   treatment plus the extras specific to the box list. */
/* A fixed grid with the column widths in a colgroup: the table is then exactly
   as wide as its card at every viewport, so it can never force a horizontal
   scrollbar or push a column out of sight. */
.st-data-table { min-width: 0; table-layout: fixed; width: 100%; }
.st-data-table th, .st-data-table td { overflow-wrap: anywhere; }
.st-data-table td:first-child, .st-data-table th:first-child { padding-inline-end: var(--space-4); }
.st-boxes-table .st-spark-wrap { gap: var(--space-1); flex-wrap: wrap; }
/* the two tones a free-space figure can carry, from the status colours */
.st-tone-warn { color: var(--warning); }
.st-tone-bad { color: var(--danger); }
.st-box-link { color: var(--text); text-decoration: none; }
.st-box-link:hover { color: var(--primary); text-decoration: underline; }
.st-expand { margin-top: var(--space-2); }

@media (max-width: 1120px) {
  .st-boxes-table { font-size: var(--text-md); }
  .st-boxes-table tr.st-detail-row { display: none; }
  .st-boxes-table .st-box-cell h2 { font-size: var(--text-lg); }
  .st-boxes-table .st-box-cell h2 a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .st-boxes-table .st-expand { margin-top: var(--space-3); }
}

/* ---- box cell, pills, meters ------------------------------------------- */
.st-box-cell { padding-right: var(--space-4); }
.st-box-cell h2 {
  margin: 0; font-size: var(--text-base); font-weight: 650;
  font-family: var(--font-mono); letter-spacing: -.01em; color: var(--text);
}
.st-box-host {
  display: block; margin-top: 2px;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: 0; color: var(--text-muted);
}
.st-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-detail-row > td { padding-top: 0; background: var(--surface-sunken); }
.st-detail {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}
.st-detail-plain { padding: 0; border-top: 0; }
.st-detail h3 {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.st-detail h3 .st-muted { text-transform: none; letter-spacing: 0; }
.st-kv { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--text-secondary); }
.st-kv b { color: var(--text); font-weight: 650; }
.st-kv .st-muted { color: var(--text-muted); }
.st-badge-accent { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-ink); }
.st-stat-accent { border-top: 2px solid var(--accent); }
.st-stat-accent .st-stat-value { color: var(--accent-ink); }
.st-stat-success .st-stat-value { color: var(--success); }
.st-stat-warning .st-stat-value { color: var(--warning); }
.st-stat-danger .st-stat-value { color: var(--danger); }
.st-alert-limit {
  background: var(--accent-soft); border-color: var(--accent-border);
  border-left-color: var(--accent); color: var(--accent-ink);
}
.st-alert-limit .st-alert-title { color: var(--accent-ink); }
.st-alert-limit a { color: var(--accent-ink); }
.st-limit-flag {
  margin: 0 0 var(--space-2); font-weight: 700; color: var(--accent-ink);
  font-size: var(--text-md); letter-spacing: .01em;
}
.st-table-compact th, .st-table-compact td { padding-inline-end: var(--space-3); }
.st-table-compact td:last-child { white-space: nowrap; }
.st-table-compact th:first-child, .st-table-compact td:first-child { padding-inline-end: var(--space-4); }
.st-pillrow { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.st-meter {
  display: inline-block; width: 74px; height: 6px; border-radius: 999px;
  background: var(--bg-muted); overflow: hidden; vertical-align: middle;
  border: 1px solid var(--border); flex: none;
}
.st-meter > span { display: block; height: 100%; background: var(--primary); }
.st-meter.st-meter-warn > span { background: var(--warning); }
.st-meter.st-meter-bad > span { background: var(--danger); }
.st-spark { display: block; color: var(--primary); }
.st-spark.st-spark-warn { color: var(--warning); }
.st-spark.st-spark-bad { color: var(--danger); }
.st-spark-wrap { display: flex; align-items: center; gap: var(--space-3); }
.st-spark-note { font-size: var(--text-xs); color: var(--text-muted); }

/* ---- confirmation state for a destructive action ----------------------- */
.st-confirm { display: inline-block; margin: 0 var(--space-2) var(--space-2) 0; }
.st-confirm > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; margin: 0;
}
.st-confirm > summary::-webkit-details-marker { display: none; }
.st-confirm > summary::marker { content: none; }
/* Pico draws a chevron on every summary with ::after (design/README section 8);
   inside our own button shaped summary it is noise. */
.st-confirm > summary::after { display: none; content: none; }
.st-confirm[open] > summary { background: var(--bg-muted); }
.st-confirm-body {
  margin-top: var(--space-3); padding: var(--space-4);
  background: var(--surface-sunken); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--danger); border-radius: var(--radius-sm);
  max-width: 46ch;
}
.st-confirm-danger .st-confirm-body { border-left-color: var(--danger); }
.st-confirm-body p { margin: 0 0 var(--space-3); font-size: var(--text-md); color: var(--text-secondary); }
.st-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- customer management: a filter bar and a copyable command ------------- */
.st-filterbar {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end;
  margin: 0 0 var(--space-4);
}
.st-filterbar .st-field { margin: 0; min-width: min(16rem, 100%); flex: 1 1 14rem; }
.st-filterbar .st-field input, .st-filterbar .st-field select { margin: 0; }
.st-form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.st-form-grid .st-field { margin: 0; }
.st-form-wide { grid-column: 1 / -1; }
.st-cmd {
  margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow-x: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.st-cmd code { display: block; background: none; border: 0; padding: 0; font-family: var(--font-mono); font-size: var(--text-sm); white-space: inherit; overflow-wrap: inherit; }
/* A long value (an endpoint URL) that must wrap on a phone instead of spilling
   out of its card. It is deliberately not .st-num, which stays nowrap. */
.st-endpoint { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.st-steps { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); color: var(--text-secondary); }
.st-steps li { margin: 0 0 var(--space-2); }
.st-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: start; }
/* Portal access on a customer page: one row per portal email, wrapping on a
   phone instead of scrolling sideways. The email wraps rather than spilling. */
.st-portal-user { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.st-portal-user:first-child { padding-top: 0; border-top: 0; }
.st-portal-email { font-weight: 650; overflow-wrap: anywhere; }
.st-portal-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-2); }

/* ---- display-once value (a freshly minted probe token) ------------------
   The value sits in a read-only field so it can be selected by hand when
   JavaScript is off; the copy button is revealed by UI_JS. */
.st-copyrow { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.st-copyrow .st-token-field { flex: 1 1 22ch; min-width: 0; margin: 0; }

/* ==========================================================================
   Console: a Tabler-like operator shell, in the Steward language.
   Scoped to .st-app / .st-appbar / .st-sidebar, so the marketing site and the
   customer portal keep their calmer, roomier treatment. Structure: a compact
   command bar, an icon-led sidebar, a page header on a rule, then panels.
   ========================================================================== */

/* -- top bar: a compact command strip ------------------------------------ */
.st-appbar { box-shadow: 0 1px 0 rgba(2, 6, 23, .05); }
.st-appbar-inner { min-height: 58px; padding-inline: clamp(12px, 2.4vw, 20px); }
/* Reuse the shared wordmark, mark included, and redraw the mark's inner gap
   against the bar's surface instead of the page ground. This is the same
   square ring the public site draws in .st-topbar, only sized for a tool. */
.st-appbar .st-brand { align-items: center; gap: var(--space-3); font-size: var(--text-base); }
.st-appbar .st-brand::before {
  width: 22px; height: 22px; border-width: 2px; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 5px var(--primary);
}
.st-appbar-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--text-muted); }

/* -- sidebar: icon led, one clear current item ---------------------------- */
.st-sidebar { width: 250px; padding: var(--space-4) var(--space-2) var(--space-6); }
.st-sidebar-head { margin: 0 var(--space-2) var(--space-2); }
.st-navlist { gap: 2px; }
.st-navlink {
  min-height: var(--tap); padding: 0 var(--space-3); gap: var(--space-3);
  border-radius: var(--radius-sm); position: relative;
  transition: background var(--transition), color var(--transition);
}
.st-navicon { width: 18px; height: 18px; flex: none; color: var(--text-muted); transition: color var(--transition); }
.st-navlink:hover { background: var(--bg-muted); }
.st-navlink:hover .st-navicon { color: var(--text-secondary); }
.st-navlink[aria-current=page] {
  background: var(--primary-soft); color: var(--primary-hover); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primary);
}
.st-navlink[aria-current=page] .st-navicon { color: var(--primary-hover); }
.st-navlink .st-badge { margin-inline-start: auto; }
.st-sidebar-note { margin-inline: var(--space-2); }

/* -- content: a page header on a rule ------------------------------------- */
.st-app .st-page-head {
  padding-bottom: var(--space-4); margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border); align-items: center;
}
.st-app .st-page-title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; }
.st-app .st-page-lede { margin-top: var(--space-1); }
.st-app .st-section { margin-bottom: var(--space-6); }
.st-app .st-section-title { font-size: var(--text-md); font-weight: 650; letter-spacing: -.005em; }

/* panels sit a little squarer and tighter than the marketing cards, because
   this is a tool rather than a landing page */
.st-app .st-card, .st-app .st-stat, .st-app .st-chart-card { border-radius: var(--radius-sm); }
.st-app .st-card { padding: var(--space-4) var(--space-5); }
.st-app .st-panel-pad { padding: var(--space-2) var(--space-4) var(--space-1); }
.st-app .st-alert { border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }

/* -- a segmented summary bar: one surface, hairline dividers -------------- */
.st-app .st-stat-grid {
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.st-app .st-stat { border: 0; border-radius: 0; padding: var(--space-4) var(--space-5); }
.st-app .st-stat-value { font-size: var(--text-xl); }
/* the strained tile keeps its coral cue as an inner top edge inside the bar */
.st-app .st-stat-accent { border-top: 0; box-shadow: inset 0 2px 0 var(--accent); }
.st-app .st-stat-success .st-stat-value { color: var(--success); }

/* -- table: a quiet head, a row hover, middle-aligned figures ------------- */
.st-app .st-data-table thead th {
  color: var(--text-muted); border-bottom-color: var(--border-strong);
  letter-spacing: .1em; overflow-wrap: normal;   /* a short header stays on one line */
}
.st-app .st-data-table th + th { padding-left: var(--space-4); }
.st-app .st-data-table td { vertical-align: middle; }
.st-app .st-data-table tbody tr.st-box-row { transition: background var(--transition); }
.st-app .st-data-table tbody tr.st-box-row:hover { background: var(--surface-sunken); }

/* -- status reads as a tag: uppercase, square, small ---------------------- */
.st-app .st-badge {
  padding: 1px var(--space-2); border-radius: var(--radius-xs);
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px; line-height: 1.6;
}

/* The account menu: the Google control sits inside it as an account option,
   never as a call to action beside a live session. */
.st-menu .st-google { margin: var(--space-1) 0; }

/* ---- history charts (box history: console + portal) ---------------------- */
.st-history .st-section-title { margin-bottom: var(--space-4); }
.st-range { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.st-range-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.st-range ul { list-style: none; display: flex; gap: var(--space-1); margin: 0; padding: 0; }
.st-range li { list-style: none; margin: 0; }
.st-range a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-md); font-weight: 550;
}
.st-range a:hover { background: var(--bg-muted); color: var(--text); }
.st-range a[aria-current=page] { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-hover); }

.st-chart-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-4);
}
.st-chart { margin: 0; }
.st-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.st-chart-title { margin: 0; font-size: var(--text-md); font-weight: 650; color: var(--text); }
.st-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--text-xs); }
.st-chart-stats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.st-chart-stat { white-space: nowrap; }
/* the axis figures live in HTML beside the SVG so they stay legible on a phone */
.st-chart-plot { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
.st-chart-y { position: relative; height: var(--chart-h, 170px); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.st-chart-y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.st-chart-svg { display: block; width: 100%; height: var(--chart-h, 170px); }
.st-chart-x { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--space-2); margin-top: var(--space-1); }
.st-chart-xticks { display: flex; justify-content: space-between; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.st-chart-grid { stroke: var(--border); stroke-width: 1; }
.st-chart-limit { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.st-chart-event { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.st-chart-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.st-chart-single { stroke-width: 2.6; }
.st-chart-load { stroke: var(--primary); }
.st-chart-mem { stroke: var(--brand-400); }
.st-chart-disk { stroke: var(--brand-500); }
.st-chart-strip { display: block; width: 100%; height: 22px; border: 1px solid var(--border); border-radius: 2px; }
.st-status-up { fill: var(--success); }
.st-status-warn { fill: var(--warning); }
.st-status-down { fill: var(--danger); }
.st-status-none { fill: var(--bg-muted); }
.st-swatch-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.st-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; flex: none; }
.st-swatch.st-status-up { background: var(--success); }
.st-swatch.st-status-warn { background: var(--warning); }
.st-swatch.st-status-down { background: var(--danger); }
.st-swatch.st-status-none { background: var(--bg-muted); border: 1px solid var(--border); }
.st-swatch-line { display: inline-block; width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; flex: none; }
.st-swatch-line.st-chart-load { border-top-color: var(--primary); }
.st-swatch-line.st-chart-mem { border-top-color: var(--brand-400); }
.st-swatch-line.st-chart-disk { border-top-color: var(--brand-500); border-top-style: dashed; }
.st-swatch-line.st-chart-limit-swatch { border-top-color: var(--accent); border-top-style: dashed; }
.st-history-note { margin: var(--space-2) 0 0; max-width: 80ch; }

/* ---- portal ------------------------------------------------------------- */
.st-portal-nav {
  border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 40;
  padding-block: 0;               /* see .st-appbar: Pico pads body > header */
}
/* the sign-out control keeps its own width while the anchor strip scrolls */
.st-portal-nav .st-btn { flex: none; white-space: nowrap; }
.st-portal-nav .st-container { display: flex; align-items: center; gap: var(--space-4); min-height: 58px; }
.st-portal-links { list-style: none; display: flex; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; overflow-x: auto; }
/* list-style has to be set on the <li> itself: Pico sets it there (design/README section 8). */
.st-portal-links li { margin: 0; flex: none; list-style: none; }
.st-portal-links li::marker { content: none; }
.st-portal-links a {
  display: inline-block; padding: var(--space-2) 0; min-height: 44px; line-height: 28px;
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-md); font-weight: 500;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.st-portal-links a:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.st-portal-links a[aria-current=page] { color: var(--primary); border-bottom-color: var(--primary); }
/* padding-block only: a shorthand here would wipe .st-container's padding-inline. */
.st-portal-main { padding-block: clamp(20px, 4vw, 36px) var(--space-8); }
.st-portal-section { margin: 0 0 var(--space-6); scroll-margin-top: 84px; }
/* a single column of work, centred: nothing sits opposite it to fill the page */
.st-signin { max-width: 30rem; margin-inline: auto; }
.st-usage-bar { display: inline-block; height: 8px; border-radius: 999px; background: var(--primary); min-width: 2px; }
.st-usage-track { background: var(--bg-muted); border-radius: 999px; width: 100%; min-width: 60px; }
.st-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---- narrow screens: hamburger drawer ---------------------------------- */
@media (max-width: 900px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-navbtn { display: inline-flex; }
  .st-sidebar {
    position: fixed; inset: 58px 0 auto 0; z-index: 45;
    height: auto; max-height: calc(100vh - 58px); overflow-y: auto;
    padding-top: var(--space-4);
    border-inline-end: 0; border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .st-sidebar-head { display: none; }   /* the top bar already names the product */
  .st-nav-toggle:checked ~ .st-layout .st-sidebar { display: block; }
  .st-scrim { display: none; }
  .st-nav-toggle:checked ~ .st-scrim {
    display: block; position: fixed; inset: 58px 0 0 0; z-index: 44;
    background: rgba(2, 6, 23, .45);
  }
  .st-account-id { display: none; }
  .st-main { padding-top: var(--space-5); }
}
@media (min-width: 901px) {
  .st-nav-toggle { display: none; }
}
@media (max-width: 520px) {
  .st-appbar-sub { display: none; }
  .st-account { padding-inline-start: var(--space-2); gap: var(--space-2); }
  /* Google's rules fix the wording, so on a narrow bar the button loses
     padding instead: the label stays "Sign in with Google". It also grows to
     the full 44px touch target, because on a phone it is the whole point. */
  .st-google.st-btn-sm { padding: 0 var(--space-3); min-height: var(--tap); }
  .st-page-head { align-items: start; }
  .st-portal-nav .st-container { gap: var(--space-3); }
  .st-portal-links { gap: var(--space-1) var(--space-4); }
  /* a two-line tile label should not push one value below its neighbour */
  .st-stat-label { min-height: 2.6em; }
}