/* =========================================================================
 * editorial.css — metill.is Íþróttir port
 * Primitives for the "editorial newspaper" voice.
 * ========================================================================= */

/* ---- Typography primitives ------------------------------------------- */
.font-display-hero {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 380;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.font-display-section {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 48;
  font-weight: 380;
  letter-spacing: -0.015em;
}
.font-display-panel {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
}
.italic-accent {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
}
.mono-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grot);
}
.breadcrumb {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.breadcrumb a { color: var(--grot); text-decoration: none; }
.breadcrumb a:hover { color: var(--basalt); }
.breadcrumb .sep { color: var(--border-strong); margin: 0 8px; }
.breadcrumb .here { color: var(--basalt); font-weight: 600; }
.lede {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 340;
  font-size: 22px;
  line-height: 1.35;
  color: var(--grot);
  max-width: 46ch;
  margin-top: 18px;
}

/* ---- Editorial chrome ------------------------------------------------ */
.rule-heavy { border-top: 1px solid var(--rule); }
.section-head {
  padding: 56px 0 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}
.section-head h2 { margin: 0; }
.section-head__meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grot);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .section-head { padding: 36px 0 14px; margin-bottom: 22px; }
  .section-head__meta { white-space: normal; flex-basis: 100%; }
}
.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--border);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grot);
}
@media (max-width: 640px) {
  .masthead-meta { font-size: 10px; letter-spacing: 0.08em; gap: 4px 14px; }
  .masthead-meta .ml-auto { margin-left: 0; }
}

/* ---- Navbar brand strapline ----------------------------------------- */
/* Newspaper-masthead style — sits next to the Metill. wordmark at 1024px+
   viewports.  The divider is a 1px × 18px rule in var(--border); the
   strapline is italic Fraunces at 15px in var(--grot), mirroring the
   cover-hero lede typography so the navbar reads as the publication
   masthead and the hero as its cover story.  Hidden below 1024px to
   keep the navbar uncluttered on tablet/mobile — the Tailwind shim
   only has `md:` so visibility is controlled directly here. */
.navbar-divider,
.navbar-strapline {
  display: none;
}
.navbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}
.navbar-strapline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "opsz" 24;
  font-size: 15px;
  line-height: 1;
  color: var(--grot);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .navbar-divider { display: block; }
  .navbar-strapline { display: inline; }
}

/* ---- Ticker pill ----------------------------------------------------- */
.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
}
.ticker-pill .dot-live {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--jokull);
  animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jokull) 55%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--jokull) 0%,  transparent); }
}

/* ---- Nav link (mono, uppercase) ------------------------------------- */
.nav-link {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grot);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-link:hover { color: var(--basalt); }
.nav-link--mobile {
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--basalt);
}
.nav-link--mobile:last-of-type { border-bottom: 0; }

/* ---- Nav dropdown (e.g. Sveitarfélög sub-pages) ---------------------- */
/* Editorial chrome: top accent in Jökull, breathy padding, mono kicker,
   left-edge accent on hover/active. Visual sibling of .trust-strip
   rather than a generic Tailwind dropdown. */
.nav-dropdown__panel {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-top: 2px solid var(--jokull);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--basalt) 18%, transparent);
  padding: 0;
}
.nav-dropdown__kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grot);
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-light);
}
.nav-dropdown__item {
  display: block;
  padding: 10px 16px 10px 13px;
  border-left: 3px solid transparent;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--basalt);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms, color 120ms, border-left-color 120ms;
}
.nav-dropdown__item + .nav-dropdown__item {
  border-top: 1px solid var(--border-light);
}
.nav-dropdown__item:hover {
  background: var(--raised);
  color: var(--jokull);
  border-left-color: var(--jokull);
}
.nav-dropdown__item[aria-current="page"] {
  background: color-mix(in srgb, var(--jokull) 7%, transparent);
  color: var(--jokull);
  border-left-color: var(--jokull);
}
.nav-dropdown__chevron {
  width: 12px;
  height: 12px;
  transition: transform 150ms;
}
.nav-dropdown__trigger[aria-expanded="true"] .nav-dropdown__chevron {
  transform: rotate(180deg);
}
.nav-dropdown__trigger[aria-expanded="true"] {
  color: var(--basalt);
}

/* ---- League tabs ----------------------------------------------------- */
.league-tab {
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grot);
  cursor: pointer;
  text-decoration: none;
}
.league-tab[aria-current="page"] {
  background: var(--basalt);
  color: var(--bg-paper);
  border-color: var(--basalt);
}
.league-tab[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ---- Sport + sex tab strips (Íþróttir) ----------------------------- */
.ithrottir-tabs {
  padding: 8px 0 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ithrottir-tabs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.ithrottir-tabs__row--leagues {
  padding-top: 4px;
  padding-bottom: 16px;
}
.ithrottir-tabs__group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.picker-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grot);
}
.picker-meta__v { color: var(--basalt); font-weight: 600; }
.picker-meta__sep { color: var(--border-strong); margin: 0 10px; }

/* ---- Form field label (mono uppercase, matches editorial chrome) ---- */
.field-label {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grot);
  margin-bottom: 6px;
}

/* ---- Native <select> with custom chevron (matches custom picker) ----
   Specificity bump (select.field-select rather than .field-select) is
   intentional: Tailwind utilities like `px-3` and `bg-paper` ship with
   class-only specificity and load *after* this file (via the second
   <link> in base.html), so a plain class loses the cascade. */
select.field-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
  padding-right: 2rem;
}
[data-theme="dark"] select.field-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>");
}

/* ---- Fact card (title-block facts) ---------------------------------- */
.fact { display: flex; flex-direction: column; gap: 6px; }
.fact-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grot);
}
.fact-value {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 48;
  font-weight: 360;
  font-size: 28px;
  color: var(--ink);
}
.fact-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--grot);
}

/* ---- Fixture card hairline grid ------------------------------------- */
.fixtures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (max-width: 900px) {
  .fixtures-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fixtures-grid { grid-template-columns: 1fr; }
  .fixture-card { padding: 16px 18px; }
}
.fixtures-grid__loading {
  grid-column: 1 / -1;
  background: var(--surface);
  padding: 40px 0;
  text-align: center;
}
.fixture-card { background: var(--surface); padding: 20px 22px; }
.fixture-card__head {
  display: flex;
  justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--subtle);
  margin-bottom: 14px;
}
.fixture-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.fixture-card__team {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fixture-card__team--away { flex-direction: row-reverse; text-align: right; }
.fixture-card__team-name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
  font-size: 16px;
}
.fixture-card__rank {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--subtle);
}
.fixture-card__probs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 2px;
}
.fixture-card__probs .col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fixture-card__probs .col.c { align-items: center; }
.fixture-card__probs .col.r { align-items: flex-end; }
.fixture-card__probs .lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}
.fixture-card__probs .val {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 48;
  font-weight: 440;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fixture-card__probs .col.hl .val { color: var(--jokull); }
.fixture-card__xg {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--subtle);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.crest {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--raised);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  color: var(--grot);
  flex-shrink: 0;
}
.win-prob-bar { display: flex; height: 6px; margin-top: 10px; }
.win-prob-bar > .home  { background: var(--jokull); }
.win-prob-bar > .draw  { background: var(--border-strong); }
.win-prob-bar > .away  { background: var(--midnaetursol); }
.fixture-card__goal-diff {
  display: block;
  width: 100%;
  height: 16px;
  margin-top: 6px;
}
.fixture-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 6px 2px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--subtle);
}

/* ---- Landing: editorial hero ---------------------------------------- */
.hero-editorial {
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--border);
}
.hero-editorial .hero-kicker {
  color: var(--jokull);
  letter-spacing: 0.18em;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-editorial .hero-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--jokull);
}
.hero-editorial h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 380;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 7.5vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 36px;
  max-width: 14ch;
}
.hero-editorial h1 em {
  font-style: italic;
  font-weight: 340;
  color: var(--jokull);
}
.hero-lede {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 340;
  font-size: 22px;
  line-height: 1.45;
  color: var(--basalt);
  max-width: 58ch;
}
.hero-meta-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--subtle);
  text-transform: uppercase;
}
.hero-meta-row > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.hero-meta-row .v { color: var(--basalt); font-weight: 500; }

/* ---- Landing: hero cover story -------------------------------------- */
/* Magazine-cover hero for the 2026 muni elections.  Brand identity stays
   in the navbar wordmark + the issue-bar above (which functions as the
   publication masthead); this section is the cover story.  Revert post-
   17. maí by removing the .hero-cover section from landing.html and
   restoring the original `.hero-editorial` wordmark block. */
.hero-cover {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--border);
}
.hero-cover__kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jokull);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-cover__kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--jokull);
}
.hero-cover__h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 380;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 7.5vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 16ch;
  hyphens: manual;
}
.hero-cover__h1 .accent {
  color: var(--jokull);
  font-style: italic;
  font-weight: 360;
}
.hero-cover__lede {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 380;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--basalt);
  max-width: 60ch;
  margin: 0 0 48px;
}
@media (max-width: 700px) {
  .hero-cover { padding: 32px 0 36px; }
  .hero-cover__h1 { margin-bottom: 20px; }
  .hero-cover__lede { font-size: 19px; margin-bottom: 36px; }
}

/* Cover-cards grid — 2 wide feature cards on row 1, 3 standard on row 2.
   12-col base so the row 1 = 6+6 (cover stories) and row 2 = 4+4+4
   (inside the issue) fits with no orphan slot.  Collapses to 2-col under
   1100px and 1-col under 700px (same breakpoint family as `.cards-grid`). */
.cards-grid--feature {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.cards-grid--feature .card { grid-column: span 4; }
.cards-grid--feature .card--feature { grid-column: span 6; }
@media (max-width: 1100px) {
  .cards-grid--feature { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--feature .card,
  .cards-grid--feature .card--feature { grid-column: span 1; }
}
@media (max-width: 700px) {
  .cards-grid--feature { grid-template-columns: 1fr; }
}

/* Feature-card variant — larger title + peek area than the standard card.
   Used for the two cover-story cards (Sveitarfélög, Fasteignagjöld). */
.card--feature { padding: 36px 36px 28px; min-height: 380px; }
.card--feature h3 { font-size: 36px; max-width: 22ch; }
.card--feature .card-desc { max-width: 52ch; font-size: 15.5px; }
.card--feature .card-peek { padding-top: 28px; margin-top: 32px; }
.card--feature .peek-bars { height: 96px; }
.card--feature .peek-strength,
.card--feature .peek-sparkline { height: 96px; }
@media (max-width: 700px) {
  .card--feature { padding: 28px 28px 24px; }
  .card--feature h3 { font-size: 30px; }
}

/* Bottom mono meta strip across the hero — mirrors `.hero-meta-row`. */
.hero-cover__meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--subtle);
  text-transform: uppercase;
}
.hero-cover__meta > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.hero-cover__meta .v { color: var(--basalt); font-weight: 500; }

/* ---- Landing: property-card grid ------------------------------------ */
.cards-subhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 36px 0 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--subtle);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.cards-subhead__lbl { color: var(--basalt); font-weight: 600; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cards-grid--external {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .cards-grid, .cards-grid--external { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s;
}
.card:hover { border-color: var(--jokull); }
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 12px;
}
.card-kicker {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--jokull);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-kicker__num {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--jokull) 12%, transparent);
  color: var(--jokull);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.card-status {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--grot);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.card-status--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--jokull);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jokull) 18%, transparent);
}
.card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 440;
  font-variation-settings: "opsz" 48;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--basalt);
  margin-bottom: 10px;
}
.card-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grot);
  max-width: 44ch;
  margin-bottom: auto;
}
.card-peek {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
}
.card-foot {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--subtle);
  letter-spacing: 0.06em;
}
.card-foot__go { color: var(--jokull); text-transform: uppercase; }
.card:hover .card-foot__go {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card-foot__ext { color: var(--subtle); margin-left: 2px; font-size: 10px; }

/* ---- Landing: peek variants ----------------------------------------- */
.peek-nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.peek-nums__item {
  border-left: 2px solid var(--border);
  padding: 2px 0 2px 10px;
}
.peek-nums__item--hl { border-left-color: var(--jokull); }
.peek-nums__lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--subtle);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.peek-nums__v {
  font-family: 'Geist Mono', monospace;
  font-size: 17px;
  font-weight: 500;
  color: var(--basalt);
  font-variant-numeric: tabular-nums;
}

.peek-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 64px;
}
.peek-bars__bar {
  flex: 1;
  background: var(--jokull);
  opacity: 0.85;
}
.peek-bars__bar--dim {
  background: var(--border-strong);
  opacity: 1;
}

.peek-strength, .peek-sparkline {
  width: 100%;
  height: 64px;
  display: block;
}

.peek-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 18;
  font-weight: 440;
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  color: var(--basalt);
}
.peek-headline__meta {
  margin-top: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--subtle);
  text-transform: uppercase;
}

/* ---- Landing: trust strip ------------------------------------------ */
.trust-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--border);
  padding: 44px 0;
  margin: 24px 0 60px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .trust-strip { grid-template-columns: 1fr; gap: 28px; }
}
.trust-strip__h {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 420;
  font-variation-settings: "opsz" 36;
  font-size: 26px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--basalt);
}
.trust-strip__h em {
  font-style: italic;
  color: var(--jokull);
  font-weight: 380;
}
.trust-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
@media (max-width: 900px) {
  .trust-list { grid-template-columns: 1fr; }
}
.trust-item__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  color: var(--basalt);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.trust-item__num {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--subtle);
  letter-spacing: 0.06em;
  font-weight: 400;
}
.trust-item__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--grot);
}

/* ---- Site footer ---------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 40px 0 60px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer-brand__wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  font-weight: 440;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.02em;
  color: var(--basalt);
}
.footer-brand__wordmark .dot { color: var(--jokull); }
.footer-brand__tagline {
  font-size: 13.5px;
  color: var(--grot);
  max-width: 36ch;
  margin-top: 10px;
  line-height: 1.5;
}
.footer-col__h {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--subtle);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-size: 14px;
  color: var(--basalt);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--jokull); }
.footer-col__li--small { font-size: 12.5px; color: var(--grot); }
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 32px;
  margin-top: 40px;
  border-top: 1px solid var(--border-light);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--subtle);
  letter-spacing: 0.06em;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-meta__kt { text-transform: uppercase; }

/* ---- Panel (nested card inside a section) --------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px;
}
@media (max-width: 640px) {
  .panel { padding: 16px; }
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
  font-size: 19px;
}
.panel-caption {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--grot);
}
/* Panel-head with inline controls (e.g., the strength card's component
   × location selector) — title left-aligned, controls right-aligned and
   wrapping to a second row on narrow viewports. */
.panel-head--with-controls {
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Inline chip controls (strength card) -------------------------- */
.strength-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
}
.strength-controls__group {
  display: inline-flex;
  gap: 4px;
}
.strength-controls__sep {
  color: var(--grot);
  opacity: 0.5;
  margin: 0 4px;
}
.strength-chip {
  padding: 3px 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--grot);
  font-family: inherit;
  font-size: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.strength-chip:hover {
  color: var(--basalt);
  border-color: var(--basalt);
}
.strength-chip[aria-pressed="true"] {
  background: var(--basalt);
  color: var(--bg-paper);
  border-color: var(--basalt);
}

/* ---- Heatmap round-history slider ---------------------------------- */
.heatmap-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--grot);
}
.heatmap-controls__label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.heatmap-controls__round {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--basalt);
  font-variation-settings: "opsz" 16;
}
.heatmap-controls__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  cursor: pointer;
}
.heatmap-controls__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--jokull);
  border: 2px solid var(--bg-paper);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--jokull);
}
.heatmap-controls__slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--jokull);
  border: 2px solid var(--bg-paper);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--jokull);
}

/* ---- Strength forest plot row --------------------------------------- */
.strength-row {
  display: grid;
  grid-template-columns: 160px 1fr 110px;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
/* On phones, restructure the row: name + score share a top line; bar drops
   underneath at full width. Otherwise the 160 + 110 px gutter columns
   eat all available space and the bar collapses to a sliver.
   DOM order is fixed by strength-table.js: name, bar, score-wrapper. */
@media (max-width: 640px) {
  .strength-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name score" "bar bar";
    gap: 4px 12px;
    padding: 12px 0;
  }
  .strength-row > :nth-child(1) { grid-area: name; }
  .strength-row > :nth-child(2) { grid-area: bar; }
  .strength-row > :nth-child(3) { grid-area: score; text-align: right; }
}
.strength-row__name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
  font-size: 15px;
}
.strength-bar { position: relative; height: 14px; }
.strength-bar .b95,
.strength-bar .b68 {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--jokull);
}
.strength-bar .b95 { height: 8px;  opacity: 0.18; }
.strength-bar .b68 { height: 10px; opacity: 0.42; }
.strength-bar .mean {
  position: absolute; top: 0;
  width: 2px; height: 14px;
  background: var(--jokull);
}
.strength-row__score {
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--basalt);
}
.strength-row__score-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--grot);
}

/* Baseline (pre-season) sub-row, shown directly below the main row when
   the publisher has emitted a `preseason` field. Uses the negative palette
   token for visual contrast and pairs the previous main-row border with
   no border of its own so the (main, baseline) pair reads as a unit. */
.strength-row--baseline {
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--border-light);
  margin-top: -10px;
}
.strength-row:has(+ .strength-row--baseline) {
  border-bottom: none;
  padding-bottom: 4px;
}
.strength-row__name--baseline {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--negative);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strength-bar--baseline { height: 10px; }
.strength-bar--baseline .b95,
.strength-bar--baseline .b68 { background: var(--negative); }
.strength-bar--baseline .b95 { height: 6px;  opacity: 0.18; }
.strength-bar--baseline .b68 { height: 8px;  opacity: 0.42; }
.strength-bar--baseline .mean {
  background: var(--negative);
  height: 10px;
}
.strength-row__score--baseline {
  color: var(--negative);
  font-size: 11.5px;
}

/* ---- Finishing-position heatmap ------------------------------------- */
.heatmap-grid {
  display: grid;
  grid-template-columns: 160px repeat(12, 1fr);
  gap: 0;
}
@media (max-width: 640px) {
  .heatmap-grid { min-width: 560px; }
}
.heatmap-head {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--subtle);
  padding: 8px 4px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.heatmap-head.first { text-align: left; padding-left: 0; }
.heatmap-row__name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
  font-size: 14px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding-right: 12px;
}
.heatmap-cell {
  position: relative; height: 26px;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.heatmap-cell .fill {
  position: absolute; inset: 3px 2px;
  background: var(--jokull);
}
.heatmap-cell .num {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--basalt);
}

/* ---- Standings table ------------------------------------------------ */
/* Scroll wrapper — keeps the page at viewport width while letting wide
   tables / grids scroll horizontally inside their own band. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-inline: 0;
}
@media (max-width: 640px) {
  .table-scroll {
    /* fade right edge to hint at scrollable content beyond */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .table-scroll:hover,
  .table-scroll:focus-within {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
@media (max-width: 640px) {
  .standings-table { min-width: 720px; }
}
.standings-table thead th {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grot);
  padding: 10px 8px;
  text-align: right;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.standings-table thead th:first-child,
.standings-table thead th.team-col { text-align: left; }
.standings-table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Geist Mono', monospace;
  font-size: 13px;
}
.standings-table tbody td.team-col {
  text-align: left;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
  font-size: 16px;
}
.standings-table td.rank-top    { color: var(--jokull);   font-weight: 600; }
.standings-table td.rank-bottom { color: var(--negative); font-weight: 600; }

/* Two-row thead: group labels (Mörk / Stig) span the actual+expected pairs. */
.standings-table thead tr.standings-table__group th.group-head {
  text-align: center;
  font-weight: 600;
  color: var(--basalt);
  border-bottom: 1px solid var(--border);
}
.standings-table thead tr.standings-table__group th[rowspan="2"] {
  vertical-align: bottom;
}
/* Subtle left border on the first cell of each group keeps the grouping
   legible without adding header weight. */
.standings-table td.group-first,
.standings-table thead th + th.group-head,
.standings-table thead tr:not(.standings-table__group) > th:nth-of-type(1),
.standings-table thead tr:not(.standings-table__group) > th:nth-of-type(3),
.standings-table thead tr:not(.standings-table__group) > th:nth-of-type(5) {
  border-left: 1px solid var(--border-light);
  padding-left: 10px;
}
/* Expected columns render slightly dimmer to signal model-output vs. observed. */
.standings-table td.expected {
  color: var(--grot);
  font-style: italic;
}
/* Partial-coverage state: the model's archive only has pre-round fits for
   N of M played rounds, so the cumulative xG/xPts is monotonically lower
   than it "should" be. Dim further + a small superscript marker. */
.standings-table td.expected.partial { opacity: 0.62; }
.standings-table sup.coverage-mark {
  font-size: 9px;
  font-style: normal;
  color: var(--jokull);
  margin-left: 1px;
  vertical-align: super;
  cursor: help;
}
.standings-table__footnote {
  margin-top: 12px;
  padding: 8px 12px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--grot);
  line-height: 1.5;
  border-left: 2px solid var(--border-light);
}
.standings-table__footnote .coverage-mark {
  font-size: 11px;
  font-style: normal;
  color: var(--jokull);
  margin-right: 4px;
}

/* ---- Form chips ----------------------------------------------------- */
.form-chips { display: inline-flex; gap: 3px; }
.form-chip {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 600;
  color: var(--surface);
}
.form-chip.W { background: var(--positive); }
.form-chip.D { background: var(--subtle); }
.form-chip.L { background: var(--negative); }
.form-chip[data-empty="true"] {
  background: transparent; color: var(--subtle);
  border: 1px dashed var(--border);
}

/* ---- xG sparkline --------------------------------------------------- */
.xg-spark { width: 100px; height: 26px; display: inline-block; }

.xg-spark .xg-spark-bar {
  fill: var(--grot);
}

.xg-spark .xg-spark-bar.positive {
  fill: var(--positive);
}

.xg-spark .xg-spark-bar.negative {
  fill: var(--negative);
}

/* Faint zero-baseline line behind a sparkline bar chart. */
.xg-spark .xg-spark-baseline {
  stroke: var(--border-light);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.6;
}

/* Frávik cell: sparkline + signed numeric label, side-by-side. */
.standings-table .fravik-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.standings-table .fravik-cell .xg-spark {
  width: 64px;  /* tighter than the old xG-ferill column */
}

.standings-table .fravik-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 32px;
  text-align: right;
}

.standings-table .fravik-label.positive { color: var(--positive); }
.standings-table .fravik-label.negative { color: var(--negative); }
.standings-table .fravik-label.neutral  { color: var(--grot); }
.standings-table .fravik-label[data-empty="true"] { color: var(--grot-light, var(--grot)); }

/* ---- Page layout ---------------------------------------------------- */
.strength-heatmap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) {
  .strength-heatmap-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Both panels and the scroll wrapper need min-width:0 so they can shrink
   below their content's intrinsic width. Without this, a child with
   min-width (like .heatmap-grid below) propagates upward and pushes the
   panel — and its sibling — past the viewport. */
.strength-heatmap-grid > .panel,
.strength-heatmap-grid .table-scroll { min-width: 0; }

.title-block {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: end;
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
  .title-block {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 0;
  }
}
.title-block h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 380;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 10ch;
  margin-bottom: 24px;
}
.title-block h1 em {
  font-style: italic;
  font-weight: 360;
  color: var(--jokull);
}
.title-block .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  border-left: 1px solid var(--border);
  padding-left: 32px;
}

/* ---- Fylgisvakt: forecast forest plot ------------------------------- */
/* CSS-first multi-coverage credible-interval candle. Each row owns a
   --party CSS variable so the median rule and band tints inherit the
   party colour without inline styles per-band.                        */
.forecast {
  position: relative;
  margin-top: 4px;
}
.forecast-axis {
  display: grid;
  grid-template-columns: 220px 1fr 92px 90px;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--subtle);
}
.forecast-axis__ticks {
  position: relative;
  height: 14px;
}
.forecast-axis__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.forecast-axis__num,
.forecast-axis__ci {
  text-align: right;
}
.forecast-row {
  display: grid;
  grid-template-columns: 220px 1fr 92px 90px;
  gap: 18px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
}
.forecast-row__name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 460;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--party, var(--basalt));
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.forecast-row__name .letter {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--party, var(--grot));
  background: color-mix(in srgb, var(--party, var(--border-strong)) 14%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.forecast-row__bar {
  position: relative;
  height: 18px;
  background: linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--threshold, 0.20) * 100% - 0.5px),
    var(--border-strong) calc(var(--threshold, 0.20) * 100% - 0.5px),
    var(--border-strong) calc(var(--threshold, 0.20) * 100% + 0.5px),
    transparent calc(var(--threshold, 0.20) * 100% + 0.5px)
  );
  background-size: 100% 14px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.forecast-row__bar::before {
  content: "";
  position: absolute;
  inset: 50% 0 50% 0;
  border-top: 1px solid var(--border-light);
  transform: translateY(-0.5px);
  z-index: 0;
}
.forecast-band {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--party, var(--jokull));
  border-radius: 1px;
  pointer-events: none;
}
.forecast-band--c95 { height: 6px;  opacity: 0.14; }
.forecast-band--c90 { height: 8px;  opacity: 0.22; }
.forecast-band--c80 { height: 10px; opacity: 0.34; }
.forecast-band--c50 { height: 14px; opacity: 0.55; }
.forecast-median {
  position: absolute;
  top: 1px;
  width: 2px;
  height: 16px;
  background: var(--party, var(--jokull));
  pointer-events: none;
  z-index: 1;
}
.forecast-row__value {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--party, var(--basalt));
}
.forecast-row__value .unit {
  color: var(--grot);
  margin-left: 1px;
  font-size: 11px;
  font-weight: 400;
}
.forecast-row__ci {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--grot);
}

/* Compact variant — for the seat-distribution panel where values are integers */
.forecast--seats .forecast-row__value { font-size: 16px; }
.forecast--seats .forecast-row__bar {
  background: none;
}

/* Responsive — stack labels under the bar on narrow screens */
@media (max-width: 720px) {
  .forecast-axis,
  .forecast-row {
    grid-template-columns: 130px 1fr 70px;
    gap: 12px;
    font-size: 12px;
  }
  .forecast-axis__ci,
  .forecast-row__ci { display: none; }
  .forecast-row__name { font-size: 14px; }
  .forecast-row__name .letter { display: none; }
}

/* ---- Fylgisvakt: freshness banner ----------------------------------- */
.freshness {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--midnaetursol);
  background: color-mix(in srgb, var(--midnaetursol) 6%, var(--surface));
  margin: 8px 0 28px;
}
.freshness__lead {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 18;
  font-weight: 460;
  font-size: 15px;
  color: var(--basalt);
}
.freshness__lead em {
  font-style: italic;
  color: var(--midnaetursol);
}
.freshness__meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grot);
}

/* ---- Two-up panel: chart + sidecar table ---------------------------- */
.forecast-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.forecast-panel > .panel + .panel { border-top: none; }

/* ---- Time-series chart container ------------------------------------ */
.support-chart-host {
  position: relative;
  min-height: 460px;
  padding: 8px 0 4px;
}
.support-chart-host .chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grot);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Focus-visible (WCAG 2.4.7) ------------------------------------
   Interactive controls need a discoverable keyboard-focus indicator.
   `:focus-visible` (vs `:focus`) only fires for keyboard nav so mouse
   clicks don't show an outline on every chip. Outline + offset uses the
   brand teal — visible against both surface and basalt backgrounds. */
.league-tab:focus-visible,
.nav-dropdown__trigger:focus-visible,
.nav-dropdown__item:focus-visible,
select.field-select:focus-visible,
input.field-input:focus-visible,
.picker-row:focus-within {
  outline: 2px solid var(--jokull);
  outline-offset: 2px;
}