/* ==========================================================================
   koulu — tables.css
   Leaderboard table + ranking-detail page. Includes the new inline lens
   sparkline + the collapsed methodology details wrapper.
   ========================================================================== */

/* ============== LEADERBOARD ============== */
.rank-page { max-width: 1240px; margin: 0 auto; padding: 34px 28px 96px; }
.rank-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: end; margin-bottom: 26px; }
.rank-head h1 {
  font-family: "Instrument Serif", serif; font-size: clamp(40px, 6vw, 72px);
  line-height: 1; letter-spacing: -0.02em; font-weight: 400; margin: 0 0 14px;
}
.rank-head .sub { font-size: 16px; color: var(--ink-2); max-width: 760px; margin: 0; }
.rank-note {
  border-left: 2px solid var(--accent); padding-left: 16px;
  color: var(--ink-muted); font-size: 12.5px; line-height: 1.45;
}

.rank-toolbar { display: grid; gap: 14px; margin: 22px 0 18px; }
.seg-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg {
  border: 1px solid var(--cream-3); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 13px;
  cursor: pointer; min-height: 36px;
}
.seg[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ============== WEIGHTS PANEL ==============
   Replaces the old lens-tab segmented control. The user dials each atomic
   factor from 0–10 and the composite score recomputes live. */
.weights {
  border: 1px solid var(--cream-3); border-radius: 12px;
  background: #fff; padding: 16px 18px;
}
.weights__hd {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.weights__title {
  font-family: "Instrument Serif", serif; font-size: 18px;
  letter-spacing: -0.01em; color: var(--ink);
}
.weights__presets { display: flex; gap: 6px; flex-wrap: wrap; }
.weights__presets button {
  border: 1px solid var(--cream-3); background: var(--cream); color: var(--ink-2);
  border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px;
  cursor: pointer;
}
.weights__presets button:hover { color: var(--ink); border-color: var(--ink-muted); }
.weights__sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 22px;
}
.weight {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.weight__label {
  font-size: 13px; color: var(--ink); font-weight: 500;
}
.weight__value {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: var(--ink-2); text-align: right;
}
.weight__hint {
  grid-column: 1 / -1;
  font-size: 11.5px; color: var(--ink-muted); line-height: 1.35;
  margin: -2px 0 4px;
}
/* Slider styling — minimal, accent-coloured track + thumb. */
.weight input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--cream-2); border-radius: 2px;
  outline: none; cursor: pointer;
}
.weight input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--cream);
  box-shadow: 0 0 0 1px var(--accent); cursor: pointer;
}
.weight input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--cream); cursor: pointer;
}
.weight input[type="range"]::-moz-range-track {
  height: 4px; background: var(--cream-2); border-radius: 2px;
}

.summary-cell--weights {
  font-family: "Instrument Sans", sans-serif; font-size: 13.5px !important;
  line-height: 1.4; color: var(--ink-2); font-style: italic;
}
.rank-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rank-controls input, .rank-controls select {
  font-family: inherit; font-size: 14px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--cream-3); background: #fff; color: var(--ink);
  min-height: 38px;
}
.rank-controls input { min-width: min(320px, 100%); }
.rank-count { margin-left: auto; color: var(--ink-muted); font-size: 12.5px; }

.rank-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0;
}
.summary-cell {
  background: #fff; border: 1px solid var(--cream-3); border-radius: 8px;
  padding: 12px 14px;
}
.summary-cell .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted);
}
.summary-cell .v { font-family: "Instrument Serif", serif; font-size: 26px; line-height: 1.1; }

/* Coverage audit is now a <details>, summary collapsed by default. */
details.rank-audit {
  margin: 0 0 18px;
  border: 1px solid var(--cream-3); border-left: 2px solid var(--accent);
  border-radius: 8px; background: #fff; color: var(--ink-2);
  font-size: 12.5px; line-height: 1.45;
}
details.rank-audit > summary {
  cursor: pointer; padding: 11px 14px; list-style: none;
  font-weight: 600; color: var(--ink);
}
details.rank-audit > summary::after { content: " +"; color: var(--ink-muted); }
details.rank-audit[open] > summary::after { content: " −"; }
details.rank-audit > div { padding: 0 14px 14px; }
details.rank-audit b { color: var(--ink); }

.rank-table-wrap { overflow-x: auto; border: 1px solid var(--cream-3); border-radius: 8px; background: #fff; }
.rank-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.rank-table th, .rank-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px dotted var(--cream-3);
  font-size: 13.5px; vertical-align: middle;
}
.rank-table th {
  background: var(--cream-2); color: var(--ink-muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; user-select: none;
  cursor: pointer;
}
.rank-table tr:hover { background: var(--cream); }
.rank-table tr:last-child td { border-bottom: 0; }
.rank-table .num { text-align: right; font-family: "JetBrains Mono", monospace; white-space: nowrap; }
.rank-name { font-family: "Instrument Serif", serif; font-size: 18px; line-height: 1.15; letter-spacing: -0.005em; }
.rank-meta { color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
/* Score column — plain number, colour-coded by tier; no pill background. */
.score-pill {
  display: inline; font-weight: 600; color: var(--ink);
}
.score-pill.hi  { color: var(--tier-lo-fg); }
.score-pill.mid { color: var(--tier-mid-fg); }
.score-pill.lo  { color: var(--tier-hi-fg); }
.ctx-stack { display: grid; gap: 3px; color: var(--ink-2); font-size: 12.5px; }
.ctx-stack .muted { color: var(--ink-muted); }
/* Evidence column — comma-separated plain text instead of chip rows. */
.evidence { color: var(--ink-muted); font-size: 11.5px; font-family: "JetBrains Mono", monospace; }
.evidence .ev { display: inline; }
.evidence .ev + .ev::before { content: " · "; color: var(--cream-3); }
.empty-row { padding: 28px; color: var(--ink-muted); text-align: center; }

/* Inline factor sparkline — one bar per atomic factor, width scaled to the
   user's weight (so heavily-weighted factors stand out visually) and height
   to the row's score on that factor. */
.lensbar { display: inline-flex; gap: 2px; align-items: end; height: 22px; vertical-align: middle; }
.lensbar i {
  display: inline-block; width: 4px;
  background: var(--accent); opacity: .75; border-radius: 1px;
}
.lensbar i.dim  { background: var(--cream-3); opacity: 1; height: 3px; }
.lensbar i.mute { opacity: .25; }

.rank-pagination {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 14px; border-top: 1px solid var(--cream-3); background: #fff;
}
.rank-pagination button {
  border: 1px solid var(--cream-3); background: var(--cream); color: var(--ink);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.rank-pagination button:disabled { opacity: .45; cursor: default; }
.rank-pagination .page-label { color: var(--ink-muted); font-size: 12.5px; }

/* ============== RANKING DETAIL ============== */
.detail-page { max-width: 1180px; margin: 0 auto; padding: 30px 28px 96px; }
.detail-page .crumb { margin-bottom: 18px; color: var(--ink-muted); font-size: 13px; font-family: inherit; }
.detail-page .crumb a { color: var(--accent); text-decoration: none; }
.detail-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px;
  align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--cream-3);
}
.eyebrow-line {
  color: var(--ink-muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0; font-weight: 600; margin-bottom: 10px;
}
.detail-hero h1 {
  font-family: "Instrument Serif", serif; font-size: 52px; line-height: 1.02;
  letter-spacing: 0; font-weight: 400; margin: 0 0 12px;
}
/* Ranking-detail meta-line — inline middle-dot separated facts, no chips. */
.meta-line { color: var(--ink-2); font-size: 13px; font-family: "JetBrains Mono", monospace; }
.tag { display: inline; }
.tag + .tag::before { content: " · "; color: var(--cream-3); }
.hero-score {
  background: #fff; border: 1px solid var(--cream-3); border-radius: 8px;
  padding: 18px; display: grid; gap: 8px;
}
.hero-score .label { color: var(--ink-muted); font-size: 12px; }
.hero-score .score { font-family: "Instrument Serif", serif; font-size: 54px; line-height: 1; }
.hero-score .rank { color: var(--ink-2); font-size: 13px; }
.section { margin-top: 28px; }
.section h2 {
  font-size: 16px; text-transform: uppercase; letter-spacing: 0; margin: 0 0 12px;
  color: var(--ink-muted);
}
.score-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.score-cell, .detail-card {
  background: #fff; border: 1px solid var(--cream-3); border-radius: 8px; padding: 14px;
}
.score-cell .k { color: var(--ink-muted); font-size: 12px; }
.score-cell .v { font-family: "Instrument Serif", serif; font-size: 34px; line-height: 1; margin-top: 6px; }
.score-cell .r { color: var(--ink-2); font-size: 12.5px; margin-top: 5px; }
.score-cell .d { color: var(--ink-muted); font-size: 12px; line-height: 1.35; margin-top: 7px; }
.score-cell.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.detail-card--wide { grid-column: 1 / -1; }
.detail-card h3 {
  margin: 0 0 10px; font-size: 14px; color: var(--ink); letter-spacing: 0;
}
.detail-card .programs-sub { margin-bottom: 12px; }
.detail-card .programs-sub:last-child { margin-bottom: 0; }
.detail-card .programs-sub > h3 { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 5px 0; font-weight: 600; letter-spacing: 0.02em; }
.detail-card .programs-list { list-style: none; padding: 0; margin: 0; }
.detail-card .programs-list li { padding: 4px 0; border-top: 1px dotted var(--cream-3); font-size: 13px; color: var(--ink); }
.detail-card .programs-list li:first-child { border-top: 0; padding-top: 0; }
.detail-card .programs-list--lang li { display: flex; gap: 10px; align-items: baseline; }
.detail-card .programs-list .kieli-lvl { font-family: "JetBrains Mono", monospace; font-size: 11px; background: var(--cream-2); color: var(--ink-2); padding: 1px 6px; border-radius: 3px; min-width: 22px; text-align: center; }
.kv-list { display: grid; gap: 7px; }
.kv {
  display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: 12px; padding-top: 7px; border-top: 1px dotted var(--cream-3);
  font-size: 13.5px;
}
.kv:first-child { border-top: 0; padding-top: 0; }
.kv .k { color: var(--ink-muted); }
.kv .v { color: var(--ink); overflow-wrap: anywhere; }

/* Matriculation-grade distribution — bar chart in detail card */
.matric-total, .matric-excellence {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--ink-muted);
  padding: 7px 0; border-bottom: 1px dotted var(--cream-3);
}
.matric-total strong, .matric-excellence strong {
  font-family: "JetBrains Mono", monospace; color: var(--ink); font-size: 14px;
}
.matric-excellence {
  border-bottom: 0; border-top: 1px dotted var(--cream-3);
  margin-top: 4px; padding-top: 9px;
}
.matric-dist { display: grid; gap: 6px; padding: 10px 0 4px 0; }
.matric-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.7fr) 46px 46px;
  gap: 9px; align-items: center; font-size: 12.5px;
}
.matric-key {
  font-family: "JetBrains Mono", monospace; font-weight: 600;
  font-size: 13px; text-align: center;
}
.matric-label {
  font-family: "Instrument Serif", serif; font-style: italic;
  font-size: 12px; color: var(--ink-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.matric-bar {
  height: 7px; background: var(--cream-2); border-radius: 4px; overflow: hidden;
}
.matric-bar > div { height: 100%; border-radius: 4px; }
.matric-n, .matric-pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; text-align: right;
}
.matric-n { color: var(--ink-muted); }
.matric-pct { color: var(--ink-2); }
.area-context-list { display: grid; gap: 8px; }
.area-context-row {
  display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 1.25fr);
  gap: 12px; padding-top: 8px; border-top: 1px dotted var(--cream-3);
  font-size: 13.5px;
}
.area-context-row:first-child { border-top: 0; padding-top: 0; }
.area-context-row .k { color: var(--ink-muted); }
.area-context-row .v { color: var(--ink); display: grid; gap: 3px; }
.area-rank { color: var(--ink-muted); font-size: 12px; line-height: 1.35; }
.area-context-intro {
  margin: 0 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.45;
}
.area-context-scope {
  padding: 12px 0 4px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ink-muted); font-weight: 600;
  border-top: 1px solid var(--cream-3);
}
.area-context-scope:first-child { border-top: 0; padding-top: 4px; }
.component-list, .line-list { display: grid; gap: 8px; }
.component {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 10px; border: 1px solid var(--cream-3); border-radius: 8px; background: var(--cream);
}
.component b { display: block; font-size: 13.5px; font-weight: 600; }
.component span, .component small { color: var(--ink-muted); font-size: 12px; }
/* Component score readout — plain number, colour-coded; no chip. */
.rank-chip {
  display: inline; font-weight: 600; color: var(--ink);
  font-family: "Instrument Serif", serif; font-size: 18px;
}
.rank-chip.hi  { color: var(--tier-lo-fg); }
.rank-chip.mid { color: var(--tier-mid-fg); }
.rank-chip.lo  { color: var(--tier-hi-fg); }
.line-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  padding: 9px 0; border-bottom: 1px dotted var(--cream-3); font-size: 13.5px;
}
.line-item:last-child { border-bottom: 0; }
.line-item .sub { color: var(--ink-muted); font-size: 12px; font-style: italic; }
.line-item .mono { font-family: "JetBrains Mono", monospace; text-align: right; white-space: nowrap; }
.line-item .mono strong { font-weight: 600; color: var(--ink); }
.line-item .mono .unit { color: var(--ink-muted); font-size: 11.5px; margin-left: 1px; }
.note-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr); gap: 14px;
  background: var(--accent-soft); border: 1px solid #c8d8bd; border-radius: 8px; padding: 16px;
  color: var(--accent-2);
}
.note-band p { margin: 0; }
.audit-list { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; }
.figure-note {
  background: #fff; border: 1px solid var(--cream-3); border-radius: 8px;
  padding: 14px; color: var(--ink-2); font-size: 13.5px;
}
.formula-note { margin-top: 10px; }
.empty { color: var(--ink-muted); font-size: 13.5px; margin: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.button-link {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 8px 13px;
  background: var(--ink); color: var(--cream); text-decoration: none; font-size: 13px;
}
.button-link.secondary { background: #fff; color: var(--ink); border: 1px solid var(--cream-3); }

/* Methodology block — collapsed by default, holds the prose that used to be
   three separate sections (how-to-read + audit + value-add comparison). */
details.methodology {
  margin-top: 32px;
  border: 1px solid var(--cream-3); border-radius: 12px;
  background: #fff;
}
details.methodology > summary {
  cursor: pointer; padding: 16px 18px; list-style: none;
  font-weight: 600; color: var(--ink); font-size: 14px;
}
details.methodology > summary::after { content: " +"; color: var(--ink-muted); }
details.methodology[open] > summary::after { content: " −"; }
details.methodology > .body { padding: 0 18px 18px; display: grid; gap: 18px; }

/* ============== RESPONSIVE ============== */
@media (max-width: 860px) {
  .detail-hero, .detail-grid, .note-band { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero h1 { font-size: 38px; }
}
@media (max-width: 800px) {
  .rank-head { grid-template-columns: 1fr; }
  .rank-summary { grid-template-columns: repeat(2, 1fr); }
  .rank-count { margin-left: 0; width: 100%; }
}
/* Mobile: collapse the leaderboard table into stacked cards. */
@media (max-width: 720px) {
  .rank-table { min-width: 0; }
  .rank-table thead { display: none; }
  .rank-table, .rank-table tbody, .rank-table tr, .rank-table td { display: block; }
  .rank-table tr {
    background: #fff; border: 1px solid var(--cream-3); border-radius: 12px;
    padding: 14px; margin-bottom: 10px;
  }
  .rank-table td { padding: 4px 0; border: 0; }
  .rank-table .num { text-align: left; }
}
@media (max-width: 560px) {
  .detail-page { padding: 24px 18px 80px; }
  .score-grid { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
}