/*
  Public results pages (phase 4, P4.1). Loaded by GamesPage (src/views/results/page.tsx) after h1.css
  on Results, Schedule, Standings and the match page. These are the few parts the H1 library does not
  have: the league pages strip, the team badge, a score line, round headings, the team filter and the
  "presented by" band. They follow the same rules as h1.css (square, nothing under 12px, no blur, 44px
  targets) and read the same surface variables, so the page body stays on night with paper bands as the
  boards draw them. Later phase 4 slices add their own files (standings.css, match.css, photos.css).
*/

/* The league pages strip: phones only, the header carries the same links from 1024px up. */
.h1-res-nav {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 0 4px;
  border-bottom: 1px solid var(--h1-line);
  background: var(--gzs-night);
}

.h1-res-nav:empty {
  display: none;
}

.h1-res-nav-link {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  color: var(--h1-fg-2);
  text-decoration: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.h1-res-nav-link[aria-current='page'] {
  color: var(--h1-fg-strong);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--h1-fg-strong);
}

@media (min-width: 1024px) {
  .h1-res-nav {
    display: none;
  }
}

/* Team badge: a letter tile in the team's colors. The colors arrive in a style attribute. */
.h1-res-badge {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--h1-outline);
  font-family: var(--gzs-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.h1-res-badge-28 {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.h1-res-badge-44 {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

/* Score line: two rows, team and points, with the result word on the right. */
.h1-res-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.h1-res-side {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--h1-fg-2);
}

.h1-res-side-won {
  color: var(--h1-fg-strong);
}

.h1-res-team {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--gzs-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  color: inherit;
}

.h1-res-pts {
  flex: none;
  min-width: 2ch;
  text-align: right;
  font-family: var(--gzs-font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 32px;
  color: inherit;
}

.h1-res-word {
  flex: none;
  min-width: 5ch;
  text-align: right;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-res-side-won .h1-res-word {
  color: var(--h1-fg-strong);
}

/* Round heading: the round and its date on one line. */
.h1-res-round {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--h1-line);
}

.h1-res-round-title {
  font-family: var(--gzs-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  color: var(--h1-fg-strong);
}

.h1-res-round-when {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

/* Team filter: links in a row that scrolls sideways on a small phone. */
.h1-res-filter {
  overflow-x: auto;
}

.h1-res-filter-list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.h1-res-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--h1-quiet-border);
  color: var(--h1-fg);
  text-decoration: none;
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.h1-res-chip[aria-current='true'] {
  background: var(--h1-solid-bg);
  border-color: var(--h1-solid-bg);
  color: var(--h1-solid-fg);
  font-weight: 700;
}

.h1-res-chip-count {
  font-weight: 700;
}

/* Presented by: the lead line, the sponsor's logo and name. Draws nothing when nobody presents. */
.h1-res-presented {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px var(--gzs-gutter-public);
  border-top: 1px solid var(--h1-line);
  border-bottom: 1px solid var(--h1-line);
}

.h1-res-presented-lead {
  font-family: var(--gzs-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h1-fg-2);
}

.h1-res-presented-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  min-height: 44px;
  color: var(--h1-fg-strong);
  text-decoration: none;
}

.h1-res-presented-logo {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #ffffff;
}

.h1-res-presented-name {
  font-family: var(--gzs-font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
}