@charset "UTF-8";

/*
 * Layout for tarkkuus.html (the forecast accuracy page).
 *
 * Shared tokens, nav, footer and overlay chrome come from
 * accessibility-theme.css, which is loaded after this file.
 */

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

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--pk-bg-dark, #131313);
  color: var(--pk-text-dark, #dddddd);
  font-family: Roboto, system-ui, sans-serif;
}

.accuracy-page {
  padding: 12px var(--pk-gutter-desktop, 14px) 40px;
}

.accuracy-hero {
  padding: 8px 0 4px;
}

.accuracy-hero h1 {
  font-size: var(--pk-page-title-size, clamp(1.35rem, 2.45vw, 2.05rem));
  margin: 0 0 6px;
}

.accuracy-subtitle {
  margin: 0 0 10px;
  font-size: var(--pk-page-subtitle-size, 0.88rem);
  color: var(--pk-text-muted-dark, #b7b7b7);
}

.accuracy-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.6;
}

.accuracy-section {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--pk-border-dark, #444444);
}

.accuracy-section:focus {
  outline: none;
}

.accuracy-section h2 {
  font-size: 1.18rem;
  margin: 0 0 8px;
}

.accuracy-section h3 {
  font-size: 0.98rem;
  margin: 26px 0 8px;
}

.section-lede {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.6;
}

.section-note {
  margin: 0 0 12px;
  max-width: 66ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

/* ---------- Stat tiles ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 4px;
}

.stat-tile {
  padding: 14px 16px;
  border: 1px solid var(--pk-border-dark, #444444);
  border-radius: var(--pk-card-radius, 8px);
  background: var(--pk-surface-muted-dark, rgba(30, 30, 30, 0.6));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-tile--hero {
  background: var(--pk-surface-dark, rgba(30, 30, 30, 0.98));
}

.stat-label {
  font-size: 0.76rem;
  color: var(--pk-text-muted-dark, #b7b7b7);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-value {
  /* Proportional figures: tabular-nums makes display sizes look loose. */
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-tile--hero .stat-value {
  font-size: 2.4rem;
}

.stat-note {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

/* ---------- Tables ---------- */

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.accuracy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.accuracy-table caption {
  text-align: left;
}

.accuracy-table th,
.accuracy-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--pk-border-dark, #444444);
  white-space: nowrap;
}

.accuracy-table thead th {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--pk-text-muted-dark, #b7b7b7);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.accuracy-table tbody th {
  font-weight: 600;
}

.accuracy-table td.num,
.accuracy-table th.num {
  text-align: right;
}

/*
 * Headers over numeric columns are right-aligned to match their values. Column
 * 1 is the row label; every remaining column in these two tables is a number,
 * so the header row would otherwise float left of its own data.
 */
#horizon-table thead th:not(:first-child),
#party-table thead th:not(:first-child) {
  text-align: right;
}

#horizon-table thead th:nth-child(2),
#party-table thead th:nth-child(2) {
  /* The coverage column is a bar plus a number, aligned left. */
  text-align: left;
}

.party-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.party-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}

/*
 * Coverage bar and its number on one line.
 *
 * The bar must not clip its target marker, so there is no overflow:hidden --
 * the fill is rounded instead and the marker is free to extend past the track.
 */
.coverage-cell {
  min-width: 190px;
  width: 34%;
}

.coverage-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coverage-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 70px;
  height: 8px;
  border-radius: 4px;
  background: var(--pk-surface-muted-dark, rgba(30, 30, 30, 0.6));
  border: 1px solid var(--pk-border-dark, #444444);
}

.coverage-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--coverage, 0%);
  max-width: 100%;
  border-radius: 4px;
  background: #6f8fa8;
}

/* Target marker: taller than the track so it stays visible over the fill. */
.coverage-bar::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--target, 80%);
  width: 2px;
  border-radius: 1px;
  background: var(--pk-text-dark, #dddddd);
}

.coverage-text {
  flex: 0 0 auto;
  min-width: 4.2em;
  text-align: right;
  font-size: 0.82rem;
}

/* ---------- House effects ---------- */

.house-table th,
.house-table td {
  border-bottom: 1px solid var(--pk-border-dark, #444444);
}

.house-party-head {
  text-align: center !important;
  font-size: 0.7rem !important;
}

.house-name-cell,
.house-former {
  white-space: nowrap;
}

.house-cell {
  min-width: 74px;
  text-align: center !important;
  vertical-align: middle;
}

/*
 * Diverging mini-bar: grows left or right from the cell centre. Sign is carried
 * by direction, magnitude by length -- no colour class is needed, so it stays
 * readable in greyscale and for every kind of colour vision.
 */
.house-bar {
  position: relative;
  display: block;
  height: 5px;
  margin: 0 auto 3px;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    transparent calc(50% - 1px),
    var(--pk-border-dark, #444444) calc(50% - 1px),
    var(--pk-border-dark, #444444) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.house-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--extent, 0%);
  border-radius: 2px;
}

/*
 * Diverging pair: warm above the trend, cool below, neutral at the centre
 * line. Checked before adopting -- OKLab dE 20 for normal vision, >=12 under
 * protanopia, deuteranopia and tritanopia, and >=3:1 against both surfaces.
 * Direction and the printed number both repeat the sign, so the colour is a
 * third, redundant cue rather than the only one.
 */
.house-bar--pos::before {
  left: 50%;
  background: var(--pk-house-pos, #c2703a);
}

.house-bar--neg::before {
  right: 50%;
  background: var(--pk-house-neg, #3d8a94);
}

.house-value {
  font-size: 0.76rem;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

.house-value--pos {
  color: var(--pk-house-pos, #c2703a);
}

.house-value--neg {
  color: var(--pk-house-neg, #3d8a94);
}

.house-name-cell {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

.house-former {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

/* ---------- Replay ---------- */

.replay-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 14px 0 10px;
}

.replay-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

.replay-field select {
  padding: 7px 9px;
  border-radius: 4px;
  border: 1px solid var(--pk-border-dark, #444444);
  background: var(--pk-bg-dark, #131313);
  color: var(--pk-text-dark, #dddddd);
  font: inherit;
  min-width: 160px;
}

.replay-hit {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.replay-figure {
  position: relative;
  margin: 0;
}

#replay-chart {
  width: 100%;
  min-height: 300px;
}

.replay-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  background: var(--pk-surface-dark, rgba(30, 30, 30, 0.98));
  border: 1px solid var(--pk-border-dark, #444444);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  min-width: 150px;
  box-shadow: var(--pk-shadow-dark, 0 2px 10px rgba(0, 0, 0, 0.24));
}

.replay-tooltip .tip-head {
  font-weight: 700;
  margin-bottom: 4px;
}

.replay-tooltip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.replay-key {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

.replay-key-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.key-mark {
  flex: none;
  display: inline-block;
}

.key-band {
  width: 18px;
  height: 10px;
  border-radius: 2px;
  background: var(--key-color, #888888);
  opacity: 0.3;
}

.key-line {
  width: 18px;
  height: 2px;
  background: var(--key-color, #888888);
}

.key-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px solid var(--key-color, #888888);
}

/* Matches the chart: a miss is filled, a hit is hollow. */
.key-dot--miss {
  background: var(--key-color, #888888);
}

.replay-table-details {
  margin-top: 18px;
  font-size: 0.84rem;
}

.replay-table-details summary {
  cursor: pointer;
  padding: 6px 0;
  color: var(--pk-text-muted-dark, #b7b7b7);
}

.replay-table-details summary:focus-visible {
  outline: 2px solid var(--pk-focus-color, #8f8f8f);
  outline-offset: 2px;
}

td.hit {
  color: #6f9e6f;
}

td.miss {
  color: #c07a70;
}

/* ---------- Light theme ---------- */

html[data-theme="light"],
html[data-theme="light"] body {
  --pk-house-pos: #a65324;
  --pk-house-neg: #28727c;
  background-color: var(--pk-bg-light, #f4f4f4);
  color: var(--pk-text-light, #202020);
}

html[data-theme="light"] .accuracy-subtitle,
html[data-theme="light"] .section-note,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .stat-note,
html[data-theme="light"] .accuracy-table thead th,
html[data-theme="light"] .replay-field,
html[data-theme="light"] .replay-key,
html[data-theme="light"] .replay-table-details summary {
  color: var(--pk-text-muted-light, #626262);
}

html[data-theme="light"] .accuracy-section,
html[data-theme="light"] .accuracy-table th,
html[data-theme="light"] .accuracy-table td,
html[data-theme="light"] .stat-tile,
html[data-theme="light"] .coverage-bar,
html[data-theme="light"] .replay-field select,
html[data-theme="light"] .replay-tooltip {
  border-color: var(--pk-border-light, #cfcfcf);
}

html[data-theme="light"] .stat-tile {
  background: #ffffff;
}

html[data-theme="light"] .stat-tile--hero {
  background: var(--pk-surface-light, rgba(255, 255, 255, 0.96));
}

html[data-theme="light"] .coverage-bar {
  background: #ffffff;
}

html[data-theme="light"] .coverage-bar::before {
  background: #4f7590;
}

html[data-theme="light"] .coverage-bar::after {
  background: var(--pk-text-light, #202020);
}

html[data-theme="light"] .house-bar {
  background: linear-gradient(
    to right,
    transparent calc(50% - 1px),
    var(--pk-border-light, #cfcfcf) calc(50% - 1px),
    var(--pk-border-light, #cfcfcf) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

html[data-theme="light"] .replay-field select,
html[data-theme="light"] .replay-tooltip {
  background: #ffffff;
  color: var(--pk-text-light, #202020);
}

html[data-theme="light"] td.hit {
  color: #3f6f3f;
}

html[data-theme="light"] td.miss {
  color: #9a4b41;
}

/* ---------- Narrow viewports ---------- */

@media (max-width: 768px) {
  .accuracy-page {
    padding: 10px var(--pk-gutter-mobile, 8px) 32px;
  }

  .stat-tile--hero .stat-value {
    font-size: 2rem;
  }

  .stat-value {
    font-size: 1.6rem;
  }

  .accuracy-table {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .replay-tooltip {
    transition: none;
  }
}

/* ---------- Limitations ---------- */

.limits-list {
  margin: 0;
  padding-left: 1.1rem;
  max-width: 66ch;
  font-size: 0.87rem;
  line-height: 1.6;
}

.limits-list li + li {
  margin-top: 8px;
}

html[data-theme="light"] .house-former {
  color: var(--pk-text-muted-light, #626262);
}