/* Self-hosted Console fonts (latin subset, from @fontsource 5.3.0; SIL Open Font License 1.1, see fonts/OFL-*.txt). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }

/* ShineSplash Console tokens - generated from tokens.json by build-tokens-css.js; do not edit by hand. */
:root {
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  color-scheme: light;
  --surface: #f4f7f6;
  --surface-raised: #ffffff;
  --surface-sunken: #e9efed;
  --line: #d6dfdc;
  --line-strong: #7a8b87;
  --ink: #14201e;
  --ink-muted: #53625e;
  --splash: #0c6f65;
  --splash-deep: #08433d;
  --splash-soft: #d9eeea;
  --on-splash: #ffffff;
  --shine: #f2bd2c;
  --on-shine: #14201e;
  --focus: #0c6f65;
  --ok: #1c6a30;
  --ok-soft: #e0f1e4;
  --info: #1d57a3;
  --info-soft: #e2ebf8;
  --warn: #874700;
  --warn-soft: #fbecd5;
  --bad: #a3241a;
  --bad-soft: #f9e1de;
  --danger: #b3261e;
  --on-danger: #ffffff;
  --shadow-overlay: 0 8px 24px rgba(20, 32, 30, 0.14), 0 1px 3px rgba(20, 32, 30, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0f1514;
    --surface-raised: #172120;
    --surface-sunken: #0a0f0e;
    --line: #2a3735;
    --line-strong: #62736f;
    --ink: #e6eeec;
    --ink-muted: #9cafaa;
    --splash: #4cc4b5;
    --splash-deep: #0b5a52;
    --splash-soft: #123833;
    --on-splash: #04201c;
    --shine: #f2bd2c;
    --on-shine: #14201e;
    --focus: #4cc4b5;
    --ok: #86d698;
    --ok-soft: #14301b;
    --info: #93bdf2;
    --info-soft: #15253c;
    --warn: #f3b46e;
    --warn-soft: #36250f;
    --bad: #ff9d92;
    --bad-soft: #3b1815;
    --danger: #ff8a7f;
    --on-danger: #2a0b08;
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  }
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0f1514;
  --surface-raised: #172120;
  --surface-sunken: #0a0f0e;
  --line: #2a3735;
  --line-strong: #62736f;
  --ink: #e6eeec;
  --ink-muted: #9cafaa;
  --splash: #4cc4b5;
  --splash-deep: #0b5a52;
  --splash-soft: #123833;
  --on-splash: #04201c;
  --shine: #f2bd2c;
  --on-shine: #14201e;
  --focus: #4cc4b5;
  --ok: #86d698;
  --ok-soft: #14301b;
  --info: #93bdf2;
  --info-soft: #15253c;
  --warn: #f3b46e;
  --warn-soft: #36250f;
  --bad: #ff9d92;
  --bad-soft: #3b1815;
  --danger: #ff8a7f;
  --on-danger: #2a0b08;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ShineSplash Console — shared stylesheet. Every colour, size and radius comes from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 15px/22px var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font: 700 26px/32px var(--font-display); letter-spacing: -0.01em; }
h2 { font: 600 19px/24px var(--font-display); }
h3 { font: 600 15px/22px var(--font-sans); }
a { color: var(--splash); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink-muted); }
.small { font-size: 13px; line-height: 18px; }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 18px; }
.label { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.num { font-variant-numeric: tabular-nums; }

/* App header + navigation */
.sc-header { display: flex; align-items: center; gap: var(--space-5); min-height: 56px; padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px)) max(var(--space-4), env(safe-area-inset-right, 0px)); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.sc-brand { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 17px/1 var(--font-display); color: var(--ink); text-decoration: none; white-space: nowrap; }
.sc-brand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--shine); box-shadow: 0 0 0 3px var(--splash-deep); }
.sc-brand small { font: 500 13px/1 var(--font-sans); color: var(--ink-muted); }
.sc-nav { display: flex; gap: 2px; align-self: stretch; overflow-x: auto; }
.sc-nav a { display: flex; align-items: center; padding: 0 var(--space-3); color: var(--ink-muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.sc-nav a:hover { color: var(--ink); }
.sc-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--splash); font-weight: 600; }
.sc-who { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }

.sc-lines { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sc-lines a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 13px; line-height: 18px; color: var(--ink-muted); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.sc-lines a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--line-strong)); }
.sc-lines a[aria-current="page"] { background: var(--splash-soft); border-color: var(--splash); color: var(--ink); font-weight: 600; }

.sc-subnav { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.sc-subnav a { padding: var(--space-2) var(--space-3); color: var(--ink-muted); text-decoration: none; font-size: 14px; line-height: 20px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sc-subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--splash); }

/* Page frame */
.sc-page { max-width: 1200px; margin: 0 auto; padding-block: var(--space-6) var(--space-7); padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); display: grid; gap: var(--space-5); }
.sc-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.sc-page-head p { margin: var(--space-1) 0 0; color: var(--ink-muted); }

/* Buttons */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 7px 14px; font: 500 14px/20px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; }
.sc-btn:hover { background: var(--surface-sunken); }
.sc-btn.primary { background: var(--splash); border-color: var(--splash); color: var(--on-splash); font-weight: 600; }
.sc-btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); font-weight: 600; }
.sc-btn.primary:hover, .sc-btn.danger:hover { box-shadow: inset 0 0 0 99px rgba(0, 0, 0, 0.12); }
.sc-btn.quiet { background: transparent; border-color: transparent; color: var(--splash); padding-inline: var(--space-2); }
.sc-btn.quiet:hover { background: var(--splash-soft); }
.sc-btn.sm { padding: 3px 10px; font-size: 13px; line-height: 18px; }
.sc-btn:disabled, .sc-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.sc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Status badges: always a word, and the dot's shape differs per tone */
.sc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 8px; font: 600 12px/18px var(--font-sans); color: var(--ink-muted); background: var(--surface-sunken); border-radius: var(--radius-pill); white-space: nowrap; }
.sc-badge::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 1px; transform: scaleY(0.3); }
.sc-badge.ok { color: var(--ok); background: var(--ok-soft); }
.sc-badge.ok::before { border-radius: 50%; transform: none; }
.sc-badge.info { color: var(--info); background: var(--info-soft); }
.sc-badge.info::before { background: transparent; border: 1.5px solid currentColor; border-radius: 50%; transform: none; }
.sc-badge.warn { color: var(--warn); background: var(--warn-soft); }
.sc-badge.warn::before { transform: rotate(45deg) scale(0.85); }
.sc-badge.bad { color: var(--bad); background: var(--bad-soft); }
.sc-badge.bad::before { transform: none; }

/* Cards and stats */
.sc-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); min-width: 0; }
.sc-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.sc-card-head a { font-size: 13px; }
.sc-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sc-grid.wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.sc-stat { display: grid; gap: var(--space-1); align-content: start; }
.sc-stat .value { font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums; }
.sc-stat .note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sc-stat .note.warn { color: var(--warn); }
.sc-stat .note.bad { color: var(--bad); }

/* Key-value list (customer overview, item details) */
.sc-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.sc-facts dt { color: var(--ink-muted); font-size: 13px; line-height: 22px; }
.sc-facts dd { margin: 0; min-width: 0; }

/* Tables */
/* Sticky header rule (SS-115): the wrapper is its own scroll box, at most one screen tall, so the header row stays
   in view on long tables, also on phones and while scrolling sideways. Sections never override this. */
.sc-table-wrap { overflow: auto; max-height: calc(100dvh - var(--space-4)); overscroll-behavior: contain; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.sc-table th { text-align: left; padding: 8px var(--space-3); font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sc-table th a { color: inherit; text-decoration: none; }
.sc-table thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
.sc-table th[aria-sort] { color: var(--ink); }
.sc-table th[aria-sort="ascending"]::after { content: " \2191"; }
.sc-table th[aria-sort="descending"]::after { content: " \2193"; }
.sc-table td { padding: 9px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.sc-table tbody tr:last-child td { border-bottom: 0; }
.sc-table tbody tr:hover { background: var(--surface-sunken); }
/* Filter chips (SS-117): one-click filters as links (the Console runs no scripts). */
.sc-filters { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.sc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.sc-chips-label { min-width: 72px; font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.sc-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; font: 500 13px/18px var(--font-sans); color: var(--ink); text-decoration: none; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 999px; }
.sc-chip:hover { background: var(--surface-sunken); }
.sc-chip[aria-current="true"] { background: var(--splash); border-color: var(--splash); color: var(--on-splash); font-weight: 600; }
.sc-table tbody tr[aria-selected="true"] { background: var(--splash-soft); box-shadow: inset 3px 0 0 var(--splash); }
.sc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-table .id { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.sc-table .actions { text-align: right; white-space: nowrap; }
.sc-table .sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Forms */
.sc-form { display: grid; gap: var(--space-4); max-width: 560px; }
.sc-field { display: grid; gap: var(--space-1); }
.sc-field > label, .sc-field > .label-text { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.sc-input, .sc-select, .sc-textarea { width: 100%; max-width: 100%; padding: 7px 10px; font: 400 15px/22px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.sc-textarea { min-height: 96px; resize: vertical; }
.sc-input:disabled, .sc-select:disabled { background: var(--surface-sunken); color: var(--ink-muted); }
.sc-help { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sc-error { font-size: 13px; line-height: 18px; color: var(--bad); font-weight: 600; }
.sc-field.invalid .sc-input, .sc-field.invalid .sc-select, .sc-field.invalid .sc-textarea { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.sc-check { display: flex; gap: var(--space-2); align-items: flex-start; }
.sc-check input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--splash); }
.sc-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sc-row > * { flex: 1 1 180px; min-width: 0; }
.sc-row > .sc-btn, .sc-row > button, .sc-row > .sc-actions { flex: 0 0 auto; align-self: flex-end; }   /* a filter row's Show/Search never stretches */

/* Banners: view-as, warnings, errors, confirmations */
.sc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 10px var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sc-banner, .sc-banner > * { min-width: 0; overflow-wrap: anywhere; } /* long words/URLs wrap instead of widening the page (SS-101) */
.sc-banner strong { font-weight: 600; }
.sc-banner .sc-actions { margin-left: auto; }
.sc-banner.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.sc-banner.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-soft); }
.sc-banner.ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-soft); }
.sc-banner.bar { border-radius: 0; border-width: 0 0 1px; padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }

/* Segmented control (preview sizes, list/calendar views) */
.sc-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sc-seg button { padding: 3px 10px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.sc-seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line-strong); }

/* Preview frame: shows a rendered post or article as the platform will show it */
.sc-preview { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.sc-preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.sc-preview-stage { display: flex; justify-content: center; padding: var(--space-5) var(--space-4); overflow-x: auto; }
.sc-preview-device { width: var(--w, 390px); max-width: 100%; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sc-preview-device > iframe { display: block; width: 100%; border: 0; min-height: 480px; background: var(--surface-raised); }
.sc-preview-note { padding: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface-raised); }

@media (max-width: 720px) {
  .sc-header { flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
  /* Phone: every nav item visible (wrapped rows, no hidden sideways scroll) and tap targets >= 40 px (SS-101). */
  .sc-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow-x: visible; gap: 0 2px; }
  .sc-nav a { min-height: 40px; }
  .sc-brand, .sc-lines a, .sc-btn.sm, .sc-stat > a, .sc-card > a:last-child { min-height: 40px; display: inline-flex; align-items: center; }
  /* Admin screens check 2026-10-29: section tabs, sortable column headers and the remove (×) buttons were 16-20 px tall on a phone. */
  nav.sub a, .sc-subnav a, .sc-table th > a { min-height: 40px; display: inline-flex; align-items: center; }
  form.inline > button.link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  summary { padding-block: 10px; }
  .sc-who { flex-wrap: wrap; white-space: normal; }
  .sc-facts { grid-template-columns: 1fr; gap: 0; }
  .sc-facts dd { margin-bottom: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Old Console class names (before SS-059), drawn with the design-system tokens so line screens keep working.
   New screens use the sc- classes in console.css; move a screen over when you next touch it. */
main { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
main h1 { margin-bottom: var(--space-4); }
main h2 { margin: var(--space-5) 0 var(--space-2); }
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); min-width: 0; }
.card.ok { border-left: 4px solid var(--ok); }
.card.warn { border-left: 4px solid var(--warn); }
.card.bad { border-left: 4px solid var(--bad); }
.grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bad { color: var(--bad); }
.scroll { overflow: auto; max-height: calc(100dvh - var(--space-4)); overscroll-behavior: contain; }
/* Sticky header rule (SS-115) for plain tables too: the first header row stays in view. */
table thead th, table > tbody:first-child > tr:first-child > th, table > tr:first-child > th { position: sticky; top: 0; z-index: 1; background: var(--surface-raised); box-shadow: inset 0 -1px 0 var(--line); }
.center { max-width: 440px; margin: 60px auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
th, td { text-align: left; padding: 8px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
button, .btn { display: inline-block; padding: 6px 12px; font: 500 14px/20px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { background: var(--surface-sunken); }
button.primary, .btn.primary { background: var(--splash); border-color: var(--splash); color: var(--on-splash); font-weight: 600; }
button.primary:hover, .btn.primary:hover { box-shadow: inset 0 0 0 99px rgba(0, 0, 0, 0.12); }
button.link { border: 0; background: none; color: var(--splash); padding: 0 4px; }
input, select, textarea { font: 400 15px/22px var(--font-sans); padding: 6px 8px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); max-width: 100%; }
form.inline { display: inline; }
form.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tag { display: inline-block; font-size: 12px; line-height: 18px; padding: 1px 8px; margin: 1px 2px; color: var(--ink-muted); background: var(--surface-sunken); border-radius: var(--radius-pill); }
code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-sm); word-break: break-all; }
nav.sub { display: flex; gap: var(--space-1); padding: 0 var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--line); overflow-x: auto; }
nav.sub a { padding: var(--space-2) var(--space-3); color: var(--ink-muted); text-decoration: none; font-size: 14px; line-height: 20px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
nav.sub a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--splash); }
.sc-card.tone-ok { border-left: 4px solid var(--ok); }
.sc-card.tone-warn { border-left: 4px solid var(--warn); }
.sc-card.tone-bad { border-left: 4px solid var(--bad); }
main > h2, main .sc-grid + h2 { margin-top: var(--space-5); }
main .sc-grid { margin-bottom: var(--space-3); }