/* =========================================================================
 * 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;
}
/* When a section-head carries a Deila button via the share_popover
   partial, push the meta to the right so meta + share sit grouped on
   the right side (h2 left, meta middle-right, Deila button far right). */
.section-head--with-share .section-head__meta {
  margin-left: auto;
}
.section-head--with-share .share-anchor {
  align-self: center;
}
@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(--grot);
  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(--grot);
}
.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(--grot);
}
.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(--grot);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
/* Secondary fact line under the xG (HM 2026): O/U 2.5 + most-likely scoreline. */
.fixture-card__extra {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--grot);
  margin-top: 5px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.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;
}
/* National-flag image (HM 2026) — same team-identity slot as .crest.
   The --flag-border hairline keeps white/near-white flags (Japan,
   England) legible on both the paper and the dark surface. Always paired
   with a text team name; the <img> itself is decorative (alt="" /
   aria-hidden) so screen readers read the name, not the flag. */
.wc-flag {
  display: inline-block; width: 20px; height: 15px;
  border-radius: 2px; border: 1px solid var(--flag-border);
  flex-shrink: 0; vertical-align: -2px; object-fit: cover;
  margin-right: 6px;
}
.wc-flag--sm { width: 17px; height: 13px; margin-right: 5px; }
/* Flex-laid team rows (fixture cards, bracket candidates) supply their own
   gap — drop the flag's trailing margin there to avoid double spacing. */
.fixture-card__team .wc-flag,
.hm-cand .wc-flag { margin-right: 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(--grot);
}

/* ---- 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(--grot);
  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; }
/* Specificity note: `.card :is(h2, h3) { font-size: 30px }` later in this
   file has equal specificity (0,1,1) to `.card--feature :is(h2, h3)`, so
   source order would win and feature cards would render at 30 px. The
   `.card.card--feature` selector bumps specificity to (0,2,1) so the
   36 px feature size lands. Same trick at the 700 px breakpoint below. */
.card.card--feature :is(h2, 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; }
/* The labelled-forecast peek is taller than the chart-style peeks
   because it carries 9 rows of typography (party letter + value)
   rather than a single visual mark.  168 px gives every row 12 px
   of vertical space with 6 px between, comfortably above the
   default Geist Mono line-height baseline. */
.card--feature .peek-results { height: 168px; }
@media (max-width: 700px) {
  .card--feature { padding: 28px 28px 24px; }
  .card.card--feature :is(h2, h3) { font-size: 30px; }
}

/* Peek variant for the Borgarstjórnarspá marquee — labelled forecast
   summary, one row per party (letter | bar-track | seat count).
   Layout choices that matter:
   - `line-height: 1` on the container reclaims ~6 px per row vs the
     browser default 1.5; without this 9 rows would overflow the
     container by ~46 px and collide with the card-foot below.
   - The bar lives inside a `__bar-track` div with a faint background
     wash, so the value column can sit immediately at the track's
     right edge (column 3) instead of orphaning 380 px to the right
     of short bars.
   - Bar width is a percentage of a 14-seat scale (so the 12-seat
     majority threshold marker sits at a stable 85.7% of every track).
     Telling the threshold story is the load-bearing move — both
     design reviews flagged the threshold line as the single change
     that lifts this from "tidy peek" to "election-night infographic".
   - The 1 px inset basalt shadow on each bar defines the bar's
     perimeter at WCAG 3:1 non-text contrast in both modes; `outline`
     was tried first but ignores `border-radius` and renders as a
     square frame around rounded bars. */
.peek-results {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1;
}
.peek-results__row {
  display: grid;
  grid-template-columns: 18px 1fr 20px;
  gap: 12px;
  align-items: center;
}
.peek-results__letter {
  font-weight: 600;
  color: var(--basalt);
  text-align: right;
}
.peek-results__bar-track {
  position: relative;
  height: 10px;
  background: color-mix(in srgb, var(--basalt) 7%, transparent);
  border-radius: 2px;
}
.peek-results__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--basalt);
}
.peek-results__val {
  color: var(--basalt);
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* 12-seat majority threshold marker — vertical dashed line spanning
   every row.  Position derived from the row grid: bar-track left
   = 18 px (letter col) + 12 px (gap) = 30 px from row left; bar-track
   right = 20 px (value col) + 12 px (gap) = 32 px from row right;
   threshold at 12 / 14 ≈ 0.857 of the track width.  Top/bottom 6 px
   matches the peek's vertical breathing room so the line doesn't
   poke into the description above or the card-foot below. */
.peek-results__threshold {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(30px + (100% - 62px) * 0.857);
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--basalt) 0 3px,
    transparent 3px 7px
  );
  opacity: 0.55;
  pointer-events: none;
}
/* Rows representing parties the model expects zero seats from — fade
   the value digit so the visible-bar gradient down the column reads
   as "above threshold, below threshold, no seats expected" without
   making the row disappear from the summary. */
.peek-results__row--zero .peek-results__val {
  opacity: 0.45;
}
/* Dark-mode parity — the 7% basalt track wash composites darker
   against the dark card so bump to 10% for the same perceived weight;
   the letter weight 600 reads thinner against dark, so bump to 700 to
   match the light-mode visual weight. */
[data-theme="dark"] .peek-results__bar-track {
  background: color-mix(in srgb, var(--basalt) 10%, transparent);
}
[data-theme="dark"] .peek-results__letter {
  font-weight: 700;
}

/* ---- Peek-swing — diverging Δ-seats bar (kosningar 2026 marquee) ----
   One row per party: letter | track with center axis | signed Δ.
   Positive Δ bar extends right from 50% (jökull); negative extends
   left from 50% (error red). Sized for the feature-card peek height
   (96 px) with 6 rows × ~14 px (gap + bar).

   Editorially: surfaces the "who gained, who lost" story for the
   landing's kosningar marquee at a glance. Order is |Δ| desc so
   biggest changes (in either direction) sit at top. Letter + signed
   value let the reader cross-reference the page's chip strip.
*/
.peek-swing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
}
.peek-swing__row {
  display: grid;
  grid-template-columns: 18px 1fr 36px;
  gap: 12px;
  align-items: center;
}
.peek-swing__letter {
  font-weight: 600;
  color: var(--basalt);
  text-align: right;
}
.peek-swing__track {
  position: relative;
  height: 9px;
  background: color-mix(in srgb, var(--basalt) 7%, transparent);
  border-radius: 2px;
}
.peek-swing__axis {
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--basalt);
  opacity: 0.35;
}
.peek-swing__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 1px;
  /* Soft inset perimeter — strong enough to define small bars without
     overwhelming them at the -4 / -6 sizes. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--basalt) 30%, transparent);
}
.peek-swing__bar--pos { background: var(--jokull); }
.peek-swing__bar--neg { background: var(--error); }
.peek-swing__val {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.peek-swing__val--pos { color: var(--jokull); }
.peek-swing__val--neg { color: var(--error); }
[data-theme="dark"] .peek-swing__track {
  background: color-mix(in srgb, var(--basalt) 12%, transparent);
}
[data-theme="dark"] .peek-swing__letter { font-weight: 700; }

/* 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(--grot);
  text-transform: uppercase;
}
.hero-cover__meta > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.hero-cover__meta .v { color: var(--basalt); font-weight: 500; }

/* Champion-odds peek (HM 2026 landing cover) — one row per team
   (name | probability bar | value). Long team names need a flexible name
   column, so this is distinct from .peek-results' fixed letter column. */
.peek-champ {
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center; height: 100%;
  font-family: 'Geist Mono', ui-monospace, monospace; line-height: 1;
}
.peek-champ__row {
  display: grid; grid-template-columns: minmax(64px, 1fr) 1.7fr auto;
  gap: 12px; align-items: center;
}
.peek-champ__name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32; font-weight: 440; font-size: 14px;
  color: var(--basalt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peek-champ__row--hl .peek-champ__name { color: var(--ink); }
.peek-champ__track {
  position: relative; height: 11px; background: var(--raised); border-radius: 2px;
}
.peek-champ__fill {
  position: absolute; inset: 0 auto 0 0; background: var(--jokull); border-radius: 2px;
}
.peek-champ__val { font-size: 11px; color: var(--grot); font-variant-numeric: tabular-nums; }
.card--feature .peek-champ { height: 168px; }

/* ---- 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(--grot);
  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 :is(h2, 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(--grot);
  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(--grot); 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(--grot);
  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(--grot);
  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(--grot);
  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(--grot);
  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); }
/* Nested sub-list under a Verkefni item (e.g. Sveitarfélög sub-pages). */
.footer-col ul .footer-col__sub {
  margin-top: 8px;
  padding-left: 14px;
  gap: 6px;
  border-left: 1px solid var(--border);
}
.footer-col__sub a {
  font-size: 13px;
  color: var(--grot);
}
.footer-col__sub a:hover { color: var(--jokull); }
/* Second header inside a column (e.g. "Um Metil" after "Tengd verkefni"). */
.footer-col__h--2nd { margin-top: 28px; }
.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(--grot);
  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;
}
/* Rank-number prefix in the forest (HM 2026 — opts.rank); 1-based position
   in the current sort, so it tracks Heild/Sókn/Vörn. */
.strength-rank {
  display: inline-block; width: 22px; margin-right: 6px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--grot); text-align: right; font-variant-numeric: tabular-nums;
}
/* Compact forest (HM 2026): 48 teams need tighter rows than the league's ~20.
   Triggered by .strength-compact on the container; league forests are unchanged. */
.strength-compact .strength-row { padding: 4px 0; gap: 12px; grid-template-columns: 170px 1fr 92px; }
.strength-compact .strength-row__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strength-compact .strength-bar,
.strength-compact .strength-bar .mean { height: 11px; }
.strength-compact .strength-row__score { font-size: 12px; }
@media (max-width: 640px) {
  .strength-compact .strength-row { grid-template-columns: 1fr auto; }
}
/* "Sýna öll / færri" expander under a limited forest. */
.strength-expand {
  margin-top: 10px; font-family: 'Geist Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: none; border: none; color: var(--jokull); cursor: pointer; padding: 4px 0;
}
.strength-expand:hover { color: var(--jokull-hover); text-decoration: underline; }
.strength-expand:focus-visible { outline: 2px solid var(--jokull); outline-offset: 2px; }
.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(--grot);
  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(--grot);
  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(--grot);
}
.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;
  /* Use basalt (theme-aware) rather than the party colour directly —
     the party-coloured `.letter` pill below already carries identity.
     Several party brand colours (A #183F38, M #08306b, J #67000d)
     drop to 1.3–1.7:1 contrast against the dark surface in dark
     mode; basalt text gets WCAG-passing contrast in both modes. */
  color: 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;
  /* Basalt (theme-aware) rather than party colour — same reasoning as
     `.forecast-row__name`: avoids 1.3–1.7:1 contrast failures in dark
     mode for the darker party brand colours. */
  color: 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);
}

/* Change column - percent (support snapshot) only; the seats chart stays 4-col. */
.forecast--percent .forecast-axis,
.forecast--percent .forecast-row {
  grid-template-columns: 220px 1fr 92px 90px 132px;
}
.forecast-axis__change { text-align: right; }
.forecast-row__change {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.forecast-row__change--up   { color: #1a9850; }
.forecast-row__change--down { color: #d6291f; }
.forecast-row__change--flat { color: var(--grot); }
.forecast-row__change-ci { color: var(--grot); font-size: 10.5px; }

/* 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--percent .forecast-axis,
  .forecast--percent .forecast-row {
    grid-template-columns: 130px 1fr 70px;
  }
  .forecast-axis__change,
  .forecast-row__change { display: none; }
  .forecast-row__name { font-size: 14px; }
  .forecast-row__name .letter { display: none; }
  /* Halve tick density to avoid label collision — at 375 px container
     the 9 ticks (0/5/10/.../40%) collide into one unreadable string.
     Hiding every other one drops to a 10% stride (0/10/20/30/40) that
     fits comfortably. Ticks are positioned absolutely by `left: %`, so
     hiding doesn't reflow the others. */
  .forecast-axis__tick:nth-child(even) { 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,
.hm-cand:focus-visible,
.hm-pin:focus-visible,
.hm-btn:focus-visible,
.kos-party-chip:focus-visible,
.kos-region-chip:focus-visible,
.kos-region-clear:focus-visible,
.kos-region-toggle:focus-visible,
.kos-muni-search:focus-visible,
.kos-muni-picker-actions button:focus-visible,
.kos-muni-picker-group-toggle:focus-visible,
.kos-muni-picker-row:focus-within,
.kos-row-clickable:focus-visible {
  outline: 2px solid var(--jokull);
  outline-offset: 2px;
}

/* ---- Bracket-progression panel (cup pages) -------------------------- */
/* Stacked horizontal bars showing the conditional outcome distribution
   for each cup team. Mirrors the .strength-row grid structure (name +
   bar + numeric badge) so the two panels stack with consistent rhythm. */

.bracket-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 0 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grot);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.bracket-legend__caption { color: var(--grot); }
.bracket-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bracket-legend__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--border-light);
}

.bracket-list { display: flex; flex-direction: column; }

.bracket-row {
  display: grid;
  grid-template-columns: 160px 1fr 64px;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.bracket-row--leader .bracket-row__badge {
  color: var(--jokull);
}
@media (max-width: 640px) {
  .bracket-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name badge" "bar bar";
    gap: 4px 12px;
    padding: 10px 0;
  }
  .bracket-row > :nth-child(1) { grid-area: name; }
  .bracket-row > :nth-child(2) { grid-area: bar; }
  .bracket-row > :nth-child(3) { grid-area: badge; text-align: right; }
}

.bracket-row__team {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 440;
  font-size: 15px;
  color: var(--basalt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-row__bar {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.bracket-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  transition: filter 0.15s ease;
}
.bracket-seg:hover { filter: brightness(1.1); }
.bracket-seg__label {
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bracket-row__badge {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: var(--basalt);
}

/* ============================================================================
   Embed mode (?embed=1) — chrome-stripped iframe view
   ============================================================================
   When base.html detects request.state.embed_mode the body carries
   .embed-mode and <main> uses .embed-main instead of the standard
   max-w-screen-xl container. Two effects: trim padding so the chart
   fills the iframe, and compress the title block so the embed lands
   on the chart rather than the lede.                                    */

.embed-main {
  width: 100%;
  padding: 0 16px;
  max-width: none;
}

@media (min-width: 768px) {
  .embed-main { padding: 0 20px; }
}

body.embed-mode .title-block {
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}
body.embed-mode .title-block h1 {
  font-size: 26px;
  margin: 0;
}
body.embed-mode .title-block h1 em { font-style: italic; }
body.embed-mode .title-block .lede,
body.embed-mode .title-block .facts {
  display: none;
}
body.embed-mode .mono-kicker { margin-bottom: 4px; }
body.embed-mode .section-head {
  padding-top: 18px;
  padding-bottom: 12px;
}
body.embed-mode .freshness,
body.embed-mode .trust-strip,
body.embed-mode .hero-cover__meta,
body.embed-mode .embed-hide {
  display: none !important;
}

/* Plot-only embed (?embed=1&ui=0) — strips the dashboard's interactive
   controls (tab bar, picker, selectors, chip strip) so the journalist
   can drop several plot-only iframes side-by-side in one article. The
   chart's own title, meta, caption, legend, and attribution stay — that
   is the "necessary labelling" needed to read it. */
body.embed-no-ui .ithrottir-tabs,
body.embed-no-ui .dashboard-controls {
  display: none !important;
}
/* Compress the page's outermost title-block further in plot-only mode —
   the chart's own section-head carries the headline. */
body.embed-no-ui .title-block {
  display: none;
}

/* Per-chart embed (?chart=<id>) — show only the named chart's section,
   hide all other `[data-chart]` siblings. Gated under `body.embed-mode`
   so an interactive URL with `?chart=foo` (e.g. the "Bein slóð" link
   the popover offers) doesn't hide anything on the live page — the
   chart selector is meaningful only inside an iframe. Each page
   registers its chart ids in the "show" rule below so the matching
   section becomes visible; hiding is generic, showing is opt-in to
   avoid surprise blank pages from URL typos. */
body.embed-mode[data-active-chart] [data-chart] {
  display: none !important;
}
/* Per-page chart id registry. Add new rows when a page introduces a
   new chart that should support per-chart embed. The selectors are
   opt-in: a URL with `?chart=unknown-id` renders nothing rather than
   showing some surprising fallback. */
body.embed-mode[data-active-chart="forecast-forest"]      [data-chart="forecast-forest"],
body.embed-mode[data-active-chart="support-chart"]        [data-chart="support-chart"],
body.embed-mode[data-active-chart="throun"]               [data-chart="throun"],
body.embed-mode[data-active-chart="dreifing"]             [data-chart="dreifing"],
body.embed-mode[data-active-chart="vidmid"]               [data-chart="vidmid"],
body.embed-mode[data-active-chart="thjonusta-starfsfolk"] [data-chart="thjonusta-starfsfolk"],
body.embed-mode[data-active-chart="thjonusta-bars"]       [data-chart="thjonusta-bars"],
body.embed-mode[data-active-chart="thjonusta-trend"]      [data-chart="thjonusta-trend"],
body.embed-mode[data-active-chart="leik-rank"]            [data-chart="leik-rank"],
body.embed-mode[data-active-chart="leik-trend"]           [data-chart="leik-trend"],
body.embed-mode[data-active-chart="leik-cohort"]          [data-chart="leik-cohort"],
body.embed-mode[data-active-chart="husnaedi-facet"]       [data-chart="husnaedi-facet"],
body.embed-mode[data-active-chart="husnaedi-additions"]   [data-chart="husnaedi-additions"],
body.embed-mode[data-active-chart="husnaedi-scatter"]     [data-chart="husnaedi-scatter"],
body.embed-mode[data-active-chart="husnaedi-density"]     [data-chart="husnaedi-density"],
body.embed-mode[data-active-chart="fg-trajectory"]        [data-chart="fg-trajectory"],
body.embed-mode[data-active-chart="fg-league"]            [data-chart="fg-league"],
body.embed-mode[data-active-chart="fg-calc"]              [data-chart="fg-calc"],
body.embed-mode[data-active-chart="bokhald"]              [data-chart="bokhald"],
body.embed-mode[data-active-chart="rvk26-fylgi"]          [data-chart="rvk26-fylgi"],
body.embed-mode[data-active-chart="rvk26-saeti"]          [data-chart="rvk26-saeti"],
body.embed-mode[data-active-chart="rvk26-meirihlutar"]    [data-chart="rvk26-meirihlutar"],
body.embed-mode[data-active-chart="rvk26-throun"]         [data-chart="rvk26-throun"],
body.embed-mode[data-active-chart="rvk26-kannanaahrif"]   [data-chart="rvk26-kannanaahrif"],
body.embed-mode[data-active-chart="kosningar-swing-map"]     [data-chart="kosningar-swing-map"],
body.embed-mode[data-active-chart="kosningar-summary"]       [data-chart="kosningar-summary"],
body.embed-mode[data-active-chart="kosningar-muni-table"]    [data-chart="kosningar-muni-table"],
body.embed-mode[data-active-chart="kosningar-all-parties"]   [data-chart="kosningar-all-parties"],
body.embed-mode[data-active-chart="kosningar-proportionality"][data-chart="kosningar-proportionality"],
body.embed-mode[data-active-chart="kosningar-raw-data"]      [data-chart="kosningar-raw-data"],
body.embed-mode[data-active-chart="kosningar-merger"]        [data-chart="kosningar-merger"],
body.embed-mode[data-active-chart="sveitarfelog-map"]        [data-chart="sveitarfelog-map"],
body.embed-mode[data-active-chart="hm-champ"]                [data-chart="hm-champ"],
body.embed-mode[data-active-chart="hm-fixtures"]             [data-chart="hm-fixtures"],
body.embed-mode[data-active-chart="hm-groups"]               [data-chart="hm-groups"],
body.embed-mode[data-active-chart="hm-bracket"]              [data-chart="hm-bracket"],
body.embed-mode[data-active-chart="hm-team-journey"]         [data-chart="hm-team-journey"],
body.embed-mode[data-active-chart="hm-heat"]                 [data-chart="hm-heat"],
body.embed-mode[data-active-chart="hm-scatter"]              [data-chart="hm-scatter"],
body.embed-mode[data-active-chart="hm-strength"]             [data-chart="hm-strength"],
body.embed-mode[data-active-chart="hm-accuracy"]             [data-chart="hm-accuracy"],
body.embed-mode[data-active-chart="hm-scores"]               [data-chart="hm-scores"] {
  display: block !important;
}

/* Merger simulator — small grey suffix in muni-name cells showing
   which of the selected parties actually overlapped in that muni.
   E.g. "(F+J)" when the user picked F+J+P but only F and J ran in
   this muni. */
.kos-merger-participants {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grot);
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* "Sæti frá" column — compact, monospace ballot-letter list with
   per-party colour. Reads as a tight letter cluster ("M, S") rather
   than narrative prose; letter colour signals direction (red = lost
   to merger, teal = gained from merger). Hover tooltip shows the
   full party name. */
.kos-merger-changes {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.embed-attribution {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  margin-top: 16px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-paper);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12.5px;
  color: var(--grot);
}
.embed-attribution__label {
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--grot);
}
.embed-attribution__link {
  color: var(--jokull);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.embed-attribution__link:hover { text-decoration: underline; }
.embed-attribution__path {
  font-family: 'Geist Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  color: var(--grot);
}

/* ============================================================================
   Share / Embed popover — trigger + floating panel
   ============================================================================ */

.share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-paper);
  color: var(--basalt);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.share-trigger:hover {
  border-color: var(--jokull);
  background: var(--bg-surface);
  color: var(--jokull);
}
.share-trigger svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(460px, calc(100vw - 32px));
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
              0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 16px;
  font-family: 'Source Sans 3', sans-serif;
}
[data-theme="dark"] .share-popover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2);
}
.share-popover__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.share-popover__title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 32;
  font-weight: 540;
  font-size: 17px;
  color: var(--basalt);
}
.share-popover__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--grot);
  line-height: 0;
}
.share-popover__close:hover { color: var(--basalt); }
.share-popover__hint {
  font-size: 12.5px;
  color: var(--grot);
  margin-bottom: 14px;
  line-height: 1.4;
}
.share-popover__field { margin-bottom: 12px; }
.share-popover__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Geist Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--grot);
  margin-bottom: 5px;
}
.share-popover__copy {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--jokull);
  font-family: 'Source Sans 3', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.share-popover__copy:hover { background: var(--bg-surface); }
.share-popover__copy.is-copied { color: var(--basalt); }
.share-popover__input,
.share-popover__textarea {
  width: 100%;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  color: var(--basalt);
  padding: 8px 10px;
  resize: vertical;
}
.share-popover__input:focus,
.share-popover__textarea:focus {
  outline: none;
  border-color: var(--jokull);
  box-shadow: 0 0 0 2px rgba(27, 107, 138, 0.18);
}
.share-popover__textarea {
  min-height: 96px;
  white-space: pre-wrap;
  word-break: break-all;
}
.share-popover__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  color: var(--grot);
  flex-wrap: wrap;
}
.share-popover__height {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.share-popover__height input {
  width: 80px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--basalt);
  padding: 4px 6px;
}
.share-popover__preview-link {
  margin-left: auto;
  color: var(--jokull);
  text-decoration: none;
  font-weight: 600;
}
.share-popover__preview-link:hover { text-decoration: underline; }

.share-popover__note {
  font-size: 11.5px;
  color: var(--grot);
  line-height: 1.45;
  margin: 6px 0 0;
}
.share-popover__note code {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  background: var(--bg-surface);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--basalt);
}

.share-popover__details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.share-popover__details > summary {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jokull);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
.share-popover__details > summary::-webkit-details-marker { display: none; }
.share-popover__details > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
  color: var(--grot);
}
.share-popover__details[open] > summary::before { transform: rotate(90deg); }
.share-popover__details .share-popover__field {
  margin-top: 8px;
  margin-bottom: 0;
}

/* Plot-only / dashboard toggle — the "checkbox" the journalist flips to
   strip dashboard controls from the embed. Styled as a row with a
   native checkbox so it inherits keyboard semantics for free. */
.share-popover__mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
.share-popover__mode input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--jokull);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.share-popover__mode-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--basalt);
  display: block;
  cursor: pointer;
}
.share-popover__mode-hint {
  font-size: 11.5px;
  color: var(--grot);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

/* Reserve vertical space for the chart containers in embed mode so the
   iframe's reported height doesn't oscillate on cold load — the chart
   modules paint their SVG asynchronously, and without a placeholder
   `min-height` the page initially measures small (header + selectors
   only), the iframe shrinks, then re-grows once Plot finishes. */
body.embed-mode #throun-chart,
body.embed-mode #dreifing-chart,
body.embed-mode #vidmid-chart,
body.embed-mode #starfsfolk-chart,
body.embed-mode #deild-bars-chart,
body.embed-mode #deild-trend-chart,
body.embed-mode #forecast-forest,
body.embed-mode #support-chart {
  min-height: 500px;
}

body.embed-mode #husnaedi-facet,
body.embed-mode #husnaedi-additions,
body.embed-mode #husnaedi-scatter,
body.embed-mode #husnaedi-density {
  min-height: 400px;
}

body.embed-mode #sveitarfelog-map-chart {
  min-height: 440px;
}

/* /sveitarfelog/kort — ranked companion table */
.kort-table-wrap {
  overflow-x: auto;
}
.kort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.kort-table thead th {
  text-align: left;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grot);
  font-weight: 600;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--border);
}
.kort-table .kort-th-val {
  text-align: right;
}
.kort-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--basalt);
}
.kort-table tbody tr:hover {
  background: var(--raised);
}
.kort-rank {
  width: 2.5rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--grot);
}
.kort-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.kort-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.kort-val {
  text-align: right;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kort-table-caption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--grot);
}

body.embed-mode #fg-traj-chart,
body.embed-mode #fg-league-chart,
body.embed-mode #fg-calc-chart {
  min-height: 500px;
}

body.embed-mode #leik-rank-chart,
body.embed-mode #leik-trend-chart,
body.embed-mode #leik-cohort-chart {
  min-height: 500px;
}

body.embed-mode #bokhald-chart {
  min-height: 500px;
}

/* HM 2026 chart containers — reserve height so a single-chart embed doesn't
   oscillate while the inline IIFEs / ESM modules paint asynchronously. */
body.embed-mode #champ-board,
body.embed-mode #groups,
body.embed-mode #hm-scatter,
body.embed-mode #strength-table-body { min-height: 420px; }
body.embed-mode #fixtures { min-height: 300px; }
body.embed-mode #bracket,
body.embed-mode #heat { min-height: 520px; }
body.embed-mode #tj-route { min-height: 160px; }
body.embed-mode #acc-summary,
body.embed-mode #acc-score { min-height: 240px; }

/* ===== Skip-to-main-content link (WCAG 2.4.1) ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  padding: 8px 12px;
  background: var(--surface);
  color: var(--basalt);
  border: 2px solid var(--jokull);
  border-radius: 4px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ===== Kosningar 2026 — party chip strip (multi-select) ===== */

.kos-party-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-bottom: 12px;
  background: var(--bg-raised);
}
.kos-party-label {
  flex: 0 0 auto;
}
.kos-party-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.kos-party-chip {
  --chip-colour: var(--border);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip-colour);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 12.5px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--basalt);
  cursor: pointer;
  transition: background-color 0.08s ease, border-color 0.08s ease, box-shadow 0.08s ease;
  user-select: none;
}
.kos-party-chip:hover { background: var(--raised); }
.kos-party-chip--active {
  background: var(--chip-colour);
  border-color: var(--chip-colour);
  border-left-color: var(--chip-colour);
  color: var(--bg-paper);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.kos-party-chip--active:hover { filter: brightness(1.05); }
.kos-party-chip-letter {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
}
.kos-party-chip-name {
  font-size: 12px;
}
.kos-party-status {
  flex: 1 1 auto;
  font-size: 11.5px;
  color: var(--grot);
  font-style: italic;
  text-align: right;
}
.kos-party-count {
  font-style: normal;
  font-weight: 600;
  color: var(--basalt);
}

/* Tooltip section dividers when multi-party is active */
.kos-tip-section {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border-light);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grot);
}
.kos-tip-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ===== Kosningar 2026 — region picker (chips + dropdown) ===== */

.kos-region-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-bottom: 14px;
  background: var(--bg-raised);
}
.kos-region-label {
  flex: 0 0 auto;
}
.kos-region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.kos-region-chip {
  background: var(--bg-paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 12.5px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--basalt);
  cursor: pointer;
  transition: background-color 0.08s ease, border-color 0.08s ease;
}
.kos-region-chip:hover { background: var(--raised); }
.kos-region-chip--active {
  background: var(--jokull);
  border-color: var(--jokull);
  color: var(--bg-paper);
  font-weight: 600;
}
.kos-region-chip--active:hover { background: var(--jokull); filter: brightness(1.05); }

.kos-region-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--grot);
  margin-left: auto;
}
.kos-region-clear,
.kos-region-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--basalt);
  padding: 3px 8px;
  font-size: 11.5px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  border-radius: 3px;
  cursor: pointer;
}
.kos-region-clear:hover,
.kos-region-toggle:hover { background: var(--raised); }

.kos-muni-picker {
  margin-bottom: 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-paper);
}
.kos-muni-picker-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
}
.kos-muni-search {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 5px 8px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-paper);
  color: var(--basalt);
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.kos-muni-picker-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.kos-muni-picker-actions button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--basalt);
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 3px;
  cursor: pointer;
}
.kos-muni-picker-actions button:hover { background: var(--raised); }

.kos-muni-picker-list {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 12px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}
@media (max-width: 760px) {
  .kos-muni-picker-list { grid-template-columns: 1fr; }
}
.kos-muni-picker-group {
  break-inside: avoid;
}
.kos-muni-picker-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grot);
  border-bottom: 1px solid var(--border-light);
  padding: 6px 0 4px;
  margin-bottom: 4px;
}
.kos-muni-picker-group-toggle {
  background: transparent;
  border: none;
  color: var(--jokull);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.kos-muni-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--basalt);
  padding: 2px 0;
  cursor: pointer;
}
.kos-muni-picker-row:hover { background: var(--raised); }
.kos-muni-picker-row input { accent-color: var(--jokull); }

/* ===== Kosningar 2026 — summary fact tiles + muni table ===== */

.kos-summary-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 18px;
}
@media (max-width: 760px) {
  .kos-summary-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .kos-summary-facts { grid-template-columns: 1fr; }
}
.kos-summary-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--border-light);
  padding: 4px 0 4px 12px;
}
/* .kos-summary-fact .fact-label inherits the global .fact-label rule
   (0.1em letter-spacing) — don't re-declare or the tracking diverges
   from title-block facts on the same page. */
.kos-summary-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kos-summary-hint {
  font-size: 12px;
  color: var(--grot);
  font-style: italic;
}
.kos-summary-caption {
  font-size: 11.5px;
  color: var(--grot);
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  margin-top: 14px;
  line-height: 1.5;
}

.kos-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 720px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
.kos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.kos-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-paper);
  z-index: 1;
}
.kos-th {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grot);
  font-weight: 500;
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.kos-th-name { text-align: left; }
.kos-th-bar { min-width: 160px; }
.kos-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.08s ease;
}
.kos-table tbody tr:hover { background: var(--raised); }
.kos-table tbody tr.kos-row-new { background: var(--bg-raised); }
.kos-table tbody tr.kos-row-exited { opacity: 0.7; }
.kos-td-name {
  text-align: left;
  padding: 8px 12px;
  color: var(--basalt);
  font-weight: 500;
  white-space: nowrap;
}
.kos-td-num {
  text-align: right;
  padding: 8px 12px;
  color: var(--basalt);
  white-space: nowrap;
}
.kos-td-delta { font-weight: 600; }
.kos-td-bar { padding: 4px 12px; min-width: 160px; }

.kos-bar-track {
  position: relative;
  height: 12px;
  background: var(--border-light);
  border-radius: 6px;
  overflow: hidden;
}
.kos-bar-axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.kos-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 2px;
}

.kos-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.kos-badge-new {
  color: var(--jokull);
  background: rgba(27, 107, 138, 0.08);
  border: 1px solid rgba(27, 107, 138, 0.2);
}
.kos-badge-exit {
  color: var(--error);
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.2);
}
.kos-badge-progress {
  color: var(--grot);
  background: var(--border-light);
  border: 1px solid var(--border);
}

/* Proportionality table — two-row grouped header */
.kos-prop-table .kos-th-group {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grot);
  font-weight: 600;
  padding: 6px 12px 2px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.kos-prop-table .kos-th-group--party {
  /* Highlight the primary "party scope" group with the Jökull accent */
  color: var(--jokull);
}
.kos-prop-table .kos-th-group--national {
  /* National view rendered with the same muted treatment as other secondary metadata */
  color: var(--grot);
}
.kos-prop-table thead tr.kos-th-group-row th {
  border-bottom: 1px solid var(--border-light);
}
.kos-prop-table thead tr:last-child th {
  /* Bottom row of two-row header still gets the usual underline. */
  border-bottom: 1px solid var(--border);
}
/* Left-side divider on columns that start the "national" group so the
   eye can see where one block ends and the other begins. */
.kos-prop-table .kos-th-grouped,
.kos-prop-table .kos-td-grouped {
  border-left: 1px solid var(--border-light);
}
/* Same on the group header cell so the divider runs vertically through
   both header rows. */
.kos-prop-table thead tr.kos-th-group-row .kos-th-group--national {
  border-left: 1px solid var(--border-light);
}

/* All-parties overview table — clickable rows, party-colour swatch */
.kos-all-parties {
  font-variant-numeric: tabular-nums;
}
.kos-all-parties .kos-row-clickable {
  cursor: pointer;
}
.kos-all-parties .kos-row-active {
  background: var(--bg-raised);
  box-shadow: inset 3px 0 0 var(--jokull);
}
.kos-all-parties .kos-row-active:hover {
  background: var(--bg-raised);
}
.kos-party-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1px solid var(--border-light);
}
.kos-td-letter {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  margin-right: 4px;
}
.kos-td-partyname {
  color: var(--grot);
}

/* Raw-data lookup section — metadata strip above the per-party table.
   Shows muni-level stats (registered, counted, turnout, counting
   status, council sizes). Inline flex strip, wraps gracefully on
   narrow viewports. */
.kos-rawdata-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 12px 16px;
  background: var(--raised);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.kos-rawdata-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kos-rawdata-meta dt {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grot);
}
.kos-rawdata-meta dd {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px;
  color: var(--basalt);
  font-weight: 500;
  margin: 0;
}

/* Raw-data table — letter cell shows swatch + bold letter; muni
   name cell wider since party names like "Vinstrihreyfingin - grænt
   framboð" are long; totals row in bold with a top border. */
.kos-rawdata-table .kos-th-letter,
.kos-rawdata-table .kos-td-letter {
  text-align: left;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--basalt);
}
.kos-rawdata-table .kos-td-rawname {
  max-width: 240px;
  white-space: normal;
  line-height: 1.3;
}
.kos-rawdata-totals {
  border-top: 1px solid var(--border) !important;
  font-weight: 600;
}
.kos-rawdata-totals .kos-td-name,
.kos-rawdata-totals .kos-td-num {
  font-weight: 600;
  color: var(--basalt);
}

/* Kosningar — tooltip rows inside the map */
.kos-tip-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--basalt);
}
.kos-tip-meta {
  font-size: 10.5px;
  color: var(--grot);
  font-family: 'Geist Mono', ui-monospace, monospace;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kos-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.kos-tip-row span { color: var(--grot); }
.kos-tip-row b { color: var(--basalt); font-weight: 600; }
.kos-tip-delta { border-top: 1px solid var(--border-light); padding-top: 4px; margin-top: 4px; }
.kos-tip-foot {
  margin-top: 6px;
  font-size: 11px;
  color: var(--grot);
  font-style: italic;
  border-top: 1px dashed var(--border-light);
  padding-top: 4px;
}

/* ===== Reduced motion (WCAG 2.3.x / user preference) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}