/*
 * Application styles for korfcoach. Plain CSS served by Propshaft.
 */

:root {
  --bg: #0f1c2e;
  --panel: #16273f;
  --panel-2: #1e3350;
  --ink: #e8eef6;
  --muted: #9fb3c8;
  --line: #2b4565;
  --accent: #ff9f1c;
  --accent-ink: #1a1205;
  --ok: #3ddc97;
  --bad: #ff6b6b;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-md: 1.125rem;
  --font-lg: 1.375rem;
  --font-xl: 1.75rem;
  --font-2xl: 2.25rem;
  --line-tight: 1.2;
  --line-normal: 1.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(255, 159, 28, 0.35);

  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 280ms ease;

  /* Gender colors: deliberately distinct from --accent (orange) and from each other. The
     Unknown Player catch-all is not a 4th color — see .avatar--unknown below. */
  --gender-male: #2dd4bf;
  --gender-male-ink: #062623;
  --gender-female: #f4548c;
  --gender-female-ink: #2b0714;
  --gender-neutral: #a78bfa;
  --gender-neutral-ink: #1e1333;
  /* Tinted/translucent versions of the gender colors, for chip/button backgrounds where the
     full-saturation fill would be too heavy across a whole list. */
  --gender-male-bg: rgba(45, 212, 191, 0.14);
  --gender-female-bg: rgba(244, 84, 140, 0.14);
  --gender-neutral-bg: rgba(167, 139, 250, 0.14);

  /* Shot-type colours for the court-entry "Shot details" control. Kept distinct from the gender
     trio and from --ok/--bad so the shot dimension reads as its own signal: Open Play (the
     default) a calm blue, running-in a movement green, penalty an alert amber. */
  --shot-open: #4c9ef0;    --shot-open-ink: #04121f;
  --shot-running: #3ddc97; --shot-running-ink: #05240f;
  --shot-penalty: #ff9f1c; --shot-penalty-ink: #1a1205;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

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

.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: rgba(22, 39, 63, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.topnav .brand { font-weight: 700; font-size: var(--font-md); }
.topnav .brand a { color: var(--ink); }
.topnav nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.topnav nav a {
  color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.topnav nav a:hover { color: var(--ink); text-decoration: none; }
.topnav nav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.topnav .spacer { flex: 1; }
.topnav .who { color: var(--muted); font-size: var(--font-sm); }

main { max-width: 1100px; margin: 0 auto; padding: var(--space-5) var(--space-4); }

h1, h2, h3 { line-height: var(--line-tight); }
h1 { font-size: var(--font-xl); margin: 0 0 var(--space-4); }
h2 { font-size: var(--font-lg); margin: 0 0 var(--space-3); }
h3 { font-size: var(--font-md); margin: 0 0 var(--space-2); }

@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.flash {
  max-width: 1100px; margin: var(--space-3) auto 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  animation: flash-in var(--transition-base);
}
.flash--notice { background: rgba(61, 220, 151, 0.15); color: var(--ok); border: 1px solid rgba(61, 220, 151, 0.4); }
.flash--alert { background: rgba(255, 107, 107, 0.15); color: var(--bad); border: 1px solid rgba(255, 107, 107, 0.4); }

table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: var(--panel-2); }

.table-scroll { max-height: 70vh; overflow-y: auto; border-radius: var(--radius); }
.table-scroll table { border-radius: 0; }
.table-scroll thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

.btn, button, input[type="submit"] {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.95rem;
  /* Explicit so <button>s match <a class="btn"> links: a button's UA line-height is `normal`
     (~1.2) and doesn't inherit, which otherwise renders it a few px shorter than a sibling link. */
  line-height: 1.5;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover, button:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active, button:active { transform: none; box-shadow: none; }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}
.btn--primary, input[type="submit"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn--danger { color: var(--bad); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-4) 0; }

form .field { margin-bottom: var(--space-4); }
form label { display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--font-sm); }
form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="number"], form input[type="date"], form input[type="url"],
form input[type="datetime-local"], form select, form textarea {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
form .checkbox { display: flex; align-items: center; gap: var(--space-2); }
form .checkbox input { width: auto; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.card--clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); cursor: pointer; }
.errors { background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.4); color: var(--bad); padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); }

.badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: var(--font-xs); font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.badge--active { color: var(--ok); border-color: rgba(61, 220, 151, 0.5); }
.muted { color: var(--muted); }

.btn--small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
/* Icon-only square button (the ⋯ overflow toggle). Narrower than a text button; height still
   comes from the shared line-height so it matches its sibling buttons. */
.btn--icon { padding: 0.5rem 0.65rem; }
label.radio { margin-right: 1rem; color: var(--ink); }

/* --- Breadcrumb --- */
.breadcrumb { color: var(--muted); font-size: var(--font-sm); margin: 0 0 var(--space-2); }
.breadcrumb__sep { margin: 0 var(--space-2); color: var(--line); }

/* --- Generic dropdown menu (menu_controller.js) ---
   A toggle plus an absolutely-positioned panel. The trigger's wrapper owns the positioning
   context, so .menu opens off the toggle's right edge by default; add .menu__panel--up where a
   downward menu would be clipped. */
.menu { position: relative; }
.menu__panel {
  position: absolute; top: 100%; right: 0; z-index: 20; margin-top: var(--space-1);
  display: flex; flex-direction: column; gap: 2px; min-width: 12rem;
  padding: var(--space-1);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.menu__panel[hidden] { display: none; } /* flex would otherwise beat [hidden] */
.menu__panel--up { top: auto; bottom: 100%; margin: 0 0 var(--space-1); }
.menu__panel form { margin: 0; } /* button_to wraps each button in a form */
.menu__item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-weight: 600; color: var(--ink);
}
.menu__item:hover { background: var(--panel-2); border-color: transparent; transform: none; box-shadow: none; text-decoration: none; }
.menu__item--danger { color: var(--bad); }
.menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--line); }

/* --- Fixture header (fixtures#show) ---
   One card carrying the whole match identity: score, meta, the primary Enter events action, and
   the recording link. Actions dock right of the score and drop below it on narrow viewports. */
.fixture-head__bar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.fixture-head__score { margin: 0; font-size: var(--font-xl); }
.fixture-head__goals { color: var(--accent); white-space: nowrap; }
.fixture-head__meta { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-sm); }
.fixture-head__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.fixture-head__foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }

/* --- Event entry --- */
.entry__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.entry__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .entry__grid { grid-template-columns: 1fr; } }
/* On wide screens the page's 1100px cap leaves empty margins either side. Let the
   entry page spill into that space and funnel the extra width to the sidebar, so the
   video can grow while the court column stays pinned at its current ~700px — nothing
   in the main column shrinks and the video keeps its spot at the top of the sidebar. */
@media (min-width: 1200px) {
  main:has(.entry) { max-width: 1440px; }
  .entry__grid { grid-template-columns: minmax(0, 700px) 1fr; }
}
.entry__teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .entry__teams { grid-template-columns: 1fr; } }

.scoreboard { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.scoreboard p { margin: 0; }
.scoreboard__score { display: flex; gap: 1rem; align-items: baseline; font-size: 1.1rem; }
.scoreboard__score strong { font-size: 1.6rem; color: var(--accent); }
.scoreboard__attack { color: var(--accent); font-weight: 600; white-space: nowrap; }
.scoreboard__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.scoreboard__actions:not(:empty) { margin: calc(-1 * var(--space-1)) 0 var(--space-3); }

.match-clock { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.match-clock__readout { display: flex; align-items: baseline; gap: var(--space-3); }
.match-clock__label { color: var(--muted); font-size: 0.8rem; }
.match-clock__time { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
/* Clock actions + the help icon, docked right of the readout. */
.match-clock__side { display: flex; align-items: center; gap: var(--space-2); }
.match-clock__actions { position: relative; }
.match-clock__toggle::after { content: "▾"; margin-left: 0.4rem; }
/* Opens downward off the card's right edge; the match-clock card isn't overflow-clipped. */
.match-clock__menu {
  position: absolute; top: 100%; right: 0; z-index: 20; margin-top: var(--space-1);
  display: flex; flex-direction: column; gap: 2px; min-width: 12rem;
  padding: var(--space-1);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.match-clock__menu[hidden] { display: none; } /* flex would otherwise beat [hidden] */
.match-clock__menu form { margin: 0; } /* button_to wraps each button in a form */
.match-clock__item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-weight: 600;
}
.match-clock__item:hover { background: var(--panel-2); border-color: transparent; transform: none; box-shadow: none; }

.card--court { padding: 0; overflow: hidden; }
.card--court .court { border-radius: 0; }
.court-card__body { padding: var(--space-4) var(--space-5); }
.court {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  /* Floor colour and marking dimensions come from the court's geometry (CourtGeometry#css_vars,
     set inline on this element). The fallbacks reproduce the standard 40x20 court. */
  background: var(--court-floor, #1b5e20);
  background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  /* Line markings take the court's line colour (CourtGeometry sets --court-line; fallback white).
     color-mix keeps each marking's original opacity so the visual hierarchy survives a recolour. */
  border: 2px solid color-mix(in srgb, var(--court-line, #fff) 50%, transparent);
  border-radius: 6px;
  cursor: crosshair;
  overflow: hidden;
}
/* Non-attacking half — dimmed so the active attacking end stands out. Positioned via inline
   `left` (0 or 50%) from _court_shade; pointer-events:none keeps click-to-place working. */
.court__shade { position: absolute; top: 0; bottom: 0; width: 50%; background: rgba(0,0,0,0.32); pointer-events: none; z-index: 1; transition: left .15s ease; }
.court__centerline { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--court-line, #fff) 40%, transparent); z-index: 2; }
/* Penalty area — stadium 2.5 m around the post, the spot, and the line between them.
   Dimensions scale with the court (var fallbacks = standard 40x20); `left` is set inline. */
.court__penalty-area {
  position: absolute;
  width: var(--penalty-area-w, 18.75%); height: var(--penalty-area-h, 25%); top: var(--penalty-area-top, 37.5%);
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--court-line, #fff) 30%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--court-line, #fff) 4%, transparent); pointer-events: none;
}
/* Free-pass circle — radius 2.5 m centred on the penalty spot */
.court__freepass {
  position: absolute;
  width: var(--freepass-w, 12.5%); height: var(--freepass-h, 25%); top: 50%;
  transform: translate(-50%, -50%); box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--court-line, #fff) 40%, transparent); border-radius: 50%; pointer-events: none;
}
/* Penalty mark/spot — 2.5 m in front of the post */
.court__penalty-spot {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; top: 50%;
  background: color-mix(in srgb, var(--court-line, #fff) 70%, transparent); border-radius: 50%; pointer-events: none;
}
.court__korf {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 2;
  border: 3px solid #ffd54f; border-radius: 50%; background: rgba(0,0,0,0.2);
}
.court__marker {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; z-index: 3;
  background: var(--accent); border: 2px solid #fff; border-radius: 50%; pointer-events: none;
}
/* Hover readout — distance from the nearest korf, shown beside the pointer */
.court__hover {
  position: absolute; z-index: 4; padding: 1px 6px;
  font-size: 0.72rem; line-height: 1.5; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(0,0,0,0.6); border-radius: 4px;
  white-space: nowrap; pointer-events: none;
}

/* --- SVG court (courts/_diagram) ---
   The drill designer's court. Its viewBox is in metres, so every stroke width and radius below is
   a real distance (0.1 = 10 cm lines). Floor/line colours use the same custom properties as the
   CSS-span entry court so a court's colours apply to both diagrams. */
.court-svg { display: block; width: 100%; height: auto; border-radius: 6px; touch-action: none; user-select: none; }
/* A half-court view is square, so at full width it would stand twice as tall as the 2:1 full
   court. Half the width keeps it the same height, centred. */
.court-svg[data-court-view="left_half"], .court-svg[data-court-view="right_half"] { width: 50%; margin: 0 auto; }
.court-svg__floor { fill: var(--court-floor, #1b5e20); }
.court-svg__boundary { fill: rgba(255,255,255,0.08); stroke: color-mix(in srgb, var(--court-line, #fff) 50%, transparent); stroke-width: 0.1; }
.court-svg__centreline { stroke: color-mix(in srgb, var(--court-line, #fff) 40%, transparent); stroke-width: 0.1; }
.court-svg__penalty-area { fill: color-mix(in srgb, var(--court-line, #fff) 4%, transparent); stroke: color-mix(in srgb, var(--court-line, #fff) 30%, transparent); stroke-width: 0.1; }
.court-svg__freepass { fill: none; stroke: color-mix(in srgb, var(--court-line, #fff) 40%, transparent); stroke-width: 0.1; }
.court-svg__penalty-spot { fill: color-mix(in srgb, var(--court-line, #fff) 70%, transparent); }
.court-svg__korf { fill: rgba(0,0,0,0.2); stroke: #ffd54f; stroke-width: 0.15; }

/* --- Drill designer (drills/_designer, drill_designer_controller.js) --- */
.drill-design__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.drill-design__header .actions { margin: 0; }
.drill-designer { outline: none; }
.drill-designer:focus-visible .drill-designer__court { box-shadow: var(--shadow-focus); }
/* Toolbar layout must not depend on state (selection text, save status), or the court below
   would jump: two rows, each at least a button tall, and the status in a fixed-width slot. */
.drill-designer__toolbar { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.drill-designer__palette { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 2.25rem; }
.drill-designer__selection-row { display: flex; align-items: center; gap: var(--space-3); min-height: 2.25rem; }
.drill-designer__selection { flex: 1 1 auto; min-width: 0; font-size: var(--font-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drill-designer__object-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.drill-designer__object-actions .btn[disabled] { opacity: 0.45; cursor: default; }
.drill-designer__object-actions .btn[disabled]:hover { transform: none; box-shadow: none; border-color: var(--line); }
.drill-designer__status {
  flex: 0 0 auto; width: 11rem; max-width: 30vw; text-align: right; font-size: var(--font-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drill-designer__status.is-error { color: var(--bad); }
.drill-designer__court { margin-bottom: var(--space-3); }
.drill-designer__court .court-svg { border-radius: 0; }
/* Palette buttons carry a swatch of the object they place; the active one is the armed tool. */
.drill-tool { display: inline-flex; align-items: center; gap: var(--space-2); }
.drill-tool.is-active { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.drill-tool__swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); }
.drill-tool--player_red .drill-tool__swatch { background: #d32f2f; }
.drill-tool--player_blue .drill-tool__swatch { background: #1976d2; }
.drill-tool--ball .drill-tool__swatch { background: #f4d03f; }
.drill-tool--cone .drill-tool__swatch { background: #a78bfa; border-radius: 0; border: none; clip-path: polygon(evenodd, 50% 0, 100% 100%, 0 100%, 50% 0, 50% 40%, 30% 80%, 70% 80%, 50% 40%); }
.drill-tool--disc .drill-tool__swatch { background: #a78bfa; }
.drill-tool--bench .drill-tool__swatch { background: #8d6e63; border-radius: 2px; width: 1.2rem; height: 0.5rem; }
.drill-tool--post .drill-tool__swatch { background: rgba(0,0,0,0.3); border: 2px solid #ffd54f; }
.drill-tool--preset { margin-left: var(--space-2); }
.drill-tool--preset .drill-tool__swatch--red { background: #d32f2f; }
.drill-tool--preset .drill-tool__swatch--blue { background: #1976d2; margin-left: -0.35rem; }
.court-svg.is-placing { cursor: crosshair; }

/* Objects on the court. Sizes are metres (the viewBox unit); strokes stay thin at any zoom. */
.drill-object { cursor: grab; }
.drill-object.is-dragging { cursor: grabbing; }
.drill-designer--view .drill-object { cursor: default; }
.drill-object__body { stroke: #fff; stroke-width: 0.08; }
.drill-object__facing { stroke: #fff; stroke-width: 0.06; stroke-linejoin: round; }
.drill-object__label { fill: #fff; font-size: 0.57px; font-weight: 700; font-family: inherit; pointer-events: none; }
.drill-object__ball { fill: #f4d03f; stroke: #7a6a10; stroke-width: 0.04; }
.drill-object__ball-seams { fill: none; stroke: #3b3410; stroke-width: 0.035; stroke-linecap: round; }
/* Equipment in the app's purple (--gender-neutral), with a fine outline. */
.drill-object__cone { fill: #a78bfa; fill-rule: evenodd; stroke: #4c3a8f; stroke-width: 0.025; stroke-linejoin: round; }
.drill-object__disc { fill: #a78bfa; stroke: #4c3a8f; stroke-width: 0.025; }
.drill-object__bench { fill: #8d6e63; stroke: #3e2723; stroke-width: 0.05; }
/* Extra posts are drawn exactly like the court's own korfs (see .court-svg__korf); the extra
   specificity keeps the generic object outline above from overriding it. */
.drill-object .drill-object__post { fill: rgba(0,0,0,0.2); stroke: #ffd54f; stroke-width: 0.15; }
/* A gendered player shows B/G instead of its number, in the same white as the numbers — a tint
   read worse against the team colours. */
/* Any / Boy / Girl control in the selection row; the active option takes its gender colour. */
.drill-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }
.drill-filter input[type="search"] { max-width: 20rem; padding: var(--space-2) var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.drill-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-3); }
.drill-tag { text-decoration: none; }
.drill-tag:hover { border-color: var(--accent); color: var(--ink); }
.drill-tags-cell .badge { margin-right: var(--space-1); }
.drill-history { display: inline-flex; gap: var(--space-2); margin-left: var(--space-2); }
.drill-multiselect { margin-left: var(--space-2); white-space: nowrap; }
.drill-share__row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.drill-share__row form { margin: 0; }
.drill-share__link { flex: 1 1 20rem; min-width: 0; padding: var(--space-2) var(--space-3); background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--font-sm); }
.drill-share p { margin: var(--space-2) 0 0; font-size: var(--font-sm); }
.shared-drill__brand { align-self: flex-start; }
/* --- Guides (guides/*): a reading column with screenshots breaking out wider than the text. --- */
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-4); }
.guide-card { display: block; text-decoration: none; color: inherit; }
.guide-card h2 { margin: 0 0 var(--space-2); font-size: var(--font-md); }
.guide-card p { margin: 0; }
.guide { max-width: 58rem; margin: 0 auto; }
.guide__head { padding-bottom: var(--space-4); margin-bottom: var(--space-6); border-bottom: 2px solid var(--court-floor, #1b5e20); }
.guide__eyebrow { margin: 0 0 var(--space-2); font-size: var(--font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.guide__eyebrow a { color: inherit; }
.guide__head h1 { margin: 0 0 var(--space-2); text-wrap: balance; }
.guide__lede { margin: 0; max-width: 60ch; font-size: var(--font-md); color: var(--muted); }
.guide__toc { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-weight: 600; }
.guide__toc a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--line); }
.guide__toc a:hover, .guide__toc a:focus-visible { border-color: var(--accent); outline: none; }
.guide__section { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.guide__section-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline; }
.guide__step-no { font-size: 2.4rem; line-height: 1; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.guide__section h2 { margin: 0; text-wrap: balance; }
.guide__section h3 { margin: var(--space-2) 0 0; font-size: var(--font-md); }
.guide__section p, .guide__section li { max-width: 66ch; margin: 0; line-height: var(--line-normal); }
.guide__section ul, .guide__section ol { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--space-2); }
.guide__section li::marker { color: var(--ok); font-weight: 600; }
.guide__figure { margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.guide__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-top: 4px solid var(--ok); border-radius: var(--radius-sm); }
.guide__figure figcaption { font-size: var(--font-sm); color: var(--muted); }
.guide__callout { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--panel); border-left: 4px solid var(--ok); border-radius: 0 var(--radius) var(--radius) 0; }
.guide__callout-label { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ok); }
.guide__section--tips { border-top: 2px solid var(--court-floor, #1b5e20); padding-top: var(--space-4); }
.guide kbd { font-family: inherit; font-size: .85em; padding: 0 .35em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--bg); }
.guide__foot { display: flex; gap: var(--space-2); margin: 0; }

/* Training-session plan: an ordered list of drills/items with minutes and per-item actions. */
.session-plan { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.session-plan__item { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.session-plan__item:first-child { border-top: none; }
.session-plan__main { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.session-plan__number { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--muted); font-size: var(--font-sm); font-weight: 600; }
.session-plan__name { font-size: var(--font-base); }
.session-plan__meta { display: block; font-size: var(--font-sm); margin-top: var(--space-1); }
.session-plan__meta .badge { margin-left: var(--space-1); }
.session-plan__notes { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--font-sm); }
.session-plan__notes p { margin: 0; }
.session-plan__side { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.session-plan__minutes { min-width: 4rem; text-align: right; font-variant-numeric: tabular-nums; }
.session-plan__actions { display: inline-flex; gap: var(--space-1); }
.session-plan__actions form { margin: 0; }
.session-plan__actions .btn[disabled] { opacity: 0.4; cursor: default; }
.session-item-form { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.session-item-form h3 { margin: 0 0 var(--space-3); font-size: var(--font-base); }
.session-item-form__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); }
.session-item-form__row .field { margin-bottom: var(--space-3); }
@media (max-width: 700px) { .session-item-form__row { grid-template-columns: 1fr; } }
/* Touch: bigger targets for fingers where the pointer is coarse. */
@media (pointer: coarse) {
  .drill-arrow__handle { r: 0.5; }
  .drill-designer__palette .btn, .drill-designer__object-actions .btn { padding: 0.5rem 0.8rem; }
}
.drill-label { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted); font-size: var(--font-sm); }
.drill-label__input { width: 3.5rem; padding: 0.3rem 0.5rem; font-size: 0.85rem; text-align: center; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.drill-label__input[disabled] { opacity: 0.45; }
.drill-gender { display: inline-flex; }
.drill-gender__option { border-radius: 0; }
.drill-gender__option:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.drill-gender__option:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.drill-gender__option + .drill-gender__option { margin-left: -1px; }
.drill-gender__option.is-active { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.drill-gender__option--male.is-active { background: var(--gender-male); color: var(--gender-male-ink); border-color: var(--gender-male); }
.drill-gender__option--female.is-active { background: var(--gender-female); color: var(--gender-female-ink); border-color: var(--gender-female); }
.drill-object--selected .drill-object__body { stroke: var(--accent); stroke-width: 0.16; }
.drill-marquee { fill: rgba(255, 159, 28, 0.12); stroke: var(--accent); stroke-width: 0.08; stroke-dasharray: 0.3 0.2; pointer-events: none; }
.drill-arrow { stroke: rgba(255,255,255,0.8); stroke-width: 0.12; stroke-dasharray: 0.4 0.25; fill: none; }
.drill-arrow__head { fill: rgba(255,255,255,0.8); }
.drill-arrow__handle { fill: var(--accent); fill-opacity: 0.85; stroke: #fff; stroke-width: 0.06; cursor: grab; }
.drill-arrow__handle:hover { fill-opacity: 1; }
.drill-move { grid-column: 1 / -1; display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
.drill-move legend { padding: 0 var(--space-1); color: var(--muted); font-size: var(--font-sm); }
.drill-move.is-inactive { opacity: 0.5; }
.drill-move__field { display: flex; flex-direction: column; gap: var(--space-1); color: var(--muted); font-size: var(--font-sm); }
.drill-move__field input { width: 8rem; padding: var(--space-1) var(--space-2); background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.drill-move__hint { font-size: var(--font-sm); }

.drill-designer__controls { display: flex; flex-direction: column; gap: var(--space-3); }
.drill-steps { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.drill-steps__strip { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.drill-steps__chip { cursor: pointer; min-width: 2rem; text-align: center; padding: var(--space-1) var(--space-2); }
.drill-steps__chip[aria-current] { background: var(--panel-2, rgba(255,255,255,0.06)); }
.drill-steps__label { font-size: var(--font-sm); }
.drill-steps__add { font-weight: 700; min-width: 2rem; }
.drill-playback { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.drill-playback__option { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted); font-size: var(--font-sm); }
.drill-playback__option select { padding: var(--space-1) var(--space-2); background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.drill-step-editor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.drill-step-editor .field { margin: 0; }
.drill-step-editor .field > span { display: block; margin-bottom: var(--space-1); color: var(--muted); font-size: var(--font-sm); }
.drill-step-editor textarea, .drill-step-editor input[type="number"] {
  width: 100%; padding: var(--space-2) var(--space-3); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.drill-step-editor__actions { grid-column: 1 / -1; margin: 0; }
.drill-playback__export { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.drill-designer__hint { font-size: var(--font-sm); margin: 0; }
/* Print sheet: every step as a still. Two to a row; the court cards can't split across pages. */
.drill-print__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.drill-print__head h1 { margin-bottom: var(--space-1); }
.drill-print__description { max-width: 60ch; }
.drill-print__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.drill-print__step { break-inside: avoid; }
.drill-print__step h2 { font-size: var(--font-md); margin: 0 0 var(--space-2); }
.drill-print__step .drill-designer__court { margin-bottom: var(--space-2); }
.drill-print__step .court-svg { width: 100%; } /* a half court fills its card on the sheet */
.drill-print__note { margin: 0; font-size: var(--font-sm); }
@media (max-width: 800px) { .drill-print__steps { grid-template-columns: 1fr; } }
@media print {
  .drill-print__actions { display: none !important; }
  .print-layout { background: #fff; color: #000; }
  .print-layout .card { box-shadow: none; border: 1px solid #999; background: #fff; }
  .print-layout .muted, .print-layout .drill-print__note { color: #333; }
}
.drill-designer__hint kbd { font-family: inherit; padding: 0 0.3em; border: 1px solid var(--line); border-radius: 3px; }
.drill-designer__note { min-height: 1.5em; margin: 0; }
@media (max-width: 700px) { .drill-step-editor { grid-template-columns: 1fr; } }
@media print {
  .topnav, .flash, .drill-designer__toolbar, .drill-designer__controls, .actions, .drill-designer__hint { display: none !important; }
  .drill-designer__court { break-inside: avoid; box-shadow: none; border: none; }
}

.shot-panel { margin-top: 1rem; }
.shot-panel__row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.shot-panel__row .field { margin-bottom: 0.75rem; }

.event-feed { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
/* Each event is tight, wrapping inline text — it fills the sidebar width and wraps within it
   (like the original) but with smaller type, tight leading, and a corner delete to cut height. */
.event-row {
  position: relative;
  padding: 0.2rem 2.4rem 0.2rem 0.55rem; /* right pad clears the corner edit + delete */
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  font-size: 0.8rem; line-height: 1.4;
}
.event-row--home { border-left-color: var(--accent); }
.event-row--away { border-left-color: #58a6ff; }
.event-row__period {
  color: var(--muted); font-size: 0.68rem; text-transform: uppercase;
  font-variant-numeric: tabular-nums; margin-right: 0.15rem;
}
.event-row__clock {
  color: var(--muted); font-size: 0.68rem; font-variant-numeric: tabular-nums; margin-right: 0.3rem;
}
.event-row__desc { font-weight: 600; }
.event-row__desc--goal { color: var(--ok); }
.event-row__player { color: var(--muted); }
.event-row__player::before,
.event-row__detail::before { content: "· "; color: var(--line); }
.event-row__detail { color: var(--muted); }
/* Edit (✎) + delete (✕) tucked into the top-right corner, over the wrapping event text. */
.event-row__actions { position: absolute; top: 0.1rem; right: 0.15rem; display: inline-flex; align-items: center; gap: 0.05rem; line-height: 1; }
.event-row__delete-form { line-height: 1; } /* positioning now lives on .event-row__actions */
.event-row__edit, .event-row__delete {
  padding: 0 0.3rem; border: none; background: transparent; text-decoration: none;
  color: var(--muted); font-size: 0.78rem; line-height: 1.3; cursor: pointer;
  opacity: 0.35; transition: color var(--transition-fast), opacity var(--transition-fast);
}
.event-row:hover .event-row__edit, .event-row:hover .event-row__delete { opacity: 1; }
.event-row__edit:hover { color: var(--accent); border-color: transparent; transform: none; box-shadow: none; }
.event-row__delete:hover { color: var(--bad); border-color: transparent; transform: none; box-shadow: none; }

/* Collapsed, this card holds only the two buttons; drop the extra .actions margin
   so they aren't stranded in whitespace (the card's own padding is enough). */
.card--video .actions { margin: 0; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin-top: 0.5rem; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; }

.team-actions h4 { margin: 0 0 0.5rem; }
.substitution h4 { margin: 0 0 0.5rem; }

/* Single Substitute control at the bottom of the court card: a button that drops down a list of
   teams, each opening the substitution popover scoped to that team. */
.court-controls { position: relative; margin-top: var(--space-3); }
.court-controls__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.court-controls__actions form { margin: 0; } /* button_to wraps each button in a form */
.court-controls__toggle::after { content: "▾"; margin-left: 0.4rem; }
/* Opens upward: the trigger sits at the bottom of the court card, whose overflow is clipped, so a
   downward menu would be cut off. */
.court-controls__menu {
  position: absolute; bottom: 100%; left: 0; z-index: 20; margin-bottom: var(--space-1);
  display: flex; flex-direction: column; gap: 2px; min-width: 12rem;
  padding: var(--space-1);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.court-controls__menu[hidden] { display: none; } /* flex would otherwise beat [hidden] */
.court-controls__team {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-weight: 600;
}
.court-controls__team:hover:not([disabled]) { background: var(--panel-2); border-color: transparent; transform: none; box-shadow: none; }
.court-controls__team[disabled] { opacity: 0.4; cursor: default; }
/* Team label above the group in the substitution popover's "who comes off" step. */
.entry-flow__team { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.03em; margin: var(--space-1) 0 var(--space-2); }

.quick-team h4 { margin: 0 0 0.5rem; }
.quick-player { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--line); }
.quick-player .player-chip { flex: 1; min-width: 0; }
.key-hint { display: inline-block; margin-left: 0.25rem; padding: 0 0.3rem; border: 1px solid var(--line); border-radius: 4px; font-size: 0.7rem; color: var(--muted); }

/* --- Court entry flow (centered popover state machine) --- */
.entry-flow {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--ink);
  width: 100%;
  max-width: min(92vw, 30rem);
}
.entry-flow::backdrop { background: rgba(8, 15, 26, 0.66); }
.entry-flow__panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.entry-flow__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 1.25rem; }
.entry-flow__crumbs { font-size: var(--font-xs); min-height: 1em; }
.entry-flow__close {
  padding: 0.1rem 0.5rem; line-height: 1;
  background: transparent; border-color: transparent; color: var(--muted);
}
.entry-flow__close:hover { color: var(--ink); border-color: var(--line); transform: none; }
.entry-flow__prompt { font-size: var(--font-md); font-weight: 600; margin: var(--space-2) 0 var(--space-4); }
.entry-flow__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Player grid: boys column on the left, girls column on the right. */
.entry-flow__players { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: start; }
.entry-flow__col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
/* Narrower chips than the flat list — two columns halve the width, so trim the gap/padding
   to keep "#12 Ian Jones" on one line. */
.entry-flow__player { cursor: pointer; font-size: var(--font-sm); gap: var(--space-1); padding-right: var(--space-2); }
/* Fine line splitting a player step's primary roster from a secondary one (assist: attack division
   above, the scorer's own defence division below). Spans the full flex row. */
.entry-flow__divider { flex-basis: 100%; height: 0; border-top: 1px solid var(--line); margin: var(--space-1) 0; }
/* Heading above the first choice in a group (the turnover causes' Forced / Unforced split). Spans
   the full flex row so the buttons below it wrap underneath as their own band. */
.entry-flow__group {
  flex-basis: 100%; margin-top: var(--space-2); font-size: var(--font-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.entry-flow__group:first-child { margin-top: 0; }
.entry-flow__action { flex: 1 1 8rem; padding: var(--space-3) var(--space-4); font-weight: 600; }
.entry-flow__outcome { font-size: var(--font-base); }
/* "Defended" modifier: full-width toggle under the outcomes, filled when active. */
.entry-flow__defended-btn { flex-basis: 100%; background: transparent; color: var(--muted); }
.entry-flow__defended-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.entry-flow__mods {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line);
}
/* `display: flex` would otherwise beat the [hidden] UA rule; keep it hidden for transitions. */
.entry-flow__mods[hidden] { display: none; }
.entry-flow__mods-label { font-size: var(--font-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* Shot type: an icon sits left of the label inside each segment. */
.entry-flow__mods .segmented__option label { display: inline-flex; align-items: center; gap: 0.3rem; }
.entry-flow__mods .segmented__option .icon { flex-shrink: 0; }
/* Selected shot-type: each option fills with its own colour, so the active choice is obvious AND
   the three types stay distinguishable at a glance (see the :root --shot-* colours). */
.entry-flow__mods .segmented__option--shot-open input:checked + label    { background: var(--shot-open);    color: var(--shot-open-ink); }
.entry-flow__mods .segmented__option--shot-running input:checked + label { background: var(--shot-running); color: var(--shot-running-ink); }
.entry-flow__mods .segmented__option--shot-penalty input:checked + label { background: var(--shot-penalty); color: var(--shot-penalty-ink); }
.entry-flow__foot { margin-top: var(--space-4); }
.entry-flow__foot .btn[disabled] { opacity: 0.4; cursor: default; }

/* Quick-edit dialog: reuses the .entry-flow modal chrome with a compact stacked form. */
.entry-flow--edit { max-width: min(92vw, 24rem); }
.event-edit-form { margin-top: var(--space-3); }
.event-edit-form .field { margin-bottom: var(--space-3); }
.event-edit-form select { max-width: none; }
.event-edit-form__flags { border: none; padding: 0; margin-bottom: var(--space-3); }
.event-edit-form__flags legend { padding: 0; color: var(--muted); font-size: var(--font-sm); margin-bottom: var(--space-1); }
.event-edit-form__flags .checkbox { margin-bottom: var(--space-1); }
.event-edit-form__foot { display: flex; gap: var(--space-2); align-items: center; }

/* --- Reports --- */
.bar-row { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0; }
.bar-row__label { width: 5rem; color: var(--muted); }
.bar-row__value { width: 9rem; color: var(--muted); font-size: 0.9rem; }
.bar { flex: 1; height: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--accent); }

/* --- Player identity avatar ---
   Encodes gender by color (fill + inset ring) AND a redundant corner glyph + accessible
   title/aria-label, so the signal never relies on color alone. The Unknown Player catch-all
   gets a dashed ring + forced "?" instead of the solid gender ring, so it stays visually
   distinct from a real named player who merely has gender=neutral. */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  background: var(--panel-2);
}
.avatar__inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; }

.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--font-xs); }
.avatar--md { width: 2.5rem; height: 2.5rem; font-size: var(--font-sm); }
.avatar--lg { width: 4rem; height: 4rem; font-size: var(--font-md); }

.avatar--male .avatar__inner    { background: var(--gender-male);    color: var(--gender-male-ink); }
.avatar--female .avatar__inner  { background: var(--gender-female);  color: var(--gender-female-ink); }
.avatar--neutral .avatar__inner { background: var(--gender-neutral); color: var(--gender-neutral-ink); }
.avatar--male    { box-shadow: 0 0 0 2px var(--gender-male) inset; }
.avatar--female  { box-shadow: 0 0 0 2px var(--gender-female) inset; }
.avatar--neutral { box-shadow: 0 0 0 2px var(--gender-neutral) inset; }

.avatar__sex {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 1.1em; height: 1.1em;
  min-width: 14px; min-height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55em;
  font-weight: 800;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--panel);
  color: var(--ink);
}
.avatar--sm .avatar__sex { font-size: 0.5em; }

.avatar--unknown { box-shadow: none; border: 2px dashed var(--muted); }
.avatar--unknown .avatar__inner { background: var(--panel-2); color: var(--muted); }
.avatar--unknown .avatar__glyph { font-size: 1.1em; }

/* --- Segmented control (CSS-only radio group, used for the gender field) --- */
.segmented { display: inline-flex; border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--line); }
.segmented__option { position: relative; }
.segmented__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented__option label {
  display: inline-block; margin: 0; padding: 0.45rem 1rem;
  font-size: var(--font-sm); color: var(--muted); cursor: pointer;
  background: var(--panel); border-right: 1px solid var(--line);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.segmented__option:last-child label { border-right: none; }
.segmented__option input:checked + label { color: var(--ink); font-weight: 600; }
.segmented__option--male input:checked + label    { background: var(--gender-male);    color: var(--gender-male-ink); }
.segmented__option--female input:checked + label  { background: var(--gender-female);  color: var(--gender-female-ink); }
.segmented__option--neutral input:checked + label { background: var(--gender-neutral); color: var(--gender-neutral-ink); }
.segmented__option input:focus-visible + label { box-shadow: var(--shadow-focus); position: relative; z-index: 1; }

/* --- Pagination (Kaminari default markup: nav.pagination > span.first/.prev/.page/.next/.last) --- */
.pagination {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-4) 0;
}
.pagination span { display: inline-flex; }
.pagination a, .pagination span.current, .pagination span.gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink); font-size: var(--font-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.pagination a:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.pagination span.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pagination span.gap { border-style: dashed; color: var(--muted); background: transparent; }

/* --- Player roster (club/team show pages) ---
   Gender groups lay out as side-by-side columns when there's room, collapsing to a single
   stacked column on narrow viewports — auto-fit/minmax handles this without breakpoints,
   which matters here since the number of groups varies (2 or 3, depending on whether any
   neutral-gender players are present). */
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); align-items: start; }
.roster__group h3 { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 0.03em; }
.roster__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* Player chip: a stylised button-like link, colored by gender so it's recognisable even before
   reading the name. Tinted (not full-saturation) background keeps a list of many chips legible;
   the avatar inside still carries the full-strength gender color. */
.player-chip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.player-chip:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.player-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.player-chip--male    { border-color: var(--gender-male);    background: var(--gender-male-bg); }
.player-chip--female  { border-color: var(--gender-female);  background: var(--gender-female-bg); }
.player-chip--neutral { border-color: var(--gender-neutral); background: var(--gender-neutral-bg); }
.player-chip--unknown { border-style: dashed; }

/* --- Teams table (clubs show page) — per-team roster breakdown by gender. --- */
.teams-table td { vertical-align: middle; }
.teams-table__squad { white-space: nowrap; }
.teams-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.teams-table__actions { white-space: nowrap; text-align: right; }
.teams-table__actions a + a { margin-left: var(--space-2); }

/* Inline SVG icon (see IconHelper). Sizes with the surrounding text by default. */
.icon { vertical-align: -0.125em; }

/* Small icon + label button used for row actions (Fixtures / Edit). */
.action-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--muted); font-size: var(--font-sm); font-weight: 600;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.action-link:hover { text-decoration: none; color: var(--accent); background: var(--panel-2); border-color: var(--line); }
.action-link .icon { width: 1rem; height: 1rem; flex: none; }

/* Small gender-tinted count pill (number only), reusing the shared gender palette. */
.gender-count {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-size: var(--font-xs); font-weight: 600;
}
.gender-count + .gender-count { margin-left: var(--space-1); }
.gender-count--male    { border-color: var(--gender-male);    background: var(--gender-male-bg); }
.gender-count--female  { border-color: var(--gender-female);  background: var(--gender-female-bg); }
.gender-count--neutral { border-color: var(--gender-neutral); background: var(--gender-neutral-bg); }

/* --- Roster manager (drag-and-drop team assignment + team reorder) --- */
.roster-manager__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.roster-manager__column {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.roster-manager__column-header {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.roster-manager__handle {
  cursor: grab;
  color: var(--muted);
  font-size: var(--font-md);
  line-height: 1;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  user-select: none;
}
.roster-manager__handle:hover { color: var(--ink); background: var(--panel-2); }
.roster-manager__handle:active { cursor: grabbing; }
.roster-manager__player-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 2.5rem; /* keeps empty columns droppable */
}

/* Drag states — subtle: dashed outline + slight scale/opacity on the dragged element,
   accent-colored highlight on a valid drop target. Matches the restrained visual language
   already used for focus/hover states elsewhere (.btn:hover, .card--clickable:hover). */
.is-dragging {
  opacity: 0.5;
  transform: scale(0.97);
}
.player-chip.is-dragging {
  border-style: dashed;
}
.roster-manager__column.is-dragging {
  border-style: dashed;
}
.roster-manager__column.is-drag-over,
.roster-manager__column--unassigned.is-drag-over {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.player-chip[draggable="true"] { cursor: grab; }
.player-chip[draggable="true"]:active { cursor: grabbing; }

/* --- Team roster editor (team show page) — name/remove players for one team via search +
   click, or by dragging chips between the roster and the available-players pool. Two bordered
   zones side by side, collapsing to a stacked column on narrow viewports. --- */
.team-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.team-roster__zone {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.team-roster__zone.is-drag-over {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.team-roster__zone h2 { margin-top: 0; }
.team-roster__search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.team-roster__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 2.5rem; /* keeps an empty zone droppable */
}
.team-roster__empty { color: var(--muted); font-size: var(--font-sm); padding: var(--space-2); }
.team-roster__list:has(.player-chip:not(.hidden)) .team-roster__empty { display: none; }

/* The ＋/✕ affordance on each chip, and the "currently 2s" note on a player named elsewhere. */
.player-chip__action {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg); color: var(--muted);
  font-size: var(--font-sm); line-height: 1; cursor: pointer;
}
.player-chip__action:hover { color: var(--ink); border-color: var(--accent); }
.player-chip__badge {
  margin-left: var(--space-1);
  color: var(--muted); font-size: var(--font-xs); font-weight: 500; white-space: nowrap;
}

.player-chip.hidden { display: none; }

/* --- Fixture squad picker (fixtures show page) — drag players from a searchable, grouped pool
   (named-to-this-team, then rest of the club) into Attack / Defence / Bench lanes. Two columns
   (pool | squad) collapsing to a stack on narrow viewports; reuses the shared .player-chip and the
   .is-dragging / .is-drag-over drag states. --- */
.fixture-squad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.fixture-squad__zone,
.fixture-squad__lane {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fixture-squad__zone.is-drag-over,
.fixture-squad__lane.is-drag-over {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.fixture-squad__zone h4,
.fixture-squad__lane h4 { margin: 0 0 var(--space-2); }
.fixture-squad__search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fixture-squad__group {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--muted); font-size: var(--font-sm);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.fixture-squad__squad { display: flex; flex-direction: column; gap: var(--space-3); }
.fixture-squad__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-2);
  min-height: 2.5rem; /* keeps an empty list droppable */
}
.fixture-squad__zone .fixture-squad__list { flex-direction: column; }
.fixture-squad__lane .fixture-squad__list { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
.fixture-squad__empty { color: var(--muted); font-size: var(--font-sm); padding: var(--space-2); }
.fixture-squad__list:has(.player-chip:not(.hidden)) .fixture-squad__empty { display: none; }
/* The pinned Unknown Player: shown in the squad but not draggable/removable. */
.fixture-squad__pinned { margin-top: var(--space-3); cursor: default; }

/* --- Help icons & popovers (help_popover_controller.js, HelpHelper#help_icon) ---
   A quiet inline "?" disclosing a short explanation. Same anchoring trick as .menu; sits above
   the z-index:20 dropdowns so an open popover isn't cut by a neighbouring menu. */
.help { position: relative; display: inline-flex; vertical-align: middle; }
.help__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; line-height: 1;
  background: transparent; border: none; border-radius: 50%;
  color: var(--muted); cursor: help;
}
.help__toggle:hover, .help__toggle[aria-expanded="true"] {
  color: var(--accent); background: transparent; border-color: transparent;
  transform: none; box-shadow: none;
}
.help__toggle:focus-visible { box-shadow: var(--shadow-focus); }
/* The panel and its title/body are <span>s styled as blocks — phrasing content, so a help icon
   can legally sit inside a <p> or heading (see HelpHelper#help_icon). */
.help__panel {
  display: block;
  position: absolute; top: 100%; left: 0; z-index: 30; margin-top: var(--space-1);
  width: max-content; max-width: min(18rem, calc(100vw - 2rem));
  padding: var(--space-3);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-sm); font-weight: 400; line-height: var(--line-normal); text-align: left;
  white-space: normal;
}
.help__panel[hidden] { display: none; }
/* Right-anchored, for icons near the viewport's right edge (the sidebar cards). */
.help__panel--left { left: auto; right: 0; }
/* Opens upward, for icons at the bottom of the overflow-clipped court card. */
.help__panel--up { top: auto; bottom: 100%; margin: 0 0 var(--space-1); }
.help__title { display: block; margin: 0 0 var(--space-1); font-weight: 600; color: var(--ink); }
.help__body { display: block; margin: 0; color: var(--muted); }
.help__more {
  margin-top: var(--space-2); padding: 0; line-height: inherit;
  background: transparent; border: none;
  color: var(--accent); font-size: var(--font-xs); font-weight: 600; cursor: pointer;
}
.help__more:hover { text-decoration: underline; border-color: transparent; transform: none; box-shadow: none; }
/* "Learn more" opens the page's help drawer, so only show it where one exists — shared partials
   (scoreboard, video, match clock) also render on quick entry, which has no drawer yet. */
.help__more { display: none; }
[data-controller~="help-drawer"] .help__more { display: inline-block; }
/* Narrow screens: the single-column layout puts icons hard against both edges, so anchored
   panels overflow whichever way they open. A fixed bottom sheet always fits (position:fixed
   also escapes the court card's overflow clipping — no ancestor creates a containing block). */
@media (max-width: 700px) {
  .help__panel, .help__panel--left, .help__panel--up {
    position: fixed; top: auto; bottom: var(--space-3); left: var(--space-3); right: var(--space-3);
    width: auto; max-width: none; margin: 0;
  }
}

/* Always-visible nudge above the court controls pointing new users at the click-to-log flow. */
.court-hint { margin: 0 0 var(--space-3); font-size: var(--font-sm); }

/* --- Help drawer (help_drawer_controller.js, entry/_help_drawer) ---
   A fixed right-side panel of long-form help. Non-modal by design — no backdrop, so the court
   stays clickable while reading. Above the popovers/menus; the native <dialog> entry flows
   render in the browser's top layer and so always win, which is correct. */
.help-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 40;
  width: min(26rem, 100%);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow-y: auto; overscroll-behavior: contain;
}
.help-drawer[hidden] { display: none; }
.help-drawer__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.help-drawer__title { margin: 0; font-size: var(--font-md); }
.help-drawer__title:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.help-drawer__close {
  padding: 0.1rem 0.5rem; line-height: 1;
  background: transparent; border-color: transparent; color: var(--muted);
}
.help-drawer__close:hover { color: var(--ink); border-color: var(--line); transform: none; }
.help-drawer__body { padding: var(--space-4) var(--space-5) var(--space-6); }
.help-drawer__intro { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--font-sm); }
.help-drawer__section {
  padding: var(--space-4) 0; border-top: 1px solid var(--line);
  scroll-margin-top: var(--space-8); /* clears the sticky head when scrolled to */
  font-size: var(--font-sm);
}
.help-drawer__section h3 { font-size: var(--font-base); margin: 0 0 var(--space-2); }
.help-drawer__section p { margin: 0 0 var(--space-2); color: var(--muted); }
.help-drawer__section p:last-child { margin-bottom: 0; }
.help-drawer__section ul { margin: 0 0 var(--space-2); padding-left: 1.2rem; color: var(--muted); }
.help-drawer__section li { margin-bottom: var(--space-1); }
.help-drawer__section strong, .help-drawer__section em { color: var(--ink); }
/* Brief highlight when "Learn more" jumps to a section. */
@keyframes help-flash {
  from { background: rgba(255, 159, 28, 0.16); }
  to { background: transparent; }
}
.help-drawer__section.is-flash { animation: help-flash 1.2s ease-out; }
.help-drawer__guide-link { display: block; margin-top: var(--space-2); font-weight: 600; }
.help-drawer kbd { font-family: inherit; font-size: 0.85em; padding: 0 0.35em; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--bg); }
.help-drawer__keys { width: 100%; border-collapse: collapse; font-size: var(--font-sm); color: var(--muted); }
.help-drawer__keys td { padding: var(--space-1) var(--space-2) var(--space-1) 0; vertical-align: top; border: none; }
.help-drawer__keys td:first-child { white-space: nowrap; }

/* --- Audit trail (/activity, /versions) and the users page presence columns --- */
.audit-subnav { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.audit-subnav a { padding: var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); text-decoration: none; }
.audit-subnav a.active { color: var(--ink); border-color: var(--accent); }
.audit-filter input, .audit-filter select { width: auto; max-width: 16rem; padding: var(--space-2) var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.audit-filter .audit-filter__short { max-width: 7rem; }
.table-scroll { overflow-x: auto; }
.audit-table td { vertical-align: top; font-size: var(--font-sm); }
.audit-table code { font-size: var(--font-xs); }
.audit-path { word-break: break-all; max-width: 18rem; }
.audit-changes ul { margin: 0; padding-left: 1rem; }
.audit-changes li { word-break: break-word; }
.audit-params-row td { padding-top: 0; border-bottom: 1px solid var(--line); }
.audit-params summary { cursor: pointer; font-size: var(--font-xs); }
.audit-params pre { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); background: var(--bg); border-radius: var(--radius); font-size: var(--font-xs); max-height: 20rem; overflow: auto; }
.nowrap { white-space: nowrap; }
td .inline-form { display: inline; }