/* ============================================================
   Archery Scores — design tokens & components
   Token-based system (ui-foundation). Light/dark via
   prefers-color-scheme; page context (personal/club/admin) is a
   body-level class set by base.html that swaps the accent tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  /* context identities (stable across themes) */
  --ctx-personal:      #2d6a4f;   /* fletching green */
  --ctx-personal-deep: #1b4332;
  --ctx-club:          #33548f;   /* steward indigo */
  --ctx-club-deep:     #243c6b;
  --ctx-admin:         #2b2f36;   /* charcoal */
  --ctx-admin-deep:    #1e2126;
  --ctx-admin-edge:    #d9a21b;   /* hazard amber */

  /* target-face score palette (stable across themes) */
  --t-gold:      #f3c623; --t-gold-ink:  #443300;
  --t-red:       #c0392f; --t-red-ink:   #ffffff;
  --t-blue:      #2f6fb3; --t-blue-ink:  #ffffff;
  --t-black:     #24272b; --t-black-ink: #f2f2f2;
  --t-white:     #ffffff; --t-white-ink: #3a3a3a; --t-white-line: #c9c9c9;

  /* neutral ground — light theme */
  --bg:        #f8f7f2;
  --surface:   #ffffff;
  --surface-2: #f1efe8;
  --text:      #23271f;
  --muted:     #6d7367;
  --border:    #dfddd2;
  --shadow:    0 1px 2px rgba(30, 35, 25, .06), 0 4px 12px rgba(30, 35, 25, .06);

  /* semantic */
  --ok-bg: #eaf6ef;    --ok-line: #a9dfbf;   --ok-ink: #1e6b41;
  --err-bg: #fdf0ef;   --err-line: #f0b6b0;  --err-ink: #a93226;
  --info-bg: #edf3f7;  --info-line: #bdd4e3; --info-ink: #1d5a7a;
  --warn-bg: #fbf3dc;  --warn-line: #e8d49a; --warn-ink: #6d5407;

  /* shape & type */
  --radius: 6px;
  --radius-lg: 10px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* context accents — personal by default; body class overrides */
  --accent:        var(--ctx-personal);
  --accent-deep:   var(--ctx-personal-deep);
  --accent-ink:    #ffffff;
  --accent-tint:   #e7efe9;
  --accent-border: #b9d0c2;
  --chrome:        var(--ctx-personal-deep);
  --chrome-ink:    #ffffff;
  --chrome-edge:   transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #15181a;
    --surface:   #1d2124;
    --surface-2: #24292d;
    --text:      #e6e4dc;
    --muted:     #969c92;
    --border:    #363b40;
    --shadow:    0 1px 2px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .35);

    --ok-bg: #1d2f25;   --ok-line: #2e5c42;   --ok-ink: #8fd6ac;
    --err-bg: #33211f;  --err-line: #6b3630;  --err-ink: #eba8a0;
    --info-bg: #1d282f; --info-line: #34576b; --info-ink: #9cc6de;
    --warn-bg: #302917; --warn-line: #6d5a22; --warn-ink: #e5c979;

    --accent-tint:   #21302a;
    --accent-border: #3a5748;
    --t-white: #e8e8e4; --t-white-line: #e8e8e4;
  }
}

/* context switches — the accent family follows the page context */
body.ctx-club {
  --accent:      var(--ctx-club);
  --accent-deep: var(--ctx-club-deep);
  --accent-tint:   #e8edf6;
  --accent-border: #b9c6df;
  --chrome:      var(--ctx-club-deep);
}
body.ctx-admin {
  --accent:      var(--ctx-admin);
  --accent-deep: var(--ctx-admin-deep);
  --accent-tint:   #f4ecd8;
  --accent-border: #ddc48b;
  --chrome:      var(--ctx-admin-deep);
  --chrome-edge: var(--ctx-admin-edge);
}
@media (prefers-color-scheme: dark) {
  body.ctx-club  { --accent-tint: #1f2735; --accent-border: #3c4c6d; }
  body.ctx-admin { --accent-tint: #2f2a1c; --accent-border: #6d5a22; }
}

/* switcher pill colors: each pill wears its DESTINATION's color in both
   states, independent of the current page's context tint. --pill-X is the
   saturated fill (active), --pill-X-text the resting text color. */
:root {
  --pill-personal: #2d6a4f; --pill-personal-ink: #ffffff; --pill-personal-text: #255c43;
  --pill-club:     #33548f; --pill-club-ink:     #ffffff; --pill-club-text:     #2b4a80;
  --pill-admin:    #8a6d1c; --pill-admin-ink:    #ffffff; --pill-admin-text:    #7c5c10;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pill-personal: #7cc5a1; --pill-personal-ink: #12241b; --pill-personal-text: #7cc5a1;
    --pill-club:     #93b0e8; --pill-club-ink:     #131c2e; --pill-club-text:     #93b0e8;
    --pill-admin:    #e0b54a; --pill-admin-ink:    #2a2210; --pill-admin-text:    #e0b54a;
  }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, .score-cell { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Navbar & context bar ---------- */
.navbar {
  background: var(--chrome);
  color: var(--chrome-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--chrome-edge);
}

.navbar .brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.nav-links { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.nav-links a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  font-size: .9rem;
  padding: .35rem .6rem;
  border-radius: var(--radius);
  transition: background .15s;
}
.nav-links a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.nav-links a.active { text-decoration: underline; text-underline-offset: 4px; color: #fff; }

.context-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .4rem 1.5rem;
  font-size: .8rem;
  font-weight: 500;
  background: var(--accent-tint);
  color: var(--text);
  border-bottom: 1px solid var(--accent-border);
}

.ctx-tag {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 700;
  color: var(--accent);
}
body.ctx-admin .ctx-tag { color: var(--warn-ink); }

.ctx-role { font-weight: 700; }

.ctx-switch {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ctx-switch a, .ctx-pill {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .12rem .7rem;
  font-size: .75rem;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  background: var(--surface);
}
.ctx-switch a:hover, .ctx-pill:hover { text-decoration: none; filter: brightness(.97); }

/* Scoring mode = locked context bar (ui-scoring-ux D5). The chrome freezes
   to the club context; the switcher renders but is inert; the padlock and
   the Exit pill are the only signals — no separate banner. */
.context-bar-locked {
  background: var(--warn-bg);
  border-bottom-color: var(--warn-line);
}
.ctx-lock { font-size: .95rem; line-height: 1; }
.ctx-switch-locked > a:not(.ctx-pill-exit),
.ctx-switch-locked > form { pointer-events: none; opacity: .45; }
.ctx-locked-note {
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 700;
  color: var(--warn-ink);
}
.ctx-pill-exit {
  background: var(--warn-ink) !important; color: #fff !important; border-color: var(--warn-ink) !important;
  pointer-events: auto; opacity: 1;
}

/* resting state: a solid tint of the destination color, so the pill reads
   green/indigo/amber even on another context's tinted bar */
.ctx-switch .pill-personal {
  color: var(--pill-personal-text);
  background: color-mix(in srgb, var(--pill-personal) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--pill-personal) 50%, transparent);
}
.ctx-switch .pill-club {
  color: var(--pill-club-text);
  background: color-mix(in srgb, var(--pill-club) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--pill-club) 50%, transparent);
}
.ctx-switch .pill-admin {
  color: var(--pill-admin-text);
  background: color-mix(in srgb, var(--pill-admin) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--pill-admin) 55%, transparent);
}

/* the active context renders fully filled */
.ctx-switch .pill-personal.active { background: var(--pill-personal); color: var(--pill-personal-ink); border-color: var(--pill-personal); }
.ctx-switch .pill-club.active     { background: var(--pill-club);     color: var(--pill-club-ink);     border-color: var(--pill-club); }
.ctx-switch .pill-admin.active    { background: var(--pill-admin);    color: var(--pill-admin-ink);    border-color: var(--pill-admin); }
.ctx-switch .active { font-weight: 700; }

/* ---------- Layout ---------- */
.container { max-width: 1100px; width: 100%; margin: 0 auto; padding: 1.5rem 1rem; flex: 1; }

.footer {
  background: var(--chrome);
  color: rgba(255, 255, 255, .6);
  text-align: center;
  padding: .75rem;
  font-size: .85rem;
}
.footer a { color: rgba(255, 255, 255, .75); }

/* ---------- Page header & sections ---------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-header h1 { font-size: 1.6rem; }
.header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.section-header {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 1.75rem 0 .75rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--accent-border);
}
.section-header h2, .section-header h3 { font-size: 1.1rem; color: var(--accent-deep); }
@media (prefers-color-scheme: dark) {
  .section-header h2, .section-header h3 { color: var(--text); }
}
.section-header .count { font-size: .8rem; color: var(--muted); }
.section-header .spacer { flex: 1; }

.round-section { margin-bottom: 2rem; }
.round-section h2 { margin-bottom: .75rem; font-size: 1.15rem; color: var(--accent-deep); }
@media (prefers-color-scheme: dark) { .round-section h2 { color: var(--text); } }

/* ---------- Alerts ---------- */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .95rem; }
.alert ul { margin: .25rem 0 0 1.2rem; }
.alert-error   { background: var(--err-bg);  border: 1px solid var(--err-line);  color: var(--err-ink); }
.alert-info    { background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink); }
.alert-success { background: var(--ok-bg);   border: 1px solid var(--ok-line);  color: var(--ok-ink); }

.info-box {
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: filter .15s, background .15s, border-color .15s;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text);
}
.btn:hover { filter: brightness(.95); text-decoration: none; }

.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent); color: var(--accent-ink); filter: none; }

.btn-danger { background: var(--t-red); color: #fff; border-color: var(--t-red); }
.btn-full   { width: 100%; text-align: center; display: block; }
.btn-lg     { padding: .65rem 1.4rem; font-size: 1rem; }
.btn-sm     { padding: .3rem .65rem; font-size: .82rem; }
.btn-xs     { padding: .2rem .5rem; font-size: .78rem; }

button.btn { appearance: none; font-family: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Forms ---------- */
.form-card, .auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 520px;
  box-shadow: var(--shadow);
}
/* Cards that hold a data table: full page width, and the table scrolls
   inside the card on narrow screens instead of bursting out of it. */
.form-card-wide { max-width: none; overflow-x: auto; }
.auth-card { margin: 2rem auto; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: .3rem; font-size: .9rem; }

.form-group input,
.form-group select,
.form-group textarea,
.filter-input {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}

.form-group input:disabled,
.form-group select:disabled { background: var(--surface-2); color: var(--muted); }

.form-group small { display: block; margin-top: .25rem; color: var(--muted); font-size: .82rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }

.checkbox-group label { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.checkbox-group input[type="checkbox"] { width: auto; }

.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }
.fieldset legend { font-weight: 600; padding: 0 .4rem; font-size: .95rem; }

.auth-link { margin-top: 1rem; font-size: .9rem; text-align: center; }

/* filter-input is also usable standalone at natural width */
.filter-input { max-width: 320px; }

/* ---------- Tables & list rows ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: .9rem;
}
.data-table thead { background: var(--chrome); color: var(--chrome-ink); }
.data-table th { padding: .65rem .85rem; text-align: left; font-weight: 500; }
.data-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--accent-tint); }
.data-table .actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.list-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
.list-row:last-child { border-bottom: none; }
.list-row .name { font-weight: 600; }
.list-row .meta { color: var(--muted); font-size: .8rem; }
.list-row .spacer { flex: 1; }

/* ---------- Badges & chips ---------- */
.badge, .chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
}

.badge-leader      { background: var(--warn-bg); color: var(--warn-ink); }
.badge-competition { background: var(--info-bg); color: var(--info-ink); }
.badge-complete    { background: var(--ok-bg);   color: var(--ok-ink); }
.badge-progress    { background: var(--warn-bg); color: var(--warn-ink); }
.badge-custom      { background: #e2d9f3; color: #432874; }
.badge-four-h      { background: #4a7c59; color: #ffffff; }
.badge-pb          { background: var(--t-gold); color: var(--t-gold-ink); }
.badge-sport       { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-border); }
.badge-decimal     { background: var(--info-bg); color: var(--info-ink); }

.sport-heading { margin-top: 1.5rem; }

.chip-self    { background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-border); }
.badge-attribution { background: var(--warn-bg); color: var(--warn-ink); }
.attribution { margin-top: 1rem; font-size: .9rem; }

/* ---------- Club workbench (ui-scoring-ux D4) ---------- */
.workbench-header { margin-bottom: .5rem; }
.workbench-nav {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}
.workbench-nav a {
  padding: .45rem .8rem;
  font-size: .9rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.workbench-nav a:hover { text-decoration: none; color: var(--text); }
.workbench-nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.attribution-rule { margin-bottom: 1.25rem; }

.roster .roster-identity { white-space: nowrap; }
.roster .roster-progress { white-space: nowrap; }
.roster .roster-action { text-align: right; }
.progress-pill {
  display: inline-block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 20px;
  padding: .1rem .6rem;
}
.chip-member  { background: var(--info-bg); color: var(--info-ink); }
.chip-managed { background: var(--warn-bg); color: var(--warn-ink); }

@media (prefers-color-scheme: dark) {
  .badge-custom { background: #3a3153; color: #cdbdf0; }
}

/* ---------- Stats ---------- */
.stats-row { display: flex; gap: 1rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  text-align: center;
  min-width: 90px;
  box-shadow: var(--shadow);
}
.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .stat-value { color: var(--text); } }
.stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Scorecard ---------- */
.scorecard-wrap { overflow-x: auto; margin-bottom: 1.5rem; }

.scorecard {
  border-collapse: collapse;
  min-width: 500px;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: .9rem;
}
.scorecard thead { background: var(--chrome); color: var(--chrome-ink); }
.scorecard th, .scorecard td {
  padding: .5rem .65rem;
  text-align: center;
  border: 1px solid var(--border);
}
.scorecard thead th { border-color: var(--accent); }

.scorecard .end-col  { min-width: 40px; font-weight: 600; }
.scorecard .arrow-col, .scorecard .arrow-input-cell { min-width: 42px; }
.scorecard .total-col { min-width: 52px; background: var(--surface-2); font-weight: 600; }
.scorecard .action-col { min-width: 50px; }

.scorecard .end-active { background: var(--warn-bg); }
.scorecard tfoot td { background: var(--surface-2); font-weight: 600; }

.scorecard .arrow-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Target-face score palette: gold X/10/9, red 8/7, blue 6/5, black 4/3,
   white 2/1, hollow miss. Digits always stay in the cell — color is a
   redundant channel. Unmapped systems get no class (neutral cell). */
.sc-gold  { background: var(--t-gold);  color: var(--t-gold-ink); }
.sc-red   { background: var(--t-red);   color: var(--t-red-ink); }
.sc-blue  { background: var(--t-blue);  color: var(--t-blue-ink); }
.sc-black { background: var(--t-black); color: var(--t-black-ink); }
.sc-white { background: var(--t-white); color: var(--t-white-ink); box-shadow: inset 0 0 0 1px var(--t-white-line); }
.sc-miss  { color: var(--muted); }

/* legacy aliases (pre-palette markup) */
.val-x    { background: var(--t-gold); color: var(--t-gold-ink); font-weight: 700; }
.val-gold { background: var(--t-gold); color: var(--t-gold-ink); }
.val-miss { color: var(--muted); }

/* ---------- Score entry (tap keypad; ui-scoring-ux) ---------- */
.entry-controls { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; margin-bottom: 1.5rem; max-width: 34rem; }
.ends-remaining { font-size: .85rem; color: var(--muted); }

/* Active row cells: display targets for the keypad, never inputs. */
.scorecard .shot-cell { min-width: 42px; font-family: var(--mono); font-size: .95rem; transition: box-shadow .12s; }
.scorecard .shot-cell.shot-active { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-tint); }
.scorecard .shot-cell.shot-filled { font-weight: 600; }

.keypad {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .75rem;
  display: flex; flex-direction: column; gap: .6rem;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.keypad-status { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--muted); min-height: 1.4em; }
.keypad-shot { font-weight: 600; color: var(--text); }
.keypad-pending { font-family: var(--mono); font-size: 1.15rem; color: var(--accent); }

.keypad-grid { display: grid; gap: .45rem; }
/* Integer rounds: chips sized to legal-value count, thumb-first. */
.keypad-integer { grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); }
/* Decimal rounds: integer row, then point + tenths, then M/X — a fixed
   rhythm the eye can learn (int → . → tenth). */
.keypad-decimal { grid-template-columns: repeat(6, 1fr); }
.keypad-decimal .key-int   { grid-row: auto; }
.keypad-decimal .key-point { grid-column: 1; }
.keypad-decimal .key-tenth { }
.keypad-decimal .key-miss, .keypad-decimal .key-x { grid-column: span 3; }

.key {
  min-height: 2.9rem;
  font-size: 1.05rem;
  font-family: var(--mono);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: transform .06s, filter .12s;
}
.key:not(:disabled):active { transform: scale(.96); filter: brightness(.94); }
.key:disabled { opacity: .35; cursor: default; }
/* Target-face tint on keys, matching the scorecard cells (declared after
   .key so the palette wins the cascade). */
.key.sc-gold  { background: var(--t-gold);  color: var(--t-gold-ink);  border-color: transparent; }
.key.sc-red   { background: var(--t-red);   color: var(--t-red-ink);   border-color: transparent; }
.key.sc-blue  { background: var(--t-blue);  color: var(--t-blue-ink);  border-color: transparent; }
.key.sc-black { background: var(--t-black); color: var(--t-black-ink); border-color: transparent; }
.key.sc-white { background: var(--t-white); color: var(--t-white-ink); border-color: var(--t-white-line); }
.key.val-x    { background: var(--t-gold);  color: var(--t-gold-ink);  border-color: transparent; font-weight: 800; }
.key:disabled.sc-gold, .key:disabled.sc-red, .key:disabled.sc-blue,
.key:disabled.sc-black, .key:disabled.sc-white, .key:disabled.val-x { filter: saturate(.4); }
.key-point { font-size: 1.4rem; }
.key-miss  { color: var(--muted); }
.key-back  { background: var(--surface); }
.keypad-controls { display: flex; justify-content: flex-end; }
.keypad-controls .key { min-width: 6rem; }

@media (max-width: 400px) {
  .keypad { padding: .5rem; }
  .keypad-grid { gap: .35rem; }
  .key { min-height: 2.6rem; font-size: 1rem; }
  .keypad-decimal { grid-template-columns: repeat(5, 1fr); }
}

.score-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.score-summary h2 { margin-bottom: 1rem; }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 3rem; color: var(--muted); }
.text-muted { color: var(--muted); }
.small { font-size: .85rem; }
.score-cell { font-weight: 700; font-size: 1.05rem; }

/* ---------- Reports ---------- */
.report-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.control-row { display: flex; align-items: center; gap: .5rem; }
.control-row label { font-weight: 500; white-space: nowrap; }
.control-row select {
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--surface);
  color: var(--text);
}

.toggle-group { display: flex; gap: .35rem; flex-wrap: wrap; }

.report-subtitle { font-size: 1.15rem; color: var(--accent-deep); margin-bottom: 1rem; }
.report-section { margin-top: 1.5rem; }
.report-section h3 { font-size: 1rem; margin-bottom: .75rem; color: var(--accent-deep); }
@media (prefers-color-scheme: dark) {
  .report-subtitle, .report-section h3 { color: var(--text); }
}

.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  max-height: 300px;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .stats-row { gap: .5rem; }
  .stat-card { padding: .75rem 1rem; }
  .stat-value { font-size: 1.4rem; }
  .page-header { flex-direction: column; }
  .navbar { padding: .6rem 1rem; }
  .context-bar { padding: .4rem 1rem; }
}