/* Cardinal console. Colours match the Cardinal sign-in branding: warm neutrals,
   cardinal red, Lexend. Light by default, dark when the viewer's system asks. */

@font-face {
  font-family: "Lexend";
  src: url("/static/fonts/lexend-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("/static/fonts/lexend-latin-ext-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #faf4e9;
  --card: #fffefa;
  --fg: #241e17;
  --muted: #746754;
  --line: #e9dfcd;
  --accent: #b3202f;
  --on-accent: #fff6f2;
  --focus: #c08a26;
  --grid: #efe6d6;
  --s1: #b3202f;
  --s2: #b7791f;
  --s3: #2f6f73;
  --s4: #6b4f8a;
  --s5: #5d7a2a;
  --s6: #4a5b6e;
  --ok: #2f7d4a;
  --ok-bg: #e3f1e6;
  --warn: #8a5a0f;
  --warn-bg: #f8ebd2;
  --crit: #a11b29;
  --crit-bg: #f7dfdf;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191310;
    --card: #221a13;
    --fg: #f6ede0;
    --muted: #9e8d7c;
    --line: #3a2d22;
    --accent: #f07a86;
    --on-accent: #1c0f0a;
    --focus: #e0b25e;
    --grid: #2c221a;
    --s1: #f07a86;
    --s2: #e0b25e;
    --s3: #6cc3c0;
    --s4: #b59ad6;
    --s5: #a6c46a;
    --s6: #9fb1c4;
    --ok: #7fd49c;
    --ok-bg: #1d3325;
    --warn: #f0c46e;
    --warn-bg: #3a2c12;
    --crit: #ff9aa5;
    --crit-bg: #42191d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #191310;
  --card: #221a13;
  --fg: #f6ede0;
  --muted: #9e8d7c;
  --line: #3a2d22;
  --accent: #f07a86;
  --on-accent: #1c0f0a;
  --focus: #e0b25e;
  --grid: #2c221a;
  --s1: #f07a86;
  --s2: #e0b25e;
  --s3: #6cc3c0;
  --s4: #b59ad6;
  --s5: #a6c46a;
  --s6: #9fb1c4;
  --ok: #7fd49c;
  --ok-bg: #1d3325;
  --warn: #f0c46e;
  --warn-bg: #3a2c12;
  --crit: #ff9aa5;
  --crit-bg: #42191d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.mark {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
}

.brand { font-weight: 600; letter-spacing: 0.01em; }
.brand-sub { font-weight: 400; color: var(--muted); }

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 16px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.muted { color: var(--muted); }
.panel p.muted { margin: 0 0 24px; max-width: 60ch; }

form { margin: 0; }

.button {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}

.button:hover { filter: brightness(1.05); }
.button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --- dashboard ---------------------------------------------------------- */

.page.wide { max-width: 1240px; padding: 28px 16px 64px; }

.bar { flex-wrap: wrap; row-gap: 8px; position: sticky; top: 0; z-index: 40; background: var(--bg); }
.brand-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.env {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn);
}
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 12px; }
.nav a {
  padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 15px;
}
.nav a:hover { color: var(--fg); background: var(--card); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--card); box-shadow: inset 0 -2px 0 var(--accent); }
.nav a:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, .link-button:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.who { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 14px; }

/* Header groups: a <details> menu works without JavaScript; console.js only
   closes the others when one opens, and on Escape or a click elsewhere. */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 15px; white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 120ms ease;
}
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu > summary:hover, .menu[open] > summary { color: var(--fg); background: var(--card); }
.menu.on > summary { color: var(--fg); background: var(--card); box-shadow: inset 0 -2px 0 var(--accent); }
.menu > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
}
.who .menu-list { left: auto; right: 0; }
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--fg); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--bg); }
.nav .menu-list a[aria-current="page"], .menu-list a[aria-current="page"], .menu-list button[aria-pressed="true"] {
  color: var(--accent); font-weight: 600; box-shadow: none; background: none;
}
.menu-list .menu-note { padding: 6px 10px 2px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.menu-list .menu-email { padding: 0 10px 6px; font-size: 14px; color: var(--fg); overflow-wrap: anywhere; }
.menu-list hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu-list form { margin: 0; }
.org-menu > summary { color: var(--fg); font-weight: 500; max-width: 240px; }
.org-menu > summary span { overflow: hidden; text-overflow: ellipsis; }
.icon { width: 16px; height: 16px; flex: none; }
.link-button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline;
}

a { color: var(--accent); }
.page-title { font-size: 26px; margin: 8px 0 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lede { margin: 0 0 20px; font-size: 14px; }
.crumbs { margin: 0; font-size: 14px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; }

.notice {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
  background: var(--warn-bg); color: var(--fg); border: 1px solid var(--line); font-size: 14px;
}

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0 0 20px;
}
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile.attention { border-color: var(--crit); box-shadow: inset 4px 0 0 var(--crit); }
.tile p { margin: 0; }
.tile-label { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tile-value { font-size: 30px; font-weight: 600; line-height: 1.2; margin-top: 4px !important; font-variant-numeric: tabular-nums; }
.tile-value.small { font-size: 18px; padding-top: 8px; }
.tile-foot { font-size: 13px; margin-top: 4px !important; }

.panel-flat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 0 0 16px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.grid2 > .panel-flat { margin: 0 0 16px; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.filters label.check { flex-direction: row; align-items: center; gap: 6px; }
.filters input[type="text"], .filters input[type="search"], .filters input[type="month"], .filters select {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; min-width: 160px;
}
.filters .button { padding: 8px 16px; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.compact th, table.compact td { padding: 5px 8px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.strong { font-weight: 600; }
.empty { color: var(--muted); margin: 8px 0; }
.warn-text { color: var(--warn); font-weight: 600; }

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.6; white-space: nowrap; vertical-align: middle;
}
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.crit { background: var(--crit-bg); color: var(--crit); }
.pill.muted { background: var(--grid); color: var(--muted); }

.leg {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 3px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
}
.leg.ok { background: var(--ok-bg); color: var(--ok); }
.leg.warn { background: var(--warn-bg); color: var(--warn); }
.leg.crit { background: var(--crit-bg); color: var(--crit); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; }
.facts div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.facts div.attention { border-color: var(--crit); }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Charts: drawn in Go (internal/charts), coloured here. */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .line.wide { stroke-width: 7; stroke-opacity: 0.35; stroke-linecap: round; }
.chart rect.s1 { fill: var(--s1); } .chart .line.s1 { stroke: var(--s1); } .chart .dot.s1 { fill: var(--s1); }
.chart rect.s2 { fill: var(--s2); } .chart .line.s2 { stroke: var(--s2); } .chart .dot.s2 { fill: var(--s2); }
.chart rect.s3 { fill: var(--s3); } .chart .line.s3 { stroke: var(--s3); } .chart .dot.s3 { fill: var(--s3); }
.chart rect.s4 { fill: var(--s4); } .chart .line.s4 { stroke: var(--s4); } .chart .dot.s4 { fill: var(--s4); }
.chart rect.s5 { fill: var(--s5); } .chart .line.s5 { stroke: var(--s5); } .chart .dot.s5 { fill: var(--s5); }
.chart rect.s6 { fill: var(--s6); } .chart .line.s6 { stroke: var(--s6); } .chart .dot.s6 { fill: var(--s6); }
.chart rect:hover, .chart circle:hover { opacity: 0.8; }
.chart .heat.h0 { fill: var(--grid); }
.chart .heat.h1 { fill: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.chart .heat.h2 { fill: color-mix(in srgb, var(--accent) 36%, var(--card)); }
.chart .heat.h3 { fill: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.chart .heat.h4 { fill: color-mix(in srgb, var(--accent) 75%, var(--card)); }
.chart .heat.h5 { fill: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.legend .key.s1 { background: var(--s1); } .legend .key.s2 { background: var(--s2); } .legend .key.s3 { background: var(--s3); }
.legend .key.s4 { background: var(--s4); } .legend .key.s5 { background: var(--s5); } .legend .key.s6 { background: var(--s6); }
.numbers { margin-top: 8px; font-size: 13px; }
.numbers summary { cursor: pointer; color: var(--muted); }
.numbers table { margin-top: 6px; }

.done {
  margin: 8px 0 16px; padding: 12px 16px; border-radius: 10px;
  background: var(--ok-bg); color: var(--fg); border: 1px solid var(--line); font-size: 14px;
}
.add summary { cursor: pointer; }
.add form { margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.stack h3 { margin: 0; }
.stack label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.stack label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); }
.stack input[type="text"], .stack input[type="number"], .stack input[type="month"], .stack input[type="datetime-local"], .stack select {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.hint { font-size: 12px; color: var(--muted); margin: 0; }
.manage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px 32px; }
.button.danger { background: var(--crit); border-color: var(--crit); color: var(--on-accent); }
.link-button.danger { color: var(--crit); }
form.inline { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
form.inline .check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
form.inline.flush { margin-left: 0; }
form.inline input[type="text"], form.inline select {
  font: inherit; font-size: 14px; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px;
}
details.confirm.spaced { margin-top: 12px; }
.secret {
  padding: 14px 16px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--accent);
  font-size: 15px; user-select: all; overflow-wrap: anywhere; white-space: pre-wrap;
}

@media (max-width: 720px) {
  .nav { margin-left: 0; order: 3; width: 100%; }
  .who { order: 2; }
  .tile-value { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- console ------------------------------------------------------------- */

.org-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.org-switch .org-name { font-weight: 600; }
.flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.flash.ok { background: var(--ok-bg); }
.flash.err { background: var(--crit-bg); }
.secret-row { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 14px; }
.secret-row .secret { flex: 1; margin: 0; }
.copy { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
.copy:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.copy[data-copied] { color: var(--ok); border-color: var(--ok); }
.org-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.org-list a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); text-decoration: none; }
.org-list a:hover { border-color: var(--accent); }
.stack input[type="email"], .stack input[type="url"], .stack input[type="password"] {
  font: inherit; font-size: 15px; color: var(--fg); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 0; }
details.confirm summary { cursor: pointer; color: var(--crit); }
details.confirm form { margin-top: 8px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
/* The card form. Its fields follow the theme like every other field. The
   processor draws the card number and CVV inside its own frames, always dark
   text on white, and ignores any background we send; in the dark theme those
   frames are inverted and screen-blended, which turns their white into the
   field colour beneath and their dark text light. */
#card-form input[type="text"], #card-form select, .card-frame {
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
}
#card-form input[type="text"], #card-form select { width: 100%; min-width: 0; }
#card-form input[type="text"]::placeholder { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-frame iframe { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
}
:root[data-theme="dark"] .card-frame iframe { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.card-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-label { font-size: 13px; color: var(--muted); }
.card-frame { min-height: 38px; padding: 6px 10px; }
.card-frame iframe { display: block; height: 24px !important; width: 100% !important; border: 0 !important; }
/* minmax(0, 1fr): a text input's intrinsic width would otherwise starve the
   CVV frame, which has none of its own. */
.card-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.card-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-row label { min-width: 0; }
@media (max-width: 520px) { .card-row { grid-template-columns: minmax(0, 1fr); } }

/* --- dashboard ------------------------------------------------------------ */

.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 16px; }
.dash-head .lede { margin: 0; }
.dash-head .actions { margin: 0; }
.notice.attention { background: var(--crit-bg); border-color: var(--crit); }
.tile.live { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.tile-foot { font-size: 13px; margin-top: 4px !important; }
.insights ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; max-width: 75ch; }
.insights li::marker { color: var(--accent); }
.stream-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stream-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.stream-list .muted { font-size: 13px; }

.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.chart .s1 { fill: var(--s1); }
.chart .s3 { fill: var(--s3); }
.chart .bar rect { opacity: 0.82; }
.chart .bar:hover rect, .chart .bar.current rect { opacity: 1; }
.chart .bar.current text.month { fill: var(--fg); font-weight: 600; }
.legend { display: flex; gap: 16px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legend .key.s1 { background: var(--s1); }
.legend .key.s3 { background: var(--s3); }
.numbers { margin-top: 8px; font-size: 13px; }
.numbers summary { cursor: pointer; color: var(--muted); }
.numbers ul { margin: 6px 0 0; padding-left: 18px; columns: 2 220px; }
meter.share { width: 90px; height: 8px; vertical-align: middle; }

/* Sign-up's "how will you use Cardinal" choice. */
fieldset.choice { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
fieldset.choice legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.stack label.option {
  flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px 14px; color: var(--fg); font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.stack label.option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stack label.option input { margin-top: 4px; accent-color: var(--accent); }
.stack label.option > span { display: grid; gap: 2px; }
.stack label.option .muted { font-size: 13px; }

/* The player page's preview of what viewers see. Its accent is the brand's,
   applied from data-accent by console.js. */
.brand-preview { --bp-accent: #b3202f; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bp-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.bp-logo { height: 28px; width: auto; max-width: 120px; object-fit: contain; border-radius: 4px; }
.bp-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-give { padding: 5px 12px; border-radius: 999px; background: var(--bp-accent); color: #fff; font-size: 13px; font-weight: 600; }
.bp-stage { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #0b0a0c; color: rgb(255 255 255 / 0.5); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: inset 0 -3px 0 var(--bp-accent); }
.brand-preview .hint { padding: 10px 12px; margin: 0; }