/* The site's pages: home, sign in, account and the admin's Requests and
   Analytics. The header, shared with the demo page, is header.css.

   Follows the bank project's design system: its light and dark tokens, one
   type pair (fonts.css), a 4px spacing grid, four radii plus a pill, two
   shadow steps, flat buttons, and motion only to confirm an action (the
   busy spinner, a toast arriving). No emoji anywhere in the UI. */

/* An element with [hidden] stays hidden whatever display a rule gives it. */
[hidden] { display: none !important; }

/* ── Theme tokens ─────────────────────────────────────────────────────────
   The bank project's values. Every text colour clears 4.5:1 against
   --bg-row-hover, the darkest (or lightest) surface text can land on. */
:root,
[data-theme="light"] {
  --bg-base: #F5F3EF;
  --bg-surface: #FFFFFF;
  --bg-elevated: #EDEAE3;
  --bg-row-alt: #F7F5F1;
  --bg-row-hover: #EAE6DC;
  --accent: #1D5AA8;           /* 5.47:1 on --bg-row-hover */
  --accent-dim: rgba(29, 90, 168, 0.09);
  --danger: #B02020;           /* 5.46:1 */
  --positive: #2A6E2E;         /* 4.99:1 */
  --text-primary: #1C1B1A;
  --text-secondary: #4A453F;   /* 7.60:1 */
  --text-muted: #625D57;       /* 5.22:1 */
  --on-accent: #FFFFFF;        /* text on --accent, 6.82:1 */
  --border: rgba(20, 20, 20, 0.08);
  --border-strong: rgba(20, 20, 20, 0.16);
  --border-accent: rgba(29, 90, 168, 0.30);
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-2: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.10);
}

[data-theme="dark"] {
  --bg-base: #0B0C0E;
  --bg-surface: #141518;
  --bg-elevated: #1B1D21;
  --bg-row-alt: #1B1D21;
  --bg-row-hover: #232629;
  --accent: #5B9BF0;           /* 5.35:1 on --bg-row-hover */
  --accent-dim: rgba(91, 155, 240, 0.14);
  --danger: #FF7B72;           /* 6.03:1 */
  --positive: #7FC97A;
  --text-primary: #F5F6F7;
  --text-secondary: #B4B8BF;   /* 7.63:1 */
  --text-muted: #8A8F98;       /* 4.68:1 */
  /* A light blue: white on it fails (2.84:1), the page colour clears it. */
  --on-accent: #0B0C0E;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(91, 155, 240, 0.32);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root {
  --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
input, select, textarea, button { font-family: inherit; }
/* The gutter is reserved whether or not a scrollbar is showing, so opening
   the menu drawer -- which locks scrolling -- cannot shift the page sideways. */
html { scrollbar-gutter: stable; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--accent); }
main a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3 { margin-top: 0; font-family: var(--font-display); }
h1 { font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
h2 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin-bottom: 12px; }

.muted { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 16px; }
.aside { color: var(--text-muted); font-size: 0.9rem; margin: 16px 0 0; }
.lede { font-size: 1.125rem; color: var(--text-secondary); margin: 0 0 12px; }

/* ── Layout ───────────────────────────────────────────────────────────── */
.container { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }
.container.wide { max-width: 1152px; }
.page-head { margin-bottom: 24px; }
.page-head p { margin: 0; }
.page-head p + p { margin-top: 8px; }

.card, .panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 24px;
  margin-bottom: 24px;
}
.card.narrow { max-width: 400px; margin: 24px auto; }
.panel h2 { margin-bottom: 4px; }
.panel > .muted { margin: 0 0 16px; font-size: 0.875rem; }

/* ── Flash toasts ─────────────────────────────────────────────────────── */
.alert { padding: 8px 16px; margin: 0 0 16px; border-radius: var(--radius); font-size: 0.9rem; }
/* Hardcoded pairs on purpose: legible on their own fill in either theme. */
.alert-success { background: #1A6E2E; color: #FFFFFF; }
.alert-danger { background: #991B1B; color: #FFFFFF; }
.alert-toast {
  position: fixed; top: 60px; right: 20px; z-index: 200; max-width: 420px; margin: 0;
  box-shadow: var(--shadow-2);
  animation: toastIn 0.2s ease, toastOut 0.4s ease 4s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; pointer-events: none; } }
@media (max-width: 700px) { .alert-toast { left: 16px; right: 16px; max-width: none; } }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%; padding: 8px 12px;
  background: var(--bg-base); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 0.95rem;
}
input::placeholder { color: var(--text-muted); font-style: italic; }
input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); outline: none; }

/* ── Buttons: flat, hover changes colour only ─────────────────────────── */
.btn, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px;
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; cursor: pointer;
}
.btn:hover, input[type="submit"]:hover { border-color: var(--border-accent); }
.btn-primary, input[type="submit"].btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 700; }
.btn-primary:hover, input[type="submit"].btn-primary:hover { filter: brightness(1.08); }
.btn-danger { color: var(--danger); background: none; }
.btn-quiet { background: none; }
.btn-block { width: 100%; }
.btn-sm { min-height: 32px; padding: 4px 12px; }
button:focus-visible, .btn:focus-visible, input[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A form on its way to the server: its button keeps its size, hides its
   label and spins (site.js sets aria-busy). */
button[aria-busy="true"], input[type="submit"][aria-busy="true"] { position: relative; cursor: progress; pointer-events: none; }
button[aria-busy="true"] { color: transparent !important; }
button[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 2px solid var(--text-secondary); border-right-color: transparent; border-radius: 50%;
  animation: busySpin 0.7s linear infinite;
}
.btn-primary[aria-busy="true"]::after { border-color: var(--on-accent); border-right-color: transparent; }
input[type="submit"][aria-busy="true"] { opacity: 0.6; }
@keyframes busySpin { to { transform: rotate(360deg); } }

/* ── Stats ────────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 24px; }
.stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; }
.stat span { display: block; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.stat strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat strong.stat-text { font-family: var(--font-body); font-size: 1.1rem; }
.empty { color: var(--text-muted); margin: 0; }

/* ── People (Requests) ────────────────────────────────────────────────── */
.people { list-style: none; margin: 0; padding: 0; }
.access-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.approvals-head { margin-bottom: 12px; }
.site .container:not(.home-container) > .page-head.approvals-head { margin-bottom: 14px; }
.site .container:not(.home-container) > .page-head.approvals-head h1 { font-size: 32px; margin-bottom: 6px; }
.site .approvals-head p { font-size: 13px; margin: 0; }
.approval-counts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; font-size: 13px; color: var(--text-muted); }
.approval-counts strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.approvals-panel { padding: 14px 18px; margin-bottom: 12px; }
.approvals-panel > h2 { margin: 0 0 8px; font-size: 15px; }
.approval-archive > summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.approval-archive > summary span { margin-left: 8px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.approval-archive[open] > summary { margin-bottom: 12px; }
.person.approval-row { display: grid; grid-template-columns: minmax(180px,1fr) minmax(140px,210px) 125px auto; gap: 6px 14px; align-items: center; padding: 10px 0; }
.approval-row .person-main { min-width: 0; }
.approval-row .person-name { font-size: 14px; overflow-wrap: anywhere; }
.approval-row .person-sub { font-size: 12px; overflow-wrap: anywhere; }
.approval-meta { display: block; font-size: 11px; color: var(--text-muted); }
.approval-network { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.approval-network code { display: block; color: var(--text-muted); font-size: 11px; }
.risk-badge { display: inline-block; border-radius: 5px; padding: 3px 7px; font-size: 11px; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border-strong); }
.risk-caution { color: #8b5b00; background: #fff2cc; border-color: #d5b768; }
.risk-review { color: #a52d2d; background: #ffe9e6; border-color: #d89d94; }
[data-theme=dark] .risk-caution { color: #f2ce81; background: #352b16; border-color: #78602f; }
[data-theme=dark] .risk-review { color: #ffb1a8; background: #3a2020; border-color: #80504a; }
.approval-row .approval-actions { gap: 5px; justify-content: flex-end; }
.site .approval-row .btn.btn-sm { min-height: 30px; padding: 4px 9px; font-size: 12px; }
.approval-details { grid-column: 1 / -1; }
.approval-details > summary { width: fit-content; cursor: pointer; color: var(--text-muted); font-size: 11px; padding: 2px 0; }
.approval-details[open] > summary { margin-bottom: 8px; }
.risk-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 24px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); }
.risk-details-grid h3 { margin: 0 0 6px; font-size: 12px; }
.risk-details-grid p,.risk-flags { margin: 4px 0; font-size: 12px; color: var(--text-secondary); }
.risk-flags { padding-left: 18px; }
.risk-agent { overflow-wrap: anywhere; }
.approval-more { margin-top: 10px; }
.approval-caveat { font-size: 12px; color: var(--text-muted); margin: 8px 0; }
@media(max-width:850px) { .person.approval-row { grid-template-columns: minmax(0,1fr) auto; } .approval-network { grid-column: 1; } .approval-status { grid-column: 2; grid-row: 1; } .approval-row .approval-actions { grid-column: 2; grid-row: 2 / 4; } }
@media(max-width:540px) { .risk-details-grid { grid-template-columns: minmax(0,1fr); } .approvals-panel { padding: 12px; } }
@media(pointer:coarse) { .site .approval-row .btn.btn-sm { min-height: 44px; } .approval-details > summary { min-height: 32px; padding-top: 6px; } }
.person {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.person:first-child { border-top: 0; padding-top: 4px; }
.person-name { font-weight: 600; }
.person-sub { font-size: 0.875rem; color: var(--text-muted); }
.person-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.person-actions form { margin: 0; }
.badge {
  display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 700; vertical-align: 2px;
  background: var(--accent); color: var(--on-accent);
}
.badge-muted { background: var(--bg-elevated); color: var(--text-secondary); }

/* ── Account ──────────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; }
.facts dt { color: var(--text-muted); font-size: 0.875rem; }
.facts dd { margin: 0; }

/* ── Analytics ────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--text-secondary); font-size: 0.875rem; text-decoration: none;
}
.chip:hover { border-color: var(--border-accent); color: var(--text-primary); text-decoration: none !important; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chart { position: relative; height: 288px; }
.pv-loading #pvTables, .pv-loading #pvFilters { opacity: 0.55; }

/* Hardware Monitor, under Render hosts. */
.sub-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border-strong); margin-bottom: 24px; }
.sub-tab { padding: 0 0 12px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.9rem; font-weight: 600; }
.sub-tab.active { color: var(--accent); border-color: var(--accent); }
.hardware-heading, .hardware-toolbar, .hardware-host-heading, .hardware-device-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hardware-toolbar { margin-bottom: 20px; }
.hardware-toolbar .chips { margin-bottom: 0; }
.hardware-live, .hardware-state { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.hardware-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.hardware-live { color: var(--text-secondary); }
.hardware-state { padding: 4px 10px; background: var(--bg-elevated); border-radius: var(--radius-pill); white-space: nowrap; }
.hardware-state.online { color: var(--positive); }
.hardware-state.offline { color: var(--danger); }
.hardware-host-heading { margin-bottom: 16px; }
.hardware-host-heading p { margin: 0; font-size: 0.8rem; }
.hardware-notice { padding: 12px 16px; border-left: 3px solid var(--text-muted); background: var(--bg-elevated); font-size: 0.875rem; }
.hardware-renderer { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 20px; }
.hardware-device + .hardware-device { border-top: 1px solid var(--border-strong); padding-top: 24px; margin-top: 24px; }
.hardware-device h3 { font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 4px; }
.hardware-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 24px 0; }
.hardware-metrics span, .hardware-averages span { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.hardware-metrics strong { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.hardware-metrics small, .stat small { display: block; color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; }
.hardware-metrics meter { display: block; width: 100%; height: 6px; margin-top: 12px; border: 0; background: var(--bg-elevated); border-radius: 4px; }
.hardware-metrics meter::-webkit-meter-bar { background: var(--bg-elevated); border: 0; height: 6px; }
.hardware-metrics meter::-webkit-meter-optimum-value { background: var(--accent); }
.hardware-metrics meter::-moz-meter-bar { background: var(--accent); }
.hardware-averages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px; border-radius: var(--radius); background: var(--bg-row-alt); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.hardware-server-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hardware-table-hint { margin: 12px 0 20px; }
.hardware-outdated { opacity: 0.6; }
@media (max-width: 850px) { .hardware-metrics, .hardware-averages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hardware-host { padding: 16px; } .hardware-metrics strong { font-size: 1.1rem; } }

.table-scroll { overflow-x: auto; }
.grid { border-collapse: collapse; width: 100%; font-size: 0.9rem; white-space: nowrap; }
.grid th, .grid td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.grid th { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.grid tbody tr:hover td { background: var(--bg-row-hover); }
.grid .num { text-align: right; }
.grid td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.grid .zero { color: var(--text-muted); }
.grid .sticky { position: sticky; left: 0; background: var(--bg-surface); }
.grid tr.total td { font-weight: 600; background: var(--bg-row-alt); }
.grid tr.selected td { background: var(--accent-dim); }
.grid a { text-decoration: none; }

/* ---- demo chooser ---------------------------------------------------- */
/* Two cards side by side on a wide screen, stacked on a narrow one. They
   stretch so both buttons sit on the same line however long the copy runs. */
.demo-choices {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: stretch;
}
.demo-choice { display: flex; flex-direction: column; margin-bottom: 0; }
.demo-choice-picture { position: relative; overflow: hidden; border-radius: 9px; margin: -8px -8px 22px; background: #10222e; }
.demo-choice-picture img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .35s ease; }
.demo-choice-picture>span { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .1em; color: #b8d5e3; }
.demo-choice-picture b { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: #e9f5fa; }
.demo-choice:hover .demo-choice-picture img { transform: scale(1.025); }
@media(prefers-reduced-motion:reduce){.demo-choice-picture img{transition:none}.demo-choice:hover .demo-choice-picture img{transform:none}}
.demo-choice h2 { margin-bottom: 4px; }
.demo-choice .hint { margin-bottom: 12px; }
.demo-choice-points {
  margin: 0 0 20px;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.demo-choice-points li { margin-bottom: 4px; }
/* Push the button to the bottom of whichever card is taller. */
.demo-choice .btn, .demo-choice .demo-choice-note { margin-top: auto; }
.demo-choice .demo-choice-note + .btn { margin-top: 12px; }
.demo-choice .btn { align-self: flex-start; }
.demo-choice-note {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: auto 0 0;
}
/* Whose CT each demo renders, and on what terms. It goes under the button so
   the card still ends on the choice and then the small print, rather than
   putting the credit between the reader and the thing they came to click. */
.demo-choice-source {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 16px 0 0;
}
.demo-choice-source a { color: inherit; }
.demo-choice.is-unavailable [aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- rev-counter dials (Admin::GaugeHelper) ------------------------- */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 8px; }
.gauges.compact { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.gauge { margin: 0; padding: 4px 2px 10px; text-align: center; }
.gauge svg { width: 100%; max-width: 168px; height: auto; display: block; margin: 0 auto; }
.gauge-track { stroke: var(--bg-elevated); stroke-width: 9; stroke-linecap: round; }
.gauge-value { stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.gauge-warn .gauge-value, .gauge-warn .gauge-needle { stroke: var(--warn); fill: var(--warn); }
.gauge-red .gauge-value, .gauge-red .gauge-needle { stroke: var(--bad); fill: var(--bad); }
.gauge-tick { stroke: var(--border); stroke-width: 1; }
.gauge-tick-major { stroke: var(--border-strong); stroke-width: 1.6; }
.gauge-needle { fill: var(--accent); stroke: none; }
.gauge-hub { fill: var(--text-primary); }
.gauge-reading { fill: var(--text-primary); font-family: var(--font-display); font-size: 21px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.gauge-idle .gauge-reading { fill: var(--text-muted); }
.gauge figcaption { margin-top: -6px; }
.gauge-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.gauge figcaption small { display: block; font-size: 0.7rem; color: var(--text-muted); }

.gauge-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px; margin: 12px 0 4px; }
.gauge-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.8rem; }
.gauge-bar-head span { color: var(--text-muted); }
.gauge-bar-head b { font-variant-numeric: tabular-nums; }
.gauge-bar-track { display: block; height: 6px; margin-top: 5px; border-radius: 4px; background: var(--bg-elevated); overflow: hidden; }
.gauge-bar-track i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.gauge-bar-track.gauge-warn i { background: var(--warn); }
.gauge-bar-track.gauge-red i { background: var(--bad); }

/* ---- analytics panels ------------------------------------------------ */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.chart-sm { position: relative; height: 200px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.spark { display: inline-block; vertical-align: middle; width: 72px; height: 18px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.hist i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 1px; opacity: 0.85; }
.hist i.peak { background: var(--accent); opacity: 1; }
.hist-axis { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feature-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.feature-card h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 8px; }
.feature-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-size: 0.85rem; padding: 2px 0; }
.feature-row b { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 600; }
.feature-row .feature-fill { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: var(--accent-dim); }
.feature-row .feature-fill i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.warn-note { border-left: 3px solid var(--warn); padding: 8px 12px; background: var(--bg-row-alt); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.85rem; }
@media (max-width: 640px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.access-screen-notice { display: none; }
@media (max-width: 48rem) {
  .access-screen-notice { display: block; border-left: 3px solid currentColor; padding-left: 1rem; }
}