/* ==========================================================================
   West Kirby United FC
   One stylesheet, no build step, no JavaScript.
   Palette is taken from the club crest: orange, black, white.
   ========================================================================== */

:root {
  --ink:        #14110f;   /* warm near-black — body text, dark surfaces */
  --charcoal:   #221d1a;
  --slate:      #5c554f;   /* secondary text */
  --faint:      #8b837c;
  --paper:      #ffffff;
  --ground:     #f5f3f0;   /* warm off-white page ground */
  --line:       #e2ddd7;

  --orange:     #ff6020;   /* crest orange — large areas, dark grounds */
  --orange-ink: #c8430c;   /* darkened for text/links on white (AA contrast) */
  --orange-dim: #ffe9df;

  --ok:         #1f6b45;
  --ok-bg:      #e5f2eb;
  --warn-bg:    #fdefe3;

  --wrap:       1120px;
  --measure:    68ch;
  --radius:     4px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow: 0 1px 2px rgba(20, 17, 15, .06), 0 8px 24px rgba(20, 17, 15, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--orange-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- header --- */

.site-header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--orange);
}

/* The header is sticky, so an in-page anchor otherwise scrolls its target
   underneath it and the heading you jumped to is the one thing you cannot
   see. 79px is the bar's min-height plus its border, and a little air. */
:target { scroll-margin-top: 96px; }

.site-header .bar {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
  padding: 8px 0;
}
.brand-mark { width: 42px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.brand-text span {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-button { display: none; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 12px 12px;
  border-radius: var(--radius);
}
.site-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.site-nav a[aria-current="page"] { color: var(--orange); }

.site-nav .has-sub { position: relative; }

.site-nav .sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  display: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}
.site-nav .has-sub:hover > .sub,
.site-nav .has-sub:focus-within > .sub { display: flex; }

.site-nav .sub a {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 15px;
  padding: 9px 12px;
}

/* -------------------------------------------------------------- headings -- */

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(23px, 3vw, 31px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 17px; font-weight: 700; letter-spacing: 0; }

/* ------------------------------------------------------------- page head -- */

.page-head {
  background: var(--ink);
  color: #fff;
  padding: 52px 0 46px;
}
.page-head h1 { color: #fff; }
.page-head .lede {
  color: #d9d2cb;
  font-size: 19px;
  max-width: 60ch;
  margin: 14px 0 0;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero picture, .hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero .inner {
  position: relative;
  padding-top: 96px;
  padding-bottom: 96px;
  max-width: var(--wrap);
}
.hero .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.hero h1 { font-size: clamp(34px, 6vw, 60px); max-width: 16ch; }
.hero p.lede {
  font-size: 20px;
  max-width: 52ch;
  margin: 20px 0 0;
  color: #e6e0da;
}
.hero .actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 24px;
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: #ff7740; border-color: #ff7740; color: var(--ink); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-light:hover { background: var(--orange); border-color: var(--orange); }

/* -------------------------------------------------------------- sections -- */

section.band { padding: 68px 0; }
section.band.tint { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { margin-bottom: 32px; max-width: var(--measure); }
.section-head p { color: var(--slate); margin: 10px 0 0; }

.eyebrow-dark {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 8px;
}

/* ----------------------------------------------------------------- prose -- */

.prose { max-width: var(--measure); }
/* The reset goes first and through :where(), so the spacing rule below wins.
   A plain .prose p outranks .prose > * + * and zeroed every paragraph gap. */
.prose :where(p, ul, ol) { margin: 0; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 42px; }
.prose h3 { margin-top: 30px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 7px; }
.prose img { border-radius: var(--radius); margin: 28px 0; }
.prose strong { font-weight: 700; }

.prose-wide { max-width: 100%; }

.page-body { padding: 56px 0 72px; }

/* ----------------------------------------------------------------- cards -- */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* An event poster's headline is at the top, and a centred crop cut through
   the middle of it. */
.card img.poster { object-position: top; }
.card .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card h2, .card h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--orange-ink); }
.card p { margin: 0; color: var(--slate); font-size: 16px; }
.card .meta, .prose .meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.card .more { margin-top: auto; font-weight: 700; font-size: 15px; }

/* Age-group / link tiles */
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
}
.tile:hover { border-color: var(--orange); box-shadow: var(--shadow); color: var(--ink); }

/* A few facts under a tile, so an age group can be placed at a glance rather
   than by opening it. Label above value, because the values are sentences. */
.tile-facts { margin: 4px 0 0; font-size: 14px; }
.tile-facts dt {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 8px;
}
.tile-facts dd { margin: 1px 0 0; color: var(--slate); }
.tile .more { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 15px; color: var(--orange-ink); }
.tile h3 { margin: 0; }
.tile p { margin: 0; color: var(--slate); font-size: 16px; }

/* ------------------------------------------------------------ definition -- */

.facts {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 0 0 32px;
  max-width: var(--measure);
}
/* Nested in a callout, the callout already provides the box. */
.callout .facts { background: none; border: 0; padding: 0; margin: 14px 0 4px; }
/* And on a DBS application, so does the card. */
.dbs-card .facts { background: none; border: 0; padding: 0; margin: 0; }
.dbs-card .admin-card-head { margin-bottom: 18px; }
.dbs-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

.facts dl { margin: 0; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 20px; }
.facts dt { font-weight: 700; color: var(--slate); font-size: 15px; }
.facts dd { margin: 0; }

/* ---------------------------------------------------------------- venues -- */

.venues { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.venue {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.venue .body { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.venue h3 { margin: 0; font-size: 18px; }
.venue .postcode {
  font-weight: 700;
  color: var(--orange-ink);
  letter-spacing: 0.04em;
}
.venue .pitches { color: var(--slate); font-size: 15px; }
.venue .keeper { font-size: 13px; color: var(--faint); }
.venue .map { margin-top: auto; padding: 0 22px 20px; }

/* ------------------------------------------------------------- documents -- */

.doclist { list-style: none; margin: 0; padding: 0; max-width: 780px; }
.doclist li { border-bottom: 1px solid var(--line); }
.doclist li:first-child { border-top: 1px solid var(--line); }
.doclist a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 4px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.doclist a:hover { color: var(--orange-ink); }
.doclist .type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--slate);
  padding: 3px 7px;
  border-radius: 3px;
  flex: none;
}
.doclist .size { margin-left: auto; font-size: 13px; color: var(--faint); font-weight: 500; flex: none; }

/* --------------------------------------------------------------- gallery -- */

.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---------------------------------------------------------------- tables -- */

/* position: relative so a visually-hidden header label, which is absolutely
   positioned, is clipped by the scroller instead of widening the whole page. */
.table-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.table-scroll.is-past { opacity: .7; }
.list-heading { margin-bottom: 12px; }

/* A closure on a phone: the date and Reopen on one line, then what and why. */
@media (max-width: 620px) {
  .closure-table thead { display: none; }
  .closure-table table, .closure-table tbody { display: block; }
  .closure-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .closure-table tr:last-child { border-bottom: 0; }
  .closure-table th, .closure-table td { padding: 0; border: 0; background: none; }
  .closure-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .closure-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 14px; color: var(--slate); }
  .closure-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
}

table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody th { font-weight: 700; white-space: nowrap; background: var(--ground); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The training rota is a wide grid - up to seven columns - so it takes tighter
   cells than a normal table, and lets its headings wrap rather than forcing a
   very long sideways scroll on a phone. */
table.rota { font-size: 14px; }
table.rota th,
table.rota td { padding: 8px 10px; }
table.rota thead th { white-space: normal; min-width: 84px; }
table.rota tbody td { white-space: nowrap; }

/* The rota sat inside the 68ch reading column, so on a laptop three of its
   four grids scrolled sideways with half the screen empty beside them. The
   column is left-aligned, so a wide table can run on to the right as far as
   the page's own edge. */
.prose > .table-wide { width: max-content; max-width: calc(min(var(--wrap), 100vw) - 48px); }
@media (max-width: 900px) {
  .prose > .table-wide { max-width: 100%; }
}

/* On a phone the grid still has to scroll, so the day stays put while the
   zones move under it. */
table.rota tbody th,
table.rota thead th:first-child { position: sticky; left: 0; z-index: 1; }
table.rota tbody th { box-shadow: 1px 0 0 var(--line); }

/* A free zone reads as a dash rather than as an empty cell, so a blank row is
   obviously "nobody is on it" and not "the table failed to load". */
table.rota td.free::before {
  content: "\2013";
  color: var(--faint);
}

/* ----------------------------------------------------------------- forms -- */

.form { max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.form .field { display: flex; flex-direction: column; gap: 6px; }
.form label { font-weight: 700; font-size: 15px; }
.form .hint { font-size: 14px; color: var(--slate); font-weight: 400; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="file"],
.form select,
.form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
}
.form textarea { min-height: 190px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--orange);
  outline: none;
}
.form .row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }

/* Inputs sit on a common baseline across a row even when only one of the pair
   carries a hint, so a hint does not knock its own field out of line. */
.form .row .field > :is(input, select, textarea) { margin-top: auto; }

/* A short textarea for a field that is a sentence, not a message. */
.form textarea.short { min-height: 96px; }
/* The honeypot. Scoped to .form it stayed visible on any form built without
   that class, which is how a "Leave this field empty" box ended up on the page
   asking coaches for their date of birth. Hide it wherever it appears. */
.hp { position: absolute; left: -9999px; }
.form button { align-self: flex-start; }

.notice {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 28px;
  max-width: 620px;
  border-left: 4px solid;
}
.notice.good { background: var(--ok-bg); border-color: var(--ok); }
.notice.bad  { background: var(--warn-bg); border-color: var(--orange-ink); }
.notice p { margin: 0; }
.notice ul { margin: 8px 0 0; padding-left: 20px; }

.callout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 28px 0;
  max-width: var(--measure);
}
.callout > * + * { margin-top: 14px; }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: 8px; }

/* --- permissions --------------------------------------------------------- */

/* The tick boxes. Each one is a real target the whole width of the row, so it
   can be hit on a phone, and each says what it actually allows - "DBS
   applications" means nothing to a new committee member on its own. */
.checks {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
  background: var(--paper);
}
.checks legend { font-weight: 700; font-size: 14px; padding: 0 6px; }

/* In the inline "add someone" row the tick boxes are not another field to sit
   alongside the others - they take the full width below them. */
.form-inline .checks { flex-basis: 100%; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.check input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--orange); }
.check .hint { display: block; font-weight: 400; font-size: 13px; color: var(--slate); }
.checks > .hint { margin: 0; font-size: 13px; color: var(--slate); }

/* --- people ------------------------------------------------------------- */

/* One row per person, and the whole row opens their editor. This replaced a
   nine-column table that scrolled sideways on a laptop and opened its editor
   inside the last cell, so the form was squeezed into 300px off-screen. Now
   the editor opens underneath at full width. */
.people-intro { margin: 0 0 26px; color: var(--slate); }
.people-intro a { font-weight: 700; margin-left: 6px; }

.people-group { margin-bottom: 34px; }
.people-group h2 {
  font-size: 20px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.people-group h2 .quiet { font-weight: 400; font-size: 16px; margin-left: 4px; }

.person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
}
.person:first-of-type { border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.person:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.person:only-of-type { border-radius: var(--radius); }
.people-group.is-off .person > summary { opacity: .6; }

.person > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 2.5fr) 24px;
  gap: 6px 22px;
  align-items: start;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--slate);
}
.person > summary::-webkit-details-marker { display: none; }
.person > summary:hover { background: #fbfaf8; }
.person > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.person[open] > summary { background: var(--ground); border-bottom: 1px solid var(--line); }

.person-name { font-weight: 700; font-size: 16px; color: var(--ink); margin-right: 6px; }
.person-who .badge { margin-right: 4px; }
.person[open] .person-who .badge-coach { background: var(--paper); }
.person-line { display: block; overflow-wrap: anywhere; }
.person-label {
  display: inline-block;
  min-width: 74px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.person-reach .person-line + .person-line { margin-top: 3px; }
.person-reach .nowrap { white-space: nowrap; }
.person-use { font-size: 13px; text-align: right; }

/* A chevron that turns when the row is open, drawn with borders so there is
   no icon to load. */
.row-toggle { align-self: center; justify-self: end; }
.row-toggle::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--orange-ink);
  border-bottom: 2px solid var(--orange-ink);
  transform: rotate(45deg);
  margin-top: -5px;
}
.person[open] .row-toggle::before,
.venue-panel[open] .row-toggle::before { transform: rotate(-135deg); margin-top: 5px; }

.person-edit { padding: 18px; }
.person-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 18px;
}
.person-details .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.person-details label { font-weight: 700; font-size: 14px; }
.person-details input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: #fff;
}
.person-details input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.person-details-note { margin: 8px 0 18px; font-size: 13px; color: var(--slate); }
.person-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 18px;
  align-items: start;
}
.person-account { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .person > summary { grid-template-columns: minmax(0, 1fr) 24px; }
  .person-who   { grid-column: 1; grid-row: 1; }
  .row-toggle { grid-column: 2; grid-row: 1; align-self: start; margin-top: 10px; }
  .person-reach, .person-use { grid-column: 1; }
  .person-use { text-align: left; }
  .person-use .person-line { display: inline; }
  .person-use .person-line + .person-line::before { content: " · "; }
  .person-edit { padding: 14px; }
}


/* --- audit log ----------------------------------------------------------- */

/* This is log data, not prose. It was set at body size with each field on its
   own line, which gave a single event 130px of height and left half the width
   empty. Four columns instead: when, what, who, and the detail. */
.auditlist { list-style: none; margin: 20px 0 0; padding: 0; font-size: 14px; }
.auditlist > li {
  display: grid;
  grid-template-columns: 150px 185px 175px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: var(--radius);
}
.auditlist > li:nth-child(odd) { background: var(--paper); }

.audit-when {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.audit-when span { color: var(--slate); }

.audit-action { min-width: 0; }
.audit-actor {
  font-size: 12px;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.audit-what { min-width: 0; }
.audit-summary { margin: 0; }
.audit-diff { margin: 4px 0 0; }
.audit-meta { margin-top: 2px; }

/* Below the point where four columns fit, stack them and let the detail run
   the full width rather than squeezing it into a sliver. */
@media (max-width: 900px) {
  .auditlist > li { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
  .audit-when { display: flex; gap: 8px; }
  .audit-action { margin: 2px 0; }
}

/* ------------------------------------------------------------ shop strip -- */

.shop-strip { background: var(--orange); color: var(--ink); padding: 40px 0; }
.shop-strip .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.shop-strip h2 { font-size: 26px; margin: 0 0 4px; }
.shop-strip p { margin: 0; font-size: 16px; }

/* ---------------------------------------------------------------- footer -- */

.site-footer { background: var(--ink); color: #cdc6bf; font-size: 15px; }
.site-footer .inner {
  display: grid;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 48px;
  grid-template-columns: minmax(200px, 1fr) 2.4fr minmax(160px, .9fr);
}
.site-footer h3 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.site-footer a { color: #cdc6bf; text-decoration: none; }
.site-footer a:hover { color: var(--orange); text-decoration: underline; }

.foot-brand img { width: 76px; margin-bottom: 16px; }
.foot-brand p { margin: 0; font-size: 14px; line-height: 1.6; }

.foot-nav { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li + li { margin-top: 8px; }

.foot-sponsor img { width: 110px; margin-bottom: 12px; opacity: .85; }
.foot-sponsor p  { margin: 0; font-size: 13px; line-height: 1.5; }

.foot-legal { border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.foot-legal .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 24px;
  grid-template-columns: none;
}
.foot-legal p { margin: 0; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .site-header .bar { flex-wrap: wrap; min-height: 68px; }

  .nav-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 11px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius);
  }
  .nav-button span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .nav-toggle:focus-visible + .nav-button { outline: 3px solid var(--orange); outline-offset: 2px; }

  .site-nav {
    display: none;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 10px 0 18px;
  }
  /* The open menu sits inside the sticky header. Every submenu is expanded on
     mobile, so it runs to roughly 990px: seven top-level items, thirteen
     sub-items and the spacing between them. That is taller than a phone
     screen, and a sticky box cannot be scrolled internally — so Contact and
     most of the Club submenu were simply unreachable. Cap the height and let
     the menu scroll on its own.

     dvh follows vh so that browsers without dvh still get a usable value;
     dvh is the one that copes with mobile Safari's collapsing toolbar. */
  .nav-toggle:checked ~ .site-nav {
    display: block;
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .site-nav > ul > li:last-child { border-bottom: none; }
  .site-nav a { padding: 12px 4px; }

  .site-nav .sub {
    position: static;
    display: flex;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 14px;
    border-left: 2px solid var(--orange);
    margin: 0 0 10px 4px;
  }
  .site-nav .sub a { padding: 8px 4px; color: #cdc6bf; }

  .site-footer .inner { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  /* Footer and account links were 20-23px tall: easy to miss with a thumb,
     and easy to hit the one next to it. Padding brings each near 40px
     without changing how they look. */
  .foot-nav a { display: inline-block; padding: 8px 0; }
  .foot-nav li + li { margin-top: 0; }
  .account-strip .inner { padding-top: 2px; padding-bottom: 2px; row-gap: 0; }
  .account-strip a, .account-strip .linkbtn { display: inline-block; padding: 9px 0; }
  .inner { padding: 0 18px; }
  .hero .inner { padding-top: 64px; padding-bottom: 64px; }
  section.band { padding: 48px 0; }
  .page-head { padding: 38px 0 34px; }
  .page-body { padding: 40px 0 56px; }
  .form .row { grid-template-columns: 1fr; }
  .facts dl { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dt { margin-top: 10px; }
  .shop-strip .inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .shop-strip, .site-footer, .skip { display: none; }
  body { background: #fff; font-size: 12pt; }
}

/* ================================================================ booking == */
/* Everything below is for the signed-in pitch booking system.               */

/* --- utilities ---------------------------------------------------------- */

.mt-lg { margin-top: 40px; }
.quiet { color: var(--slate); font-size: 15px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.inline-form { display: inline; }

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--ink); }
.linkbtn + .linkbtn { margin-left: 12px; }

.btn-small { padding: 8px 16px; font-size: 14px; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--ground); border-color: var(--slate); color: var(--ink); }

/* --- account strip ------------------------------------------------------ */

.account-strip {
  background: #12142a;
  color: #cdc6bf;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.account-strip .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
  padding-bottom: 9px;
}
.account-strip strong { color: #fff; }
.account-links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.account-strip a, .account-strip .linkbtn {
  color: #cdc6bf;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.account-strip a:hover, .account-strip .linkbtn:hover { color: var(--orange); }

.pill {
  display: inline-block;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* --- admin sub-navigation ----------------------------------------------- */

/* The admin menu. It started with four tabs and now carries seven, so it
   wraps onto a second line rather than scrolling off the side, and the current
   tab is marked by a filled pill instead of a hairline that was easy to miss. */
.subnav { background: var(--paper); border-bottom: 1px solid var(--line); }
.subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover { color: var(--ink); background: var(--ground); }
.subnav a[aria-current="page"] { color: #fff; background: var(--ink); }
.subnav a[aria-current="page"] .pill { background: var(--orange); color: var(--ink); }

/* --- venue / date picker ------------------------------------------------ */

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
/* min-width: 0, or the field cannot shrink below the venue select's longest
   option ("Calday Grange Grammar School - CH48 8GG") and pushed the page
   sideways on a phone. */
.picker .field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; min-width: 0; }
.picker select { width: 100%; max-width: 100%; }
.picker label { font-weight: 700; font-size: 14px; }

/* Where somebody is set up to book one ground only, the venue is stated
   rather than offered - a select holding a single option is a control that
   cannot do anything.
   The row is bottom-aligned, so a plain line of text lands short of the date
   input beside it and drags its label out of line with "Date". Stretching
   this one field to the row height and centring the text inside it lines the
   two labels up without guessing at the input's height - which is set by the
   date picker's own chrome, not by the padding, and is not 40px. */
.picker .field-venue { align-self: stretch; }
.picker .picker-label { font-weight: 700; font-size: 14px; }
.picker .venue-fixed {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 15px;
}
/* The Show button is not an input, so it sizes to its own label rather than
   claiming an equal share of the row alongside the venue and date fields. */
.picker .field-submit { flex: 0 0 auto; }
.picker select, .picker input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  font-size: 17px;
}

/* Shown in place of a day full of "nothing bookable" messages, so a coach who
   lands on a weekday can jump straight to the next date with a free slot. */
.nextfree {
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 14px 18px;
  margin: 0 0 26px;
  max-width: var(--measure);
  font-size: 16px;
}

/* --- slots -------------------------------------------------------------- */

.pitch-block { margin-bottom: 34px; }
.pitch-block h2 {
  font-size: 20px;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.pitch-size {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0;
}

.slots {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.slot {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 14px 16px;
}
.slot-time { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.slot-state { font-size: 14px; color: var(--slate); margin-top: 2px; }

.slot-open    { border-left-color: var(--ok); }
.slot-pending { border-left-color: var(--orange); }
.slot-booked  { border-left-color: var(--slate); background: var(--ground); }
.slot-closed,
.slot-past    { border-left-color: var(--line); background: var(--ground); opacity: .65; }

/* Unavailable because a pitch sharing the same grass is booked. Distinct from
   .slot-booked, where the booking is on this pitch. */
.slot-blocked { border-left-color: var(--slate); background: var(--ground); }
.slot-blocked .hint { display: block; font-size: 12px; color: var(--faint); }

.slot-request summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--orange-ink);
  margin-top: 10px;
}
.slot-request form { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.slot-request label { font-size: 13px; font-weight: 700; }
.slot-request input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
}
.slot-request .btn { margin-top: 6px; }

/* --- login code --------------------------------------------------------- */

.code-input {
  font-size: 28px;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* --- approvals ---------------------------------------------------------- */

.approval {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 22px;
  overflow: hidden;
}
.approval.contested { border-color: var(--orange); }
.approval > header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.approval-day .approval h3, .approval h3 { font-size: 17px; margin: 0; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.approval-when { color: var(--slate); font-size: 15px; font-weight: 400; }
.approval-day .approval { margin-bottom: 12px; }
.approval-day .approval > header { padding: 12px 22px; }
.approval-flag {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-ink);
}

.request {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px;
}
.request + .request { border-top: 1px solid var(--line); }
.request-who { flex: 1 1 260px; }
.request-who .quiet { margin-top: 3px; }
.request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.request-actions input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  min-width: 200px;
}

/* --- admin cards -------------------------------------------------------- */

.admin-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 22px;
  margin-bottom: 22px;
}
.admin-card.is-off { opacity: .6; }
.admin-card h2 { font-size: 20px; margin: 0 0 4px; }
.admin-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pitch-admin {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
}
.pitch-admin.is-off { opacity: .6; }
.pitch-admin-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}
.pitch-admin h3 {
  font-size: 17px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

table.rules { margin: 12px 0; font-size: 14px; }
table.rules tr.is-off { opacity: .55; }
table.rules .rules-unit { display: none; }

/* --- venues ------------------------------------------------------------- */

/* Suspend and Remove side by side; Remove folds out a confirmation that
   holds the only button which deletes. */
td.rule-actions { white-space: nowrap; text-align: right; }
.confirm-remove { display: inline-block; vertical-align: top; margin-left: 12px; text-align: left; white-space: normal; }
.confirm-remove .when-open, .confirm-remove[open] .when-closed { display: none; }
.confirm-remove[open] .when-open { display: inline; }
.confirm-remove > summary { list-style: none; display: inline; }
.confirm-remove > summary::-webkit-details-marker { display: none; }
.confirm-remove[open] > summary { color: var(--slate); }
.confirm-box {
  margin: 8px 0 4px;
  padding: 12px 14px;
  max-width: 280px;
  background: #f3e3e3;
  border-radius: var(--radius);
  font-size: 14px;
}
.confirm-box p { margin: 0 0 10px; }
.btn-danger { background: #8a2b2b; border-color: #8a2b2b; color: #fff; }
.btn-danger:hover { background: #6e2020; border-color: #6e2020; color: #fff; }

.venues-intro { margin: 0 0 18px; }
.venue-panel { padding: 0; margin-bottom: 10px; }
.venue-panel > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 200px 24px;
  gap: 4px 22px;
  align-items: center;
  padding: 16px 22px;
}
.venue-panel > summary::-webkit-details-marker { display: none; }
.venue-panel > summary:hover { background: #fbfaf8; }
.venue-panel > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.venue-panel[open] > summary { border-bottom: 1px solid var(--line); background: var(--ground); }
.venue-summary-name { font-weight: 700; font-size: 18px; color: var(--ink); }
.venue-summary-place, .venue-summary-count { font-size: 14px; }
.venue-summary-count { color: var(--slate); text-align: right; }
.venue-body { padding: 4px 22px 22px; }
.venue-tools { margin: 12px 0 0; text-align: right; }

/* On a phone each slot window becomes two lines - day, times and slots, then
   the season and the buttons - rather than a five-column table that pushed
   the whole page sideways. */
@media (max-width: 620px) {
  .venue-panel > summary { grid-template-columns: minmax(0, 1fr) 24px; padding: 14px 16px; }
  .venue-summary-name { grid-column: 1; grid-row: 1; }
  .venue-panel .row-toggle { grid-column: 2; grid-row: 1; }
  .venue-summary-place, .venue-summary-count { grid-column: 1; text-align: left; }
  .venue-body { padding: 4px 16px 16px; }
  .venue-tools { text-align: left; }

  table.rules thead { display: none; }
  table.rules, table.rules tbody { display: block; }
  table.rules tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  table.rules th, table.rules td { padding: 0; border: 0; background: none; }
  table.rules td.num { text-align: right; }
  table.rules .rules-unit { display: inline; color: var(--slate); }
  table.rules td:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  table.rules td:last-child { grid-column: 3; grid-row: 2; text-align: right; }
  /* An open confirmation needs the width, so it takes a row of its own. */
  table.rules td.rule-actions:has(.confirm-remove[open]) { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
  table.rules .confirm-box { max-width: none; }
}

.adder { margin-top: 12px; }
.adder summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--orange-ink);
}
.form-inline {
  max-width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-top: 14px;
}
.form-inline .field { flex: 1 1 150px; }
.form-inline input, .form-inline select {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: #fff;
}

/* --- badges ------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge-approved  { background: var(--ok-bg);   color: #1c5c33; }
.badge-pending   { background: var(--warn-bg); color: var(--orange-ink); }
.badge-rejected  { background: #f3e3e3;        color: #8a2b2b; }
.badge-cancelled { background: var(--ground);  color: var(--slate); }
.badge-admin     { background: var(--ink);     color: #fff; }
.badge-coach     { background: var(--ground);  color: var(--slate); }
.badge-off       { background: #f3e3e3;        color: #8a2b2b; }
.badge-action    { background: var(--ground);  color: var(--slate); text-transform: none; letter-spacing: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

tr.is-off { opacity: .55; }

/* --- audit log, continued ---------------------------------------------- */

/* The fields an event changed, run together on a line or two. One per line
   made a routine "slot rule created" 180px tall to repeat its own summary. */
.audit-diff {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 13px;
}
.audit-diff li { overflow-wrap: anywhere; }
.audit-diff code {
  font-size: 13px;
  color: var(--slate);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.audit-diff s { color: var(--faint); }
.audit-meta { margin-top: 6px; font-size: 12px; color: var(--faint); }

.pager {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
}

@media (max-width: 620px) {
  .request-actions { width: 100%; }
  .request-actions input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .account-strip .inner { justify-content: flex-start; }
}

/* --- schedule sheet ----------------------------------------------------- */

.sched-day { margin-bottom: 38px; }
.sched-day h2 {
  font-size: 20px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.sched-day h3 {
  font-size: 16px;
  margin: 18px 0 8px;
  color: var(--slate);
}
.closure-note { margin: 0 0 14px; font-size: 15px; }

/* Each venue is its own table, so fixed column widths are what make the
   columns line up down the page instead of shifting from venue to venue. */
.sched-table table { table-layout: fixed; }
.sched-table th:nth-child(1) { width: 14%; }
.sched-table th:nth-child(2) { width: 14%; }
.sched-table th:nth-child(3) { width: 17%; }
.sched-table th:nth-child(4) { width: 17%; }
.sched-table th:nth-child(6) { width: 13%; }
.sched-table td, .sched-table th { overflow-wrap: anywhere; }

/* On a phone, a booking is two lines - time, pitch and status, then team,
   coach and contact - rather than six columns to scroll across. */
@media (max-width: 620px) {
  .sched-table thead { display: none; }
  .sched-table table, .sched-table tbody { display: block; }
  .sched-table tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .sched-table tr:last-child { border-bottom: 0; }
  .sched-table th, .sched-table td { padding: 0; border: 0; width: auto; background: none; }
  .sched-table td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .sched-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; font-weight: 700; }
  .sched-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
  .sched-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; font-size: 14px; }
}

/* The schedule is meant to be printed and carried to the pitch. */
@media print {
  .no-print,
  .subnav,
  .account-strip,
  .page-head .lede { display: none; }

  .sched-day { page-break-inside: avoid; margin-bottom: 26px; }
  .sched-day h2 { font-size: 15pt; }
  .table-scroll { border: none; overflow: visible; }
  table { font-size: 10pt; }
  .badge { border: 1px solid #999; background: none; color: #000; }
}

/* Primary and secondary action side by side, as on the sign-in form. */
.field-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

/* --- venue plans and notes ---------------------------------------------- */

.venue .defib,
.venue-plan .defib,
.venue .venue-note,
.venue-plan .venue-note {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 0;
}

/* The defibrillator line is safety information, so it is the one thing on a
   venue card allowed to shout. */
.defib {
  color: var(--ink);
  background: var(--ok-bg);
  border-left: 3px solid var(--ok);
  padding: 8px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.venue-note { color: var(--slate); }

.plan { margin-top: 12px; }
.plan summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--orange-ink);
  padding: 4px 0;
}
.plan img {
  width: 100%;
  height: auto;
  margin: 10px 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plan .quiet { font-size: 13px; margin: 0; }

/* On the booking page the plan sits above the slot grid rather than inside a
   card, so it gets the room to be read. */
.venue-plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
  max-width: var(--measure);
}

/* Photo credit — present but not competing with the pictures. */
.credit {
  font-size: 13px;
  color: var(--faint);
  margin: 10px 0 0;
}

/* The only zone plan the club holds is a 320px WordPress thumbnail, so it is
   pinned to its natural size rather than stretched across the column. */
.plan img.zone-plan,
img.zone-plan { width: 320px; max-width: 100%; }

/* --- a venue's own page ------------------------------------------------- */

.back-link { margin: 0 0 18px; font-size: 15px; }
.venue-detail { max-width: var(--measure); }
.venue-detail > * + * { margin-top: 12px; }
.venue-detail .pitches { font-size: 17px; }
.venue-detail .map { font-weight: 700; }

/* The list takes the room; the calendar sits beside it on a wide screen and
   underneath on a phone, where the four-week list is what most people want. */
.venue-bookings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 760px) {
  .venue-bookings { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.venue-bookings-list > h3 { margin: 0; }
.venue-bookings-list > .quiet { margin: 4px 0 0; }
.booking-day { margin-top: 22px; }
.booking-day h4 { margin: 0 0 8px; }
.venue-booking-table { table-layout: fixed; }
.venue-booking-table th:nth-child(1) { width: 34%; }
.venue-booking-table th:nth-child(2) { width: 26%; }
.venue-booking-table td.when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nothing-booked {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--slate);
}
.venue-bookings-how { margin-top: 28px; }

.booking-cal {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  text-decoration: none; font-weight: 700; font-size: 18px;
}
a.cal-step:hover { background: var(--orange-dim); color: var(--ink); }
table.cal-grid { table-layout: fixed; font-size: 14px; }
table.cal-grid th,
table.cal-grid td { padding: 2px; border: 0; text-align: center; }
table.cal-grid thead th {
  font-size: 12px; font-weight: 700; color: var(--faint);
  background: none; text-transform: none; letter-spacing: 0;
}
table.cal-grid abbr { text-decoration: none; }
table.cal-grid td span,
table.cal-grid td a {
  display: flex; align-items: center; justify-content: center;
  height: 36px; border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
table.cal-grid td span { color: var(--faint); }
table.cal-grid td.is-past span { color: var(--line); }
table.cal-grid td a {
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
table.cal-grid td a:hover { background: var(--ink); color: #fff; }
table.cal-grid td.is-today span,
table.cal-grid td.is-today a { box-shadow: inset 0 0 0 2px var(--ink); }
table.cal-grid td a[aria-current] { background: var(--ink); color: #fff; }
.cal-key { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; }
.cal-key-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--orange); flex: none; }

/* On the venues index the name leads to the venue's own page, styled like a
   card title rather than as a run of underlined orange. */
.venue h2 a { color: var(--ink); text-decoration: none; }
.venue h2 a:hover { color: var(--orange-ink); text-decoration: underline; }

/* --- importing coaches from the FA list --------------------------------- */

.import-steps { margin: 0 0 18px; padding-left: 22px; }
.import-steps li + li { margin-top: 4px; }
textarea.import-paste { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: pre; }
.import-summary { list-style: none; margin: 0 0 18px; padding: 0; }
.import-summary li + li { margin-top: 4px; }
.import-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }