/* culltag.com — base styles
   Dark theme. Mobile first (375px). Expand at 768px+ for tablets and 1024px+ for desktop.
   Brand: CULL = sage / structure / labels, TAG = gold / action / "this matters."
   System fonts only — no webfont latency at the boat ramp. */

:root {
  /* ---------- Brand palette ---------- */
  --c-bg-dark:       #0D2318;   /* page background */
  --c-bg-mid:        #132B1E;   /* header, raised surfaces, inputs */
  --c-bg-card:       #1A3528;   /* cards, list items */
  --c-cull-green:    #7A9E7E;   /* CULL — secondary brand */
  --c-tag-gold:      #E8A020;   /* TAG  — primary action / highlight */
  --c-gold-light:    #F4B942;   /* gold hover / lighter accent */

  /* ---------- Semantic aliases ---------- */
  --c-bg:            var(--c-bg-dark);
  --c-surface:       var(--c-bg-card);
  --c-surface-2:     var(--c-bg-mid);
  --c-text:          #ECEFE6;
  --c-text-muted:    #9BAA9D;
  --c-text-faint:    #6E7A6E;
  --c-border:        rgba(122, 158, 126, 0.18);
  --c-border-strong: rgba(122, 158, 126, 0.40);
  --c-accent:        var(--c-cull-green);
  --c-action:        var(--c-tag-gold);
  --c-action-hover:  var(--c-gold-light);
  --c-action-ink:    var(--c-bg-dark);
  --c-warn:          #E8A020;
  --c-danger:        #C25450;
  --c-success:       #7A9E7E;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.5rem;

  /* ---------- Radius ---------- */
  --radius-sm:   6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Shadows (layered, brand-aware) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-3: 0 12px 36px rgba(0,0,0,0.50);
  --shadow-glow-gold: 0 0 0 3px rgba(232, 160, 32, 0.25);
  --shadow-glow-green: 0 0 0 3px rgba(122, 158, 126, 0.25);

  /* ---------- Layout widths ---------- */
  --w-content: 720px;
  --w-wide:    1100px;
  --w-app:     1400px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Brand mark (CSS-rendered until we drop in the SVG) ---------- */
/* Legacy flat brand-mark kept for any pages still using it; the canonical
   brand mark across the platform is now .brand-pill below. */
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}
.brand-mark .brand-cull { color: var(--c-cull-green); }
.brand-mark .brand-tag  { color: var(--c-tag-gold); }
.brand-mark.brand-lg { font-size: 3rem; }
.brand-mark.brand-xl { font-size: 4.5rem; }

/* Canonical brand pill — T1 tile variant: gold tray on the left with 4
   letter chips spelling the angler's culltag (#### placeholder for
   visitors), dark "TAG" block on the right ending in a gold grommet
   so the logo reads as a real hang-tag. The right-side identity pill
   uses the same 4-chip tray, so brand + user share one tile language. */
/* Header left slot — .brand-stack wraps the brand-pill (visitor),
   the identity-pill slot (signed-in), and the floating Draw-a-Tag
   wayfinder. The .signed-in class on .brand-stack swaps which
   element shows. See plans/fuzzy-sauteeing-patterson.md (header v3). */
.brand-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.brand-stack #header-identity-slot { display: none; }
.brand-stack.signed-in .brand-pill { display: none; }
.brand-stack.signed-in #header-identity-slot { display: inline-flex; }
/* Brand-pill default size matches .ct-tag exactly — same width, same
   height, same chip tray. Both pills are 240×52, with the chip tray
   fixed at 92px and the right block filling the remaining 148px. The
   right block is flex:1 with overflow:hidden, so longer names
   ellipsis-truncate instead of stretching the pill. */
.brand-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  overflow: hidden;
  text-decoration: none;
  vertical-align: middle;
  font-family: var(--font-sans);
  width: 240px;
  height: 52px;
  border: 1px solid var(--c-tag-gold);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.12);
  flex-shrink: 0;
}
/* Left side — gold tray with 4 letter chips. Asymmetric padding: the
   outer-left edge meets the pill's fully-rounded corner, so the first
   chip needs more clearance than the last (which butts the dark TAG
   block flush). */
.brand-pill .brand-pill-left {
  background: var(--c-tag-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 92px;
  padding: 5px 5px 5px 14px;
  gap: 2px;
}
.brand-pill .brand-pill-left .ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 42px;
  background: #f4b942;             /* lighter gold so chip pops off tray */
  color: #1f3a23;                  /* deep forest ink (C2) */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.05rem;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}
.brand-pill .brand-pill-left .ch.placeholder {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(31, 58, 35, 0.6);
  box-shadow: none;
}
/* Earned chip — a small ★ rides in the top-center of the tile to
   show the letter/digit was acquired beyond the random draw.
     • bronze (default .earned) — paid cull or basic earned mark
     • gold   (.earned.gold)    — special earned (most 1st-place
       finishes, season qualifications, etc.)
   Both variants use position:relative on the chip + ::before. */
.brand-pill .brand-pill-left .ch.earned { position: relative; }
.brand-pill .brand-pill-left .ch.earned::before {
  content: '★';
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  line-height: 1;
  color: #7a4a1a;                  /* bronze — default first-tier */
  pointer-events: none;
}
.brand-pill .brand-pill-left .ch.earned.gold::before {
  color: #fff5d8;
  text-shadow: 0 0 1px #5a3a14, 0 0 2px #5a3a14;
}
.brand-pill.brand-pill-xl .brand-pill-left .ch.earned::before {
  font-size: 14px;
  top: 3px;
}
/* Right side — dark "TAG" block. The grommet (.tag-hole) is absolute-
   positioned at the far-right edge so it reads as a real punched hole
   at the corner of the tag, not a centered ornament next to TAG. */
.brand-pill .brand-pill-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  background: var(--c-bg-mid);
  color: var(--c-tag-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  padding: 0 28px 0 var(--space-3);     /* extra right padding reserves space for the grommet */
  white-space: nowrap;
}
.brand-pill .tag-hole {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-tag-gold);
  box-shadow: inset 0 0 0 1.5px var(--c-bg-dark);
}

/* Larger brand-pill for hero / landing surfaces (use class .brand-pill-xl).
   Drops the fixed 240px width so the hero grows to its own proportions
   based on chip + TAG sizing — this is the showcase pill, not the
   header pill. */
.brand-pill.brand-pill-xl {
  width: auto;
  height: 88px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 12px 32px rgba(0, 0, 0, 0.30);
}
.brand-pill.brand-pill-xl .brand-pill-left {
  flex: 0 0 auto;
  padding: 8px 8px 8px 24px;
  gap: 4px;
}
.brand-pill.brand-pill-xl .brand-pill-left .ch {
  width: 38px;
  height: 70px;
  font-size: 2.4rem;
  border-radius: 5px;
}
.brand-pill.brand-pill-xl .brand-pill-right {
  flex: 0 0 auto;
  font-size: 2.6rem;
  padding: 0 44px 0 var(--space-5);
}
.brand-pill.brand-pill-xl .tag-hole { width: 16px; height: 16px; right: 18px; }
@media (min-width: 600px) {
  .brand-pill.brand-pill-xl { height: 112px; }
  .brand-pill.brand-pill-xl .brand-pill-left {
    padding: 10px 10px 10px 30px;
    gap: 5px;
  }
  .brand-pill.brand-pill-xl .brand-pill-left .ch {
    width: 50px;
    height: 88px;
    font-size: 3.0rem;
    border-radius: 6px;
  }
  .brand-pill.brand-pill-xl .brand-pill-right {
    font-size: 3.4rem;
    padding: 0 56px 0 var(--space-6);
  }
  .brand-pill.brand-pill-xl .tag-hole { width: 22px; height: 22px; right: 22px; }
}

/* ct-tag-pill — culltag-logo "chip pill" input.
   Four single-char inputs sit in the gold tray on the left, with the
   dark "TAG" block + grommet on the right. Built by
   window.culltag.mountTagPill(); shared by /id, /t/register (pairing),
   /admin/culltags (assign + change-tag), /t/admin/teams (walk-up), and
   wherever else we accept a 4-char culltag.
   Inputs override the base .ch's display: inline-flex to inline-block
   plus an explicit line-height equal to chip height — inputs don't
   render their internal text correctly under flex display.
   Empty chips read as a darkened slot; focused or filled chips light
   up gold so the typed letter pops. */
.ct-tag-pill { max-width: 100%; }
.ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch {
  display: inline-block;
  padding: 0;
  line-height: 70px;
  vertical-align: top;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.12);
  color: rgba(31, 58, 35, 0.55);
  caret-color: #1f3a23;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
@media (min-width: 600px) {
  .ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch { line-height: 88px; }
}
.ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch:focus,
.ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch.filled {
  background: #f4b942;
  color: #1f3a23;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.45) inset;
}

/* Compact variant — for embedded form fields (walk-up sign-up, future
   inline lookups). Drops the .brand-pill-xl class so the pill renders
   at a medium size: chips wide enough to remain a comfortable tap
   target, but the whole pill fits inside a 360-px form column. Total
   pill ~ 64 px tall; no responsive growth (stays compact at all sizes
   since it's never used as a hero element). */
.ct-tag-pill.compact { width: auto; height: 64px; }
.ct-tag-pill.compact .brand-pill-left {
  flex: 0 0 auto;
  padding: 6px 8px 6px 18px;
  gap: 3px;
}
.ct-tag-pill.compact .brand-pill-left .ch {
  width: 28px;
  height: 52px;
  font-size: 1.7rem;
  border-radius: 4px;
}
.ct-tag-pill.compact .brand-pill-right {
  flex: 0 0 auto;
  font-size: 1.7rem;
  padding: 0 32px 0 var(--space-3);
}
.ct-tag-pill.compact .tag-hole { width: 12px; height: 12px; right: 14px; }
.ct-tag-pill.compact .brand-pill-left .ch.ct-tag-pill-ch {
  line-height: 52px;
  font-size: 1.7rem;
}
@media (min-width: 600px) {
  .ct-tag-pill.compact .brand-pill-left .ch.ct-tag-pill-ch { line-height: 52px; }
}

/* Floating "★ Draw a Tag" wayfinder, anchored just below the brand
   pill for visitors. Hidden when signed in (the angler already has
   a tag). Soft pulse animation draws the eye for first-time visitors. */
.brand-start-here {
  position: absolute;
  top: calc(100% + 4px);
  left: 4px;
  background: var(--c-tag-gold);
  color: var(--c-bg-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  animation: brand-start-here-pulse 1.6s ease-in-out infinite;
}
@media (hover: hover) {
  .brand-start-here:hover {
    box-shadow: 0 0 0 2px var(--c-tag-gold), 0 6px 14px rgba(232, 160, 32, 0.55);
    color: var(--c-bg-dark);
  }
}
@keyframes brand-start-here-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}
.brand-start-here[aria-hidden="true"] { display: none; }
.brand-stack.signed-in .brand-start-here { display: none; }

/* ---------- Header ---------- */
.site-header {
  background: var(--c-bg-mid);
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.site-header .header-inner {
  width: 100%;
  max-width: var(--w-app);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* Keep the brand pill and the Find/ID balls on ONE line — wrapping
     dropped the balls to a second row at narrow widths. */
  flex-wrap: nowrap;
  min-width: 0;
}
.site-header .auth-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Don't wrap or shrink the balls — they stay together on the header line. */
  flex-wrap: nowrap;
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  justify-content: flex-end;
}
.site-header .auth-state a {
  color: var(--c-text);
}
.site-header .auth-state .header-list-link {
  color: var(--c-cull-green);
  font-weight: 600;
}
@media (hover: hover) {
  .site-header .auth-state .header-list-link:hover { color: var(--c-gold-light); }
  .site-header .ct-tag.header-identity:hover {
    filter: brightness(1.06);
    text-decoration: none;
  }
}
/* Identity card — standard .ct-tag pill (gold # + dark name). Lives
   inside #header-identity-slot for signed-in users; CSS selector
   left unscoped to .auth-state so it picks up either home. */
.site-header .ct-tag.header-identity { text-decoration: none; }

/* ---------- Header LEFT nav: home + Tournament + Search ---------- */
/* Static row, identical for everyone. Icon-only on phones so it shares
   one line with the right-side identity at 375px; labels expand ≥480px. */
.header-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
}
/* Home / brand — favicon mark always; "culltag" wordmark added ≥480px. */
.header-home {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-tag-gold);
  border: 1px solid var(--c-tag-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.12), 0 1px 0 rgba(0, 0, 0, 0.2);
}
.header-home-mark { display: block; width: 22px; height: 22px; color: #1f3a23; }
@media (hover: hover) { .header-home:hover { background: #f4b942; } }

/* Tournament + Search tabs — gold pills, same chrome the header balls
   used. Icon-only 44px circles by default; the Tournament tab grows a
   text label ≥480px. */
.header-nav .header-tab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-tag-gold);
  border: 1px solid var(--c-tag-gold);
  color: #1f3a23;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.12), 0 1px 0 rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.header-nav .header-tab svg { width: 20px; height: 20px; flex-shrink: 0; }
.header-nav .header-tab .header-tab-label {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 480px) {
  /* Tournament grows into a labelled pill; search stays a circle. */
  .header-nav .find-tab { width: auto; border-radius: 22px; padding: 0 16px; }
  .header-nav .find-tab .header-tab-label { display: inline; }
}
@media (hover: hover) {
  .header-nav .header-tab:hover { background: #f4b942; color: #1f3a23; }
}

/* ---------- Header RIGHT slot: identity / sign-in ---------- */
/* Wrapper anchors the Draw-a-Tag floater beneath the Sign-in chip. */
.auth-right-wrap { position: relative; display: inline-flex; align-items: center; }
/* Sign-in chip — gold pill matching the nav tabs. Also the signed-in
   fallback for an angler who has no culltag yet. */
.site-header .auth-state .header-signin {
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: var(--c-tag-gold);
  border: 1px solid var(--c-tag-gold);
  color: #1f3a23;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.12), 0 1px 0 rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
@media (hover: hover) {
  .site-header .auth-state .header-signin:hover { background: #f4b942; color: #1f3a23; }
}
/* Draw-a-Tag floater, right-aligned variant — dangles under the chip on
   the right edge instead of the old left-of-brand-pill position. */
.brand-start-here--right { left: auto; right: 0; }
/* Phones: keep the full identity pill (chips + name) but let it size to
   content and cap its width, so a long name truncates instead of pushing
   the header past one line. */
@media (max-width: 479px) {
  .site-header .ct-tag.header-identity { width: auto; max-width: 54vw; }
}

/* Tylor-only proto-tools dropdown — small flask button next to the
   identity pill, opens a list of /x lab pages on click. Render gated
   in renderAuthState by culltag_id === 'CULL' or is_platform_admin. */
.proto-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Proto-tools trigger — gold-filled circle with "CULL" inscribed in
   forest ink, the brand's CULL-only admin glyph. Inverts to dark on
   open/hover. */
.proto-menu-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-tag-gold);
  border: 1px solid var(--c-tag-gold);
  color: #1f3a23;
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.12), 0 1px 0 rgba(0, 0, 0, 0.2);
}
.proto-menu-btn[aria-expanded="true"] {
  background: var(--c-bg-mid);
  color: var(--c-tag-gold);
}
@media (hover: hover) {
  .proto-menu-btn:hover {
    background: #f4b942;
    color: #1f3a23;
  }
}
.proto-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-tag-gold);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.25), 0 12px 28px rgba(0, 0, 0, 0.45);
  min-width: 200px;
  padding: 4px;
  z-index: 60;
}
.proto-menu a {
  display: block;
  padding: 10px 14px;
  color: var(--c-text);
  text-decoration: none;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
@media (hover: hover) {
  .proto-menu a:hover {
    background: rgba(232, 160, 32, 0.10);
    color: var(--c-tag-gold);
  }
}
.site-header .auth-state .header-signout {
  color: var(--c-text-muted);
  font-weight: 500;
}

/* Narrow-screen: reserve a tiny gap below the header so the
   dangling Draw-a-Tag floater (visitor only) doesn't crash visually
   into the page content underneath. When signed-in the floater is
   hidden via CSS; the extra padding is invisible. */
@media (max-width: 600px) {
  .site-header { padding-bottom: calc(var(--space-3) + 20px); }
}

/* Keep the whole header on ONE line on phones. The brand pill's right
   "TAG" plate carries ~150px of slack, so trimming the header pill width
   plus tightening the gaps lets the Find ("Tournament") + ID balls share
   the row instead of dropping to a second line (which they did with the
   old flex-wrap). */
@media (max-width: 480px) {
  .site-header { padding-left: var(--space-3); padding-right: var(--space-3); }
  .site-header .header-inner { gap: var(--space-2); }
  .site-header .auth-state { gap: var(--space-2); }
  .site-header .brand-pill { width: 180px; }
}

/* ---------- Links ---------- */
a {
  color: var(--c-cull-green);
  text-decoration: none;
}
@media (hover: hover) { a:hover { color: var(--c-gold-light); } }

/* ---------- Layout containers ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: var(--space-4);
}
.container-wide   { max-width: var(--w-wide); margin: 0 auto; }
.container-app    { max-width: var(--w-app); margin: 0 auto; }

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
  font-weight: 700;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); margin-top: var(--space-6); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
}

p { margin: 0 0 var(--space-3); }

.meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.meta a { color: var(--c-cull-green); }
.meta strong { color: var(--c-text); font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--c-bg-mid);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
}

/* ---------- Buttons ---------- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--c-action);
  border-radius: var(--radius);
  background: var(--c-action);
  color: var(--c-action-ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 60ms, box-shadow 120ms;
  text-decoration: none;
}
/* Hover styles wrapped so they only apply on devices with a real
   pointing device. Without this, mobile browsers keep :hover applied
   after a tap until the user interacts elsewhere — leaving buttons
   looking "stuck" highlighted gold. */
@media (hover: hover) {
  button:hover, .button:hover {
    background: var(--c-action-hover);
    border-color: var(--c-action-hover);
    text-decoration: none;
    color: var(--c-action-ink);
  }
}
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-gold);
}
button:disabled, .button:disabled,
button.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Secondary / ghost share the primary action's gold family so the
   whole button system reads as one palette. Hierarchy comes from
   fill weight (filled > outlined > transparent), not from hue.
   Danger (red) is the only color break — destructive intent earns
   its own color. */
button.secondary, .button.secondary {
  background: transparent;
  border-color: var(--c-action);
  color: var(--c-action);
}
@media (hover: hover) {
  button.secondary:hover, .button.secondary:hover {
    background: rgba(232, 160, 32, 0.10);
    color: var(--c-action);
  }
}
button.secondary:focus-visible, .button.secondary:focus-visible {
  box-shadow: var(--shadow-glow-gold);
}

button.ghost, .button.ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-action);
  font-weight: 600;
}
@media (hover: hover) {
  button.ghost:hover, .button.ghost:hover {
    background: rgba(232, 160, 32, 0.08);
    color: var(--c-action);
  }
}

button.danger, .button.danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
@media (hover: hover) {
  button.danger:hover, .button.danger:hover {
    background: #d35d59;
    border-color: #d35d59;
    color: #fff;
  }
}

.button-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ---------- Forms ---------- */
form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
  margin: var(--space-4) 0;
}
/* HTML `hidden` attribute reset. Author styles like
   `button { display: inline-flex }` and `form { display: flex }`
   stomp the UA stylesheet's `[hidden] { display: none }` rule because
   author CSS beats user-agent CSS regardless of selector specificity.
   This one-liner restores the contract so any element marked `hidden`
   actually disappears. Per-element [hidden] rules below are now
   redundant but kept for narrative clarity. */
[hidden] { display: none !important; }

/* Author CSS for `form` overrides the user-agent's [hidden] {display:none}
   by virtue of cascade origin, not specificity — so a <form hidden> still
   renders as a flex column unless we re-assert display:none here. */
form[hidden] { display: none; }
form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 500;
  color: var(--c-text);
}
form input[type="email"],
form input[type="text"],
form input[type="number"],
form input[type="password"],
form input[type="tel"],
form input[type="date"],
form input[type="search"],
form select,
form textarea {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-mid);
  font: inherit;
  color: var(--c-text);
  transition: border-color 120ms, box-shadow 120ms;
}
form textarea { min-height: 96px; padding: var(--space-3); resize: vertical; }
form select { padding-right: var(--space-6); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-cull-green) 50%), linear-gradient(135deg, var(--c-cull-green) 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px; background-repeat: no-repeat; }
form input::placeholder, form textarea::placeholder { color: var(--c-text-faint); }
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--c-cull-green);
  box-shadow: var(--shadow-glow-green);
}
form input[type="checkbox"] {
  accent-color: var(--c-tag-gold);
  width: 20px;
  height: 20px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.card-pad-lg { padding: var(--space-6); }

/* Tournament list (home page directory) */
.tournament-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.tournament-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color 120ms, transform 60ms;
}
@media (hover: hover) {
  .tournament-list li:hover {
    border-color: var(--c-cull-green);
    transform: translateY(-1px);
  }
  .tournament-list li a:hover { color: var(--c-gold-light); text-decoration: none; }
}
.tournament-list li a { color: var(--c-text); display: block; }
.tournament-list .meta { color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: 2px; }

@media (min-width: 768px) {
  .tournament-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .tournament-list { grid-template-columns: repeat(3, 1fr); }
}

.empty {
  color: var(--c-text-muted);
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

/* ---------- Definition list (key/value detail blocks) ---------- */
dl.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
dl.kv dt {
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: center;
}
dl.kv dd {
  margin: 0;
  color: var(--c-text);
  font-weight: 500;
}

/* ---------- Action row at the bottom of detail pages ---------- */
.actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.actions .button { text-decoration: none; }

/* ---------- Status / banner ---------- */
.status-banner {
  background: rgba(232, 160, 32, 0.10);
  border: 1px solid var(--c-warn);
  color: var(--c-gold-light);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin: var(--space-3) 0;
  font-size: var(--fs-sm);
}
.status-banner.status-warn { border-color: var(--c-warn); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg-mid);
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}
.badge-ok    { background: rgba(122, 158, 126, 0.16); border-color: var(--c-cull-green); color: var(--c-cull-green); }
.badge-warn  { background: rgba(232, 160, 32, 0.14); border-color: var(--c-tag-gold); color: var(--c-gold-light); }
.badge-danger{ background: rgba(194, 84, 80, 0.14); border-color: var(--c-danger); color: var(--c-danger); }

/* ---------- Danger zone ----------
   One shared treatment for every "Danger zone" box across the
   platform: red translucent fill + red border so destructive
   sections read at a glance, anywhere they appear. The selector
   list captures legacy class names (.danger-zone, .edit-danger)
   alongside the new .danger-section so we don't have to rename
   every existing surface. */
.danger-section,
.edit-danger,
.danger-zone {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-danger);
  border-radius: var(--radius);
  background: rgba(194, 84, 80, 0.10);
}
.danger-section h2,
.edit-danger h2,
.danger-zone h2 { margin-top: 0; color: var(--c-danger); }
.danger-section h3,
.edit-danger h3,
.danger-zone h3 { color: var(--c-danger); }
.danger-zone form input[type="text"] { max-width: 240px; }

/* ---------- Dashboard / grid of admin cards ---------- */
.dashboard-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.dash-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.dash-card h2 { font-size: var(--fs-lg); margin: 0 0 var(--space-3); color: var(--c-text); text-transform: none; letter-spacing: 0; }
.dash-card form { margin: 0; }
.dash-card form select { min-height: 44px; padding: var(--space-2); }
.dash-links { list-style: none; padding: 0; margin: 0; }
.dash-links li { padding: var(--space-1) 0; }
.dash-links li a { color: var(--c-cull-green); }

@media (min-width: 768px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Toggles ---------- */
.toggle {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-1) 0;
  font-weight: 500;
}
.toggle input[type="checkbox"] {
  min-height: auto !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

/* Big paired toggles (sign-up / scales open) — compact horizontal pills
   so they don't dominate the command-center hero band. ~40px tall with
   label on the left and state on the right; sage tint when ON, muted
   when OFF. Still reads at a glance from across the room. */
.big-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.big-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: var(--c-bg-mid);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: background 100ms, border-color 100ms, transform 60ms;
  min-height: 38px;
  text-align: left;
}
.big-toggle:active { transform: scale(0.98); }
.big-toggle .toggle-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.big-toggle .toggle-state {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.25);
}
.big-toggle.on {
  background: rgba(122, 158, 126, 0.20);
  border-color: var(--c-cull-green);
  color: var(--c-cull-green);
}
.big-toggle.on .toggle-label { color: var(--c-cull-green); }
.big-toggle.on .toggle-state {
  background: var(--c-cull-green);
  color: var(--c-bg-dark);
}
.big-toggle.off {
  background: var(--c-bg-mid);
  border-color: var(--c-border);
}
.big-toggle.off .toggle-state {
  background: var(--c-bg-card);
  color: var(--c-text-faint);
}

/* Compact variant — same component, smaller dimensions. Used in the
   command-center hero so the day-of toggles read as quick-status pills
   above the host line, not as the visual focus of the page. */
.big-toggle.compact {
  padding: 3px 8px 3px 10px;
  min-height: 26px;
  gap: 8px;
}
.big-toggle.compact .toggle-label {
  font-size: 0.65rem;
}
.big-toggle.compact .toggle-state {
  font-size: 0.62rem;
  padding: 2px 6px;
}

/* Row that holds the compact mini-toggles above the club host line. */
.hero-mini-toggles {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}

/* ---------- Prose blocks (rules, payout, descriptions) ---------- */
.prose {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0 0 var(--space-3);
}

/* ---------- Walk-up card (admin/teams) ---------- */
.walkup-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.walkup-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: end;
  margin: 0;
  max-width: none;
}
.walkup-fields label { margin: 0; }
.walkup-fields button[type="submit"] {
  grid-column: span 2;
  justify-self: end;
  min-width: 200px;
}
@media (max-width: 700px) {
  .walkup-fields { grid-template-columns: 1fr; }
  .walkup-fields button[type="submit"] { grid-column: 1; justify-self: stretch; }
}

/* ---------- Team card (roster items) ---------- */
.team-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.team-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.team-card .team-card-title {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--c-text);
}
.team-edit, .contact-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  max-width: none;
}
.team-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-2);
}

/* ---------- Hero block (landing pages) ---------- */
.hero {
  text-align: center;
  padding: var(--space-12) var(--space-4) var(--space-8);
}
.hero .brand-mark { margin-bottom: var(--space-4); }
.hero p { color: var(--c-text-muted); max-width: 540px; margin: 0 auto var(--space-4); font-size: var(--fs-lg); }


/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-16);
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--c-border);
  text-align: center;
  color: var(--c-text-faint);
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--c-text-muted); }

/* ---------- Command center (POS-style director dashboard) ---------- */
/* Whole page is viewport-locked. Hero + tabs are fixed; only the tab
   content scrolls if it has to. Mobile phone breakpoint stacks tighter. */
.cmd-center {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 60px);
  background: var(--c-bg);
}
.cmd-hero {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-4);
  flex-shrink: 0;
}
.cmd-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* New cmd-hero structure (replaces .cmd-hero-top): identity card with
   publish-status select pinned to the top-right + the day-of status
   toggles tucked along the bottom of the same card. */
.cmd-hero-card {
  background: var(--c-surface);
  border: 1px solid var(--c-tag-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.18), 0 4px 16px rgba(0, 0, 0, 0.25);
}
.cmd-hero-card .cmd-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cmd-hero-card .cmd-hero-id { flex: 1; min-width: 200px; }
.cmd-hero-card .cmd-hero-id .cmd-club-line {
  color: var(--c-tag-gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin: 0 0 4px;
}
.cmd-hero-card h1 { margin: 0; font-size: var(--fs-xl); line-height: 1.1; }
@media (min-width: 768px) { .cmd-hero-card h1 { font-size: var(--fs-2xl); } }
.cmd-hero-card .cmd-meta { color: var(--c-text-muted); margin-top: 4px; }
.cmd-hero-corner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .cmd-hero-corner { align-items: stretch; width: 100%; }
}

/* Operational status row: Sign-up + Scales as full-width toggle
   cards. Big OPEN/CLOSED state pill, sage when on, dark when off,
   so the day-of state reads at a glance from across the boat ramp. */
.cmd-status-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
@media (max-width: 500px) { .cmd-status-row { grid-template-columns: 1fr; } }
.status-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  cursor: pointer;
  font: inherit;
  min-height: 60px;
  text-align: left;
  transition: background 100ms, border-color 100ms;
}
.status-toggle:active { transform: scale(0.99); }
.status-toggle .toggle-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.status-toggle .toggle-state {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
/* Open = gold (the "go" state), Closed = muted dark. */
.status-toggle.on {
  background: rgba(232, 160, 32, 0.18);
  border-color: var(--c-tag-gold);
}
.status-toggle.on .toggle-label { color: var(--c-tag-gold); }
.status-toggle.on .toggle-state {
  background: var(--c-tag-gold);
  color: var(--c-bg-dark);
}
.status-toggle.off {
  background: var(--c-bg-mid);
  border-color: var(--c-border);
}
.status-toggle.off .toggle-state {
  background: var(--c-bg-card);
  color: var(--c-text-muted);
}

/* Compact variant — fits inside the hero card alongside the
   tournament identity. */
.status-toggle.compact {
  min-height: 30px;
  padding: 4px var(--space-2);
  gap: var(--space-2);
}
.status-toggle.compact .toggle-label { font-size: 0.62rem; }
.status-toggle.compact .toggle-state {
  font-size: 0.72rem;
  padding: 2px 8px;
}
/* Inside the hero card the row is right-aligned and snugged. */
.cmd-status-row.in-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--c-border);
}
.cmd-status-row.in-hero .status-toggle { flex: 1 1 120px; }

/* Public-visibility group — labeled sub-row of the hero card so the
   three Public ⇔ Private toggles read as their own category, distinct
   from the Sign-up Open/Closed toggle above. */
.cmd-vis-row.in-hero {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-2);
  flex-wrap: wrap;
}
.cmd-vis-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cmd-vis-toggles {
  display: flex;
  gap: var(--space-2);
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.cmd-vis-toggles .status-toggle { flex: 1 1 80px; }

/* Permit callout on the admin dashboard — single row that surfaces the
   token-eligibility badge, signed-in director's permit bank, and the
   Apply-permit action without leaving the dashboard. */
.cmd-permit-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.cmd-permit-row[hidden] { display: none; }
.cmd-permit-row .permit-callout-copy { flex: 1 1 220px; min-width: 0; margin: 0; }
.cmd-permit-row .permit-action { flex: 0 0 auto; }
.cmd-permit-row .permit-callout-feedback {
  flex: 1 1 100%;
  min-height: 1em;
  font-size: var(--fs-xs);
  margin: 0;
}

/* Hero-embedded variant — drops the surface bg / border / radius /
   outer margin so the callout reads as a sub-row of the hero card
   itself, matching the dashed-top-border separators used by the
   Sign-up and Public-visibility rows above it. */
.cmd-permit-row.in-hero {
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--c-border);
  border-radius: 0;
  padding: var(--space-2) 0 0;
  margin: var(--space-2) 0 0;
  gap: var(--space-2);
}
.cmd-permit-row.in-hero .permit-callout-copy {
  flex: 1 1 180px;
  font-size: var(--fs-xs);
}
.cmd-permit-row.in-hero .permit-action { gap: var(--space-2); }
.cmd-hero h1 { margin: 0; font-size: var(--fs-xl); }
@media (min-width: 768px) { .cmd-hero h1 { font-size: var(--fs-2xl); } }
.cmd-hero .cmd-club-line { color: var(--c-text-muted); margin: 0 0 2px; font-size: var(--fs-sm); }
.cmd-hero-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
/* ---------- Comms tab — history list + modal ---------- */
.comms-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.comms-history .empty { text-align: center; color: var(--c-text-muted); padding: var(--space-4); }
.comms-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 100ms;
}
@media (hover: hover) { .comms-row:hover { border-color: var(--c-tag-gold); } }
.comms-row .comms-kind {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-tag-gold);
}
.comms-row .comms-subject { color: var(--c-text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comms-row .comms-when    { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.comms-row .comms-counts  { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); margin-top: 2px; }
.comms-recipients .recipient-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.comms-recipients .recipient-row:last-child { border-bottom: 0; }
.comms-recipients .recipient-status {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.comms-recipients .status-sent    { background: rgba(122, 158, 126, 0.20); color: var(--c-cull-green); }
.comms-recipients .status-failed  { background: rgba(220, 80, 60, 0.20);  color: #e07060; }
.comms-recipients .status-skipped { background: rgba(120, 120, 120, 0.20); color: var(--c-text-muted); }

.comms-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-3);
}
.comms-modal-overlay[hidden] { display: none; }
.comms-modal {
  background: var(--c-surface);
  border: 1px solid var(--c-tag-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.comms-modal h3 { margin: 0 0 var(--space-2); }
.comms-modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-4);
}
.comms-modal-actions button { min-height: 44px; padding: 0 var(--space-4); }

.cmd-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (min-width: 600px) {
  .cmd-counts { grid-template-columns: repeat(4, 1fr); }
}

/* Hero — identity card (left) holds title + toggles + horizontal stat
   strip. Side-nav (right) holds the sub-page link buttons stacked
   vertically. Both wrap to full-width below the card on narrow
   viewports, with the side-nav becoming a horizontal row to mirror
   the legacy tab strip. */
.cmd-hero-flex {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  flex-wrap: wrap;
}
.cmd-hero-flex > .cmd-hero-card {
  flex: 1 1 320px;
  margin-bottom: 0;
}
.cmd-side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 0 200px;
}
@media (max-width: 800px) {
  .cmd-side-nav {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cmd-side-nav .cmd-tab { flex: 1 1 0; min-width: 0; }
}
.count-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-width: 0;
}
.count-label {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.count-value {
  font-size: var(--fs-xl);
  color: var(--c-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  line-height: 1.1;
  margin-top: 2px;
}

/* Hero status-select row. (Sign-up + Scales toggles moved up into
   .hero-mini-toggles next to the host line.) */
.cmd-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}
.cmd-status-select {
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  padding: 0 var(--space-6) 0 var(--space-3);
  min-height: 38px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  appearance: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  background-image: linear-gradient(45deg, transparent 50%, var(--c-cull-green) 50%), linear-gradient(135deg, var(--c-cull-green) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Shared 36-px chevron tile used as the back-link on every page.
   Compact, square, recognizable; replaces the older mix of
   `.button.ghost` "← Return to Dashboard" buttons and bare text
   links. Gold-themed to match the rest of the action buttons on the
   site — same border + color as .button.secondary's outlined gold. */
.back-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-action);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-action);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  transition: background 120ms, color 120ms;
}
@media (hover: hover) {
  .back-tile:hover {
    background: rgba(232, 160, 32, 0.10);
    color: var(--c-action);
  }
}
.back-tile:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-gold);
}

/* Tab strip — single row, scrollable on phone if needed */
/* Tab buttons. Switched from a tab-strip to a tile-button grid that
   mirrors the .action-tile look used for the day-of action buttons,
   so the whole admin surface reads as actions rather than navigation
   chrome. Active tab gets the gold ring + gold-tinted background. */
.cmd-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  max-width: var(--w-app);
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 600px) {
  .cmd-tabs { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .cmd-tabs { grid-template-columns: repeat(6, 1fr); }
}
.cmd-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  line-height: 1.15;
  transition: transform 80ms, border-color 120ms, background 120ms, color 120ms;
}
@media (hover: hover) {
  .cmd-tab:hover {
    border-color: var(--c-tag-gold);
    background: var(--c-bg-mid);
    transform: translateY(-1px);
  }
}
.cmd-tab:active { transform: translateY(0); }
.cmd-tab[aria-selected="true"],
.cmd-tab[aria-current="page"] {
  background: rgba(232, 160, 32, 0.10);
  border-color: var(--c-tag-gold);
  color: var(--c-tag-gold);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.25);
}
.cmd-tab { text-decoration: none; }
.cmd-tab:focus-visible { outline: 2px solid var(--c-tag-gold); outline-offset: 2px; }

/* Section heading above an action-tile-grid group. Sits flush with
   the grid below and reads as a quiet eyebrow rather than a heavy h3. */
.action-group-heading {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.action-group-heading:first-child { margin-top: 0; }

.cmd-content {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  max-width: var(--w-app);
  margin: 0 auto;
  width: 100%;
}
.cmd-panel { display: block; }
.cmd-panel[hidden] { display: none; }

/* Action tile grid (Overview tab) */
.action-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .action-tile-grid { grid-template-columns: repeat(4, 1fr); }
}
.action-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 120px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  color: var(--c-text);
  text-decoration: none;
  transition: transform 80ms, border-color 120ms, background 120ms;
}
@media (hover: hover) {
  .action-tile:hover {
    border-color: var(--c-tag-gold);
    background: var(--c-bg-mid);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--c-text);
  }
}
.action-tile:active { transform: translateY(0); }
.action-tile-icon {
  font-size: 2rem;
  color: var(--c-tag-gold);
  line-height: 1;
}
/* Live count in place of the icon — same slot, bigger weight,
   tabular numerals so "8 / 12" stays aligned across tiles. Used
   on the tournament-day action tiles (Sign-up, Check-in, Weigh-ins)
   so each button reads as both CTA + state. */
.action-tile-count {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--c-tag-gold);
  font-variant-numeric: tabular-nums;
}
.action-tile-label {
  font-weight: 800;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
}
.action-tile-meta {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Compact teams list (Teams tab) */
.team-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: border-color 120ms;
}
@media (hover: hover) { .team-row:hover { border-color: var(--c-cull-green); } }
.team-row .boat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--c-tag-gold);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: center;
}
.team-row .team-info {
  min-width: 0;
}
.team-row .team-info strong { color: var(--c-text); display: block; font-weight: 600; }
.team-row .team-info .meta { font-size: var(--fs-xs); }

/* ---------- Culltag identity card (variant W — platform-wide standard) ---------- */
/* Renders an angler as a fixed-size two-block pill: gold tile-tray on
   the left (4 chips spelling the angler's culltag), dark name block on
   the right. ONE size everywhere — the same tag in the header, on
   /account, on the public roster, in admin sheets. Names with two
   parts (First Last) stack vertically inside the dark block. Tile
   language matches the brand pill. Generated by
   window.culltag.fmtAngler(name, culltag). */
/* Identity card matches the brand pill exactly: 240×52, same chip tray,
   same chip dimensions, same border. The right-side name block fills
   the remaining 148px and ellipsis-truncates long names so the pill
   never grows or shrinks based on content. */
.ct-tag {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--c-tag-gold);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.12);
  vertical-align: middle;
  font-family: var(--font-sans);
  width: 240px;
  height: 52px;
  max-width: 100%;
  flex-shrink: 0;
}
.ct-tag-num {
  background: var(--c-tag-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 0 0 92px;
  padding: 5px 5px 5px 14px;
}
.ct-tag-ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 42px;
  background: #f4b942;
  color: #1f3a23;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.05rem;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ct-tag-ch.placeholder {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(31, 58, 35, 0.6);
  box-shadow: none;
}
/* Earned identity-pill chip — same bronze (default) / gold (.gold)
   ★ split as the brand-pill version, so an angler whose tag includes
   earned letters reads the same way in their identity pill as in
   the brand pill. */
.ct-tag-ch.earned { position: relative; }
.ct-tag-ch.earned::before {
  content: '★';
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  line-height: 1;
  color: #7a4a1a;
  pointer-events: none;
}
.ct-tag-ch.earned.gold::before {
  color: #fff5d8;
  text-shadow: 0 0 1px #5a3a14, 0 0 2px #5a3a14;
}
.ct-tag-name {
  position: relative;
  background: var(--c-bg-mid);
  color: var(--c-text);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 28px 6px var(--space-3);     /* right padding reserves space for the grommet */
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
}
/* Far-right grommet — matches the brand pill's tag-hole so the
   identity card also reads as a hang-tag. */
.ct-tag-name::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-tag-gold);
  box-shadow: inset 0 0 0 1.5px var(--c-bg-dark);
}
/* First / Last stacked — equal weight, line on top, line below. */
.ct-tag-first, .ct-tag-last {
  font-size: 0.92rem;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-tag-first { font-weight: 700; color: var(--c-text); }
.ct-tag-last  { font-weight: 600; color: var(--c-text-muted); }
/* Single-line name (mononyms or roster entries with only one word) — let
   it fill the dark block vertically centered at a slightly larger size. */
.ct-tag-single {
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
}
.ct-tag-name:has(.ct-tag-single) { justify-content: center; }

.ct-tag-sep {
  /* Deprecated. Older code may still emit a <span class="ct-tag-sep">,
     but fmtTeam now wraps both pills in .ct-team-pair (below) which
     uses a real gap instead of a textual separator. Keep this rule
     so any in-flight legacy markup still gets a sane visual spacer. */
  display: inline-block;
  width: var(--space-3);
}
/* Wraps a boater + co-angler pill pair from fmtTeam. Inline-flex so
   the pair still flows inline inside a row, but a real gap between
   the two pills replaces the old "/" separator. flex-wrap lets them
   stack on narrow viewports instead of clipping. */
.ct-team-pair {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  vertical-align: middle;
  align-items: stretch;
  max-width: 100%;
}

/* .ct-tag-sm / .ct-tag-xs / .ct-tag-lg are deprecated — the platform
   now uses one consistent size for every angler tag. Aliases left so
   any callers still passing {small:true} / {xs:true} / {large:true}
   render as the standard tag instead of breaking. */
.ct-tag-sm, .ct-tag-xs, .ct-tag-lg {
  /* alias of .ct-tag — no overrides */
}

/* ---------- Team tag (boat# left + stacked anglers right) ---------- */
/* The director's identity surface for working interfaces: boat # is the
   primary identifier (large gold), boater stacked above co-angler with
   their compact culltag-xs pills + names. Generated by
   window.culltag.fmtTeamCard(team). */
.team-tag {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
  min-width: 240px;
  max-width: 100%;
  vertical-align: middle;
  line-height: 1.2;
}
.team-tag .boat-block {
  background: var(--c-bg-mid);
  border-right: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  min-width: 56px;
  flex: 0 0 auto;
}
.team-tag .boat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--c-tag-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.04em;
}
.team-tag .anglers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.team-tag .anglers .angler-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  min-width: 0;
}
.team-tag .anglers .angler-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Culltag # is a tiny gold suffix — present for branding, de-emphasized
   so the director's eye lands on names + boat # first when managing
   teams. */
.team-tag .anglers .angler-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.7rem;
  color: var(--c-tag-gold);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  opacity: 0.85;
}
.team-tag.row-done {
  /* keeps the .row-done formula consistent — sage tint, gold accent */
  background: rgba(122, 158, 126, 0.18);
  border-color: var(--c-cull-green);
}

/* ---------- "Done" row utility ---------- */
/* Apply to any card or list row that represents a completed item
   (checked in, scored, paired, weighed, registered, dues-paid, etc.).
   Triple-signal formula: sage-tinted fill, full sage border, gold
   accent stripe down the left edge. Add `.row-done-title` to the row's
   title element to get the leading gold ✓ for free. */
.row-done {
  background: rgba(122, 158, 126, 0.22) !important;
  border: 1px solid var(--c-cull-green) !important;
  padding-left: calc(var(--space-4) + 4px);
  position: relative;
}
.row-done::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--c-tag-gold);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.row-done-title::before {
  content: "✓ ";
  color: var(--c-tag-gold);
  font-weight: 900;
  font-size: 1.1em;
  margin-right: 2px;
}

/* ---------- "Active" row utility (currently in progress / selected) ---------- */
/* Gold tint = active moment. Use for the boat currently being scored,
   the angler being edited, the tournament being managed right now.
   Mutually exclusive with .row-done. */
.row-active {
  background: rgba(232, 160, 32, 0.14) !important;
  border: 1px solid var(--c-tag-gold) !important;
  padding-left: calc(var(--space-4) + 4px);
  position: relative;
}
.row-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--c-tag-gold);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

/* ---------- Toggle button (single, click to flip) ---------- */
/* Replaces checkbox toggles for binary state. Button frame is
   consistent dark — only the switch on the right changes. iOS-style
   slider: track + circular puck. Off = sage track, puck on left
   (sage). On = gold track, puck on right (gold). The puck slides;
   nothing else lights up. */
.btn-state {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-mid);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
  transition: border-color 100ms;
  width: 100%;
  text-align: left;
}
.btn-state:active { transform: scale(0.99); }
@media (hover: hover) {
  /* Override global button:hover so the toggle's child .lbl text
     stays readable on the card background. */
  .btn-state:hover {
    background: var(--c-bg-mid);
    border-color: var(--c-border-strong);
    color: var(--c-text);
  }
}
.btn-state .lbl {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c-text);
  letter-spacing: 0.02em;
}

/* The slider. Track is a static dark recessed channel — never tints
   with the state. Only the puck moves and changes color: green on
   the left when off, slides right and turns gold when on. Single,
   localized visual change. */
.switch {
  position: relative;
  width: 56px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--c-bg-dark);
  border: 1px solid var(--c-border);
  flex-shrink: 0;
}
.switch-puck {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-cull-green);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
}
[aria-pressed="true"] .switch-puck,
.switch[data-on="true"] .switch-puck {
  transform: translateX(26px);
  background: var(--c-tag-gold);
}

/* .flavor-gold is now a no-op alias (gold-on-when-pressed is default). */
.btn-state.flavor-gold { /* alias */ }

/* ---------- Stepper (− value +) for amounts that step ---------- */
.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-dark);
}
.stepper button {
  background: var(--c-bg-mid);
  border: none;
  border-radius: 0;
  padding: 0 var(--space-4);
  color: var(--c-text);
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  min-width: 56px;
  min-height: 64px;
  /* Disable iOS double-tap-zoom so rapid +/- taps don't zoom the
     viewport. Pairs with font-size ≥ 16px on the input below to
     prevent zoom-on-focus. */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
@media (hover: hover) { .stepper button:hover { background: var(--c-bg-card); color: var(--c-tag-gold); } }
.stepper input {
  border: none;
  background: transparent;
  color: var(--c-text);
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-display);
  font-style: italic;
  text-align: center;
  width: 6em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding: 0;
}
.stepper input:focus { outline: none; }

/* ---------- POS-style large input ---------- */
.input-pos {
  width: 100%;
  max-width: 280px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-dark);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  font-style: italic;
}
.input-pos:focus {
  outline: none;
  border-color: var(--c-tag-gold);
  box-shadow: var(--shadow-glow-gold);
}

/* ---------- Field-row (label left, control right) ---------- */
.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.field-row .field-label {
  flex: 1;
  min-width: 140px;
}
.field-row .field-label .ttl {
  font-weight: 700;
  color: var(--c-text);
  font-size: var(--fs-base);
}
.field-row .field-label .sub {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
  display: block;
}

/* ---------- Sheet (slide-up overlay for editing one item) ---------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 50;
}
.sheet-backdrop[data-open="true"] { display: block; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
  z-index: 51;
  max-height: 92dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0, 0.0, 1);
  box-shadow: var(--shadow-3);
}
.sheet[data-open="true"] { transform: translateY(0); }
/* Sage tint when the sheet is opened for a team that's already checked in.
   Visual confirmation of state without re-reading the toggle position. */
.sheet.checked {
  background:
    linear-gradient(180deg, rgba(122, 158, 126, 0.10), rgba(122, 158, 126, 0.04) 60%),
    var(--c-surface);
}
@media (min-width: 768px) {
  .sheet {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(560px, 90vw);
    max-height: 100dvh;
    border-radius: 0;
    border-left: 1px solid var(--c-border-strong);
    border-top: none;
    transform: translateX(100%);
  }
  .sheet[data-open="true"] { transform: translateX(0); }
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}
.sheet-header h2 { margin: 0; }
.sheet-close {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  min-height: 36px;
  padding: 0 var(--space-3);
  font-weight: 700;
  border-radius: var(--radius);
  cursor: pointer;
}
@media (hover: hover) { .sheet-close:hover { color: var(--c-text); border-color: var(--c-cull-green); } }

/* ---------- Ops mode (full-screen — score/weigh-in/check-in) ----------
   The logo + sign-out chrome stays visible on every page, including
   ops-mode, so the user always has a way home. We trim main padding
   for edge-to-edge tablet layouts but never hide the brand. */
body.ops-mode {
  background: var(--c-bg-dark);
}
body.ops-mode main { max-width: none; padding: 0; }

/* ---------- Selection / focus ---------- */
::selection {
  background: var(--c-tag-gold);
  color: var(--c-bg-dark);
}

/* ---------- Wider container for admin/score/etc ---------- */
@media (min-width: 768px) {
  main { padding: var(--space-6); }
  .container-wide  { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* ---------- POS-style edit/settings card ---------- */
/* Used by /list/new, /list/edit, and the /admin Settings tab. */
.edit-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.edit-card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
}
.edit-card label {
  margin: 0 0 var(--space-3);
}
.edit-card label:last-child { margin-bottom: 0; }
.edit-card label > span:first-child {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}
.edit-card input[type="text"],
.edit-card input[type="number"],
.edit-card input[type="date"],
.edit-card input[type="time"],
.edit-card input[type="email"],
.edit-card input[type="tel"],
.edit-card input[type="url"],
.edit-card textarea,
.edit-card select {
  min-height: 52px;
  padding: 12px var(--space-3);
  font-size: var(--fs-base);
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  width: 100%;
  /* Re-color the native date/time picker indicator to match the
     dark theme. Safari ignores invert() on the indicator; Chrome
     and Firefox use it. */
  color-scheme: dark;
}
.edit-card input[type="time"]::-webkit-calendar-picker-indicator,
.edit-card input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) sepia(0.4) saturate(2) hue-rotate(5deg);
  opacity: 0.7;
}
/* Time + date inputs only need room for "HH:MM AM" / a date display
   — full-width was stretching them across the whole row-identity
   grid cell and dwarfing the actual control. Constrain to a sensible
   width and let them sit left-aligned in their grid cell. */
.edit-card input[type="time"] { width: 11ch; min-width: 0; }
.edit-card input[type="date"] { width: 16ch; min-width: 0; }
.edit-card textarea { min-height: 140px; padding-top: 10px; resize: vertical; }
/* Placeholders should read as suggestions, not real content. The
   global form input::placeholder rule was setting c-text-faint
   (#6E7A6E) but the .edit-card scope overrode it; rules below pin
   placeholders to a low-contrast color so directors don't mistake
   example values like "Special Olympics Maine" for real data. */
.edit-card input::placeholder,
.edit-card textarea::placeholder {
  color: var(--c-text-faint);
  opacity: 0.55;
  font-style: italic;
}
.edit-card input:focus,
.edit-card textarea:focus,
.edit-card select:focus {
  outline: none;
  border-color: var(--c-tag-gold);
  box-shadow: 0 0 0 2px rgba(232, 160, 32, 0.30);
}

/* ---------- +/- numeric stepper ---------- */
/* Used for entry fees, top-N, min-length, etc. Round buttons either
   side of a centered numeric input. Click +/- to bump by data-step. */
.fee-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
}
.fee-stepper button {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--c-bg-card);
  color: var(--c-text);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.fee-stepper button:active { transform: scale(0.95); }
.fee-stepper input {
  width: 100px;
  min-height: auto !important;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.4rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--c-text);
}
.fee-stepper .currency,
.fee-stepper .unit {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  color: var(--c-text-muted);
  padding: 0 8px;
  font-size: 0.9rem;
}

/* ---------- POS-style tile picker ---------- */
/* Reusable big-button picker for small-cardinality fields (format,
   pairing, sign-up type, scoring method, lunker type, status…).
   Used on /list/new, /list/edit, and the /admin Settings tab. */
.pos-picker {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
@media (min-width: 500px) {
  .pos-picker.cols-2 { grid-template-columns: 1fr 1fr; }
  .pos-picker.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .pos-picker.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.pos-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  min-height: 96px;
  background: var(--c-bg-mid);
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  cursor: pointer;
  font: inherit;
  transition: background 100ms, border-color 100ms, color 100ms;
  touch-action: manipulation;
}
.pos-tile:active { transform: scale(0.99); }
@media (hover: hover) {
  /* The global button:hover paints solid gold — override it on
     pos-tiles so muted child text (pos-meta, pos-icon) stays readable
     on the card's own background. */
  .pos-tile:hover:not(.selected) {
    background: var(--c-bg-mid);
    border-color: var(--c-cull-green);
    color: var(--c-text);
  }
  .pos-tile.selected:hover {
    background: rgba(232, 160, 32, 0.15);
    border-color: var(--c-tag-gold);
    color: var(--c-text);
  }
}
.pos-tile .pos-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-text-muted);
}
.pos-tile .pos-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pos-tile .pos-meta {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.3;
}
.pos-tile.selected {
  background: rgba(232, 160, 32, 0.15);
  border-color: var(--c-tag-gold);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.5);
}
.pos-tile.selected .pos-icon  { color: var(--c-tag-gold); }
.pos-tile.selected .pos-label { color: var(--c-tag-gold); }

/* Compact picker — used when a row has 3+ tiles so the column doesn't
   dominate phone widths. Auto-applied via the `compact` modifier on the
   merged tournament-setup page's Format / Status / Lunker pickers. */
.pos-picker.compact .pos-tile { min-height: 72px; padding: var(--space-2) var(--space-3); }
.pos-picker.compact .pos-tile .pos-icon  { font-size: 1.25rem; }
.pos-picker.compact .pos-tile .pos-label { font-size: 0.92rem; }
.pos-picker.compact .pos-tile .pos-meta  { font-size: 0.7rem; }

/* ---------- Tournament code card (settings page) ---------- */
.tcode-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-3);
}
.tcode-display .tcode {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.18em;
  color: var(--c-tag-gold);
  flex: 1;
  min-width: 0;
}
.tcode-share, .tcode-long {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
}
.tcode-share code, .tcode-long code {
  background: var(--c-bg-mid);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}

/* ---------- Token eligibility badge (settings page) ---------- */
.token-elig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.token-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.token-badge.not-eligible {
  background: rgba(232, 160, 32, 0.15);
  color: var(--c-tag-gold);
  border-color: rgba(232, 160, 32, 0.55);
}
.token-badge.eligible {
  background: rgba(122, 158, 126, 0.18);
  color: var(--c-cull-green);
  border-color: rgba(122, 158, 126, 0.55);
}
.token-badge.awarded {
  background: rgba(122, 158, 126, 0.28);
  color: var(--c-cull-green);
  border-color: var(--c-cull-green);
}
.permit-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.permit-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.permit-balance-pill .permit-balance-label {
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.permit-balance-pill .permit-balance-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--c-tag-gold);
  min-width: 14px;
  text-align: center;
}

/* ---------- Numpad popup ---------- */
/* Custom touch numpad. Attached automatically to <input data-numpad>.
   See platform/web/js/numpad.js for the binding logic. */
.numpad-popup {
  display: none;
  position: fixed;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 2 * var(--space-3)));
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  z-index: 60;
  box-shadow: var(--shadow-3, 0 12px 40px rgba(0,0,0,0.45));
}
.numpad-popup[data-open="true"] { display: block; }

.numpad-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--c-bg-mid);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  min-height: 48px;
}
.numpad-display-value {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.numpad-x {
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  font-style: normal;
}
@media (hover: hover) { .numpad-x:hover { color: var(--c-text); } }

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.numpad-key {
  min-height: 56px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  font-weight: 800;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 80ms, border-color 80ms;
}
@media (hover: hover) {
  .numpad-key:hover { border-color: var(--c-cull-green); }
}
.numpad-key:active {
  transform: scale(0.96);
  background: rgba(122, 158, 126, 0.18);
}
.numpad-key-aux {
  background: var(--c-bg-card);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}

.numpad-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.numpad-actions button {
  flex: 1;
  min-height: 48px;
}

.numpad-section { margin-bottom: var(--space-3); }
.numpad-section:last-of-type { margin-bottom: 0; }
.numpad-section-label {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 6px;
}
.numpad-eighths-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.numpad-eighth {
  min-height: 44px;
  background: var(--c-bg-mid);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  padding: 0 2px;
  transition: background 80ms, color 80ms, border-color 80ms;
}
@media (hover: hover) {
  .numpad-eighth:hover { border-color: var(--c-cull-green); color: var(--c-text); }
}
.numpad-eighth.active {
  background: var(--c-tag-gold);
  color: var(--c-bg-dark);
  border-color: var(--c-tag-gold);
}
.numpad-length-display { font-style: italic; }

/* ---------- Tile shine modifiers (platform-wide) ----------
   Apply .shine-bronze / .shine-silver / .shine-gold to any chip
   element to mark a position as earned. Works on:
     • .brand-pill .brand-pill-left .ch
     • .ct-tag-ch (identity pill chips)
     • .reward-char (vanity preview tiles)
   Render helpers in supabase.js attach the class per chip based on
   the angler's angler_tile_shines rows. Defined at end-of-file so
   source-order wins over the various per-tile base styles. */

.shine-bronze,
.brand-pill .brand-pill-left .ch.shine-bronze,
.ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch.shine-bronze,
.ct-tag-ch.shine-bronze,
.reward-tag .reward-char.shine-bronze {
  background: linear-gradient(115deg,
    #7a4a1a 0%, #c08542 25%, #f4cf8a 50%, #c08542 75%, #7a4a1a 100%);
  background-size: 220% 100%;
  color: #1f1208;
  animation: shine-bronze-sweep 3s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30), 0 0 6px rgba(192, 133, 66, 0.55);
}
@keyframes shine-bronze-sweep {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

.shine-silver,
.brand-pill .brand-pill-left .ch.shine-silver,
.ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch.shine-silver,
.ct-tag-ch.shine-silver,
.reward-tag .reward-char.shine-silver {
  background: linear-gradient(115deg,
    #8e9499 0%, #c0c4c8 25%, #ffffff 50%, #c0c4c8 75%, #8e9499 100%);
  background-size: 220% 100%;
  color: #1c2330;
  animation: shine-silver-sweep 3s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30), 0 0 6px rgba(220, 225, 232, 0.55);
}
@keyframes shine-silver-sweep {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

.shine-gold,
.brand-pill .brand-pill-left .ch.shine-gold,
.ct-tag-pill .brand-pill-left .ch.ct-tag-pill-ch.shine-gold,
.ct-tag-ch.shine-gold,
.reward-tag .reward-char.shine-gold {
  background: linear-gradient(115deg,
    #b8780d 0%, #f1b827 25%, #fff5cf 50%, #f1b827 75%, #b8780d 100%);
  background-size: 220% 100%;
  color: #1f3a23;
  animation: shine-gold-sweep 3.5s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30), 0 0 8px rgba(255, 215, 100, 0.55);
}
@keyframes shine-gold-sweep {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

/* ---------- Find family ---------- */
/* Shared shell for the two lookup pages (/find + /id). The hero
   centers the title + tagline + mounted search pill + hint + a
   small cross-search link to the sibling page. Both pages use the
   same chrome so they read as one product. See
   plans/fuzzy-sauteeing-patterson.md ("find family"). */
.find-hero {
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-4);
  margin: 0 auto var(--space-5);
  max-width: 640px;
}
.find-hero h1 { margin: 0 0 var(--space-2); }
.find-hero .find-hero-tagline {
  margin: 0 0 var(--space-4);
  color: var(--c-text-muted);
  font-size: var(--fs-md);
}
.find-hero .find-hero-pill {
  display: inline-flex;
  margin: 0 auto var(--space-3);
}
.find-hero .find-hero-hint {
  margin: 0 0 var(--space-2);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  min-height: 1.4em;
}
.find-hero .find-hero-crosslink {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--c-cull-green);
}
@media (hover: hover) {
  .find-hero .find-hero-crosslink:hover { color: var(--c-gold-light); }
}

/* Shared result-card chrome — moody gradient + gold-accent border.
   .t-card (tournaments on /find), .id-card (angler stats on /id),
   .id-vault, .id-wild all add this class so they read as the same
   "you found something" card family. Page-specific layout (status
   stripe, stats grid, vault lock glyph) stays in each page's own
   inline styles. */
.find-card {
  background: linear-gradient(135deg, #1A3528 0%, #0D2318 100%);
  border: 1px solid var(--c-tag-gold);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 0 0 1px rgba(232, 160, 32, 0.10), 0 4px 14px rgba(0, 0, 0, 0.35);
  color: var(--c-text);
  position: relative;
}

/* Outcome variant — used when a section has no results to show.
   Same chrome as a regular find-card but narrower (max 480px),
   centered, and tighter padding, so an empty-state reads as an
   intentional callout rather than a full-row banner. */
.find-card-outcome {
  text-align: center;
  padding: var(--space-3) var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}
.find-card-outcome .meta { margin: 0; }