/* footballtomatoes - hand-written, mobile-first, no build step. */

:root {
  --bg: #f7f6f4;
  --surface: #ffffff;
  --surface-2: #efedea;
  --text: #1c1b19;
  --muted: #6b6761;
  --border: #dcd8d2;
  --accent: #b8341e;
  --accent-ink: #ffffff;
  --accent-soft: #fbe3dd;
  --score-hi: #175c3a;
  --score-mid: #9a6b00;
  --score-lo: #6b6761;
  --radius: 10px;
  --gutter: 16px;
  /* Competition emblems get a light backing plate in dark mode, where a dark
     logo can otherwise vanish into the page. */
  --emblem-bg: transparent;
  --emblem-pad: 0;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121212;
    --surface: #1d1d1f;
    --surface-2: #26262a;
    --text: #f2f1ef;
    --muted: #a3a09b;
    --border: #34343a;
    --accent: #ff6a4f;
    --accent-ink: #120a08;
    --accent-soft: #3a1d17;
    --score-hi: #4fd18b;
    --score-mid: #f0c25a;
    --score-lo: #a3a09b;
    --emblem-bg: var(--text);
    --emblem-pad: 6px;
  }
}

:root[data-theme="dark"] {
  --bg: #121212;
  --surface: #1d1d1f;
  --surface-2: #26262a;
  --text: #f2f1ef;
  --muted: #a3a09b;
  --border: #34343a;
  --accent: #ff6a4f;
  --accent-ink: #120a08;
  --accent-soft: #3a1d17;
  --score-hi: #4fd18b;
  --score-mid: #f0c25a;
  --score-lo: #a3a09b;
  --emblem-bg: var(--text);
  --emblem-pad: 6px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-xl);
}

h2 {
  font-size: var(--fs-lg);
}

p {
  margin: 0 0 1em;
}

/* Header */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* One row: the name, the desktop nav on wide screens, and the account button
   pushed to the right. On phones only the name and the account button show;
   the competition nav lives behind the Leagues tab bar item. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px var(--gutter);
  max-width: 960px;
  margin: 0 auto;
}

.site-name {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.site-name::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.05em;
}

/* Account button: a person icon and "Sign in" when signed out, or a circle
   with the email's initial and the word "Account" when signed in. */
.account {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.account:hover {
  color: var(--accent);
}

.account .icon {
  width: 24px;
  height: 24px;
}

.account__initial {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  text-transform: uppercase;
}

/* On a phone the signed-in button is just the initial circle; the word
   "Account" would crowd the slim top bar. Signed out, "Sign in" stays. */
.account--user .account__label {
  display: none;
}

/* The desktop primary nav and the competitions dropdown. Hidden on phones. */
.site-nav-desktop {
  display: none;
}

.site-nav-desktop > a,
.nav-menu__summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}

.site-nav-desktop > a:hover,
.nav-menu__summary:hover,
.site-nav-desktop > a[aria-current="page"],
.nav-menu__summary[aria-current="page"] {
  color: var(--text);
  background: var(--surface-2);
}

.nav-menu {
  position: relative;
}

.nav-menu__summary {
  list-style: none;
}

.nav-menu__summary::-webkit-details-marker {
  display: none;
}

.nav-menu__summary::after {
  content: "\25BE";
  margin-left: 4px;
}

.nav-menu[open] .nav-menu__summary::after {
  content: "\25B4";
}

.nav-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 200px;
  margin-top: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent);
}

.nav-menu__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu__panel a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.nav-menu__panel a:hover,
.nav-menu__panel a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--accent);
}

/* Bottom tab bar, phones only. The body gets matching bottom padding so the
   footer and page content are never hidden behind it. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
}

.tabbar__item .icon {
  width: 24px;
  height: 24px;
}

.tabbar__label {
  font-size: var(--fs-xs);
  line-height: 1;
}

.tabbar__item[aria-current="page"] {
  color: var(--accent);
}

/* Main */

.site-main {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
}

.page-intro {
  margin-bottom: 20px;
}

.page-intro .lede {
  color: var(--muted);
  margin: 0;
}

/* Match list */

.match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.match {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--gutter);
}

.match__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
  grid-column: 1 / -1;
}

/* A live row shows a marker and when the match kicked off, in place of the
   usual kickoff. */
.kickoff-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 650;
  white-space: nowrap;
}

.match__meta:has(.kickoff-live) {
  flex-direction: column;
  align-items: flex-start;
}

.kickoff-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Home above away, one team per line; a long name is cut with an ellipsis
   rather than running under the score pill. */
.match__teams {
  display: grid;
  gap: 4px;
  font-weight: 650;
  font-size: var(--fs-base);
  line-height: 1.3;
  margin: 0;
  min-width: 0;
}

.match__teams .team {
  display: flex;
  min-width: 0;
}

.match__teams .team__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.match__reasons {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.match__reasons li::before {
  content: "\2022";
  margin-right: 6px;
  color: var(--accent);
}

.match__score {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
}

/* Score pill: 0-10 */

.score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  min-width: 3.4em;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
  line-height: 1.2;
}

.score small {
  font-size: 0.7em;
  font-weight: 600;
  opacity: 0.75;
}

.score[data-tier="high"] {
  background: color-mix(in srgb, var(--score-hi) 16%, transparent);
  color: var(--score-hi);
}

.score[data-tier="mid"] {
  background: color-mix(in srgb, var(--score-mid) 18%, transparent);
  color: var(--score-mid);
}

.score[data-tier="low"] {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--score-lo);
}

.score[data-tier="none"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Rewatch verdict pill: a worded tier, reusing the score pill's tier colours. */

.rewatch-tier {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* The rewatch list sits directly under the filter box inside .prose; give it
   the same gap the home list gets from .guide-results. */
.prose > .match-list {
  margin-top: 20px;
}

/* Lines under the watch guide: the rewatch picks, the
   not-a-betting-site note and when the data was last refreshed. */

.rewatch-link,
.about-note,
.data-as-of {
  margin: 16px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* The live line above the guide: a link to the live matches page, shown only
   while something is in play. */
.live-line {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
}

.live-line a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
}

.live-line__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* The header's Live link, shown only while something is in play. */
.site-nav-desktop > a.site-nav-live {
  color: var(--accent);
}

/* The note on /live explaining that a filter narrows the list. */
.live-filter {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

time {
  white-space: nowrap;
}

/* Match row links: the whole row is one link, with team and competition links on top of it. */

.match {
  position: relative;
}

.match__link {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.match__link:focus-visible {
  outline-offset: 0;
}

.match .badge {
  position: relative;
  z-index: 1;
}

/* A 44px tall hit area around small inline links, without changing the
   layout (FOO-80). */
a.badge,
.site-name {
  position: relative;
}

a.badge::after,
.site-name::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

.team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.crest {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Watch guide filters */

.guide-results {
  margin-top: 20px;
}

.filters {
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--gutter);
}

.filters__group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.filters legend {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 6px;
}

.filters__hint {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

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

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 650;
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.filters__score {
  display: grid;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

.filters__score select {
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  min-height: 44px;
}

.filters__apply {
  font: inherit;
  font-weight: 650;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px var(--gutter);
  color: var(--muted);
}

.empty-state h2 {
  color: var(--text);
}

.empty-state p:last-child {
  margin: 0;
}

/* Near me location picker */

.near {
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--gutter);
}

.near__actions {
  display: grid;
  gap: 10px;
}

.near__geolocate {
  font: inherit;
  font-weight: 650;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

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

.near__search-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

.near__search input {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.near__status {
  margin: 0;
  font-weight: 650;
}

.near__results {
  min-height: 0;
}

/* The picker's result list is empty until a city is typed; do not reserve a gap. */
.near__results:empty {
  display: none;
}

.near__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.near__result {
  font: inherit;
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.near__result:hover {
  border-color: var(--accent);
}

.near__result-country {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

.near__none,
.near__privacy,
.near__attribution {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.near__saved {
  display: grid;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--gutter);
}

/* The grid display above beats the browser's [hidden] rule, so restore it;
   without this an empty saved-locations box shows before a location is picked. */
.near__saved[hidden] {
  display: none;
}

.near__saved-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.near__saved-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.near__saved-item {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.near__saved-item:has(.near__saved-link[aria-current="true"]) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.near__saved-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.near__saved-link[aria-current="true"] {
  color: var(--accent);
  font-weight: 650;
}

.near__saved-remove {
  font: inherit;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.near__saved-remove:hover {
  color: var(--accent);
}

.near__saved-add {
  justify-self: start;
  font: inherit;
  font-weight: 650;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.near__saved-note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Error pages */

.error-page {
  padding: 40px 0 16px;
  text-align: left;
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  margin: 0 0 8px;
}

.error-page p {
  color: var(--muted);
}

/* Prose pages (how the score works) */

.prose {
  max-width: 68ch;
}

.prose__section {
  margin-top: 28px;
}

.prose__section h2 {
  font-size: var(--fs-lg);
  padding-top: 4px;
}

.prose ul:not(.match__reasons) {
  padding-left: 1.2em;
  margin: 0 0 1em;
}

.prose ul:not(.match__reasons) li + li {
  margin-top: 0.4em;
}

.signal-list {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.signal {
  scroll-margin-top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--gutter);
}

.signal__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: var(--fs-base);
  margin-bottom: 6px;
}

.signal__weight {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.signal p {
  margin-bottom: 0.6em;
}

.signal__example {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.signal__reason {
  font-family: var(--font-mono);
  color: var(--text);
}

/* Match page */

.match-page {
  max-width: 68ch;
}

.match-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 8px;
}

.match-head__meta .badge {
  color: var(--text);
}

/* Match status badge: green while live, muted when the match will not be
   played as scheduled. */
.match-head__status[data-status="live"] {
  background: color-mix(in srgb, var(--score-hi) 18%, transparent);
  color: var(--score-hi);
}

.match-head__status[data-status="off"] {
  background: var(--surface-2);
  color: var(--muted);
}

/* Home and away read as one fixture; the "v" stays with the away team so it
   is never left dangling at a line end. */
.match-head__teams {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.match-head__teams .team {
  min-width: 0;
  white-space: normal;
}

.match-head__teams .team__name {
  color: var(--text);
  text-decoration: none;
}

.match-head__teams .team__name:hover,
.match-head__teams .team__name:focus-visible {
  text-decoration: underline;
}

.match-head__away {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.match-head__teams .vs {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-base);
}

.match-result {
  margin: 6px 0 0;
  color: var(--muted);
}

.match-result__score {
  color: var(--text);
  font-size: var(--fs-lg);
}

.match-section {
  margin-top: 28px;
}

.match-section__note {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.match-score {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px var(--gutter);
}

.match-score h2 {
  margin-bottom: 10px;
}

.match-score__pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.match-score__label {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.match-score__intro {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.match-score__reasons-title {
  font-size: var(--fs-base);
  margin: 16px 0 6px;
}

.signal-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.signal-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.signal-row__name {
  color: var(--text);
  font-weight: 600;
}

.signal-row__points,
.signal-row__note {
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.signal-row__note {
  color: var(--muted);
  font-weight: 400;
}

.signal-row__bar {
  margin-top: 4px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}

.signal-row__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.reasons {
  margin: 0;
  padding-left: 1.2em;
}

.reasons li + li {
  margin-top: 0.3em;
}

.form-grid {
  display: grid;
  gap: 20px;
}

.form-team__name {
  font-size: var(--fs-base);
  margin-bottom: 4px;
}

.form-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.form-row__outcome {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.form-row[data-outcome="win"] .form-row__outcome {
  color: var(--score-hi);
}

.form-row[data-outcome="draw"] .form-row__outcome {
  color: var(--score-mid);
}

.form-row__match {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}

.form-row__match:hover .form-row__opponent {
  text-decoration: underline;
}

.form-row__venue {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.form-row__score {
  font-family: var(--font-mono);
  font-weight: 700;
}

.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-base);
}

.table caption {
  text-align: left;
  color: var(--muted);
  font-size: var(--fs-sm);
  padding-bottom: 6px;
}

.table th,
.table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 600;
}

.table__pos {
  width: 2.6rem;
  font-variant-numeric: tabular-nums;
}

.table__note {
  display: block;
}

/* Long names are cut with an ellipsis so they never run into the numbers;
   the full name is on the team page the name links to. */
.table__team .team {
  display: flex;
  min-width: 0;
}

.table__team .team__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table__num {
  width: 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__row[data-highlight] {
  background: var(--accent-soft);
  font-weight: 650;
}

.table__gap td {
  text-align: center;
  color: var(--muted);
  padding: 2px;
}

.meetings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.meeting {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.meeting time {
  color: var(--muted);
  flex: none;
}

/* The teams take the middle of the row and wrap inside their own box, so the
   score stays aligned to the right. */
.meeting__teams {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
  font-weight: 600;
}

.meeting__teams .team {
  min-width: 0;
  white-space: normal;
}

.meeting__teams .team__name {
  overflow-wrap: anywhere;
}

.meeting__teams .vs {
  color: var(--muted);
  font-weight: 400;
}

.meeting__score {
  flex: none;
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Footer: quiet, small type, a brand line and two link groups side by side. */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px var(--gutter);
  display: grid;
  gap: 24px;
}

.site-footer__brand {
  margin: 0;
}

.site-footer__groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.site-footer__heading {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--text);
}

/* Competitions index */

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

.competition-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.competition-list__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px var(--gutter);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
}

.competition-list__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.competitions__teams {
  margin: 20px 0 0;
}

.competitions__weekend {
  margin: 8px 0 0;
  color: var(--muted);
}

/* Weekend hubs: /this-weekend and one page per competition. */

.weekend-head__back {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
}

.weekend-competitions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

/* Competition page */

.competition-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.competition-head__emblem {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: none;
  background: var(--emblem-bg);
  padding: var(--emblem-pad);
  border-radius: 12px;
}

.competition-head__name {
  margin: 0;
  font-size: var(--fs-xl);
}

.competition-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Tables scroll inside their own box rather than the page. */
.table-scroll {
  overflow-x: auto;
}

.table__wide {
  display: none;
}

.round-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.round {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.round__label {
  font-weight: 650;
}

.round__count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.round__from {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Wider screens */

@media (min-width: 640px) {
  .table__wide {
    display: table-cell;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .match {
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  .match__meta {
    grid-column: 1 / -1;
  }

  .match__reasons {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .match__score {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
  }

  .competition-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop header: the primary nav appears and the phone tab bar goes away. */
@media (min-width: 768px) {
  .site-nav-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .site-header__inner .account {
    margin-left: auto;
  }

  .account--user .account__label {
    display: inline;
  }

  .tabbar {
    display: none;
  }
}

/* On phones the fixed tab bar would sit over the last of the page, so the
   body keeps room for it; on desktop the bar is gone. */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav-desktop > a,
  .nav-menu__summary,
  .nav-menu__panel a,
  .tabbar__item,
  .account {
    transition: background-color 120ms ease, color 120ms ease;
  }
}

/* Team page */
.team-page {
  max-width: 68ch;
}

.team-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.team-head__crest {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.team-head__name {
  margin: 0;
  font-size: var(--fs-xl);
  overflow-wrap: anywhere;
}

.team-head__fullname {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.team-head__competitions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
}

/* The next match sits above the fixtures list, marked with an accent panel. */
.next-match {
  padding: 14px var(--gutter);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.next-match h2 {
  margin-top: 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.next-match .match {
  background: var(--surface);
}

.form-team__name a {
  color: inherit;
}

.form-row__competition {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Teams index */

.team-search {
  margin: 12px 0 20px;
}

.team-search label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.team-search__row {
  display: flex;
  gap: 8px;
}

.team-search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.team-search button {
  min-height: 44px;
}

.team-index__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--fs-sm);
}

.team-index__jump a {
  display: inline-block;
  padding: 6px 0;
}

.team-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-list__item {
  border-bottom: 1px solid var(--border);
}

.team-list__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  color: var(--text);
  text-decoration: none;
}

.team-list__name {
  flex: 1;
  min-width: 0;
}

.team-list__competition {
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Watch guide filter panel: collapsed to one summary line. */

.filters-panel {
  margin-bottom: 16px;
}

.filters-panel__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px var(--gutter);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}

.filters-panel__summary::-webkit-details-marker {
  display: none;
}

.filters-panel__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
}

.filters-panel__toggle {
  flex: 0 0 auto;
  font-weight: 650;
  color: var(--accent);
}

.filters-panel__toggle::after {
  content: " \25BE";
}

.filters-panel[open] .filters-panel__toggle::after {
  content: " \25B4";
}

.filters-panel[open] .filters-panel__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.filters-panel .filters {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Subscribe to the watch guide feed: a disclosure that follows the filters. */
.calendar-subscribe {
  margin-bottom: 16px;
}

.calendar-subscribe__summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px var(--gutter);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: var(--accent);
}

.calendar-subscribe__summary::-webkit-details-marker {
  display: none;
}

.calendar-subscribe__summary::after {
  content: " \25BE";
  margin-left: auto;
}

.calendar-subscribe[open] .calendar-subscribe__summary::after {
  content: " \25B4";
}

.calendar-subscribe[open] .calendar-subscribe__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.calendar-subscribe__body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  padding: 12px var(--gutter);
}

.calendar-subscribe__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.calendar-subscribe__options a {
  font-weight: 650;
}

.calendar-subscribe__options p {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.calendar-subscribe__note {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.calendar-subscribe__options + .calendar-subscribe__note {
  margin: 12px 0 0;
}

.calendar-subscribe__copy {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.calendar-subscribe__copy input,
.calendar-subscribe__copy textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.calendar-subscribe__copy textarea {
  overflow-wrap: anywhere;
  resize: vertical;
}

.calendar-subscribe__copy-btn {
  font: inherit;
  font-weight: 650;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.saved-notice {
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.empty-state__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

/* Follow a team (stored on this device) */
.follow {
  min-height: 44px;
  padding: 8px 14px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.follow[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.follow[aria-pressed="true"] .follow__off,
.follow[aria-pressed="false"] .follow__on {
  display: none;
}

.follow__note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.followed {
  margin-top: 0;
  margin-bottom: 20px;
}

/* Spoiler-free mode: html.hide-scores masks finished-match results until tapped. */
.spoiler-reason__safe {
  display: none;
}

.hide-scores .spoiler-reason:not(.revealed) .spoiler-reason__safe {
  display: inline;
}

.hide-scores .spoiler-reason:not(.revealed) .spoiler-reason__real {
  display: none;
}

.hide-scores [data-spoiler-group]:not(.revealed) [data-spoiler] {
  visibility: hidden;
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* visibility: hidden takes the value out of the accessibility tree while the
   box keeps its place in the layout. The generated box stays visible and is
   what the reader sees and taps. */
.hide-scores [data-spoiler-group]:not(.revealed) [data-spoiler]::after {
  content: "";
  visibility: visible;
  position: absolute;
  inset: 0;
  background: var(--surface-2);
  border-radius: 6px;
}

.hide-scores [data-spoiler-group][tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.spoiler-toggle {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.spoiler-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.spoiler-toggle[aria-pressed="true"]::before {
  content: "\2713\00a0";
}

/* The toggle and its explanation stay together in the footer. The note is
   always visible, so the watch guide, which has no results of its own, still
   says what the toggle does. */
.spoiler-control {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.spoiler-note {
  font-size: var(--fs-sm);
}

/* Beside a results heading the note is secondary: muted, and spaced from the
   list that follows. */
.section-head .spoiler-note {
  color: var(--muted);
}

.section-head:has(.spoiler-control) {
  margin-bottom: 12px;
}

/* Install prompt: shown in the footer on a first visit, either from the
   beforeinstallprompt event or as a manual Add to Home Screen hint on iOS. */
.install-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* The flex display above beats the browser's [hidden] rule, so restore it. */
.install-hint[hidden] {
  display: none;
}

.install-hint__action {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.install-hint__ios {
  margin: 0;
}

.install-hint__dismiss {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* Sign in: the footer control and the sign-in page button. */
.signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.signout__email {
  overflow-wrap: anywhere;
}

.signout__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.signin__google {
  display: inline-block;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
}

/* Magic-link sign-in: the email form and its inline error. */
.signin__or {
  margin: 12px 0;
  color: var(--muted);
}

.signin__form {
  display: grid;
  gap: 8px;
  max-width: 22rem;
  margin: 16px 0 0;
}

.signin__label {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.signin__email {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.signin__error {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-sm);
}

.signin__submit {
  justify-self: start;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Delete account: the one destructive button, filled with the accent red. */
.danger-button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Match ratings: the finished-match control and the community verdict. */
.match-rating__signin {
  margin: 0;
}

.rating {
  display: grid;
  gap: 12px;
}

.rating__scale {
  margin: 0;
  padding: 0;
  border: 0;
}

.rating__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.rating__watched {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.rating__save,
.rating__remove {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.rating__remove {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

.match-rating__community {
  margin: 12px 0 0;
  font-size: var(--fs-base);
}

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

.rated {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.rated__watched {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
}

/* Share a match */
.share {
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

/* Add to calendar: the outlined secondary action beside Share. */
.add-calendar {
  display: inline-block;
  min-height: 44px;
  margin-top: 10px;
  margin-left: 8px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

/* Watchlist toggle: the outlined action beside Add to calendar. */
.watch-toggle {
  display: inline-block;
}

.watch-toggle__button,
.watch-toggle__signin {
  display: inline-block;
  min-height: 44px;
  margin-top: 10px;
  margin-left: 8px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.watch-toggle__button.is-on {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Watchlist on /me/ratings: rows with a remove action on the right. */
.watchlist__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.watchlist__rate,
.watchlist__open {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.watchlist__remove {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

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

/* Track record: match-by-match results stay behind a tap. */
.track-details {
  margin-top: 16px;
}

.track-details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent);
  font-weight: 650;
}

/* The score-band table has five columns and wordy headers. On phones the
   fixed 3rem number columns are too narrow, so the headers wrap onto two
   lines instead of overlapping. */
@media (max-width: 639px) {
  .table__bands {
    table-layout: auto;
  }

  .table__bands .table__num {
    width: auto;
  }
}

/* The match-by-match table has six columns and does not fit a phone. Below
   640px each match becomes a stacked card: teams and competition on top, then
   each value on its own line with the column name read from data-label. The
   desktop table is unchanged. */
@media (max-width: 639px) {
  .table--match,
  .table--match tbody,
  .table--match tr,
  .table--match td {
    display: block;
  }

  .table--match thead {
    display: none;
  }

  .table--match tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .table--match td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: auto;
    padding: 3px 0;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .table--match td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .table--match td[data-label=""] {
    display: block;
  }

  .table--match td[data-label=""]::before {
    content: none;
  }

  .table--match td:nth-child(1) {
    font-weight: 650;
  }

  .table--match td:nth-child(2) {
    color: var(--muted);
    font-size: var(--fs-sm);
    padding-bottom: 6px;
  }
}

/* Notification settings (/me/notifications) and the unsubscribe page. */

.notify-off {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* The kind x channel table sits on its own card. Each row is a notification
   kind; each cell a channel toggle. */
.notify-form {
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px var(--gutter);
}

.notify-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.notify-table th,
.notify-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.notify-table tbody tr:last-child th,
.notify-table tbody tr:last-child td {
  border-bottom: 0;
}

.notify-table thead th {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.notify-table thead th:not(:first-child),
.notify-table__cell {
  text-align: center;
}

.notify-table__kind {
  width: 55%;
  white-space: normal;
}

.notify-table__label {
  display: block;
  font-weight: 650;
}

.notify-table__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
}

/* The channel label and toggle stay together; on narrow screens the label is
   read from data-label above the toggle. */
.notify-table__control {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.notify-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.notify-toggle input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.notify-toggle input:disabled,
.notify-toggle:has(input:disabled) {
  cursor: not-allowed;
}

.notify-toggle:has(input:disabled) {
  opacity: 0.4;
}

.notify-table__soon {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.notify-save {
  justify-self: start;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* Push, competitions and saved locations each get their own card and the same
   gap between sections. */
.notify-push,
.notify-subs,
.notify-near {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px var(--gutter);
}

.notify-push__lede,
.notify-subs__lede,
.notify-near__lede {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.notify-push__lede:last-child,
.notify-subs__empty,
.notify-near__empty {
  margin-bottom: 0;
}

.notify-subs__empty,
.notify-near__empty {
  color: var(--muted);
}

.notify-push__enable,
.notify-push__disable {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.notify-push__enable {
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}

.notify-push__disable {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}

.notify-push__enable[hidden],
.notify-push__disable[hidden] {
  display: none;
}

.notify-push__status {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.notify-push__status:empty {
  margin: 0;
}

.notify-subs__list,
.notify-near__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notify-subs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.notify-subs__item:last-child {
  border-bottom: 0;
}

.notify-subs__name {
  flex: 1;
  min-width: 0;
  font-weight: 650;
}

.notify-subs__score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notify-subs__score select,
.notify-near__add input[type="text"],
.notify-near__add select {
  font: inherit;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.notify-subs__save,
.notify-subs__unfollow {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.notify-subs__save {
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}

.notify-subs__unfollow {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}

.notify-subs__add-label {
  margin: 16px 0 8px;
  font-weight: 650;
}

.notify-subs__followable {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.notify-subs__follow {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.notify-near__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.notify-near__item:last-child {
  border-bottom: 0;
}

.notify-near__name {
  font-weight: 650;
}

.notify-near__meta {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.notify-near__item form {
  margin-left: auto;
}

.notify-near__delete {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.notify-near__hint {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.notify-near__hint:last-child {
  margin-bottom: 0;
}

.notify-near__add {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.notify-near__add label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}

.notify-near__add input[type="text"],
.notify-near__add select {
  width: 100%;
}

.notify-near__save {
  justify-self: start;
  align-self: start;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.notify-near__save {
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}

/* On a phone the kind x channel table stacks: each kind is a card with its
   channel toggles on a row, so nothing overflows sideways. */
@media (max-width: 639px) {
  .notify-form {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .notify-table,
  .notify-table tbody {
    display: block;
  }

  .notify-table thead {
    display: none;
  }

  .notify-table tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px var(--gutter);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .notify-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .notify-table__kind {
    display: block;
    width: auto;
    margin-bottom: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
  }

  .notify-table__cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    text-align: left;
  }

  .notify-table__cell:empty {
    display: none;
  }

  .notify-table__cell::before {
    content: attr(data-label);
    font-size: var(--fs-sm);
  }

  .notify-table__control {
    flex-direction: row;
    gap: 10px;
  }

  .notify-subs__name {
    flex-basis: 100%;
  }
}

/* Account hub (/me): the account, the settings kept on this device and the
   signed-in devices. Each block is a card, matching the notification page. */

.me-card {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px var(--gutter);
}

.me-card h2 {
  margin-top: 0;
}

.me-card__lede,
.me-card__meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.me-card__meta:last-child {
  margin-bottom: 0;
}

.me-card__link {
  margin-bottom: 0;
}

.me-account__email {
  margin: 0 0 4px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.me-signin ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
}

.me-device__setting {
  margin: 4px 0 16px;
}

.me-device__subhead {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.me-device__empty {
  margin: 0;
  color: var(--muted);
}

.me-device__team-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.me-device__team-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.me-device__install {
  margin-top: 16px;
}

.me-sessions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.me-sessions__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.me-sessions__item:last-child {
  border-bottom: 0;
}

.me-sessions__info {
  flex: 1;
  min-width: 0;
}

.me-sessions__label {
  display: block;
  font-weight: 650;
}

.me-sessions__current {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.me-sessions__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.me-sessions__signout {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.me-sessions__others {
  margin: 12px 0 0;
}

.me-signout .signout {
  margin: 0;
}

.me-danger h2 {
  color: var(--accent);
}

.me-danger p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 639px) {
  /* The sign-out button sits on its own line rather than squeezing the name. */
  .me-sessions__item form {
    margin-left: auto;
  }
}