/* 1UP camp check-in - matches the 1UP site: Space Grotesk headings, Inter body. */

:root {
  --black: #0e0e0e;
  --white: #ffffff;
  --off-white: #f8f8f6;
  --gray-100: #f0f0ee;
  --gray-300: #d0d0cc;
  --gray-500: #8a8a86;
  --gray-700: #4a4a46;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 6px;
  --card-radius: 14px;
}

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

html { height: 100%; }

body {
  min-height: 100%;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
h2 { font-size: 1.15rem; }

.eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* Header ------------------------------------------------------------ */

.nav {
  background: var(--black);
  padding: 18px 24px;
  padding-top: max(18px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav img { height: 26px; width: auto; }
.nav[hidden] { display: none; }

.nav-note {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .nav-note { display: none; }
}

.nav-help {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  padding: 9px 15px;
  cursor: pointer;
}

.nav-help:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* Same control used as a link on the coach page, back to the family view. */
a.nav-help { text-decoration: none; display: inline-block; }

.reveal-help {
  font-family: var(--body);
  font-size: 13.5px;
  color: inherit;
  background: none;
  border: 0;
  opacity: 0.7;
  padding: 20px 4px 0;
  margin: 0 auto;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Layout ------------------------------------------------------------ */

#main { flex: 1; display: flex; flex-direction: column; }

.screen {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 36px 24px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.screen[hidden] { display: none; }

.lede {
  color: var(--gray-700);
  font-size: 15.5px;
  margin: 12px 0 26px;
}

/* Buttons ----------------------------------------------------------- */

.btn {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: #282828; }

.btn-outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); }

.link {
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--gray-500);
  background: none;
  border: 0;
  padding: 20px 2px;
  margin-top: auto;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Footer of the family search screen: walk-up link plus a quiet way in for
   staff, kept visually secondary so families don't wander into it. */
.foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot .link { margin-top: 0; }

.coach-link {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-300);
  text-decoration: none;
  padding: 20px 2px;
  white-space: nowrap;
}

.coach-link:hover { color: var(--gray-700); }

/* Search ------------------------------------------------------------ */

input[type="search"], input[type="password"], input[type="text"] {
  font-family: var(--body);
  font-size: 19px;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: inherit;
  -webkit-appearance: none;
}

input:focus {
  outline: none;
  border-color: var(--black);
}

.status {
  font-size: 13px;
  color: var(--gray-500);
  margin: 12px 2px 0;
  min-height: 1.4em;
}

.matches {
  list-style: none;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matches button {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  width: 100%;
  min-height: 62px;
  padding: 16px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--card-radius);
  background: var(--off-white);
  color: var(--black);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.matches button:hover { background: var(--black); color: var(--white); }
.matches button:active { transform: scale(0.99); }

/* Confirm ----------------------------------------------------------- */

.years { display: flex; flex-direction: column; gap: 12px; }

.years button {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  width: 100%;
  min-height: 76px;
  border: 1.5px solid transparent;
  border-radius: var(--card-radius);
  background: var(--off-white);
  color: var(--black);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.years button:hover { background: var(--black); color: var(--white); }

/* Reveal ------------------------------------------------------------ */

.reveal {
  justify-content: center;
  text-align: center;
  max-width: none;
  background: var(--reveal-bg, var(--black));
  color: var(--reveal-fg, var(--white));
  padding: 40px 24px max(40px, env(safe-area-inset-bottom));
}

.reveal-intro {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 14px;
}

/* The colour owns the screen - it is the one thing a player must remember. */
.reveal-colour {
  font-family: var(--display);
  font-size: clamp(64px, 24vw, 128px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.reveal-when {
  font-family: var(--body);
  font-size: 15px;
  opacity: 0.8;
  margin-bottom: 24px;
}

.reveal-where {
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1.5px solid currentColor;
  max-width: 24em;
  opacity: 0.8;
}

.reveal-state {
  font-size: 12.5px;
  margin-top: 18px;
  opacity: 0.6;
}

.reveal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.reveal .btn {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  opacity: 0.75;
}

#reveal-signout { opacity: 1; font-weight: 600; }
#reveal-signout[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-group { animation: rise 0.34s var(--ease) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}

/* Coach view --------------------------------------------------------- */

.admin { max-width: 760px; }

/* Session and filter pills ------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 22px;
}

.pill {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transition: all 0.18s var(--ease);
}

.pill:hover { border-color: var(--black); color: var(--black); }

.pill.on {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.pill-meta {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

.pills.small { margin: 0 0 16px; }
.pills.small .pill { font-size: 12.5px; padding: 8px 13px; }

/* Tabs --------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid var(--gray-100);
  margin-bottom: 20px;
}

.tab {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--gray-500);
  padding: 12px 16px;
  margin-bottom: -1.5px;
  cursor: pointer;
}

.tab.on { color: var(--black); border-bottom-color: var(--black); }

/* Sign in and out ---------------------------------------------------- */

.tally {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.person:last-of-type { border-bottom: none; }

.person-main { flex: 1; min-width: 0; }

.person-name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.person-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--gray-500);
  margin-top: 2px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.person-when::before { content: "· "; }

.person.gone .person-name { opacity: 0.4; }

.person-action {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 15px;
  min-width: 82px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  flex: none;
  transition: all 0.18s var(--ease);
}

.person-action:hover { border-color: var(--black); color: var(--black); }

.person-action.primary {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.person-action.primary:hover { background: #282828; color: var(--white); }

.btn.wide {
  width: 100%;
  margin-top: 18px;
  padding: 13px 20px;
}

/* Groups view -------------------------------------------------------- */

.group-card {
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1.5px solid var(--gray-100);
  margin-bottom: 12px;
}

.group-head { padding: 16px 18px; }

.group-colour {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.group-meta {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 6px;
}

.group-names {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 14px 18px 16px;
}

.group-names li { font-size: 14px; }
.group-names li.notin { opacity: 0.35; }
.group-names li.gone { text-decoration: line-through; opacity: 0.5; }

/* Walk-ups ----------------------------------------------------------- */

.walkups {
  background: var(--off-white);
  border-radius: var(--card-radius);
  padding: 16px 20px;
  margin-top: 22px;
}

.walkups-title {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.walkup-row { font-size: 14px; }

.missing-label {
  font-size: 12.5px;
  color: var(--gray-500);
  margin-top: 10px;
}

/* Bottom bar --------------------------------------------------------- */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-bar.bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1.5px solid var(--gray-100);
}

.admin-bar select {
  font-family: var(--body);
  font-size: 13px;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
}

.admin-bar .btn { padding: 10px 15px; font-size: 12.5px; }

/* Help alerts ------------------------------------------------------- */

.alerts-box {
  background: #0e0e0e;
  color: #fff;
  border-radius: var(--card-radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.alerts-title {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.alert-row:last-child { border-bottom: none; }

.alerts-box .chip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.alerts-box .chip:hover { border-color: #fff; color: #fff; }

.missing-label {
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-family: var(--body);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
  cursor: pointer;
}

.chip:hover { border-color: var(--black); color: var(--black); }
.chip.in { background: var(--off-white); border-color: transparent; }

.walkups {
  background: var(--off-white);
  border-radius: var(--card-radius);
  padding: 18px 20px;
  margin-top: 8px;
}

.notice {
  background: var(--off-white);
  border-radius: var(--card-radius);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 20px;
}

.notice strong { font-weight: 600; color: var(--black); }

/* Shirt pickup ------------------------------------------------------- */

/* Family screen: the shirt is a reason to walk to the desk, so it sits apart
   from the field instructions rather than inside them. */
.reveal-shirt {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  border: 2px solid currentColor;
  border-radius: var(--card-radius);
  padding: 12px 18px;
  margin: 18px auto 0;
  max-width: 24em;
}

.reveal-shirt[hidden] { display: none; }

/* The shirt size, large: it is read across a desk, not off a phone in hand. */
.reveal-size {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

/* A shirt already handed over fades back, so the pile and the list agree. */
.person.given .person-name,
.person.given .person-sub { opacity: 0.45; }

/* Care sits under the shirt note in the same frame: it is the same kind of
   thing, something about today that is not the football. */
.reveal-care {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  border: 2px solid currentColor;
  border-radius: var(--card-radius);
  padding: 12px 18px;
  margin: 12px auto 0;
  max-width: 24em;
  opacity: 0.95;
}

.reveal-care[hidden] { display: none; }

/* Care, on the player's own row. Pale enough not to shout over the group
   colour, solid enough that a coach clearing the field at 3pm sees it. */
.care-flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #EAF1FB;
  color: #17457F;
  border: 1px solid #B9D2F2;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* The Care tab: one card for before, one for after. */
.care-card {
  border: 1px solid var(--gray-100);
  border-radius: var(--card-radius);
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
}

.care-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 4px;
}

.care-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.care-when {
  font-family: var(--body);
  font-size: 13px;
  color: var(--gray-700);
}

/* Coach list: impossible to miss while looking at the name. */
.shirt-flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 5px;
}

.shirt-flag.note {
  background: var(--off-white);
  color: var(--gray-700);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--body);
}

/* Coach search ------------------------------------------------------- */

.find {
  font-size: 16px !important;
  padding: 12px 15px !important;
  margin-bottom: 14px;
}

/* Mobile ergonomics --------------------------------------------------
   Everything tappable clears 44px, the size a thumb reliably hits. These
   are pressed dozens of times an hour by someone standing on a field,
   often one-handed, sometimes in the cold. */

.person-action,
.admin-bar .btn,
.nav-help,
.chip {
  min-height: 44px;
}

.pill {
  min-height: 44px;
  align-items: center;
}

.pills.small .pill { min-height: 44px; }

/* Under 16px, iOS zooms the whole page when the control is tapped and the
   coach has to pinch back out every time. */
.admin-bar select,
.find {
  font-size: 16px !important;
}

.admin-bar select { min-height: 44px; }

/* The help button is the escape hatch for a confused parent - it must be
   easy to hit, not a 34px sliver in the corner. */
.reveal-help { min-height: 44px; }

/* The reveal buttons stack rather than sit side by side - "Check in another
   player" is long, and 12 of the 82 families have two children at camp, so it
   should read as a full sentence not a squeezed chip. */
.reveal-actions {
  flex-direction: column;
  align-items: center;
}

.reveal-actions .btn {
  min-height: 44px;
  width: 100%;
  max-width: 20em;
}

.reveal-where[hidden] { display: none; }

/* Confirmation after a coach signs someone in or out. Sits by the list, not
   at the foot of the page where nobody working the door will see it. */
.done-note {
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}

.done-note[hidden] { display: none; }

/* On a narrow phone the session and filter pills wrapped onto six rows and
   pushed the list of names below the fold - a coach had to scroll past the
   controls before every single check-in. One swipeable row each instead. */
@media (max-width: 460px) {
  .pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so the row reads as scrollable */
    margin-left: -24px;
    margin-right: -24px;
    padding: 2px 24px 6px;
  }

  .pills::-webkit-scrollbar { display: none; }
  .pill { flex: none; scroll-snap-align: start; }
}

/* Camp name -----------------------------------------------------------
   Shown the moment the QR code opens so nobody wonders what they scanned. */
.camp-bar {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gray-700);
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-100);
  padding: 11px 20px;
}

.camp-bar[hidden] { display: none; }

/* The camp date, directly under the camp name. These days are months apart,
   so "Wed Sep 30" is the difference between the right camp and the wrong one. */
.camp-day {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  color: var(--gray-700);
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-100);
  padding: 0 20px 10px;
  margin-top: -1px;
}

.camp-day[hidden] { display: none; }

/* "You're in group" sits above the colour, small, so the colour still owns
   the screen. */
.reveal-lead {
  font-family: var(--display);
  font-size: clamp(15px, 4.4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: 2px;
}

/* One field, with an arrival station beyond each end. */
.pitch {
  display: block;
  width: min(268px, 80vw);
  height: auto;
  margin: 22px auto 6px;
  color: inherit;
}

.pitch[hidden] { display: none; }

.pitch-key {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 20px;
}

.pitch-key[hidden] { display: none; }

/* Parent-facing bottom buttons ---------------------------------------
   These were small underlined links. A parent holding a bag, a ball and a
   phone needs a real target, pinned to the bottom of the screen where a
   thumb already is. */
.btn.wide {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
}

.foot .btn.wide { margin-bottom: 4px; }

.btn.back {
  margin-top: auto;
  font-size: 15px;
}

/* Labels inside the field graphic. Kept in SVG so they scale with the drawing
   rather than drifting out of place on a narrow phone. */
.pitch-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: currentColor;
  opacity: 0.75;
  text-anchor: middle;
}

.pitch-label-lg {
  font-size: 13px;
  opacity: 1;
  letter-spacing: 0.1em;
}

/* The arrival station itself: the area between the cone groups. */
.pitch-zone {
  fill: currentColor;
  fill-opacity: 0.14;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-opacity: 0.55;
}

/* The station labels sit inside a 46-unit box, so they need to be small
   enough not to spill over the dashed edge. */
.pitch-label-sm {
  font-size: 9px;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

/* SVG elements are not HTML elements, so the browser's own [hidden] rule
   cannot be relied on inside the drawing. */
.pitch [hidden] { display: none; }

/* Shown only when the passcode is missing entirely: which site and deploy is
   answering, and whether the variable reached the function. */
.diag {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 12px;
  color: var(--gray-700);
}

.diag[hidden] { display: none; }

/* Read out of a parent's free-text note rather than an order line, so it needs
   checking before anything is handed over. */
.shirt-flag.unconfirmed {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
}

/* Whether someone is in or out has to be readable at a glance across a laptop
   screen, not inferred from small grey text. */
.state-badge {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 7px;
  margin-left: 9px;
  vertical-align: 2px;
  white-space: nowrap;
}

.state-badge.here { background: #14683F; color: #EAF7F0; }
.state-badge.gone { background: var(--gray-100); color: var(--gray-700); }
.state-badge.notin { background: transparent; color: var(--gray-500); box-shadow: inset 0 0 0 1.5px var(--gray-300); }

.person.here { border-left: 4px solid #14683F; padding-left: 12px; }
.person.gone { border-left: 4px solid var(--gray-300); padding-left: 12px; }
.person.notin { border-left: 4px solid transparent; padding-left: 12px; }

/* The row that was just acted on, so a coach can see what their tap did. */
.person.just-changed {
  background: #FFF8D6;
  border-radius: var(--radius);
}

/* Adding a player at the desk ---------------------------------------- */

.add-player { margin-top: 20px; }

.add-form {
  background: var(--off-white);
  border-radius: var(--card-radius);
  padding: 16px;
  margin-top: 10px;
}

.add-form[hidden] { display: none; }
.add-form input { font-size: 16px; margin-bottom: 12px; }
.add-form .pills { margin: 0 0 6px; }
.add-actions { display: flex; gap: 8px; margin-top: 10px; }
.add-actions .btn { padding: 12px 18px; font-size: 13px; min-height: 44px; }

/* A player who is not from the sheet, so nobody goes looking for them there. */
.added-flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid var(--gray-300);
  color: var(--gray-700);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 8px;
}

/* Every action on the row, so a coach never has to hunt for the right one. */
.person-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.person-actions .person-action { min-width: 0; }

/* Moving a player between colours, opened from their own row. */
.move-picker {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 0 2px;
}

.move-label {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.move-picker .pill { min-height: 40px; font-size: 13px; padding: 8px 14px; }

.person { flex-wrap: wrap; }

/* Sign-out screen: a goodbye on the player's group colour, and nothing to read
   that a family heading home does not need. */
.reveal-bye {
  font-family: var(--display);
  font-size: clamp(34px, 10vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 26px;
}

.reveal-bye[hidden] { display: none; }

.reveal-logo {
  height: 26px;
  width: auto;
  margin: 0 auto 22px;
}

.reveal-logo[hidden] { display: none; }

.reveal-lead[hidden], .reveal-colour[hidden], .reveal-intro[hidden] { display: none; }

a.reveal-mistake { display: block; text-align: center; }
a.reveal-mistake[hidden] { display: none; }

/* The log: everything that happened today, newest first. */
.log-row {
  display: grid;
  grid-template-columns: 72px 92px 1fr;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.log-time {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}

.log-what {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 7px;
  text-align: center;
}

.log-what.in { background: #14683F; color: #EAF7F0; }
.log-what.out { background: var(--gray-100); color: var(--gray-700); }

.log-who { font-family: var(--display); font-weight: 700; }

.log-meta {
  grid-column: 3;
  font-size: 12.5px;
  color: var(--gray-500);
}

@media (max-width: 460px) {
  .log-row { grid-template-columns: 62px 84px 1fr; }
}

/* Phone-width coach view: the row's buttons drop under the name rather than
   squeezing it onto two lines, and the header link stays on the screen. A
   coach does use this on a phone, walking the line at the door. */
@media (max-width: 460px) {
  .person-main { flex: 1 1 100%; }
  .person-actions { width: 100%; justify-content: flex-start; }
  .nav img { height: auto; max-height: 26px; max-width: 46%; }
  .nav-help { padding-left: 10px; padding-right: 10px; letter-spacing: 0.1em; }
}

/* Picking players to sign out together. */
.select-bar { display: flex; gap: 8px; margin: 12px 0; }
.select-bar[hidden] { display: none; }
.select-bar .btn { flex: 1; }
.person-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 44px;
}
.person-pick input { width: 20px; height: 20px; accent-color: var(--black); }
.person.picked { background: var(--off-white); }

/* The undo is a button that looks like the other quiet links on this screen. */
button.reveal-undo {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: inherit;
  padding: 10px;
  min-height: 44px;
}
button.reveal-undo[hidden] { display: none; }