/* StumpVision viewer styles: live / summary / scheduled pages plus the shared render.js output
   (scorecard, overs, live header) which the scorer app also embeds.
   Colours, spacing and radii come from tokens.css (linked first by every page). Nothing here
   restyles bare elements globally, so it is safe to load next to app.css. */

/* Ink for text sitting on a solid status fill (the fills are dark in light/sun, light in dark). */
:root { --on-fill: #ffffff; }
.vw { --ctl-line: color-mix(in srgb, var(--line) 60%, var(--ink)); } /* control outlines: >= 3:1 on surface in every theme */
@media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --on-fill: #04140c; } }
:root[data-theme="dark"] { --on-fill: #04140c; }

/* ------------------------------------------------------------ page chrome */
body.vw { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
.vw *, .vw *::before, .vw *::after { box-sizing: border-box; }
.vw :focus-visible, .sv-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vw-i { flex: none; display: inline-block; vertical-align: -.2em; }
.vw-skip { position: absolute; left: var(--s-2); top: -100px; z-index: var(--z-modal); background: var(--accent); color: var(--accent-ink); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; }
.vw-skip:focus { top: var(--s-2); }
.sv-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vw-head { position: sticky; top: 0; z-index: var(--z-nav); background: var(--surface); border-bottom: var(--border-w) solid var(--line); padding-top: var(--safe-t); }
.vw-head-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); max-width: var(--content-max); margin: 0 auto; min-height: 60px;
  padding: var(--s-2) calc(var(--gutter) + var(--safe-r)) var(--s-2) calc(var(--gutter) + var(--safe-l)); }
.vw-brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: .2px; min-height: 44px; }
.vw-logo { color: var(--accent); flex: none; }
.vw-tools { display: flex; align-items: center; gap: var(--s-2); }
.vw-iconbtn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--ctl-line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast); }
.vw-iconbtn:active, .vw-btn:active, .vw-tab:active { transform: scale(.96); }
.vw-iconbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vw-menu-wrap { position: relative; }
.vw-brand { min-width: 0; }
.vw-brand-name { white-space: nowrap; }
/* Small phones (360px): brand + four 44px tools must fit without a page scroll. */
@media (max-width: 399.98px) {
  .vw-head-in { gap: var(--s-1); }
  .vw-tools { gap: var(--s-1); }
  .vw-brand { gap: var(--s-1); }
  .vw-brand .vw-logo { width: 28px; height: 28px; }
  .vw-head .vw-brand-name { font-size: .95rem; }
}
@media (max-width: 339.98px) { .vw-head .vw-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.vw-menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: var(--z-sticky); min-width: 184px; padding: var(--s-2); display: grid; gap: var(--s-1);
  background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.vw-menu[hidden] { display: none; }
.vw-menu button { appearance: none; display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border: var(--border-w) solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.vw-menu button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.vw-menu button .vw-i { width: 20px; height: 20px; }

.vw-wrap { max-width: 960px; margin: 0 auto; padding: var(--s-4) calc(var(--gutter) + var(--safe-r)) calc(var(--s-6) + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); }
.vw-pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-4); }
.vw-title { margin: 0; font-size: clamp(1.35rem, 4vw, 1.9rem); line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.vw-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: 1.15rem; line-height: 1.3; }
.vw-h2 .sv-tag { margin-left: auto; }
.vw-eyebrow { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vw-muted, .sv-muted { color: var(--muted); }
.vw-foot { max-width: 960px; margin: 0 auto; padding: 0 calc(var(--gutter) + var(--safe-r)) calc(var(--s-4) + var(--safe-b)) calc(var(--gutter) + var(--safe-l)); }
.vw-foot-text { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--muted); text-align: center; }
.vw-foot-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-1); font-size: .85rem; color: var(--muted); }
.vw-foot-link { color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 var(--s-3); }
.vw-foot-link:hover { color: var(--ink); text-decoration: underline; }
.vw-foot-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ------------------------------------------------------------ status pill */
.vw-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 99px; font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--line); white-space: nowrap; }
.vw-pill .vw-i { width: 16px; height: 16px; }
.vw-pill.is-live { background: var(--danger-soft); border-color: var(--danger); }
.vw-pill.is-live .vw-i { color: var(--danger); }
.vw-pill.is-reconnecting { background: var(--warn-soft); border-color: var(--warn); }
.vw-pill.is-reconnecting .vw-i { color: var(--warn); }
.vw-pill.is-final { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.vw-pill.is-offline { background: var(--danger-soft); border-color: var(--danger); }
.vw-pill.is-offline .vw-i { color: var(--danger); }
.vw-pill.is-upcoming { background: var(--accent-soft); border-color: var(--accent); }
.vw-pill.is-upcoming .vw-i { color: var(--accent); }
.vw-spin { animation: vw-spin 1s linear infinite; }
.vw-pulse { animation: vw-pulse 1.4s ease-in-out infinite; }
@keyframes vw-spin { to { transform: rotate(360deg); } }
@keyframes vw-pulse { 50% { opacity: .35; } }

/* ------------------------------------------------------------ cards, buttons, states */
.vw-card { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: var(--s-4); margin: 0 0 var(--s-4); box-shadow: var(--shadow); min-width: 0; }
.vw-banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius); margin: 0 0 var(--s-4); background: var(--warn-soft); border: 2px solid var(--warn); color: var(--ink); font-weight: 700; }
.vw-banner .vw-i { color: var(--warn); }
.vw-btn { appearance: none; min-height: 48px; padding: 0 var(--s-5); gap: var(--s-2); border-radius: 99px; border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-fast) var(--ease-out); }
.vw-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vw-btn.block { display: flex; width: 100%; }
.vw-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.vw-label { display: block; margin: 0 0 var(--s-2); font-weight: 700; }
.vw-field { display: flex; gap: var(--s-2); }
.vw-field input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--s-3); font: inherit; border-radius: var(--radius-sm); border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); }
.vw-state { text-align: center; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); }
.vw-state p { margin: 0; max-width: 46ch; }
.vw-state .vw-actions { justify-content: center; }
.vw-state-h { margin: var(--s-1) 0 0; font-size: 1.25rem; line-height: 1.3; }
.vw-state-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line); color: var(--ink); flex: none; }
.vw-state-ic .vw-i { width: 28px; height: 28px; }
.vw-state.is-error, .vw-error { border-color: var(--danger); border-width: 2px; }
.vw-state.is-error .vw-state-ic { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.vw-state.is-warn { border-color: var(--warn); border-width: 2px; }
.vw-state.is-warn .vw-state-ic { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.vw-loading { display: grid; gap: var(--s-3); }
.vw-loading p { margin: 0; }
.vw-skel { display: block; height: 16px; border-radius: 8px; background: var(--surface-2); animation: vw-pulse 1.4s ease-in-out infinite; }
.vw-skel.big { height: 64px; width: 55%; }

.vw-final { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); border-width: 2px; border-color: var(--accent); }
.vw-final > .vw-actions { margin: 0 0 0 auto; }
.vw-potm { margin: var(--s-2, 8px) 0 0; overflow-wrap: anywhere; }
.vw-potm .vw-eyebrow { display: block; margin: 0; }
.vw-result { margin: 0; font-size: clamp(1.25rem, 3.5vw, 1.75rem); line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ tabs */
.vw-tabs { display: flex; gap: var(--s-2); margin: 0 0 var(--s-4); overflow-x: auto; scrollbar-width: none; }
.vw-tabs::-webkit-scrollbar { display: none; }
.vw-tab { appearance: none; flex: 1 0 auto; min-height: 48px; padding: 0 var(--s-4); border-radius: 99px; border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-fast) var(--ease-out); }
.vw-tab.sm { min-height: 44px; flex: 0 0 auto; }
.vw-tab[aria-selected="true"], .vw-tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vw-tabs-inn { margin-bottom: var(--s-3); }

/* live layout: mobile shows ONE of the live card / panel (chosen by the tab), desktop shows both */
.lv-grid > .vw-card { margin-bottom: 0; }
@media (max-width: 1023.98px) {
  .lv-grid[data-view="live"] .lv-panel { display: none; }
  .lv-grid:not([data-view="live"]) .lv-livecard { display: none; }
}
@media (min-width: 1024px) {
  .vw-live .vw-wrap, .vw-summary .vw-wrap { max-width: var(--content-max); }
  .vw-tabs-main .vw-tab[data-tab="live"] { display: none; }
  .lv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "live tabs" "live panel"; column-gap: var(--s-5); align-items: start; }
  .lv-grid > .vw-tabs-main { grid-area: tabs; }
  .lv-livecard { grid-area: live; position: sticky; top: calc(60px + var(--s-4)); }
  .lv-panel { grid-area: panel; }
}

/* ------------------------------------------------------------ shared render.js output */
.sv-num, .sv-num-xl, .sv-num-lg, .sv-num-sm { font-variant-numeric: tabular-nums; font-weight: 800; font-family: var(--font-num); }
.sv-num { font-size: 1.5rem; } .sv-num-sm { font-size: 1.1rem; font-weight: 800; white-space: nowrap; }
.sv-num-lg { font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1; }
.sv-num-xl { font-size: clamp(44px, 9vw, 72px); line-height: 1; letter-spacing: -.01em; }
@media (min-width: 1024px) { .sv-num-xl { font-size: clamp(64px, 6.5vw, 96px); } }
.sv-live { display: grid; gap: var(--s-4); }
.sv-inn-label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.sv-team { font-weight: 800; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
.sv-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sv-tag.win { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sv-tag .vw-i { width: 14px; height: 14px; }
.sv-score { display: flex; align-items: baseline; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
.sv-overs-txt { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.sv-chase { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--accent-soft); border: 2px solid var(--accent); color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.sv-chase .vw-i { margin-top: 3px; color: var(--accent); }
.sv-chase-sub { display: block; font-size: .85rem; font-weight: 700; color: var(--muted); }
.sv-freehit { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm); border: 3px solid var(--c-six); background: var(--surface); color: var(--ink); font-weight: 800; letter-spacing: .1em; }
.sv-freehit .vw-i { color: var(--c-six); animation: vw-pulse 1.2s ease-in-out infinite; }
.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-2); }
.sv-stat { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--surface-2); border: var(--border-w) solid var(--line); }
.sv-stat-k { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sv-stat-v { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.sv-stat-sub { font-size: .9rem; color: var(--muted); font-weight: 700; }
.sv-sub { margin: 0 0 var(--s-1); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-players { list-style: none; margin: 0; padding: 0; border-top: var(--border-w) solid var(--line); }
.sv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-bottom: var(--border-w) solid var(--line); }
.sv-row.is-strike { border-left: 6px solid var(--accent); padding-left: var(--s-3); background: var(--accent-soft); }
.sv-pname { overflow-wrap: anywhere; font-weight: 700; font-size: 1.05rem; min-width: 0; }
.sv-row .sv-tag { margin-left: var(--s-2); }
.sv-star { color: var(--accent); font-weight: 800; }
.sv-last { margin: 0; }
.sv-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sv-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--s-2); border-radius: 99px; font-size: 1rem; font-weight: 800; background: var(--surface); border: 2px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-chip.dot { background: var(--surface-2); }
.sv-chip.four { background: var(--c-four); border-color: var(--c-four); color: var(--on-fill); }
.sv-chip.six { background: var(--c-six); border-color: var(--c-six); color: var(--on-fill); }
.sv-chip.wicket { background: var(--c-wicket); border-color: var(--c-wicket); color: var(--on-fill); }
.sv-chip.dead { border: 3px dotted var(--muted); background: var(--surface); color: var(--muted); }
.sv-chip.wide, .sv-chip.noball, .sv-chip.bye, .sv-chip.legbye { border: 3px dashed var(--c-extra); background: var(--surface); color: var(--ink); }

.sv-sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2) var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.sv-sc-team { font-weight: 800; font-size: 1.15rem; overflow-wrap: anywhere; }
.sv-sc-total { text-align: right; }
.sv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); margin: 0 0 var(--s-3); }
.sv-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sv-table th { text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--surface-2); padding: var(--s-2) 6px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.sv-table td { padding: var(--s-2) 6px; border-bottom: var(--border-w) solid var(--line); vertical-align: middle; }
.sv-table tbody tr:last-child td { border-bottom: 0; }
.sv-table th:first-child, .sv-table td:first-child { padding-left: var(--s-3); }
.sv-table th:last-child, .sv-table td:last-child { padding-right: var(--s-3); }
.sv-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-table .sv-big { font-size: 1.05rem; }
.sv-table tr.is-batting td { background: var(--accent-soft); }
.sv-name { min-width: 7.5em; }
.sv-how { display: block; font-size: .82rem; color: var(--muted); }
@media (max-width: 479.98px) { .sv-hide-sm { display: none; } .sv-table { font-size: .9rem; } }
.sv-extras { margin: 0 0 var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sv-yet { margin: 0 0 var(--s-3); overflow-wrap: anywhere; }
.sv-more { margin: 0 0 var(--s-2); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); }
.sv-more summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-3); font-weight: 800; list-style: none; }
.sv-more summary::-webkit-details-marker { display: none; }
.sv-more summary::after { content: ""; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); transition: transform var(--t-fast); margin-right: 4px; }
.sv-more[open] summary::after { transform: rotate(-135deg); }
.sv-list { margin: 0; padding: 0 var(--s-3) var(--s-3) 34px; } .sv-list li { padding: 3px 0; }
.sv-empty { color: var(--muted); text-align: center; padding: var(--s-4) 0; margin: 0; }
.sv-overs { list-style: none; margin: 0; padding: 0; }
.sv-over { padding: var(--s-3) 0; border-bottom: var(--border-w) solid var(--line); }
.sv-over:last-child { border-bottom: 0; }
.sv-over:first-child { padding-top: 0; }
.sv-over-head { display: flex; gap: var(--s-1) var(--s-3); flex-wrap: wrap; align-items: baseline; margin-bottom: var(--s-2); }
.sv-over-sum { margin-left: auto; font-weight: 800; }
.sv-after { font-size: .85rem; margin-top: var(--s-2); }

/* ------------------------------------------------------------ summary page */
.vw-hero { border-color: var(--accent); }
.vw-hero > div:first-of-type { flex: 1 1 220px; min-width: 0; }
.vw-scoreboard { flex: 1 0 100%; display: grid; gap: var(--s-3); }
.vw-teamscore { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--surface-2); border: var(--border-w) solid var(--line); }
.vw-teamscore.win { border: 3px solid var(--accent); }
.vw-teamscore-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: 1.1rem; overflow-wrap: anywhere; min-width: 0; }
.vw-overs { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.vw-hero > .vw-actions { flex: 1 0 100%; margin: 0; }
.vw-sharemsg { flex: 1 0 100%; margin: 0; }
.vw-sharemsg:empty { display: none; }
.vw-innings { display: grid; gap: var(--s-4); }
.vw-innings > .vw-card { margin: 0; }
@media (min-width: 600px) { .vw-scoreboard { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
/* Desktop layout of the summary page (two columns, sticky side column): see summary-stats.css. Innings panels are tabs, one shown at a time. */

/* ------------------------------------------------------------ scheduled page */
.vw-grid2 { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 600px) { .vw-grid2 { grid-template-columns: 1fr 1fr; } }
.vw-kv { display: flex; align-items: flex-start; gap: var(--s-3); background: var(--surface-2); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: var(--s-3); min-width: 0; }
.vw-kv .vw-i { margin-top: 2px; color: var(--accent); }
.vw-kv > div { min-width: 0; }
.vw-kv b { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vw-kv span { display: block; font-weight: 700; overflow-wrap: anywhere; }
.vw-when .vw-kv span { font-size: 1.1rem; }
.vw-teams { display: grid; gap: var(--s-4); }
.vw-teams > .vw-card { margin: 0; }
@media (min-width: 768px) { .vw-teams { grid-template-columns: 1fr 1fr; align-items: start; } }
.vw-roster { columns: 1; column-gap: var(--s-5); margin: 0; padding-left: 28px; }
@media (min-width: 480px) { .vw-roster { columns: 2; } }
.vw-roster li { overflow-wrap: anywhere; break-inside: avoid; padding: 3px 0; }
.vw-lookup { margin-top: 0; }

/* ------------------------------------------------------------ sunlight: flat, thick borders */
:root[data-theme="sun"] .vw-card, :root[data-theme="sun"] .vw-tab, :root[data-theme="sun"] .vw-btn,
:root[data-theme="sun"] .vw-iconbtn, :root[data-theme="sun"] .vw-head { border-width: 2px; }
:root[data-theme="sun"] .sv-table th, :root[data-theme="sun"] .sv-table td { border-bottom-width: 2px; }
:root[data-theme="sun"] .sv-table tr.is-batting td, :root[data-theme="sun"] .sv-row.is-strike { background: var(--surface-2); }
:root[data-theme="sun"] .vw-pill.is-live { background: var(--ink); color: var(--bg); }
:root[data-theme="sun"] .vw-pill.is-live .vw-i { color: var(--bg); }

/* ------------------------------------------------------------ share image */
.vw-cardbox { flex: 1 0 100%; display: grid; gap: var(--s-3); justify-items: start; }
.vw-seg { display: inline-flex; border: 2px solid var(--ctl-line); border-radius: 99px; overflow: hidden; background: var(--surface); }
.vw-seg-b { appearance: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 800; min-height: 44px; padding: 0 var(--s-5); cursor: pointer; }
.vw-seg-b[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.vw-cardprev { max-width: 100%; }
.vw-cardcanvas { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); border: var(--border-w) solid var(--line); background: #0f172a; }
.vw-cardbox .vw-actions { margin-top: 0; }
.vw-cardbox[hidden] { display: none; }
.sv-table tr.is-hurt .sv-how { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .vw-spin, .vw-pulse, .vw-skel, .sv-freehit .vw-i { animation: none; }
}

/* ------------------------------------------------------------ commentary, worm, alerts */
.sv-commentary { list-style: none; margin: 0; padding: 0; }
.sv-comm { padding: var(--s-2) 0; border-bottom: var(--border-w) solid var(--line); overflow-wrap: anywhere; }
.sv-comm:last-child { border-bottom: 0; }
/* Over cards */
.sv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sv-ocs { min-width: 0; }
.sv-oc-bar { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.sv-oc-seg { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sv-oc-btn { appearance: none; min-height: 44px; min-width: 44px; padding: 0 var(--s-3); border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.sv-oc-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sv-oc-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sv-oc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.sv-oc { min-width: 0; padding: var(--s-3); border-radius: var(--radius-sm); border: var(--border-w) solid var(--line); background: var(--surface); }
.sv-oc[data-wicket] { border-left: 5px solid var(--c-wicket); }
.sv-oc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sv-oc-head { min-width: 0; display: grid; gap: 2px; }
.sv-oc-title { font-weight: 800; overflow-wrap: anywhere; }
.sv-oc-tally { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-oc-score { flex: none; padding: var(--s-1) var(--s-3); border-radius: var(--radius-sm); background: var(--surface-2); border: var(--border-w) solid var(--line); font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.sv-oc-balls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }
.sv-oc-chip { min-width: 36px; height: 36px; font-size: .95rem; }
.sv-oc-chip.dot { color: var(--muted); }
.sv-oc-cell { display: inline-flex; }
button.sv-oc-chip.is-btn { appearance: none; font-family: inherit; cursor: pointer; min-width: 44px; height: 44px; }
button.sv-oc-chip.is-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button.sv-oc-chip.is-btn.is-open { box-shadow: 0 0 0 3px var(--focus); }
.sv-oc-detail { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--surface-2); border: var(--border-w) solid var(--line); color: var(--ink); font-weight: 600; }
.sv-oc-detail[hidden], .sv-oc-lines[hidden] { display: none; }
.sv-oc-bbb { margin-top: var(--s-3); }
.sv-oc-lines { margin: var(--s-2) 0 0; padding-left: var(--s-5, 1.5rem); color: var(--ink); }
.sv-oc-line { padding: var(--s-1, 2px) 0; }
.sv-oc-wkt { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--danger-soft); border: var(--border-w) solid var(--c-wicket); color: var(--ink); font-weight: 600; }
.sv-oc-wmark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 99px; background: var(--c-wicket); color: var(--on-fill); font-weight: 800; }
.sv-oc-wtext { min-width: 0; overflow-wrap: anywhere; }
.sv-oc-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.sv-oc-badge { padding: 2px var(--s-2); border-radius: 99px; border: 1.5px solid var(--line); color: var(--ink); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-oc-badge.is-maiden { border-color: var(--success); }
.sv-oc-badge.is-big { border-color: var(--c-four); }
@media (min-width: 768px) { .sv-oc-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
@media print { .sv-oc-bar { display: none !important; } .sv-oc { break-inside: avoid; } }
.sv-worm { margin: 0; }
.sv-worm svg { display: block; width: 100%; height: auto; max-height: 260px; }
.sv-worm-ax { stroke: var(--line); stroke-width: 1; }
.sv-worm-t { fill: var(--muted); font-size: 9px; }
.sv-worm-l { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sv-worm-c0 { stroke: var(--accent); }
.sv-worm-c1 { stroke: var(--ink); stroke-dasharray: 6 3; }
.sv-worm-w { fill: var(--surface); stroke-width: 2; stroke-dasharray: none; }
.sv-worm-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-weight: 700; padding: var(--s-2) 0; }
.sv-worm-key { border-left: 4px solid; padding-left: var(--s-2); }
.sv-worm-key.sv-worm-c0 { border-color: var(--accent); }
.sv-worm-key.sv-worm-c1 { border-color: var(--ink); }
.sv-estimate { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--surface-2); border: var(--border-w) solid var(--line); }
.sv-estimate strong { font-variant-numeric: tabular-nums; }
.sv-section-title { margin: var(--s-4) 0 var(--s-2); font-size: 1rem; font-weight: 800; }
.vw-notify { margin-top: var(--s-3); }
.vw-alerts { position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 50; display: grid; gap: var(--s-2); pointer-events: none; }
.vw-alert { pointer-events: auto; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-weight: 700; border: var(--border-w) solid var(--line); }
@media (min-width: 600px) { .vw-alerts { left: auto; max-width: 380px; } }

@media print {
  .vw-head, .vw-skip, .vw-iconbtn, .vw-themebox, #themeMenu, #themeBtn, #themeSun, .vw-toast, button { display: none !important; }
  html, body, .vw { background: #fff !important; color: #000 !important; }
  .vw-wrap { max-width: none !important; padding: 0 !important; }
  .vw-card { box-shadow: none !important; border: 1px solid var(--line) !important; background: #fff !important; break-inside: avoid; }
  * { animation: none !important; transition: none !important; }
}

/* Season page */
.vw-filters { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.vw-filters label { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; min-height: 44px; }
.vw-filters .vw-select { min-height: 44px; padding: 0 var(--s-3); border-radius: var(--radius-sm); border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); font: inherit; }
.vw-filters input[type="checkbox"] { width: 24px; height: 24px; }
/* Season filter bar: always-visible row, collapsible panel, active-filter chips */
.vw-fbar { display: grid; gap: var(--s-3); }
.vw-fbar[hidden], .vw-fpanel[hidden], .vw-fchips[hidden], .vw-flink[hidden] { display: none; }
.vw-ftoggle { min-height: 44px; }
.vw-ftoggle.vw-btn { padding: 0 var(--s-4); }
.vw-fbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--s-2); border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 800; }
.vw-flink { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: underline; }
.vw-fpanel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); align-items: end; }
.vw-ffield { display: grid; gap: var(--s-1); min-width: 0; }
.vw-ffield label { font-weight: 700; }
.vw-ffield .vw-select, .vw-ffield .vw-input { width: 100%; min-width: 0; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--radius-sm); border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); font: inherit; }
.vw-ffield .vw-select:disabled { opacity: .6; }
.vw-factions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.vw-fchips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.vw-fchip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; padding: 0 0 0 var(--s-3); border-radius: 99px; border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); font-weight: 700; max-width: 100%; }
.vw-fchip span { overflow-wrap: anywhere; }
.vw-fchip-x { appearance: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.3rem; line-height: 1; border-radius: 99px; cursor: pointer; }
.vw-fnote { color: var(--muted); margin: 0 0 var(--s-3); overflow-wrap: anywhere; }
.vw-fempty { display: grid; gap: var(--s-3); justify-items: start; }
.vw-season .sv-table a { color: var(--ink); font-weight: 800; text-decoration: underline; display: inline-block; min-height: 44px; line-height: 44px; }
/* Wrapped player names stay compact (the 44px target comes from min-height, not line-height). */
.vw-season .sv-table a { display: inline-flex; align-items: center; line-height: 1.3; }
/* First column stays put while a wide stats table scrolls sideways inside its box. */
.vw-season .sv-table th:first-child, .vw-season .sv-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.vw-season .sv-table thead th:first-child { background: var(--surface-2); }
@media (min-width: 1024px) {
  .vw-season .vw-wrap { max-width: var(--content-max); }
  .vw-season .sv-table th:first-child, .vw-season .sv-table td:first-child { position: static; }
}
.vw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-3); }
.vw-stat { display: grid; gap: 2px; }
.vw-stat strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* RSVP page */
.rsvp-form { display: grid; gap: var(--s-3); }
.rsvp-choices { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.rsvp-choice[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rsvp-choice { min-height: 48px; justify-content: center; }
.rsvp-msg { margin: 0; min-height: 1.4em; font-weight: 700; }
.rsvp-msg.is-ok { color: var(--ink); }
.rsvp-msg.is-err { color: var(--danger); }
.vw-rsvp .vw-field input { width: 100%; }

/* Role markers on scorecards: (c) (vc) and a dagger for the keeper */
.sv-role { color: var(--muted); font-weight: 700; font-size: .85em; white-space: nowrap; }

/* Team profile page */
.tv-head { display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap; }
.tv-logo { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); border: var(--border-w) solid var(--line); flex: none; }
.tv-info { flex: 1 1 220px; min-width: 0; }
.tv-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0; }
.tv-facts dt { color: var(--muted); font-weight: 700; }
.tv-facts dd { margin: 0; overflow-wrap: anywhere; }
.tv-colour { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; }
.tv-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; }
.tv-desc { overflow-wrap: anywhere; }
.tv-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tv-player { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 44px; border-bottom: 1px solid var(--line); padding: var(--s-1) 0; }
.tv-player a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
.tv-layout > .vw-card:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .tv-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } }
/* Desktop: profile card on the left (sticky), squad on the right. */
@media (min-width: 1024px) {
  .vw-team .vw-wrap { max-width: var(--content-max); }
  .tv-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-5); align-items: start; }
  .tv-layout > .vw-card { margin: 0; }
  .tv-layout > .tv-head { position: sticky; top: calc(60px + var(--s-4)); }
}

/* Scheduled page desktop: match details + rules on the left, both squads on the right. */
@media (min-width: 1024px) {
  .vw-sched .vw-wrap { max-width: var(--content-max); }
  .sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .sc-info > .vw-card:last-child { margin-bottom: 0; }
  .sc-layout > .sc-teams { grid-template-columns: minmax(0, 1fr); }
}

/* RSVP: a short form, so keep it a readable width on wide screens. */
.vw-rsvp .vw-wrap { max-width: 720px; }

/* Player portal: cards sit two-up from tablet width; full-width cards span both columns. */
@media (min-width: 768px) {
  .vw-player #app { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
  .vw-player #app > * { margin: 0; }
  .vw-player #app > .vw-state, .vw-player #app > .vw-loading, .vw-player #app > .pv-wide, .vw-player #app > :only-child { grid-column: 1 / -1; }
}

/* Player login page */
.vw-login-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 8rem); padding: var(--s-5) var(--gutter); }
.vw-login-box { width: 100%; max-width: 400px; }
.vw-login-brand { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-5); }
.vw-brand-name { font-weight: 800; font-size: 1.1rem; }
.vw-logo { color: var(--accent); flex-shrink: 0; }
.vw-login-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 var(--s-4); }
.vw-login-error { color: var(--err, #dc2626); background: color-mix(in srgb, var(--err, #dc2626) 10%, transparent); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); margin: 0 0 var(--s-3); font-size: .9rem; }
.vw-login-back { margin: var(--s-4) 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.vw-login-back a { color: var(--accent); text-decoration: none; }
.vw-login-back a:hover { text-decoration: underline; }

/* Forms (player portal) */
.vw-form-field { display: grid; gap: var(--s-1); margin: 0 0 var(--s-3); }
.vw-form-field label { font-size: .9rem; font-weight: 700; }
.vw-input { width: 100%; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--radius-sm); border: 2px solid var(--ctl-line); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; box-sizing: border-box; }
.vw-input:focus { border-color: var(--accent); outline: none; }
.vw-stack { display: grid; gap: var(--s-2); }
.vw-form-status { padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); font-size: .9rem; margin: 0 0 var(--s-2); }
.vw-form-status.is-success { color: #166534; background: #dcfce7; }
.vw-form-status.is-error { color: #dc2626; background: #fee2e2; }
:root[data-theme="dark"] .vw-form-status.is-success { color: #86efac; background: color-mix(in srgb, #166534 30%, transparent); }
:root[data-theme="dark"] .vw-form-status.is-error { color: #fca5a5; background: color-mix(in srgb, #dc2626 25%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sun"]):not([data-theme="dark"]) .vw-form-status.is-success { color: #86efac; background: color-mix(in srgb, #166534 30%, transparent); }
  :root:not([data-theme="light"]):not([data-theme="sun"]):not([data-theme="dark"]) .vw-form-status.is-error { color: #fca5a5; background: color-mix(in srgb, #dc2626 25%, transparent); }
}

/* Button variants for player portal */
.vw-btn.primary, .vw-btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.vw-btn-secondary { border-color: var(--ctl-line); background: var(--surface); color: var(--ink); }
.vw-btn-danger { border-color: #dc2626; color: #dc2626; background: transparent; }
.vw-btn-danger:hover { background: color-mix(in srgb, #dc2626 10%, transparent); }

/* Player portal stats */
.vw-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }
.vw-stat-label { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.vw-stat-value { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vw-section-title { font-size: 1rem; font-weight: 800; margin: 0 0 var(--s-3); }

/* Player portal hero */
.vw-player-hero { display: flex; flex-direction: column; gap: var(--s-2); }
.vw-player-code-row { margin: 0; }
.vw-code-chip { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: 99px; border: 1.5px solid var(--accent); color: var(--accent); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Player portal page nav */
.vw-player-nav { display: flex; gap: var(--s-1); margin: 0 0 var(--s-4); border-bottom: 2px solid var(--line); padding-bottom: 0; }
.vw-player-nav-tab { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); font: inherit; font-size: .9rem; font-weight: 700; color: var(--muted); background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -2px; cursor: pointer; text-decoration: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color .12s; }
.vw-player-nav-tab:hover { color: var(--ink); }
.vw-player-nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------ RSVP / upcoming */
.vw-rsvp-card { display: grid; gap: var(--s-3); }
.vw-rsvp-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.vw-rsvp-details { display: grid; gap: var(--s-1); }
.vw-rsvp-details p { margin: 0; }
.vw-rsvp-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.vw-rsvp-status-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.vw-textarea { resize: vertical; min-height: 64px; padding: var(--s-2) var(--s-3); line-height: 1.5; }

/* ---- badges ---- */
.vw-badge { display: inline-flex; align-items: center; padding: 2px var(--s-2); border-radius: 99px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; border: 1.5px solid transparent; }
.vw-badge-neutral { background: var(--surface-2, color-mix(in srgb, var(--line) 30%, var(--surface))); color: var(--muted); border-color: var(--line); }
.vw-badge-pos { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; border-color: #16a34a; }
.vw-badge-neg { background: color-mix(in srgb, #dc2626 10%, transparent); color: #dc2626; border-color: #dc2626; }
.vw-badge-warn { background: color-mix(in srgb, #d97706 12%, transparent); color: #b45309; border-color: #d97706; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    .vw-badge-pos { color: #4ade80; border-color: #4ade80; }
    .vw-badge-neg { color: #f87171; border-color: #f87171; }
    .vw-badge-warn { color: #fbbf24; border-color: #fbbf24; }
  }
}
:root[data-theme="dark"] { .vw-badge-pos { color: #4ade80; border-color: #4ade80; } .vw-badge-neg { color: #f87171; border-color: #f87171; } .vw-badge-warn { color: #fbbf24; border-color: #fbbf24; } }

/* ---- RSVP action buttons ---- */
.vw-btn-pos { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; border-color: #16a34a; }
.vw-btn-pos:hover { background: color-mix(in srgb, #16a34a 20%, transparent); }
.vw-btn-pos.is-active { background: #16a34a; color: #fff; border-color: #16a34a; }
.vw-btn-neg { background: color-mix(in srgb, #dc2626 10%, transparent); color: #dc2626; border-color: #dc2626; }
.vw-btn-neg:hover { background: color-mix(in srgb, #dc2626 18%, transparent); }
.vw-btn-neg.is-active { background: #dc2626; color: #fff; border-color: #dc2626; }
.vw-btn.is-active { font-weight: 900; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    .vw-btn-pos { color: #4ade80; border-color: #4ade80; }
    .vw-btn-pos.is-active { background: #16a34a; color: #fff; }
    .vw-btn-neg { color: #f87171; border-color: #f87171; }
    .vw-btn-neg.is-active { background: #dc2626; color: #fff; }
  }
}
:root[data-theme="dark"] { .vw-btn-pos { color: #4ade80; border-color: #4ade80; } .vw-btn-pos.is-active { background: #16a34a; color: #fff; } .vw-btn-neg { color: #f87171; border-color: #f87171; } .vw-btn-neg.is-active { background: #dc2626; color: #fff; } }