/* Bayou Buccaneers components, from the Claude Design template
   (docs/design/claude-design/components.css), adapted to the game: the
   template's BEM names are renamed to the ones the screens use (.btn-primary,
   .tile, .pad-key, .yn-opt, .stat-chip), and nothing here reaches outside the
   site (the CSP allows only 'self'). Uses styles/tokens.css only. Loads
   second, so a screen's own stylesheet still wins where it says otherwise.

   Left out on purpose: .choices and .yn-table (the at-bat's own classes,
   restyled in styles.css with the at-bat), .feat (styles/cards.css, with the
   feat cards), and the template's page/display/placeholder helpers. */

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--target-kid); padding: 0 var(--space-7); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--fs-body-lg); letter-spacing: var(--tracking-display);
  text-transform: uppercase; border: 0; cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-instant); }
.btn-primary { background: var(--color-gold); color: var(--color-on-gold); box-shadow: var(--edge-primary); }
.btn-primary:hover { background: var(--color-gold-hover); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--color-gold-edge); }
.btn-secondary { background: var(--color-surface-4); color: var(--color-text); border: 2px solid var(--color-line-strong); box-shadow: var(--edge-secondary); }
.btn-secondary:hover { background: var(--color-surface-5); }
.btn-secondary:active { transform: translateY(4px); box-shadow: none; }
.btn-secondary[aria-pressed="true"] { border-color: var(--color-gold); color: var(--color-gold); }
.btn-quiet { background: transparent; color: var(--color-text-muted); min-height: var(--target-min);
  padding: 0 var(--space-4); font-family: var(--font-body); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: 0; }
.btn-quiet:hover { color: var(--color-text); background: var(--color-surface-3); }
.btn-xl { min-height: var(--btn-primary-h); font-size: var(--fs-h2); border-radius: var(--radius-lg); width: 100%; }
.btn-sm { min-height: var(--target-min); font-size: var(--fs-small); padding: 0 var(--space-5); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* Keycap: shows the keyboard shortcut on a control */
.keycap { display: inline-grid; place-items: center; min-width: var(--keycap); height: var(--keycap); padding: 0 var(--space-2);
  border-radius: var(--radius-xs); background: var(--color-surface-4); border: 1px solid var(--color-line-strong);
  box-shadow: 0 3px 0 #0A0B09; font-family: var(--font-display); font-size: var(--fs-body); color: var(--color-gold); line-height: 1; }
.btn-primary .keycap { background: rgba(26,21,5,.14); border-color: rgba(26,21,5,.3); color: var(--color-on-gold); box-shadow: none; font-size: var(--fs-label); height: 30px; }

/* ---------- Answer tile ----------
   Every tile in a question shares one grid with grid-auto-rows: 1fr, so all
   are the same size. (The template's reserved ✓/✗ column is left out: the
   game marks right and wrong by colour, nothing draws in it, and on a
   phone it squeezed the answer into half the tile.) The dugout's tiles also carry .tile (v1's
   name, which dugout.test reads), so these rules skip anything with
   data-tile. */
.tile:not([data-tile]) { display: grid; grid-template-columns: var(--keycap) minmax(0, 1fr); align-items: center; gap: var(--space-4);
  min-height: var(--tile-h); padding: var(--space-4) var(--space-5); text-align: left; cursor: pointer;
  background: var(--color-surface-2); border: 2px solid var(--color-line-strong); border-radius: var(--radius-md);
  font-size: var(--fs-body-lg); color: var(--color-text); transition: border-color var(--dur-fast), background var(--dur-fast); }
.tile:hover:not([data-tile]) { background: var(--color-surface-3); border-color: var(--color-text-muted); }
.tile.is-selected:not([data-tile]), .tile[aria-pressed="true"]:not([data-tile]) { background: var(--color-gold-tint); border-color: var(--color-gold); box-shadow: inset 0 0 0 2px var(--color-gold); }
.tile.is-selected:not([data-tile]) .keycap, .tile[aria-pressed="true"]:not([data-tile]) .keycap { background: var(--color-gold); color: var(--color-on-gold); }
.tile.is-right:not([data-tile]) { background: var(--color-green-tint); border-color: var(--color-green); }
.tile.is-wrong:not([data-tile]) { background: var(--color-red-tint); border-color: var(--color-red); }
.tile-status { font-weight: var(--fw-bold); font-size: var(--fs-h3); text-align: center; }
.tile.is-right:not([data-tile]) .tile-status { color: var(--color-green); }
.tile.is-wrong:not([data-tile]) .tile-status { color: var(--color-red-text); }

/* ---------- Number pad ---------- */
.pad-key { height: var(--target-kid); border-radius: var(--radius-sm); border: 2px solid var(--color-line-strong);
  background: var(--color-surface-4); box-shadow: var(--edge-secondary); font-size: var(--fs-h3); font-weight: var(--fw-bold); cursor: pointer; color: var(--color-text); }
.pad-key:active { transform: translateY(4px); box-shadow: none; }

/* ---------- Yes/No toggle ----------
   The pair's wrapper is .yn-toggle: the yes/no table's buttons already carry
   .yn, and the template's .yn is the wrapper. */
.yn-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; padding: var(--space-1); gap: var(--space-1);
  background: var(--color-surface-2); border: 2px solid var(--color-line-strong); border-radius: var(--radius-pill); }
.yn-opt { min-width: 88px; min-height: var(--target-min); border: 0; border-radius: var(--radius-pill); background: transparent;
  font-family: var(--font-display); font-size: var(--fs-body); color: var(--color-text-muted); cursor: pointer; }
.yn-opt[aria-pressed="true"], .yn-opt[aria-checked="true"] { background: var(--color-gold); color: var(--color-on-gold); }

/* ---------- Mode tile (dugout) ---------- */
.mode-tile { display: grid; gap: var(--space-2); align-content: end; min-height: 168px; padding: var(--space-6); text-align: left;
  border-radius: var(--radius-lg); background: var(--color-surface-3); border: 2px solid var(--color-line); box-shadow: var(--shadow-1);
  border-top: 6px solid var(--tile-accent, var(--color-gold)); cursor: pointer; color: var(--color-text); text-decoration: none; }
.mode-tile:hover { background: var(--color-surface-4); border-color: var(--color-line-strong); border-top-color: var(--tile-accent, var(--color-gold)); }
.mode-tile-title { font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; }
.mode-tile-status { font-size: var(--fs-body); color: var(--color-text-muted); }

/* ---------- Stat chip ---------- */
.stat-chip { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface-2); border: 1px solid var(--color-line); }
.stat-label { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--color-text-muted); text-transform: uppercase; }
.stat-value { font-size: var(--fs-h2); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-2); padding: var(--space-1); background: var(--color-surface-2); border-radius: var(--radius-pill); overflow-x: auto; }
.tab { min-height: 56px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill); background: transparent; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-body); color: var(--color-text-muted); cursor: pointer; }
.tab[aria-selected="true"], .tab[aria-pressed="true"], .tab.is-selected { background: var(--color-surface-4); color: var(--color-gold); box-shadow: var(--shadow-1); }

/* ---------- Table (grown-up side) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th { text-align: left; font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--color-text-muted); font-weight: 400; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-line); }
.table td { padding: var(--space-4); border-bottom: 1px solid var(--color-line); }
@media (max-width: 699px) { .table thead { display: none; } .table tr { display: grid; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); } .table td { border: 0; padding: var(--space-1) var(--space-2); } }

/* ---------- Form field ---------- */
.field { display: grid; gap: var(--space-2); }
.field-label { font-weight: var(--fw-semibold); }
.field-input { min-height: 56px; padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-2); border: 2px solid var(--color-line-strong); font-size: var(--fs-body-lg); color: var(--color-text); }
.field-input:focus-visible { border-color: var(--color-focus); }
.field-hint { font-size: var(--fs-body); color: var(--color-text-muted); }
.code-boxes { display: flex; gap: var(--space-3); }
.code-boxes .field-input { width: 64px; height: 76px; text-align: center; font-size: var(--fs-h2); padding: 0; font-variant-numeric: tabular-nums; }

/* ---------- Notice / banner ---------- */
.notice { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); background: var(--color-blue-tint); border: 2px solid var(--color-blue); font-size: var(--fs-body); }
.notice--info { background: var(--color-blue-tint); border-color: var(--color-blue); }
.notice--warn { background: var(--color-warn-tint); border-color: var(--color-warn); }
.notice--success { background: var(--color-green-tint); border-color: var(--color-green); }
.notice--error { background: var(--color-red-tint); border-color: var(--color-red); }

/* ---------- Sheet (an overlay card) ---------- */
.sheet { width: min(720px, 100%); max-height: calc(100vh - 2 * var(--gutter)); overflow: auto; border-radius: var(--radius-xl);
  background: var(--color-surface-3); border: 2px solid var(--color-line-strong); box-shadow: var(--shadow-3); }
.sheet--coach { border-color: var(--color-warn); }
.sheet-head { padding: var(--space-6) var(--space-7); background: var(--color-surface-4); border-bottom: 1px solid var(--color-line); }
.sheet-body { padding: var(--space-7); display: grid; gap: var(--space-6); }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: sheet-rise var(--dur-slow) var(--ease-out); } }
@keyframes sheet-rise { from { transform: translateY(16px); opacity: 0; } }

/* ---------- Badge ---------- */
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; }
.badge--new { background: var(--color-gold); color: var(--color-on-gold); }
.badge--pending { background: var(--color-warn-tint); color: var(--color-warn); border: 2px solid var(--color-warn); }
.badge--live { background: var(--color-green-tint); color: var(--color-green); border: 2px solid var(--color-green); }

/* ---------- Panel, eyebrow ---------- */
.panel { background: var(--color-surface-3); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-7); box-shadow: var(--shadow-1); }
.eyebrow { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- Progress bar ----------
   A <progress> styled as the template's bar: no inline width, so the CSP
   and art.test's no-inline-style rule both hold. */
progress.progress { appearance: none; width: 100%; height: 10px; border: 0;
  border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
progress.progress::-webkit-progress-bar { background: var(--color-surface-2); border-radius: var(--radius-pill); }
progress.progress::-webkit-progress-value { background: var(--color-gold); border-radius: var(--radius-pill); }
progress.progress::-moz-progress-bar { background: var(--color-gold); border-radius: var(--radius-pill); }

/* ---------- The top of every kid screen (lib/ui.js pageTop) ----------
   "← Dugout" top left, then the screen's title: one way back, the same
   everywhere. */
.page-top { display: grid; gap: var(--space-2); justify-items: stretch; margin: 0 0 var(--space-4); }
.page-top > .page-back { justify-self: start; min-height: 44px; margin-left: calc(-1 * var(--space-3));
  padding-inline: var(--space-3); font-size: var(--fs-body); }
.page-top > h1 { margin: 0; }

/* One page width for every kid screen (lib/screen.js), so "← Dugout"
   sits in the same place on each. `data-width` says how the content runs
   inside it: "read" centred at a readable measure, "wide" centred and
   wider (grids of cards), "full" the screen's own layout (the at-bat, the
   story). */
@media (min-width: 1000px) {
  main:has(> .screen) { max-width: var(--page-max); padding-inline: var(--gutter); }
  /* Content lines up under the title, never centred away from it. */
  .screen[data-width=read] > :not(.page-top) { width: 100%; max-width: 48rem; margin-inline: 0; }
  .screen[data-width=wide] > :not(.page-top) { max-width: 76rem; margin-inline: 0; }
  .story[data-view=wrapup] > :not(.page-top) { width: 100%; max-width: 50rem; margin-inline: 0; }
}

/* Every screen's title, the same: left under "← Dugout" (screen()). */
.screen > .page-top > h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2);
  letter-spacing: var(--tracking-display); color: var(--color-gold); text-align: left; line-height: var(--lh-tight); }
@media (max-width: 699px) { .screen > .page-top > h1 { font-size: var(--fs-h3); } }

/* The word a read-it / one-more-look card is about (the breather's
   reteach card and the warm-up's read-it), named before its text. */
.reteach-word { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-gold); letter-spacing: var(--tracking-display); }