/* Layout and components. Only token values (var(--...)) for colors, spacing, radius, and type. */

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

html { -webkit-text-size-adjust: 100%; background: var(--color-bg); }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-overlay);
  backdrop-filter: blur(var(--blur-bar));
  -webkit-backdrop-filter: blur(var(--blur-bar));
  box-shadow: var(--shadow-bar);
  padding-top: env(safe-area-inset-top);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--size-topbar);
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
/* The brand is the logo image, vertically centered, at a fixed height (never the full logo inside a
   game card). The team name beside it wraps to a second line at 360px rather than the logo shrinking. */
.topbar__logo {
  display: block;
  flex-shrink: 0;
  height: var(--size-brand-logo);
  width: auto;
}
.topbar__team {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: var(--font-size-team);
  line-height: var(--line-tight);
  color: var(--color-text-soft);
}

/* ---- Page ----------------------------------------------------------------------- */
.page {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3)
           calc(var(--size-tabbar) + var(--space-6) + env(safe-area-inset-bottom));
}

.banner {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-tight);
}
.banner--warn {
  background: var(--color-warn-soft);
  color: var(--color-warn);
  border: 1px solid var(--color-warn);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 var(--space-1) var(--space-3);
}
.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-caps-wide);
  line-height: var(--line-tight);
  text-transform: uppercase;
  color: var(--color-text);
}
.section__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.card-list {
  display: grid;
  gap: var(--space-3);
}

.footnote {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}

/* ---- Game card -------------------------------------------------------------------- */
/* Design of record: docs/mockups/task4d_card_mockup.html (structure: task4_card_mockup.html, locked).
   Markup: templates/partials/card_components.html. Values: the card group in tokens.css only. One
   connected card; sections in the locked order. Artwork: Dio's v4 WebP set in static/assets/puckline/,
   loaded as <img> and sized here through tokens (object-fit), so the files' own dimensions never drive
   the layout; the panel surfaces are background images from tokens. */

/* Frame: the one frame component, used by the card and every module. The gold hairline is the gold
   gradient showing through var(--card-bw) of padding; both layers follow the same chamfer (top-left +
   bottom-right). --cut is the chamfer size; the card and the date badge override it. */
.frame {
  --cut: var(--card-cut);
  position: relative;
  padding: var(--card-bw);
  background: var(--card-gold-line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
                     0 100%, 0 var(--cut));
}
.frame__in {
  position: relative;
  height: 100%;
  background: var(--card-mod-bg);
  box-shadow: var(--card-inner-hi), var(--card-inner-depth);
  clip-path: polygon(calc(var(--cut) - var(--card-clip-overlap)) 0, 100% 0,
                     100% calc(100% - var(--cut) + var(--card-clip-overlap)),
                     calc(100% - var(--cut) + var(--card-clip-overlap)) 100%,
                     0 100%, 0 calc(var(--cut) - var(--card-clip-overlap)));
}
/* Edge glints: short highlights on the hairline itself (top and bottom edge), no extra glow. */
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  height: var(--card-bw);
  background: var(--card-gold-glint);
  pointer-events: none;
}
.frame::after { top: 0; left: 22%; width: 34%; }
.frame::before { bottom: 0; right: 18%; width: 22%; opacity: var(--card-o-glint-2); }
.frame--plain::before,
.frame--plain::after { display: none; }
/* Panel surfaces: the texture plates are the panel background inside the existing frames (same frame,
   same chamfer; no second border, no nested panel). The standard surface covers the game header, both
   comparison tables (the closed card's and the expanded details) and the View Details row. */
.game-header > .frame__in,
.comparison > .frame__in,
.details-row > .frame__in { background: var(--card-surface-standard); }
.market-module > .frame__in { background: var(--card-surface-market); }

/* Card shell: lighter than the page, darker than its modules; ice texture; the only outer glow. */
.game-card-fx {
  min-width: 0;
  filter: drop-shadow(var(--card-glow)) drop-shadow(var(--card-shadow));
}
.game-card { --cut: var(--card-cut-card); }
.game-card > .frame__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  padding: var(--card-gap);
  background: var(--card-ice);
  font-family: var(--card-font-body);
  color: var(--card-text);
  line-height: var(--card-lh-name);
}
.game-card > .frame__in > * { min-width: 0; }

/* Shared card type */
.label {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--card-fs-label);
  letter-spacing: var(--card-ls-label);
  text-transform: uppercase;
  color: var(--card-muted);
}
.num {
  font-family: var(--card-font-num);
  font-weight: var(--card-fw-bold);
  font-variant-numeric: tabular-nums;
}
.gold-text {
  background: var(--card-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vrule {
  width: var(--card-line-w);
  align-self: stretch;
  background: var(--card-vrule);
  opacity: var(--card-o-vrule);
}

/* 1. Header: date badge | time + location | brand crown; last-meeting strip ----------------- */
.game-header > .frame__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "badge main accent" "strip strip strip";
  column-gap: var(--card-space-14);
}
.game-header__badge {
  --cut: var(--card-cut-badge);
  grid-area: badge;
  align-self: center;
  margin: var(--card-space-12) 0 var(--card-space-12) var(--card-pad-x);
}
.game-header__badge > .frame__in {
  display: grid;
  place-items: center;
  padding: var(--card-space-7) var(--card-space-13) var(--card-space-8);
  background: var(--card-badge-bg);
  text-align: center;
}
.game-header__dow {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--card-fs-dow);
  letter-spacing: var(--card-ls-dow);
  line-height: var(--card-lh-solid);
  color: var(--card-gold-hi);
}
.game-header__date {
  margin-top: var(--card-space-4);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-date);
  letter-spacing: var(--card-ls-head);
  line-height: var(--card-lh-solid);
  white-space: nowrap;
}
/* Time + location: centered in their column. A long location wraps to a second line; it is never
   truncated or shrunk. */
.game-header__main {
  grid-area: main;
  align-self: center;
  min-width: 0;
  padding-block: var(--card-space-10);
  text-align: center;
}
.game-header__time {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-time);
  letter-spacing: var(--card-ls-abbr);
  line-height: var(--card-lh-solid);
  font-variant-numeric: tabular-nums;
}
.game-header__loc {
  margin-top: var(--card-space-5);
  font-family: var(--card-font-body);
  font-weight: var(--card-fw-semi);
  font-size: var(--card-fs-small);
  letter-spacing: var(--card-ls-loc);
  text-transform: uppercase;
  color: var(--card-text-2);
  overflow-wrap: anywhere;
}
.game-header__accent {
  grid-area: accent;
  align-self: center;
  width: var(--card-accent-w);
  height: var(--card-accent-h);
  object-fit: contain;
  margin-right: var(--card-pad-x);
  filter: var(--card-accent-shadow);
}
.game-header__strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  gap: var(--card-space-8);
  padding: var(--card-space-7) var(--card-pad-x);
  border-top: var(--card-line-w) solid var(--card-gold-soft);
  background: var(--card-strip-bg);
}
.game-header__strip .label { color: var(--card-text-2); }
.game-header__strip-val {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-strip);
  letter-spacing: var(--card-ls-strip);
  color: var(--card-text);
}

/* 2. Hero: away | projected score + ICE TILT | home, over the rink photo ------------------------ */
.matchup-hero > .frame__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--card-space-4);
  padding: var(--card-space-14) var(--card-space-8) var(--card-space-12);
  overflow: hidden;
}
/* The rink photo: a background layer behind all of the hero's content (the team and center blocks are
   positioned, so they paint over it), taller than the hero and cropped by it so the center-ice crown
   sits under the ICE TILT line, then the navy shade over it. Neither adds height. */
.matchup-hero__rink {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--card-rink-h);
  object-fit: cover;
  object-position: 50% 50%;
  opacity: var(--card-rink-opacity);
  pointer-events: none;
}
.matchup-hero__shade {
  position: absolute;
  inset: 0;
  background: var(--card-rink-shade);
  pointer-events: none;
}
.matchup-hero__team {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.matchup-hero__abbr {
  margin-top: var(--card-logo-gap);
  padding-right: var(--card-space-2);
  font-family: var(--card-font-head);
  font-style: italic;
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-abbr);
  letter-spacing: var(--card-ls-abbr);
  line-height: var(--card-lh-score);
  text-shadow: var(--card-abbr-shadow);
}
.matchup-hero__name {
  margin-top: var(--card-space-5);
  font-family: var(--card-font-body);
  font-weight: var(--card-fw-semi);
  font-size: var(--card-fs-small);
  line-height: var(--card-lh-name);
  color: var(--card-text);
  text-wrap: balance;
}
.matchup-hero__meta {
  margin-top: var(--card-space-2);
  font-family: var(--card-font-body);
  font-weight: var(--card-fw-medium);
  font-size: var(--card-fs-meta);
  line-height: var(--card-lh-name);
  color: var(--card-muted);
}
.matchup-hero__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-space-6);
  min-width: 0;
  padding-inline: var(--card-space-4);
}
.matchup-hero__center .label { color: var(--card-text-2); }
.matchup-hero__score {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-score);
  line-height: var(--card-lh-score);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  filter: var(--card-score-glow);
}

/* ICE TILT: one track, one center mark, one puck; --pos (inline) is the home team's win %. */
.ice-tilt {
  position: relative;
  width: var(--card-tilt-w);
  height: var(--card-tilt-h);
  margin-top: var(--card-space-4);
}
.ice-tilt__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--card-tilt-line);
  margin-top: calc(var(--card-tilt-line) / -2);
  border-radius: var(--card-line-w);
  background: var(--card-tilt-track);
}
.ice-tilt__mark {
  position: absolute;
  left: 50%;
  top: var(--card-space-3);
  bottom: var(--card-space-3);
  width: var(--card-tilt-line);
  margin-left: calc(var(--card-tilt-line) / -2);
  border-radius: var(--card-line-w);
  background: var(--card-text);
}
.ice-tilt__puck {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: var(--card-puck-w);
  height: var(--card-puck-h);
  margin: calc(var(--card-puck-h) / -2) 0 0 calc(var(--card-puck-w) / -2);
  object-fit: contain;
  filter: var(--card-puck-shadow);
  animation: ice-tilt-slide var(--card-dur-puck) var(--card-ease) var(--card-delay-puck) both;
}
.ice-tilt__label {
  margin-top: calc(var(--card-space-2) * -1);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--card-fs-tilt);
  letter-spacing: var(--card-ls-tilt);
  text-transform: uppercase;
  color: var(--card-muted);
  opacity: var(--card-o-tilt-label);
}
@keyframes ice-tilt-slide {
  from { left: 50%; }
  to { left: var(--pos); }
}

/* 3. Comparison table (also the expanded details): away | label | home ---------------------- */
.comparison > .frame__in { padding: var(--card-space-2) var(--card-pad-x); }
.comparison__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--card-line-w) var(--card-cmp-label-w) var(--card-line-w) minmax(0, 1fr);
  align-items: center;
  height: var(--card-cmp-row-h);
}
.comparison__row + .comparison__row { border-top: var(--card-line-w) solid var(--card-divider); }
.comparison__row .vrule { height: var(--card-vrule-cmp); align-self: center; }
.comparison__val {
  text-align: center;
  font-size: var(--card-fs-cmp);
  white-space: nowrap;
}
.comparison__row .label {
  text-align: center;
  font-size: var(--card-fs-small);
  color: var(--card-text-2);
}

/* 4-6. Market module: one component for Spread, Moneyline and Total. Same title width, row height and
   column widths in all three, so values and odds line up down the card. Rows are not clickable:
   no hover, press or transition. Favorite and underdog rows look identical. */
.market-module > .frame__in {
  display: grid;
  grid-template-columns: var(--card-title-w) minmax(0, 1fr);
  align-items: center;
  gap: var(--card-space-8);
  padding: var(--card-space-8) var(--card-space-8) var(--card-space-8) var(--card-space-12);
}
.market-header {
  display: flex;
  align-items: center;
  gap: var(--card-space-9);
  min-width: 0;
}
.market-icon {
  flex: 0 0 auto;
  width: var(--card-icon);
  height: var(--card-icon);
  object-fit: contain;
  filter: var(--card-icon-shadow);
}
.market-header .vrule { height: var(--card-vrule-head); }
.market-heading { min-width: 0; }
.market-title {
  display: block;
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-title);
  letter-spacing: var(--card-ls-title);
  line-height: var(--card-lh-solid);
  text-transform: uppercase;
}
.market-subtitle {
  display: block;
  margin-top: var(--card-space-3);
  font-family: var(--card-font-body);
  font-weight: var(--card-fw-semi);
  font-size: var(--card-fs-sub);
  letter-spacing: var(--card-ls-sub);
  line-height: var(--card-lh-sub);
  text-transform: uppercase;
  color: var(--card-muted);
}
.market-rows {
  display: grid;
  gap: var(--card-space-5);
  min-width: 0;
}
.market-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) var(--card-line-w) minmax(0, 1fr) var(--card-line-w) minmax(0, 1.1fr);
  align-items: center;
  height: var(--card-market-row-h);
  border-radius: var(--card-row-radius);
  background: var(--card-row-bg);
  box-shadow: var(--card-row-ring);
}
.market-row .vrule { height: var(--card-vrule-row); align-self: center; opacity: var(--card-o-vrule-row); }
.market-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--card-row-logo-gap);
  min-width: 0;
  padding-right: var(--card-space-2);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-ident);
  letter-spacing: var(--card-ls-title);
  white-space: nowrap;
}
.market-value,
.market-odds {
  text-align: center;
  font-size: var(--card-fs-market);
  white-space: nowrap;
}
.market-value { color: var(--card-text-2); }
.market-odds { color: var(--card-text); font-weight: var(--card-fw-bold); }

/* 7. View Details: native <details>; the row is the only interactive part of the card ------- */
.game-details { interpolate-size: allow-keywords; }
.game-details > summary { list-style: none; cursor: pointer; }
.game-details > summary::-webkit-details-marker { display: none; }
.game-details > summary:focus-visible {
  outline: var(--card-focus-w) solid var(--card-gold-hi);
  outline-offset: var(--card-focus-offset);
}
/* Smooth open where ::details-content + interpolate-size are supported; instant elsewhere. */
.game-details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--card-dur-open) var(--card-ease),
              content-visibility var(--card-dur-open) allow-discrete;
}
.game-details[open]::details-content { block-size: auto; }
.details-row > .frame__in {
  display: flex;
  align-items: center;
  gap: var(--card-space-12);
  height: var(--card-details-row-h);
  padding: 0 var(--card-pad-x);
  transition: filter var(--card-dur-hover) ease;
}
.game-details > summary:hover .details-row > .frame__in { filter: var(--card-hover); }
.game-details > summary:active .details-row > .frame__in { filter: var(--card-press); }
.details-row__icon { width: var(--card-icon-sm); height: var(--card-icon-sm); }
.details-row .vrule { height: var(--card-vrule-details); }
.details-row__text {
  flex: 1;
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-fs-details);
  letter-spacing: var(--card-ls-details);
  text-transform: uppercase;
}
.details-row__chev {
  width: var(--card-chev-w);
  height: var(--card-chev-h);
  object-fit: contain;
  transition: transform var(--card-dur-chev) var(--card-ease);
}
.game-details[open] .details-row__chev { transform: rotate(var(--card-chev-open)); }
.expanded-details { margin-top: var(--card-gap); }
.expanded-details__foot {
  display: grid;
  gap: var(--card-space-3);
  padding: var(--card-space-8) 0;
  border-top: var(--card-line-w) solid var(--card-divider);
  font-size: var(--card-fs-small);
  line-height: var(--card-lh-foot);
  color: var(--card-muted);
}
.expanded-details__foot b { color: var(--card-text); font-weight: var(--card-fw-semi); }

/* Team logo, else the fallback crest. The crest shows only when there is no img: none was given, or
   static/js/app.js removed it after the logo and its MHR fallback both failed. Never over a real logo.
   One crest image for every team, with nothing baked into it; it is sized exactly like a logo in the
   same spot (object-fit: contain keeps its own proportions). The image box is the token box itself,
   explicitly sized in both spots, so a tall logo can never overflow it toward the team code; the row box
   carries a small inner padding so a wide logo never touches the code or the row edge.
   In the hero only, the team code (.logo__initials, the same string printed under the logo) is overlaid
   on the crest as live text, centered in the shield, in the card's display face with a restrained dark
   shadow and nothing behind it; it shares the crest's one grid cell and is hidden, like the crest,
   whenever a logo img is present. A market-row crest (16x14) stays blank: letters that small are
   unreadable, and the code is printed right beside it (task 4g). */
.logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.logo--hero { width: var(--card-logo-w); height: var(--card-logo-h); }
.logo--row {
  box-sizing: content-box;
  min-width: var(--card-row-logo-w);
  height: var(--card-row-logo-h);
  padding: 0 var(--card-row-logo-pad);
}
.logo__img,
.logo__crest,
.logo__initials { grid-area: 1 / 1; }   /* one cell: the code overlays the crest, nothing stacks below it */
.logo__img,
.logo__crest { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo--hero .logo__img,
.logo--hero .logo__crest { width: var(--card-logo-w); height: var(--card-logo-h); max-width: none; filter: var(--card-logo-shadow); }
.logo--row .logo__img,
.logo--row .logo__crest { width: var(--card-row-logo-w); height: var(--card-row-logo-h); max-width: none; }
.logo__initials {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--card-crest-fs);
  line-height: var(--card-lh-solid);
  letter-spacing: var(--card-ls-abbr);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--card-text);
  text-shadow: var(--card-crest-ink-shadow);
  transform: translateY(calc(var(--card-logo-h) * var(--card-crest-ink-dy)));
  pointer-events: none;
}
.logo__img + .logo__crest,
.logo__img ~ .logo__initials { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ice-tilt__puck { animation: none; }
  .details-row__chev,
  .details-row > .frame__in { transition: none; }
  /* separate rule: a browser without ::details-content drops only this one */
  .game-details::details-content { transition: none; }
}

/* ---- Empty state ------------------------------------------------------------------ */
.empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.empty__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}
.empty__body {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---- Bottom tab bar ----------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--size-tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-overlay);
  backdrop-filter: blur(var(--blur-bar));
  -webkit-backdrop-filter: blur(var(--blur-bar));
  border-top: 1px solid var(--color-border);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}
.tab__icon {
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab.is-active { color: var(--color-accent); }
.tab.is-disabled { color: var(--color-text-faint); cursor: not-allowed; }

/* ---- Login page (server only) ---------------------------------------------------------- */
/* The one-passphrase page (templates/login.html): no top bar, no tab bar, one centered card in the
   card's gold frame. Values from the login tokens; the error line uses the shell's warning color. */
.login {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--size-tabbar) - var(--space-8));
}
.login-card {
  width: 100%;
  max-width: var(--login-card-w);
  margin: 0;
  filter: drop-shadow(var(--card-glow)) drop-shadow(var(--card-shadow));
}
.login-card__in {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-4);
  background: var(--card-ice);
}
.login-card__logo {
  display: block;
  justify-self: center;
  height: var(--login-logo-h);
  width: auto;
}
.login-card__field {
  display: grid;
  gap: var(--space-1);
}
.login-card__label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-caps-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.login-card__input {
  width: 100%;
  height: var(--login-field-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--login-field-line);
  border-radius: var(--radius-sm);
  background: var(--login-field-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-field);
}
.login-card__input:focus-visible {
  outline: var(--card-focus-w) solid var(--card-gold-hi);
  outline-offset: 0;
  border-color: var(--card-gold);
}
.login-card__button {
  height: var(--login-field-h);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--card-gold);
  color: var(--color-text-on-accent);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-caps-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.login-card__button:focus-visible {
  outline: var(--card-focus-w) solid var(--card-gold-hi);
  outline-offset: var(--card-focus-offset);
}
.login-card__error {
  margin: 0;
  min-height: calc(var(--font-size-sm) * var(--line-normal));
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
  color: var(--color-warn);
}

/* ---- Wider screens ------------------------------------------------------------------- */
@media (min-width: 720px) {
  .page { padding-left: var(--space-5); padding-right: var(--space-5); }
  .card-list { grid-template-columns: repeat(auto-fill, minmax(var(--width-card-min), 1fr)); }
  .tabbar {
    left: 50%;
    right: auto;
    width: min(var(--width-content), 100%);
    transform: translateX(-50%);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .topbar__team { font-size: var(--font-size-sm); }
}

/* ---- Results tab ---------------------------------------------------------------------------- */
/* Design of record: docs/mockups/task6_results_mockup.html. Markup: templates/results.html and
   templates/partials/result_components.html; the full card under each row is the same game card as
   Upcoming (card_components.html) with the final hero variant and the settled market rows below.
   Values: the results group in tokens.css. Gold marks nothing here: the month rule and the frames are
   gold because they are part of the brand frame. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.result-list { display: grid; gap: var(--space-3); min-width: 0; }
.result-list > * { min-width: 0; }

/* Record strip: clean games only */
.record > .frame__in {
  padding: var(--card-space-10) var(--card-pad-x) var(--card-space-9);
  background: var(--card-surface-standard);
  font-family: var(--card-font-body);
  color: var(--card-text);
}
.record__grid {
  display: grid;
  grid-template-columns: 1fr var(--card-line-w) 1fr var(--card-line-w) 1fr;
  align-items: center;
  text-align: center;
}
.record__grid .vrule { height: var(--res-vrule-record); align-self: center; }
.record__val { font-size: var(--res-fs-record); line-height: var(--card-lh-solid); }
.record__val small {
  margin: 0 var(--card-space-2);
  font-size: var(--res-fs-record-small);
  font-weight: var(--card-fw-semi);
  color: var(--card-muted);
}
.record__lbl {
  margin-top: var(--card-space-5);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--res-fs-record-lbl);
  letter-spacing: var(--res-ls-record-lbl);
  text-transform: uppercase;
  color: var(--card-muted);
}
.record__foot {
  margin-top: var(--card-space-8);
  padding-top: var(--card-space-7);
  border-top: var(--card-line-w) solid var(--card-divider);
  font-size: var(--res-fs-foot);
  text-align: center;
  color: var(--card-muted);
}
.record__empty {
  padding: var(--card-space-4) 0;
  font-size: var(--card-fs-small);
  text-align: center;
  color: var(--card-muted);
}

/* Month divider */
.month-divider {
  display: flex;
  align-items: center;
  gap: var(--card-space-10);
  margin: var(--card-space-8) var(--card-space-2) calc(var(--card-space-4) * -1);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--res-fs-month);
  letter-spacing: var(--res-ls-month);
  text-transform: uppercase;
  color: var(--card-text-2);
}
.month-divider::after {
  content: "";
  flex: 1;
  height: var(--card-line-w);
  background: linear-gradient(90deg, var(--res-month-line), transparent);
}

/* One result: the compact row is the <summary>, the full card is the body; the first three start open */
.result { display: grid; gap: var(--card-gap); min-width: 0; }
.result > summary { list-style: none; cursor: pointer; }
.result > summary::-webkit-details-marker { display: none; }
.result > summary:focus-visible {
  outline: var(--card-focus-w) solid var(--card-gold-hi);
  outline-offset: var(--card-focus-offset);
}
.result-row > .frame__in {
  display: grid;
  gap: var(--card-space-8);
  padding: var(--card-space-9) var(--card-space-12) var(--card-space-9) var(--card-space-10);
  background: var(--card-surface-standard);
  font-family: var(--card-font-body);
  color: var(--card-text);
  line-height: var(--card-lh-name);
  transition: filter var(--card-dur-hover) ease;
}
.result > summary:hover .result-row > .frame__in { filter: var(--card-hover); }
.result > summary:active .result-row > .frame__in { filter: var(--card-press); }
.result-row__top {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--card-space-9);
}
.result-row__date {
  display: grid;
  justify-items: center;
  min-width: var(--res-date-w);
  line-height: var(--card-lh-solid);
}
.result-row__dow {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--res-fs-dow);
  letter-spacing: var(--res-ls-dow);
  color: var(--card-gold-hi);
}
.result-row__md {
  margin-top: var(--card-space-3);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--res-fs-md);
  letter-spacing: var(--res-ls-md);
  white-space: nowrap;
}
.result-row__va {
  min-width: var(--res-va-w);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--res-fs-va);
  letter-spacing: var(--res-ls-va);
  text-align: center;
  text-transform: uppercase;
  color: var(--card-text-2);
}
/* The opponent logo in the compact row: the same logo / MHR fallback / blank crest chain as the card */
.logo--rrow { width: var(--res-logo-w); height: var(--res-logo-h); }
.logo--rrow .logo__img,
.logo--rrow .logo__crest { width: var(--res-logo-w); height: var(--res-logo-h); max-width: none; filter: var(--res-logo-shadow); }
.result-row__opp { min-width: 0; }
.result-row__line { display: flex; align-items: baseline; gap: var(--card-space-6); min-width: 0; }
.result-row__code {
  font-family: var(--card-font-head);
  font-style: italic;
  font-weight: var(--card-fw-heavy);
  font-size: var(--res-fs-code);
  line-height: var(--card-lh-solid);
}
.result-tag {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: var(--res-tag-h);
  margin-left: var(--card-space-2);
  padding: 0 var(--res-tag-pad);
  border: var(--card-line-w) solid var(--res-tag-line);
  border-radius: var(--res-tag-radius);
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--res-fs-tag);
  letter-spacing: var(--res-ls-tag);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--card-muted);
}
.result-row__name {
  margin-top: var(--card-space-2);
  font-size: var(--res-fs-name);
  color: var(--card-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-row__score { text-align: right; line-height: var(--card-lh-solid); }
.result-row__wl {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-heavy);
  font-size: var(--res-fs-wl);
  letter-spacing: var(--res-ls-wl);
  color: var(--card-muted);
}
.result-row__num { margin-top: var(--card-space-2); font-size: var(--res-fs-num); color: var(--card-text); }
.result-row__chev {
  width: var(--res-chev-w);
  height: var(--res-chev-h);
  object-fit: contain;
  opacity: var(--res-o-chev);
  transition: transform var(--card-dur-chev) var(--card-ease);
}
.result[open] > summary .result-row__chev { transform: rotate(var(--card-chev-open)); }

/* Settled-market chips: ML and PL for the selected team (check / X), TOT with no mark */
.result-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-space-6);
}
.result-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--card-space-6);
  height: var(--res-chip-h);
  min-width: 0;
  border-radius: var(--card-row-radius);
  background: var(--card-row-bg);
  box-shadow: inset 0 0 0 var(--card-line-w) var(--res-chip-ring);
  font-family: var(--card-font-num);
  font-weight: var(--card-fw-bold);
  font-size: var(--res-fs-chip);
  white-space: nowrap;
}
.result-chip__k {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--res-fs-chip-k);
  letter-spacing: var(--res-ls-chip-k);
  color: var(--card-muted);
}
.result-chip__act {
  margin-left: var(--card-space-2);
  font-family: var(--card-font-num);
  font-weight: var(--card-fw-semi);
  font-size: var(--res-fs-act);
  color: var(--card-muted);
}
.result-chip__act::before { content: "· "; }
.result-chip--none { font-weight: var(--card-fw-semi); color: var(--card-muted); }

/* The marks: green check (won / covered), red X (lost / did not cover); only ever the selected team's */
.settle-mark { flex: 0 0 auto; width: var(--res-mark); height: var(--res-mark); color: var(--settle); }
.settle-mark--x { color: var(--miss); }

/* Settled market rows inside a final's card. Upcoming rows carry none of these classes. */
.market-row.is-won {
  box-shadow: inset 0 0 0 var(--card-line-w) var(--settle-line), var(--res-row-hi);
  background: var(--settle-tint), var(--card-row-bg);
}
.market-row.is-lost {
  box-shadow: inset 0 0 0 var(--card-line-w) var(--miss-line), var(--res-row-hi);
  background: var(--miss-tint), var(--card-row-bg);
}
.market-row.is-other,
.market-row.is-dim { opacity: var(--loss-dim); }
.market-row.is-hit { box-shadow: inset 0 0 0 var(--card-line-w) var(--hit-line), var(--res-row-hi); }
.market-row.is-none .market-value,
.market-row.is-none .market-odds { color: var(--card-muted); }

/* The hero on a final: FINAL label and score in white (no gold text), the pre-game projection under it */
.matchup-hero__center .matchup-hero__final-label { color: var(--card-text); }
.matchup-hero__score--final { color: var(--card-text); filter: var(--res-final-shadow); }
.matchup-hero__proj {
  font-family: var(--card-font-head);
  font-weight: var(--card-fw-bold);
  font-size: var(--res-fs-proj);
  letter-spacing: var(--card-ls-label);
  text-transform: uppercase;
  color: var(--card-muted);
}
.matchup-hero__proj b {
  font-size: var(--res-fs-proj-val);
  letter-spacing: var(--res-ls-proj-val);
  color: var(--card-text-2);
}

.result-legend {
  margin: var(--card-space-2) var(--card-space-2) 0;
  font-family: var(--card-font-body);
  font-size: var(--res-fs-legend);
  line-height: var(--res-lh-legend);
  color: var(--card-muted);
}
.result-legend b { font-weight: var(--card-fw-semi); color: var(--card-text-2); }

@media (prefers-reduced-motion: reduce) {
  .result-row__chev,
  .result-row > .frame__in { transition: none; }
}