/* Shared styles. Built for a phone screen in bright sunlight with sweaty
   thumbs, so: big tap targets, high contrast, no hover-only affordances. */

:root {
  /* The app's own identity — a bright grass green, not the team colours below
     (those are data, picked by whoever sets up the day, and must stay free
     to be anything). Chrome, buttons and section accents use --brand;
     --ink is body text and stays near-black-with-a-whisper-of-green so nothing
     printed on white ever looks tinted. Refreshed 2 Sep 2026 — Paul: "i want
     my app and website to look like golfgamebook.com," then, once this was
     matching their exact measured hex values: "well use a slightly different
     colour" — deliberately not their literal brand green. Landed on a purer,
     less blue-shifted green in the same brightness family (their own hue
     sits closer to sea-green/teal). Checked contrast before picking the
     final value the same way as their own site actually needs to: their
     brighter logo green is only ~2.8:1 with white text, under even the
     relaxed 3:1 large-text minimum, so this shade is tuned to clear 4.5:1
     with white text at normal button size, not just their looser bar. */
  --brand: #0b7d3a;
  --brand-dark: #063f1e;
  --brand-soft: #c2ecc7;
  --blue: #1d4ed8;
  --red: #be123c;
  --ink: #032613;
  --muted: #6b7280;
  --paper: #ffffff;
  --bg: #f1fbf1;
  --line: #d7ebd9;
  --good: #15803d;
  --good-soft: #dcfce7;
  --warn: #b45309;
  --bad: #b91c1c;
  --gold: #a16207;
  --gold-soft: #fef3c7;
  --silver: #64748b;
  --silver-soft: #f1f5f9;
  --bronze: #9a5b3a;
  --bronze-soft: #fdf1e9;
  /* Staff/control-room tone — deliberately NOT the player-facing green, so the
     header itself signals "this is the admin side" before you read a word. */
  --admin-bg: #232838;
  --admin-bg-dark: #14161f;
  --admin-accent: #f0b429;
  --radius: 18px;
  color-scheme: light;
  /* The app's own wordmark/heading face — heavy and rounded, matching the
     golfgamebook.com reference Paul asked to match (their headings use a
     licensed 900-weight face, Sohne; Outfit is the closest free equivalent
     at that weight). Kept OFF body text, buttons and score-entry number pads
     on purpose: those need maximum legibility on a phone in bright sun, not
     personality, so they stay on the reliable system stack. */
  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: 84px; /* leave room for a fixed bottom bar */
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: .1px;
}

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background:
    radial-gradient(circle at 3px 3px, rgba(255,255,255,.07) 1.5px, transparent 0) 0 0 / 15px 15px,
    linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

/* The admin side (admin.html, history.html) gets its own header tone —
   dark slate instead of fairway green — so it reads as the control room,
   not just another page of the same player-facing app. Same texture, same
   wordmark; only the colour and the ADMIN badge change. */
header.top.admin {
  background:
    radial-gradient(circle at 3px 3px, rgba(255,255,255,.06) 1.5px, transparent 0) 0 0 / 15px 15px,
    linear-gradient(155deg, var(--admin-bg) 0%, var(--admin-bg-dark) 100%);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: .8;
}
.brand-row .brand-name {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand-row .admin-badge {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--admin-bg-dark);
  background: var(--admin-accent);
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 2px;
}

#installBanner[hidden] { display: none; }
.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-soft);
  color: var(--ink);
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.install-banner-text { flex: 1; }
.install-banner-action {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.install-banner-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  flex: none;
}
@media (max-width: 480px) {
  .install-banner { flex-wrap: wrap; }
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

header.top h1 {
  font-family: var(--display);
  font-size: 21px;
  margin: 0;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}

header.top .status {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: #374151;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
header.top .status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
header.top .status.synced::before { animation: livePulse 1.8s ease-in-out infinite; }
header.top .status.offline { background: var(--bad); }
header.top .status.syncing { background: var(--warn); }
header.top .status.synced { background: var(--good); }

main { padding: 16px; max-width: 640px; margin: 0 auto; }
/* Admin is desktop-first setup work (bulk upload, dense tables, a
   multi-step wizard) — squeezing it into the same phone-width column as
   the player-facing pages leaves most of a real screen empty and makes
   every table need a horizontal-scroll workaround it wouldn't need. */
@media (min-width: 760px) {
  main.wide { max-width: 1080px; padding: 24px 32px; }
  .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
}

.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 14px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 9;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  font-family: inherit;
}
.admin-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(17,24,39,.07);
  border: 1px solid var(--line);
}

.teams {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
}
.team-pill {
  flex: 1;
  border-radius: var(--radius);
  padding: 20px 14px 18px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.team-pill::after {
  /* a soft sheen so the hero card reads as one panel, not a flat swatch */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.team-pill .name {
  font-size: 14px;
  font-weight: 700;
  opacity: .92;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.team-pill .points { font-family: var(--display); font-size: 48px; font-weight: 700; line-height: 1.05; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.team-pill .need { font-size: 13px; opacity: .9; margin-top: 2px; font-weight: 600; }
.teams::before {
  /* "VS" divider, centred over the gap between the two team-pills */
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 2;
}

.progress {
  height: 16px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  display: flex;
  margin-bottom: 20px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  gap: 2px;
}
.progress > span { display: block; height: 100%; }

.session-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-dark);
  margin: 26px 0 8px;
  padding-left: 11px;
  position: relative;
}
.session-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 999px;
  background: var(--brand);
  opacity: .55;
}

.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 12px 13px 14px;
  margin: 0 -4px;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid transparent;
  text-decoration: none;
  color: inherit;
}
.match-row:last-child { border-bottom: none; }
a.match-row { transition: background-color .12s ease; }
a.match-row:hover { background: var(--bg); }
.match-row .who { font-weight: 600; font-size: 16px; line-height: 1.3; }
.match-row .who .vs { color: var(--muted); font-weight: 400; font-size: 14px; }
.match-row .status {
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.match-row.side-blue-lead { border-left-color: var(--blue); }
.match-row.side-red-lead { border-left-color: var(--red); }
.status.side-blue { background: #dbeafe; color: var(--blue); }
.status.side-red { background: #ffe4e6; color: var(--red); }
.status.square { background: var(--line); color: var(--muted); font-weight: 600; }
.status.done { background: var(--ink); color: #fff; }

button, .btn {
  font: inherit;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  width: 100%;
  box-shadow: 0 2px 5px rgba(15,61,41,.28);
}
.btn-primary:hover { background: var(--brand-dark); box-shadow: 0 4px 10px rgba(15,61,41,.32); transform: translateY(-1px); }
.btn-primary:active { background: var(--brand-dark); box-shadow: 0 1px 3px rgba(15,61,41,.3); transform: translateY(0); }
.btn-primary:disabled { background: var(--line); color: var(--muted); box-shadow: none; transform: none; cursor: default; }
.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-ghost:active { background: var(--bg); }

.hole-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.score-btn {
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--paper);
  border: 2px solid var(--line);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
}
.score-btn.picked { background: var(--brand); color: #fff; border-color: var(--brand); }
.score-btn.disputed { border-color: var(--warn); }

.hole-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.hole-header .num { font-family: var(--display); font-size: 30px; font-weight: 700; }
.hole-header .meta { color: var(--muted); font-size: 14px; }

.player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.player-row:last-child { border-bottom: none; }
.player-row .name { font-weight: 600; }
.player-row .shots { font-size: 13px; color: var(--muted); }

.dispute-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: var(--warn);
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 14px;
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dispute-banner::before {
  content: "!";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ---------- Tee times sheet ---------- */
.tee-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.tee-group:last-child { border-bottom: none; }
.tee-hole-badge {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.tee-hole-badge .n { font-size: 18px; font-weight: 800; color: var(--ink); }
.tee-hole-badge .lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tee-group .info { flex: 1; min-width: 0; }
.tee-group .players { font-weight: 600; font-size: 15.5px; }
.tee-group .time { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }

.workings {
  background: #f9fafb;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
.workings div { padding: 2px 0; }

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0;
}
.tabbar a.active { color: var(--brand); }

.finished-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 30px 0 10px;
}
.finished-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.finished-block { opacity: .82; }
.finished-block .status.side-blue,
.finished-block .status.side-red { background: var(--line); color: var(--muted); }

/* summary.finished-divider gets display:flex above, which drops the browser's
   own disclosure triangle — this caret replaces it so it's still obvious the
   Scores tab's Finished section opens and closes. */
summary.finished-divider { user-select: none; }
summary.finished-divider .caret { display: inline-block; transition: transform .15s; }
details[open] > summary.finished-divider .caret { transform: rotate(90deg); }
.empty-state { text-align: center; color: var(--muted); font-weight: 600; padding: 26px 16px; }

.hero-empty {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  border-radius: var(--radius);
  padding: 38px 20px 34px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 3px 3px, rgba(255,255,255,.07) 1.5px, transparent 0) 0 0 / 15px 15px,
    linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: 0 6px 20px rgba(15,61,41,.24);
}
.hero-empty::after {
  /* soft sheen, same trick as .team-pill, so this reads as one panel */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.hero-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  font-size: 26px;
  margin-bottom: 12px;
}
.hero-empty-title { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.hero-empty-sub {
  font-size: 14px;
  font-weight: 600;
  opacity: .92;
  margin: 8px auto 0;
  max-width: 320px;
  line-height: 1.5;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
a.link { color: var(--blue); text-decoration: none; font-weight: 600; }

.holes-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/* ---------- Field leaderboard (stroke play / Stableford) ---------- */
.field-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.field-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 0 8px 10px 0;
  font-weight: 700;
}
.field-table td {
  padding: 12px 8px;
  border-top: 1px solid var(--line);
}
.field-table tr:first-child td { border-top: none; }
.field-table tr.leader td { background: var(--gold-soft); }
.field-table tr.leader td:first-child { border-radius: 10px 0 0 10px; }
.field-table tr.leader td:last-child { border-radius: 0 10px 10px 0; }
.field-table .pos {
  font-weight: 800;
  width: 40px;
  color: var(--muted);
  font-size: 15px;
}
.field-table tr.leader .pos { color: var(--gold); }
.field-table .pos .medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
}
.field-table .pos-1 .medal { background: var(--gold-soft); color: var(--gold); }
.field-table .pos-2 .medal { background: var(--silver-soft); color: var(--silver); }
.field-table .pos-3 .medal { background: var(--bronze-soft); color: var(--bronze); }
.field-table .name { font-weight: 600; font-size: 16px; }
.field-table .score { text-align: right; font-family: var(--display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.field-table .thru { text-align: right; color: var(--muted); font-size: 13px; }
.field-table a.row-link { display: contents; color: inherit; text-decoration: none; }

/* ---------- Admin forms ---------- */
.form-row { margin-bottom: 12px; }
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: #c9c3ae; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-row input:disabled { background: var(--bg); color: var(--muted); }
.form-row textarea { font-family: inherit; resize: vertical; }
.drop-zone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
  transition: border-color .15s ease, background-color .15s ease;
}
.drop-zone.drag-over { border-color: var(--brand); background: var(--brand-soft); }
.drop-zone-link { color: var(--brand); font-weight: 700; text-decoration: underline; cursor: pointer; }
.player-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.player-chip {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: grab;
  user-select: none;
}
.player-chip:active { cursor: grabbing; }
.player-chip.dragging { opacity: .4; }
.tee-group-card { transition: border-color .15s ease, background-color .15s ease; border: 2px solid transparent; }
.tee-group-card.drag-over { border-color: var(--brand); background: var(--brand-soft); }
.remove-player-zone {
  position: fixed;
  left: 25%;
  right: 25%;
  bottom: 0;
  z-index: 50;
  padding: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--bad);
  background: #fee2e2;
  border-top: 2px dashed var(--bad);
  border-left: 2px dashed var(--bad);
  border-right: 2px dashed var(--bad);
  transform: translateY(100%);
  transition: transform .15s ease, background-color .15s ease;
  /* Paul: "the delete person bar is too big as i wanted to mobe the page
     down and it got blocked by the delete box" — even correctly hidden,
     a fixed-position element still sits over the bottom of the screen and
     can catch a scroll/touch gesture that starts on top of it. Inert by
     default; only a real, active drag turns it back on.
     "i want that bar to half the width so we can scole down past if we
     cant see all the tee times on one page" — then "no half width on
     mobiles too": same half-width, centred treatment on every size, not
     just laptop, so the rest of the screen stays visible either way. */
  pointer-events: none;
}
.remove-player-zone.showing { transform: translateY(0); pointer-events: auto; }
.remove-player-zone.drag-over { background: var(--bad); color: #fff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-grid .form-row.span2 { grid-column: 1 / -1; }

.data-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 8px;
  white-space: nowrap;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line);
}
.data-table th:first-child { border-radius: 8px 0 0 0; }
.data-table th:last-child { border-radius: 0 8px 0 0; }
.data-table td { padding: 9px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.data-table tr:first-child td { border-top: none; }
.data-table tbody tr:hover td, .data-table tr[data-player-row]:hover td { background: var(--bg); }
.data-table input, .data-table select {
  padding: 6px 8px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  width: 100%;
  min-width: 90px;
  box-sizing: border-box;
}
.data-table input[type="number"] { min-width: 64px; }
.data-table select { min-width: 110px; }

.btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
.btn-danger { background: #fee2e2; color: var(--bad); }
.btn-danger:disabled, .btn-ghost:disabled, .btn-primary:disabled { opacity: .5; }

/* A search result that's a whole tappable next step (e.g. "import this
   club"), not a toggle like the chips around it — styled as an obvious
   button-like row with its own arrow, so it never reads as an inert label
   someone's already looked at and dismissed. */
.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--brand);
  background: var(--brand-soft);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-dark);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.result-row:hover { background: var(--brand); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,61,41,.2); }
.result-row:last-child { margin-bottom: 0; }
.result-row .arrow { flex: none; font-weight: 800; font-size: 18px; }
.result-row.cancel { border-color: var(--line); background: var(--paper); color: var(--muted); justify-content: center; }

.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--brand); }
.chip.selected { background: var(--brand); color: #fff; border-color: var(--brand); }
.chip.selected:hover { border-color: var(--brand-dark); }

.side-builder {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.side-builder .vs-label { align-self: center; font-weight: 800; color: var(--muted); }

.error-banner {
  background: #fee2e2;
  color: var(--bad);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.ok-banner {
  background: var(--good-soft, #dcfce7);
  color: var(--good);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.locked-tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.locked-tag.yes { background: var(--good-soft, #dcfce7); color: var(--good); }

/* The admin "what's next" card — first thing on Overview, one answer to
   "what do I actually do now" instead of making the organiser work it out
   from seven tabs. Its own tone set, deliberately not reusing
   .dispute-banner/.ok-banner, since those already carry their own
   pseudo-element badges built for a different job (a score-card banner). */
.next-step-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.next-step-card.tone-warn { background: #fffbeb; border: 1px solid #fde68a; }
.next-step-card.tone-action { background: var(--brand-soft); border: 1px solid #bfe0cd; }
.next-step-card.tone-good { background: var(--good-soft, #dcfce7); border: 1px solid #bbf0cf; }
.next-step-icon { font-size: 22px; flex: none; line-height: 1; }
.next-step-text { flex: 1; min-width: 0; }
.next-step-title { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 2px; color: var(--ink); }
.next-step-detail { font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.next-step-btn { width: auto !important; flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .next-step-card { flex-wrap: wrap; }
  .next-step-btn { width: 100% !important; order: 3; }
}
.locked-tag.no { background: #fef3c7; color: var(--warn); }
.locked-tag.live { background: var(--good-soft, #dcfce7); color: var(--good); }

/* ---------- Rules quick-reference (rules.html) ---------- */
.ruling-item { border-bottom: 1px solid var(--line); }
.ruling-item:last-child { border-bottom: none; }
.ruling-item .match-row { border-bottom: none; cursor: pointer; }
.ruling-item .chevron { font-weight: 800; color: var(--muted); font-size: 16px; }
.ruling-detail { display: none; padding: 0 12px 16px 14px; margin-top: -6px; }
.ruling-item.open .ruling-detail { display: block; }
.ruling-detail p { margin: 0; }
.ruling-detail .rule-ref {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-soft);
  padding: 3px 10px;
  border-radius: 999px;
}