/* ==========================================================================
   Shuley Cup — "Broadcast · Soft Lime"

   Implements docs/DESIGN.md, whose reference file is the visual source of
   truth. The look in one line: TV-broadcast scorebug — near-black, one soft
   lime accent, heavy condensed italic numerals, sharp corners, hairline
   dividers, no shadows, no gradients.

   Rules carried over from the previous build because they are about hands and
   phones rather than taste. A test enforces each one:
   - every tap target is at least 44px
   - every form field is at least 16px, or iOS Safari zooms in and never back
   - sticky bottom bars clear the home indicator (safe-area-inset-bottom)
   - wide tables scroll inside their wrapper, never the page
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,600;0,700;0,800;1,800;1,900&family=Saira:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;

  --bg:          #0b0c0b;
  --surface:     #141614;
  --line:        #222522;
  --chip:        #2f332f;
  --text:        #f1f3ef;
  --muted:       #9aa096;
  --dim:         #545a52;
  --accent:      #b4dc5a;
  --accent-text: #b4dc5a;
  --ink:         #0c1006;
  --live:        #f0505e;
  --hdr:         rgba(11, 12, 11, .86);

  /* Derived from the palette rather than invented: the scorekeeper screen
     needs a "good" and a "stop play", and broadcast already says lime for the
     thing that happened and red for the thing that stopped it. */
  --goal:        var(--accent);
  --penalty:     var(--live);
  --scrim:       rgba(5, 6, 5, .78);
  --row-hover:   rgba(255, 255, 255, .03);

  --display: 'Saira Condensed', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Saira', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: 16px;
  --max: 1240px;
}

/* Light theme. Opt-in: dark is the bare :root, so it stays the default even
   for someone whose operating system is set to light — rinks are dark and a
   white scoreboard at 10pm is unpleasant to look at. */
:root[data-theme='light'] {
  color-scheme: light;

  --bg:          #f4f5f1;
  --surface:     #ffffff;
  --line:        #e1e4dc;
  --chip:        #c9cec1;
  --text:        #0c0f0a;
  --muted:       #596150;
  --dim:         #8a9180;
  --accent:      #b4dc5a;
  --accent-text: #4a7311;
  --ink:         #0c1006;
  --live:        #d42f3e;
  --hdr:         rgba(244, 245, 241, .88);

  --goal:        var(--accent);
  --penalty:     var(--live);
  --scrim:       rgba(12, 15, 10, .5);
  --row-hover:   rgba(12, 15, 10, .035);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { min-height: 100dvh; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: max(16px, 1rem); /* never let iOS zoom a form field */
  color: inherit;
}

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

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

/* Condensed italic numerals are the signature of the whole thing. */
.it {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }
.dc { font-family: var(--display); text-transform: uppercase; }

.muted { color: var(--muted); }
.faint { color: var(--dim); }

/* ------------------------------------------------------------------ shell */

.shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hdr);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px var(--gutter) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  /* 30px is the design's size and what a desktop gets. On a narrow phone it
     gives up a little rather than forcing the total or the theme switch to
     wrap -- continuously, so there is no second breakpoint. */
  font-size: clamp(24px, 6.8vw, 30px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.brand .year { color: var(--accent-text); }

.nav {
  display: flex;
  gap: 8px;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--chip);
  border-radius: 22px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover { border-color: var(--text); }
.nav a[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 800;
}

.menu-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--chip);
  border-radius: 22px;   /* round: it is a menu control */
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.menu-toggle:hover { border-color: var(--text); }
.menu-toggle svg { transition: transform .15s ease; }
.menu-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .menu-toggle svg { transition: none; } }


.theme-toggle {
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--chip);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent-text); }
.theme-toggle svg { display: block; }
/* Only the phone menu has room for the word; see the max-width block. */
.theme-label { display: none; }

/* The total belongs beside the name at every width -- it is the reason the
   tournament exists, and hiding it on phones hid it from nearly everyone.
   It is never abbreviated.

   A solid lime pill, not lime text: the year beside it is already lime TEXT,
   and two lime texts an inch apart compete. The spec reserves the accent as a
   FILL for the active pill and the fundraiser block, so filling this one makes
   "lime fill = fundraising" a rule the site keeps rather than an exception --
   the big block further down the page gets exactly the same treatment.
   It is also the highest-contrast thing available, which suits the one number
   the weekend is about, and it is identical in both themes because lime and
   ink do not change between them.

   SQUARE, which is what keeps it from reading as another menu item. Round is
   reserved for the menu pills and the theme button; everything else in this
   design has sharp corners, and the big fundraiser block is a square lime
   block too. Shape carries the difference, so the colour does not have to. */
.raised {
  display: inline-flex;
  /* Centred, not baseline. On a baseline the figure hangs high in the block,
     because the box is 44px for the thumb while the glyphs are 20px. */
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--ink);
  white-space: nowrap;
}
.raised:hover { filter: brightness(1.06); }
.raised .raised-full {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  /* The inherited 1.5 makes a 30px line box around 20px glyphs, which throws
     the centring off. Hug the type and let the padding do the spacing. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Shown at every width: on a phone the total has a line of its own under the
   wordmark, so there is room for the word. */
.raised .raised-word {
  display: inline;
  font-family: var(--display);
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

/* Scorekeeping is an action, not navigation, so it keeps the outlined
   treatment rather than becoming another menu pill -- but it is on screen at
   every width. A tablet at the scorer's bench is a narrow viewport too.
   Neutral rather than lime: the total is the lime thing in this header now. */
.site-header .sk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--chip);
  color: var(--text);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header .sk:hover { border-color: var(--text); }

/* Phone and tablet: the header collapses to the wordmark with the total under
   it on the left, and the Menu button on the right. The button drops a panel
   holding the pages, a divider, then Scorekeeper and the theme switch. The
   panel overlays the page rather than pushing it down, so the header is the
   same height open or shut. */
@media (max-width: 899px) {
  .site-header .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'brand  menu'
      'raised menu';
    align-items: center;
    justify-items: start;
    gap: 6px 12px;
    padding: 10px var(--gutter);
  }
  .site-header .brand { grid-area: brand; min-height: 0; }
  .site-header .raised-slot { grid-area: raised; }
  .site-header .raised-slot:empty { display: none; }
  .site-header .raised { min-height: 34px; padding: 0 12px; }
  .site-header .menu { grid-area: menu; justify-self: end; position: relative; }

  .menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    flex-direction: column;
    gap: 6px;
    width: min(280px, calc(100vw - 2 * var(--gutter)));
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
  .menu[data-open] .menu-panel { display: flex; }
  .menu-panel .nav { flex-direction: column; gap: 6px; }
  .menu-panel .nav a { display: flex; width: 100%; }
  .menu-divider { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
  .menu-panel .sk { width: 100%; }
  /* A small pill hugging its content, set to the right: a setting, not a
     destination, so it should not look like another row of the menu. */
  .menu-panel .theme-toggle {
    width: auto;
    height: 36px;
    align-self: flex-end;
    margin-left: 0;
    gap: 8px;
    padding: 0 12px;
    font-size: 13px;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .menu-panel .theme-toggle svg { width: 16px; height: 16px; }
  .menu-panel .theme-label { display: inline; }
}


.wrap { max-width: var(--max); margin: 0 auto; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 14px var(--gutter) 0;
  font-size: 13px;
  color: var(--muted);
}
.meta b { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------------- typography */

h1, h2, h3 { margin: 0; font-family: var(--display); }

.h2 {
  margin: 0 0 6px;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--accent-text);
}
h1.h2 { font-size: clamp(28px, 7vw, 38px); }

.sec { padding: 22px var(--gutter) 8px; }

.shead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.link:hover { color: var(--text); }

/* ------------------------------------------------------------------- live */

.livetag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--live);
  color: #0a0a0b;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .1em;
  transform: skewX(-8deg);
}
.livetag .blink {
  width: 7px; height: 7px; border-radius: 4px; background: #0a0a0b;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.top { display: grid; }
.live { padding: 20px var(--gutter) 26px; border-bottom: 1px solid var(--line); }
.live-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.live-head .stage { margin-left: auto; font-size: 13px; color: var(--muted); }
.period-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.sb .side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sb .side.r { align-items: flex-end; text-align: right; }
.sb .big {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 112px;
  line-height: .8;
  font-variant-numeric: tabular-nums;
}
.sb .big.lose { color: var(--dim); }
.sb .slash { height: 6px; width: 64px; transform: skewX(-20deg); }
.sb .tn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.sb .vs {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.live-foot {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

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

.ghost, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--chip);
  border-radius: 0; /* square everywhere except the nav pills */
  background: transparent;
  color: var(--text);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ghost:hover, .btn:hover:not(:disabled) { border-color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.block, .ghost.block { width: 100%; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.goal { background: var(--goal); border-color: var(--goal); color: var(--ink); }
.btn.warn { background: var(--penalty); border-color: var(--penalty); color: #0a0a0b; }
.btn.danger { background: var(--live); border-color: var(--live); color: #0a0a0b; }
.btn.primary:hover:not(:disabled),
.btn.goal:hover:not(:disabled),
.btn.warn:hover:not(:disabled),
.btn.danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn.sm { min-height: 44px; font-size: 13px; padding: 0 13px; }
.btn.lg { min-height: 64px; font-size: 22px; letter-spacing: .08em; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------------- standings */

.std { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.std:last-child { border-bottom: 0; }
.std .rank { width: 18px; color: var(--muted); font-weight: 600; }
.std .bar { width: 4px; height: 22px; flex: none; }
.std .n {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
}
.std .gp { width: 28px; text-align: right; color: var(--muted); }
.std .pts {
  width: 48px;
  text-align: right;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.std-head {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
}
.std-head span:first-child { width: 28px; text-align: right; }
.std-head span:last-child { width: 48px; text-align: right; }

/* ------------------------------------------------------------- game lists */

.next { display: grid; }
.game {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.game:last-child { border-bottom: 0; }
.game .gt { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; }
.game .gt span { font-size: 13px; color: var(--muted); }
.game .tm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
}
.game .tm .score {
  margin-left: auto;
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.game .tm.lose, .game .tm.lose .score { color: var(--dim); }
.game .rink { font-size: 12px; color: var(--muted); margin-top: 4px; }
.game .gfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sw { width: 10px; height: 10px; flex: none; }

/* --------------------------------------------------------- colour chips */

/* Every chip that paints a team's sweater carries a hairline, because two of
   the four kits are a problem without one: Northeastern black disappears into
   a near-black page, and Merrimack gold disappears into a white one. The ring
   follows the theme rather than the colour, so it is right in both. It also
   respects an inline border-radius, which is where most of these set theirs. */
.sw, .swatch, .std .bar, .sb .slash {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%);
}
:root[data-theme='light'] .sw,
:root[data-theme='light'] .swatch,
:root[data-theme='light'] .std .bar,
:root[data-theme='light'] .sb .slash {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 22%);
}

/* ----------------------------------------------------------------- finals */

.bottom { display: grid; }
.finals { display: grid; grid-template-columns: 1fr; gap: 10px; }
.fin { border: 1px solid var(--chip); padding: 14px; }
.fin.champ { border-color: var(--accent-text); }
.fin .kind {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fin.champ .kind { color: var(--accent-text); }
.fin .when {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  margin: 6px 0;
}
.fin .who { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------ fundraising */

.fund { margin: 26px var(--gutter) 0; padding: 20px; background: var(--accent); color: var(--ink); }
.fund .for {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.fund .total {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 64px;
  line-height: .9;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.fund .fund-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-weight: 600;
}
.donate {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--accent);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.donate:hover { filter: brightness(1.2); }

/* ------------------------------------------------------------ stream link */

.stream-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--live);
  color: var(--live);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stream-link:hover { background: var(--live); color: #0a0a0b; }
.stream-link.compact { font-size: 12px; min-height: 28px; padding: 0 9px; }

/* On a live game, watching it is a primary thing to do, so it gets a full
   row under the score rather than a chip wedged into the header line. */
.live-watch { margin-top: 18px; }
.live-watch .stream-link {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: 15px;
}
.stream-link .stream-dot {
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

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

.panel { background: var(--surface); border: 1px solid var(--line); }
.panel-pad { padding: 16px; }

.grid { display: grid; gap: 12px; }
.grid.two, .grid.three { grid-template-columns: 1fr; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--chip);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge.live {
  background: var(--live);
  border-color: var(--live);
  color: #0a0a0b;
  font-style: italic;
  font-weight: 900;
  transform: skewX(-8deg);
}
.badge.live .dot {
  width: 7px; height: 7px; border-radius: 4px; background: #0a0a0b;
  animation: blink 1.4s ease-in-out infinite;
}
.badge.final { color: var(--dim); }
.badge.soon { color: var(--accent-text); border-color: var(--accent-text); }
.badge.champ { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.badge.coin { color: var(--live); border-color: var(--live); }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

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

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  min-width: 520px;
}
table.data th {
  position: sticky;
  top: 0;
  background: var(--bg);
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
table.data td { padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th:first-child, table.data td:first-child,
table.data th:nth-child(2), table.data td:nth-child(2) { text-align: left; }
table.data tbody tr:hover { background: var(--row-hover); }
table.data td.name { white-space: normal; min-width: 150px; }
table.data .rank { color: var(--muted); width: 30px; }
table.data td.strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 18px;
  color: var(--text);
}
table.data tr.scored td.name a { font-weight: 700; }
table.data td.name .tag { margin-left: 6px; }

/* The compact table shares a row with the live game, so it must fit rather
   than scroll sideways inside its column. */
.table-wrap.compact table.data { min-width: 0; width: 100%; }
.table-wrap.compact table.data th,
.table-wrap.compact table.data td { padding: 9px 6px; }
.table-wrap.compact table.data td:nth-child(2) { white-space: normal; }

.team-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.team-chip .swatch { width: 8px; height: 18px; flex: none; }
.team-chip .label {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- events */

.events { display: grid; }
.period-head {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 18px 0 7px;
  border-bottom: 1px solid var(--line);
}
.event {
  display: grid;
  grid-template-columns: 56px 4px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.event .when {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.event.penalty .when { color: var(--penalty); }
.event .swatch { align-self: stretch; min-height: 26px; }
.event .who { font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; }
.event .who .jersey { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.event .detail { font-size: 13px; color: var(--muted); margin-top: 2px; }
.event .tag {
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 2px 7px;
  border: 1px solid var(--chip);
  color: var(--muted);
  white-space: nowrap;
}
.event .tag.pp { color: var(--accent-text); border-color: var(--accent-text); }
.event .tag.sh { color: var(--text); border-color: var(--text); }
.event .tag.en { color: var(--live); border-color: var(--live); }
.event .edit {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--chip);
  background: none;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.event .edit:hover { border-color: var(--text); color: var(--text); }

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

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .hint { font-size: 13px; color: var(--muted); }
input[type='text'], input[type='email'], input[type='tel'], input[type='number'],
input[type='url'], input[type='date'], input[type='time'],
input[type='datetime-local'], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  background: var(--bg);
  border: 1px solid var(--chip);
  border-radius: 0;
  color: var(--text);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-text); outline: none; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.form-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr; }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.segmented button {
  min-height: 46px;
  border: 1px solid var(--chip);
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.segmented button[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--chip);
  border-radius: 22px;
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 800; }
.chip.wide { flex: 1 1 140px; }

/* ------------------------------------------------------------ the pickers */

.picker { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.picker button {
  position: relative; /* anchors the A1/A2/A3 marker */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--chip);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.picker button:hover { border-color: var(--text); color: var(--text); }
.picker button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.picker .jersey {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.picker .pname {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.picker button .order {
  position: absolute; top: 3px; right: 6px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

/* ------------------------------------------------------------- the keypad */

.clockpad { display: grid; gap: 12px; }
.clockpad .readout {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(44px, 14vw, 64px);
  line-height: 1;
  text-align: center;
  padding: 10px 0;
  background: var(--bg);
  border: 1px solid var(--chip);
  font-variant-numeric: tabular-nums;
}
.clockpad .readout.empty { color: var(--dim); }
.clockpad .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.clockpad .keys button {
  min-height: 56px;
  border: 1px solid var(--chip);
  background: var(--surface);
  color: var(--text);
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  cursor: pointer;
}
.clockpad .keys button:active { background: var(--accent); color: var(--ink); }
.clockpad .keys button.util {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.clockpad .ends { text-align: center; font-size: 14px; color: var(--accent-text); min-height: 21px; }

/* -------------------------------------------------------------- the sheet */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  width: 100%;
  max-width: 620px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
}
.sheet header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sheet header h3 {
  flex: 1;
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.sheet .close {
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--chip);
  background: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}
.sheet .close:hover { border-color: var(--text); color: var(--text); }
.sheet .body { flex: 1; padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet .foot {
  display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sheet .foot .btn { flex: 1; }
.sheet .step { margin-bottom: 20px; }
.sheet .step > .label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet .step > .label .note {
  font-family: var(--body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: 12px;
  color: var(--dim);
}

.team-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-toggle button {
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid var(--chip);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
}
.team-toggle button[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------------- misc */

.empty { text-align: center; padding: 36px 16px; color: var(--muted); border: 1px solid var(--line); }
.empty strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}

.tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  min-height: 46px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.tabs button[aria-selected='true'] { color: var(--text); border-bottom-color: var(--accent); }

.toast-stack {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 200;
  display: grid; gap: 8px; width: min(440px, calc(100vw - 28px));
}
.toast { padding: 13px 16px; background: var(--surface); border: 1px solid var(--chip); font-weight: 600; font-size: 14px; }
.toast.error { background: var(--live); border-color: var(--live); color: #0a0a0b; }
.toast.ok { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin-top: 18px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.skeleton { background: var(--surface); border: 1px solid var(--line); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.back-link:hover { color: var(--text); }

.roster-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.player-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.player-card:hover { border-color: var(--chip); }
.player-card .avatar {
  width: 54px; height: 54px; flex: none;
  background: var(--bg);
  display: grid; place-items: center;
  overflow: hidden;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  color: var(--dim);
}
.player-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-card .pn { font-family: var(--display); font-weight: 700; text-transform: uppercase; }
.player-card .ps { display: block; font-size: 12px; color: var(--muted); }
.player-card .pg {
  justify-self: end;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat-row .stat { background: var(--bg); padding: 12px 6px; text-align: center; }
.stat-row .stat .v {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-row .stat .k {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.bio-list { display: grid; }
.bio-list div {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.bio-list .k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}

.site-footer { border-top: 1px solid var(--line); margin-top: 28px; }
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 22px var(--gutter) 28px;
  font-size: 13px;
}
.site-footer a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .livetag .blink, .badge.live .dot, .skeleton { animation: none; }
}

/* ================================================================ desktop */

@media (min-width: 900px) {
  :root { --gutter: 32px; }

  .site-header .shell { flex-wrap: nowrap; padding: 12px var(--gutter); gap: 16px; }
  /* The total stays beside the wordmark at every width: it reads as part of
     the masthead rather than as another thing in the menu. The menu follows,
     and the controls are pushed to the far end. */
  /* There is room for the lot, so nothing is hidden and the button goes. */
  .site-header .nav { flex: 0 1 auto; margin-left: 28px; padding: 0; flex-wrap: nowrap; overflow-x: auto; }
  .site-header .nav a { display: inline-flex; }
  /* The menu wrapper and its panel step aside, so the links, Scorekeeper and
     the theme switch lay out in the header row as if they were its children. */
  .site-header .menu, .site-header .menu-panel { display: contents; }
  .menu-divider { display: none; }
  .menu-toggle { display: none; }
  .site-header .sk { margin-left: auto; }
  .site-header .theme-toggle { margin-left: 0; }

  .raised { padding: 0 16px; }
  .raised .raised-full { font-size: 22px; }

  .meta { padding: 20px var(--gutter) 0; }

  .top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .live { padding: 28px 40px 36px var(--gutter); border-bottom: 0; border-right: 1px solid var(--line); }
  .sb .big { font-size: 200px; }
  .sb .slash { height: 8px; width: 110px; }
  .sb .tn { font-size: 36px; }
  .stdsec { padding: 28px var(--gutter) 24px 40px; }

  .sec { padding: 32px var(--gutter) 8px; }
  .h2 { font-size: 32px; margin-bottom: 12px; }

  .next { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .next .game {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
  }
  .next .game:last-child { border-bottom: 1px solid var(--line); }
  .next .game .gt { font-size: 34px; }

  .finals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; padding-bottom: 12px; }
  .fund { margin: 32px var(--gutter) 8px 40px; padding: 24px; }

  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid.two { grid-template-columns: 1fr 1fr; }
  .actionbar { grid-template-columns: 1fr 1fr auto; }

  .site-footer .shell { padding: 24px var(--gutter) 32px; }

  /* With room, the entry sheet centres. Below this it stays bottom-anchored,
     which is right for a thumb -- including on a tablet in portrait at the
     scorer's bench, which is narrower than this. */
  .sheet-backdrop { align-items: center; padding: 24px; }
}

/* Landscape phones: the two actions that matter must not need a scroll. */
@media (max-height: 520px) and (orientation: landscape) {
  .live { padding: 12px var(--gutter) 16px; }
  .sb .big { font-size: clamp(48px, 13vh, 84px); }
  .sheet { max-height: 96dvh; }
  .clockpad .keys button { min-height: 46px; font-size: 22px; }
  .clockpad .readout { font-size: 36px; }
}

/* ------------------------------------------- section headings on sub-pages

   The home page uses sectionHead() from components.mjs, which emits the
   .shead / .h2 pair straight from the reference. The other pages predate it
   and build a heading inline as .section-head with a hairline .rule filler.
   Rather than rewrite ten pages for no visual gain, the older markup is given
   the same type and colour here. Both produce the same look. */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 12px;
}
.section-head h1,
.section-head h2,
.section-head h3 {
  flex: none;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: 1.05;
}
.section-head h1 { font-size: clamp(28px, 7vw, 38px); }
.section-head h2 { font-size: 26px; }
.section-head h3 { font-size: 20px; }
.section-head .rule { flex: 1 1 40px; height: 1px; background: var(--line); align-self: center; }
.section-head .more {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-head .more:hover { color: var(--text); }

/* Bare headings outside a .section-head still need a size. */
h1 { font-size: clamp(28px, 7vw, 38px); font-style: italic; font-weight: 900; text-transform: uppercase; }
h2 { font-size: 24px; font-weight: 800; text-transform: uppercase; }
h3 { font-size: 19px; font-weight: 800; text-transform: uppercase; }

/* Sub-pages lay their content out inside .shell, which the home page does not
   use -- it goes full-bleed so the live panel can meet the standings. */
main > .shell { padding-top: 8px; padding-bottom: 48px; }

/* A grid of game rows on the team and teams pages. */
.score-strip { display: grid; gap: 0; }
@media (min-width: 900px) {
  .score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}

.champ-banner { border-color: var(--accent-text); }