/* Bola à Sexta: one hand-written stylesheet, served as-is (ADR-030).
   Pavilhão: Friday night on the futsal court. The planned teams are drawn
   as the court itself, portrait on a phone and landscape from 640px, on the
   pavilion's blue floor, and on the home page the header and the next match
   share its run-off navy. That matchday poster is the only saturated thing
   on the site, and everything around it is quiet and exact. Claros and Escuros are a light
   and a dark chip that keep their tone in both colour schemes; the words
   carry the meaning. State (a result, a team, an avatar's tone) comes in
   through data attributes, so class names stay literal and say what a thing
   is. Colours are custom properties; dark mode only remaps them. */

:root {
  --ground: #f3f5f8;
  --surface: #ffffff;
  --text: #0f1a2e;
  --muted: #56627a;
  --line: #dce2ea;
  --brand: #1d5aa6;
  /* Follows --muted into dark mode on its own. */
  --future: color-mix(in srgb, var(--muted) 45%, transparent);

  --floor: #2862a6;
  --floor-light: #2b67ad;
  --floor-dark: #1d4f8f;
  --runoff: #163a66;
  --paint: rgb(255 255 255 / 0.9);
  --on-floor: #ffffff;
  --on-floor-soft: rgb(255 255 255 / 0.9);
  --on-floor-line: rgb(255 255 255 / 0.25);
  --card-shade: rgb(15 26 46 / 0.18);
  /* The court on a Friday without a game: grey, with its lines faint. */
  --closed-runoff: #4b5262;
  --closed-floor-light: #6c7486;
  --closed-floor-dark: #5f6779;
  --closed-paint: rgb(255 255 255 / 0.42);

  --chip-light: #f3f7fc;
  --chip-light-ink: #0f1a2e;
  --chip-light-edge: rgb(15 26 46 / 0.3);
  --chip-dark: #081830;
  --chip-dark-ink: #ffffff;
  --chip-dark-edge: rgb(255 255 255 / 0.45);

  --win: #1e7b48;
  --draw: #66707f;
  --loss: #b3261e;
  /* A badge reached, in the badge art's own lime: like the art, the same in
     both colour schemes. */
  --milestone: #c6ef4e;
  --tone-bg-l: 90%;
  --tone-fg-l: 26%;

  --choice-checked-bg: #e3edf9;
  --notice-bg: #ecf7f0;
  --notice-border: #9fd3b3;
  --notice-text: #14532d;
  --error-bg: #fdeeed;
  --error-border: #f0a9a4;
  --error-text: #7f1d1d;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b111c;
    --surface: #111a29;
    --text: #e3e9f3;
    --muted: #97a3b8;
    --line: #1f2a3c;
    --brand: #8db8ff;
    --runoff: #102c50;
    --closed-runoff: #252b36;
    --closed-floor-light: #3b4353;
    --closed-floor-dark: #343b4a;
    --closed-paint: rgb(255 255 255 / 0.32);
    --chip-dark: #050f1f;
    --win: #23905a;
    --draw: #5f6978;
    --loss: #c7352c;
    --tone-bg-l: 22%;
    --tone-fg-l: 82%;
    --choice-checked-bg: #16284a;
    --notice-bg: #0f2a1c;
    --notice-border: #1f6b43;
    --notice-text: #c7f0d6;
    --error-bg: #2d1111;
    --error-border: #8a2a24;
    --error-text: #fbd5d2;
    --card-shade: rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}

/* Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--font);
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

ol,
ul {
  list-style: none;
}

abbr {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  text-indent: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}

textarea {
  resize: vertical;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding-block: 0;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/* app.js toggles [hidden] on elements that also have a display value. */
[hidden] {
  display: none !important;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Page frame (site and admin) */

body {
  min-height: 100vh;
  background-color: var(--ground);
  color: var(--text);
}

.wrap {
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.page {
  padding-bottom: 3rem;
}

.site-header {
  border-bottom: 1px solid var(--line);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
}

.brand {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
}

/* The compact mark: the crest without its lettering, which the wordmark
   beside it already says. */
.brand-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
}

/* The site's sections (RULES.md §20): in the header from 40rem, the
   section the page belongs to underlined; below it, behind a Menu button
   that opens them in a drawer from the right. */
.site-nav {
  display: none;
  gap: 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}

.site-nav a[aria-current="true"] {
  color: var(--text);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

body[data-page="home"] .site-nav a[aria-current="true"] {
  color: var(--on-floor);
}

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
}

body[data-page="home"] .menu-button {
  border-color: var(--on-floor-line);
}

/* Three bars: one bar and two shadows. */
.menu-icon {
  width: 1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow:
    0 -5px currentColor,
    0 5px currentColor;
}

/* The drawer: a popover, as a badge's card is, so it opens and closes
   without script, Esc and a tap outside close it, and focus goes back to
   the button. Each link says what's behind it. */
.site-menu {
  inset: 0 0 0 auto;
  flex-direction: column;
  width: min(20rem, 86vw);
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: -0.5rem 0 2rem var(--card-shade);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-menu:popover-open {
  display: flex;
}

.site-menu::backdrop {
  background: rgb(5 10 20 / 0.5);
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.5rem;
}

.menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.menu-brand .brand-mark {
  width: 1.75rem;
  height: 1.75rem;
}

.menu-close {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}

.menu-links {
  display: grid;
  gap: 0.25rem;
  margin-top: 1rem;
}

.menu-link {
  display: grid;
  align-content: center;
  gap: 0.125rem;
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
}

.menu-link[aria-current="true"] {
  background: var(--choice-checked-bg);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.menu-link-name {
  font-size: 1.125rem;
  font-weight: 700;
}

.menu-link-note {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.menu-foot {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 2.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.menu-button:focus-visible,
.menu-close:focus-visible,
.menu-link:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

@media (min-width: 40rem) {
  .site-nav {
    display: flex;
  }

  .menu-button {
    display: none;
  }
}

/* The site's name and the year. The way into the admin for Editors is at
   the end of the phone's menu; Cloudflare Access guards it. */
.site-footer {
  border-top: 1px solid var(--line);
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 3rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Shared */

.page-title {
  margin-top: 0.75rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.page-summary {
  margin-top: 0.25rem;
  color: var(--muted);
}

.page-summary strong {
  color: var(--text);
}

.page-summary a {
  color: var(--brand);
  font-weight: 650;
}

.page-section {
  margin-top: 2.5rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.page-section > .section-title {
  margin-bottom: 0.75rem;
}

.section-note {
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
  color: var(--muted);
}

.empty {
  color: var(--muted);
}

.share-link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 700;
  color: var(--brand);
}

/* Every table fits from 20rem, so its frame doesn't scroll: a scrolling
   frame would hold the sticky header row inside it. Narrower than that
   (a small phone, or large text), the frame scrolls sideways instead. */
@media (max-width: 19.9375rem) {
  .table-scroll {
    overflow-x: auto;
  }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* The next match: a matchday poster. On the home page the header and the
   next match sit on the court's run-off navy, edge to edge, and the court's
   own run-off melts into it. The headline says how far off the game is
   (app.js; until then, the weekday), the eyebrow names the game in the
   badge art's lime, and the forecast arrives as a chip. */

body[data-page="home"] .site-header {
  border-bottom-color: transparent;
  background: var(--runoff);
  color: var(--on-floor);
}

body[data-page="home"] .site-nav {
  color: var(--on-floor-soft);
}

.matchday {
  padding-bottom: 1.5rem;
  background: var(--runoff);
  color: var(--on-floor);
}

.matchday-head {
  display: grid;
  gap: 0.25rem;
  padding-block: 1rem 1.25rem;
}

.matchday-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--milestone);
}

.matchday-countdown {
  font-size: 3.25rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.045em;
}

.matchday-date {
  margin-top: 0.375rem;
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.matchday-day,
.matchday-time {
  white-space: nowrap;
}

.matchday-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.9375rem;
  color: var(--on-floor-soft);
}

.weather-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.625rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  font-size: 0.875rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--on-floor);
}

.weather-chip[hidden] {
  display: none;
}

/* The court. Two halves share the halfway line; each half draws its
   penalty area (two quarter circles joined by a straight, 6 m deep) and
   its goal; the centre circle and spot sit on top. On a phone the team's
   name and what to wear sit inside its penalty area, Escuros mirrored so
   both face the centre. */

.court {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 1rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--runoff);
  color: var(--on-floor);
}

.court :focus-visible {
  outline-color: var(--on-floor);
}

.court::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.5rem;
  height: 5.5rem;
  border: 2px solid var(--paint);
  border-radius: 50%;
  background: radial-gradient(circle, var(--paint) 0 3px, transparent 3.5px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.half {
  --box: 6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 2px solid var(--paint);
}

.half[data-team="light"] {
  padding: 6.75rem 0.875rem 3.25rem;
  border-bottom-width: 1px;
  background: var(--floor-light);
}

.half[data-team="dark"] {
  padding: 3.25rem 0.875rem 6.75rem;
  border-top-width: 1px;
  background: var(--floor-dark);
}

.half::before,
.half::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--paint);
}

.half::before {
  width: 76%;
  height: var(--box);
}

.half::after {
  width: 24%;
  height: 0.625rem;
}

.half[data-team="light"]::before {
  top: -2px;
  border-top: 0;
  border-radius: 0 0 var(--box) var(--box);
}

.half[data-team="light"]::after {
  top: calc(-0.625rem - 2px);
  border-bottom: 0;
}

.half[data-team="dark"]::before {
  bottom: -2px;
  border-bottom: 0;
  border-radius: var(--box) var(--box) 0 0;
}

.half[data-team="dark"]::after {
  bottom: calc(-0.625rem - 2px);
  border-top: 0;
}

.team-label {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transform: translateX(-50%);
}

.half[data-team="light"] .team-label {
  top: 0.75rem;
}

.half[data-team="dark"] .team-label {
  bottom: 0.75rem;
  flex-direction: column-reverse;
}

.team-shirt {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--on-floor-soft);
}

.roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.75rem;
}

.roster-row {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  min-height: 3rem;
}

.roster-rank {
  flex: none;
  width: 1.25rem;
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--on-floor-soft);
}

.roster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Home: each planned player's gold stars beside the name. */
.roster-line {
  display: flex;
  align-items: center;
  min-width: 0;
}

.roster-line .stars {
  flex: none;
  margin-left: 0.3125rem;
}

/* A side's wins this season, beside what to wear. */
.team-wins {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
  color: var(--on-floor);
}

/* The crest in the centre circle, over its spot. */
.court-crest {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Claros and Escuros */

.team-chip {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.5;
}

.team-chip[data-team="light"] {
  background: var(--chip-light);
  color: var(--chip-light-ink);
  box-shadow: inset 0 0 0 1px var(--chip-light-edge);
}

.team-chip[data-team="dark"] {
  background: var(--chip-dark);
  color: var(--chip-dark-ink);
  box-shadow: inset 0 0 0 1px var(--chip-dark-edge);
}

.result-mark {
  display: inline-block;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  border-radius: 0.1875rem;
  vertical-align: -0.125rem;
}

.result-mark[data-result="light"] {
  background: var(--chip-light);
  box-shadow: inset 0 0 0 1px var(--chip-light-edge);
}

.result-mark[data-result="dark"] {
  background: var(--chip-dark);
  box-shadow: inset 0 0 0 1px var(--chip-dark-edge);
}

.result-mark[data-result="draw"] {
  background: linear-gradient(90deg, var(--chip-light) 50%, var(--chip-dark) 50%);
  box-shadow: inset 0 0 0 1px var(--chip-light-edge);
}

.fixture-margin {
  margin-left: 0.5rem;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

/* Standings */

.standings {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.standings th {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
}

/* The header row sticks to the top of the screen, so the columns keep
   their names down to the last place. Its rule is a shadow, as a collapsed
   border stays behind when the cell sticks. */
.standings thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 0;
  background: var(--ground);
  box-shadow: inset 0 -1px var(--line);
}

/* Below 64rem the chapter chips stick there first: the header row stops
   under them. */
body:has(.chapter-nav) .standings thead th {
  top: calc(3.75rem + 1px);
}

.standings td {
  height: 3.5rem;
  padding: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.standings .num {
  width: 1.625rem;
  text-align: center;
  font-size: 0.9375rem;
}

.standings .col-pts {
  width: 2rem;
  text-align: right;
}

.standings td.col-pts {
  font-size: 1.0625rem;
  font-weight: 800;
}

.standings .col-rank {
  width: 3rem;
  white-space: nowrap;
}

.standings .col-player {
  min-width: 7rem;
}

.standings td.col-rank {
  font-weight: 700;
}

.standings .col-form {
  display: none;
}

.move {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: 0.1em;
}

/* How many places, beside the arrow. */
.move-count {
  margin-left: 1px;
  font-size: 0.6875rem;
}

.move[data-move="up"] {
  color: var(--win);
}

.move[data-move="down"] {
  color: var(--loss);
}

.standing-link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
  min-height: 3rem;
}

.avatar {
  --hue: 212;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: hsl(var(--hue) 45% var(--tone-bg-l));
  color: hsl(var(--hue) 55% var(--tone-fg-l));
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.avatar[data-tone="0"] {
  --hue: 8;
}

.avatar[data-tone="1"] {
  --hue: 32;
}

.avatar[data-tone="2"] {
  --hue: 52;
}

.avatar[data-tone="3"] {
  --hue: 95;
}

.avatar[data-tone="4"] {
  --hue: 150;
}

.avatar[data-tone="5"] {
  --hue: 178;
}

.avatar[data-tone="6"] {
  --hue: 200;
}

.avatar[data-tone="7"] {
  --hue: 230;
}

.avatar[data-tone="8"] {
  --hue: 265;
}

.avatar[data-tone="9"] {
  --hue: 318;
}

/* The season tables leave out the initials below 64rem, so the name, its
   stars and armbands have the room; from 64rem they come back. */
.standings[data-avatars="wide"] .standing-link {
  grid-template-columns: minmax(0, 1fr);
}

.standings[data-avatars="wide"] .avatar {
  display: none;
}

.standing-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  line-height: 1.3;
}

.standing-name:last-child {
  grid-row: 1 / span 2;
}

.ineligible {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.form {
  display: inline-flex;
  gap: 2px;
}

.form-inline .form {
  margin-top: 0.1875rem;
}

.pill {
  display: inline-grid;
  place-items: center;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
  font-size: 0.5625rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.pill[data-state="win"] {
  background: var(--win);
}

.pill[data-state="draw"] {
  background: var(--draw);
}

.pill[data-state="loss"] {
  background: var(--loss);
}

.pill[data-state="absent"] {
  box-shadow: inset 0 0 0 1.5px var(--muted);
  color: var(--muted);
}

/* Home, below the court: the table, then the last match and the season. */

.table-section {
  margin-top: 2.5rem;
}

.sidebar {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.side-block {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.side-title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.side-meta {
  font-size: 0.875rem;
  color: var(--muted);
}

.last-side-head .team-chip,
.player-status .team-chip {
  padding: 0 0.375rem;
  font-size: 0.8125rem;
}

/* The last match: the result as a headline, then each side with its faces
   and what it did, the winners' names in full ink. */
.side-eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.last-headline {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.last-headline .result-mark {
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: 0;
}

.last-sides {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.last-side {
  display: grid;
  gap: 0.3125rem;
}

.last-side-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.avatar-stack {
  display: flex;
}

.avatar-stack .avatar {
  grid-row: auto;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.5625rem;
  box-shadow: 0 0 0 2px var(--surface);
}

/* Just enough overlap to read as a group, not enough to hide initials. */
.avatar-stack .avatar + .avatar {
  margin-left: -0.1875rem;
}

.last-outcome {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.last-side[data-outcome="win"] .last-outcome {
  color: var(--win);
}

.last-names {
  font-size: 0.875rem;
  color: var(--muted);
}

.last-side[data-outcome="win"] .last-names {
  font-weight: 600;
  color: var(--text);
}

.last-absent {
  font-size: 0.8125rem;
  color: var(--muted);
}

.last-badges {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.last-badges li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.last-badges img {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.last-badges strong {
  display: block;
  font-weight: 700;
  color: var(--text);
}

/* The season's Fridays in the sidebar: the Arquivo's strip, a little
   shorter while it's one line (its columns are in the strip's rules). */
.side-block .strip-day {
  height: 1.5rem;
}

.side-block .strip-label {
  font-size: 0.625rem;
  font-weight: 600;
}

.side-block .calendar-legend {
  margin-top: 0;
  gap: 0.125rem 0.75rem;
  font-size: 0.75rem;
}

.side-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 700;
  color: var(--brand);
}

/* Attendance: the whole season, one square per Friday, grouped by month
   with a wider gap between months. Squares stretch to fill the width; once
   they would drop below 11px the grid scrolls sideways inside itself, names
   pinned on the left. Fridays still to come are dashed. */

.attendance {
  --names: 4.5rem;
  display: grid;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.attendance-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  min-width: 100%;
}

.attendance-months {
  align-items: flex-end;
}

/* Empty, so it would have no height and the month labels would scroll
   over it. */
.attendance-months .attendance-name {
  align-self: stretch;
}

.attendance-name {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 var(--names);
  overflow: hidden;
  padding-right: 0.5rem;
  background: var(--ground);
  /* Covers the row's gap too, so no square scrolls through beside it. */
  box-shadow: 0.5rem 0 0 var(--ground);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
}

/* A month's share of the width is its Friday count, and it never gets
   narrower than that many smallest squares. */
.attendance-month {
  --fridays: 4;
  display: flex;
  flex: var(--fridays) 1 0;
  gap: 3px;
  min-width: calc(var(--fridays) * 0.6875rem + (var(--fridays) - 1) * 3px);
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
}

.attendance-month[data-fridays="1"],
.strip-month[data-fridays="1"],
.strip-pad[data-fridays="1"] {
  --fridays: 1;
}

.attendance-month[data-fridays="2"],
.strip-month[data-fridays="2"],
.strip-pad[data-fridays="2"] {
  --fridays: 2;
}

.attendance-month[data-fridays="3"],
.strip-month[data-fridays="3"],
.strip-pad[data-fridays="3"] {
  --fridays: 3;
}

.attendance-month[data-fridays="5"],
.strip-month[data-fridays="5"],
.strip-pad[data-fridays="5"] {
  --fridays: 5;
}

.day {
  flex: 1 1 0;
  min-width: 0.6875rem;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--line);
}

.day[data-state="win"] {
  background: var(--win);
}

.day[data-state="draw"] {
  background: linear-gradient(135deg, var(--win) 50%, var(--line) 50%);
}

.day[data-state="loss"] {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--loss);
}

.day[data-state="absent"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--muted);
}

.day[data-state="out"] {
  background: transparent;
}

.day[data-state="future"] {
  background: transparent;
  border: 1px dashed var(--future);
}

.attendance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.attendance-legend li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.attendance-legend .day {
  flex: none;
  width: 0.6875rem;
}

.stats-subtitle {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.highlights {
  border-top: 1px solid var(--line);
}

.highlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "who value";
  column-gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.highlight .stat-label {
  grid-area: label;
}

.highlight-who {
  grid-area: who;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.highlight-avatars {
  display: flex;
  flex: none;
}

.highlight-avatars .avatar {
  box-shadow: 0 0 0 2px var(--ground);
}

.highlight-avatars .avatar + .avatar {
  margin-left: -0.375rem;
}

/* On the season page the highlights sit in a sidebar card. */
.side-block .highlight-avatars .avatar {
  box-shadow: 0 0 0 2px var(--surface);
}

.side-block .highlight:last-child {
  border-bottom: 0;
}

.highlight-names {
  font-weight: 650;
}

.highlight-names a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.highlight-value {
  grid-area: value;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
}

.highlight-value strong {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 0.625rem;
  border-right: 1px solid var(--line);
}

.stat-tile:last-child {
  border-right: 0;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--muted);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.stat-unit {
  margin-left: 0.125rem;
  font-size: 1rem;
  color: var(--muted);
}

.stat-note {
  font-size: 0.75rem;
  color: var(--muted);
}

.stat-note[data-tone="good"] {
  font-weight: 650;
  color: var(--win);
}

.stat-note[data-tone="bad"] {
  font-weight: 650;
  color: var(--loss);
}

.split-bar {
  display: block;
  width: 100%;
  height: 1.75rem;
  margin-top: 0.375rem;
}

.split-segment[data-team="light"] {
  fill: var(--chip-light);
  stroke: var(--chip-light-edge);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.split-segment[data-team="dark"] {
  fill: var(--chip-dark);
  stroke: var(--chip-dark-edge);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.split-segment[data-team="draw"] {
  fill: var(--draw);
}

.split-keys {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.split-keys strong {
  color: var(--text);
}

.stat-facts {
  border-top: 1px solid var(--line);
}

.stat-fact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--line);
}

.stat-fact-label {
  color: var(--muted);
}

.stat-fact-value {
  font-weight: 700;
}

.stat-fact-value a {
  color: var(--brand);
}

.stat-fact-detail {
  font-weight: 400;
  color: var(--muted);
}

/* Season match calendar: a row per month, a cell per Friday, and the cell
   is the result, filled like the team chips. A phone shows the day and a
   short tag; from 64rem the cell names the winner, the sides and margin. */

.calendar {
  display: grid;
  gap: 4px;
}

.calendar-month {
  display: grid;
  grid-template-columns: 2.75rem repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.calendar-month > li {
  display: grid;
}

.calendar-label {
  align-content: center;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.15;
}

.calendar-year {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--muted);
}

.calendar-long,
.calendar-detail {
  display: none;
}

.calendar-day {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.125rem;
  min-height: 3rem;
  border-radius: 0.375rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.calendar-num {
  font-size: 1rem;
  font-weight: 750;
}

.calendar-word {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calendar-day[data-state="light"],
.calendar-key[data-state="light"],
.strip-day[data-state="light"] {
  background: var(--chip-light);
  color: var(--chip-light-ink);
  box-shadow: inset 0 0 0 1px var(--chip-light-edge);
}

.calendar-day[data-state="dark"],
.calendar-key[data-state="dark"],
.strip-day[data-state="dark"] {
  background: var(--chip-dark);
  color: var(--chip-dark-ink);
  box-shadow: inset 0 0 0 1px var(--chip-dark-edge);
}

.calendar-day[data-state="draw"],
.calendar-key[data-state="draw"],
.strip-day[data-state="draw"] {
  background: var(--draw);
  color: var(--chip-dark-ink);
}

.calendar-day[data-state="cancelled"],
.calendar-day[data-state="holiday"],
.calendar-key[data-state="cancelled"],
.calendar-key[data-state="holiday"],
.strip-day[data-state="cancelled"],
.strip-day[data-state="holiday"],
.day[data-state="none"] {
  background: var(--line);
}

.calendar-day[data-state="unrecorded"],
.calendar-key[data-state="unrecorded"],
.strip-day[data-state="unrecorded"],
.day[data-state="unrecorded"] {
  background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 6px);
}

.calendar-day[data-state="future"],
.calendar-key[data-state="future"],
.strip-day[data-state="future"] {
  border: 1px dashed var(--future);
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.calendar-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.calendar-key {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
}

/* Archive: an almanac. Each season's two years down a spine, its line (the
   champion and its games, or the leader while it runs), a strip of its
   Fridays, its split and its links; an ended season folds its calendar
   under them. From 64rem the years sit right-aligned beside a rail with a
   dot per season. */

.archive-legend {
  margin-top: 1rem;
}

.archive-seasons {
  margin-top: 1.5rem;
}

.archive-season {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}

.archive-years {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.archive-years a {
  color: inherit;
}

.archive-season[data-state="current"] .archive-years {
  color: var(--brand);
}

.archive-years-full {
  display: none;
}

.archive-season-body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.archive-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-weight: 650;
}

.archive-line a {
  color: var(--brand);
}

.archive-line-note {
  font-weight: 400;
  color: var(--muted);
}

.archive-medal {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}

.archive-current-tag {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--milestone);
  color: var(--chip-light-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.archive-summary {
  font-size: 0.875rem;
  color: var(--muted);
}

/* The strip: a cell per Friday, filled by the calendar's own rules so it
   always matches the legend, each month as wide as its Fridays (the
   --fridays rules sit with Presenças'). */

.season-strip {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.strip-month {
  --fridays: 4;
  flex: var(--fridays) 1 0;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.strip-days {
  display: flex;
  gap: 2px;
}

.strip-days > li {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
}

.strip-day {
  height: 2rem;
  border-radius: 2px;
}

.strip-label {
  overflow: hidden;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
}

/* Narrower than 36rem (a phone, the home sidebar) one line leaves cells a
   few pixels wide, so the strip reflows on its own width (ADR-063). Wider,
   the rows and the pads drop out and it stays one line. */
.strip-frame {
  container: strip / inline-size;
  min-width: 0;
}

.strip-row {
  display: contents;
}

.strip-pad {
  --fridays: 4;
  display: none;
}

/* The Arquivo: September to February, then March to July, each with its
   months above. The shorter half's pads keep every cell one width. */
@container strip (max-width: 36rem) {
  .season-strip[data-layout="rows"] {
    flex-direction: column;
    gap: 0.625rem;
  }

  .season-strip[data-layout="rows"] .strip-row {
    display: flex;
    gap: 4px;
  }

  .season-strip[data-layout="rows"] .strip-pad {
    display: block;
    flex: var(--fridays) 1 0;
  }

  .season-strip[data-layout="rows"] .strip-day {
    height: 1.5rem;
  }

  .season-strip[data-layout="rows"] .strip-label {
    order: -1;
  }
}

/* The home sidebar: a column per month, the month on top, its Fridays
   stacked under it. */
@container strip (max-width: 36rem) {
  .season-strip[data-layout="columns"] .strip-month {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .season-strip[data-layout="columns"] .strip-label {
    order: -1;
    overflow: visible;
    font-size: 0.625rem;
    font-weight: 700;
    text-align: center;
  }

  .season-strip[data-layout="columns"] .strip-days {
    flex-direction: column;
    gap: 3px;
  }

  .season-strip[data-layout="columns"] .strip-days > li {
    flex: none;
  }

  .season-strip[data-layout="columns"] .strip-day {
    height: 0.875rem;
  }
}

.archive-split .split-bar {
  height: 0.75rem;
  margin-top: 0;
}

.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.archive-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--brand);
}

.archive-calendar {
  margin-top: -0.75rem;
}

.archive-calendar > summary,
.matchups-details > summary,
.matchups-few > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.archive-calendar > summary::-webkit-details-marker,
.matchups-details > summary::-webkit-details-marker,
.matchups-few > summary::-webkit-details-marker {
  display: none;
}

.archive-calendar > summary::after,
.matchups-details > summary::after,
.matchups-few > summary::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.archive-calendar[open] > summary::after,
.matchups-details[open] > summary::after,
.matchups-few[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.archive-calendar-body {
  display: grid;
  padding-bottom: 0.5rem;
}

/* Match: the game first. The season and the game's number above the date,
   the result beside it, then the court with each side's outcome on its
   half, who missed it, the badges it brought, and the way to the games
   either side of it in the season. */

.match-eyebrow {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.match-eyebrow a {
  color: var(--brand);
}

.match-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.25rem;
}

/* On one line on a phone: the longest date ("29 de fevereiro de 2024")
   is about 11.5em wide. */
.match-head .page-title {
  margin-top: 0.25rem;
  font-size: min(1.75rem, calc((100vw - 2rem) / 13));
  white-space: nowrap;
}

.match-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.25rem;
  font-weight: 800;
}

/* Vitória, Derrota or Empate, by the side's chip; a win in the badge
   art's lime. */
.outcome-tag {
  padding: 0 0.4375rem;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--on-floor-line);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-floor-soft);
}

.outcome-tag[data-outcome="win"] {
  background: var(--milestone);
  box-shadow: none;
  color: var(--runoff);
}

.match-absent {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 1.25rem;
}

.match-absent dt {
  font-weight: 700;
}

.match-absent dd {
  color: var(--muted);
}

.match-absent a {
  font-weight: 600;
  color: var(--text);
}

.match-notes {
  color: var(--muted);
}

/* The badges a match brought: a tile each on the pavilion's blue, the art
   centred and the count in the badge art's lime. */
.milestone-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.5rem;
}

.milestone-tile {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 1rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--runoff);
  color: var(--on-floor);
}

.milestone-tile :focus-visible {
  outline-color: var(--on-floor);
}

.milestone-tile .badge-button {
  margin-bottom: 0.5rem;
}

.milestone-tile-badge {
  width: 4.5rem;
  height: 4.5rem;
}

.milestone-tile-title {
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--on-floor-soft);
  text-wrap: balance;
}

.milestone-tile-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--milestone);
  font-variant-numeric: tabular-nums;
}

.milestone-tile-names {
  margin-top: 0.375rem;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
}

.milestone-tile-note,
.milestone-tile-rule {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--on-floor-soft);
}

.milestone-tile-rule {
  padding-top: 0.375rem;
  border-top: 1px solid var(--on-floor-line);
}

/* Previous and next game; a phone gets the short date so it stays on one
   line. */
.match-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.match-pager-link {
  display: grid;
  align-content: center;
  min-height: 3.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.match-pager-link[data-dir="next"] {
  text-align: right;
}

.match-pager-link[data-state="none"] {
  border-style: dashed;
  background: none;
}

.match-pager-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.match-pager-date {
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.match-pager-link[data-state="none"] .match-pager-date {
  font-weight: 600;
  color: var(--muted);
}

.match-pager-long {
  display: none;
}

/* A Friday without a game (RULES.md §22): a match page's header with
   Cancelado or Feriado for the result, the court with nobody on it and a
   plaque over the centre circle, then Sem bola, the Fridays without a game
   around it as the calendar draws them, and the game pager. */

.result-mark[data-result="cancelled"],
.result-mark[data-result="holiday"] {
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--future);
}

.court[data-state="closed"] {
  --runoff: var(--closed-runoff);
  --floor-light: var(--closed-floor-light);
  --floor-dark: var(--closed-floor-dark);
  --paint: var(--closed-paint);
}

.court[data-state="closed"] .half,
.court[data-state="closed"] .half::before,
.court[data-state="closed"] .half::after {
  border-style: dashed;
}

.court[data-state="closed"] .team-chip {
  opacity: 0.55;
}

.court-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  gap: 0.25rem;
  width: min(19rem, calc(100% - 3rem));
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: 0 0.25rem 1.25rem var(--card-shade);
  color: var(--text);
  text-align: center;
  transform: translate(-50%, -50%);
}

.court-notice-word {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.court-notice-reason {
  font-size: 0.9375rem;
  color: var(--muted);
  text-wrap: balance;
}

.off-day-rule {
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.dry-spell-label {
  margin: -0.5rem 0 0.875rem;
  color: var(--muted);
}

/* As wide as its cells on a wide screen; a long run scrolls on a phone. */
.dry-spell {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(3.25rem, 1fr);
  gap: 0.375rem;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.25rem;
}

.dry-spell-day {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 3.5rem;
  border-radius: 0.375rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.dry-spell-day[data-state="light"] {
  background: var(--chip-light);
  color: var(--chip-light-ink);
  box-shadow: inset 0 0 0 1px var(--chip-light-edge);
}

.dry-spell-day[data-state="dark"] {
  background: var(--chip-dark);
  color: var(--chip-dark-ink);
  box-shadow: inset 0 0 0 1px var(--chip-dark-edge);
}

.dry-spell-day[data-state="draw"] {
  background: var(--draw);
  color: var(--chip-dark-ink);
}

.dry-spell-day[data-state="cancelled"],
.dry-spell-day[data-state="holiday"] {
  background: var(--line);
}

.dry-spell-day[data-state="unrecorded"] {
  background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 6px);
}

.dry-spell-day[data-state="future"] {
  border: 1px dashed var(--future);
}

.dry-spell-day[aria-current] {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  color: var(--text);
}

.dry-spell-date {
  font-size: 0.9375rem;
  font-weight: 700;
}

.dry-spell-tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 40rem) {
  .dry-spell {
    grid-auto-columns: minmax(3.25rem, 7rem);
    min-width: 0;
  }
}

/* Player (RULES.md §16): a slice of court as the header, then three bands,
   each titled with what its numbers cover: Esta época, Carreira and
   Distinções. Both scopes open on the same six-cell strip, then cards for
   their facts. */

.player-head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1.75rem 1.5rem;
  border-radius: 0.375rem;
  background: var(--floor);
  box-shadow: inset 0 0 0 0.75rem var(--runoff);
  color: var(--on-floor);
}

.player-head::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 2px solid var(--paint);
  pointer-events: none;
}

.player-avatar {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
  box-shadow: 0 0 0 3px var(--paint);
}

.player-id {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.player-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* The tables' stars, scaled to the name: em units follow it from phone to
   desktop, and a long name with many stars wraps them under it. */
.player-title .stars {
  gap: 0.04em;
  margin-left: 0.3em;
  vertical-align: 0.06em;
}

.player-title .stars + .stars {
  margin-left: 0.2em;
}

.player-title .star {
  width: 0.62em;
  height: 0.62em;
}

.player-title .stars[data-title="vice"] .star,
.player-title .stars[data-title="terceiro"] .star {
  width: 0.54em;
  height: 0.54em;
}

.player-title .stars-count {
  margin-left: 0.08em;
  font-size: 0.5em;
  font-weight: 800;
  letter-spacing: 0;
}

/* Under the name: the player's time in the group. */
.player-since {
  color: var(--on-floor-soft);
  font-variant-numeric: tabular-nums;
}

.former-tag {
  width: fit-content;
  padding: 0 0.4375rem;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--on-floor-line);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--on-floor-soft);
}

/* The position, its movement and next Friday's side, on one line. */
.player-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin-top: 0.25rem;
  font-weight: 600;
}

.player-move {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--on-floor-soft);
}

/* Each band opens on a heavy rule and a title naming its scope. */
.player-band {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--text);
}

.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 1rem;
}

.band-meta {
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.band-subtitle {
  margin: 1.75rem 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.band-note {
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.band-columns {
  display: grid;
  column-gap: 2.5rem;
}

.band-columns > * {
  min-width: 0;
}

.first-season {
  padding: 1rem;
  border: 1px dashed var(--future);
  border-radius: 0.5rem;
  color: var(--muted);
}

.first-season strong {
  color: var(--text);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.125rem;
  padding: 0.75rem 0.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat:nth-child(3n) {
  border-right: 0;
}

.stat:nth-child(n + 4) {
  border-bottom: 0;
}

.stat dt {
  font-size: 0.8125rem;
  color: var(--muted);
}

.stat dd {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-points {
  background: var(--floor);
  color: var(--on-floor);
}

.stat-points dt {
  color: var(--on-floor-soft);
}

/* The career's strip: the same cells, its points inked rather than on the
   court, so the two strips don't read as one table twice. */
.stat-strip[data-scope="career"] .stat-points {
  background: var(--text);
  color: var(--ground);
}

.stat-strip[data-scope="career"] .stat-points dt {
  color: color-mix(in srgb, var(--ground) 80%, transparent);
}

.seasons-table .num {
  width: 9%;
}

.seasons-table th.col-season {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}

.seasons-table thead th.col-season {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.seasons-table .col-season a {
  color: var(--brand);
}

.season-tag {
  display: block;
  width: fit-content;
  margin-top: 0.125rem;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
}

.season-tag[data-kind="campeao"] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--floor);
  box-shadow: none;
  color: var(--on-floor);
}

.season-tag[data-kind="vice"],
.season-tag[data-kind="terceiro"] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text);
}

.season-tag .star {
  width: 0.75rem;
  height: 0.75rem;
}

/* A scope's facts, one card each, under its strip. */
.fact-cards {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.fact-card {
  /* What the side marks' ring is drawn in, to part them from the square. */
  --behind: var(--surface);
  display: grid;
  align-content: start;
  gap: 0.375rem;
  min-width: 0;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.fact-card .stat-value {
  margin-bottom: 0.125rem;
}

.fact-note {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A run drawn as that many form squares. */
.run-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.run-marks .pill {
  width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
}

.result-bar {
  display: block;
  width: 100%;
  height: 0.5rem;
}

.result-segment[data-state="win"] {
  fill: var(--win);
}

.result-segment[data-state="draw"] {
  fill: var(--draw);
}

.result-segment[data-state="loss"] {
  fill: var(--loss);
}

/* Every ended season's final place, the best filled in the career's ink. */
.season-places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.season-places li {
  padding: 0 0.4375rem;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.season-places strong {
  color: var(--text);
}

.season-places li[data-best] {
  background: var(--text);
  box-shadow: none;
  color: var(--ground);
}

.season-places li[data-best] strong {
  color: inherit;
}

/* Forma: each square with its day under it, linked to the match; a circle
   over its corner in the side's colour, ringed in what's behind it. */
.form-games {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.form-game {
  display: grid;
  justify-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.form-game .pill {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}

.side-mark {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.side-mark[data-team="light"] {
  background: var(--chip-light);
  box-shadow: inset 0 0 0 1px var(--chip-light-edge);
}

.side-mark[data-team="dark"] {
  background: var(--chip-dark);
  box-shadow: inset 0 0 0 1px var(--chip-dark-edge);
}

.pill .side-mark {
  position: absolute;
  right: -0.3125rem;
  bottom: -0.3125rem;
}

.pill .side-mark[data-team="light"] {
  box-shadow:
    inset 0 0 0 1px var(--chip-light-edge),
    0 0 0 2px var(--behind);
}

.pill .side-mark[data-team="dark"] {
  box-shadow:
    inset 0 0 0 1px var(--chip-dark-edge),
    0 0 0 2px var(--behind);
}

.side-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.side-key > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.side-key .side-mark {
  width: 0.625rem;
  height: 0.625rem;
}

/* Distinções: its groups flow down the columns, never split. */
.distinction-columns {
  column-gap: 2.5rem;
}

.distinction-group {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.distinction-group .milestones-title {
  margin-bottom: 0.625rem;
}

.distinction-group .distinctions {
  padding: 0;
}

/* Companheiros: each row links to the teammate's page. The avatar and the
   games together span the name and the wins under it. */
.teammates li + li {
  border-top: 1px solid var(--line);
}

.teammate {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  column-gap: 0.625rem;
  align-content: center;
  align-items: center;
  min-height: 3.5rem;
  padding-block: 0.375rem;
}

.teammate-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  line-height: 1.3;
}

.teammate-note {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--muted);
}

.teammate-games {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
  color: var(--muted);
}

.teammate-games strong {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Com e contra (RULES.md §23): the player's record with and against each
   other player. The cards stay in view; the lists open from a summary drawn
   like Arquivo's calendar. On a phone app.js shows one list at a time, from
   40rem both stand side by side, and without JS both are stacked. */
.matchups-lead {
  max-width: 40rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.matchup-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 650;
}

.matchup-who a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matchup-who a[data-former] {
  color: var(--muted);
}

.matchups-details {
  margin-top: 0.75rem;
}

.matchups-switch {
  display: flex;
  gap: 0 1rem;
  border-bottom: 1px solid var(--line);
}

.matchups-lists {
  display: grid;
  gap: 0 2rem;
}

.matchups-lists[data-show] .band-subtitle,
.matchups-lists[data-show="together"] .matchups-list[data-side="against"],
.matchups-lists[data-show="against"] .matchups-list[data-side="together"] {
  display: none;
}

.matchups li + li {
  border-top: 1px solid var(--line);
}

.matchups-few {
  border-top: 1px solid var(--line);
}

.matchups-few .matchups {
  border-top: 1px solid var(--line);
}

/* The avatar and the share span the name, the bar and the record. */
.matchup {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  column-gap: 0.625rem;
  row-gap: 0.25rem;
  align-items: center;
  min-height: 3.5rem;
  padding-block: 0.625rem;
}

.matchup .avatar {
  grid-row: 1 / span 3;
}

.matchup-name {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
  line-height: 1.3;
}

.matchup[data-former] .matchup-name {
  color: var(--muted);
}

.matchup .result-bar {
  grid-column: 2;
  height: 0.375rem;
}

.matchup[data-few] .result-bar {
  opacity: 0.4;
}

.matchup-note {
  grid-column: 2;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.matchup-rate {
  grid-column: 3;
  grid-row: 1 / span 3;
  min-width: 3rem;
  text-align: right;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 40rem) {
  .matchups-switch {
    display: none;
  }

  .matchups-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matchups-lists[data-show] .band-subtitle {
    display: block;
  }

  .matchups-lists[data-show] .matchups-list[data-side] {
    display: block;
  }
}

/* Badges (RULES.md §8, ADR-035). The art is drawn outside the repo and
   keeps its own colours in both schemes: the medal's lettering needs about
   120px, so it appears only where a title is the point; everywhere else a
   title is a star beside the name. */

.milestones-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.medal {
  flex: none;
  width: 7.5rem;
  height: 7.5rem;
}

/* Distinções (RULES.md §8.6): each badge beside its words. A milestone
   with steps is one row, its ladder filled to the step reached, as
   Marcos alcançados draws its ladders. */

.distinctions {
  display: grid;
  gap: 0.875rem;
  padding-block: 0.25rem 0.75rem;
}

.distinction {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.distinction[data-size="title"],
.distinction[data-size="band"] {
  grid-template-columns: 6rem minmax(0, 1fr);
}

.distinction-art {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
}

.distinction[data-size="badge"] .distinction-art {
  width: 4rem;
  height: 4rem;
}

/* A medal's lettering needs room to read. */
.distinction[data-size="title"] .distinction-art {
  width: 6rem;
  height: 6rem;
}

.distinction[data-size="band"] .distinction-art {
  width: 6rem;
  height: 3rem;
}

.distinction-body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.distinction-name {
  font-weight: 700;
  line-height: 1.25;
}

.distinction-note {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.distinction-rule {
  font-size: 0.8125rem;
}

.ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.ladder li {
  min-width: 2rem;
  padding: 0 0.3125rem;
  border: 1px dashed var(--future);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ladder li[data-state="done"] {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--surface);
}

.ladder li[data-state="done"]::before {
  content: "✓ ";
}

.ladder li[data-state="next"] {
  border-color: var(--brand);
  color: var(--brand);
}

.ladder li[data-state="missed"] {
  text-decoration: line-through;
}

/* A badge's art is a button that opens its card. */
.badge-button {
  flex: none;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 0.5rem;
  cursor: pointer;
}

.badge-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* A badge's card (RULES.md §8.6, ADR-054): a popover, so it opens, closes
   on Esc or a tap outside, and gives focus back without script. A sheet
   from the bottom on a phone, a dialog from 40rem; app.js adds the
   motion. */

.badge-card {
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: 88vh;
  max-height: 88dvh;
  margin: 0;
  padding: 0.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -0.5rem 2rem var(--card-shade);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}

.badge-card::backdrop {
  background: rgb(5 10 20 / 0.5);
}

/* While a card is open the page behind it stays still: a swipe or a wheel
   on the backdrop would scroll it. The scrollbar's space stays reserved, so
   where scrollbars take room (Windows, Linux) the page doesn't shift as it
   goes. The card scrolls on its own and doesn't hand its scroll on. */
html:has(.badge-card:popover-open) {
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

/* The same while the menu is open. */
html:has(.site-menu:popover-open) {
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

.badge-card-grab {
  display: block;
  width: 2.5rem;
  height: 0.3125rem;
  margin: 0.25rem auto 0.5rem;
  border-radius: 999px;
  background: var(--line);
  touch-action: none;
}

/* The art sits in the lime it's drawn with. */
.badge-card-hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 auto 0.5rem;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--milestone) 45%, transparent),
    transparent
  );
  touch-action: none;
}

.badge-card-hero[data-shape="band"] {
  width: 15rem;
  height: 7.5rem;
}

.badge-card-art {
  width: 100%;
  height: 100%;
}

.badge-card-body {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.badge-card-kind {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.badge-card-name {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.badge-card-facts {
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  text-align: left;
}

.badge-card-facts div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--line);
}

.badge-card-facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.badge-card-facts dd {
  font-size: 0.875rem;
}

.badge-card-facts a,
.badge-card-steps a {
  font-weight: 650;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.badge-card-steps {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.5rem;
  text-align: left;
}

.badge-card-steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: 0.625rem;
  align-items: center;
  font-size: 0.875rem;
}

.badge-card-steps img {
  width: 1.75rem;
  height: 1.75rem;
}

.badge-card-steps li:not([data-state="done"]) img {
  filter: grayscale(1);
  opacity: 0.45;
}

.badge-card-step {
  font-weight: 650;
}

.badge-card-steps li:not([data-state="done"]) .badge-card-step,
.badge-card-steps li > span:last-child {
  color: var(--muted);
}

.badge-card-steps li > :last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.badge-card-steps li[data-state="next"] > :last-child {
  font-weight: 700;
  color: var(--brand);
}

.badge-card-close {
  width: 100%;
  min-height: 3rem;
  margin-top: 0.75rem;
  border-radius: 0.625rem;
  background: var(--ground);
  font-weight: 700;
  cursor: pointer;
}

/* What app.js adds: the badge in flight between the page and the card,
   and the ring and shine as it lands. */
[data-badge-flight] {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  pointer-events: none;
}

[data-badge-flight] img {
  position: absolute;
}

[data-badge-ring] {
  position: absolute;
  inset: -4%;
  border: 3px solid var(--milestone);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

[data-badge-shine] {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      105deg,
      transparent 38%,
      rgb(255 255 255 / 0.7) 50%,
      transparent 62%
    )
    160% 0 / 250% 100% no-repeat;
  pointer-events: none;
}

/* Rubber band: a stretch for art that should land with a bounce. It plays
   once each time an open popover or dialog renders it, so a badge's card
   bounces its art on every opening and never while closed. Transform only,
   so it stays off the main thread. `data-hold` keeps it still until script
   lets go: app.js holds a card's art while the badge flies in. */
.rubber-band {
  transform-origin: 50% 50%;
}

@keyframes rubber-band {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Kept once it ends (both), so app.js can play it again on hover. */
  :is(:popover-open, dialog[open]) .rubber-band {
    animation: rubber-band 0.9s ease-in-out both;
    will-change: transform;
  }

  :is(:popover-open, dialog[open]) .rubber-band[data-hold] {
    animation: none;
  }
}

/* Pointing at it grows it a little, on `scale` rather than `transform` so
   the two never fight; app.js stretches it once more. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(:popover-open, dialog[open]) .rubber-band {
    transition: scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  :is(:popover-open, dialog[open]) .rubber-band:hover {
    scale: 1.04;
  }
}

/* The key under a standings table names its stars and armbands. */
.badge-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.badge-key li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.badge-key-art[data-shape="star"] {
  width: 1rem;
  height: 1rem;
}

.badge-key-art[data-shape="band"] {
  width: 2.5rem;
  height: 1.25rem;
}

.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.0625rem;
  margin-left: 0.375rem;
  vertical-align: -0.125rem;
}

.star {
  width: 1rem;
  height: 1rem;
}

/* The silver and bronze stars sit a little smaller than the gold. */
.stars[data-title="vice"] .star,
.stars[data-title="terceiro"] .star {
  width: 0.875rem;
  height: 0.875rem;
}

.stars + .stars {
  margin-left: 0.25rem;
}

.stars-count {
  margin-left: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.season-honours {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 1.25rem;
}

.season-honour {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.season-honour figcaption {
  display: grid;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.season-honour a {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

/* Streak armbands (RULES.md §8.3, ADR-037), 2:1 and lettered by the build.
   The compact band sits beside a name, after any stars; the full one, with
   its word and a record's season, needs about 160px. */

.armband-compact {
  width: 2.5rem;
  height: 1.25rem;
  margin-left: 0.375rem;
  vertical-align: -0.3125rem;
}

.stars + .armband-compact,
.armband-compact + .armband-compact {
  margin-left: 0.25rem;
}

.armband {
  flex: none;
  width: 10rem;
  height: 5rem;
}

.season-record-list {
  display: grid;
  gap: 0.75rem 2rem;
}

.season-record {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.season-record-text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.season-record-names a {
  font-weight: 700;
  color: var(--text);
}

.season-record-rule {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The season page (RULES.md §18, ADR-059): the Arquivo's line under the
   title, chapter chips, then three chapters. */

.season-lead {
  margin-top: 0.5rem;
}

.season-band {
  margin-top: 2.5rem;
}

.season-band-title {
  margin-bottom: 0.75rem;
}

.season-numbers .stat-value {
  font-size: 1.375rem;
}

.season-numbers .legend {
  margin-top: 0;
}

.season-numbers-split {
  padding-bottom: 0.75rem;
}

.chapter-subtitle {
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
}

.page-section > .chapter-subtitle:first-of-type {
  margin-top: 0.25rem;
}

/* Distinções: a card per Destaque, its pennant once the season has ended,
   or up to three faces. */
.highlight-cards {
  display: grid;
  gap: 0.75rem;
}

.highlight-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.highlight-card .badge-button {
  display: flex;
  flex: none;
  justify-content: center;
  width: 4.5rem;
}

.highlight-card-art {
  display: block;
  width: 4rem;
  height: 4rem;
}

.highlight-card-faces {
  justify-content: center;
  width: 4.5rem;
}

.highlight-card-faces .avatar {
  flex: none;
  box-shadow: 0 0 0 2px var(--surface);
}

.avatar-more {
  background: var(--line);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.highlight-card-text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.highlight-card-value {
  font-size: 0.8125rem;
  color: var(--muted);
}

.highlight-card-value strong {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
}

/* Sexta a sexta: Presenças' grid with the results on top and the
   headcount under the players, so every column is one Friday. Its names
   column is a little wider, for "Resultado" and "Jogadores" in bold. */
.friday-grid {
  --names: 5.5rem;
}

.friday-grid .attendance-name a {
  color: var(--text);
}

.friday-head {
  font-weight: 700;
  color: var(--muted);
}

.friday-results {
  padding-bottom: 2px;
}

.friday-result {
  flex: 1 1 0;
  min-width: 0.6875rem;
  height: auto;
  aspect-ratio: 1;
}

/* The bars are drawn to the season's most players; its average and most
   are lines across them, their values at the right. The padding keeps the
   most's value, which sits above the top line, clear of the rule. */
.friday-headcount {
  position: relative;
  margin-top: 4px;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}

/* As tall as the bars, so none scroll by above or below the label, and up
   through the row's padding too: the máximo line sits on the bars' top
   edge, and half its stroke would show above. */
.friday-headcount .attendance-name {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-top: -0.875rem;
  padding-top: 0.875rem;
}

.friday-headcount .attendance-month {
  align-items: flex-end;
  height: 2.75rem;
}

.headcount-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0.6875rem;
  height: 100%;
}

/* Out of the flow: an inline SVG counts as 300px wide when the grid's
   rows size to their content, which would stretch every square. */
.headcount-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--brand);
  opacity: 0.55;
}

.headcount-lines {
  position: absolute;
  left: calc(var(--names) + 0.5rem);
  right: 0;
  bottom: 0;
  width: calc(100% - var(--names) - 0.5rem);
  height: 2.75rem;
  overflow: visible;
  pointer-events: none;
}

.headcount-line {
  stroke: var(--text);
  stroke-width: 1;
  opacity: 0.55;
}

.headcount-line[data-kind="max"] {
  stroke-dasharray: 4 3;
}

.headcount-value {
  fill: var(--text);
  font-size: 0.625rem;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 3px;
}

.friday-legends {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.friday-legends .attendance-legend {
  margin-top: 0;
}

.friday-legends .calendar-key {
  width: 0.6875rem;
  height: 0.6875rem;
}

.friday-legend-head {
  min-width: 4.5rem;
  font-weight: 700;
  color: var(--text);
}

.headcount-key {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  opacity: 0.55;
}

.headcount-line-key {
  width: 1rem;
  border-top: 1px solid var(--text);
  opacity: 0.55;
}

.headcount-line-key[data-kind="max"] {
  border-top-style: dashed;
}

.season-facts {
  margin-top: 1.25rem;
  max-width: 40rem;
}

.season-facts .stat-fact {
  break-inside: avoid;
}

.season-fold {
  margin-top: 1rem;
}

/* Palmarés (RULES.md §14): the group's whole history. The honours roll
   is the season page's medals at a little over half size, one row per
   season, so it still reads at season ten. */

.palmares-totals {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.palmares-totals .stat-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 30rem) {
  .palmares-totals .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .palmares-totals .stat-tile:nth-child(2n) {
    border-right: 0;
  }

  .palmares-totals .stat-tile:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

.roll {
  border-top: 1px solid var(--line);
}

.roll-season {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

.roll-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.roll-label {
  font-size: 1.125rem;
  font-weight: 800;
}

.roll-label a {
  color: var(--brand);
}

.roll-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* An ended season's medals, then its Destaques da época: beside them from
   64rem, under them before. */
.roll-body {
  display: grid;
  gap: 0.875rem;
  margin-top: 0.75rem;
}

.roll-honours {
  gap: 0.75rem 2rem;
  margin-top: 0;
}

.roll-pennants {
  padding-top: 0.875rem;
  border-top: 1px dashed var(--line);
}

.roll-pennants .milestones-title {
  margin-bottom: 0.5rem;
}

.roll-pennant-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 1rem;
}

.roll-pennant {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.roll-pennant-art {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.roll-pennant-names {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.25;
}

.roll-pennant-names a {
  font-weight: 700;
  color: var(--text);
}

@media (min-width: 64rem) {
  .roll-body {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1.75rem;
  }

  .roll-honours {
    column-gap: 1.5rem;
  }

  .roll-pennants {
    padding: 0 0 0 1.75rem;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .roll-pennant-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .roll-pennant {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }

  .roll-pennant-art {
    width: 3.25rem;
    height: 3.25rem;
  }

  .roll-pennant-names {
    font-size: 0.75rem;
  }
}

.roll-medal {
  width: 4.5rem;
  height: 4.5rem;
}

.roll-honours .season-honour a {
  font-size: 1.25rem;
}

.roll-points {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.roll-note {
  margin-top: 0.375rem;
  color: var(--muted);
}

.roll-note a {
  font-weight: 700;
  color: var(--text);
}

/* The page's chapters as chips under the lead (ADR-057). Below 64rem they
   stick to the top of the screen in one line that scrolls sideways if it
   must, and app.js marks the chapter in view; a chapter they jump to keeps
   its heading clear of them. From 64rem they stay put, as the sidebar
   beside the table is already sticky there. */
.chapter-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 0.375rem;
  margin: 1rem -1rem 0;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

.chapter-nav a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 650;
}

.chapter-nav a[aria-current="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--ground);
}

[data-chapter] {
  scroll-margin-top: 4.5rem;
}

/* Every title holder as a chip under the roll: the stars, then what they
   won, spelled out. */
.title-strip {
  margin-top: 1.25rem;
}

.title-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.title-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.375rem 1rem 0.375rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

.title-chip-text {
  display: grid;
  line-height: 1.25;
}

.title-chip-name {
  font-weight: 700;
}

.title-chip-name .stars {
  margin-left: 0.25rem;
}

.title-chip-summary {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Recordes, in the sidebar beside the table. */
.palmares-lower .stats-subtitle {
  margin: 0.5rem 0 0.25rem;
}

.table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.table-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.table-filter input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--brand);
}

.table-sort {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
}

.sort-button {
  min-height: 2.75rem;
  background: none;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}

.sort-button[aria-pressed="true"] {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sort-short {
  display: none;
}

/* A phone gets the column headers' letters, so the six fit on one line. */
@media (max-width: 30rem) {
  .table-sort {
    gap: 0;
  }

  .sort-button {
    min-width: 2.5rem;
  }

  .sort-long {
    display: none;
  }

  .sort-short {
    display: inline;
  }
}

.alltime tr[data-former] .standing-name {
  color: var(--muted);
}

/* On a phone the seasons column gives way to the win rate. */
@media (max-width: 26rem) {
  .alltime .col-seasons {
    display: none;
  }

  .alltime .col-player {
    min-width: 6.5rem;
  }
}

.few-games {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.few-games summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
}

.few-games a {
  font-weight: 650;
  color: var(--text);
}

/* A career card's A seguir: name and count, then the bar under them. */
.held-next {
  margin-top: 0.875rem;
}

.held-next-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.goal-list {
  border-top: 1px solid var(--line);
}

.goal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name value"
    "bar bar";
  align-items: center;
  gap: 0.375rem 0.625rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.goal-row:last-child {
  border-bottom: 0;
}

.goal-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-name .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.625rem;
}

.goal-bar {
  grid-area: bar;
  display: block;
  width: 100%;
  height: 0.375rem;
}

.goal-track {
  fill: var(--line);
}

.goal-fill {
  fill: var(--brand);
}

/* Home page: Esta semana, up to four cards that swipe sideways on a phone
   and sit in a row from 64rem. A milestone in play keeps its badge and its
   tally (the last 50 games or wins, one square each, the next one still to
   play) on the run-off navy, so it still stands out. */
.week {
  margin-top: 2rem;
}

.week-title,
.week-kind {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.week-title {
  margin-bottom: 0.625rem;
}

.week-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 80%);
  gap: 0.75rem;
  margin-inline: -1rem;
  padding: 0 1rem 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
}

.week-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  padding: 1.125rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  scroll-snap-align: start;
}

.week-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand);
}

.week-card[data-kind="milestone"] {
  border-color: transparent;
  background: var(--runoff);
  color: var(--on-floor);
}

.week-card[data-kind="milestone"]::before {
  background: var(--milestone);
}

.week-kind {
  font-size: 0.6875rem;
}

.week-card[data-kind="milestone"] .week-kind {
  color: var(--milestone);
}

.week-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: 2.5rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.week-unit {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--muted);
}

.week-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 750;
}

.week-who .avatar {
  grid-row: auto;
}

.week-armband {
  width: 2.5rem;
  height: 1.25rem;
}

.week-bar {
  height: 0.5rem;
}

.week-note {
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--muted);
}

.week-note[data-tone="good"] {
  color: var(--win);
}

.week-note[data-tone="bad"] {
  color: var(--loss);
}

.week-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
}

.week-art {
  width: 4rem;
  height: 4rem;
}

.week-headline {
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.week-card[data-kind="milestone"] .week-note {
  margin-top: 0;
  color: var(--on-floor-soft);
}

.milestone-tally {
  display: grid;
  grid-template-columns: repeat(25, minmax(0, 1fr));
  gap: 2px;
  margin-top: 0.25rem;
}

.tally-cell {
  aspect-ratio: 1;
  border-radius: 0.125rem;
  background: rgb(255 255 255 / 0.34);
}

.tally-cell[data-state="next"] {
  background: var(--milestone);
  box-shadow: 0 0 0 1.5px var(--runoff);
}

@media (prefers-reduced-motion: no-preference) {
  .tally-cell[data-state="next"] {
    animation: tally-next 1.6s ease-in-out infinite;
  }

  .badge-button {
    transition: transform 0.15s ease;
  }

  /* Closing slides the sheet back down; app.js draws the opening. */
  .badge-card,
  .badge-card::backdrop {
    transition:
      transform 0.22s ease-in,
      opacity 0.22s ease-in,
      overlay 0.22s allow-discrete,
      display 0.22s allow-discrete;
  }

  .badge-card:not(:popover-open) {
    transform: translateY(100%);
  }

  .badge-card:not(:popover-open)::backdrop {
    opacity: 0;
  }

  /* The menu slides in from the right and its backdrop fades. */
  .site-menu,
  .site-menu::backdrop {
    transition:
      transform 0.22s ease-out,
      opacity 0.22s ease-out,
      overlay 0.22s allow-discrete,
      display 0.22s allow-discrete;
  }

  .site-menu:not(:popover-open) {
    transform: translateX(100%);
  }

  .site-menu:not(:popover-open)::backdrop {
    opacity: 0;
  }

  @starting-style {
    .site-menu:popover-open {
      transform: translateX(100%);
    }

    .site-menu:popover-open::backdrop {
      opacity: 0;
    }
  }
}

@keyframes tally-next {
  50% {
    transform: scale(1.35);
  }
}

.goal-value {
  grid-area: value;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
}

.goal-value strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

/* Marcos (RULES.md §14): a card per badge family, career then
   season. A family nobody holds yet is dashed and its art dimmed, as the
   site draws what's still to come; its ladder fills a step once someone
   holds it. At most five circles, then a count: the names list them all.
   A player who left is named in grey; their circle stays as it is. */
.held-groups {
  display: grid;
  gap: 1.5rem;
}

.held-list {
  display: grid;
  gap: 0.75rem;
}

.held-card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.held-card[data-state="open"] {
  align-items: center;
  border-style: dashed;
  border-color: var(--future);
  background: none;
}

.held-badge {
  width: 3.5rem;
  height: 3.5rem;
}

.held-card[data-state="open"] .held-badge {
  opacity: 0.3;
  filter: grayscale(1);
}

.held-body {
  min-width: 0;
}

.held-label {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.held-rule {
  font-size: 0.8125rem;
  color: var(--muted);
}

.held-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.held-ladder li {
  padding: 0 0.4375rem;
  border: 1px dashed var(--future);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.held-ladder li[data-state="held"] {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--surface);
}

.held-count {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.held-count strong {
  margin-right: 0.125rem;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
}

.held-names {
  margin-top: 0.375rem;
  font-weight: 650;
}

.held-seasons {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-weight: 650;
}

.held-season {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.held-season-label {
  flex: none;
  width: 3.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.held-season-label[data-repeat] {
  visibility: hidden;
}

.held-step {
  flex: none;
  padding: 0 0.3125rem;
  border-radius: 0.25rem;
  background: var(--brand);
  color: var(--surface);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.held-who {
  min-width: 0;
}

.held-times {
  margin-left: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
}

.held-card a[data-former] {
  color: var(--muted);
}

.held-none {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--muted);
}

.held-line {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.held-line a {
  font-weight: 650;
  color: var(--brand);
}

@media (hover: hover) {
  .held-names a:hover,
  .held-who a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .badge-button:hover {
    transform: translateY(-2px);
  }
}

@media (min-width: 44rem) {
  .held-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .held-card,
  .held-card[data-state="open"] {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .held-badge {
    width: 4.5rem;
    height: 4.5rem;
  }
}

/* The career cards stay two across, art beside the text, to give A seguir
   room. */
@media (min-width: 44rem) {
  .held-group[data-kind="career"] .held-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 64rem) {
  .held-group[data-kind="season"] .held-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Share card: a slice of court as the header, then the table, phone-width
   and without navigation, made to be screenshotted into the group. */

.share-card {
  max-width: 24.375rem;
  margin-inline: auto;
  padding-bottom: 1rem;
  background: var(--surface);
}

.share-head {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem 3rem;
  background: var(--floor);
  box-shadow: inset 0 0 0 0.75rem var(--runoff);
  color: var(--on-floor);
}

.share-head::before {
  content: "";
  position: absolute;
  inset: 0.75rem 0.75rem -2px;
  border: 2px solid var(--paint);
}

.share-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2.5rem;
  width: 4.75rem;
  height: 4.75rem;
  border: 2px solid var(--paint);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Takes what the crest leaves, so the subtitle wraps instead of running
   off the card; its minimum is still the title's width. */
.share-heading {
  flex: 1 1 0;
}

/* The full crest, name and year included: the card is read at full size,
   unlike the header, so it can carry the lettering. It gives way only on
   the narrowest phones, after the title has. */
.share-crest {
  position: relative;
  flex: 0 1 7rem;
  min-width: 5rem;
  width: 7rem;
  height: auto;
  aspect-ratio: 1;
}

/* Narrows with the viewport so the title and the crest share one row down
   to a 360px phone. */
.share-title {
  font-size: clamp(1.75rem, (100vw - 11rem) / 6.1, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.share-subtitle {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--on-floor-soft);
}

.share-card .standings thead th {
  background: var(--surface);
}

.share-card .table-scroll,
.share-card .legend,
.share-foot {
  margin-inline: 1rem;
}

.share-foot {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.share-foot strong {
  color: var(--text);
}

/* Admin */

.admin-header .wrap,
.admin {
  max-width: 42rem;
}

.admin-header {
  padding-block: 1rem;
}

.admin-header .brand {
  font-size: 1.125rem;
}

.signed-in {
  font-size: 0.75rem;
  color: var(--muted);
}

.admin {
  padding-top: 1.5rem;
}

.admin > :not(:last-child),
.match-form > :not(:last-child) {
  margin-bottom: 1.5rem;
}

.eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
}

.date-picker {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.date-picker label {
  flex: 1;
}

.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
}

legend.field-label {
  margin-bottom: 0.5rem;
}

.field {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--surface);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.button {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--surface);
  font-weight: 700;
}

.notice,
.errors {
  padding: 0.75rem;
  border: 1px solid;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.notice {
  border-color: var(--notice-border);
  background-color: var(--notice-bg);
  color: var(--notice-text);
}

.errors {
  border-color: var(--error-border);
  background-color: var(--error-bg);
  color: var(--error-text);
}

.errors p {
  font-weight: 700;
}

.errors ul {
  margin-top: 0.25rem;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.admin-date {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.hint {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.player-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
}

.choice {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--surface);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.player-choices .choice {
  padding-inline: 0.25rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

.choice:has(:checked) {
  border-color: var(--brand);
  background-color: var(--choice-checked-bg);
  color: var(--brand);
}

/* The radio stays focusable and readable by screen readers; the label is
   what's drawn. */
.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

.choice:has(:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.player-rows > :not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.player-rows li {
  padding-block: 0.5rem;
}

.player-name {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.guests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.guests label {
  font-size: 0.875rem;
  font-weight: 600;
}

.save {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--floor);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--on-floor);
}

/* 640px and up: the court turns landscape; the table gets a form column;
   the player strip goes to one row. */

@media (min-width: 40rem) {
  .wrap {
    padding-inline: 1.5rem;
  }

  .chapter-nav {
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .badge-card {
    inset: 0;
    width: min(36rem, 100% - 2rem);
    height: fit-content;
    max-height: 86vh;
    margin: auto;
    padding: 1.75rem;
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2.5rem var(--card-shade);
    text-align: left;
  }

  .badge-card:popover-open {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0 1.75rem;
    align-items: start;
  }

  .badge-card:not(:popover-open) {
    transform: scale(0.97);
    opacity: 0;
  }

  .badge-card-grab {
    display: none;
  }

  .badge-card-hero {
    width: 11rem;
    height: 11rem;
    margin: 0;
  }

  .badge-card-hero[data-shape="band"] {
    width: 11rem;
    height: 5.5rem;
    margin-top: 2.75rem;
  }

  .badge-card-close {
    justify-self: start;
    width: auto;
    min-height: 2.5rem;
    padding-inline: 1.25rem;
  }

  .stat-tile {
    padding-inline: 1rem;
  }

  .stat-value {
    font-size: 2.25rem;
  }

  .stat-note {
    font-size: 0.8125rem;
  }

  .matchday-countdown {
    font-size: 4rem;
  }

  .week-cards {
    grid-auto-columns: minmax(15rem, 46%);
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    scroll-padding-inline: 1.5rem;
  }

  .court-crest {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* minmax(0, …) so a long label can't widen one half past the halfway
     line. */
  .court {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0.75rem 1.25rem;
  }

  .court::after {
    width: 5rem;
    height: 5rem;
  }

  .half {
    --box: 3.25rem;
  }

  /* A landscape half is narrow: a size smaller, and closer columns. */
  .roster {
    column-gap: 0.5rem;
  }

  .roster-name {
    font-size: 1rem;
  }

  .half[data-team="light"] {
    padding: 1rem 3rem 1rem 4.25rem;
    border-width: 2px 1px 2px 2px;
  }

  .half[data-team="dark"] {
    padding: 1rem 4.25rem 1rem 3rem;
    border-width: 2px 2px 2px 1px;
  }

  .half::before {
    top: 50%;
    left: auto;
    width: var(--box);
    height: 56%;
    transform: translateY(-50%);
  }

  .half::after {
    top: 50%;
    left: auto;
    width: 0.625rem;
    height: 24%;
    transform: translateY(-50%);
  }

  /* These restate top and bottom: the phone rules above pin each penalty
     area and goal to an end line with the same specificity. */
  .half[data-team="light"]::before {
    top: 50%;
    left: -2px;
    border: 2px solid var(--paint);
    border-left: 0;
    border-radius: 0 var(--box) var(--box) 0;
  }

  .half[data-team="light"]::after {
    top: 50%;
    left: calc(-0.625rem - 2px);
    border: 2px solid var(--paint);
    border-right: 0;
  }

  .half[data-team="dark"]::before {
    top: 50%;
    right: -2px;
    bottom: auto;
    border: 2px solid var(--paint);
    border-right: 0;
    border-radius: var(--box) 0 0 var(--box);
  }

  .half[data-team="dark"]::after {
    top: 50%;
    right: calc(-0.625rem - 2px);
    bottom: auto;
    border: 2px solid var(--paint);
    border-left: 0;
  }

  .team-label,
  .half[data-team="dark"] .team-label {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    transform: none;
  }

  /* Match: a side's outcome sits on top of its chip. */
  .half[data-outcome] .team-label {
    flex-direction: column-reverse;
  }

  .match-head .page-title {
    font-size: 2.25rem;
    white-space: normal;
  }

  .match-pager {
    max-width: 36rem;
  }

  .match-pager-long {
    display: inline;
  }

  .match-pager-short {
    display: none;
  }

  .standings .num {
    width: 2.5rem;
  }

  .standings .col-pts {
    width: 3rem;
  }

  .standings .col-form {
    display: table-cell;
    width: 7rem;
  }

  .standings td.col-form .pill {
    width: 1rem;
    height: 1rem;
  }

  .standings td.col-form .form {
    gap: 3px;
  }

  .form-inline {
    display: none;
  }

  .standing-name {
    grid-row: 1 / span 2;
  }

  .attendance {
    --names: 8rem;
  }

  .attendance-legend .day {
    width: 0.875rem;
  }

  .player-id {
    padding-right: 4.5rem;
  }

  .player-head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(0.75rem - 3.5rem);
    width: 7rem;
    height: 7rem;
    border: 2px solid var(--paint);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .stat-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .stat,
  .stat:nth-child(3n) {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .stat:last-child {
    border-right: 0;
  }

  .fact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Forma takes two of the three columns. */
  .fact-card[data-span="wide"] {
    grid-column: span 2;
  }

  .distinction-columns {
    columns: 2;
  }
}

/* 1024px and up: a wider page, the court at a futsal court's real 2:1
   across it, and the table beside a sidebar. */

@media (min-width: 64rem) {
  .wrap {
    max-width: 76rem;
    padding-inline: 2.5rem;
  }

  .highlight-cards,
  .season-record-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .season-facts {
    max-width: none;
    columns: 2;
    column-gap: 2.5rem;
  }

  .header-bar {
    min-height: 4.5rem;
  }

  .brand {
    font-size: 1.375rem;
  }

  .brand-mark {
    width: 2.5rem;
    height: 2.5rem;
  }

  .site-nav {
    gap: 2rem;
    font-size: 1rem;
  }

  .matchday {
    padding-bottom: 2.5rem;
  }

  .matchday-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 2rem;
    padding-block: 1.5rem 2rem;
  }

  .matchday-eyebrow {
    grid-column: 1 / -1;
    font-size: 0.875rem;
  }

  .matchday-countdown {
    grid-row: 2 / span 2;
    font-size: 5rem;
    line-height: 0.9;
  }

  .matchday-date {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    font-size: 1.75rem;
    text-align: right;
  }

  .matchday-place {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-end;
    font-size: 1.0625rem;
  }

  .court-crest {
    width: 4.25rem;
    height: 4.25rem;
  }

  .week {
    margin-top: 2.5rem;
  }

  .week-cards {
    grid-auto-columns: minmax(0, 1fr);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .court {
    aspect-ratio: 2 / 1;
    padding: 1.75rem 2.25rem;
    border-radius: 0.5rem;
  }

  /* Nobody on it: shallower, with each chip by its own goal. */
  .court[data-state="closed"] {
    aspect-ratio: 3 / 1;
  }

  .court[data-state="closed"] .half[data-team="dark"] .team-label {
    align-self: flex-end;
  }

  .court::after {
    width: 7.5rem;
    height: 7.5rem;
    background: radial-gradient(circle, var(--paint) 0 4px, transparent 4.5px);
  }

  .half {
    --box: 5.5rem;
    justify-content: center;
  }

  /* Clear of the penalty area on the goal side and of the centre circle
     on the other, and no more, so the names have the room. */
  .half[data-team="light"] {
    padding: 2rem 4.5rem 2rem 6.75rem;
  }

  .half[data-team="dark"] {
    padding: 2rem 6.75rem 2rem 4.5rem;
  }

  .half::before {
    height: 52%;
  }

  .half::after {
    width: 1.125rem;
    height: 22%;
  }

  .half[data-team="light"]::after {
    left: calc(-1.125rem - 2px);
  }

  .half[data-team="dark"]::after {
    right: calc(-1.125rem - 2px);
  }

  .team-label,
  .half[data-team="dark"] .team-label {
    flex-direction: row;
    align-items: center;
    column-gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* The home court's label also says the wins: it stays stacked, so both
     teams start level. */
  .half .team-label:has(.team-wins) {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.375rem;
  }

  .half[data-outcome] .team-label {
    flex-direction: column-reverse;
    align-items: flex-start;
    row-gap: 0.375rem;
  }

  .match-head .page-title {
    font-size: 3rem;
  }

  .milestone-tiles {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
  }

  .milestone-tile-number {
    font-size: 2.5rem;
  }

  .team-label .team-chip {
    font-size: 1.0625rem;
  }

  .team-shirt {
    font-size: 0.9375rem;
  }

  .roster {
    column-gap: 1rem;
  }

  .roster-row {
    min-height: 3.5rem;
    column-gap: 0.5rem;
  }

  .roster-rank {
    width: 1.375rem;
    font-size: 0.9375rem;
  }

  .roster-name {
    font-size: 1.125rem;
  }

  .home-lower,
  .season-lower,
  .palmares-lower,
  .band-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 2.5rem;
    align-items: start;
  }

  .home-lower {
    margin-top: 3rem;
  }

  .table-section {
    margin-top: 0;
  }

  .section-title {
    font-size: 1.625rem;
  }

  .sidebar {
    position: sticky;
    top: 1.5rem;
  }

  .distinction-columns {
    columns: 3;
  }

  .sidebar {
    margin-top: 3.25rem;
  }

  /* The table needs about 42rem; the sidebar takes whatever is left. */
  .season-lower {
    grid-template-columns: minmax(0, 42rem) minmax(21rem, 1fr);
  }

  /* Classificação's heading sits over the table, so the sidebar starts
     below it, level with the table. */
  .season-lower .sidebar {
    margin-top: 2.875rem;
  }

  /* Palmarés: the sidebar starts level with the table's heading. */
  .palmares-lower .sidebar {
    margin-top: 2.5rem;
  }

  .chapter-nav {
    position: static;
    margin-inline: 0;
    padding: 0;
    border-bottom: 0;
    background: none;
  }

  body:has(.chapter-nav) .standings thead th {
    top: 0;
  }

  .chapter-nav a {
    font-size: 0.9375rem;
  }

  .chapter-nav a[aria-current="true"] {
    border-color: var(--line);
    background: var(--surface);
    color: inherit;
  }

  .side-block {
    padding: 1.25rem 1.5rem 0.625rem;
  }

  .standings td {
    height: 3.75rem;
  }

  .standings .num {
    width: 3rem;
    font-size: 1rem;
  }

  .standings td.col-pts {
    font-size: 1.1875rem;
  }

  .standings .col-rank {
    width: 3.5rem;
  }

  .standings .col-form {
    width: 8.5rem;
  }

  .standings td.col-form .pill {
    width: 1.1875rem;
    height: 1.1875rem;
    font-size: 0.6875rem;
  }

  .avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
  }

  .standing-link {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  .standings[data-avatars="wide"] .standing-link {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .standings[data-avatars="wide"] .avatar {
    display: grid;
  }

  .standing-name {
    font-size: 1.0625rem;
  }

  .page-title {
    font-size: 3rem;
  }

  .calendar,
  .calendar-month {
    gap: 6px;
  }

  .calendar-month {
    grid-template-columns: 10rem repeat(5, minmax(0, 1fr));
  }

  .calendar-label {
    font-size: 1rem;
  }

  .calendar-year {
    font-size: 0.8125rem;
  }

  .calendar-short {
    display: none;
  }

  .calendar-long,
  .calendar-detail {
    display: block;
  }

  .calendar-day {
    grid-template-columns: auto minmax(0, 1fr);
    place-content: center stretch;
    justify-items: start;
    align-items: center;
    column-gap: 0.75rem;
    min-height: 3.5rem;
    padding-inline: 0.875rem;
  }

  .calendar-num {
    grid-row: span 2;
    font-size: 1.25rem;
  }

  .calendar-word {
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Without a detail line the word takes both rows beside the number, so it
     centres on it instead of sitting in the top row. */
  .calendar-word:last-child {
    grid-row: span 2;
  }

  .calendar-detail {
    font-size: 0.75rem;
  }

  /* The rail runs unbroken: the seasons carry no padding of their own, and
     each dot sits level with its season's line. */
  .archive-season {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 2rem;
    padding-block: 0;
    border-top: 0;
  }

  .archive-years {
    padding-top: 0.9rem;
    font-size: 4.5rem;
    text-align: right;
  }

  .archive-years-full {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--muted);
  }

  .archive-season-body {
    position: relative;
    padding-block: 1.75rem;
    padding-left: 2rem;
    border-left: 2px solid var(--line);
  }

  .archive-season-body::before {
    content: "";
    position: absolute;
    top: calc(3rem - 6px);
    left: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text);
  }

  .archive-season[data-state="current"] .archive-season-body::before {
    background: var(--brand);
  }

  /* Pages without a sidebar keep numbers within reach of the names. */
  .page > .page-section > .table-scroll {
    max-width: 52rem;
  }

  .player-head {
    gap: 1.75rem;
    padding: 2.75rem 3.25rem;
    border-radius: 0.5rem;
  }

  .player-head::after {
    right: calc(0.75rem - 6rem);
    width: 12rem;
    height: 12rem;
  }

  .player-avatar {
    width: 6rem;
    height: 6rem;
    font-size: 1.875rem;
  }

  .player-title {
    font-size: 3.5rem;
  }

  .player-since,
  .player-status {
    font-size: 1.125rem;
  }

  .stat dd {
    font-size: 2.25rem;
  }
}

/* The share card keeps its phone layout at any width: form under the name. */

.share-card .standings .col-form {
  display: none;
}

.share-card .standings .form-inline {
  display: block;
}

.share-card .standings .standing-name {
  grid-row: auto;
}

@media (hover: hover) {
  .site-nav a:hover,
  .roster-name:hover,
  .standing-link:hover .standing-name,
  .side-link:hover,
  .archive-years a:hover,
  .archive-line a:hover,
  .archive-links a:hover,
  .share-link:hover,
  .form-game:hover,
  .teammate:hover .teammate-name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  a.calendar-day:hover,
  a.strip-day:hover {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
  }

  .standings tbody tr:hover {
    background: var(--surface);
  }
}

/* Comparar (RULES.md §21, ADR-065): a court with a half per player and the
   × in its centre circle, a select per player under it, then Frente a
   frente. The first player is the brand blue and the second the ink
   wherever a side has a colour; their names and initials always go with
   it, and the better of two numbers is bold and on its side's colour. */

.compare-controls {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.compare-scopes {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.compare-controls .compare-scopes {
  margin-top: 0;
}

.compare-scopes a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 650;
}

.compare-scopes a[aria-current="page"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--ground);
}

/* The leader's number: bold, and on the side's colour. */
.duel-value[data-best] .duel-number,
.duel-place[data-best] strong {
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  background: var(--brand);
  color: var(--ground);
}

.duel-value[data-side="b"][data-best] .duel-number,
.duel-place[data-side="b"][data-best] strong {
  background: var(--text);
}

/* A · Frente a frente: the court split between the two, a half each. */

.duel-head {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--runoff);
  color: var(--on-floor);
}

.duel-head::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  z-index: 1;
  border: 2px solid var(--paint);
  pointer-events: none;
}

.duel-head::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  left: 50%;
  width: 2px;
  translate: -1px 0;
  background: var(--paint);
}

.duel-side {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
  padding: 1.5rem 0.75rem;
  background: var(--floor-light);
  text-align: center;
}

.duel-side[data-lane="1"],
.duel-side[data-lane="3"] {
  background: var(--floor-dark);
}

.duel-avatar {
  grid-row: auto;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.375rem;
  font-size: 1.125rem;
  box-shadow: 0 0 0 3px var(--paint);
}

.duel-name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.duel-name .stars {
  gap: 0.04em;
  margin-left: 0.25em;
  vertical-align: 0.06em;
}

.duel-name .star {
  width: 0.62em;
  height: 0.62em;
}

.duel-name .stars[data-title="vice"] .star {
  width: 0.54em;
  height: 0.54em;
}

/* The centre circle, on the halfway line at the court's middle. */
.duel-versus {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  translate: -50% -50%;
  border: 2px solid var(--paint);
  border-radius: 50%;
  background: var(--floor);
  font-size: 1.25rem;
  font-weight: 800;
}

.duel-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 1rem;
}

.duel-tally {
  display: grid;
  font-size: 0.8125rem;
  color: var(--muted);
}

.duel-tally strong {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.duel-tally[data-side="draw"] {
  text-align: center;
}

.duel-tally[data-side="draw"] strong {
  font-size: 1.75rem;
  color: var(--muted);
}

.duel-tally[data-side="b"] {
  text-align: right;
}

.duel-tally[data-side="b"] strong {
  color: var(--text);
}

.duel-bar {
  display: block;
  width: 100%;
  height: 0.75rem;
  margin-top: 0.625rem;
}

.duel-segment {
  stroke: var(--ground);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.fact-card .duel-segment {
  stroke: var(--surface);
}

.duel-segment[data-side="a"] {
  fill: var(--brand);
}

.duel-segment[data-side="draw"] {
  fill: var(--draw);
}

.duel-segment[data-side="b"] {
  fill: var(--text);
}

/* Jogo a jogo: every meeting, a square each in the winner's colour with
   their initials, a row per season. */
.meeting-season {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.625rem;
  border-top: 1px solid var(--line);
}

.meeting-head {
  display: grid;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.meeting-tally {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.meetings {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.meeting {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.meeting[data-winner="a"] {
  background: var(--brand);
  color: var(--ground);
}

.meeting[data-winner="b"] {
  background: var(--text);
  color: var(--ground);
}

.meeting[data-winner="draw"] {
  box-shadow: inset 0 0 0 1.5px var(--draw);
  color: var(--muted);
}

.meeting-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.meeting-key > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.meeting-key .meeting {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.4375rem;
}

/* Números: a row per stat, the label in the middle and each side's bar
   growing out from it. */
.duel-stats {
  display: grid;
}

.duel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr);
  grid-template-areas: "a label b";
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  border-bottom: 1px solid var(--line);
}

.duel-row-head {
  min-height: 2.5rem;
  font-weight: 700;
}

.duel-who {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.duel-who .avatar {
  grid-row: auto;
}

.duel-who:last-child {
  grid-area: b;
  justify-content: flex-end;
}

.duel-label {
  grid-area: label;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
}

.duel-value {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.duel-value[data-side="a"] {
  grid-area: a;
}

.duel-value[data-side="b"] {
  grid-area: b;
  grid-template-columns: minmax(0, 1fr) 3.75rem;
}

.duel-value[data-side="b"] .duel-number {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.duel-value[data-side="b"] .duel-meter {
  grid-column: 1;
  grid-row: 1;
}

.duel-number {
  justify-self: start;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.duel-value[data-best] .duel-number {
  font-weight: 800;
}

.duel-meter {
  width: 100%;
  height: 0.5rem;
}

.duel-meter rect {
  fill: var(--line);
}

.duel-value[data-best] .duel-meter rect {
  fill: var(--brand);
}

.duel-value[data-side="b"][data-best] .duel-meter rect {
  fill: var(--text);
}

.duel-columns > * {
  min-width: 0;
}

.duel-seasons {
  display: grid;
}

/* Época a época: the season in the middle, each side's place and points. */
.duel-season {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr);
  grid-template-areas: "a label b";
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--line);
}

.duel-season-label {
  grid-area: label;
  display: grid;
  justify-items: center;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.duel-place {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-variant-numeric: tabular-nums;
}

.duel-place[data-side="a"] {
  grid-area: a;
}

.duel-place[data-side="b"] {
  grid-area: b;
  flex-direction: row-reverse;
}

.duel-place strong {
  font-size: 1.25rem;
  font-weight: 800;
}

.duel-place span {
  font-size: 0.875rem;
  color: var(--muted);
}

.duel-place .star {
  width: 1rem;
  height: 1rem;
}

/* The half still to pick: a dashed face and a prompt. */
.duel-ghost {
  display: grid;
  place-items: center;
  border: 2px dashed var(--on-floor-soft);
  border-radius: 50%;
  font-weight: 800;
  color: var(--on-floor-soft);
}

.duel-prompt {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--on-floor-soft);
}

/* The picker: a select per player, with their initials beside it. */
.compare-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pick-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding-left: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

/* With two players, the first one's edge in the brand blue and the
   second's in ink, as their sides of the court. */
.compare-pick[data-count="2"] .pick-slot:first-child:not([data-empty]) {
  padding-left: 0.75rem;
  box-shadow: inset 4px 0 var(--brand);
}

.compare-pick[data-count="2"] .pick-slot:nth-child(2):not([data-empty]) {
  padding-left: 0.75rem;
  box-shadow: inset 4px 0 var(--text);
}

.pick-slot[data-empty] {
  border-style: dashed;
  border-color: var(--muted);
}

.pick-slot .avatar {
  grid-row: auto;
}

.pick-ghost {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px dashed var(--muted);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
}

.pick-select {
  position: relative;
  min-width: 0;
}

.pick-select::after {
  content: "▾";
  position: absolute;
  right: 0.625rem;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--muted);
}

.pick-select select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0 1.75rem 0 0.25rem;
  appearance: none;
  background: transparent;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
}

.pick-slot[data-empty] select {
  font-weight: 600;
  color: var(--muted);
}

.pick-select select:focus-visible,
.compare-scopes a:focus-visible,
.meeting:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Nobody or one player picked: who to compare, most-met first. */
.rivals .teammate:has(.avatar-stack) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.rivals .avatar-stack {
  grid-row: 1 / span 2;
}

.rivals .teammate-games {
  white-space: nowrap;
}

.rivals-hint {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .duel-side {
    padding: 2rem 1.5rem;
  }

  .duel-avatar {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.375rem;
  }

  .duel-name {
    font-size: 2.25rem;
  }

  .duel-versus {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
  }

  .duel-row,
  .duel-season {
    grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr);
  }

  .duel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meeting-season {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .meeting {
    width: 2rem;
    height: 2rem;
    font-size: 0.625rem;
  }

  .compare-pick {
    display: flex;
    flex-wrap: wrap;
  }

  .pick-slot {
    flex: 0 1 15rem;
  }
}

@media (min-width: 64rem) {
  .duel-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 3rem;
  }

  .duel-columns .duel-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The court for three or four: a lane each, no halfway line or centre
   circle. app.js numbers the lanes it shows. */
.duel-head[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.duel-head[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.duel-head[data-count="3"]::after,
.duel-head[data-count="4"]::after {
  display: none;
}

.duel-head[data-count="3"] .duel-side:not([data-lane="0"]),
.duel-head[data-count="4"] .duel-side:not([data-lane="0"]) {
  box-shadow: inset 1px 0 var(--on-floor-line);
}

.duel-head[data-count="3"] .duel-side,
.duel-head[data-count="4"] .duel-side {
  padding-inline: 0.25rem;
}

.duel-head[data-count="3"] .duel-avatar,
.duel-head[data-count="4"] .duel-avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.9375rem;
}

.duel-head[data-count="3"] .duel-name,
.duel-head[data-count="4"] .duel-name {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.duel-head[data-count="4"] .duel-name {
  font-size: 1rem;
}

/* Adicionar and taking a player out. Three or four slots sit two by two on
   a phone; with two, + shares their row without its word. */
.compare-pick[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.compare-pick[data-count="3"] .pick-select select,
.compare-pick[data-count="4"] .pick-select select {
  padding-right: 1.25rem;
}

.compare-pick[data-count="3"] .pick-select::after,
.compare-pick[data-count="4"] .pick-select::after {
  right: 0.375rem;
}

.pick-remove {
  width: 2.25rem;
  height: 2.875rem;
  border-left: 1px solid var(--line);
  font-size: 1.25rem;
  color: var(--muted);
  cursor: pointer;
}

.pick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 0.75rem;
  border: 1px dashed var(--brand);
  border-radius: 0.5rem;
  color: var(--brand);
  font-weight: 750;
  cursor: pointer;
}

.pick-add-plus {
  font-size: 1.375rem;
  line-height: 1;
}

.compare-pick[data-count="2"] .pick-add-label {
  display: none;
}

.pick-remove:focus-visible,
.pick-add:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Three or four players: a column each, the best of each row marked by
   app.js among the players picked, as the key shows. */
.board td[data-best],
.best-sample {
  background: var(--choice-checked-bg);
  box-shadow: inset 0 -3px var(--brand);
  font-weight: 800;
}

.best-key {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.best-sample {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  color: var(--text);
}

.board {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.board th,
.board td {
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.board-player {
  vertical-align: top;
  font-size: 0.8125rem;
  font-weight: 700;
}

.board-player a {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.board-player .avatar {
  grid-row: auto;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: auto;
}

.board-player .stars {
  justify-content: center;
}

.board-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-label {
  position: sticky;
  left: 0;
  background: var(--ground);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.board th.board-label {
  text-align: left;
}

.board-short {
  display: none;
}

.board td.num {
  height: 3rem;
  font-size: 1rem;
}

.board tr[data-key="points"] td {
  font-size: 1.125rem;
  font-weight: 800;
}

.board-form .form {
  justify-content: center;
}

.matrix .board-player .avatar {
  width: 1.75rem;
  height: 1.75rem;
}

.matrix-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 3.5rem;
}

.matrix-label .avatar {
  grid-row: auto;
}

.matrix-cell {
  height: 3.5rem;
}

.matrix-record {
  display: block;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 800;
}

.matrix-games {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted);
}

.matrix-cell[data-lead="win"] .matrix-games::before {
  content: "▲ ";
}

.matrix-cell[data-lead="loss"] .matrix-games::before {
  content: "▼ ";
}

.matrix-cell[data-lead="win"],
.matrix-swatch[data-lead="win"] {
  background: color-mix(in srgb, var(--win) 16%, transparent);
}

.matrix-cell[data-lead="loss"],
.matrix-swatch[data-lead="loss"] {
  background: color-mix(in srgb, var(--loss) 14%, transparent);
}

.matrix-cell[data-lead="level"],
.matrix-swatch[data-lead="level"] {
  background: color-mix(in srgb, var(--draw) 14%, transparent);
}

.matrix-cell[data-lead="self"] {
  background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 7px);
}

.matrix-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.matrix-key > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.matrix-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 0.1875rem;
}

.board-pairs {
  display: grid;
}

.board-pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.board-pair .result-bar {
  grid-column: 2 / -1;
}

.board-pair-names {
  font-weight: 700;
}

.board-pair-rate {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.board-pair-rate strong {
  font-size: 1.125rem;
  color: var(--text);
}

.board-columns > * {
  min-width: 0;
}

@media (max-width: 30rem) {
  .board-long {
    display: none;
  }

  .board-short {
    display: inline;
  }

  .board th,
  .board td {
    padding-inline: 0.125rem;
  }

  .matrix-label .board-name {
    display: none;
  }

  .matrix-record {
    font-size: 0.8125rem;
  }
}

@media (min-width: 40rem) {
  .compare-pick[data-count="2"] .pick-add-label {
    display: inline;
  }

  .duel-head[data-count="3"] .duel-avatar,
  .duel-head[data-count="4"] .duel-avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.25rem;
  }

  .duel-head[data-count="3"] .duel-name,
  .duel-head[data-count="4"] .duel-name {
    font-size: 1.75rem;
  }
}

@media (min-width: 64rem) {
  .board-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 3rem;
  }
}