/* G.O.A.T. Barn Olympics -- barn/goat theme baseline.
   90s-county-fair-meets-barn: warm wood, barn red, straw yellow, playful
   but kid-readable. Mobile-first -- most play happens on phones in a field. */

:root {
  --barn-red: #a8433a;
  --barn-red-dark: #7c2f28;
  --wood: #6b4a34;
  --wood-dark: #4a3222;
  --wood-darker: #2f2013;
  --straw: #f0c85a;
  --straw-dark: #d9a83b;
  --cream: #fdf6e8;
  --cream-dim: #f3e6c8;
  --forest: #4c7a52;
  --forest-dark: #345938;
  --ink: #2c2115;
  --danger: #b3372c;
  /* SYNC WARNING: mirrors data/states.js / public/js/states.js color and
     colorDark values. Hand-maintained -- update all three together. */
  --nc: #d1401f;
  --nc-dark: #8f2712;
  --ct: #0d2d6c;
  --ct-dark: #071b45;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 4px 0 rgba(47, 32, 19, 0.25);
  --nav-height: 64px;
  --header-height: 96px;
  font-size: 17px;
}

/* ---------- placeholder design tokens (M2+) ----------
   Structural-only stand-ins for the barn/goat theme's non-chrome content
   (match cards, status chips, etc.) while the Claude Design pass runs in
   docs/design-reference/ in parallel. Every color/spacing/radius/font
   decision for new M2+ UI must reference one of these tokens, never a
   literal value, so the eventual tokens.css drop-in is a restyle of this
   block, not a rebuild of the markup. Existing barn chrome (header/nav/
   onboarding/theme above) is untouched -- these are additive, for content
   that doesn't have barn styling yet. */
:root {
  --surface: #ffffff;
  --surface-muted: #f2f1ee;
  --surface-sunken: #e8e6e1;
  --border: #d8d5cd;
  --border-strong: #b6b2a6;
  --text: #201c14;
  --text-muted: #6b6558;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --chip-bg: var(--surface-sunken);
  --chip-text: var(--text-muted);
  --chip-border: var(--border-strong);
  --hype-bg: var(--surface-muted);
  --hype-border: var(--border-strong);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--cream);
  background-image: linear-gradient(180deg, var(--cream-dim), var(--cream) 240px);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  padding-top: var(--header-height);
  padding-bottom: calc(var(--nav-height) + 16px);
  min-height: 100vh;
}

h1,
h2,
h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--wood-darker);
  margin: 0 0 8px;
}

a {
  color: var(--barn-red-dark);
}

/* Baseline defense (M7.5): every interactive control gets a real fill,
   border, radius, and font from the token system here, at the LOWEST
   possible specificity (bare element selectors) -- so any class-based
   component style already in this file (which always wins on
   specificity) can override it deliberately, but a control that's
   never been explicitly styled renders in the app's language instead
   of the browser's native white/gray chrome. This makes an unstyled
   control structurally impossible, not just a convention to remember. */
button,
input,
select,
textarea {
  font: inherit;
  background: var(--cream);
  color: var(--barn-950);
  border: 2px solid var(--kraft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

button {
  cursor: pointer;
}

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

/* ---------- header ----------
   Matches docs/design-reference/*.html's shared .topbar + .bunting motif:
   dark barn header, hay kicker, and a repeating reaper/hay/nutmeg bunting
   strip pinned above it on every page. */

.goat-bunting {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--reaper) 0 26px, var(--hay) 26px 52px, var(--nutmeg) 52px 78px);
  z-index: 31;
}

.goat-header {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  height: calc(var(--header-height) - 10px);
  background: var(--barn-800);
  display: grid;
  /* title and chip are auto -- sized to their own content, never squeezed
     by the grid -- the middle 1fr track absorbs whatever space is left
     and centers the brand mark within it. If title+chip alone don't
     leave room for the mark, shell.js hides the mark entirely (see
     renderHeader) rather than let anything overlap or the profile name
     truncate. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px 14px;
  z-index: 30;
  font-family: var(--font-text, inherit);
}

.goat-header__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.goat-header__title {
  color: var(--cream);
  font-weight: 800;
  font-size: var(--fs-lg, 1.15rem);
  font-family: var(--font-display, inherit);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 42vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goat-header__title .emoji {
  font-size: 1.6rem;
}

.goat-header__admin {
  color: var(--cream);
  opacity: 0.75;
  text-decoration: none;
  font-size: 1.3rem;
  padding: 6px;
}

.goat-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: var(--r-full, 999px);
  padding: 6px 12px 6px 8px;
  color: var(--cream);
  cursor: pointer;
}

.goat-profile-chip__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 2px solid var(--cream);
}

.goat-profile-chip__name {
  font-weight: 700;
  font-size: 0.92rem;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- bottom nav ----------
   Matches the reference's .tabs: light cream bar, kraft border-top,
   active tab gets a hay-tint pill (not a dark bar with a straw label). */

.goat-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--cream);
  border-top: 2px solid var(--kraft);
  display: flex;
  padding: var(--sp-2, 8px) var(--sp-2, 8px) var(--sp-3, 12px);
  gap: 4px;
  z-index: 30;
}

.goat-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--barn-400);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 2px;
  border-radius: var(--r-sm, 8px);
}

.goat-nav__item .icon {
  font-size: 1.25rem;
}

.goat-nav__item.active {
  color: var(--barn-950);
  background: var(--hay-tint);
}

/* ---------- cards & buttons ---------- */

.goat-card {
  background: #fff;
  border: 2px solid var(--wood-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.goat-card--placeholder {
  text-align: center;
  color: #6b5b45;
  border-style: dashed;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--barn-red);
  color: var(--cream);
  border: none;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--barn-red-dark);
  width: 100%;
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--barn-red-dark);
}

.btn--secondary {
  background: var(--forest);
  box-shadow: 0 3px 0 var(--forest-dark);
}

.btn--outline {
  background: transparent;
  color: var(--barn-red-dark);
  border: 2px solid var(--barn-red);
  box-shadow: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-toggle {
  border: 2px solid var(--wood-dark);
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}

.chip-toggle.selected {
  background: var(--straw);
  border-color: var(--straw-dark);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.emoji-grid button {
  font-size: 1.5rem;
  background: #fff;
  border: 2px solid var(--wood-dark);
  border-radius: var(--radius);
  padding: 8px 0;
  cursor: pointer;
}

.emoji-grid button.selected {
  background: var(--straw);
  border-color: var(--straw-dark);
}

.emoji-grid button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.emoji-grid button.reserved {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--cream-dim);
}

.emoji-category-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b5b45;
  margin: 12px 0 6px;
}

.emoji-category-label:first-child {
  margin-top: 0;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--wood-darker);
}

.field input[type="text"],
.field input[type="number"],
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--kraft);
  border-radius: var(--r-sm);
  background: var(--cream);
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--adult {
  background: var(--barn-red);
  color: var(--cream);
}

.badge--kid {
  background: var(--forest);
  color: var(--cream);
}

.error-text {
  color: var(--danger);
  font-weight: 700;
  margin-top: 6px;
  min-height: 1.2em;
}

/* ---------- profile switcher sheet ---------- */
/* NOTE: the sheet is appended directly to <body> and positioned fixed, not
   nested inside any position:relative ancestor -- overlapping/relative
   containers here previously caused overlay clipping bugs (Philly Quest). */

.goat-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(47, 32, 19, 0.5);
  z-index: 50;
  display: flex;
  align-items: flex-end;
}

.goat-sheet {
  background: var(--paper, var(--cream));
  width: 100%;
  border-top: 4px solid var(--barn-800, var(--wood-darker));
  border-radius: var(--r-lg, 20px) var(--r-lg, 20px) 0 0;
  padding: var(--sp-5, 18px) var(--sp-4, 16px) var(--sp-6, 24px);
  max-height: 80vh;
  overflow-y: auto;
  font-family: var(--font-text, inherit);
}

.goat-sheet h2 {
  font-family: var(--font-display, inherit);
  font-weight: 400;
  font-size: var(--fs-2xl, 1.5rem);
  color: var(--barn-800, inherit);
  margin-bottom: var(--sp-4, 12px);
}

.goat-sheet__profile {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  width: 100%;
  background: var(--cream);
  border-radius: var(--r-md, 14px);
  box-shadow: var(--sh-card);
  padding: var(--sp-3, 10px) var(--sp-4, 14px);
  margin-bottom: var(--sp-2, 10px);
  cursor: pointer;
  text-align: left;
  border: 3px solid transparent;
  min-height: 64px;
}

.goat-sheet__profile.active {
  border-color: var(--hay-deep);
  background: var(--hay-tint);
}

.goat-sheet__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.goat-sheet__meta {
  flex: 1;
}

.goat-sheet__name {
  font-weight: 800;
  font-size: var(--fs-sm, 1rem);
}

.goat-sheet__sub {
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 700;
  color: var(--barn-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.goat-sheet__check {
  margin-left: auto;
  font-size: 22px;
  color: var(--st-confirm);
}

.goat-sheet__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px dashed var(--kraft);
  border-radius: var(--r-md, 14px);
  min-height: 64px;
  font-size: var(--fs-sm, 1rem);
  font-weight: 800;
  color: var(--barn-600);
  text-decoration: none;
  cursor: pointer;
}

/* ---------- state team badge ---------- */
/* Small corner badge on any avatar. .avatar-wrap only ever wraps a single
   small inline avatar element -- not a sheet/overlay container -- so this
   position:relative is unrelated to the overlay-clipping lesson above. */

.avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.state-badge {
  position: absolute;
  bottom: -4px;
  right: -5px;
  min-width: 18px;
  height: 14px;
  padding: 0 3px;
  border-radius: 4px 4px 4px 0;
  font-size: 0.5rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--cream);
}

.state-badge--nc {
  background: var(--nc-dark);
}

.state-badge--ct {
  background: var(--ct-dark);
}

.crown-badge {
  position: absolute;
  top: -9px;
  right: -3px;
  font-size: 0.8em;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

/* ---------- onboarding ----------
   Matches docs/design-reference/onboarding.html's "Join flow": dark topbar
   + bunting, 5-col emoji grid with taken/locked tile states, side-by-side
   division cards, and team cards with a live spots-left badge. */

.onboarding-topbar {
  background: var(--barn-800);
  color: var(--cream);
  padding: var(--sp-5);
  text-align: center;
  margin-top: 10px;
}

.onboarding-title {
  font-size: var(--fs-2xl);
  color: var(--cream);
}

/* ---------- full logo lockup ----------
   Matches docs/design-reference/goat-logo.html's "FULL LOCKUP" hero,
   onboarding only -- see public/js/goat-logo.js. */

.goat-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.goat-lockup__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.goat-lockup__nc {
  margin-top: 58px;
  margin-right: -22px;
}

.goat-lockup__ct {
  margin-top: 50px;
  margin-left: 8px;
}

.goat-lockup__wordmark {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--hay);
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 0 var(--barn-950);
}

.goat-lockup__subtitle {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cream);
  line-height: 1;
  letter-spacing: 0.14em;
}

.goat-card--onboarding {
  background: var(--paper);
  border: none;
  box-shadow: none;
  font-family: var(--font-text);
}

.goat-card--onboarding .field label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--barn-600);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.goat-card--onboarding input[type="text"] {
  width: 100%;
  background: var(--cream);
  border: 2px solid var(--kraft);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--barn-950);
  font-family: var(--font-text);
}

.egrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}

.etile {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 3px solid var(--kraft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  position: relative;
}

.etile.selected {
  border-color: var(--hay-deep);
  background: var(--hay-tint);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.etile.taken {
  opacity: 0.45;
  cursor: default;
  border-style: dashed;
}

.etile.reserved {
  background: radial-gradient(circle, var(--hay) 62%, var(--hay-deep) 63%);
  border-color: var(--hay-deep);
  cursor: default;
}

.etile__lock {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--barn-800);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid var(--paper);
}

.goatnote {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--hay-deep);
  margin-top: var(--sp-1);
}

/* Small auto-dismissing toast -- replaces browser-default alert() for
   "taken by X" on a tapped emoji tile. Token-styled, not a native
   confirm/alert box. */
.goat-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--barn-800);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--sh-card);
  z-index: 100;
  max-width: 90vw;
  text-align: center;
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

.goat-toast--out {
  opacity: 0;
}

.emoji-category-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--barn-400);
  margin: var(--sp-3) 0 var(--sp-2);
}

.emoji-category-label:first-child {
  margin-top: 0;
}

.divrow {
  display: flex;
  gap: var(--sp-3);
}

.divcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 3px solid var(--kraft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  cursor: pointer;
  font-family: var(--font-text);
}

.divcard.selected {
  border-color: var(--hay-deep);
  background: var(--hay-tint);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.div-ic {
  font-size: 34px;
}

.div-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--barn-800);
}

.div-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--barn-400);
  letter-spacing: 0.08em;
}

.teamrow {
  display: flex;
  gap: var(--sp-3);
}

.teamcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  color: #fff;
  cursor: pointer;
  border: 4px solid transparent;
  position: relative;
  font-family: var(--font-text);
}

.teamcard--nc {
  background: linear-gradient(160deg, var(--reaper), var(--reaper-dark));
}

.teamcard--ct {
  background: linear-gradient(160deg, var(--nutmeg), var(--nutmeg-dark));
}

.teamcard.selected {
  border-color: var(--hay);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.tc-state {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 800;
  opacity: 0.85;
}

.tc-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  margin-top: 2px;
}

.tc-spots {
  font-size: 11px;
  font-weight: 800;
  margin-top: var(--sp-2);
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-full);
  padding: 3px 10px;
  display: inline-block;
}

.tc-spots.full {
  background: rgba(0, 0, 0, 0.35);
}

.teamcard__joined {
  position: absolute;
  top: -10px;
  right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hay) 62%, var(--hay-deep) 63%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border: 2px solid var(--paper);
}

/* ---------- state cup + standings ----------
   Matches docs/design-reference/standings.html's .cup: a dark barn card
   (not two separate light team cards) with a tug bar, a "knot" marker at
   the leader boundary, and arrow-flagged team labels below. */

.state-cup {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  background: var(--barn-800);
  color: var(--cream);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  font-family: var(--font-text);
}

.state-cup__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}

.state-cup__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--hay);
  white-space: nowrap;
}

.state-cup__leadtag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--cream);
  background: var(--reaper);
  padding: 3px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.state-cup__leadtag--ct {
  background: var(--nutmeg);
}

.state-cup__bar-wrap {
  margin-top: var(--sp-3);
  position: relative;
}

.state-cup__bar {
  height: 40px;
  border-radius: var(--r-full);
  overflow: hidden;
  display: flex;
  border: 3px solid var(--hay);
  box-shadow: var(--sh-press);
}

.state-cup__fill--nc {
  background: var(--reaper);
  display: flex;
  align-items: center;
  padding-left: 14px;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.state-cup__fill--ct {
  background: var(--nutmeg);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 14px;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.state-cup__knot {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 4px;
  background: var(--hay);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--barn-800);
}

.state-cup__knot-star {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}

.state-cup__caption {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: var(--sp-2);
}

.state-cup__caption span {
  white-space: nowrap;
}

.state-cup__caption .ct-r {
  color: #f2a58f;
}

.state-cup__caption .ct-n {
  color: #9fb4e0;
}

.division-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* ---------- Finals page hero (M8, Bracket -> Finals rename) ---------- */

.bracket-hero {
  margin-bottom: var(--sp-4);
}

.bracket-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--barn-800);
}

.bracket-hero__sub {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--barn-600);
  margin-top: 2px;
}

/* ---------- Cornhole Classic section (M8) ----------
   Sits outside/below the division tab panels -- always visible, never
   scoped to a division. Reuses .classic-card's hay-tint identity (see
   the My Day card rule above) so the two surfaces read as the same
   event. */

.classic-section {
  margin-top: var(--sp-6);
}

.classic-section__header {
  margin-bottom: var(--sp-3);
}

.classic-pair-row {
  margin: var(--sp-2) 0;
}

.classic-vs {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--barn-400);
}

.standings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  font-family: var(--font-text);
}

.standings-row--goat {
  background: var(--hay-tint);
  border: 2px solid var(--hay-deep);
  box-shadow: 0 2px 0 var(--hay-deep), var(--sh-card);
}

.standings-row--goat .standings-row__rank {
  color: var(--hay-deep);
}

.standings-row__rank {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--barn-800);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.standings-row__movement {
  width: 34px;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  flex-shrink: 0;
}

.standings-row__movement--up {
  color: var(--win);
}

.standings-row__movement--down {
  color: var(--danger);
}

.standings-row__movement--same,
.standings-row__movement--new {
  color: var(--barn-400);
}

.standings-row__info {
  flex: 1;
  min-width: 0;
}

.standings-row__name {
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--barn-950);
}

.standings-row__divtag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: var(--r-sm);
  background: var(--kraft-lt);
  color: var(--barn-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.standings-row__meta {
  font-size: var(--fs-xs);
  color: var(--barn-600);
  margin-top: 2px;
}

.standings-row__superlative {
  font-size: 11px;
  font-weight: 700;
  color: var(--hay-deep);
  margin-top: 2px;
}

.standings-row__points-wrap {
  text-align: right;
  flex-shrink: 0;
}

.standings-row__points {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--barn-800);
}

.standings-row__points-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--barn-400);
  text-transform: uppercase;
}

/* ---------- ballot ----------
   Matches docs/design-reference/vote-ballot.html: 3-col grid, corner rank
   badge, "slots" progress footer. */

.vote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.vote-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cream);
  border: 3px solid var(--kraft);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-1);
  cursor: pointer;
  min-height: 92px;
  position: relative;
  font-family: var(--font-text);
}

.vote-game.selected {
  border-color: var(--hay-deep);
  background: var(--hay-tint);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.vote-game__icon {
  font-size: 32px;
}

.vote-game__name {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-align: center;
  color: var(--barn-950);
}

.vote-game__rank {
  position: absolute;
  top: -10px;
  right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hay) 62%, var(--hay-deep) 63%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--barn-950);
  border: 2px solid var(--paper);
}

.vote-slots {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--barn-600);
  margin: var(--sp-3) 0;
  flex-wrap: wrap;
}

.vote-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cream);
  border: 2px dashed var(--kraft);
  border-radius: var(--r-full);
  padding: 4px 12px;
}

.vote-slot.full {
  border-style: solid;
  border-color: var(--hay-deep);
  background: var(--hay-tint);
  color: var(--barn-950);
}

/* ---------- bracket ----------
   Matches docs/design-reference/bracket.html: series card with player
   rows (avatar + name + win count) and a pip row per game, dark champion
   card. */

.series-card {
  background: var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-family: var(--font-text);
}

.series-card--live {
  border: 2px solid var(--hay-deep);
  background: var(--hay-tint);
  box-shadow: 0 2px 0 var(--hay-deep), var(--sh-card);
}

.series-card__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--barn-400);
  text-transform: uppercase;
}

.series-tag {
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.series-tag--live {
  color: var(--cream);
  background: var(--reaper);
}

.series-tag--done {
  color: var(--st-confirm);
  background: var(--st-confirm-bg);
}

.player-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
}

.player-row.lost {
  opacity: 0.45;
}

.player-row__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.player-row__name {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--barn-600);
}

.player-row.won .player-row__name {
  color: var(--barn-950);
}

.player-row__wins {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--barn-800);
  margin-left: auto;
}

.pips {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 2px dashed var(--kraft);
}

.pip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: var(--r-sm);
  padding: 5px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--paper);
  border: 2px dashed var(--kraft);
  color: var(--barn-400);
  text-align: center;
}

.pip__n {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pip--won {
  border-style: solid;
  border-color: var(--barn-600);
  background: var(--kraft-lt);
  color: var(--barn-800);
}

.pip--now {
  border-style: solid;
  border-color: var(--reaper);
  color: var(--reaper);
  background: var(--paper);
}

.tbd-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--kraft-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--barn-400);
  flex-shrink: 0;
}

.champion-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--barn-800);
  color: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--sh-raised);
}

.champion-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--hay);
}

.champion-card__subtitle {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--kraft);
}

.rosette {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rosette-in {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ---------- My Day + report flow ----------
   Restyled from docs/design-reference/ (token-sheet.html + my-day.html,
   the Claude Design pass) via public/css/tokens.css -- loaded only on
   my-day.html for now. Our existing markup/classes are kept; only the
   values are mapped from the reference (see HANDOFF.md restyle notes).
   The shared header/nav chrome and other pages are NOT restyled yet. */

.myday-headline {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--barn-600);
  text-transform: uppercase;
  font-family: var(--font-text);
  margin: 0 0 var(--sp-3);
}

.day-switcher {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.day-switcher__btn,
.division-tabs__btn {
  flex: 1;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--kraft);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--barn-600);
  font-weight: 700;
  font-family: var(--font-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Admin's 4-tab section row (item 24, post-M8): compressed padding/font
   plus a horizontal-scroll fallback so "Tournament"/"Settings" can never
   clip at narrow widths -- see the comment in public/js/admin.js's
   initAdminUI. Scoped here so the 2-3-item .division-tabs users
   elsewhere (My Day day-switcher, bracket division tabs) are untouched. */
.admin-section-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

.admin-section-tabs .division-tabs__btn {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.day-switcher__btn.active,
.division-tabs__btn.active {
  background: var(--hay);
  border-color: var(--hay-deep);
  color: var(--barn-950);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.day-switcher__daylabel {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.day-switcher__datelabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.match-card {
  background: var(--cream);
  border: none;
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  color: var(--barn-950);
  font-family: var(--font-text);
}

.match-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.match-card__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--kraft-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.match-card__headtext {
  flex: 1;
  min-width: 0;
}

.match-card__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.match-card__game {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-md);
  color: var(--barn-800);
}

.match-card__format {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-400);
  text-transform: uppercase;
  margin-top: 2px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-family: var(--font-text);
  flex-shrink: 0;
}

.status-chip[data-status="scheduled"] {
  background: var(--st-sched-bg);
  color: var(--st-sched);
  border: 1.5px dashed var(--st-sched);
}

.status-chip[data-status="played"] {
  background: var(--st-played-bg);
  color: var(--st-played);
  box-shadow: 0 1px 0 var(--barn-800);
}

.status-chip[data-status="confirmed"] {
  background: var(--st-confirm-bg);
  color: var(--st-confirm);
}

.status-chip[data-status="not_played"] {
  background: var(--st-missed-bg);
  color: var(--st-missed);
  opacity: var(--st-missed-opacity);
  text-decoration: line-through;
}

.status-chip[data-status="forfeit"] {
  background: var(--reaper-tint);
  color: var(--reaper-dark);
  border: 1.5px solid var(--reaper);
}

.status-chip[data-status="void"] {
  background: var(--st-missed-bg);
  color: var(--st-missed);
  opacity: var(--st-missed-opacity);
  text-decoration: line-through;
}

.status-chip[data-status="live"] {
  background: var(--hay-deep);
  color: var(--cream);
}

.match-card__side-label {
  font-size: var(--fs-xs);
  color: var(--barn-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  margin: var(--sp-3) 0 4px;
}

.match-card__side-team {
  font-weight: 800;
  text-transform: none;
  letter-spacing: normal;
}

.match-card__people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.person-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--kraft-lt);
  border-radius: var(--r-full);
  padding: 4px 10px 4px 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--barn-800);
}

.person-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid var(--paper);
  flex-shrink: 0;
}

.person-chip--tbd {
  opacity: 0.6;
  font-style: italic;
}

.match-card__meta {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 2px dashed var(--kraft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-600);
}

.match-card__rules-link {
  color: var(--reaper-dark);
  font-weight: 700;
  align-self: flex-start;
}

.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-3);
  color: var(--barn-400);
  font-family: var(--font-text);
}

.match-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.match-card__actions-row {
  display: flex;
  gap: var(--sp-2);
}

.match-card__actions-row .myday-btn {
  flex: 1;
}

.match-card__stub-note {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-400);
  text-align: center;
}

.myday-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  border: none;
  font-family: var(--font-text);
  text-align: center;
}

.myday-btn--primary {
  background: var(--hay);
  color: var(--barn-950);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.myday-btn--confirm {
  background: var(--st-confirm);
  color: #fff;
  box-shadow: 0 2px 0 #1d4d28;
}

.myday-btn--ghost {
  background: var(--cream);
  color: var(--barn-800);
  border: 2px solid var(--kraft);
}

/* Single-select toggle (currently just the jenga "Toppled it?" radio) --
   unselected stays the plain outlined-chip ghost button; selected fills
   solid hay-deep so the state reads without relying on punctuation. */
.myday-btn--ghost.selected {
  background: var(--hay-deep);
  color: var(--cream);
  border-color: var(--hay-deep);
}

.match-card__waiting {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--barn-600);
}

.match-card__outcome {
  font-size: var(--fs-md, 1rem);
  font-weight: 800;
  color: var(--barn-950);
}

/* Glanceable win/loss signal now that avatar color is the player's state,
   not an individual color -- see DESIGN.md "State teams" / M7.5 color
   removal. Left-border accent on a confirmed match card's own outcome. */
.match-card--win {
  border-left: 4px solid var(--win);
}

.match-card--loss {
  border-left: 4px solid var(--danger);
}

.match-card--dead {
  opacity: var(--st-missed-opacity, 0.55);
}

.match-card--dead .match-card__game {
  text-decoration: line-through;
  color: var(--barn-400);
}

/* ---------- done section (item 26, post-M8) ----------
   Collapsed-by-default bucket for confirmed/not_played/claimed items --
   compact one-line rows, tap to expand to the real full card inline
   (renderDoneItem toggles between the two, same DOM node). */

.done-section {
  margin-top: var(--sp-4);
}

.done-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  background: var(--kraft-lt);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--barn-600);
  cursor: pointer;
  font-family: var(--font-text);
}

.done-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.done-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--cream);
  border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--barn-800);
  cursor: pointer;
}

.done-row--win {
  border-left-color: var(--win);
}

.done-row--loss {
  border-left-color: var(--danger);
}

.done-row__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.done-row__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.done-item .match-card,
.done-item .bonus-card {
  cursor: pointer;
  margin-bottom: var(--sp-1);
}

/* ---------- hype card ----------
   Same Teammate(s)/Opponent(s) markup as every other card (never a
   separate two-column layout -- see chat history) with the reference's
   dark/marquee coloring and bunting-stripe accent layered on top. */

.hype-card {
  background: var(--barn-800);
  color: var(--cream);
  box-shadow: var(--sh-raised);
  overflow: hidden;
  position: relative;
}

.hype-card::before {
  content: "";
  display: block;
  height: 10px;
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3);
  background: repeating-linear-gradient(90deg, var(--reaper) 0 26px, var(--hay) 26px 52px, var(--nutmeg) 52px 78px);
}

.hype-card .match-card__game {
  font-size: var(--fs-xl);
  color: var(--cream);
}

.hype-card .match-card__format {
  color: var(--kraft);
}

.hype-card__banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hay);
  color: var(--barn-950);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}

/* ---------- Cornhole Classic card (M8) ----------
   Its own light identity: hay-tint + solid hay-deep border -- deliberately
   NOT the hype-card's dark barn-800 showdown body and NOT the bonus-card's
   dashed border, so it never reads as either of those. No bunting (the
   Classic suspends the state rivalry, it doesn't stage it). */

.classic-card {
  background: var(--hay-tint);
  border: 2px solid var(--hay-deep);
}

.classic-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--hay);
  color: var(--barn-950);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}

.hype-card .match-card__side-label {
  color: var(--kraft);
}

.hype-card .match-card__side-team {
  font-family: var(--font-display);
  font-weight: 400;
}

.hype-card .person-chip {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cream);
}

.hype-card .person-chip__avatar {
  border-color: var(--barn-800);
}

.hype-card .match-card__meta {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: var(--kraft);
}

.hype-card .match-card__rules-link {
  color: var(--hay);
}

/* ---------- report flow (stepper) ----------
   Matches docs/design-reference/report-match.html: X-close + step-dot
   header, one question per screen, Next/Back footer. */

.goat-sheet--report {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.report-header {
  background: var(--barn-800);
  color: var(--cream);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.report-xbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}

.report-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.step-dots {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) 0;
}

.step-dot {
  flex: 1;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--kraft-lt);
}

.step-dot.hit {
  background: var(--hay);
}

.report-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.report-q {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--barn-800);
}

.report-hint {
  font-size: var(--fs-sm);
  color: var(--barn-600);
  line-height: var(--lh-body);
}

.winner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.winner-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  background: var(--cream);
  border: 3px solid var(--kraft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  cursor: pointer;
  min-height: 120px;
  justify-content: center;
}

.winner-pick.selected {
  border-color: var(--hay-deep);
  background: var(--hay-tint);
  box-shadow: 0 2px 0 var(--hay-deep);
}

.bigav {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: relative;
}

.wname {
  font-size: var(--fs-md);
  font-weight: 800;
}

.place-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--sh-card);
}

.place-rank {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--hay-deep);
  width: 38px;
}

.place-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.place-mv {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 2px solid var(--kraft);
  background: var(--paper);
  font-size: 18px;
  color: var(--barn-600);
  cursor: pointer;
}

.scorerow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--sh-card);
}

.scbtn {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  border: 2px solid var(--kraft);
  background: var(--paper);
  font-size: 24px;
  font-weight: 800;
  color: var(--barn-800);
  cursor: pointer;
}

.scnum {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  width: 56px;
  text-align: center;
}

.statfield-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--cream);
  border: 2px solid var(--kraft);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

.statfield-row input {
  width: 70px;
  margin-left: auto;
  border: 2px solid var(--kraft);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-family: var(--font-text);
  font-size: var(--fs-md);
}

.capgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.capbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--cream);
  border: 3px dashed var(--hay-deep);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  cursor: pointer;
  min-height: 120px;
  text-align: center;
}

.cic {
  font-size: 36px;
}

.capsub {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-400);
}

.reqbar {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hay-deep);
}

.reqbar.met {
  color: var(--st-confirm);
}

.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
}

.pthumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 2px solid var(--st-confirm);
  overflow: hidden;
  background: var(--kraft-lt);
}

.pthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prooftag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--st-confirm);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
}

.pthumb--pending,
.pthumb--uploading {
  border-color: var(--kraft);
}

.pthumb--failed {
  border-color: var(--danger);
}

.pthumb__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
}

.pthumb__badge--uploading {
  background: var(--kraft);
  color: var(--barn-950);
}

.pthumb__badge--failed {
  background: var(--danger);
  color: #fff;
}

/* Photo upload failure keeps the report + staged photos intact locally
   and shows this retry banner -- never a lost report or a forced redo.
   Barn Wi-Fi is expected to trigger this regularly, see NOTES.md. */
.upload-retry-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--reaper-tint);
  border: 1.5px solid var(--reaper);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  color: var(--reaper-dark);
  font-weight: 700;
  font-size: var(--fs-sm);
}

/* Prominent-but-not-alarming admin heads-up (item 21e's "N players
   awaiting slot assignment" banner) -- hay-toned, not the red
   upload-retry-banner treatment above, since an incomplete roster is a
   normal pre-tournament state, not an error. */
.admin-alert-banner {
  background: var(--hay-tint);
  border: 2px solid var(--hay-deep);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--barn-800);
  font-weight: 800;
  font-size: var(--fs-sm);
}

.sumrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 2px dashed var(--kraft);
  font-size: var(--fs-sm);
}

.sumkey {
  color: var(--barn-600);
  font-weight: 700;
}

.sumval {
  font-weight: 800;
}

.report-footer {
  padding: 0 var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.report-back {
  background: none;
  border: none;
  min-height: 48px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--barn-600);
  cursor: pointer;
  font-family: var(--font-text);
}

.report-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}

/* ---------- live feed ----------
   Matches docs/design-reference/live-feed.html: a dark "Now Playing"
   equipment board (full-bleed, same technique as .state-cup) above a
   light card feed list. */

.now-playing {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  background: var(--barn-800);
  color: var(--cream);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-text);
}

.now-playing__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-2);
}

.now-playing__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--hay);
}

.now-playing__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--reaper);
  box-shadow: 0 0 0 3px rgba(209, 64, 31, 0.3);
}

.now-playing__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.now-playing__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.now-playing__name {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--cream);
}

.now-playing__sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--kraft);
}

.now-playing__time {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--hay);
  margin-left: auto;
  white-space: nowrap;
}

.now-playing__free {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}

.now-playing__free-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--st-confirm);
  background: var(--st-confirm-bg);
  padding: 3px 10px;
  border-radius: var(--r-full);
}

.now-playing__quiet {
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
}

.now-playing__quiet-icon {
  font-size: 40px;
}

.now-playing__quiet-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--cream);
  margin-top: var(--sp-2);
}

.now-playing__quiet-sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--kraft);
  margin-top: 4px;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--font-text);
}

.feed-list__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--barn-600);
  margin-bottom: var(--sp-1);
}

.ev {
  background: var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-3) var(--sp-4);
}

.ev__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.ev__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--kraft-lt);
}

.ev__text {
  font-size: var(--fs-sm);
  line-height: 1.35;
  flex: 1;
}

.ev__text b {
  font-weight: 800;
}

.ev__time {
  font-size: 11px;
  font-weight: 800;
  color: var(--barn-400);
  white-space: nowrap;
  padding-top: 2px;
}

.ev__sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-600);
  margin-top: 2px;
}

.ev__thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg, var(--kraft-lt) 0 8px, var(--cream) 8px 16px);
  border: 2px solid var(--kraft);
  flex-shrink: 0;
  object-fit: cover;
  cursor: pointer;
}

.ev--hype {
  background: var(--barn-800);
  color: var(--cream);
  padding: 0;
  overflow: hidden;
}

.ev--hype .ev__row {
  padding: var(--sp-3) var(--sp-4);
}

.ev--hype .ev__text {
  color: var(--cream);
}

.ev--hype .ev__sub {
  color: var(--kraft);
}

.ev--hype .ev__icon {
  background: rgba(255, 255, 255, 0.12);
}

.ev--hype .ev__time {
  color: var(--kraft);
}

.ev__bunting {
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--reaper) 0 26px, var(--hay) 26px 52px, var(--nutmeg) 52px 78px);
}

.ev--voting {
  background: var(--hay-tint);
  border: 2px dashed var(--hay-deep);
}

/* ---------- feed reaction cluster (M8) ----------
   Compact chips (emoji + count) below the event row; tapping the add
   button opens a small token picker (same 4 emoji as the lightbox's
   photo-reaction row, same idempotent toggle). Cream-bg default; a
   frosted-glass override handles the dark .ev--hype card, matching the
   lightbox's white-on-dark technique confirmed compliant in the M7.5
   no-white-controls audit. */

.ev__react {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
}

.ev__react-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-full);
  border: 2px solid var(--kraft);
  background: var(--cream);
  font-size: 13px;
  font-weight: 700;
  color: var(--barn-600);
  cursor: pointer;
}

.ev__react-chip.on {
  border-color: var(--hay-deep);
  background: var(--hay-tint);
  color: var(--barn-800);
}

.ev__react-add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--kraft);
  background: var(--cream);
  color: var(--barn-600);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ev__react-picker {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-full);
  border: 2px solid var(--kraft);
  background: var(--cream);
}

.ev__react-token {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.ev__react-token.on {
  background: var(--hay-tint);
}

.ev--hype .ev__react-chip,
.ev--hype .ev__react-add,
.ev--hype .ev__react-picker {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--cream);
}

.ev--hype .ev__react-chip.on {
  border-color: var(--hay);
  background: rgba(226, 172, 76, 0.25);
  color: var(--cream);
}

.ev--hype .ev__react-token.on {
  background: rgba(226, 172, 76, 0.35);
}

/* ---------- daily bonus card ----------
   Matches docs/design-reference/bonus-challenges.html: dashed hay-deep
   border unclaimed, solid confirm-green once claimed. */

.bonus-card {
  background: var(--cream);
  border: 2px dashed var(--hay-deep);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-family: var(--font-text);
}

.bonus-card--claimed {
  border-style: solid;
  border-color: var(--st-confirm);
  background: var(--st-confirm-bg);
}

.bonus-card__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.bonus-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: var(--hay-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.bonus-card--claimed .bonus-card__icon {
  background: #fff;
}

.bonus-card__tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--hay-deep);
  display: block;
}

.bonus-card--claimed .bonus-card__tag {
  color: var(--st-confirm);
}

.bonus-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--barn-800);
}

.bonus-card__sub {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-600);
  line-height: 1.4;
}

.bonus-card__status {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-600);
  margin-top: var(--sp-2);
}

.bonus-card__claimrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 2px dashed rgba(44, 110, 59, 0.3);
}

.bonus-card__claimtext {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--st-confirm);
}

/* ---------- gallery ----------
   Matches docs/design-reference/gallery.html: filter chips, 3-col photo
   grid. No design export for the reaction picker (M6 addition, not in
   the original reference) -- flagged for the M7.5 QA pass. */

.gallery-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.gallery-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.chiprow {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.fchip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  border: 2px solid var(--kraft);
  background: var(--cream);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--barn-600);
  cursor: pointer;
}

.fchip.on {
  background: var(--barn-800);
  border-color: var(--barn-800);
  color: var(--cream);
}

.favrow {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.fav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 3px solid transparent;
  cursor: pointer;
}

.fav.on {
  border-color: var(--hay-deep);
  box-shadow: 0 0 0 2px var(--paper) inset;
}

.count {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-600);
  padding: var(--sp-3) 0 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-4);
}

.ph-tile {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 2px solid var(--kraft);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--kraft-lt);
}

.ph-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph-tile__who {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid var(--paper);
}

.ph-tile__reacts {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(36, 18, 7, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: var(--r-sm);
}

/* ---------- shared photo lightbox ----------
   One viewer used from both the gallery grid and the feed's photo
   thumbnails -- fullscreen, swipe/arrow navigation through whatever set
   the caller handed over, attribution + reaction cluster below the
   image. No design export for this; styling judgment call, flag for a
   future design QA pass. */

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 8, 0.92);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
}

.lightbox__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 56px 16px 20px;
}

.lightbox__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--cream);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__nav--prev {
  left: 4px;
}

.lightbox__nav--next {
  right: 4px;
}

.lightbox__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 0;
  max-height: 44px;
  overflow-y: auto;
}

.lightbox__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  flex-shrink: 0;
}

.lightbox__dot.on {
  background: var(--hay);
}

.lightbox__attribution {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.lightbox__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 2px solid var(--cream);
  flex-shrink: 0;
}

.lightbox__meta {
  min-width: 0;
}

.lightbox__who {
  color: var(--cream);
  font-weight: 800;
}

.lightbox__sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lightbox__reactions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  padding-top: 14px;
}

.lightbox__reactbtn {
  min-width: 44px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-full);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  font-size: 15px;
  cursor: pointer;
}

.lightbox__reactbtn.on {
  border-color: var(--hay);
  background: rgba(226, 172, 76, 0.25);
}

/* ---------- bracket enhancements ----------
   Seed numerals + "N SEED" sublabel (per docs/design-reference/
   bracket.html's .seed class, not wired up in the original M5 build).
   Projected-bracket variant has no design export -- ghosted/dashed
   treatment here is a styling judgment call, flag for the M7.5 QA pass. */

.player-row__seednum {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--hay-deep);
  margin-right: 6px;
}

.player-row__seedlabel {
  font-size: 10px;
  font-weight: 800;
  color: var(--barn-400);
  letter-spacing: 0.06em;
}

.projected-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hay-tint);
  border: 2px dashed var(--hay-deep);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barn-600);
}

.projected-banner__tag {
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--hay-deep);
}

.series-card--projected {
  opacity: 0.85;
  border: 2px dashed var(--kraft);
  box-shadow: none;
}

.projected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.projected-row__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.projected-row__pts {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--barn-600);
}

.projected-row__mv {
  font-size: 10px;
  font-weight: 800;
  color: var(--barn-400);
}

.group-champion-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--kraft-lt);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--barn-800);
}

.group-champion-row__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.group-champion-row__badge {
  position: absolute;
  bottom: -4px;
  right: -6px;
  font-size: 13px;
}

/* ---------- admin ----------
   No design export for admin -- extends the existing token system
   (division-tabs, match-card, myday-btn) rather than a new visual
   language. Verified at 390px. */

#admin-gate {
  max-width: 420px;
  margin: 40px auto 0;
}

.admin-status-ok {
  color: var(--st-confirm);
  font-weight: 700;
  margin-top: 6px;
  min-height: 1.2em;
}

.admin-btn-sm {
  width: auto;
  min-height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  margin-right: var(--sp-2);
}

.admin-btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 2px 0 #6b1a10;
}

.admin-roster-item {
  margin-bottom: var(--sp-3);
}

.admin-roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  background: var(--cream);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-3);
}

.admin-roster-row__meta {
  flex: 1;
  min-width: 120px;
}

.admin-roster-row__name {
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--barn-950);
}

.admin-roster-row__sub {
  font-size: var(--fs-xs);
  color: var(--barn-600);
}

.admin-slot-select {
  min-height: 40px;
  border: 2px solid var(--kraft);
  border-radius: var(--r-sm);
  padding: 0 8px;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
}

.admin-roster-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.admin-qr-slot {
  margin-top: var(--sp-2);
  display: flex;
  justify-content: center;
}

.admin-match-card {
  margin-bottom: var(--sp-3);
}

.admin-match-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

.admin-inline-picker {
  background: var(--paper);
  border: 2px dashed var(--kraft);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

.admin-venue-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 2px dashed var(--kraft);
}

.admin-venue-row input {
  flex: 1;
  min-width: 100px;
  border: 2px solid var(--kraft);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-family: var(--font-text);
  font-size: var(--fs-sm);
}