/*
 * Design tokens.
 *
 * Before this block the sheet carried sixteen distinct corner radii and eleven
 * font weights, so no two surfaces agreed on how round or how heavy they were,
 * and several "cards" were really hairline grids filled with the border colour,
 * which reads as grey panelling rather than paper. Everything below is the one
 * place those decisions are made: a five-step radius ramp, an eight-step
 * spacing ramp, five weights, and a named set of cream surfaces. Rules further
 * down consume the tokens instead of restating literals.
 */
:root {
  --paper: #f5f1e8;
  --paper-2: #ece6da;
  --white: #fffef9;
  --ink: #17211e;
  --text: #17211e;
  --muted: #57625c;
  --line: rgba(23, 33, 30, .14);
  --line-strong: rgba(23, 33, 30, .2);
  --green: #174f45;
  --green-2: #2d7466;
  /* Branding direction A additions (2026-08-07). `--green-text` is the ok-chip
     ink on green-soft, 5.25:1 (AA). `--chart-accent` is verdigris for chart
     strokes and large text only - 3.86:1 on paper, deliberately below the
     small-text bar, so never use it for body copy. */
  --green-text: #256a5b;
  --chart-accent: #3e8577;
  --green-soft: #dfece6;
  --rust: #97402a;
  --rust-soft: #f4e4de;
  --amber: #815718;
  --amber-soft: #f4ead7;
  --blue: #2c5878;
  --blue-soft: #e0eaf1;

  /* Semantic pairs for the few components that invert their foreground and
     background together. Keeping these separate from `--green` lets the dark
     theme lift links and chart strokes without turning filled controls into
     low-contrast mint panels. */
  --action-bg: var(--green);
  --action-bg-hover: var(--green-2);
  --action-ink: #fff;
  --feature-bg: var(--green);
  --feature-ink: #fff;
  --feature-muted: rgba(255, 255, 255, .76);

  /* Surfaces. Every panel, card and tile picks one of these four so nothing
     falls back to an untinted grey or to the raw border colour. */
  --surface: rgba(255, 254, 249, .78);
  --surface-raised: #fffef9;
  --surface-quiet: rgba(245, 241, 232, .62);
  --surface-sunken: #efe9dd;

  /* Radius ramp. `--radius-round` stays a separate idea: it is for dots and
     avatars, not a step on the ramp. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Spacing ramp, in 4px steps up to a 64px page rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Padding roles, so "a tile" and "a panel" are never eyeballed per rule. */
  --pad-tile: var(--space-4);
  --pad-card: var(--space-6);
  --pad-panel: var(--space-7);

  /* Weights. 400/600/700/820 for the sans stack; 500 is reserved for the
     serif display face, which is why sans text must never use it. */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-semibold: 700;
  --weight-bold: 820;
  --weight-display: 500;

  /* Smallest permitted pointer target (WCAG 2.2 AA target size, 24x24). */
  --hit-target: 24px;

  --shadow: 0 18px 50px rgba(31, 45, 39, .08);
  --shadow-card: 0 10px 28px rgba(31, 45, 39, .05);
  /* Both stacks lead with the platform's own UI face so that the dashboard
     matches the native chrome it is embedded in rather than competing with
     it. This was not a preference: Iowan Old Style is not installed on stock
     macOS, so `--serif` was silently resolving to Baskerville - a print serif
     with none of Iowan's screen weight - and every headline number was
     rendering in a face the design never chose. `ui-serif` resolves to New
     York, which Apple designed to sit beside SF Pro and which ships with the
     OS, and the old names stay behind it so an installed Iowan still wins.
     `--sans` leads the same way so an installed Inter cannot make the app
     diverge from the sidebar and toolbar around it. */
  --serif: ui-serif, "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* This padding is what every in-page anchor lands against, so the sticky
   header never covers the top of a section a pasted link points at. Targets
   must not add a `scroll-margin-top` of their own: it stacks on this and
   drops each destination about a header's height too low. */
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 4%, rgba(45, 116, 102, .06), transparent 27rem),
    var(--paper);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-user-select: text;
  user-select: text;
}
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(49, 95, 132, .42);
  outline-offset: 3px;
}

/* Page navigation moves focus to the destination heading so assistive
 * technology announces the new view. Chromium's automatic outline follows
 * the heading's line boxes, which produces a large, notched rectangle that
 * looks like an accidental selection. Keep the focus handoff, but represent
 * keyboard-visible focus with one stable marker beside the heading. */
[data-dashboard-page] :is(h1, h2)[tabindex="-1"]:focus {
  outline: none;
}
[data-dashboard-page] :is(h1, h2)[tabindex="-1"]:focus-visible {
  position: relative;
}
[data-dashboard-page] :is(h1, h2)[tabindex="-1"]:focus-visible::before {
  position: absolute;
  inset-block: .08em;
  inset-inline-start: -.34em;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  content: "";
  pointer-events: none;
}
@media (forced-colors: active) {
  [data-dashboard-page] :is(h1, h2)[tabindex="-1"]:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 4px;
  }
  [data-dashboard-page] :is(h1, h2)[tabindex="-1"]:focus-visible::before {
    display: none;
  }
}
[hidden] { display: none !important; }

/* The desktop shell adds Settings to the shared dashboard only after its
 * preload marker lands. Keep the control out of the browser dashboard while
 * leaving the same current page and styles usable in Electron. */
.electron-only-control { display: none !important; }
html.electron-dashboard .electron-only-control,
body.electron-dashboard .electron-only-control { display: inline-flex !important; }
.electron-settings-control { flex: 0 0 auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: -4rem;
  inset-inline-start: 1rem;
  padding: .7rem 1rem;
  color: var(--action-ink);
  background: var(--action-bg);
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }
.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;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 0 max(24px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(245, 241, 232, .92);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
}
/* Direction A wordmark: serif at semibold beside the untouched icon. */
.brand > span {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--weight-medium);
  letter-spacing: .01em;
}
.brand-icon {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
}
.dashboard-shell {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  width: min(1520px, 100%);
  min-height: calc(100vh - 76px);
  margin-inline: auto;
}
.dashboard-sidebar {
  position: sticky;
  top: 76px;
  align-self: start;
  min-height: calc(100vh - 76px);
  padding: 1.5rem .85rem;
  border-inline-end: 1px solid var(--line);
}
.primary-nav { display: grid; gap: .4rem; }
.primary-nav a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: .7rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .76rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.primary-nav a:hover, .primary-nav a.active {
  color: var(--green);
  border-color: rgba(23, 79, 69, .12);
  background: var(--green-soft);
}
.primary-nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dashboard-content { min-width: 0; -webkit-user-select: text; user-select: text; }
[data-dashboard-page][hidden] { display: none !important; }

/* The packaged Mac app supplies a real AppKit header and sidebar. Keep this
   document focused on the selected, readable report instead of rendering a
   second browser-shaped navigation system inside the native shell. */
html.native-dashboard body,
body.native-dashboard {
  min-height: 100%;
  background: var(--paper);
}
html.native-dashboard .topbar,
html.native-dashboard .dashboard-sidebar,
body.native-dashboard .topbar,
body.native-dashboard .dashboard-sidebar { display: none; }
html.native-dashboard .dashboard-shell,
body.native-dashboard .dashboard-shell {
  display: block;
  width: 100%;
  min-height: 0;
}
/* The AppKit shell marks this document before page scripts run. Give that
   otherwise blank interval one static, truthful surface, then let the
   existing first-result marker remove it. The normal browser keeps its
   current dashboard-first rendering because this surface is native-only. */
.dashboard-boot-state { display: none; }
html.native-dashboard:not([data-local-dashboard-ready="true"]) .dashboard-boot-state,
html:not([data-local-dashboard-ready="true"]) body.native-dashboard .dashboard-boot-state {
  display: grid;
  min-height: clamp(280px, 72vh, 560px);
  padding: clamp(28px, 7vw, 72px) 0;
  place-items: center;
}
.dashboard-boot-card {
  display: grid;
  gap: var(--space-4);
  width: min(34rem, 100%);
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.dashboard-boot-card .state-pill { margin-bottom: var(--space-1); }
.dashboard-boot-title {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.dashboard-boot-copy {
  max-width: 29rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: .88rem;
}
html.native-dashboard main,
html.native-dashboard footer,
body.native-dashboard main,
body.native-dashboard footer {
  width: min(1180px, calc(100% - 52px));
}
html.native-dashboard .page-heading,
body.native-dashboard .page-heading {
  gap: 32px;
  padding-top: 30px;
}
html.native-dashboard h1,
html.native-dashboard h2,
body.native-dashboard h1,
body.native-dashboard h2 {
  font-family: var(--sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -.035em;
  line-height: 1.05;
}
html.native-dashboard h1,
body.native-dashboard h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
html.native-dashboard h2,
body.native-dashboard h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
/* The persistent AppKit control owns refresh in the installed app. Keep the
   report's setup card descriptive instead of offering a competing sync path. */
html.native-dashboard #setup-refresh,
html.native-dashboard #refresh-button,
html.native-dashboard #cancel-refresh,
body.native-dashboard #setup-refresh,
body.native-dashboard #refresh-button,
body.native-dashboard #cancel-refresh { display: none; }
/* Setup guidance belongs to the hosted fallback. If the report is already
   inside the native app, surfacing instructions to install/open that app is
   circular and misleading. */
html.native-dashboard #setup-card,
body.native-dashboard #setup-card { display: none !important; }
.top-actions { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: .55rem; }
/* Reserve the whole active status and its numeric tracks across phase changes.
   The existing narrow-toolbar rule hides this control below 760px. */
#refresh-button.refresh-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13ch 7ch;
  gap: .6em;
  inline-size: clamp(19rem, 32vw, 26rem);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: start;
}
.refresh-progress-phase, .refresh-progress-count, .refresh-progress-time {
  min-block-size: 1lh;
  overflow: hidden;
  text-overflow: ellipsis;
}
.refresh-progress-count, .refresh-progress-time { text-align: end; }
.refresh-progress-current { display: inline-block; text-align: end; }
#cancel-refresh { min-inline-size: 7.5em; font-variant-numeric: tabular-nums; }
.language-picker { display: inline-flex; align-items: center; }
.electron-dashboard .topbar .language-picker { display: none; }
.language-picker select {
  min-height: 37px;
  max-width: 10.5rem;
  padding: .38rem 1.7rem .38rem .58rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .7rem;
  font-weight: var(--weight-semibold);
}
#weekly-plan-control { min-width: 0; max-width: 100%; gap: .5rem; }
#weekly-plan-control select { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.allowance-header-controls {
  display: grid;
  justify-items: end;
  align-content: end;
  gap: .7rem;
  min-width: min(100%, 360px);
}
.allowance-window-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  width: 100%;
}
.allowance-window-control > span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.allowance-window-toggle { width: min(100%, 220px); }
.allowance-window-toggle button {
  flex: 1 1 0;
  white-space: nowrap;
}
.allowance-window-toggle button:disabled {
  cursor: not-allowed;
  opacity: .46;
}
#weekly-plan-control {
  justify-content: flex-end;
  width: 100%;
}
.allowance-window-note { margin: -8px 0 18px; }
.state-pill, .evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: max-content;
  padding: .38rem .62rem;
  color: var(--green-text);
  background: var(--green-soft);
  border: 1px solid rgba(23, 79, 69, .18);
  border-radius: var(--radius-pill);
  font-size: .67rem;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.state-dot { width: 7px; height: 7px; border-radius: var(--radius-round); background: currentColor; }
.history-index-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .38rem .62rem;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid rgba(129, 87, 24, .22);
  border-radius: var(--radius-pill);
  font-size: .67rem;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) { .history-index-badge { display: none; } }
.state-stale { color: var(--amber); background: var(--amber-soft); }
.state-setup { color: var(--amber); background: var(--amber-soft); }
.state-live, .state-local { color: var(--green-text); background: var(--green-soft); }
.state-updating { color: var(--amber); background: var(--amber-soft); }
.state-insufficient, .state-offline { color: var(--rust); background: var(--rust-soft); }
.state-demo { color: var(--blue); background: var(--blue-soft); }
.state-connecting { color: var(--muted); background: var(--surface-sunken); }

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: .72rem var(--pad-tile);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.button:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { color: var(--action-ink); background: var(--action-bg); }
.button-primary:hover:not(:disabled) { background: var(--action-bg-hover); }
.button-secondary, .button-quiet { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button-secondary:hover:not(:disabled), .button-quiet:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-raised);
}
.button.compact { min-height: 37px; padding: .5rem .7rem; font-size: .7rem; }
.top-actions .button { white-space: nowrap; }
.metric-name { display: inline-flex; align-items: center; gap: .35rem; }
/*
 * (P2-6) The glyph is an 18px circle by design — it sits inline next to a
 * metric name and a larger disc would read as a button, not a footnote. WCAG
 * 2.2 AA still requires a 24x24 pointer target, so the target is grown with a
 * transparent overlay instead of by inflating the circle. Clicks anywhere in
 * the overlay activate the button because the pseudo-element belongs to it.
 */
.info-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  color: var(--green);
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
  background: transparent;
  font-size: .68rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  cursor: pointer;
}
.info-button::after {
  position: absolute;
  /* Symmetric negative inset, derived from the 18.4px glyph and the 24px
     minimum, so the overlay grows the target equally on all four sides and
     needs no transform that would have to be mirrored under RTL. */
  inset: calc((1.15rem - var(--hit-target)) / 2);
  border-radius: var(--radius-round);
  content: "";
}
.info-button:hover, .info-button:focus-visible, .info-button[aria-expanded="true"] {
  color: var(--blue);
}
.info-button:hover, .info-button[aria-expanded="true"] {
  background: var(--green-soft);
}
.info-button:focus-visible {
  outline: 3px solid rgba(49, 95, 132, .35);
  outline-offset: 3px;
}
.info-popover {
  position: fixed;
  z-index: 40;
  width: min(19rem, calc(100vw - 2rem));
  padding: .7rem .8rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: 0 14px 30px rgba(31, 45, 39, .18);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  line-height: 1.55;
  text-align: start;
  text-transform: none;
}

main, footer { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: end;
  padding: 42px 0 30px;
}
.eyebrow, .panel-kicker {
  margin: 0;
  color: var(--green-2);
  font-size: .68rem;
  font-weight: var(--weight-bold);
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 900px;
  margin: 10px 0 18px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.1vw, 3.9rem);
  font-weight: var(--weight-regular);
  letter-spacing: -.055em;
  line-height: .95;
}
.lede { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: .94rem; }
/*
 * (8/39) The freshness tile used to be green in every state — stale, offline,
 * demo and updating included — which made it a decoration rather than a
 * reading. It has no state class of its own, and the state already lives on
 * the header pill that `renderGlobalState` writes, so the tile reads that pill
 * through `:has()` instead of requiring a second source of truth in app.js.
 * The pill stays in the DOM even when the native shell hides the top bar, so
 * this keeps working inside the packaged Mac app.
 *
 * Green means the evidence is current. Amber means work is in flight. Muted
 * means there is nothing current to show. Blue means labelled demo data.
 */
.freshness-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 210px;
  padding: var(--pad-tile) var(--space-5);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--freshness-accent, var(--muted));
  border-radius: var(--radius-md);
  background: var(--freshness-surface, var(--surface-quiet));
}
.freshness-card span, .freshness-card small { color: var(--muted); font-size: .68rem; }
.freshness-card strong {
  margin: 0;
  color: var(--freshness-accent, var(--ink));
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: var(--weight-display);
}
.freshness-card .automatic-refresh-health {
  max-width: 260px;
  color: var(--amber);
  font-weight: var(--weight-strong);
}
/* Observation colour follows its own timestamp, never accounting or job state. */
.freshness-card[data-freshness="current"] { --freshness-accent: var(--green); }
.freshness-card[data-freshness="stale"] { --freshness-accent: var(--amber); }
.freshness-card[data-freshness="demo"] { --freshness-accent: var(--blue); }
.freshness-card[data-freshness="unknown"] { --freshness-accent: var(--muted); }

.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 28px;
  padding: var(--pad-tile) var(--space-5);
  border: 1px solid rgba(154, 106, 36, .25);
  border-radius: var(--radius-md);
  background: var(--amber-soft);
}
.notice strong { font-size: .86rem; }
.notice p { margin: .1rem 0 0; color: #735927; font-size: .78rem; }
.notice-demo { border-color: rgba(49, 95, 132, .25); background: var(--blue-soft); }
.notice-demo p { color: #31536d; }
.notice-error { border-color: rgba(169, 73, 47, .25); background: var(--rust-soft); }
.notice-info { border-color: rgba(49, 95, 132, .25); background: var(--blue-soft); }
.notice-info p { color: #31536d; }
.notice-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.electron-sharing-notice .notice-actions { display: grid; flex: 0 0 auto; min-width: 10rem; }

.companion-setup {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.4fr);
  gap: 32px 48px;
  margin: 0 0 34px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.companion-setup h2 {
  margin: 7px 0 14px;
  font-size: clamp(2rem, 3vw, 2.8rem);
}
.companion-setup-copy p:last-child,
.companion-setup-actions p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}
.companion-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  counter-reset: setup-step;
  list-style: none;
}
.companion-steps li {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 46px;
  padding-inline-start: 54px;
  counter-increment: setup-step;
}
.companion-steps li::before {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--green);
  background: var(--green-soft);
  border-radius: var(--radius-round);
  content: counter(setup-step);
  font-weight: var(--weight-bold);
}
.companion-steps strong { font-size: .85rem; }
.companion-steps span { color: var(--muted); font-size: .76rem; }
.companion-steps .button {
  justify-self: start;
  margin-top: 4px;
}
.companion-steps .button-primary { color: var(--action-ink); }
.installer-details {
  display: grid;
  gap: 3px;
  margin-top: 5px;
}
.installer-details span {
  overflow-wrap: anywhere;
}
.installer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 4px;
  font-size: .72rem;
}
.installer-links a {
  color: var(--green);
  font-weight: var(--weight-semibold);
}
.installer-unavailable {
  display: block;
  padding: .65rem .8rem;
  border-inline-start: 3px solid var(--amber);
  color: #6f5011 !important;
  background: var(--amber-soft);
}
.companion-setup-actions {
  grid-column: 2;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.safe-close-guidance {
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--blue);
}

.setup-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr) minmax(220px, .65fr);
  gap: 28px;
  align-items: center;
  margin: 0 0 30px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.setup-card.needs-attention { border-color: rgba(154, 106, 36, .32); }
.setup-copy h2 {
  margin: 5px 0 9px;
  font-size: 1.65rem;
  letter-spacing: -.025em;
}
.setup-copy > p:last-child,
.setup-actions p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
}
.setup-checks {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.setup-checks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--muted);
  font-size: .76rem;
}
.setup-checks li::before {
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  color: var(--green);
  content: "✓";
  font-size: .65rem;
  font-weight: var(--weight-bold);
  line-height: 14px;
  text-align: center;
}
.setup-checks li.missing::before {
  border-color: rgba(154, 106, 36, .35);
  color: var(--amber);
  content: "!";
}
.setup-actions { display: grid; gap: var(--space-2); justify-items: start; }

/*
 * (26) A disclosure header is a control, so it is built like one: a padded,
 * rounded row that lifts under the pointer and settles when pressed. Before
 * this the summary was flat text on a flat surface with no affordance at all,
 * which is a large part of why the dashboard read as unclickable.
 */
.journey-disclosure {
  margin-top: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-quiet);
}
.journey-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--hit-target);
  padding: var(--space-5) var(--pad-card);
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
  transition: background-color .12s ease;
}
.journey-disclosure > summary:hover { background: var(--green-soft); }
.journey-disclosure[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.journey-disclosure > summary::-webkit-details-marker { display: none; }
.journey-disclosure > summary::after {
  color: var(--green);
  content: "Show";
  font-size: .72rem;
  font-weight: var(--weight-bold);
}
.journey-disclosure[open] > summary::after { content: "Hide"; }
.journey-disclosure > summary strong {
  display: block;
  margin-top: 3px;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: var(--weight-display);
}
/*
 * (14g) This card is a two-column pitch: copy on the left, the sign-in and
 * consent controls on the right. Two later children — the "see what the
 * community published" link and the whole prepare-and-review disclosure — were
 * dropped into the same grid, so they were auto-placed into the next row's two
 * tracks and rendered as a pair of half-width, unstyled columns: a bare link
 * beside a 360px-wide review panel.
 *
 * The pitch keeps its two columns; anything after it spans the full width and
 * is separated from the pitch by a rule, because it is a different job.
 */
.contribution-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: var(--space-6) clamp(28px, 5vw, 72px);
  align-items: start;
  margin: var(--space-2) 0 var(--space-8);
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(23, 79, 69, .28);
  border-top: 5px solid var(--green);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 8% 10%, rgba(223, 236, 230, .9), transparent 52%),
    var(--surface-raised);
  box-shadow: 0 18px 46px rgba(21, 40, 35, .07);
}
.contribution-cta > .electron-accountless-community,
.contribution-cta > .community-public-evidence,
.contribution-cta > .journey-stages {
  grid-column: 1 / -1;
  min-width: 0;
}
/*
 * (27) The guided journey, stated as numbered stages with visible state. Each
 * card carries a chip (done / in progress / waiting / action needed) and one
 * measured detail line. Two boxes since 2026-08-10 (owner-directed): the
 * companion box was self-referential and the evidence time is the index
 * box's second clause, so the strip fits one comfortable row.
 */
.journey-stages {
  display: grid;
  /* 240px minimum (owner-directed, 2026-08-08): narrower columns wrapped the
     detail sentences to as many as eight lines. With two cards this folds to
     one column only on genuinely narrow screens. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: journey-stage;
}
.journey-stage {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  counter-increment: journey-stage;
}
.journey-stage-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
.journey-stage-name {
  font-size: .78rem;
  font-weight: var(--weight-bold);
}
.journey-stage-name::before {
  content: counter(journey-stage) " · ";
  color: var(--muted);
  font-weight: var(--weight-semibold);
}
.journey-stage-detail {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}
.journey-stage-done { border-color: rgba(23, 79, 69, .35); }
.journey-stage-action {
  border-color: rgba(154, 106, 36, .45);
  background: var(--surface-quiet);
}
/* The approve-once consent surface for the incremental contribution model. */
.incremental-consent { display: grid; gap: var(--space-3); }
.incremental-consent-facts {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: 1.1rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.community-public-evidence {
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: .82rem;
}
.community-public-evidence a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-target);
  color: var(--green);
  font-weight: var(--weight-semibold);
  text-decoration-color: rgba(23, 79, 69, .35);
  text-underline-offset: 3px;
}
.community-public-evidence a:hover { text-decoration-color: currentColor; }
.contribution-cta h2 { font-size: clamp(2.5rem, 4.5vw, 4.25rem); }
.contribution-cta-copy > p:not(.eyebrow) {
  max-width: 58ch;
  margin: var(--space-5) 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
}
.contribution-categories {
  max-width: 58ch;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.contribution-categories summary {
  color: var(--green);
  cursor: pointer;
  font-size: .74rem;
  font-weight: var(--weight-bold);
}
.contribution-categories div {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.contribution-categories p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
}
.contribution-cta-action {
  padding: var(--pad-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.identity-signin {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.identity-signin .control-label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
/*
  Vendor sign-in buttons. Google and Apple both publish binding guidance for
  their mark, label, minimum height, and permitted button colours, so the four
  literal brand values here (Google's white face, its #747775 rule and #1f1f1f
  label, and Apple's black pill) are deliberate: no palette custom property may
  stand in for them. Everything else — focus ring, spacing, disabled state —
  comes from the shared tokens. Roboto is not shipped because the release build
  loads no external font, so the site sans stack renders both labels at the
  14px size the guidance specifies.
*/
.provider-mark-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.provider-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.provider-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 99px; /* vendor-pinned: Apple/Google sign-in pill */
  font-family: var(--sans);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: .01em;
  cursor: pointer;
}
.provider-button:hover:not(:disabled) { transform: translateY(-1px); }
.provider-button:disabled { opacity: .45; cursor: not-allowed; }
.provider-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.provider-button-google { color: #1f1f1f; background: #fff; border-color: #747775; }
.provider-button-apple { color: #fff; background: #000; border-color: #000; }
.provider-mark { flex: none; width: 18px; height: 18px; }
.provider-button-apple .provider-mark { width: 17px; height: 17px; margin-top: -2px; }
.identity-signin-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.identity-account {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.identity-account-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
}
.identity-account-copy { flex: 1 1 14rem; min-width: 0; }
.identity-account-copy strong { display: block; font-size: .78rem; }
.identity-account-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
}
.identity-account .button { flex: none; margin-inline-start: auto; }
/* (.contribution-primary-consent left with the connect checkbox it styled,
   owner-directed 2026-08-08: the explicit approval IS the consent now.) */
/*
 * One surface (owner-directed, 2026-08-08): the approve ceremony sits inside
 * the action card, directly under sign-in, instead of being a second card
 * the reader scrolls to. The inner panel chrome is stripped so the sign-in
 * block and the ceremony read as one surface.
 */
.contribution-cta-action .incremental-consent {
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Device disconnect is independent of sign-in and the approval surface. */
.contribution-device-controls {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.contribution-disconnect-dialog {
  inline-size: min(36rem, calc(100% - var(--space-7)));
  max-block-size: calc(100% - var(--space-7));
  margin: auto;
  padding: var(--pad-card);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-raised);
}
.contribution-disconnect-dialog::backdrop {
  background: rgba(23, 33, 30, .5);
}
.contribution-disconnect-dialog h2 { margin-top: 0; }
.contribution-disconnect-dialog p { line-height: 1.6; }
#disconnect-device-status:focus {
  outline: 3px solid rgba(49, 95, 132, .42);
  outline-offset: 3px;
}
.contribution-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
body.first-run [data-requires-evidence],
body.needs-local-setup [data-requires-evidence],
body.first-run .journey-progressive,
body.needs-local-setup .journey-progressive {
  display: none !important;
}

/*
 * (25) The sidebar turns each area into a real page, so only one
 * `[data-dashboard-page]` element is on screen at a time. The unconditional
 * `border-top` and 56px of top padding therefore opened Trends and How it
 * works with a full-width rule ruling off nothing, above about fifty pixels of
 * blank paper, before the first heading.
 *
 * The rule is a separator, so it is only drawn on a section that actually
 * follows another visible block on the same page — that is what the sibling
 * combinator below tests. The first visible block on any page starts flush.
 */
.dashboard-section { padding: var(--space-2) 0 var(--space-9); border-top: 0; }
[data-dashboard-page]:not(.dashboard-page-inactive) ~ .dashboard-section:not(.dashboard-page-inactive) {
  padding-top: var(--space-9);
  border-top: 1px solid var(--line);
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-7);
}
.section-heading.split { grid-template-columns: 1fr auto; }
h2 {
  margin: 7px 0 0;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 3.2vw, 3.05rem);
  font-weight: var(--weight-regular);
  letter-spacing: -.045em;
  line-height: 1;
}
.section-heading > p { margin-bottom: 0; color: var(--muted); font-size: .88rem; }
.panel {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(31, 45, 39, .045);
}
.panel-heading, .chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.panel h3, .chart-heading h3 {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: var(--weight-display);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.annotation { color: var(--muted); font-size: .76rem; }
.info-button {
  flex: 0 0 1.15rem;
}
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.metric-card::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--green);
  content: "";
}
.metric-card.stale::before { background: var(--amber); }
.metric-card.insufficient::before { background: var(--rust); }
.metric-card-header { display: flex; justify-content: space-between; gap: 1rem; }
.metric-card .metric-name { color: var(--muted); font-size: .73rem; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
.metric-card .metric-value { display: block; margin: 22px 0 8px; font-family: var(--serif); font-size: 3.2rem; font-weight: var(--weight-regular); line-height: .9; }
.metric-card .metric-value small { font-family: var(--sans); font-size: .9rem; }
.metric-card p { margin-bottom: 0; color: var(--muted); font-size: .75rem; }
.mini-progress { height: 6px; margin: 22px 0 11px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }
.metric-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .67rem; }
.skeleton-card {
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, rgba(255,255,255,.25) 35%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.25) 65%);
  background-size: 300% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { background-position-x: -150%; } }

.cost-total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.cost-total span { color: var(--muted); font-size: .75rem; }
.cost-total strong { font-family: var(--serif); font-size: 2.8rem; font-weight: var(--weight-display); }

/*
 * How much of the discovered history a figure is drawn from, and the local
 * companion's own statements about the evidence behind it.
 *
 * Two deliberately different weights. Coverage that is still growing is
 * progress and is drawn in the blue informational tint; a caveat on a number
 * already on screen keeps the rust band the rest of the sheet uses for "read
 * this before you read the figure". Neither is an error colour, because
 * neither is an error.
 */
.index-progress {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4) 0;
  padding: var(--pad-tile);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--blue);
  background: var(--blue-soft);
}
.index-progress-headline { margin: 0; color: #31536d; font-size: .8rem; font-weight: var(--weight-strong); }
.index-progress-detail { margin: 0; color: #31536d; font-size: .74rem; line-height: 1.5; }
.index-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(49, 95, 132, .18);
}
.index-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
/* An active pass is the one state where motion is truthful: something really
   is advancing. A paused index stays still rather than implying work. */
.index-progress.active .index-progress-track i { animation: index-progress-pulse 1.6s ease-in-out infinite; }
@keyframes index-progress-pulse { 50% { opacity: .55; } }

.evidence-warnings { display: grid; gap: var(--space-2); margin-block: var(--space-4) 0; padding: 0; list-style: none; }
.evidence-warning {
  padding: var(--space-3) var(--pad-tile);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--rust);
  background: var(--rust-soft);
  color: #784d25;
  font-size: .74rem;
  line-height: 1.5;
}
.evidence-warning.progress,
.evidence-warning.informational {
  border-inline-start-color: var(--blue);
  background: var(--blue-soft);
  color: #31536d;
}
@media (prefers-reduced-motion: reduce) {
  .index-progress.active .index-progress-track i { animation: none; }
}

.component-list { display: grid; gap: 10px; }
.component-row { display: grid; grid-template-columns: 145px 1fr auto; gap: 12px; align-items: center; font-size: .73rem; }
.component-row > span { color: var(--muted); }
.component-row > strong { min-width: 66px; text-align: end; }
.component-track { height: 7px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.component-track i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.component-row:nth-child(2) i { background: var(--green-2); }
.component-row:nth-child(3) i { background: var(--rust); }
.component-row:nth-child(4) i { background: var(--amber); }

.comparison-visual { display: grid; gap: 20px; margin: 35px 0 28px; }
.comparison-row { display: grid; grid-template-columns: 170px 1fr 64px; gap: 12px; align-items: center; font-size: .73rem; }
.comparison-row span { color: var(--muted); }
.comparison-row strong { text-align: end; }
.bar-track { height: 13px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.comparison-row.calculated .bar-track i { background: var(--rust); }
.plain-result { margin: 0; padding: var(--pad-tile); color: #31536d; background: var(--blue-soft); border-radius: var(--radius-sm); font-size: .8rem; }
/*
 * Fitted-rate facts as a compact stat row (owner-directed, 2026-08-10): the
 * figure leads in the display serif the other stat tiles use, and the short
 * uppercase label sits beneath it. The former three-column definition list
 * squeezed sentence-length cells into narrow columns.
 */
.calibration-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.calibration-stats div { min-width: 0; padding: var(--pad-tile); border-inline-end: 1px solid var(--line); }
.calibration-stats div:last-child { border-inline-end: 0; }
.calibration-stats strong { display: block; font-family: var(--serif); font-size: 1.55rem; font-weight: var(--weight-display); line-height: 1.05; overflow-wrap: anywhere; }
.calibration-stats span { display: block; margin-top: 7px; color: var(--muted); font-size: .62rem; font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; }
.calibration-example { margin: 12px 0 0; }
/*
 * Per-model rates behind a disclosure (owner decision 2026-08-10): the
 * blended figure stays the headline; the fitted per-model detail is one
 * click away and lists each model's own "$ per point".
 */
.calibration-models { margin: 12px 0 0; font-size: .8rem; }
.calibration-models > summary { cursor: pointer; color: var(--muted); font-weight: var(--weight-semibold); }
.calibration-models .annotation { margin: 8px 0 0; }
.calibration-model-list { margin: 8px 0 0; padding: 0; list-style: none; }
.calibration-model-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.calibration-model-list li:last-child { border-bottom: 0; }
.calibration-model-list strong { font-variant-numeric: tabular-nums; text-align: end; }
/*
 * A model under the fit's share floor carries a second line saying why it has
 * no rate of its own. It sits under the model name rather than beside the
 * figure, so the "$ per point" column stays one scannable list of numbers.
 */
.calibration-model-label { display: flex; flex-direction: column; gap: 2px; }
.calibration-model-label small { color: var(--muted); font-size: .92em; }
.calibration-explanation { margin: 12px 0 0; }

.share-panel { margin-top: 22px; }
.share-preview {
  margin-top: var(--space-5);
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.share-preview canvas {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-xs);
  box-shadow: 0 10px 28px rgba(31, 45, 39, .13);
}
.share-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.share-panel .participant-action-status { margin-bottom: 0; }
/* Transient copy confirmation. It floats over the panel beside the buttons,
   holds a few seconds, and leaves; it must never accumulate as permanent page
   text. Motion is opted into only when the reader has not asked for reduced
   motion. */
.share-panel { position: relative; }
.share-toast {
  position: absolute;
  inset-inline-end: var(--space-5);
  bottom: var(--space-5);
  z-index: 5;
  max-width: min(430px, 100% - var(--space-5) * 2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  font-size: .78rem;
  line-height: 1.5;
  box-shadow: 0 10px 28px rgba(31, 45, 39, .28);
}
@media (prefers-reduced-motion: no-preference) {
  .share-toast { animation: share-toast-in .22s ease-out; }
  .share-toast.share-toast-leaving { opacity: 0; transition: opacity .3s ease-in; }
}
@keyframes share-toast-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.share-card-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.share-card-readout > div {
  min-width: 0;
  padding: var(--pad-tile);
  border-top: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
}
.share-card-readout > div:nth-child(-n+2) { border-top: 0; }
.share-card-readout > div:nth-child(even) { border-inline-end: 0; }
.share-card-readout > div.share-card-readout-wide { grid-column: 1 / -1; border-inline-end: 0; }
.share-card-readout dt {
  color: var(--muted);
  font-size: .62rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.share-card-readout dd { margin: 6px 0 0; font-size: .78rem; overflow-wrap: anywhere; }
.share-card-readout dd.share-card-figure { font-weight: var(--weight-semibold); }

.segmented-control { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.segmented-control button { padding: .5rem .7rem; border: 0; border-radius: var(--radius-xs); color: var(--muted); background: transparent; font-size: .7rem; font-weight: var(--weight-semibold); cursor: pointer; }
.segmented-control button.active { color: var(--action-ink); background: var(--action-bg); }
.timeline-controls,
.calibration-controls { display: grid; justify-items: end; gap: 7px; }
/* Grouping, date range, and legend used to occupy one stacked row each, so the
   usage chart's heading was three rows tall before the chart began. They are
   peers, not a stack: lay them out inline and let them wrap only when the
   panel is genuinely too narrow. */
.chart-control-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px 12px;
}
.chart-control-stack .compact-legend { margin-top: 0; }
.control-label {
  color: var(--muted);
  font-size: .64rem;
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chart-navigation { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.chart-navigation .button { min-height: 30px; }
.chart-panel { padding: var(--pad-card); }
.chart-heading p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); color: var(--muted); font-size: .68rem; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 20px; height: 3px; background: var(--green); }
.legend-dot.expected { background: var(--rust); }
/*
 * (4-visual) `.chart-line-allowance` is stroked with `stroke-dasharray: 5 3`,
 * but its swatch was a solid bar, so the key did not describe the line it was
 * keying. The gradient reproduces the same 5-on/3-off rhythm at swatch scale.
 */
.legend-dot.dashed,
.legend-dot.allowance {
  background: repeating-linear-gradient(
    to right,
    currentColor 0 5px,
    transparent 5px 8px
  );
}
/* The placeholder stands in for a chart, so it keeps roughly the height the
   chart it replaces would occupy and the card does not jump when evidence
   arrives. */
.chart-empty { display: grid; place-items: center; min-height: 380px; color: var(--muted); background: var(--surface-quiet); border: 1px dashed var(--line); border-radius: var(--radius-sm); text-align: center; }
.chart-empty p { margin: 0; font-size: .78rem; }
.chart-empty.small { min-height: 280px; font-size: .8rem; }
.chart-shell {
  width: 100%;
  overflow: hidden;
  /* Text outside an active pointer gesture remains selectable. The chart
     only suppresses selection while its own pan gesture is armed. */
  user-select: text;
  -webkit-user-select: text;
}
.chart-shell.interactive-chart { cursor: grab; touch-action: pan-y; outline: none; }
.chart-shell.interactive-chart:focus-visible { outline: 3px solid rgba(38, 107, 91, .36); outline-offset: 4px; }
.chart-shell.interactive-chart.is-pointer-active,
.chart-shell.interactive-chart.is-pointer-active *,
.chart-shell.interactive-chart.is-panning,
.chart-shell.interactive-chart.is-panning * {
  user-select: none;
  -webkit-user-select: none;
}
.chart-shell.interactive-chart.is-panning { cursor: grabbing; }
/* An SVG scales its viewBox to fit its box, so the smaller of the two ratios
   wins. A fixed `height: 300px` in a shell that is routinely ~977px wide meant
   the height always won: the drawing was pinned to 300px and letterboxed with
   ~77px of dead space across the width, while the card had room for far more.
   Taking the height from the drawing's own ratio instead fills the card in both
   directions. `aspect-ratio` here must stay in step with the viewBox heights
   `lineChart` is called with in app.js (TIMELINE_CHART_HEIGHT,
   COMPACT_CHART_HEIGHT); a mismatch reinstates the letterbox. `max-height`
   keeps a very wide window from turning one chart into a full screen. */
.chart-shell svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 900 / 420;
  max-height: 62vh;
  overflow: visible;
}
.chart-shell.compact-chart svg { min-width: 0; height: auto; aspect-ratio: 900 / 340; }
.chart-hover-tooltip { pointer-events: none; }
.chart-hover-tooltip rect {
  fill: rgba(23, 33, 30, .96);
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
}
.chart-tooltip-heading,
.chart-tooltip-detail {
  fill: var(--white);
  font-family: var(--sans);
}
.chart-tooltip-heading { font-size: 11px; font-weight: var(--weight-semibold); }
.chart-tooltip-detail { font-size: 10px; opacity: .82; }
.chart-grid { stroke: rgba(23, 33, 30, .1); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-family: var(--sans); font-size: 10px; }
.chart-line-observed { fill: none; stroke: var(--green); stroke-width: 2.7; vector-effect: non-scaling-stroke; }
.chart-line-expected { fill: none; stroke: var(--rust); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.chart-line-value { fill: none; stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart-point { vector-effect: non-scaling-stroke; }
.chart-point.chart-line-value { fill: var(--white); stroke: var(--blue); }
.chart-point:focus-visible { outline: 3px solid rgba(38, 107, 91, .55); outline-offset: 3px; }
.chart-point-hit-target {
  fill: transparent !important;
  stroke: transparent !important;
  opacity: 0 !important;
  pointer-events: all;
}
.chart-point-hit-target:focus-visible {
  opacity: 1 !important;
  outline: 3px solid rgba(38, 107, 91, .55);
  outline-offset: 3px;
}
.chart-error-bar-line, .chart-error-bar-cap { vector-effect: non-scaling-stroke; }
.chart-error-bar-weekly .chart-error-bar-line { stroke: rgba(49, 95, 132, .78); stroke-width: 1.8; }
.chart-error-bar-weekly .chart-error-bar-cap { stroke: rgba(49, 95, 132, .78); stroke-width: 1.8; }
.chart-line-weekly-center {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.chart-line-weekly-lowess {
  fill: none;
  stroke: var(--rust);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.legend-dot.weekly-lowess { background: var(--rust); }
.chart-point-weekly-mature {
  fill: var(--blue);
  stroke: var(--white);
  stroke-width: 2;
}
.chart-point-weekly-partial {
  fill: var(--white);
  stroke: var(--rust);
  stroke-width: 2.4;
}
.chart-line-allowance {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.3;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
}
.legend-dot.cost { background: var(--blue); }
/* Colour only — the dashed fill itself is defined with `.legend-dot.dashed`
   above and draws in `currentColor`, so the swatch tracks the series stroke. */
.legend-dot.allowance { color: var(--green); }
.compact-legend { justify-content: flex-end; margin-top: var(--space-2); }
.chart-area-confidence { fill: rgba(49, 95, 132, .14); }
/* Five exclusion bands, five distinct hues, so a shaded region on the chart
   maps to exactly one legend entry.

   The hues were already distinct on paper; the alpha destroyed them. At .08
   over the card's cream every band composited to within two to five RGB units
   of every other, which is below the threshold at which a hue is a hue — the
   whole key read as one grey. The washes sit at .16-.22 now, far enough apart
   to be told apart, and the neutral was pulled off its green cast so it cannot
   be confused with the teal.

   Alpha is graded by how much of the plot a mechanism typically covers, not by
   importance: "missing bracket" arrives in long collection gaps and is the
   lightest, while "movement needs context" is usually a single window and is
   the strongest. Each band also draws a top-edge tick at identity strength —
   see `.chart-status-tick` below, which is what actually makes a lone window
   visible. The legend swatch carries the tick's exact colour, so the key shows
   the mark the reader is hunting for rather than the wash behind it. */
.chart-status-missing { fill: rgba(99, 99, 104, .16); }
.chart-status-reset { fill: rgba(31, 111, 168, .18); }
/* "Quota weighting unavailable": a priced-cost gap, so the window carries no
   expected value to difference against. It is a counted exclusion mechanism
   with its own message, but it had no hue and no legend entry, and so fell
   through the renderer's old default into the violet that captions
   "movement needs context". */
.chart-status-weighting { fill: rgba(20, 120, 104, .18); }
.chart-status-ambiguous { fill: rgba(124, 92, 173, .22); }
/* "Allowance exhausted": the pool is pegged at 100%, so no residual is
   measurable across the span. Warmer than the neutral exclusions so a
   deliberate suspension never reads as a data gap. */
.chart-status-saturated { fill: rgba(176, 101, 43, .2); }

/* Identity marker. A band is only as wide as the span it excludes, and at a
   month's zoom a single excluded window is a fraction of a viewBox unit — no
   alpha makes that readable, so widening the wash was never the fix (it would
   claim an exclusion lasted longer than it did). The renderer pairs every band
   with a fixed-minimum tick along the top edge instead, and these are its
   colours: the same hue at roughly four times the wash, where the difference
   between blue, teal and violet is unmistakable. */
.chart-status-tick.chart-status-missing { fill: rgba(99, 99, 104, .58); }
.chart-status-tick.chart-status-reset { fill: rgba(31, 111, 168, .62); }
.chart-status-tick.chart-status-weighting { fill: rgba(20, 120, 104, .62); }
.chart-status-tick.chart-status-ambiguous { fill: rgba(124, 92, 173, .66); }
.chart-status-tick.chart-status-saturated { fill: rgba(176, 101, 43, .64); }

.legend-dot.chart-status-missing { background: rgba(99, 99, 104, .58); }
.legend-dot.chart-status-reset { background: rgba(31, 111, 168, .62); }
.legend-dot.chart-status-weighting { background: rgba(20, 120, 104, .62); }
.legend-dot.chart-status-ambiguous { background: rgba(124, 92, 173, .66); }
.legend-dot.chart-status-saturated { background: rgba(176, 101, 43, .64); }
/* Two line series (a short stroke swatch) and five shaded-window categories
   share one key. The area swatches are filled squares — the shape the bands
   take on the chart — and a hairline separator sets the two groups apart, so
   a reader tells a line from a band at a glance without a per-locale sublabel. */
.legend-dot.area { width: 12px; height: 12px; border-radius: 3px; }
.legend-group-sep { width: 1px; height: 15px; align-self: center; background: var(--line); }
/* The calibration legend is a full-width horizontal row beneath the chart
   heading. A slightly tighter column gap keeps the entries on one or two lines
   on a full-width English card; longer labels and narrower cards wrap it, but
   never back into the three-high stack it made inside the control column. */
.calibration-legend { width: 100%; margin-top: var(--space-4); justify-content: flex-start; column-gap: 14px; }
.chart-zero { stroke: var(--muted); stroke-dasharray: 5 5; }
.chart-point-observed { fill: var(--green); }
.chart-point-expected { fill: var(--rust); }
.chart-point-value { fill: var(--blue); }
/*
 * (4-visual) This strip is populated at runtime: two tiles under the hourly
 * usage chart, five under the calibration chart. A fixed `repeat(4, 1fr)` once
 * left empty tracks that rendered as a grey slab; the flex fallback that
 * replaced it capped each tile at 320px, so five 200px tiles could not share
 * one row and wrapped four-across with a single orphan beneath.
 *
 * An `auto-fit` track list settles both cases: empty tracks collapse (no slab)
 * and the tiles that exist distribute evenly by width — five across on a wide
 * card, three-plus-two as it narrows, two side by side under the hourly chart —
 * never four-plus-one. Each tile is a real rounded surface on cream, matching
 * the metric cards.
 */
.chart-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.chart-summary-grid > div {
  min-width: 0;
  padding: var(--space-3) var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.chart-summary-grid span { display: block; color: var(--muted); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.chart-summary-grid span .info-button { margin-inline-start: .35rem; vertical-align: middle; }
.chart-summary-grid strong { display: block; margin-top: var(--space-1); font-size: .84rem; }
.timeline-confidence { margin: var(--space-4) 0 0; padding: var(--space-3) var(--pad-tile); color: var(--muted); border-inline-start: 3px solid var(--line); background: var(--surface-quiet); font-size: .75rem; }
.timeline-confidence.low { color: #784d25; border-inline-start-color: var(--rust); background: var(--rust-soft); }
/* A chart drawing less history than its own label claims. Marked like a low
   confidence note rather than a neutral caption: the reader is looking at a
   picture that understates its subject. */
.series-coverage { margin: var(--space-4) 0 0; padding: var(--space-3) var(--pad-tile); color: #784d25; border-inline-start: 3px solid var(--rust); background: var(--rust-soft); font-size: .75rem; }
/* Deviation-period detector panel. Each period is a bordered card whose
   inline-start accent names the direction: blue where observed quota outran
   priced usage (under-counted), amber where priced usage outran observed
   (over-counted or credited). */
.divergence-panel .annotation { margin-top: 6px; }
.divergence-panel .timeline-confidence { margin-bottom: var(--space-4); }
.divergence-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.divergence-list[hidden] { display: none; }
.divergence-period {
  padding: var(--space-4) var(--pad-tile);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface-quiet);
}
.divergence-period.under-costed { border-inline-start-color: var(--blue); background: var(--blue-soft); }
.divergence-period.over-costed { border-inline-start-color: var(--amber); background: var(--amber-soft); }
.divergence-period-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.divergence-period-range { font-weight: 600; font-size: .84rem; font-variant-numeric: tabular-nums; }
.divergence-period-duration { color: var(--muted); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.divergence-period-finding { margin: 8px 0 0; font-size: .82rem; }
.divergence-period-magnitude { margin: 6px 0 0; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.divergence-period-mix { margin: 6px 0 0; font-size: .76rem; font-variant-numeric: tabular-nums; }
.divergence-period-unpriced { margin: 4px 0 0; color: var(--rust); font-size: .74rem; }
.divergence-period-context { margin: 6px 0 0; color: var(--muted); font-size: .72rem; }
.divergence-period-toggle {
  margin-top: 8px;
  padding: 3px 10px;
  font: inherit;
  font-size: .72rem;
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.divergence-period-toggle:hover { background: var(--surface-quiet); }
.divergence-period-breakdown { margin-top: 8px; }
.divergence-period-breakdown[hidden] { display: none; }
.divergence-breakdown-status { margin: 4px 0 0; color: var(--muted); font-size: .74rem; }
.divergence-breakdown-heading {
  margin: 8px 0 2px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.divergence-breakdown-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.divergence-breakdown-row { font-size: .76rem; font-variant-numeric: tabular-nums; }
.divergence-breakdown-fast { margin: 6px 0 0; font-size: .74rem; color: var(--muted); }
.divergence-breakdown-unpriced { margin: 4px 0 0; font-size: .74rem; color: var(--rust); }
.lower-charts { grid-template-columns: 1fr; margin-top: 18px; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: .73rem; }
th { color: var(--muted); background: var(--surface-sunken); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
th, td { padding: var(--space-3) var(--pad-tile); text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.empty-cell { padding: 30px; color: var(--muted); text-align: center; }
.positive { color: var(--rust); font-weight: var(--weight-semibold); }
.negative { color: var(--green); font-weight: var(--weight-semibold); }
/* The exact-windows pager (owner-directed, 2026-08-08). */
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.table-pagination-status { color: var(--muted); font-size: .73rem; }

.weekly-hero {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 36px;
  align-items: center;
  margin-bottom: 18px;
  padding: 34px;
  color: var(--feature-ink);
  background: var(--feature-bg);
  border-radius: var(--radius-md);
}
.weekly-hero > div:first-child { display: flex; flex-direction: column; }
.weekly-hero span, .weekly-hero small { color: var(--feature-muted); font-size: .72rem; }
.weekly-hero > div:first-child strong { margin: .2rem 0; font-family: var(--serif); font-size: clamp(3rem, 6vw, 5rem); font-weight: var(--weight-regular); line-height: 1; }
.weekly-hero > p { max-width: 55ch; margin: 0; color: var(--feature-muted); font-size: .86rem; line-height: 1.5; }
/*
 * Pace forecast card.
 *
 * One accent token drives the whole card - rule, wash, chip and track - and
 * the state class is the only thing that sets it. Colour used to follow
 * whether the engine had produced an ETA, which put the card's calmest colour
 * on its most urgent reading: "you run out before the reset" rendered green.
 * The ramp now runs green (under pace) -> blue (on pace) -> amber (over) ->
 * rust (over by more than double), and every step is also named in words on
 * the chip, so nothing here is carried by colour alone.
 */
.weekly-pace-forecast {
  --pace-accent: var(--green);
  --pace-accent-text: var(--green-text);
  --pace-accent-soft: var(--green-soft);
  --pace-accent-edge: rgba(23, 79, 69, .24);
  --pace-accent-wash: rgba(223, 236, 230, .8);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(310px, .95fr);
  gap: 15px 24px;
  align-items: start;
  margin: 0 0 18px;
  padding: 22px 24px;
  border: 1px solid var(--pace-accent-edge);
  border-inline-start: 4px solid var(--pace-accent);
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--pace-accent-wash), rgba(255, 253, 247, .94));
}
.weekly-pace-forecast[hidden] { display: none; }
.weekly-pace-forecast.is-on-pace {
  --pace-accent: var(--blue);
  --pace-accent-text: var(--blue);
  --pace-accent-soft: var(--blue-soft);
  --pace-accent-edge: rgba(49, 95, 132, .24);
  --pace-accent-wash: rgba(226, 235, 243, .76);
}
.weekly-pace-forecast.is-over-pace {
  --pace-accent: var(--amber);
  --pace-accent-text: var(--amber);
  --pace-accent-soft: var(--amber-soft);
  --pace-accent-edge: rgba(129, 87, 24, .26);
  --pace-accent-wash: rgba(244, 234, 215, .8);
}
/* Past twice the sustainable pace the window ends with more dry hours than
   covered ones, which is a different message from "ease off". */
.weekly-pace-forecast.is-over-pace.is-critical {
  --pace-accent: var(--rust);
  --pace-accent-text: var(--rust);
  --pace-accent-soft: var(--rust-soft);
  --pace-accent-edge: rgba(151, 64, 42, .26);
  --pace-accent-wash: rgba(244, 228, 222, .82);
}
.weekly-pace-forecast.is-insufficient {
  --pace-accent: var(--blue);
  --pace-accent-text: var(--blue);
  --pace-accent-soft: var(--blue-soft);
  --pace-accent-edge: rgba(49, 95, 132, .24);
  --pace-accent-wash: rgba(226, 235, 243, .76);
}
.weekly-pace-forecast-state-chip,
.weekly-pace-forecast-collecting-chip {
  color: var(--pace-accent-text);
  border-color: var(--pace-accent-edge);
  background: var(--pace-accent-soft);
}
.weekly-pace-forecast-early-chip {
  color: var(--amber);
  border-color: rgba(154, 106, 36, .2);
  background: var(--amber-soft);
}
.weekly-pace-forecast-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  grid-column: 1 / -1;
}
.weekly-pace-forecast-heading .panel-kicker { margin: 0; }
.weekly-pace-forecast-title {
  grid-column: 1;
  margin: 0;
  max-width: 31ch;
  font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  line-height: 1.2;
}
.weekly-pace-forecast-copy {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
  font-size: .76rem;
  line-height: 1.55;
}
.weekly-pace-forecast-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  grid-column: 2;
  grid-row: 2 / span 2;
  gap: 8px;
  align-self: start;
}
.weekly-pace-forecast-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.weekly-pace-forecast-metric span {
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.weekly-pace-forecast-metric strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/*
 * The window track. Its width is the time left before the reset, and the
 * filled part is how much of that time the remaining allowance covers - so an
 * under-pace card fills the bar and an over-pace card shows the gap it will
 * spend with nothing left. Drawing time rather than allowance is deliberate:
 * "3% left" carries no urgency on its own, "that covers 20 minutes of the 29
 * hours left" carries all of it.
 */
.weekly-pace-track {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: 6px;
}
.weekly-pace-track-bar {
  position: relative;
  overflow: hidden;
  block-size: 12px;
  border: 1px solid var(--pace-accent-edge);
  border-radius: var(--radius-pill);
  /* The dry remainder is hatched as well as pale, so the covered/dry split
     survives a greyscale print or a colour-vision difference. */
  background-color: var(--surface-raised);
  background-image: repeating-linear-gradient(
    135deg,
    var(--pace-accent-soft) 0 5px,
    transparent 5px 10px
  );
}
.weekly-pace-track-covered {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  min-inline-size: 2px;
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
  background: var(--pace-accent);
}
/* Where the allowance ends if the recent active bursts continue without a
   pause. It is the fast edge of the estimate, never the estimate itself. */
.weekly-pace-track-mark {
  position: absolute;
  inset-block: -1px;
  inline-size: 2px;
  border-radius: 1px;
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--pace-accent);
}
.weekly-pace-track-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.weekly-pace-track-scale-end { text-align: end; }
.weekly-pace-track-note {
  margin: 0;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.5;
}
.weekly-pace-forecast-evidence {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: .67rem;
}
.weekly-table-panel { margin-top: 18px; }
.weekly-history-panel { margin-top: 18px; }
.weekly-history-panel .panel-heading { align-items: flex-start; flex-wrap: wrap; }
.weekly-chart-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.weekly-span-control {
  display: grid;
  grid-template-columns: auto minmax(110px, 150px) auto;
  align-items: center;
  gap: 8px;
  min-height: 37px;
  padding: .38rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: var(--surface);
  font-size: .68rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}
.weekly-span-control input {
  width: 100%;
  min-width: 0;
  accent-color: var(--green);
}
.weekly-span-control output {
  min-width: 4.1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
.weekly-legend { margin: 4px 0 10px; }
.weekly-history-chart { overflow: visible; }
.weekly-history-chart svg { min-width: 0; height: clamp(270px, 30vw, 330px); }
.legend-dot.weekly-center { background: var(--green); }
.legend-dot.weekly-range { height: 9px; background: rgba(49, 95, 132, .2); }
.legend-dot.weekly-error-bar { height: 9px; width: 3px; border-radius: 2px; background: rgba(49, 95, 132, .78); }
.legend-dot.weekly-mature {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--blue);
}
.legend-dot.weekly-partial {
  width: 9px;
  height: 9px;
  border: 2px solid var(--rust);
  border-radius: var(--radius-round);
  background: var(--surface-raised);
}

/* The weekly allowance chart is the lead chart of the dashboard, so its
   section and panel carry more weight than the sections that support it.
   Both selectors are doubled so the later shared .panel and .dashboard-section
   overrides in this file cannot flatten the lead treatment back out. */
/* Opens flush like every other page-opening section, and keeps `border-top: 0`
   unconditionally so the lead treatment survives wherever it is placed. */
.dashboard-section.lead-section { padding-top: var(--space-2); border-top: 0; }
.lead-section .section-heading > p { color: var(--text); font-size: .95rem; }
.panel.lead-chart-panel {
  border-color: var(--green-2, var(--line));
  box-shadow: 0 18px 46px rgba(31, 45, 39, .09);
}
.lead-chart-panel .weekly-history-chart svg { height: clamp(270px, 30vw, 330px); }

.accounting-disclosure { margin-top: -12px; }
/* Two cards form each accounting row. Auto-fit created four columns on wide
   windows, leaving both the headline and overhead pairs stranded in the left
   half of the available space. */
.accounting-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.accounting-summary > .accounting-speed-coverage { grid-column: 1 / -1; margin: 0; }
.compact-metric { min-height: 150px; }
.compact-metric .metric-value { margin: 16px 0 8px; font-size: 2rem; }
.accounting-component-grid { margin-bottom: 18px; }
/* The model name owns the slack and stays on one line; the numeric columns
   size to their digits and hug the right edge. A stale second rule block
   (width: 42%; white-space: normal) used to sit below this one and, at equal
   specificity, win — which re-broke readable names onto a second line
   ("GPT-5.3 Codex Spark") and reopened a void before the numbers
   (owner-reported 2026-08-07, again 2026-08-09). One coherent block now.
   An unrecognized raw identifier is a single long unbreakable token; on a
   narrow table it overflows into the .table-wrap horizontal scroll rather than
   forcing a spaced name to wrap. */
.accounting-models-panel table { table-layout: auto; }
.accounting-models-panel th:not(:first-child),
.accounting-models-panel td:not(:first-child) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
/* Keep the identity `<td>` in native table-cell layout. Setting the cell itself
   to `display: block` detached it from the table's column calculation, leaving
   a one-word column followed by what looked like an empty column. Its child
   name and reference mark already use ordinary inline flow. */
.model-identity { display: table-cell; }
/* A reference mark, not a badge: it sits on the name it qualifies and points
   at the one footnote under the table. The dotted underline `abbr` gets by
   default would read as a spelling error on a single glyph. */
.model-allowance-marker {
  color: var(--blue);
  font-size: .82em;
  font-weight: var(--weight-strong);
  text-decoration: none;
  cursor: help;
}
.model-allowance-footnote::before { content: "* "; }
/* Digits stay column-aligned so counts can be compared down the column. */
.numeric-cell, .model-api-equivalent { font-variant-numeric: tabular-nums; }

/* A share is the supporting reading of the figure beside it, so it is set
   smaller and quieter than the amount it qualifies. It keeps its own column
   rather than stacking under that amount: one column then holds one kind of
   number, and the decimal points line up down the page. */
.model-share, .model-share-head {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Only the data cell steps down. The header row keeps one size across every
   column, so shrinking this one too would make the row look misaligned. */
.model-share { font-size: .84em; }

/* An expandable model row is a control, so it says so on hover and focus. */
.model-row-expandable { cursor: pointer; }
.model-row-expandable:hover > td { background: var(--surface-quiet); }
.model-row-expandable:focus-visible {
  outline: 3px solid rgba(49, 95, 132, .42);
  outline-offset: -3px;
}
.model-disclosure-caret {
  width: .9em;
  height: .9em;
  margin-inline-end: var(--space-2);
  color: var(--muted);
  vertical-align: -.08em;
  transition: transform .18s ease;
}
.model-row-expandable[aria-expanded="true"] .model-disclosure-caret {
  transform: rotate(90deg);
}

/* A component row carries the same columns as the model above it, one level in
   and one shade quieter, so nothing about its shape has to be relearned. */
.model-component-row > td { background: var(--surface-quiet); }
.model-component-identity {
  padding-inline-start: calc(var(--space-4) + var(--space-5));
  font-weight: var(--weight-regular);
}
.model-component-withheld { color: var(--muted); }
.component-swatch {
  display: inline-block;
  width: .58em;
  height: .58em;
  margin-inline-end: var(--space-2);
  border-radius: 2px;
  background: var(--muted);
}
/* The same four colours the component bars above the table already use, so the
   rows and the bars read as one encoding rather than two. */
.component-swatch-input-cache-read-tokens { background: var(--blue); }
.component-swatch-input-uncached-tokens { background: var(--green-2); }
.component-swatch-input-cache-write-tokens { background: var(--chart-accent); }
.component-swatch-output-text-tokens { background: var(--rust); }
.component-swatch-output-reasoning-tokens { background: var(--amber); }
.component-swatch-output-combined-tokens { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .model-disclosure-caret { transition: none; }
}
.cache-switch-details { margin-top: 18px; }
#cache-switch-details th,
#cache-switch-details td { padding-inline: var(--space-2); }
.cache-switch-details th:nth-child(n + 3),
.cache-switch-details td:nth-child(n + 3) { text-align: end; }
.cache-drop-thread-cell {
  min-width: 12rem;
  max-width: 25rem;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
}
.cache-drop-thread-content { min-width: 0; }
.cache-drop-thread-link {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.cache-drop-thread-link:hover { text-decoration-thickness: 2px; }
.cache-drop-subworker { color: var(--muted); }
.cache-drop-thread-unavailable {
  color: var(--muted);
  cursor: help;
}
.cache-drop-thread-unavailable:focus-visible {
  outline: 3px solid rgba(49, 95, 132, .42);
  outline-offset: 3px;
}
.cache-reuse-outcome {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.cache-reuse-real-data {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: .68rem;
  font-weight: var(--weight-semibold);
}
.cache-reuse-real-data > span:first-child {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: var(--green-2);
  box-shadow: 0 0 0 3px rgba(45, 116, 102, .12);
}
.cache-reuse-summary {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-7);
  padding-bottom: var(--space-5);
}
.cache-reuse-title .panel-kicker { margin-bottom: var(--space-1); }
.cache-reuse-title h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  font-weight: var(--weight-display);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.cache-reuse-title > p:last-child {
  max-width: 48rem;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.cache-continuity-recent-table th:nth-child(3),
.cache-continuity-recent-table td:nth-child(3) { text-align: start; }
.cache-continuity-recent-table th:nth-child(n + 4),
.cache-continuity-recent-table td:nth-child(n + 4) { text-align: end; }
.side-chat-evidence-summary { margin: var(--space-4) 0 var(--space-3); }
.historical-gap-probe {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--pad-tile);
  border: 1px solid var(--rust);
  border-radius: var(--radius-sm);
  background: var(--rust-soft);
}
.historical-gap-probe h3 { margin: var(--space-1) 0 var(--space-2); }
.historical-gap-probe .annotation { margin: 0; }
.side-chat-historical-gap-summary { margin: var(--space-4) 0; }
.historical-gap-probe .timeline-confidence { margin-bottom: var(--space-3); }
.side-chat-details .evidence-subheading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: .82rem;
}
.side-chat-recent-table th { white-space: normal; }
.side-chat-recent-table .cache-switch-change { min-width: 9rem; }
.side-chat-recent-table th:nth-child(3),
.side-chat-recent-table td:nth-child(3),
.side-chat-recent-table th:nth-child(5),
.side-chat-recent-table td:nth-child(5) { text-align: start; }
.side-chat-recent-table th:nth-child(2),
.side-chat-recent-table td:nth-child(2),
.side-chat-recent-table th:nth-child(4),
.side-chat-recent-table td:nth-child(4),
.side-chat-recent-table th:nth-child(6),
.side-chat-recent-table td:nth-child(6) { text-align: end; }
.side-chat-recent-table td:nth-child(5) {
  min-width: 11rem;
  white-space: normal;
}
.cache-switch-change {
  min-width: 15rem;
  white-space: normal;
}
@media (max-width: 700px) {
  .cache-reuse-outcome { padding: var(--space-4); }
}
/* The evidence tables are readable on a desktop but not at phone
   width. Retain their table semantics there, then turn each row into a labelled
   card here instead of leaving an off-screen horizontal scroller. */
@media (max-width: 640px) {
  #cache-switch-details .table-wrap,
  #cache-continuity-details .table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  #cache-switch-details table,
  #cache-switch-details tbody,
  #cache-continuity-details table,
  #cache-continuity-details tbody {
    display: block;
    width: 100%;
  }
  #cache-switch-details table,
  #cache-continuity-details table { min-width: 0; }
  #cache-switch-details thead,
  #cache-continuity-details thead { display: none; }
  #cache-switch-details tbody,
  #cache-continuity-details tbody { display: grid; gap: var(--space-2); }
  #cache-switch-details tbody tr,
  #cache-continuity-details tbody tr {
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }
  #cache-switch-details tbody td,
  #cache-continuity-details tbody td {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    text-align: end;
    white-space: normal;
  }
  #cache-switch-details tbody td::before,
  #cache-continuity-details tbody td::before {
    content: attr(data-label);
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: .62rem;
    font-weight: var(--weight-bold);
    letter-spacing: .05em;
    text-align: start;
    text-transform: uppercase;
  }
  #cache-switch-details tbody td:last-child,
  #cache-continuity-details tbody td:last-child { border-bottom: 0; }
  #cache-switch-details .cache-switch-change,
  #cache-continuity-details .cache-switch-change,
  .cache-drop-thread-cell { min-width: 0; max-width: none; }
  #cache-switch-details .cache-drop-thread-cell,
  #cache-continuity-details .cache-drop-thread-cell { text-align: start; }
  #cache-switch-details .empty-cell,
  #cache-continuity-details .empty-cell {
    display: block;
    text-align: center;
  }
  #cache-switch-details .empty-cell::before,
  #cache-continuity-details .empty-cell::before { content: none; }
}
.accounting-bars { display: grid; gap: 10px; }
.accounting-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.accounting-dimensions .panel h3 { margin-bottom: 18px; font-size: 1.25rem; }
.dimension-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.dimension-row:last-child { border-bottom: 0; }
.dimension-row strong, .dimension-row span { display: block; }
.dimension-row strong { font-size: .75rem; }
.dimension-row span { color: var(--muted); font-size: .65rem; }
.dimension-row .dimension-share { flex: 0 0 auto; color: var(--green); font-weight: var(--weight-bold); }

.coverage-total { font-family: var(--serif); font-size: 2.2rem; font-weight: var(--weight-display); }
.coverage-list { display: grid; gap: 17px; }
.coverage-row { display: grid; grid-template-columns: 145px 1fr 52px; gap: 12px; align-items: center; font-size: .73rem; }
.coverage-row span { color: var(--muted); }
.coverage-row strong { text-align: end; }
.coverage-track { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.coverage-track i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }
.issue-list { display: grid; gap: var(--space-2); }
.issue {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.issue-icon { display: grid; place-items: center; width: 25px; height: 25px; color: var(--amber); background: var(--amber-soft); border-radius: var(--radius-round); font-size: .7rem; font-weight: var(--weight-bold); }
.issue strong { display: block; font-size: .78rem; }
.issue p { margin: 2px 0 0; color: var(--muted); font-size: .69rem; }
.issue-priority { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.issue p.issue-detail { margin-top: 6px; color: var(--text); font-variant-numeric: tabular-nums; }
.coverage-inventory { margin-top: 18px; }
.coverage-inventory .coverage-list { margin-bottom: 20px; }
.coverage-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.coverage-heading .annotation { margin: 0; }
.inventory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.inventory-row:last-child { border-bottom: 0; }
.inventory-row strong { font-size: .76rem; }
.inventory-row p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .69rem; }
.empty-inline { color: var(--muted); font-size: .76rem; }
.advanced-calibration,
.advanced-diagnostics,
.manual-contribution {
  margin-top: 18px;
}
/* Text-only disclosures. They keep their quiet look but pick up the shared
   24x24 minimum target and a hover state, so they behave like the ones above. */
.advanced-calibration > summary,
.advanced-diagnostics > summary,
.manual-contribution > summary,
.evidence-disclosure > summary {
  display: flex;
  align-items: center;
  min-height: var(--hit-target);
  cursor: pointer;
  color: var(--green);
  font-size: .78rem;
  font-weight: var(--weight-bold);
  text-underline-offset: 3px;
}
.advanced-calibration > summary:hover,
.advanced-diagnostics > summary:hover,
.manual-contribution > summary:hover,
.evidence-disclosure > summary:hover,
.contribution-categories > summary:hover { text-decoration: underline; }
.contribution-categories > summary {
  display: flex;
  align-items: center;
  min-height: var(--hit-target);
  text-underline-offset: 3px;
}
.advanced-calibration[open] > summary,
.advanced-diagnostics[open] > summary,
.manual-contribution[open] > summary,
.evidence-disclosure[open] > summary {
  margin-bottom: 16px;
}
.advanced-calibration > .panel + .lower-charts { margin-top: 18px; }
.primary-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manual-contribution {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.manual-contribution code { font-family: var(--mono, ui-monospace, monospace); }
.evidence-disclosure { display: block; }

/* Consumer hierarchy: the default journey is allowance, one trend, and one
   weekly estimate. Technical evidence remains available through disclosure. */
h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); }
.page-heading { padding: var(--space-8) 0 var(--space-7); }
/* Padding-block only. The top edge is owned by the two rules near
   `.dashboard-section` above, which decide whether this section is opening a
   page (flush) or following another visible block on it (separated). */
.dashboard-section { padding-bottom: var(--space-8); }
[data-dashboard-page]:not(.dashboard-page-inactive) ~ .dashboard-section:not(.dashboard-page-inactive) {
  padding-top: var(--space-8);
}
.section-heading { margin-bottom: var(--space-6); }
.panel { padding: var(--pad-card); box-shadow: var(--shadow-card); }
.metric-card { min-height: 165px; padding: var(--pad-card); }
.metric-card .metric-value { margin: var(--space-4) 0 var(--space-2); font-size: 2.7rem; }
.skeleton-card { min-height: 165px; }
.weekly-hero { padding: var(--space-7); }
.weekly-hero > div:first-child strong {
  font-size: clamp(2.5rem, 5vw, 4.1rem);
}

.evidence-chip.neutral { color: var(--muted); background: var(--surface-sunken); }
.evidence-chip.error { color: var(--rust); background: var(--rust-soft); }
.consent-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-4) 0;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.consent-row:hover { border-color: var(--line-strong); }
.consent-row:has(input:checked) { border-color: rgba(23, 79, 69, .38); background: var(--green-soft); }
.consent-row:has(input:focus-visible) { outline: 3px solid rgba(49, 95, 132, .42); outline-offset: 3px; }
.consent-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green); }
.consent-row span { display: flex; flex-direction: column; font-size: .73rem; }
.consent-row small { color: var(--muted); }
/* The prepare-and-review card's styles left with it (owner-directed,
   2026-08-08); the approve-once surface below is the only contribution flow. */
.compact-heading h4 { margin: 0; font-family: var(--serif); font-size: 1rem; font-weight: var(--weight-display); }
.community-connect {
  margin: var(--space-4) 0;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-quiet);
}
.community-connect .control-label {
  display: block;
  margin-bottom: 12px;
  color: var(--green-2);
  font-size: .66rem;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.community-connect .participant-action-status { margin-bottom: 0; }
/* The verified review instance on the approve card: three facts. The card
   lives in the narrow consent column, where three side-by-side tiles wrap
   one word per line; each fact is instead a full-width row with the label
   on the start edge and the value on the end edge. */
/* Compound selectors on purpose: the element carries both classes and the
   .summary-facts base rules are declared BELOW this block, so a lone
   .incremental-review-facts override loses the cascade at equal specificity
   (which is exactly how the 4-track squeeze shipped twice). */
.summary-facts.incremental-review-facts { grid-template-columns: 1fr; margin: 0; }
.summary-facts.incremental-review-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.summary-facts.incremental-review-facts dt { flex-shrink: 0; }
.summary-facts.incremental-review-facts dd { margin: 0; text-align: end; }
.summary-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-5) 0; }
.sync-facts { grid-template-columns: repeat(3, 1fr); }
.summary-facts > div { min-width: 0; padding: var(--pad-tile); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-quiet); }
.summary-facts dt { color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.summary-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .76rem; font-weight: var(--weight-semibold); }
.calibration-reasons { margin: 10px 0 0; padding-inline-start: 18px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.calibration-reasons li + li { margin-top: 4px; }
.snapshot-disclosure { color: var(--muted); font-size: .68rem; }
.snapshot-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.snapshot-quality-grid > div {
  min-width: 0;
  padding: var(--pad-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.snapshot-quality-grid dt {
  color: var(--muted);
  font-size: .56rem;
  text-transform: uppercase;
}
.snapshot-quality-grid dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: .69rem;
  font-weight: var(--weight-semibold);
}
.snapshot-table { margin-top: 14px; }
.snapshot-table table { min-width: 920px; }
.snapshot-table th, .snapshot-table td { white-space: nowrap; }
.snapshot-table th.numeric, .snapshot-table td.numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
/* Narrow layouts: each day becomes a labelled card instead of forcing a
   920px table into a sideways scroll. */
@media (max-width: 640px) {
  .snapshot-table table { min-width: 0; width: 100%; }
  .snapshot-table thead { display: none; }
  .snapshot-table tbody, .snapshot-table tr, .snapshot-table td,
  .snapshot-table tbody th { display: block; }
  .snapshot-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line, rgba(0, 0, 0, .12));
    border-radius: 10px;
    padding: 10px 12px;
  }
  .snapshot-table tbody th[scope="row"] {
    font-size: .95rem;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, .12));
    margin-bottom: 6px;
  }
  .snapshot-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    white-space: normal;
  }
  .snapshot-table td::before {
    content: attr(data-label);
    opacity: .7;
    font-size: .8rem;
  }
  .snapshot-table td.numeric { text-align: end; }
}
.participant-action-status.error { color: var(--rust); }

/* Public landing hierarchy. Keep the community surface intentionally small;
   the broader rules above remain shared with the loopback dashboard. */
.community-site .community-hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-bottom: 28px;
}
.community-site .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 12px; }
.community-site .topbar .primary-nav { justify-self: end; }
.community-site .community-hero .lede { max-width: 760px; }
.community-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.community-site .community-section {
  padding-top: 20px;
  border-top: 0;
}
.community-site .community-section > .lede {
  max-width: 850px;
  margin-bottom: 24px;
}
.community-site .community-download { margin-top: 18px; }
.community-site .community-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.community-site .community-trust-grid .panel { height: 100%; }
.community-site .community-trust-grid .panel h3 { margin-bottom: 10px; }
.community-site .community-trust-grid .panel p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .8rem;
}
.community-faq-list { display: grid; gap: 12px; }
.community-faq-item { margin-top: 0; }
.community-faq-item > summary { padding: 17px 20px; }
.community-faq-item > summary strong {
  margin-top: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: var(--weight-semibold);
}
.community-faq-answer { padding: 0 20px 17px; }
.community-faq-answer p { margin: 0; color: var(--muted); font-size: .78rem; }

footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
}
footer p { margin: 0; }
.noscript { position: fixed; inset: auto 0 0; padding: 1rem; color: white; background: var(--rust); text-align: center; }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: auto 1fr; padding-inline: 24px; }
  .top-actions { justify-self: end; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  /* Only stretch a trailing card that would otherwise sit half-width alone on
     its own row. `:last-child` on its own also stretched the second of two
     cards, which is why the Spark allowance rendered double the width of the
     primary allowance beside it at this breakpoint. In a two-column grid the
     last child is alone exactly when its position is odd. The accounting grid
     also contains a full-width disclosure, so child parity is not card parity. */
  .metric-grid:not(.accounting-summary) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .dashboard-shell { display: block; min-height: 0; }
  .dashboard-sidebar {
    position: static;
    min-height: 0;
    padding: .65rem 24px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .primary-nav {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .primary-nav a { flex: 0 0 auto; width: auto; white-space: nowrap; }
}

@media (max-width: 760px) {
  main, footer { width: min(100% - 28px, 1240px); }
  .topbar { padding-inline: 14px; }
  .state-pill { max-width: 118px; overflow: hidden; white-space: nowrap; }
  /* The detailed in-page history badge shares this class and is defined later
     in the sheet. Scope the narrow-screen override to the toolbar so that
     later evidence-card styling cannot make the header badge reappear and
     widen the page beyond the viewport. */
  .topbar .history-index-badge { display: none; }
  /* Only the crowded top toolbar sheds its compact buttons on narrow screens. */
  .topbar .button.compact { display: none; }
  #refresh-button.refresh-progress { display: none; }
  .dashboard-sidebar { padding-inline: 14px; }
  .page-heading, .section-heading, .section-heading.split, .weekly-hero, .weekly-pace-forecast, .setup-card, .companion-setup, .contribution-cta { grid-template-columns: 1fr; gap: 24px; }
  .companion-setup-actions { grid-column: 1; }
  .journey-disclosure > summary { align-items: flex-start; flex-direction: column; }
  #cancel-refresh.button.compact { display: inline-flex; }
  .page-heading { padding-top: 38px; }
  .community-site .community-trust-grid { grid-template-columns: 1fr; }
  .community-hero-actions .button { flex: 1 1 12rem; }
  .freshness-card { min-width: 0; }
  .dashboard-section { padding-bottom: var(--space-7); }
  [data-dashboard-page]:not(.dashboard-page-inactive) ~ .dashboard-section:not(.dashboard-page-inactive) {
    padding-top: var(--space-7);
  }
  .metric-grid, .two-column, .summary-facts, .snapshot-quality-grid { grid-template-columns: 1fr; }
  .metric-grid > :last-child { grid-column: auto; }
  .panel { padding: 21px; }
  .panel-heading, .chart-heading, .report-panel, .notice { align-items: flex-start; flex-direction: column; }
  .sync-panel-summary { align-items: flex-start; flex-wrap: wrap; }
  .component-row { grid-template-columns: 110px 1fr auto; }
  .comparison-row { grid-template-columns: 1fr auto; }
  .comparison-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  /* `.chart-summary-grid` is `auto-fit` now, so it reflows on its own and no
     longer needs a fixed two-up override that could overflow a 320px screen. */
  .weekly-pace-forecast-metrics { grid-column: 1; grid-row: auto; }
  .weekly-span-control { grid-template-columns: 1fr auto; }
  .weekly-span-control input { grid-column: 1 / -1; grid-row: 2; }
  .calibration-stats { grid-template-columns: 1fr; }
  .calibration-stats div { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .calibration-stats div:last-child { border-bottom: 0; }
  .share-card-readout { grid-template-columns: 1fr; }
  .share-card-readout > div { border-inline-end: 0; }
  .share-card-readout > div:nth-child(2) { border-top: 1px solid var(--line); }
  .share-actions .button { flex: 1 1 auto; }
  .timeline-controls,
  .calibration-controls { justify-items: start; }
  .allowance-header-controls { justify-items: start; min-width: 0; width: 100%; }
  .allowance-window-control,
  #weekly-plan-control { justify-content: flex-start; }
  .chart-control-stack { justify-content: flex-start; }
  .chart-navigation { justify-content: flex-start; }
  .identity-account .button { margin-inline-start: 0; }
  footer { flex-direction: column; }
}

@media (max-width: 520px) {
  h1 { font-size: 2.55rem; }
  h2 { font-size: 2.25rem; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  body:not(.community-site) > .topbar .brand > span { display: none; }
  .state-pill {
    justify-content: center;
    width: 28px;
    height: 28px;
    max-width: none;
    padding: 0;
    gap: 0;
    overflow: hidden;
    font-size: 0;
  }
  /* The toolbar saves space with a dot at this width. The boot card has the
     room — and its whole purpose is to name the state — so keep its label. */
  .dashboard-boot-card .state-pill {
    width: max-content;
    height: auto;
    padding: .38rem .62rem;
    gap: .45rem;
    font-size: .67rem;
  }
  .primary-nav a {
    flex: 0 0 auto;
    min-width: 62px;
    padding-inline: .25rem;
    font-size: .62rem;
    line-height: 1.2;
    text-align: center;
  }
  .chart-navigation {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }
  .chart-navigation .button.compact {
    min-width: 0;
    min-height: 48px;
    padding-inline: .35rem;
    font-size: .62rem;
  }
  .divergence-panel .table-pagination {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .divergence-panel .table-pagination-status {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }
  #divergence-page-prev { grid-column: 1; grid-row: 2; }
  #divergence-page-next { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/*
 * Public landing surface. Everything here is scoped so the installed app's
 * local dashboard keeps its existing layout and controls.
 */
.community-site {
  --site-green: #0c4038;
  --site-green-deep: #082f2a;
  --site-green-bright: #65c3aa;
  --site-cream: #f5f0e5;
  --site-paper: #fffdf7;
  background: var(--site-cream);
}
.community-site .skip-link {
  color: var(--site-green-deep);
  background: var(--site-paper);
}
.community-site .topbar {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  min-height: 64px;
  column-gap: 10px;
  padding-inline: max(24px, calc((100vw - 1180px) / 2));
  border-color: rgba(255, 253, 247, .14);
  background: rgba(8, 47, 42, .92);
  backdrop-filter: blur(18px);
}
.community-site .brand {
  min-width: 0;
  gap: .68rem;
  color: var(--site-paper);
  font-size: 1rem;
  letter-spacing: -.02em;
}
.community-site .brand > span {
  font-size: 1.18rem;
  line-height: 1;
}
.community-site .brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
.community-site .primary-nav {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  justify-self: stretch;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 4px;
  margin-inline: 0;
  scrollbar-width: none;
}
.community-site .topbar .primary-nav {
  justify-self: stretch;
}
.community-site .primary-nav::-webkit-scrollbar {
  display: none;
}
.community-site .primary-nav a {
  width: auto;
  min-height: 40px;
  padding: .45rem .68rem;
  color: rgba(255, 253, 247, .7);
  font-size: .72rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.community-site .primary-nav a:hover,
.community-site .primary-nav a:focus-visible {
  color: var(--site-paper);
  background: rgba(255, 255, 255, .09);
}
.community-site .header-download {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  justify-self: end;
  min-height: 38px;
  padding: .48rem .9rem;
  border: 1px solid rgba(255, 253, 247, .34);
  border-radius: var(--radius-pill);
  color: var(--site-green-deep);
  background: var(--site-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 5px 14px rgba(0, 0, 0, .12);
  font-size: .72rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.community-site .header-download:hover {
  color: var(--site-green-deep);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 9px 19px rgba(0, 0, 0, .18);
  transform: translateY(-1px);
}
.community-site .header-download-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.community-site .language-picker {
  justify-self: start;
}
.community-site .language-picker select {
  min-height: 34px;
  min-width: 5.2rem;
  max-width: 6.5rem;
  padding: .32rem 1.3rem .32rem .55rem;
  border-color: rgba(255, 253, 247, .2);
  border-radius: var(--radius-sm);
  color: rgba(255, 253, 247, .78);
  background: rgba(255, 253, 247, .07);
  box-shadow: none;
  font-size: .65rem;
  font-weight: var(--weight-semibold);
}
@media (max-width: 760px) {
  .community-site .topbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    min-height: 0;
    column-gap: 8px;
    padding-block: .45rem;
  }
}
.community-site main {
  width: 100%;
  margin: 0;
}
.community-site .product-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(42px, 4.5vw, 68px);
  align-items: start;
  min-height: min(790px, calc(100vh - 74px));
  padding:
    clamp(62px, 8vw, 104px)
    max(24px, calc((100vw - 1180px) / 2))
    clamp(66px, 8vw, 102px);
  overflow: hidden;
  color: var(--site-paper);
  background:
    radial-gradient(circle at 82% 14%, rgba(101, 195, 170, .16), transparent 31rem),
    radial-gradient(circle at 12% 100%, rgba(101, 195, 170, .08), transparent 29rem),
    var(--site-green-deep);
}
.community-site .hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.community-site .product-hero h1 {
  max-width: 690px;
  margin: 0 0 22px;
  color: var(--site-paper);
  font-size: clamp(3.7rem, 6.4vw, 75px);
  line-height: .88;
  text-wrap: balance;
}
.community-site .hero-lede {
  max-width: 580px;
  margin: 0;
  color: rgba(255, 253, 247, .7);
  font-size: clamp(.98rem, 1.3vw, 1.13rem);
  line-height: 1.62;
}
.community-site .install-cluster {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 30px;
}
.community-site .platform-selector {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  width: auto;
  max-width: 100%;
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.community-site .platform-selector[hidden],
.community-site .platform-panel[hidden] {
  display: none;
}
.community-site .platform-tab {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 32px;
  padding: .16rem .5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 253, 247, .62);
  background: transparent;
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.community-site .platform-tab + .platform-tab {
  border-inline-start: 1px solid rgba(255, 253, 247, .22);
}
.community-site .platform-tab span {
  font-size: .7rem;
  line-height: 1.15;
  white-space: nowrap;
}
.community-site .platform-tab:hover {
  color: var(--site-paper);
}
.community-site .platform-tab[aria-selected="true"] {
  border-bottom-color: var(--site-green-bright);
  color: var(--site-paper);
  background: transparent;
  box-shadow: none;
  font-weight: var(--weight-bold);
}
.community-site .platform-tab:focus-visible {
  outline: 2px solid var(--site-green-bright);
  outline-offset: 3px;
}
.community-site .platform-panel {
  min-width: 0;
}
.community-site .platform-unavailable-panel {
  width: min(100%, 560px);
  padding: 22px 24px;
  border: 1px solid rgba(255, 253, 247, .2);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, .15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.community-site .platform-unavailable-panel .platform-availability {
  margin: 0 0 7px;
  color: var(--site-green-bright);
  font-size: .58rem;
  font-weight: var(--weight-bold);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.community-site .platform-unavailable-panel h2 {
  margin: 0;
  color: var(--site-paper);
  font-family: var(--sans);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.community-site .platform-unavailable-panel h2 + p {
  margin: 8px 0 0;
  color: rgba(255, 253, 247, .68);
  font-size: .76rem;
  line-height: 1.5;
}
.community-site .platform-unavailable-panel a {
  display: inline-block;
  margin-top: 13px;
  color: var(--site-green-bright);
  font-size: .72rem;
  font-weight: var(--weight-bold);
  text-underline-offset: 4px;
}
.community-site .install-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 12px 18px;
}
.community-site .mac-download-button {
  gap: .65rem;
  min-height: 54px;
  padding: .8rem 1.3rem .8rem 1.05rem;
  border: 1px solid rgba(255, 253, 247, .56);
  border-radius: var(--radius-pill);
  color: var(--site-green-deep);
  background: var(--site-paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 14px 30px rgba(0, 0, 0, .2);
  font-size: .84rem;
  text-decoration: none;
}
.community-site .mac-download-button:hover:not(:disabled) {
  color: var(--site-green-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 19px 36px rgba(0, 0, 0, .27);
}
.community-site .mac-download-button:disabled {
  border-color: rgba(255, 253, 247, .24);
  opacity: .78;
  cursor: default;
}
.community-site .homebrew-install {
  display: flex;
  flex: 1 1 330px;
  align-items: stretch;
  min-width: 0;
  max-width: 420px;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 247, .2);
  border-radius: var(--radius-md);
  color: var(--site-paper);
  background: rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.community-site .homebrew-prompt {
  align-self: center;
  padding-inline-start: .82rem;
  color: rgba(255, 253, 247, .48);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .69rem;
}
.community-site .homebrew-install code {
  align-self: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: .75rem .62rem;
  overflow-x: auto;
  color: rgba(255, 253, 247, .88);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .6rem;
  line-height: 1.35;
  scrollbar-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.community-site .homebrew-install code::-webkit-scrollbar {
  display: none;
}
.community-site .homebrew-copy-button {
  appearance: none;
  flex: 0 0 auto;
  min-width: var(--hit-target);
  padding: .65rem .72rem;
  border: 0;
  border-inline-start: 1px solid rgba(255, 253, 247, .14);
  color: rgba(255, 253, 247, .72);
  background: rgba(255, 255, 255, .06);
  font-size: .61rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.community-site .homebrew-copy-button:hover:not(:disabled) {
  color: var(--site-paper);
  background: rgba(255, 255, 255, .12);
}
.community-site .homebrew-copy-button[data-copy-state="copied"] {
  color: var(--site-green-deep);
  background: var(--site-green-bright);
}
.community-site .homebrew-copy-button:disabled {
  cursor: wait;
  opacity: .72;
}
.community-site .product-hero a:focus-visible,
.community-site .homebrew-copy-button:focus-visible {
  outline-color: var(--site-green-bright);
}
.community-site .download-platform-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
@media (min-width: 1121px) {
  .community-site .install-actions {
    width: calc(100% + 44px);
  }
}
.community-site .installer-unavailable {
  flex-basis: 100%;
  width: fit-content;
  padding: 0;
  border: 0;
  color: rgba(255, 253, 247, .58) !important;
  background: transparent;
  font-size: .68rem;
}
.community-site .open-installed-copy {
  color: rgba(255, 253, 247, .56);
  font-size: .72rem;
}
.community-site .open-installed-copy a {
  margin-inline-start: .2rem;
  color: var(--site-paper);
  font-weight: var(--weight-semibold);
  text-underline-offset: 3px;
}
.community-site .open-installed-copy a[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
}
.community-site .installer-details-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  max-width: 620px;
  margin-top: 0;
  color: rgba(255, 253, 247, .56);
  font-size: .67rem;
}
.community-site .installer-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.community-site .installer-summary-divider {
  color: rgba(255, 253, 247, .34);
}
.community-site .installer-checksum-copy {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: .2rem .45rem;
  border: 1px solid rgba(255, 253, 247, .2);
  border-radius: 5px;
  color: rgba(255, 253, 247, .72);
  background: rgba(255, 253, 247, .04);
  cursor: pointer;
  font: inherit;
  font-size: .62rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.community-site .installer-checksum-copy:hover:not(:disabled) {
  border-color: rgba(101, 195, 170, .62);
  color: var(--site-paper);
  background: rgba(101, 195, 170, .12);
}
.community-site .installer-checksum-copy[data-copy-state="copied"] {
  border-color: rgba(101, 195, 170, .72);
  color: var(--site-green-bright);
}
.community-site .installer-checksum-copy:disabled {
  cursor: wait;
  opacity: .72;
}
.community-site .installer-checksum-copy:focus-visible {
  outline: 2px solid var(--site-green-bright);
  outline-offset: 3px;
}
.community-site .installer-checksum-fallback {
  flex-basis: 100%;
  max-width: min(100%, 42rem);
  margin-top: 2px;
  color: rgba(255, 253, 247, .72);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .62rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.community-site .download-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
  max-width: 620px;
  margin: 16px 0 0;
  color: rgba(255, 253, 247, .72);
  font-size: .68rem;
  line-height: 1.45;
}
.community-site .download-assurance[hidden] {
  display: none;
}
.community-site .download-assurance-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(101, 195, 170, .5);
  border-radius: var(--radius-round);
  color: var(--site-green-bright);
  font-size: .65rem;
  font-weight: var(--weight-bold);
}
.community-site .download-assurance-mark::before {
  content: "✓";
}
.community-site .download-assurance strong {
  color: rgba(255, 253, 247, .9);
  font-weight: var(--weight-semibold);
}
.community-site .download-assurance a {
  color: var(--site-green-bright);
  font-weight: var(--weight-semibold);
  text-underline-offset: 3px;
}
.community-site #open-installed-app-status {
  margin: 0;
  color: rgba(255, 253, 247, .7);
  font-size: .7rem;
}
/*
 * The community's contribution totals, in the hero below the download. The
 * daily renderer writes the same `dl` it writes into the activity band, so
 * this styles that markup for a dark, narrow context rather than expecting
 * different DOM.
 *
 * It follows the community link and shares its rule: the link states the
 * freshness of exactly these figures, so a second separator between them
 * would split one claim into two.
 *
 * Hidden unless the page is holding current evidence. The renderer leaves the
 * host untouched on an unavailable answer, and it does not label retained
 * figures here the way the band does, so an unqualified claim in the hero
 * would outlive the evidence behind it. `data-live` is the same signal the
 * community link uses. A browser without `:has()` keeps the band hidden,
 * which fails in the safe direction.
 */
.community-site .hero-contribution { display: none; }
.community-site:has(.community-inline[data-live="true"]) .hero-contribution {
  display: block;
  max-width: 620px;
  margin-top: 18px;
}
.community-site .hero-contribution h2 {
  margin: 0;
  color: rgba(255, 253, 247, .58);
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}
.community-site .hero-contribution .snapshot-quality-grid {
  grid-template-rows: auto auto auto;
  gap: 16px 18px;
  margin: 11px 0 0;
}
/* Tiles would be a second card inside a hero that is already one surface;
   here the figures read directly off the dark ground. Sharing the grid's rows
   keeps the four values on one line even when a label wraps and another does
   not -- without it the longest label pushes its figure out of the row. */
.community-site .hero-contribution .snapshot-quality-grid > div {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.community-site .hero-contribution .snapshot-quality-grid dt {
  color: rgba(255, 253, 247, .5);
  font-size: .5rem;
  letter-spacing: .08em;
}
.community-site .hero-contribution .snapshot-quality-grid dd {
  margin-top: 3px;
  color: var(--site-paper);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.5vw, 1.4rem);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
}
/* The qualifier travels with the figure: a spend total that does not say it
   is not a bill, or a count that does not say across how many shared days,
   is a stronger claim than the evidence supports. */
.community-site .hero-contribution .snapshot-quality-grid small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 253, 247, .45);
  font-size: .53rem;
  line-height: 1.35;
}
@media (max-width: 700px) {
  /* Two up on a phone. Four stacked figures would push the download most of a
     screen down, and each value still has room for its qualifier. */
  .community-site .hero-contribution .snapshot-quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.community-site .community-inline {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  max-width: 620px;
  margin-top: 30px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 253, 247, .16);
  color: rgba(255, 253, 247, .58);
  font-size: .69rem;
  text-decoration: none;
}
.community-site .community-inline:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.community-site .community-inline strong {
  min-width: 0;
  overflow: hidden;
  color: var(--site-paper);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-site .community-inline .evidence-chip {
  color: rgba(255, 253, 247, .72);
  border: 1px solid rgba(255, 253, 247, .14);
  background: rgba(255, 255, 255, .08);
  font-size: .55rem;
}
.community-site .community-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: rgba(255, 253, 247, .5);
  box-shadow: 0 0 0 4px rgba(255, 253, 247, .08);
}
/* Live-evidence heartbeat: the dot turns green and pulses once the daily
   series has actually loaded (community.js stamps data-community-state). */
.community-site [data-community-state="published"] .community-dot,
.community-site .community-inline[data-live="true"] .community-dot {
  background: #4ade80;
  animation: community-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes community-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, .15); }
  50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .community-site [data-community-state="published"] .community-dot,
  .community-site .community-inline[data-live="true"] .community-dot {
    animation: none;
    box-shadow: 0 0 0 5px rgba(74, 222, 128, .25);
  }
}
.community-site .community-window {
  position: relative;
  width: min(100%, 670px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 247, .26);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--site-paper);
  box-shadow: 0 38px 80px rgba(0, 0, 0, .32);
  transform: rotate(.35deg);
}
.community-site .community-window::before {
  position: absolute;
  z-index: -1;
  inset: 12% -12% -18% 14%;
  border-radius: var(--radius-round);
  background: rgba(101, 195, 170, .18);
  filter: blur(45px);
  content: "";
}
.community-site .community-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f0ebdf;
}
.community-site .community-window-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
}
.community-site .community-window-brand img {
  border-radius: var(--radius-sm);
}
.community-site .community-window-context {
  padding: .28rem .48rem;
  border: 1px solid rgba(23, 79, 69, .16);
  border-radius: var(--radius-pill);
  color: var(--site-green);
  background: rgba(101, 195, 170, .12);
  font-size: .55rem;
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.community-site .community-window-actions {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.community-site .community-window-expand {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(23, 79, 69, .16);
  border-radius: var(--radius-sm);
  color: var(--site-green);
  background: rgba(255, 253, 247, .5);
  cursor: pointer;
}
.community-site .community-window-expand[hidden] {
  display: none;
}
.community-site .community-window-expand:hover {
  border-color: rgba(23, 79, 69, .3);
  background: var(--site-paper);
}
.community-site .community-window-expand:focus-visible {
  outline: 2px solid var(--site-green);
  outline-offset: 2px;
}
.community-site .community-window-expand svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.community-site .community-window-content {
  padding: 22px;
}
.community-site .hero-community-allowance .activity-heading {
  padding-top: 0;
  border-top: 0;
}
.community-site .community-window .activity-heading {
  gap: 18px;
}
.community-site .community-window .activity-heading h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.community-site .community-window .activity-heading p {
  max-width: 46ch;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.45;
}
.community-site .allowance-intro-copy {
  max-width: 46ch;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.45;
}
.community-site .allowance-intro-copy > span,
.community-site .allowance-source-summary,
.community-site .allowance-source-summary .snapshot-disclosure-details { display: inline; }
.community-site .allowance-source-summary .snapshot-disclosure-details { margin: 0; }
.community-site .allowance-source-summary .snapshot-disclosure-details > summary {
  font-size: .69rem;
  line-height: 1.45;
}
.community-site .allowance-source-summary .snapshot-disclosure-details[open] { display: block; }
.community-site .community-window .allowance-controls {
  gap: 8px;
}
.community-site .community-window .allowance-controls .evidence-chip {
  font-size: .52rem;
}
.community-site .community-window .result-summary {
  margin-top: 10px;
}
.community-site .community-window .allowance-headline-value strong {
  font-size: clamp(2.65rem, 5.5vw, 4.35rem);
}
.community-site .community-window .snapshot-disclosure {
  margin: 12px 0 0;
  font-size: .65rem;
  line-height: 1.45;
}
.community-site .feature-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  padding: clamp(38px, 5vw, 58px) 0;
  border-bottom: 1px solid var(--line);
}
.community-site .feature-strip article {
  min-width: 0;
  padding: 0 clamp(24px, 4vw, 50px);
  border-inline-start: 1px solid var(--line);
}
.community-site .feature-strip article:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.community-site .feature-strip article:last-child {
  padding-inline-end: 0;
}
.community-site .feature-step {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 11px;
  border: 1px solid rgba(23, 79, 69, .18);
  border-radius: var(--radius-pill);
  color: var(--site-green);
  background: rgba(101, 195, 170, .14);
  font-size: .66rem;
  font-weight: var(--weight-bold);
}
.community-site .feature-strip h2 {
  margin: 0 0 7px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  font-weight: var(--weight-display);
  letter-spacing: -.035em;
  line-height: 1;
}
.community-site .feature-strip p {
  max-width: 31ch;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
}
.community-site .community-proof {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.community-site .community-proof-compact {
  padding: clamp(24px, 3vw, 36px) 0 0;
}
.community-site .community-method {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 247, .54);
}
.community-site .community-method > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  color: var(--green);
  cursor: pointer;
  font-size: .75rem;
  font-weight: var(--weight-bold);
  list-style: none;
}
.community-site .community-method > summary::-webkit-details-marker {
  display: none;
}
.community-site .community-method > summary::after {
  color: var(--muted);
  content: "Show";
  font-size: .65rem;
}
.community-site .community-method[open] > summary::after {
  content: "Hide";
}
.community-site .community-method-body {
  padding: 2px 18px 20px;
}
/*
 * Open is the default state, so the summary reads as the band's own rule and
 * the activity heading does not repeat it. Collapsed, the heading keeps the
 * separator it needs when the summary has no bottom edge of its own.
 */
.community-site .community-method[open] > summary {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.community-site .community-method[open] .activity-heading {
  padding-top: 14px;
  border-top: 0;
}
.community-site .activity-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.community-site .activity-heading h3 {
  margin: 0 0 4px;
  font-size: .86rem;
}
.community-site .activity-heading p,
.community-site .annotation {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
}
.community-site .result-summary {
  margin-top: 15px;
}
.community-site .result-summary > p {
  font-size: .74rem;
}
.community-site .snapshot-disclosure {
  color: var(--muted);
  font-size: .72rem;
}
.community-site .snapshot-quality-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/*
 * With the figures hosted in the hero, the band now opens on its chart. The
 * activity heading already carries the gap above it, so the chart does not
 * add a second one where the figures used to sit.
 */
.community-site .community-proof .community-daily-chart:first-child {
  margin-top: 0;
}

/*
 * Chart credit: the mark and the wordmark on the figure itself, the way a
 * published chart carries its source. It is meant to be read, so it is set in
 * the page's own display face at a legible size rather than washed into the
 * background.
 *
 * It is decoration -- it repeats the wordmark already in the header, the
 * footer and the hero -- so the empty alternative text keeps it out of the
 * accessible tree, and it takes no pointer target over the chart's own hit
 * areas beneath it. `--chart-credit-ink` defaults to whatever the chart's own
 * muted tone is, which is already contrast-checked against that surface.
 *
 * Each position below was chosen against a measured empty region of that
 * chart, not a house rule: these figures have different shapes and their busy
 * corners are in different places.
 */
.community-site .cache-matrix-view::after,
.community-site .performance-plot::after,
.community-site #usage-timeline-chart::after,
.community-site .community-daily-chart::after {
  content: "TiboTattle" / "";
  position: absolute;
  z-index: 2;
  padding-inline-start: 17px;
  background: url("./tibotattle-icon.png") no-repeat left center / 13px 13px;
  color: var(--chart-credit-ink, var(--muted));
  font-family: var(--serif);
  font-size: 11px;
  font-weight: var(--weight-medium);
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.community-site .cache-matrix-view { --chart-credit-ink: var(--matrix-light, #ecf6ea); }
/* The medians ride the middle of the plot; only the top axis rule reaches
   this corner, and a credit may sit on a rule. */
.community-site .performance-plot::after {
  inset-block-start: 2px;
  inset-inline-end: 6px;
}
/* The week figure stacks two lanes. The lower lane's top right is the one
   corner of the pair with no series, no axis label and no reset marker. */
.community-site #usage-timeline-chart { position: relative; container-type: inline-size; }
.community-site #usage-timeline-chart::after {
  inset-block-start: 2px;
  inset-inline-end: 8px;
}
@container (max-width: 399px) {
  /* This lane keeps a 900:150 ratio, so by here it is barely seventy pixels
     tall and the activity fill reaches its own top right. Every corner is
     over data. A credit that covers the series is worse than none, and the
     page states the wordmark in four other places. */
  .community-site #usage-timeline-chart::after { content: none; }
}
/* Level with the legend, at the end of the row the legend leaves empty. */
.community-site .community-daily-chart { position: relative; }
.community-site .community-daily-chart::after {
  inset-block-start: 12px;
  inset-inline-end: 14px;
}
/* The hero window states the wordmark in its own title bar a few pixels
   above this chart. A second one inside the same panel is clutter, not
   attribution. The expanded dialog has no such bar and keeps its credit. */
.community-site .hero-community-allowance .community-daily-chart::after {
  content: none;
}
@media (forced-colors: active) {
  /* A forced palette repaints the credit as solid text over the plot, and it
     only repeats a wordmark the page states elsewhere. */
  .community-site .performance-plot::after,
  .community-site #usage-timeline-chart::after,
  .community-site .community-daily-chart::after {
    content: none;
  }
}
.community-site .table-wrap {
  margin-top: 16px;
}
.community-site .snapshot-breakdown > summary {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: .82rem;
}
.community-site .snapshot-breakdown > summary::after { margin-inline-start: auto; }
@media (max-width: 640px) {
  /* Keep a year of daily detail in a bounded, keyboard-scrollable region.
     Two metric columns retain every value without 361 tall card stacks. */
  .community-site .snapshot-table {
    max-height: min(65dvh, 560px);
    overflow: auto;
    margin-top: 10px;
  }
  .community-site .snapshot-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 0;
  }
  .community-site .snapshot-table tr + tr { border-top: 1px solid var(--line); }
  .community-site .snapshot-table tbody th[scope="row"] {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 0 3px;
    border: 0;
    font-size: .75rem;
  }
  .community-site .snapshot-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    padding: 2px 0;
    font-size: .76rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
  }
  .community-site .snapshot-table td::before {
    font-size: .62rem;
    font-weight: var(--weight-medium);
    line-height: 1.2;
  }
  .community-site .snapshot-table td.numeric { text-align: start; }
}
/*
 * The public daily-series chart. Inline SVG only — the site is CSP-strict and
 * dependency-free. Usage-event bars read on the left axis in the chart
 * accent; the combined-output line reads on the right axis in blue, matching
 * the dashboard's cost/value series colour.
 */
.community-site .community-daily-chart {
  margin-top: 16px;
  padding: 14px 14px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-quiet);
}
.community-site .community-daily-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.community-site .community-daily-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: .66rem;
}
.community-site .community-daily-legend > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.community-site .daily-legend-swatch {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  background: var(--chart-accent);
}
.community-site .daily-legend-swatch.output {
  height: 3px;
  border-radius: 999px;
  background: var(--blue);
}
.community-site .community-daily-chart .annotation {
  margin-top: 6px;
}
.daily-events-bar { fill: var(--chart-accent); opacity: .82; }
.daily-output-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.daily-output-dot { fill: var(--blue); }
.daily-axis-events { fill: var(--green-text); }
.daily-axis-output { fill: var(--blue); }
/*
 * The community allowance figure: the section's centerpiece. Central fit and
 * band read in the brand green so the hero estimate is visually distinct from
 * the blue activity series below it.
 */
.community-site .community-allowance {
  margin: 0;
}
.community-site .allowance-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}
.community-site .allowance-controls .evidence-chip {
  margin: 0;
}
.community-site .allowance-view-controls {
  margin: 0;
  max-width: 100%;
}
.community-site .allowance-view-controls button { min-height: 40px; }
.community-site .allowance-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.community-site .allowance-picker-row .segmented-control { flex-shrink: 0; }
@media (max-width: 700px) {
  .community-site .allowance-picker-row .segmented-control button {
    padding-inline: .5rem;
    white-space: nowrap;
  }
}
.community-site .community-chart-dialog-toolbar { flex-wrap: wrap; }
.allowance-summary-cards {
  display: grid;
  /* Three abreast wherever there is room for them. The old 190px floor wrapped
     to 2 + 1 inside the embedded card column, which cost a whole row of height
     and made the third plan look like an afterthought. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.community-site .allowance-summary-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .community-site .allowance-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .allowance-summary-card { padding: 8px 7px; }
  .allowance-summary-value { font-size: 1.25rem; }
  .allowance-summary-card h3 { font-size: .72rem; overflow-wrap: anywhere; }
  .allowance-summary-card p { font-size: .68rem; overflow-wrap: anywhere; }
}
@media (max-width: 340px) {
  .community-site .allowance-summary-cards { grid-template-columns: minmax(0, 1fr); }
}
.allowance-summary-card {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--allowance-color, var(--green));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--allowance-color, var(--green)) 5%, var(--site-paper, #fffdf7));
  min-width: 0;
}
.allowance-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.allowance-summary-card h3 { font-size: .8rem; margin: 0; }
.allowance-summary-card p { font-size: .72rem; line-height: 1.4; margin: 4px 0 0; }
.allowance-summary-card .allowance-plan-value { color: var(--ink); }
.community-site .allowance-legend-button.unavailable { opacity: .55; cursor: default; }
.allowance-summary-value { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.allowance-summary-caption { color: var(--muted); font-size: .72rem; font-weight: var(--weight-semibold); margin: 12px 0 0; }
.allowance-model-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: var(--allowance-color); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.allowance-model-astra { --allowance-color: #365f69; }
.allowance-model-sol { --allowance-color: #a96719; }
.allowance-model-terra { --allowance-color: #586a3b; }
.allowance-model-luna { --allowance-color: #676b8c; }
.allowance-model-classic { --allowance-color: #68665f; }
.allowance-model-review { --allowance-color: #365f54; }
.allowance-model-mini { --allowance-color: #68665f; }
.allowance-series-0 { --allowance-color: #42636c; }
.allowance-series-1 { --allowance-color: #ac4b16; }
.allowance-series-2 { --allowance-color: #7542a0; }
.allowance-series-3 { --allowance-color: #2664a2; }
.allowance-series-4 { --allowance-color: #08778a; }
.allowance-series-5 { --allowance-color: #956218; }
.allowance-series-6 { --allowance-color: #9d3c64; }
.allowance-series-7 { --allowance-color: #546b22; }
.community-site .community-allowance-chart .daily-legend-swatch.allowance-central { background: var(--allowance-color, var(--green)); }
.community-allowance-chart .allowance-central-line,
.community-allowance-chart .allowance-band-mark { stroke: var(--allowance-color, var(--green)); }
.community-allowance-chart .allowance-fit-dot,
.community-allowance-chart .allowance-band-area { fill: var(--allowance-color, var(--green)); }
.community-site .allowance-legend-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-xs);
  font: inherit; color: var(--muted); background: transparent; cursor: pointer;
}
.community-site button.allowance-legend-button:hover,
.community-site .allowance-legend-button[aria-pressed="true"] { color: var(--ink); background: var(--surface-raised); border-color: var(--line-strong); }
.community-site .allowance-legend-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* (4) The legend sat in its own block above the plot and cost ~40px of height
   before a single datapoint was drawn. Overlaying it on the figure reclaims
   that, and the buttons stay real buttons so focus and keyboard use are
   unchanged. */
.community-site .community-allowance-chart { position: relative; }
.community-site .allowance-series-legend {
  margin: 0;
  gap: 2px;
  position: absolute;
  inset: 2px 6px auto auto;
  z-index: 1;
  background: color-mix(in srgb, var(--site-paper, #fffdf7) 88%, transparent);
  border-radius: var(--radius-xs);
  padding: 1px 3px;
}
.community-site .allowance-legend-button { min-height: 26px; padding: 2px 6px; font-size: .72rem; }
/* The expanded chart keeps its credit. Reserve a separate legend row so six
   model labels can wrap without covering the credit or the plotted values. */
.community-site .community-chart-dialog .allowance-series-legend {
  position: static;
  padding-inline-end: 90px;
  min-height: 30px;
}

/* Closed, this is one quiet line — it inherited the journey card treatment and
   stood 105px tall shut, which is worse than the prose it replaced. */
.community-site .snapshot-disclosure-details { margin: 6px 0 2px; border: 0; padding: 0; background: none; }
.community-site .snapshot-disclosure-details > summary {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 0; margin: 0; list-style: none;
  font-size: .68rem; color: var(--muted); text-decoration: underline dotted;
}
.community-site .snapshot-disclosure-details > summary::-webkit-details-marker { display: none; }
.community-site .snapshot-disclosure-details > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.community-site .snapshot-disclosure-details[open] > summary { margin-bottom: 4px; }
.community-site .snapshot-disclosure-details .snapshot-disclosure { margin: 0 0 4px; font-size: .68rem; }

/* (5) Small multiples: one panel per plan, each with its own value axis. */
.allowance-small-multiples { display: grid; gap: 10px; margin-top: 10px; }
.allowance-panel { min-width: 0; }
.allowance-panel-title {
  margin: 0 0 2px;
  font-size: .74rem;
  font-weight: var(--weight-semibold);
  color: var(--allowance-color, var(--ink));
}
.allowance-panel .community-allowance-chart { margin: 0; }
.allowance-panel .allowance-series-legend { display: none; }
.community-site .community-allowance-chart [data-muted="true"] { opacity: .07; }

/*
 * The hero chart expands into a modal lightbox rather than taking over the
 * browser's fullscreen mode. Native <dialog> supplies background inertness,
 * focus containment and Escape dismissal; these rules provide the spacious
 * chart surface and keep the page behind it still.
 */
html.community-chart-modal-open,
html.community-chart-modal-open body {
  overflow: hidden;
}
.community-site .community-chart-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(23, 79, 69, .24);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--site-paper);
  box-shadow: 0 30px 90px rgba(4, 24, 21, .38);
}
.community-site .community-chart-dialog::backdrop {
  background: rgba(4, 24, 21, .68);
  backdrop-filter: blur(5px);
}
.community-site .community-chart-dialog-surface {
  min-width: 0;
}
.community-site .community-chart-dialog-header {
  position: sticky;
  z-index: 6;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  padding: 18px clamp(20px, 3vw, 34px) 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 247, .96);
  backdrop-filter: blur(12px);
}
.community-site .community-chart-dialog-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--site-green);
  font-size: .59rem;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.community-site .community-chart-dialog-header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--weight-display);
  letter-spacing: -.04em;
  line-height: .98;
}
.community-site .community-chart-dialog-header p {
  max-width: 68ch;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}
.community-site .community-chart-dialog-close {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  min-height: 40px;
  padding: .55rem .72rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--site-green-deep);
  background: var(--surface-raised);
  font-size: .66rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.community-site .community-chart-dialog-close:hover {
  background: var(--surface-quiet);
}
.community-site .community-chart-dialog-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}
.community-site .community-chart-dialog-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  padding: 18px clamp(20px, 3vw, 34px) 0;
  color: var(--muted);
  font-size: .66rem;
  font-weight: var(--weight-semibold);
}
.community-site .community-chart-dialog-result {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 34px) 30px;
}
.community-site .community-chart-dialog-result .allowance-headline-value strong {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
}
.community-site .community-chart-dialog-result .community-daily-chart {
  margin-top: 22px;
  padding: 18px 18px 10px;
}
.community-site .allowance-headline {
  margin-top: 15px;
}
.community-site .allowance-headline-value {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}
.community-site .allowance-headline-value strong {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: var(--weight-regular);
  letter-spacing: -.03em;
  line-height: 1;
}
.community-site .allowance-headline-value span {
  max-width: 22ch;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
.community-site .allowance-headline-band,
.community-site .allowance-headline-caveat {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .74rem;
}
.community-site .daily-legend-swatch.allowance-central {
  height: 3px;
  border-radius: 999px;
  background: var(--green);
}
.community-site .daily-legend-swatch.allowance-band {
  background: var(--green);
  opacity: .18;
}
.community-site .daily-legend-swatch.allowance-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--green);
}
.allowance-band-area {
  fill: var(--green);
  opacity: .14;
  stroke: none;
}
.allowance-band-mark {
  stroke: var(--green);
  opacity: .3;
  stroke-width: 6;
  stroke-linecap: round;
}
.allowance-central-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.allowance-fit-dot { fill: var(--green); }
/*
 * Hover affordances for the allowance chart: a snap-to-day crosshair, a ring
 * around the active dot, a transparent capture layer, and the HTML tooltip.
 * Everything keys off data-visible so the static (no-JS / server) render shows
 * none of it, and the tooltip anchors to the figure, hence position: relative.
 */
.community-site .community-allowance-chart { position: relative; }
.allowance-hover-capture { cursor: crosshair; }
.allowance-crosshair {
  stroke: var(--green);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .4;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
  transition: opacity .12s ease;
}
.allowance-crosshair[data-visible="false"] { opacity: 0; }
.allowance-hover-dot {
  fill: var(--white);
  stroke: var(--green);
  stroke-width: 2;
  pointer-events: none;
  transition: opacity .12s ease;
}
.allowance-hover-dot[data-visible="false"] { opacity: 0; }
.community-site .community-allowance-chart svg { outline: none; }
.community-site .community-allowance-chart svg:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.community-site .allowance-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  min-width: 140px;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  color: var(--text);
  font-size: .72rem;
  line-height: 1.35;
  pointer-events: none;
  opacity: 1;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity .12s ease;
}
.community-site .allowance-tooltip[data-placement="below"] {
  transform: translate(-50%, 14px);
}
.community-site .allowance-tooltip[data-visible="false"] {
  opacity: 0;
  visibility: hidden;
}
/* Caret: a rotated square peeking out one edge. Above placement points down at
 * the dot; below points up. */
.community-site .allowance-tooltip::after {
  content: "";
  position: absolute;
  left: var(--caret-left, 50%);
  width: 8px;
  height: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  transform: translateX(-50%) rotate(45deg);
}
.community-site .allowance-tooltip:not([data-placement="below"])::after {
  bottom: -5px;
  border-block-start: none;
  border-inline-start: none;
}
.community-site .allowance-tooltip[data-placement="below"]::after {
  top: -5px;
  border-block-end: none;
  border-inline-end: none;
}
.community-site .allowance-tooltip-date {
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.community-site .allowance-tooltip-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.community-site .allowance-tooltip-value strong {
  color: var(--green);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: var(--weight-regular);
  letter-spacing: -.02em;
}
.community-site .allowance-tooltip-caption {
  color: var(--muted);
  font-size: .62rem;
}
.community-site .allowance-tooltip-range {
  margin-top: 3px;
  color: var(--green-text);
}
.community-site .allowance-tooltip-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: .66rem;
}
.community-site .resource-main {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(58px, 8vw, 92px) 0 clamp(68px, 9vw, 108px);
}
.community-site .resource-heading {
  max-width: 760px;
}
.community-site .resource-heading h1 {
  max-width: 760px;
  margin: 10px 0 20px;
  font-size: clamp(3.35rem, 6vw, 5.5rem);
}
.community-site .resource-lede {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.65;
}
.community-site .resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
}
.community-site .resource-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 247, .68);
}
.community-site .resource-card.wide {
  grid-column: 1 / -1;
}
.community-site .resource-card h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: var(--weight-display);
  letter-spacing: -.035em;
}
.community-site .resource-card p,
.community-site .resource-card li {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.65;
}
.community-site .resource-card p:last-child,
.community-site .resource-card ul:last-child {
  margin-bottom: 0;
}
.community-site .resource-card ul {
  margin: 0;
  padding-inline-start: 1.2rem;
}
.community-site .resource-card pre {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .75rem;
  line-height: 1.6;
}
.community-site .download-security-card {
  padding: clamp(26px, 4vw, 40px);
}
.community-site .download-security-card .security-eyebrow {
  margin: 0 0 8px;
  color: var(--green-text);
  font-size: .65rem;
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.community-site .download-security-card .security-lede {
  max-width: 74ch;
  margin: 0;
  color: var(--ink);
  font-size: .86rem;
}
.community-site .security-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}
.community-site .security-signals li {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .52);
}
.community-site .security-signals strong {
  color: var(--ink);
  font-size: .76rem;
  font-weight: var(--weight-semibold);
}
.community-site .security-signals span {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.55;
}
.community-site .security-signals a,
.community-site .verification-guide a,
.community-site .verification-guide-link a {
  color: var(--green-text);
  font-weight: var(--weight-semibold);
  text-underline-offset: 3px;
}
.community-site .verification-guide-link {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.65;
}
.community-site .verification-guide {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.community-site .verification-guide h3,
.community-site .verification-boundary h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: var(--weight-display);
  letter-spacing: -.025em;
}
.community-site .verification-guide > p,
.community-site .verification-boundary p {
  max-width: 76ch;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.65;
}
.community-site .verification-steps {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding-inline-start: 1.35rem;
}
.community-site .verification-steps li {
  padding-inline-start: 4px;
  color: var(--muted);
  font-size: .73rem;
}
.community-site .verification-boundary {
  margin-top: 24px;
  padding: 18px 20px;
  border-inline-start: 3px solid var(--site-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(101, 195, 170, .08);
}
.community-site .verification-boundary p + p {
  margin-top: 8px;
}
.community-site .resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.community-site .resource-actions a {
  min-height: 38px;
}
.community-site footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 22px;
}
.community-site .footer-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.community-site .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.community-site .footer-brand img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}
.community-site footer p {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
}
.community-site .footer-links {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.community-site .footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: .35rem .58rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 253, 247, .6);
  font-size: .69rem;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.community-site .footer-links a:hover {
  color: var(--green);
  background: var(--site-paper);
}
.community-site .footer-links a.footer-resource {
  padding-inline: .22rem;
  border-color: transparent;
  background: transparent;
}
.community-site .footer-links img {
  flex: 0 0 auto;
}

@media (max-width: 1120px) {
  .community-site .product-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    gap: 36px;
    padding: 52px 24px 64px;
  }
  .community-site .hero-copy {
    width: min(100%, 760px);
  }
  .community-site .community-window {
    width: min(100%, 620px);
    justify-self: center;
    transform: none;
  }
  .community-site .snapshot-quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .community-site .topbar {
    min-height: 0;
    padding-inline: 14px;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: 7px;
  }
  .community-site .brand {
    gap: .45rem;
    font-size: .82rem;
  }
  .community-site .brand > span {
    min-width: 0;
    max-width: clamp(4.4rem, 15vw, 7.2rem);
    overflow: hidden;
    font-size: clamp(.78rem, 2.1vw, .95rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .community-site .brand-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
  }
  .community-site .primary-nav {
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    margin-inline-end: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .community-site .primary-nav::-webkit-scrollbar {
    display: none;
  }
  .community-site .primary-nav a {
    min-height: 34px;
    padding-inline: .48rem;
    font-size: .67rem;
  }
  .community-site .header-download {
    justify-content: center;
    width: 36px;
    min-height: 36px;
    padding-inline: 0;
  }
  .community-site .header-download-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .community-site .language-picker select {
    min-width: 4.75rem;
    max-width: 5.6rem;
  }
  .community-site .product-hero {
    gap: 32px;
    padding: 48px 18px 56px;
  }
  .community-site .product-hero h1 {
    max-width: 560px;
    margin-bottom: 18px;
  }
  .community-site .hero-lede {
    font-size: .92rem;
  }
  .community-site .install-cluster {
    margin-top: 24px;
  }
  .community-site .homebrew-install {
    flex-basis: 100%;
    max-width: 100%;
  }
  .community-site .community-inline {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 2px;
    margin-top: 22px;
    padding-top: 14px;
  }
  .community-site .community-inline strong {
    grid-column: 2;
    white-space: normal;
  }
  .community-site .community-window-content {
    padding: 20px;
  }
  .community-site .community-chart-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: var(--radius-md);
  }
  .community-site .community-chart-dialog-header {
    gap: 16px;
    padding: 18px 16px 16px;
  }
  .community-site .community-chart-dialog-header h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .community-site .community-chart-dialog-toolbar {
    justify-content: space-between;
    padding: 14px 16px 0;
  }
  .community-site .community-chart-dialog-toolbar > span { display: none; }
  .community-site .community-chart-dialog-result {
    padding: 0 16px 20px;
  }
  .community-site .community-chart-dialog-result .allowance-headline-value {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .community-site .community-chart-dialog-result .community-daily-chart {
    padding: 12px 10px 7px;
  }
  .community-site .community-window .activity-heading {
    gap: 12px;
  }
  .community-site .feature-strip {
    grid-template-columns: 1fr;
    width: min(100% - 36px, 1180px);
    padding: 34px 0;
  }
  .community-site .feature-strip article,
  .community-site .feature-strip article:first-child,
  .community-site .feature-strip article:last-child {
    padding: 23px 0;
    border-top: 1px solid var(--line);
    border-inline-start: 0;
  }
  .community-site .feature-strip article:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .community-site .feature-strip article:last-child {
    padding-bottom: 0;
  }
  .community-site .community-proof {
    width: min(100% - 36px, 1180px);
  }
  .community-site .community-proof-compact {
    padding: 20px 0 0;
  }
  .community-site .activity-heading {
    display: grid;
  }
  .community-site .allowance-controls {
    align-items: flex-start;
  }
  .community-site .resource-main {
    width: min(100% - 36px, 960px);
    padding: 46px 0 64px;
  }
  .community-site .resource-heading h1 {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }
  .community-site .resource-grid {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
  .community-site .resource-card.wide {
    grid-column: auto;
  }
  .community-site .security-signals {
    grid-template-columns: 1fr;
  }
  .community-site footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    width: min(100% - 36px, 1180px);
    padding: 16px 0 18px;
  }
  .community-site .footer-copy {
    display: contents;
  }
  .community-site .footer-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .community-site .footer-links {
    grid-column: 2;
    grid-row: 1;
    gap: 4px;
  }
  .community-site .footer-links a.footer-social {
    justify-content: center;
    width: 32px;
    padding: 0;
  }
  .community-site .footer-social-label {
    display: none;
  }
  .community-site footer p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 420px) {
  .community-site .brand span {
    display: none;
  }
  .community-site .topbar {
    column-gap: 3px;
    padding-inline: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 2px;
  }
  .community-site .brand-icon {
    width: 26px;
    height: 26px;
  }
  .community-site .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }
  .community-site .primary-nav a {
    padding-inline: .4rem;
    font-size: .69rem;
  }
  .community-site .header-download {
    padding-inline: 0;
  }
  .community-site .language-picker select {
    min-width: 4.5rem;
    max-width: 5.1rem;
    padding-inline: .42rem 1.05rem;
    font-size: .58rem;
  }
  .community-site .install-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .community-site .mac-download-button,
  .community-site .homebrew-install,
  .community-site .installer-unavailable {
    width: 100%;
  }
  .community-site .homebrew-install {
    flex-basis: auto;
  }
  .community-site .homebrew-install code {
    overflow-x: visible;
    white-space: normal;
  }
  .community-site .open-installed-copy {
    width: 100%;
  }
  .community-site .community-window-bar {
    padding: 10px 12px;
  }
  .community-site .community-window-context {
    font-size: .5rem;
  }
  .community-site .community-window-actions {
    gap: 5px;
  }
  .community-site .community-window-expand {
    width: 34px;
    height: 34px;
  }
  .community-site .community-chart-dialog-close {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .community-site .community-chart-dialog-close span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .community-site .snapshot-quality-grid {
    grid-template-columns: 1fr;
  }
}
[data-dashboard-page].dashboard-page-inactive {
  display: none !important;
}

.share-toast-action { margin-inline-start: .75rem; flex: 0 0 auto; }

/*
 * Forest Ink dark appearance.
 *
 * The public dashboard remains light unless a trusted host explicitly sets
 * `data-theme="dark"` on the document element. The native app installs that
 * marker at document start, before this sheet paints, so there is no cream
 * flash when the Mac is using Dark appearance. These values deliberately
 * stay in the light design's cream-and-forest family: the hierarchy and
 * component shapes are unchanged; only their surface roles are remapped.
 */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141a17;
  --paper-2: #101512;
  --white: #f5f1e8;
  --ink: #f5f1e8;
  --text: #f5f1e8;
  --muted: #bec5bd;
  --line: rgba(245, 241, 232, .14);
  --line-strong: rgba(245, 241, 232, .21);
  --green: #76aa9c;
  --green-2: #99c5ba;
  --green-text: #99c5ba;
  --chart-accent: #99c5ba;
  --green-soft: rgba(118, 170, 156, .14);
  --rust: #bd735f;
  --rust-soft: rgba(189, 115, 95, .14);
  --amber: #c5a46a;
  --amber-soft: rgba(197, 164, 106, .14);
  --blue: #7d9eb8;
  --blue-soft: rgba(125, 158, 184, .14);
  --action-bg: #76aa9c;
  --action-bg-hover: #99c5ba;
  --action-ink: #141a17;
  --feature-bg: #2d7466;
  --feature-ink: #fffef9;
  --feature-muted: rgba(255, 254, 249, .76);
  --surface: rgba(27, 37, 33, .9);
  --surface-raised: #24322c;
  --surface-quiet: rgba(27, 37, 33, .72);
  --surface-sunken: #101512;
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, .18);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.community-site {
  background:
    radial-gradient(circle at 85% 4%, rgba(45, 116, 102, .13), transparent 27rem),
    var(--paper);
}

html[data-theme="dark"] .topbar {
  background: rgba(20, 26, 23, .92);
}

html[data-theme="dark"] .primary-nav a:hover,
html[data-theme="dark"] .primary-nav a.active,
html[data-theme="dark"] .state-pill,
html[data-theme="dark"] .evidence-chip {
  border-color: rgba(118, 170, 156, .24);
}

html[data-theme="dark"] .notice p,
html[data-theme="dark"] .timeline-confidence.low,
html[data-theme="dark"] .series-coverage,
html[data-theme="dark"] .evidence-warning,
html[data-theme="dark"] .installer-unavailable {
  color: #d7ba84;
}

html[data-theme="dark"] .notice-error p,
html[data-theme="dark"] .evidence-warning:not(.progress):not(.informational) {
  color: #d89a88;
}

html[data-theme="dark"] .notice-demo p,
html[data-theme="dark"] .notice-info p,
html[data-theme="dark"] .index-progress-headline,
html[data-theme="dark"] .index-progress-detail,
html[data-theme="dark"] .evidence-warning.progress,
html[data-theme="dark"] .evidence-warning.informational,
html[data-theme="dark"] .plain-result {
  color: #afc8db;
}

html[data-theme="dark"] .metric-card.quota-card-spark {
  border-color: rgba(125, 158, 184, .28);
  background: linear-gradient(145deg, rgba(125, 158, 184, .13), rgba(36, 50, 44, .92));
}

/* Forest Ink uses the selected balanced treatment: the metric retains one
   confident brand band while the explanation stays part of the dark report. */
html[data-theme="dark"] .weekly-hero {
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid rgba(118, 170, 156, .3);
  background: var(--surface);
}

html[data-theme="dark"] .weekly-hero > div:first-child {
  padding: 34px;
  color: var(--feature-ink);
  background: var(--feature-bg);
}

html[data-theme="dark"] .weekly-hero > div:first-child span,
html[data-theme="dark"] .weekly-hero > div:first-child small {
  color: var(--feature-muted);
}

html[data-theme="dark"] .weekly-hero > p {
  padding: 34px;
  margin: 0;
  color: var(--muted);
}

html[data-theme="dark"] .weekly-pace-forecast {
  background: linear-gradient(100deg, var(--pace-accent-wash), var(--surface));
}

html[data-theme="dark"] .weekly-pace-forecast:not(.is-on-pace):not(.is-over-pace):not(.is-insufficient) {
  --pace-accent-edge: rgba(118, 170, 156, .28);
  --pace-accent-wash: rgba(118, 170, 156, .13);
}

html[data-theme="dark"] .weekly-pace-forecast.is-on-pace,
html[data-theme="dark"] .weekly-pace-forecast.is-insufficient {
  --pace-accent-edge: rgba(125, 158, 184, .28);
  --pace-accent-wash: rgba(125, 158, 184, .13);
}

html[data-theme="dark"] .weekly-pace-forecast.is-over-pace {
  --pace-accent-edge: rgba(197, 164, 106, .28);
  --pace-accent-wash: rgba(197, 164, 106, .13);
}

html[data-theme="dark"] .weekly-pace-forecast.is-over-pace.is-critical {
  --pace-accent-edge: rgba(189, 115, 95, .28);
  --pace-accent-wash: rgba(189, 115, 95, .13);
}

html[data-theme="dark"] .notice.notice-info.accounting-disclosure {
  border-color: rgba(125, 158, 184, .2);
  border-inline-start: 3px solid var(--blue);
  background: var(--surface);
}

html[data-theme="dark"] .chart-grid {
  stroke: rgba(245, 241, 232, .1);
}

html[data-theme="dark"] .chart-error-bar-weekly .chart-error-bar-line,
html[data-theme="dark"] .chart-error-bar-weekly .chart-error-bar-cap {
  stroke: rgba(125, 158, 184, .86);
}

html[data-theme="dark"] .chart-area-confidence {
  fill: rgba(125, 158, 184, .14);
}

html[data-theme="dark"] .chart-point-weekly-mature {
  fill: var(--blue);
  stroke: var(--paper);
}

html[data-theme="dark"] .contribution-cta {
  border-color: rgba(118, 170, 156, .3);
  border-top-color: var(--green);
  background:
    radial-gradient(circle at 8% 10%, rgba(45, 116, 102, .18), transparent 52%),
    var(--surface-raised);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .info-popover,
html[data-theme="dark"] .share-toast {
  color: var(--ink);
  background: var(--surface-raised);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .provider-button-google {
  color: #17211e;
  background: #fff;
  border-color: #aeb8b3;
}

html[data-theme="dark"] .provider-button-apple {
  color: #f5f1e8;
  background: #070908;
  border-color: #070908;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--ink);
  border-color: var(--line);
  background-color: var(--surface-raised);
}

html[data-theme="dark"] .share-preview canvas {
  /* Portable share-card exports deliberately keep the existing light brand
     artwork in the first release, independent of the viewer's preference. */
  background: #f5f1e8;
}

html[data-theme="dark"] .skeleton-card {
  background: linear-gradient(100deg, rgba(245, 241, 232, .04) 35%, rgba(245, 241, 232, .13) 50%, rgba(245, 241, 232, .04) 65%);
  background-size: 300% 100%;
}

html[data-theme="dark"] .noscript {
  color: #141a17;
  background: var(--rust);
}

@media (max-width: 700px) {
  html[data-theme="dark"] .weekly-hero > div:first-child,
  html[data-theme="dark"] .weekly-hero > p {
    padding: 24px;
  }
}
/* The separate successor review must fit native narrow windows and never
   put a capability or device target into visible markup. */
#attribution-consent { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
#attribution-review-inventory dd { margin: .25rem 0 1rem; overflow-wrap: anywhere; }
#attribution-review-contract { overflow-wrap: anywhere; }

.electron-accountless-sharing-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  color: var(--ink);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.electron-accountless-sharing-control input {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  flex: 0 0 auto;
}

/* Compact evidence cards keep the qualifiers beside the amount. */
.cache-impact-card { min-width: 0; }
.cache-impact-card .metric-value { overflow-wrap: anywhere; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.1; }
.cache-impact-bullets { padding-inline-start: 1.1rem; margin: var(--space-2) 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.cache-impact-bullets li + li { margin-top: var(--space-1); }
.model-identity .model-usage-icon { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; margin-inline-end: .45rem; }
.allowance-model-spark { --allowance-color: #996315; }
/* Local Projects & threads: shared paper surfaces, typography and controls. */
.work-usage-toolbar, .work-usage-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.work-usage-period { display:flex; gap:6px; flex-wrap:wrap; }
.work-usage-period .button[aria-pressed="true"] { background:var(--action-bg); color:var(--action-ink); }
.work-usage-toolbar { justify-content:flex-start; margin:24px 0 16px; }
.work-usage-select { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.work-usage-select select, .work-usage-find input { background:var(--paper, #fffdf7); color:inherit; border:1px solid var(--line, #d8dbcf); border-radius:8px; padding:9px 12px; font:inherit; }
.work-usage-find { display:flex; gap:8px; margin:0 0 18px; }
.work-usage-find input { flex:1; min-width:0; max-width:440px; }
.work-usage-status, .work-usage-caption, .work-usage-notes, .work-usage-muted { color:var(--muted, #657167); font-size:13px; }
.work-usage-summary { display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; margin:24px 0; }
.work-usage-card { padding:22px; border:1px solid var(--line, #d8dbcf); border-radius:12px; background:var(--paper, #fffdf7); }
.work-usage-card span { display:block; font-size:13px; margin-bottom:10px; }
.work-usage-card strong { display:block; font:clamp(24px, 3vw, 42px)/1.2 Georgia,serif; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.work-usage-row-link { padding:0; border:0; background:none; color:inherit; text-align:start; font:inherit; font-weight:600; cursor:pointer; overflow-wrap:anywhere; }
.work-usage-row-link:hover { text-decoration:underline; }
.work-usage-value { font-variant-numeric:tabular-nums; font-weight:600; }
.work-usage-muted { display:block; margin-top:5px; font-weight:400; }
.work-usage-bar { height:4px; background:var(--line, #e0e4db); margin-top:8px; border-radius:4px; overflow:hidden; max-width:130px; }
.work-usage-bar span { height:100%; display:block; background:var(--accent, #245c46); }
.work-usage-date { font-size:12px; color:var(--muted, #657167); }
.work-usage-pagination { padding:20px 0; font-size:13px; }
.work-usage-notes { border-top:1px solid var(--line, #d8dbcf); margin-top:24px; padding-top:14px; line-height:1.7; }
.work-usage-components { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.work-usage-components div { border:1px solid var(--line, #d8dbcf); border-radius:8px; padding:14px; }
.work-usage-components dt { font-size:12px; }
.work-usage-components dd { margin:8px 0 0; font-size:20px; }
.work-usage-empty { padding:32px 12px; }
@media (max-width:600px) {
 .work-usage-summary { grid-template-columns:1fr 1fr; gap:10px; }
 .work-usage-card:first-child { grid-column:1 / -1; }
 .work-usage-card { padding:16px; }
 .work-usage-components { grid-template-columns:1fr 1fr; }
}

/* Projects use the existing accounting table's columns, row density, nesting,
   quiet shares and named-thread links. All values remain visible on narrow
   screens in the shared table-wrap scroll container. */
.work-usage-table-panel { margin-top: 18px; }
.work-usage-project-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--weight-semibold); text-align: start; cursor: pointer; }
.work-usage-project-toggle .model-disclosure-caret { display: inline-block; font-size: 1.25em; }
.work-usage-project-toggle[aria-expanded="true"] .model-disclosure-caret { transform: rotate(90deg); }
.work-usage-project-toggle:focus-visible, .work-usage-row-link:focus-visible { outline: 3px solid rgba(49,95,132,.42); outline-offset: 3px; }
.work-usage-table .work-usage-muted { font-size: .65rem; }
.work-usage-child-controls { white-space: normal; }
.work-usage-child-controls .table-pagination { margin: 0 0 8px; }
.work-usage-child-controls > .button { margin-inline-start: 12px; }
.work-usage-children .cache-drop-thread-cell { padding-inline-start: calc(var(--pad-tile) + var(--space-5) + var(--space-3)); }

.work-usage-model-toggle { display: inline-flex; margin-inline-end: 6px; }
.work-usage-table .cache-drop-thread-content { display: inline-block; width: calc(100% - 32px); vertical-align: top; }
.work-usage-table .cache-drop-thread-link { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.work-usage-primary-model { padding-inline-start: 22px; }
.work-usage-model-detail > td { padding: 0 var(--pad-tile) var(--pad-tile) calc(var(--pad-tile) + var(--space-5)); }
.work-usage-model-breakdown { padding: var(--pad-tile); background: var(--surface-quiet); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; }
.work-usage-model-table { width: 100%; }
.work-usage-model-breakdown .annotation { margin-bottom: 0; }
.work-usage-model-breakdown { white-space: normal; }
.work-usage-model-table th { white-space: normal; }
.work-usage-model-table th, .work-usage-model-table td { padding: var(--space-3); }

.work-usage-family-count { padding-inline-start: 22px; }
.work-usage-contributions { margin-bottom: var(--space-4); }
.work-usage-contributions th, .work-usage-contributions td { padding: var(--space-3); }

.work-usage-primary-model .model-usage-icon { width:1.25rem; height:1.25rem; display:inline-block; vertical-align:middle; margin-inline-end:.45rem; }

.work-usage-find { flex-wrap:wrap; }
.work-usage-find input { max-width:560px; min-width:200px; }
.work-usage-table .work-usage-bar { display:block; width:72px; height:5px; margin:6px 0 0 auto; background:var(--line); }
.work-usage-table .work-usage-bar span { background:var(--green-2); }
.work-usage-table td:last-child .work-usage-bar span { background:var(--amber); }
.work-usage-mix { padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-quiet); }
.work-usage-mix h3 { margin:0 0 var(--space-3); font:var(--weight-semibold) .8rem var(--sans); color:var(--muted); }
.work-usage-mix-strip { display:flex; height:12px; border-radius:var(--radius-pill); overflow:hidden; background:var(--line); }
.work-usage-mix-strip > span { display:block; flex:none; }
.work-usage-component-0 { background:var(--chart-accent); }
.work-usage-component-1 { background:var(--green); }
.work-usage-component-2 { background:var(--green-2); }
.work-usage-component-3 { background:var(--amber); }
.work-usage-component-4 { background:var(--blue); }
.work-usage-component-5 { background:var(--rust); }
.work-usage-mix-legend { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); padding:0; margin:var(--space-3) 0 0; list-style:none; }
.work-usage-mix-legend li { display:grid; grid-template-columns:10px auto auto; gap:4px 7px; align-items:center; font-size:.75rem; }
.work-usage-mix-swatch { width:9px; height:9px; border-radius:2px; }
.work-usage-mix-count { grid-column:2 / -1; color:var(--muted); font-variant-numeric:tabular-nums; }
.work-usage-mix-legend strong { font-variant-numeric:tabular-nums; }
.work-usage-search-note { padding-inline-start:var(--space-3); border-inline-start:3px solid var(--green-2); }

/* Shared dashboard page chrome. Keep chart headings and public-site heroes separate. */
.dashboard-shell main { width: calc(100% - 64px); padding-top: 32px; }
.dashboard-shell .dashboard-section,
.dashboard-shell .dashboard-section.lead-section { padding-top: 0; }
.dashboard-shell #overview { border-top: 0; padding-top: 0; }
.dashboard-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  margin: 0 0 24px;
}
.dashboard-page-header > div { min-width: 0; }
.dashboard-shell .dashboard-page-header :is(h1, h2) {
  margin: 0;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: var(--weight-regular);
  letter-spacing: -.035em;
  line-height: 1.15;
}
.dashboard-shell .dashboard-page-header .page-description {
  max-width: 70ch;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.dashboard-page-header .segmented-control { flex-wrap: wrap; }
.dashboard-page-header .segmented-control button { min-height: 36px; }
.dashboard-page-header .segmented-control button[aria-pressed="true"] {
  background: var(--action-bg); color: var(--action-ink);
}
.dashboard-page-header .freshness-card {
  min-width: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
.dashboard-page-header .freshness-card strong { font-family: var(--sans); font-size: 15px; }
.dashboard-shell #community {
  display: block; margin-top: 0; padding: 0 0 var(--space-8);
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.dashboard-shell #community .panel-heading h2 { font-size: 24px; }
.setup-card { display: block; padding: 16px 24px; margin-bottom: 24px; }
.setup-card > summary { cursor: pointer; color: var(--ink); }
.setup-ready-label { margin-inline-start: 12px; color: var(--green); font-size: 12px; font-weight: var(--weight-semibold); }
.setup-card.needs-attention > summary { color: var(--amber); }
.setup-card > summary h2 { display: inline; margin: 0; font-family: var(--sans); font-size: 14px; font-weight: var(--weight-semibold); letter-spacing: 0; }
.setup-details-body { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; padding-top: 20px; }
@media (max-width: 900px) {
  .dashboard-page-header { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dashboard-page-header > :last-child { justify-self: start; }
  .setup-details-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .dashboard-shell main { width: calc(100% - 32px); padding-top: 24px; }
  .dashboard-shell .dashboard-page-header :is(h1, h2) { font-size: 30px; }
}

/*
 * Shared dashboard components.
 *
 * The public pages use some of the same names (for example `.panel` and
 * `.button`), so the component contract lives under `.dashboard-shell`. This
 * keeps the companion report consistent while leaving the public site free to
 * keep its own spacing and interaction treatment. Existing dashboard names
 * remain aliases beside the names intended for new markup.
 */
.dashboard-shell {
  --dashboard-control-height: 36px;
  --dashboard-card-gap: var(--space-5);
  --dashboard-focus-ring: rgba(49, 95, 132, .42);
}

/* Report context belongs to the persistent app header. */
body:not(.community-site) > .topbar {
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 14px;
  padding-inline: 24px;
}
.reporting-period-toolbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.reporting-period-toolbar[hidden] { display: none; }
.reporting-period-toolbar .segmented-control { display: inline-flex; flex-wrap: nowrap; }
.reporting-period-toolbar .segmented-control > button { min-width: 42px; padding: 8px 10px; white-space: nowrap; }
.reporting-period-details { position: relative; }
.reporting-period-details > summary {
  display: grid; place-items: center; width: 32px; height: 36px;
  cursor: pointer; color: var(--muted); list-style: none;
}
.reporting-period-details > summary::-webkit-details-marker { display: none; }
.reporting-period-details > p {
  position: absolute; inset: calc(100% + 8px) 0 auto auto;
  box-sizing: border-box; width: 220px; max-width: calc(100vw - 28px); margin: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card);
  font-size: .76rem; line-height: 1.5;
}
/* The date explanation is also available by keyboard or click/tap. */
.reporting-period-details:not([open]) > p { display: none; }

body:not(.community-site) > .topbar #refresh-button.refresh-progress { width: clamp(250px, calc(100vw - 750px), 360px); min-width: 250px; grid-template-columns: minmax(0, 1fr) max-content max-content; }
body:not(.community-site) > .topbar:has(#reporting-period-toolbar[hidden]) { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 760px) {
  body:not(.community-site) > .topbar { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; padding-block: 10px; }
  .reporting-period-toolbar { grid-row: 2; grid-column: 1 / -1; }
  body:not(.community-site) > .topbar .top-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  body:not(.community-site) > .topbar { padding-inline: 14px; }
  body:not(.community-site) > .topbar #refresh-button.refresh-progress { display: none; }
}

.dashboard-shell :is(.dashboard-control-group, .dashboard-filter-group) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.dashboard-shell :is(.dashboard-control-label, .dashboard-filter-label, .control-label) {
  color: var(--muted);
  font-size: .64rem;
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Segmented controls are filters or period choices: the selected value is a
   filled pill. A tab uses the underlined treatment below, so the two patterns
   remain visually and semantically distinct. */
.dashboard-shell .segmented-control {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.dashboard-shell .segmented-control > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hit-target);
  min-height: var(--dashboard-control-height);
  padding: .4rem .72rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .7rem;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dashboard-shell .segmented-control > button:hover:not(:disabled):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]) {
  color: var(--ink);
  background: var(--surface-quiet);
}
.dashboard-shell .segmented-control > button:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  color: var(--action-ink);
  border-color: transparent;
  background: var(--action-bg);
}
.dashboard-shell .segmented-control > button:disabled { cursor: not-allowed; }
.dashboard-shell .segmented-control > button:focus-visible,
.dashboard-shell :is(.dashboard-tabs, .performance-models) > [role="tab"]:focus-visible {
  outline: 3px solid var(--dashboard-focus-ring);
  outline-offset: 2px;
}

/* Actions share the same wrapping and status rhythm wherever a panel can
   refresh, retry, cancel, or continue. */
.dashboard-shell :is(.dashboard-actions, .dashboard-action-group, .action-group) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.dashboard-shell :is(.dashboard-action-status, .participant-action-status, .work-usage-status) {
  min-height: 1.5em;
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.dashboard-shell :is(.dashboard-action-status, .participant-action-status, .work-usage-status):is(.error, [data-state="error"]) {
  color: var(--rust);
}
.dashboard-shell .work-usage-status:is([data-state="preparing"], [data-state="loading"], [data-state="updating"]) { color: var(--blue); }
.dashboard-shell .work-usage-status:is([data-state="missing"], [data-state="unavailable"], [data-state="waiting"]) { color: var(--muted); }
.dashboard-shell :is(.button, button)[aria-busy="true"],
.dashboard-shell :is(.button, button)[data-loading="true"] { cursor: progress; }

/* Tabs have a baseline and an underline rather than the filled filter pill.
   `.performance-models` is an existing tablist and remains an alias. */
.dashboard-shell :is(.dashboard-tabs, .performance-models) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.dashboard-shell :is(.dashboard-tabs, .performance-models) > [role="tab"],
.dashboard-shell .performance-model {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--hit-target);
  min-height: 40px;
  margin: 0;
  padding: .5rem .72rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .76rem;
  font-weight: var(--weight-semibold);
  text-align: start;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dashboard-shell :is(.dashboard-tabs, .performance-models) > [role="tab"]:hover:not(:disabled),
.dashboard-shell .performance-model:hover:not(:disabled) {
  color: var(--ink);
  background: var(--surface-quiet);
}
.dashboard-shell :is(.dashboard-tabs, .performance-models) > [role="tab"]:is(.active, [aria-selected="true"]),
.dashboard-shell .performance-model[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--green);
  background: var(--green-soft);
}

/* Chart cards use one predictable order: title and description, controls,
   legend, then the chart body. `.chart-panel`, `.chart-heading`,
   `.chart-control-stack`, and `.legend` continue to work for existing pages. */
.dashboard-shell :is(.chart-card, .chart-panel) {
  min-width: 0;
  padding: var(--pad-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.dashboard-shell :is(.chart-card-header, .chart-heading) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-4);
}
.dashboard-shell :is(.chart-card-title, .chart-heading h3) {
  min-width: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: var(--weight-display);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.dashboard-shell :is(.chart-card-description, .chart-heading p) {
  max-width: 70ch;
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}
.dashboard-shell :is(.chart-card-controls, .chart-control-stack, .weekly-chart-controls) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}
.dashboard-shell :is(.chart-card-controls, .chart-control-stack, .weekly-chart-controls) > :is(.segmented-control, .dashboard-filter-group, .dashboard-filter) { order: 1; }
.dashboard-shell :is(.chart-card-controls, .chart-control-stack, .weekly-chart-controls) > :is(.chart-navigation, .dashboard-chart-navigation) { order: 2; }
.dashboard-shell :is(.chart-card-controls, .chart-control-stack, .weekly-chart-controls) > :is(.legend, .chart-card-legend) {
  order: 3;
  flex-basis: 100%;
  justify-content: flex-start;
}
.dashboard-shell :is(.chart-card-legend, .legend) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}
.dashboard-shell :is(.chart-card-legend, .legend) :is(span, li) { display: inline-flex; align-items: center; gap: var(--space-2); }
.dashboard-shell :is(.chart-card-body, .chart-shell) { min-width: 0; }

/* A state is a bounded, readable replacement for a chart/table body. The
   state modifier preserves the difference between loading, missing evidence,
   stale/partial evidence, and a genuine error. */
.dashboard-shell :is(.dashboard-state, .chart-empty, .work-usage-empty) {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: clamp(220px, 28vw, 340px);
  margin: 0;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface-quiet);
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}
.dashboard-shell :is(.dashboard-state, .chart-empty, .work-usage-empty).small,
.dashboard-shell .dashboard-state-compact { min-height: 220px; }
.dashboard-shell .chart-empty.small { min-height: 280px; font-size: .8rem; }
.dashboard-shell :is(.dashboard-state, .chart-empty, .work-usage-empty) > :is(strong, h3) {
  margin: 0;
  color: var(--ink);
  font-size: .84rem;
  font-weight: var(--weight-semibold);
}
.dashboard-shell :is(.dashboard-state, .chart-empty, .work-usage-empty) > p,
.dashboard-shell .dashboard-state-copy { max-width: 48ch; margin: 0; }
.dashboard-shell .dashboard-state-icon { color: var(--muted); font-size: 1.25rem; line-height: 1; }
.dashboard-shell .dashboard-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.dashboard-shell :is(.dashboard-state-loading, .dashboard-state[data-state="loading"], .dashboard-state[data-state="updating"]) {
  border-style: solid;
  border-color: rgba(44, 88, 120, .3);
  background: var(--blue-soft);
}
.dashboard-shell .dashboard-state-indicator {
  width: 2.25rem;
  height: .25rem;
  border-radius: var(--radius-pill);
  background: var(--blue);
  animation: dashboard-state-pulse 1.25s ease-in-out infinite;
}
.dashboard-shell :is(.dashboard-state-error, .dashboard-state[data-state="error"]) {
  border-style: solid;
  border-color: rgba(151, 64, 42, .32);
  color: var(--rust);
  background: var(--rust-soft);
}
.dashboard-shell :is(.dashboard-state-empty, .dashboard-state[data-state="empty"]) { border-style: dashed; }
.dashboard-shell :is(.dashboard-state-partial, .dashboard-state-stale, .dashboard-state[data-state="partial"], .dashboard-state[data-state="stale"]) {
  border-style: solid;
  border-color: rgba(129, 87, 24, .3);
  background: var(--amber-soft);
}
.dashboard-shell :is(.dashboard-state-unavailable, .dashboard-state[data-state="unavailable"], .dashboard-state[data-state="unknown"]) {
  border-style: solid;
  color: var(--muted);
  background: var(--surface-sunken);
}
@keyframes dashboard-state-pulse {
  0%, 100% { opacity: .45; transform: scaleX(.72); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* Evidence metadata is intentionally quieter than a result card, while its
   accent and state make freshness, coverage, and availability scannable. */
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--pad-tile);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface-quiet);
  font-size: .74rem;
  line-height: 1.5;
}
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence) :is(dt, .evidence-label, .freshness-label, .coverage-label) {
  color: var(--muted);
  font-size: .64rem;
  font-weight: var(--weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence) :is(dd, .evidence-value, .freshness-value, .coverage-value) {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence):is(.is-current, .is-fresh, [data-state="current"], [data-state="fresh"]) {
  border-inline-start-color: var(--green-2);
  background: var(--green-soft);
}
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence):is(.is-stale, .is-partial, [data-state="stale"], [data-state="partial"]) {
  border-inline-start-color: var(--amber);
  background: var(--amber-soft);
}
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence):is(.is-error, [data-state="error"]) {
  border-inline-start-color: var(--rust);
  background: var(--rust-soft);
}
.dashboard-shell :is(.evidence-meta, .freshness-meta, .coverage-note, .dashboard-freshness, .dashboard-coverage, .performance-evidence):is(.is-unavailable, .is-unknown, [data-state="unavailable"], [data-state="unknown"]) {
  border-inline-start-color: var(--line-strong);
  background: var(--surface-sunken);
}
.dashboard-shell :is(.series-coverage, .timeline-confidence) {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--pad-tile);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--blue-soft);
  font-size: .75rem;
  line-height: 1.5;
}
.dashboard-shell :is(.series-coverage, .timeline-confidence).low,
.dashboard-shell .series-coverage {
  border-inline-start-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

/* Longer explanations are disclosures, so they get a card boundary and a
   predictable open/closed affordance. Older evidence disclosures retain their
   text-only appearance and use the same minimum target below. */
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure) {
  margin-top: var(--dashboard-card-gap);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--hit-target);
  padding: var(--space-4) var(--pad-card);
  color: var(--ink);
  font-size: .78rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure) > summary::-webkit-details-marker { display: none; }
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure) > summary::after {
  flex: 0 0 auto;
  color: var(--green);
  content: "+";
  font-size: 1.15rem;
  font-weight: var(--weight-regular);
  line-height: 1;
}
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure)[open] > summary {
  border-bottom: 1px solid var(--line);
}
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure)[open] > summary::after { content: "−"; }
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure) > :is(.technical-disclosure-body, .dashboard-disclosure-body) {
  padding: var(--space-4) var(--pad-card) var(--pad-card);
}
.dashboard-shell :is(.technical-disclosure, .dashboard-disclosure) > summary:focus-visible {
  outline: 3px solid var(--dashboard-focus-ring);
  outline-offset: -3px;
}
.dashboard-shell :is(.advanced-calibration, .advanced-diagnostics, .manual-contribution, .evidence-disclosure) > summary {
  min-height: var(--hit-target);
  padding-block: var(--space-2);
  border-radius: var(--radius-xs);
}

@media (max-width: 760px) {
  .dashboard-shell :is(.chart-card-controls, .chart-control-stack, .weekly-chart-controls) { justify-content: flex-start; }
  .dashboard-shell :is(.chart-card-header, .chart-heading) { gap: var(--space-3); }
}
@media (max-width: 520px) {
  .dashboard-shell :is(.dashboard-tabs, .performance-models) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .dashboard-shell :is(.dashboard-tabs, .performance-models) > [role="tab"],
  .dashboard-shell .performance-model {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-shell .dashboard-state-indicator { animation: none; }
  .dashboard-shell :is(.segmented-control > button, .dashboard-tabs > [role="tab"], .performance-model) { transition: none; }
}

/* Compact desktop actions remain recognisable and keyboard accessible. */
.topbar .icon-button { width: 36px; min-width: 36px; height: 36px; padding: 7px; justify-content: center; flex: 0 0 36px; }
.topbar .icon-button svg { display: block; flex: none; }
.setup-details-body > #setup-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .76rem; max-width: 90ch; }
.setup-details-body > .setup-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .topbar .button.icon-button { display: inline-flex; }
}

/* Counters are evidence: only the descriptive phase may truncate. */
.refresh-progress-count, .refresh-progress-time { overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1100px) {
  body:not(.community-site) > .topbar .brand > span { display: none; }
}
@media (min-width: 761px) and (max-width: 950px) {
  body:not(.community-site) > .topbar #global-state { display: none; }
}

@media (max-width: 760px) {
  body:not(.community-site) > .topbar .top-actions { flex-wrap: wrap; min-width: 0; }
  body:not(.community-site) > .topbar #refresh-button.refresh-progress {
    display: grid; width: max-content; min-width: 0;
    grid-template-columns: max-content max-content;
  }
  .topbar .refresh-progress-phase { display: none; }
}

.metric-card-status { color: var(--amber); font-size: .75rem; font-weight: var(--weight-semibold); }
#connection-notice.notice-compact { padding: 12px 16px; border-width: 0 0 0 3px; border-radius: 6px; box-shadow: none; }
#connection-notice.notice-compact p { margin: 4px 0 0; }

/* Legends occupy their own row, leaving titles and controls room to wrap. */
.dashboard-shell .chart-card > :is(.chart-card-header, .chart-heading) > :first-child { flex: 1 1 22rem; min-width: 0; }
.dashboard-shell .chart-card > :is(.chart-card-legend, .legend) { justify-content: flex-start; margin: 0 0 var(--space-4); }
.dashboard-shell .chart-card-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.dashboard-shell .chart-card-note + .chart-card-note { margin-top: var(--space-2); }
.dashboard-shell .chart-card .chart-card-header .panel-kicker { margin-top: 0; }

@media (max-width: 760px) {
  .dashboard-shell :is(.chart-card, .chart-panel) { padding: var(--space-4); }
}

/* Project controls form one responsive toolbar; reporting lives in the header. */
.dashboard-shell .work-usage-toolbar { align-items: flex-end; gap: 12px; margin: 16px 0; }
.dashboard-shell .work-usage-toolbar .work-usage-find { flex: 1 1 240px; margin: 0; min-width: 180px; }
.dashboard-shell .work-usage-toolbar .work-usage-find input { width: 100%; max-width: none; height: 44px; min-height: 44px; box-sizing: border-box; font-size: .8rem; }
.dashboard-shell .work-usage-select { min-width: 120px; }
.dashboard-shell .work-usage-select select { height: 44px; min-height: 44px; box-sizing: border-box; }
.dashboard-shell .work-usage-filter-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dashboard-shell .work-usage-actions { gap: 8px 12px; margin: 12px 0; }
.dashboard-shell .work-usage-actions .work-usage-status { margin: 0; }
.dashboard-shell .work-usage-evidence { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.dashboard-shell .work-usage-evidence > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.dashboard-shell .work-usage-evidence :is(dt,dd) { margin: 0; font-size: inherit; font-variant-numeric: tabular-nums; }
.dashboard-shell .work-usage-evidence [data-state="partial"] { color: var(--amber); }
@media (max-width: 600px) {
  .dashboard-shell .work-usage-toolbar .work-usage-find { flex-basis: 100%; }
}

/* Shared data tables preserve native columns, with supporting values quieter. */
.dashboard-shell .dashboard-data-table { font-size: .8rem; line-height: 1.45; }
.dashboard-shell .dashboard-data-table th { padding-block: 12px; font-size: .72rem; font-weight: var(--weight-semibold); letter-spacing: 0; text-transform: none; background: var(--surface-quiet); }
.dashboard-shell .dashboard-data-table td { padding-block: 12px; vertical-align: top; }
.dashboard-shell .dashboard-data-table :is(.numeric-cell, .model-api-equivalent) { text-align: end; font-variant-numeric: tabular-nums; }
.dashboard-shell .dashboard-data-table :is(.model-share, .data-value-unavailable) { color: var(--muted); }
.dashboard-shell .dashboard-data-table .model-share { font-size: .9em; }
.dashboard-shell .dashboard-data-table tbody tr:focus-within > td { background: var(--surface-quiet); }
.dashboard-shell .dashboard-data-table .model-row-expandable[aria-expanded="true"] > td { background: var(--surface-quiet); }
.dashboard-shell .dashboard-data-table .model-row-expandable[aria-expanded="true"] > td:first-child { box-shadow: inset 3px 0 var(--green-2); }
.dashboard-shell .dashboard-table-scroll:focus-visible { outline: 3px solid var(--dashboard-focus-ring); outline-offset: 3px; }
.dashboard-shell .table-pagination { flex-wrap: wrap; }
.dashboard-shell .table-pagination-status { flex: 1 1 12rem; text-align: center; line-height: 1.5; }

/* Native model picker keeps shared identities prominent in both states. */
@supports (appearance: base-select) {
  .model-picker, .model-picker::picker(select) { appearance: base-select; }
  .model-picker::picker(select) {
    width: 288px; min-width: 272px; max-width: calc(100vw - 32px);
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--surface-raised); color: var(--ink); padding: 6px;
    box-shadow: 0 12px 32px rgba(25, 42, 35, .16), 0 2px 6px rgba(25, 42, 35, .06);
    max-height: min(65vh, 520px); overflow-y: auto;
  }
  .model-picker option {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px; padding: 6px 10px; border-radius: 9px;
    font-size: .84rem; line-height: 1.3; white-space: normal;
  }
  .model-picker option > span { min-width: 0; overflow-wrap: anywhere; }
  .model-picker option::checkmark { order: 2; margin-inline-start: auto; color: var(--green); }
  .model-picker option:checked { background: var(--green-soft); font-weight: var(--weight-semibold); }
  .model-picker option:hover { background: var(--surface-quiet); }
  .model-picker option:checked:hover { background: var(--green-soft); }
  .model-picker option:focus-visible { outline: 2px solid var(--dashboard-focus-ring); outline-offset: -2px; }
  .model-picker selectedcontent { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; }
  .model-picker selectedcontent > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .model-picker .allowance-model-icon {
    width: 32px; height: 32px; padding: 6px; box-sizing: border-box;
    flex-shrink: 0; border-radius: 9px;
    background: color-mix(in srgb, var(--allowance-color) 10%, transparent);
  }
  .model-picker selectedcontent .allowance-model-icon { width: 28px; height: 28px; padding: 5px; border-radius: 7px; }
  .dashboard-shell .work-usage-select:has(.model-picker) { min-width: 0; max-width: 100%; }
  .dashboard-shell .work-usage-select .model-picker { width: 240px; min-width: 210px; max-width: 100%; padding: 6px 12px 6px 7px; background: var(--surface-raised); }
  .model-picker::picker-icon { color: var(--muted); font-size: .7rem; }
}
/* Equal allowance tanks: content and observed capacity share one surface. */
.allowance-context { margin: 0 0 12px; color: var(--muted); font-size: .75rem; }
.metric-grid.quota-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.quota-grid > .quota-tank {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  isolation: isolate;
  min-width: 0;
  min-height: 230px;
  padding: 22px;
  border: 0;
  background: var(--surface-raised);
}
.quota-grid > .quota-tank:only-child { min-height: 185px; }
.quota-tank::before { content: none; }
.quota-tank-fuel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--green-2) 24%, var(--surface-raised));
}
.quota-tank.stale .quota-tank-fuel { background: color-mix(in srgb, var(--amber) 18%, var(--surface-raised)); }
.quota-tank-header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.quota-tank-family { color: var(--muted); font-size: .7rem; letter-spacing: .06em; }
.quota-tank-period { font-family: var(--serif); font-size: 1.4rem; }
.quota-tank-bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.quota-tank-value { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 4vw, 3.5rem); font-weight: var(--weight-regular); line-height: 1.15; font-variant-numeric: tabular-nums; }
.quota-tank-caption, .quota-tank-reset { display: flex; flex-direction: column; font-size: .75rem; }
.quota-tank-reset { align-items: flex-end; text-align: end; }
.allowance-timestamp { display: inline; width: fit-content; max-width: 100%; padding: 0; border: 0; border-bottom: 1px dotted currentColor; border-radius: 0; color: inherit; background: transparent; font: inherit; text-align: inherit; cursor: help; }
.allowance-timestamp:hover { color: var(--green-text); }
.quota-tank > .allowance-timestamp { font-size: .7rem; }
.weekly-pace-forecast { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.weekly-pace-forecast-title { max-width: 48ch; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: var(--weight-regular); line-height: 1.25; }
.weekly-pace-forecast-copy { max-width: 80ch; font-size: .85rem; line-height: 1.6; }
.weekly-pace-track { gap: 0; margin-top: 12px; }
.weekly-pace-track-bar { border: 0; }
.weekly-pace-track-labels { display: grid; grid-template-columns: var(--pace-covered) minmax(0, 1fr); align-items: end; font-size: .75rem; }
.weekly-pace-track-runout, .weekly-pace-track-reset { display: flex; flex-direction: column; align-items: flex-end; position: relative; text-align: end; padding: 0 8px 12px 0; }
.weekly-pace-track-runout { color: var(--pace-accent-text); }
.weekly-pace-track-reset { grid-column: 2; padding-inline: 8px 0; }
.weekly-pace-track-labels .allowance-timestamp { font-weight: var(--weight-semibold); }
.weekly-pace-track-runout::after, .weekly-pace-track-reset::after { content: ''; position: absolute; inset-inline-end: 0; inset-block-end: 0; height: 9px; width: 1px; background: currentColor; }
.weekly-pace-track-scale { display: grid; grid-template-columns: var(--pace-covered) minmax(0, 1fr); margin-top: 9px; text-transform: none; letter-spacing: 0; font-size: .75rem; }
.weekly-pace-track-gap { text-align: center; color: var(--pace-accent-text); }
.weekly-pace-track.is-edge .weekly-pace-track-labels { grid-template-columns: 1fr 1fr; gap: 12px; }
.weekly-pace-track.is-edge .weekly-pace-track-runout { align-items: flex-start; text-align: start; }
.weekly-pace-track.is-edge .weekly-pace-track-runout::after { content: none; }
.weekly-pace-track.is-edge .weekly-pace-track-scale { grid-template-columns: auto 1fr; gap: 12px; }
.weekly-pace-track.is-edge .weekly-pace-track-gap { text-align: end; }
.weekly-pace-details { border-top: 1px solid var(--pace-accent-edge); margin-top: 8px; padding-top: 12px; color: var(--muted); font-size: .75rem; }
.weekly-pace-details > summary { cursor: pointer; }
.weekly-pace-details .weekly-pace-forecast-metrics { grid-column: auto; grid-row: auto; margin: 12px 0; }
.weekly-pace-details .weekly-pace-forecast-metric { background: transparent; padding: 0; border: 0; }
.weekly-pace-details .weekly-pace-track-note { margin-top: 8px; }
@media (max-width: 1050px) {
  .metric-grid.quota-grid > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 500px) {
  .metric-grid.quota-grid { grid-template-columns: 1fr; }
  .quota-grid > .quota-tank { min-height: 185px; padding: 18px; }
  .weekly-pace-forecast { padding: 18px; gap: 12px; }
  .weekly-pace-track-labels { grid-template-columns: 1fr 1fr; gap: 12px; }
  .weekly-pace-track-runout { align-items: flex-start; text-align: start; }
  .weekly-pace-track-runout::after { content: none; }
  .weekly-pace-track-scale { grid-template-columns: auto 1fr; gap: 12px; }
  .weekly-pace-track-gap { text-align: end; }
}

/* Local glass renderer: text remains the accessible source of truth. */
.quota-tank {
  --tank-bg: var(--paper); --tank-panel: var(--surface-raised);
  --tank-ink: var(--ink); --tank-muted: var(--muted);
  --tank-edge: #93b5a4; --tank-metal: #d0dbcf; --tank-bright: #ffffff;
  --tank-shadow: #526f63; --tank-fluid: #147c5b; --tank-glow: #87df94; --tank-deep: #125440;
}
.quota-tank[data-flow="over"] { --tank-fluid: #d78112; --tank-glow: #ffe697; --tank-deep: #94510c; }
.quota-tank[data-flow="critical"] { --tank-fluid: #df3c25; --tank-glow: #ffb65b; --tank-deep: #9e182c; }
.quota-tank.stale { --tank-fluid: #929b91; --tank-glow: #d4d9cc; --tank-deep: #5a665b; }
.quota-grid > .quota-tank.has-liquid-tank { --tank-height: 320px; padding: 10px 12px; gap: 4px; justify-content: flex-start; background: var(--surface-raised); }
.quota-tank.has-liquid-tank .quota-tank-fuel { display: none; }
/* Keep identity and period above the rocket, clear of the illustration. */
.quota-tank.has-liquid-tank .quota-tank-header {
  position: relative; align-items: center; text-align: center; min-height: 42px;
  gap: 2px; width: 100%; overflow-wrap: anywhere;
}
.quota-tank.has-liquid-tank .quota-tank-family {
  color: var(--muted); font-family: var(--sans); font-size: .7rem;
  font-weight: var(--weight-regular); letter-spacing: .06em; text-transform: none;
}
.quota-tank.has-liquid-tank .quota-tank-period { font-family: var(--serif); font-size: 1.4rem; letter-spacing: normal; text-transform: none; }
.quota-tank.has-liquid-tank > .allowance-motion-controls { position: absolute; top: 8px; right: 8px; }

.quota-tank-canvas { display: block; width: 100%; height: var(--tank-height); touch-action: pan-y; }
.quota-tank-canvas[aria-disabled="false"] { cursor: pointer; }
.quota-tank-canvas:focus-visible { outline: 2px solid var(--green-text); outline-offset: -3px; border-radius: 8px; }
.quota-tank.has-liquid-tank .quota-tank-bottom { justify-content: center; }
.quota-tank.has-liquid-tank .quota-tank-bottom > div:first-child {
  position: absolute; top: calc(10px + var(--tank-label-space, 0px) + var(--tank-height) * .48); inset-inline: 50% auto; transform: translate(-50%, -50%);
  text-align: center; background: color-mix(in srgb, var(--surface-raised) 75%, transparent);
  border-radius: 8px; padding: 3px 5px; pointer-events: none;
}
.quota-tank.has-liquid-tank .quota-tank-reset { align-items: center; text-align: center; }
.quota-tank.has-liquid-tank > .allowance-timestamp { align-self: center; }
.weekly-pace-forecast.is-over-pace.is-critical { --pace-accent: #d9432c; --pace-accent-text: #a72c1e; --pace-accent-soft: #fce8df; --pace-accent-wash: #fbe0d7; }
html[data-theme="dark"] .weekly-pace-forecast.is-over-pace.is-critical { --pace-accent: #ff654b; --pace-accent-text: #ffac98; --pace-accent-soft: #532d28; --pace-accent-wash: #422821; }
html[data-theme="dark"] .quota-tank { --tank-edge: #567568; --tank-metal: #334e42; --tank-bright: #bcebd1; --tank-shadow: #000b07; --tank-fluid: #28c89d; --tank-glow: #a3ffce; --tank-deep: #12664e; }
html[data-theme="dark"] .quota-tank[data-flow="over"] { --tank-fluid: #ffb73f; --tank-glow: #ffe6a8; --tank-deep: #b06816; }
html[data-theme="dark"] .quota-tank[data-flow="critical"] { --tank-fluid: #ff654b; --tank-glow: #ffd28c; --tank-deep: #ad2538; }
html[data-theme="dark"] .quota-tank.stale { --tank-fluid: #8c9a8d; --tank-glow: #becbbf; --tank-deep: #435547; }


/* Quiet motion control; the system preference needs no status message. */
.allowance-motion-controls { display: flex; margin-inline-start: auto; min-height: 24px; }
.allowance-motion-controls[hidden] { display: none; }
.allowance-motion-controls button { display: grid; place-items: center; width: 28px; min-height: 28px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.allowance-motion-controls button:hover { background: var(--surface-raised); color: var(--ink); }
.allowance-motion-controls button > span { display: block; width: 10px; height: 12px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.allowance-motion-controls button[data-paused="true"] > span { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.quota-tank-family { display: flex; align-items: center; justify-content: center; gap: 5px; }
.quota-tank-family .allowance-model-icon { flex: 0 0 15px; width: 15px; height: 15px; }
.quota-tank[data-short-window="true"] .quota-tank-value { font-size: 2rem; }
.quota-tank[data-short-window="true"].has-liquid-tank .quota-tank-bottom > div:first-child { padding: 6px 8px; }
.weekly-pace-track-covered { position: absolute; overflow: hidden; }
.weekly-pace-track-covered::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 45px, color-mix(in srgb, var(--surface-raised) 42%, transparent) 58px, transparent 80px); background-size: 80px 100%; animation: allowance-forecast-flow var(--forecast-flow-duration, 5s) linear infinite; animation-play-state: paused; }
.weekly-pace-forecast[data-motion="running"] .weekly-pace-track-covered::after { animation-play-state: running; }
@keyframes allowance-forecast-flow { to { background-position: 80px 0; } }
@media (prefers-reduced-motion: reduce) { .weekly-pace-track-covered::after { display: none; } }
@media (pointer: coarse) { .allowance-motion-controls button { width: 44px; min-height: 44px; } }

.quota-codex-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.quota-tank-header { position: relative; }
.quota-tank-header > .allowance-motion-controls { position: absolute; top: 0; right: 0; }

.weekly-pace-forecast-heading .panel-kicker { display: inline-flex; align-items: center; gap: 6px; }

/* Integrated Trends: time-of-day is a local-clock context, kept outside data axes. */
#timeline { --trends-above: #b87039; --trends-below: #547caf; }
#timeline .trends-capacity-panel { overflow: hidden; padding-top: 0; box-shadow: 0 12px 38px #173e3010; }
.trends-horizon { position: relative; height: 174px; margin: 0 -24px; overflow: hidden; background: #287bb0; }
.trends-sky { position: absolute; inset: 0; background: linear-gradient(125deg,#32a2e7,#caeffc); overflow: hidden; }
.trends-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0b2438e8, #14354e9c 26%,transparent 67%); }
.trends-clock-content { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 22px 32px; color: #fff; text-shadow: 0 1px 5px #18344533; }
.trends-clock-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; color: #e6f3ff; margin-bottom: 13px; }
#trends-date { font-size: 12px; color: #edf7ff; }
#trends-clock { font: 44px/1.15 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -1px; margin-top: 3px; }
.trends-sun { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #fffde1; box-shadow: 0 0 16px 7px #ffffd788,0 0 55px 28px #fff8c254,0 0 115px 65px #ffffea20; }
.trends-moon { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 32% 30%,#fffff5,#baccdf); box-shadow: 0 0 25px 6px #d6edff33; }
.trends-stars { position: absolute; inset: 0; background-image: radial-gradient(circle at 51% 20%,#edf7ff 0 1px,transparent 1.4px),radial-gradient(circle at 65% 35%,#edf7ffbb 0 .8px,transparent 1.2px),radial-gradient(circle at 72% 13%,#edf7ff 0 1px,transparent 1.5px),radial-gradient(circle at 86% 32%,#edf7ffbb 0 1px,transparent 1.5px),radial-gradient(circle at 95% 18%,#edf7ff 0 1px,transparent 1.5px),radial-gradient(circle at 57% 48%,#edf7ff88 0 .7px,transparent 1.2px); }
.trends-clouds { position: absolute; inset: 0; opacity: .18; background: radial-gradient(ellipse 25% 10% at 89% 52%,#fff,transparent),radial-gradient(ellipse 13% 7% at 54% 29%,#fff,transparent); }
.trends-ridge { position: absolute; inset: 0; background: linear-gradient(0deg,#183f5838,transparent 32%); }
.trends-time-controls { display: flex; align-items: center; gap: 16px; padding: 12px 0; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
#trends-time { flex: 1; min-width: 48px; width: 100%; accent-color: var(--green-2); cursor: ew-resize; }
.trends-time-controls button { flex: 0 0 auto; }
.trends-lane-heading { font-size: 11px; color: var(--muted); margin: 10px 0 3px; }
#timeline .chart-shell { margin-top: 8px; }
#allowance-timeline-chart svg { aspect-ratio: 900 / 260; max-height: none; }
#usage-timeline-chart svg { aspect-ratio: 900 / 150; max-height: none; }
#timeline-chart svg { aspect-ratio: 900 / 270; max-height: none; }
#difference-timeline-chart svg { aspect-ratio: 900 / 125; max-height: none; }
#residual-chart svg { aspect-ratio: 900 / 230; max-height: none; }
#timeline .chart-heading { display: block; }
#timeline .chart-heading h3 { font-size: 27px; }
#timeline .chart-control-stack { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 16px; }
#timeline .chart-control-stack .legend { width: 100%; justify-content: flex-start; }
#timeline .chart-navigation { gap: 4px; }
#timeline .chart-navigation button { min-height: 29px; padding: 4px 8px; font-size: 11px; }
#timeline .chart-summary-grid { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
#timeline .chart-line-expected { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1.8; }
#timeline .chart-line-observed { stroke: var(--green-2); stroke-width: 2.2; }
.trends-reservoir-fill { fill: url(#trends-reservoir-gradient); }
.trends-difference-above { fill: var(--trends-above); fill-opacity: .38; }
.trends-difference-below { fill: var(--trends-below); fill-opacity: .32; }
.trends-activity-fill { fill: var(--green-2); fill-opacity: .5; }
.trends-guide { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; }
#timeline .trends-selected-point { fill: var(--surface-raised); stroke-width: 2; }
.trends-readout { margin: 4px 0 12px; min-height: 19px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.trends-difference-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.trends-sign-key { display: inline-flex; gap: 6px; align-items: center; }
.trends-sign-key i { width: 12px; height: 6px; background: var(--trends-above); border-radius: 2px; }
.trends-sign-key i:nth-of-type(2) { margin-inline-start: 8px; background: var(--trends-below); }
.trends-evidence-details { margin-top: 16px; }
.trends-evidence-details > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 0; }
#timeline .trends-comparison-panel, #timeline .trends-drift-panel { margin-top: 20px; }
#timeline .calibration-legend { font-size: 10px; gap: 9px 14px; }
#timeline .calibration-legend .expected { background: var(--muted); }
@media (max-width: 650px) {
  .trends-horizon { height: 160px; }
  .trends-clock-content { padding: 20px 28px; }
  #trends-clock { font-size: 38px; }
  #timeline .chart-heading { flex-direction: column; gap: 12px; }
  #timeline .chart-control-stack { align-items: flex-start; width: 100%; }
  #timeline .chart-navigation { flex-wrap: wrap; }
  .trends-time-controls { gap: 8px; }
  #timeline .chart-heading h3 { font-size: 24px; }
  #timeline .chart-shell svg { min-height: 140px; }
  #timeline #usage-timeline-chart svg, #timeline #difference-timeline-chart svg { min-height: 85px; }
}
@media (prefers-reduced-motion: reduce) {
  .trends-sky, .trends-sun, .trends-moon, .trends-stars { transition: none; animation: none; }
}
#timeline .trends-capacity-panel .legend-dot.cost { background: var(--green-2); height: 7px; opacity: .55; }
#timeline .trends-capacity-panel .legend-dot.allowance { border: 0; background: var(--green-2); height: 2px; }

/* Selected-time instruments and visible reset events. */
.trends-horizon { display: flex; align-items: center; justify-content: space-between; }
.trends-clock-content { flex: 1 1 auto; min-width: 210px; }
.trends-live-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 26px 18px 10px; padding: 16px 20px; color: #fff; background: #123247dc; border: 1px solid #f1faff3d; border-radius: 12px; box-shadow: 0 8px 26px #10232a20; }
.trends-live-metrics > div { display: flex; flex-direction: column; min-width: 125px; gap: 4px; }
.trends-live-metrics span { color: #ecf7ff; font-size: 11px; }
.trends-live-metrics strong { font: 36px/1.1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.trends-live-metrics small { font-size: 10px; color: #cee2ee; max-width: 170px; }
.trends-reset-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; color: var(--muted); font-size: 11px; }
#trends-reset-count { color: var(--green); font-weight: 600; }
.trends-reset-marker { --reset-marker-color: var(--green-2); cursor: pointer; outline: none; }
.trends-reset-marker line { stroke: var(--reset-marker-color); stroke-dasharray: 2 5; stroke-width: 1; opacity: .4; pointer-events: none; }
.trends-reset-marker rect { fill: var(--surface-raised); stroke: var(--reset-marker-color); stroke-width: 1; }
.trends-reset-marker text { fill: var(--reset-marker-color); font: bold 16px var(--sans); pointer-events: none; }
.trends-reset-marker text.trends-reset-group-count { font-size: 11px; }
.trends-reset-marker.banked_reset_used { --reset-marker-color: #7752a5; }
.trends-reset-marker.unknown_reset, .trends-reset-marker.observed_reset { --reset-marker-color: #956008; }
.trends-reset-marker.reset_credit_granted { --reset-marker-color: #296f97; }
.trends-reset-marker.reset_credit_expired, .trends-reset-marker.window_change, .trends-reset-marker.mixed { --reset-marker-color: var(--muted); }
.trends-reset-marker:focus rect, .trends-reset-marker:hover rect { stroke-width: 2.5; fill: var(--green-soft); }
.trends-event-detail { white-space: pre-line; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-quiet); color: var(--muted); font-size: 12px; }

/* Compact findings keep the timeline primary; contributor details expand in place. */
#timeline .divergence-panel { margin-top: 24px; }
.divergence-list { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#timeline .divergence-period { display: grid; grid-template-columns: minmax(175px,1.4fr) 105px minmax(140px,1fr) auto auto; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); border-inline-start: 3px solid var(--trends-above); background: var(--surface-raised); border-radius: 0; }
#timeline .divergence-period:last-child { border-bottom: 0; }
#timeline .divergence-period.over-costed { border-inline-start-color: var(--trends-below); }
.divergence-period-header { grid-column: 1; grid-row: 1; gap: 3px 8px; flex-direction: row; }
.divergence-gap { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.divergence-gap-value { font: 22px/1.1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--trends-above); }
.over-costed .divergence-gap-value { color: var(--trends-below); }
.divergence-gap > span { color: var(--muted); font-size: 10px; }
#timeline .divergence-period-finding { grid-column: 3; grid-row: 1; margin: 0; font-size: 12px; font-weight: 500; }
.divergence-focus { grid-column: 4; grid-row: 1; margin: 0; }
#timeline .divergence-period-toggle { grid-column: 5; grid-row: 1; margin: 0; }
#timeline .divergence-period .button, #timeline .divergence-period-toggle { min-height: 28px; padding: 5px 8px; font-size: 11px; white-space: nowrap; }
#timeline .divergence-period-range { font-size: 12px; }
#timeline .divergence-period-duration { font-size: 10px; text-transform: none; letter-spacing: 0; }
#timeline .divergence-period-breakdown, #timeline .divergence-period-unpriced { grid-column: 1 / -1; }
#timeline .divergence-period-breakdown { margin: 2px 0 0; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.divergence-breakdown-purpose { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.divergence-retry { margin-top: 8px; }
.residual-inspection-table th, .residual-inspection-table td { padding: 12px 14px; }
.residual-evidence { min-width: 215px; max-width: 330px; white-space: normal; }
.residual-evidence-label { display: block; font-size: 12px; font-weight: 600; }
.residual-evidence-detail { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.residual-window-time { white-space: nowrap; }
.residual-window-span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
@media (max-width: 1100px) {
  #timeline .divergence-period { grid-template-columns: minmax(175px,1fr) 105px auto auto; gap: 5px 12px; }
  #timeline .divergence-period-header { grid-column: 1; grid-row: 1; }
  #timeline .divergence-period-finding { grid-column: 1 / 3; grid-row: 2; }
  .divergence-gap, .divergence-focus, #timeline .divergence-period-toggle { grid-row: 1 / span 2; }
  .divergence-focus { grid-column: 3; }
  #timeline .divergence-period-toggle { grid-column: 4; }
}
@media (max-width: 650px) {
  #timeline .divergence-period { grid-template-columns: minmax(0,1fr) auto; padding: 12px; }
  #timeline .divergence-period-header { grid-column: 1; }
  .divergence-gap { grid-column: 2; grid-row: 1; }
  .divergence-focus { grid-column: 1; grid-row: 3; justify-self: start; }
  #timeline .divergence-period-toggle { grid-column: 2; grid-row: 3; }
}
@media (max-width: 850px) {
  .trends-live-metrics { gap: 14px; padding: 14px; margin-inline-end: 24px; }
  .trends-live-metrics > div { min-width: 105px; }
  .trends-live-metrics strong { font-size: 30px; }
}
@media (max-width: 650px) {
  .trends-horizon { height: auto; min-height: 275px; display: block; }
  .trends-sun, .trends-moon { margin-inline-start: 25%; }
  .trends-clock-content { padding-bottom: 12px; }
  .trends-live-metrics { margin: 0 24px 18px; }
  .trends-live-metrics > div { min-width: 0; }
  .divergence-list { grid-template-columns: 1fr; }
}

/* Keep release checksum copying discreet without reducing keyboard visibility. */
.community-site .electron-checksum-copy,
.community-site .electron-checksum-copy:hover:not(:disabled),
.community-site .electron-checksum-copy[data-copy-state="copied"] {
  border: 0;
  background: transparent;
  padding-inline: 0;
}

/* Keep the rocket and collapsed pace forecast together on desktop windows. */
.quota-tank.has-liquid-tank .quota-tank-value { font-size: 1.65rem; }
.quota-tank.has-liquid-tank .quota-tank-caption { font-size: .65rem; }
.quota-tank[data-short-window="true"].has-liquid-tank .quota-tank-bottom > div:first-child { padding: 3px 4px; }
.quota-tank[data-short-window="true"].has-liquid-tank .quota-tank-value { font-size: 1.4rem; }
.quota-tank-hint { align-self: center; color: var(--muted); font-size: .65rem; line-height: 1.4; }
@media (min-width: 900px) {
  .quota-grid > .quota-tank.has-liquid-tank { --tank-height: clamp(224px, calc(100svh - 570px), 310px); }
  #overview > .weekly-pace-forecast { padding: 16px 20px; gap: 8px; margin-bottom: 12px; }
  #overview .weekly-pace-forecast-title { font-size: 1.45rem; max-width: none; }
  #overview .weekly-pace-forecast-copy { max-width: none; line-height: 1.45; }
  #overview .weekly-pace-details { margin-top: 2px; padding-top: 8px; }
}

.quota-tank.has-liquid-tank .quota-tank-period { line-height: 1.2; }
.quota-tank.has-liquid-tank .quota-tank-family { line-height: 1.2; }
@media (min-width: 900px) {
  #overview .weekly-pace-track { margin-top: 4px; }
  #overview .weekly-pace-track-runout, #overview .weekly-pace-track-reset { padding-bottom: 8px; }
  #overview .weekly-pace-details { padding-top: 4px; }
}

.quota-tank.has-liquid-tank .quota-tank-bottom { margin-top: auto; }