/* Panenka: whiteboard pages (the team, the squad). Requires tokens.css and panenka.css (docs/design.md).
   The marker face appears only on the board; everything around it is programme stock. */

/* ------------------------------------------------------------------ the next match, over the board */
.pk-nextup { display: grid; gap: 2px; padding: var(--pk-s3) 0; border-top: 1px solid var(--pk-rule-2); border-bottom: 1px solid var(--pk-rule-2); }
.pk-nextup__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-s2); font: 800 var(--pk-fs-h2)/1.1 var(--pk-font-display); text-transform: uppercase; }
.pk-nextup__who a { text-decoration: none; }
.pk-nextup__who .pk-muted { font: 500 var(--pk-fs-small)/1 var(--pk-font); text-transform: none; }
.pk-nextup__when { font-size: var(--pk-fs-small); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ the page: board beside the squad */
.pk-lineup { display: grid; gap: var(--pk-s6); align-items: start; }
.pk-lineup__main { display: grid; gap: var(--pk-s4); align-content: start; min-width: 0; }
.pk-lineup__list { min-width: 0; }
@media (min-width: 1040px) {
  .pk-lineup { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ the whiteboard */
.pk-whiteboard {
  container-type: inline-size;
  position: relative;
  padding: var(--pk-s4);
  background: var(--pk-board);
  border: 6px solid var(--pk-board-edge);
  border-radius: 3px;
  box-shadow: var(--pk-shadow-paper), inset 0 0 0 1px var(--pk-paper-0);
  color: var(--pk-marker);
  font-family: var(--pk-font-marker);
}
.pk-wb__label { font: 700 1rem/1.2 var(--pk-font-marker); color: var(--pk-marker-2); }

.pk-wbteam__grid { display: grid; gap: var(--pk-s4); }
@container (min-width: 520px) {
  .pk-wbteam__grid { grid-template-columns: minmax(0, 1fr) 9.5rem; }
}

/* The pitch, drawn faintly in blue marker; magnets sit on it by percentage. */
.pk-wbpitch { container-type: inline-size; position: relative; aspect-ratio: 68 / 96; }
.pk-wbpitch__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-wbpitch__lines * { fill: none; stroke: var(--pk-marker); stroke-width: 0.45; stroke-linecap: round; opacity: 0.28; }
.pk-wbpitch__lines .is-dot { fill: var(--pk-marker); }
.pk-wbpitch__arrow { position: absolute; top: 3%; left: 5%; font-size: clamp(10px, 3cqw, 13px); color: var(--pk-marker); opacity: 0.55; }

/* A magnet: a disc in the club's colours with the shirt number, his name on tape, the slot in red. */
.pk-magnet {
  --d: clamp(36px, 12cqw, 58px);
  position: absolute;
  display: grid;
  justify-items: center;
  width: 19cqw;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pk-marker);
  font-family: var(--pk-font-marker);
  cursor: pointer;
  transform: translate(-50%, calc(var(--d) / -2));
}
.pk-magnet__disc {
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--a, var(--pk-marker));
  color: var(--b, var(--pk-paper-0));
  font: 800 clamp(14px, 5cqw, 22px)/1 var(--pk-font-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px var(--a, var(--pk-marker)), 0 0 2px var(--a, var(--pk-marker));
  box-shadow: var(--pk-shadow-raised);
}
.pk-magnet__tape {
  position: relative;
  max-width: 100%;
  margin-top: -6px;
  padding: 0 4px;
  overflow: hidden;
  background: var(--pk-paper-0);
  border: 1px solid var(--pk-board-edge);
  font-size: clamp(10px, 3.4cqw, 14px);
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pk-magnet__code { font: 700 clamp(10px, 3.2cqw, 13px)/1.15 var(--pk-font-marker); color: var(--pk-marker-2); white-space: nowrap; }

.pk-magnet.is-empty .pk-magnet__disc,
.pk-benchspot.is-empty .pk-magnet__disc {
  background: transparent;
  border: 2px dashed var(--pk-marker);
  color: var(--pk-marker);
  font-family: var(--pk-font-marker);
  text-shadow: none;
  box-shadow: none;
}
.pk-magnet.is-out .pk-magnet__disc, .pk-benchspot.is-out .pk-magnet__disc { opacity: 0.45; }
.pk-magnet.is-selected .pk-magnet__disc,
.pk-benchspot.is-selected .pk-magnet__disc { box-shadow: 0 0 0 3px var(--pk-board), 0 0 0 5px var(--pk-marker-2); }
.pk-magnet:focus-visible, .pk-benchspot:focus-visible { outline: 2px solid var(--pk-marker-2); outline-offset: 2px; }

/* The bench: nine small magnets down the side (or three across under the pitch). */
.pk-wbside { display: grid; gap: var(--pk-s3); align-content: start; }
.pk-wbbench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-s2); }
@container (min-width: 520px) {
  .pk-wbbench { grid-template-columns: 1fr; gap: 6px; }
}
.pk-benchspot {
  display: flex;
  align-items: center;
  gap: var(--pk-s2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pk-marker);
  font: 400 var(--pk-fs-small)/1.2 var(--pk-font-marker);
  text-align: left;
  cursor: pointer;
}
.pk-benchspot .pk-magnet__disc { --d: 30px; flex: none; font-size: 0.85rem; }
.pk-benchspot__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-benchspot__name em { font-style: normal; font-weight: 700; color: var(--pk-marker-2); }
.pk-benchspot.is-empty .pk-benchspot__name { opacity: 0.6; }

/* The takers and the captain: marker labels over plain selects. */
.pk-wbtakers { display: grid; gap: var(--pk-s2); grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
@container (min-width: 520px) {
  .pk-wbtakers { grid-template-columns: 1fr; }
}
.pk-wbtaker { display: grid; gap: 2px; }
.pk-wbtaker .pk-select { width: 100%; font-family: var(--pk-font); }
.pk-wbtakers__says { grid-column: 1 / -1; font-size: 0.9rem; line-height: 1.3; color: var(--pk-marker); }

.pk-wb__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-s2) var(--pk-s4); margin-top: var(--pk-s3); }
.pk-wb__hint { flex: 1 1 14rem; font-size: 1rem; line-height: 1.3; }
.pk-wb__clear { padding: 0; border: 0; background: none; color: var(--pk-marker-2); font: 700 1rem/1.3 var(--pk-font-marker); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* Under the board: what's wrong with the team (red), the buttons, the fine print. */
.pk-lineup__warn { display: grid; gap: 2px; font-size: var(--pk-fs-small); color: var(--pk-loss); }
.pk-lineup__warn:empty { display: none; }
.pk-lineup__warn li::before { content: '! '; font-weight: 800; }
.pk-lineup__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-s2) var(--pk-s3); font-size: var(--pk-fs-small); }
.pk-lineup__dirty:empty { display: none; }
.pk-lineup__note { max-width: 70ch; font-size: var(--pk-fs-small); color: var(--pk-ink-3); }

/* The squad list beside the board: tap a row to place him. */
.pk-picklist tbody tr { cursor: pointer; }
.pk-picklist tr.is-on td { background: var(--pk-paper-0); }
.pk-picklist tr.is-off td { color: var(--pk-ink-3); }
.pk-picklist tr.is-off td .pk-pos, .pk-picklist tr.is-off td .pk-grade { opacity: 0.55; }
.pk-picklist__name { padding: 0; border: 0; background: none; color: inherit; font: 650 var(--pk-fs-data)/1.2 var(--pk-font); text-align: left; cursor: pointer; }
.pk-picklist__name:hover { color: var(--pk-grass-1); text-decoration: underline; }
.pk-picklist__out { color: var(--pk-loss); white-space: normal; font-size: var(--pk-fs-small); }

/* ------------------------------------------------------------------ the tactics, in marker */
.pk-wbtactics { display: grid; gap: var(--pk-s4); }
@media (min-width: 900px) {
  .pk-wbtactics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-wbtactics > .pk-wbchoice:first-child, .pk-wbtactics__note { grid-column: 1 / -1; }
}
.pk-wbchoice { min-width: 0; margin: 0; padding: 0; border: 0; }
.pk-wbchoice legend { padding: 0; font: 700 1.1rem/1.2 var(--pk-font-marker); color: var(--pk-marker-2); text-decoration: underline; text-underline-offset: 0.18em; }
.pk-wbchoice__opts { display: flex; flex-wrap: wrap; gap: 2px var(--pk-s2); margin-top: var(--pk-s1); }
.pk-wbopt { position: relative; cursor: pointer; }
.pk-wbopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pk-wbopt span {
  display: inline-block;
  padding: 1px 9px;
  border: 2px solid transparent;
  border-radius: 50%;
  font: 400 1.15rem/1.3 var(--pk-font-marker);
  color: var(--pk-marker);
}
.pk-wbopt:hover span { border-color: var(--pk-board-edge); }
.pk-wbopt input:checked + span { border-color: var(--pk-marker-2); font-weight: 700; transform: rotate(-2deg); }
.pk-wbopt input:focus-visible + span { outline: 2px solid var(--pk-marker); outline-offset: 1px; }
.pk-wbchoice__says { margin-top: 2px; font-size: 0.98rem; line-height: 1.35; color: var(--pk-marker); }
.pk-wbtactics__note { font-size: 0.95rem; color: var(--pk-marker-2); }
.pk-wbtactics + .pk-lineup__acts { margin-top: var(--pk-s3); }

/* ------------------------------------------------------------------ training (programme stock) */
.pk-training { display: grid; gap: var(--pk-s4); max-width: 46rem; }
@media (min-width: 720px) {
  .pk-training { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-training__note, .pk-training .pk-form__actions { grid-column: 1 / -1; }
}
.pk-training__note { font-size: var(--pk-fs-small); color: var(--pk-ink-2); max-width: 70ch; }

/* ------------------------------------------------------------------ the squad */
.pk-squad__sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.pk-squad__sort:hover { color: var(--pk-ink-1); text-decoration: underline; }
.pk-squad__sort.is-current { color: var(--pk-ink-1); }
th[aria-sort='ascending'] .pk-squad__sort::after { content: ' ↑'; }
th[aria-sort='descending'] .pk-squad__sort::after { content: ' ↓'; }
.pk-squad__hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pk-squad__last { color: var(--pk-loss); font-weight: 650; }
.pk-squad__out { color: var(--pk-loss); font-size: var(--pk-fs-small); }
.pk-squad tr.is-open td { background: var(--pk-paper-2); }

/* A player's dealings, opened under his row; held to the visible width while the table scrolls. */
.pk-squad__panel td, .pk-squad tr.pk-squad__panel:hover td { padding: 0; background: var(--pk-paper-0); white-space: normal; }
.pk-squad__deals {
  position: sticky;
  left: 0;
  display: grid;
  gap: var(--pk-s4);
  width: min(100%, calc(100vw - 2 * var(--pk-gutter)));
  max-width: 64rem;
  padding: var(--pk-s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pk-squad__deal { display: grid; gap: var(--pk-s2); align-content: start; max-width: none; }
.pk-squad__dealhead { font: 800 var(--pk-fs-h3)/1.1 var(--pk-font-display); text-transform: uppercase; }