/* Layout and components. Tokens live in tokens.css.
 *
 * Chapter 4: separation comes from space and hairlines, not boxes and shadows.
 * Chapter 6: the trust marks — source line, timestamp, caveat, methodology —
 * have their own visual forms, because credibility is design work rather than
 * text added at the end.
 */

/* ---- Grid ---------------------------------------------------------------- */

.umgjord { padding-inline: var(--s6); }

.megin  { max-width: var(--breidd-megin); margin-inline: auto; }
.tafla  { max-width: var(--breidd-tafla); margin-inline: auto; }
.mynd   { max-width: var(--breidd-mynd);  margin-inline: auto; }

/* One editorial column with things breaking out of it, per chapter 4 — not
   three columns each finding its own centre. A nested width constraint keeps
   the left edge it inherits instead of re-centring, which is what produced
   three different left edges on the same page. */
.tafla .megin,
.mynd .megin,
.mynd .tafla { margin-inline: 0; }

/* Vertical rhythm matters more than horizontal. Between sections: large.
   Within a section: small. Middle values destroy the cadence. */
.kafli      { margin-block: var(--s24); }
.kafli-innri { margin-block: var(--s4); }

/* ---- Navigation ---------------------------------------------------------- */

.siglingar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.siglingar-innri {
  max-width: var(--breidd-mynd);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s6);
  padding-block: var(--s4);
}
.siglingar a { text-decoration: none; color: var(--ink-2); font-size: var(--smatt); }
.siglingar a:hover,
.siglingar a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.merki {
  font-family: var(--serif);
  font-size: var(--h3);
  font-weight: 600;
  color: var(--ink);
  margin-right: auto;
}
.merki a { color: inherit; font-size: inherit; }

/* ---- Hero. Chapter 4: the front page opens like a report cover.
       The hero figure is a COUNT, never a share. That is a fixed rule. ------ */

.hetjutala {
  font-family: var(--serif);
  font-size: var(--hero);
  font-weight: 300;
  line-height: var(--lh-fyrirsogn);
  letter-spacing: -0.02em;
  margin: 0;
}
.hetjuskyring {
  font-family: var(--serif);
  font-size: var(--yfirskrift);
  font-weight: 300;
  line-height: var(--lh-fyrirsogn);
  color: var(--ink-2);
  margin: var(--s4) 0 0;
  max-width: 22ch;
}

/* ---- Trust marks. Chapter 6. -------------------------------------------- */

.heimildalina {
  font-size: var(--orsmatt);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: var(--s3);
}
.heimildalina a { color: var(--accent-ink); text-decoration: underline; }

.timastimpill { font-size: var(--orsmatt); color: var(--ink-3); }
.timastimpill time { font-family: var(--mono); }
.timastimpill.gamalt { color: var(--highlight-ink); }

/* Beside the number it qualifies, never in a footnote. A hidden caveat is not
   a caveat. */
.fyrirvari {
  font-size: var(--orsmatt);
  line-height: 1.45;
  color: var(--ink-2);
  border-left: 1px solid var(--rule);
  padding-left: var(--s3);
  margin-top: var(--s2);
  max-width: 62ch;
}

.eignarlina {
  font-size: var(--smatt);
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
  margin-top: var(--s8);
  max-width: 62ch;
}

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

table { border-collapse: collapse; width: 100%; font-size: var(--smatt); line-height: var(--lh-tafla); }
thead th {
  background: var(--paper-raised);
  text-align: left;
  font-weight: 600;
  font-size: var(--orsmatt);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: var(--s2) var(--s3);
  border-bottom: 2px solid var(--rule-strong);
}
tbody td { padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.tala, th.tala { text-align: right; font-family: var(--mono); white-space: nowrap; }
td.audkenni { font-family: var(--mono); white-space: nowrap; }

/* The official title of a gerd, always English — no Icelandic one exists.
   Held back a step from the Icelandic around it so the reader sees at a glance
   that it is a citation and not interface copy. */
.gerdarheiti { color: var(--ink-2); }
td.gerdarheiti {
  max-width: 32rem;
  font-size: var(--smatt);
  line-height: 1.4;
}

.tafla-skrun { overflow-x: auto; }

/* ---- Key figures. Each row states its own denominator and caveat. -------- */

.lykiltafla td { vertical-align: top; }
.lykiltafla .maeling { font-weight: 500; color: var(--ink); }
.lykiltafla .brot { font-family: var(--mono); color: var(--ink-2); white-space: nowrap; }

/* ---- Filters: one row above the content, chapter 5. ---------------------- */

.siur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: end;
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.sia label { display: block; font-size: var(--orsmatt); letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: var(--s1); }
.sia select, .sia input {
  font-family: var(--sans);
  font-size: var(--smatt);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.sia input[type="search"] { min-width: 22ch; }
.hnappur {
  font-family: var(--sans);
  font-size: var(--smatt);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
}
.hnappur.audur { background: transparent; color: var(--accent-ink); }

/* ---- Clause text, shown as it stands in the corpus ---------------------- */

.klausa {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: var(--s4);
  margin-block: var(--s4);
}

.merkimidi {
  display: inline-block;
  font-size: var(--orsmatt);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 1px var(--s2);
  white-space: nowrap;
}

/* ---- Glossary. A definition list, not a card grid: chapter 6 wants the
       methodology page set like an essay, with no boxes. ------------------- */

.ordskyringar { margin: var(--s6) 0; }
.ordskyringar dt {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--megin);
  color: var(--ink);
  margin-top: var(--s6);
}
.ordskyringar dd {
  margin: var(--s1) 0 0;
  padding-left: var(--s4);
  border-left: 1px solid var(--rule);
  color: var(--ink-2);
}

/* The hero explanation links a term without turning the sentence into UI. */
.hetjuskyring a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.hetjuskyring a:hover { text-decoration-color: var(--accent); }

/* ---- Bar chart. Chapter 5: bars start at zero, without exception. The bar
       track is the full width, so the fill is read against a common baseline
       and no axis is needed. Labels sit directly on the marks; the legend box
       is a fallback, not a first choice. ------------------------------------ */

.sulurit { list-style: none; margin: var(--s8) 0 var(--s4); padding: 0; }
/* A name with no Icelandic form. Italic and muted so it does not pass for one. */
.enskt { font-style: italic; color: var(--ink-3); }

.sula {
  display: grid;
  grid-template-columns: minmax(14ch, 38ch) 1fr 6ch;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s1);
}
.sula-merki { font-size: var(--smatt); color: var(--ink-2); }
.sula-braut {
  background: var(--paper-raised);
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
}
.sula-fylling {
  display: block;
  height: 100%;
  background: var(--cat-1);
  border-radius: 0 2px 2px 0;
  min-width: 2px;
}
.sula:first-child .sula-fylling { background: var(--cat-2); }
.sula-tala {
  font-family: var(--mono);
  font-size: var(--smatt);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* ---- Line charts. Chapter 5: the figure carries a title that states the
       finding, its unit, its source and the date. Grid and axes are
       subordinate; the categorical order is fixed and never cycled; text
       wears ink, never the series colour, and a coloured mark beside it
       carries identity instead. ---------------------------------------------- */

.rit { margin: 0; }
.rit-haus { margin-bottom: var(--s4); }
.rit-titill {
  margin-top: 0;
  margin-bottom: var(--s2);
  max-width: 46ch;
}
.rit-eining {
  font-size: var(--smatt);
  color: var(--ink-2);
  margin-bottom: var(--s4);
  max-width: 62ch;
}

/* Two series, so a legend is always present — and both are labelled directly
   on the figure as well. Identity is never carried by colour alone. */
.rit-skyringar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  font-size: var(--smatt);
  color: var(--ink-2);
}
.rit-skyringar li { display: flex; align-items: center; gap: var(--s2); }
.rit-litur { display: inline-block; width: 18px; height: 2px; background: currentColor; }

.rit-rod-1 { color: var(--cat-1); }
.rit-rod-2 { color: var(--cat-2); }

.rit-flotur { position: relative; margin-top: var(--s6); }
.rit-svg { display: block; width: 100%; height: auto; }

/* Chapter 5: lines 2px, points at least 8px across. */
.rit-ferill, .rit-merkistrik { stroke-width: 2; }

.rit-ristlina  { stroke: var(--rule); stroke-width: 1; }
.rit-grunnlina { stroke: var(--rule-strong); stroke-width: 1; }
.rit-skil line { stroke: var(--rule-strong); stroke-width: 1; }

.rit-svg text { font-family: var(--sans); }
.rit-astala { font-family: var(--mono); font-size: 12px; fill: var(--ink-3); }
.rit-gildi  { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--ink); }
.rit-radmerki  { font-size: 13px; fill: var(--ink-2); }
.rit-skilamerki { font-size: 12px; letter-spacing: 0.04em; fill: var(--ink-3); }

/* The hover layer, chapter 5. Everything here starts invisible and stays that
   way without scripts, which is also how it looks to a reader who has none. */
.rit-krosshar { stroke: var(--rule-strong); stroke-width: 1; opacity: 0; }
.rit-bendill { fill: var(--paper); stroke: var(--ink); stroke-width: 2; opacity: 0; }
[data-virkt] .rit-krosshar,
[data-virkt] .rit-bendill { opacity: 1; }

.rit-upplysingar {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: var(--s2) var(--s3);
  font-size: var(--orsmatt);
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[data-virkt] .rit-upplysingar { opacity: 1; }
/* The script sets this only when the reader has not asked for less motion. */
[data-mjukt] .rit-upplysingar { transition: opacity 120ms ease-out; }

/* ---- Two series in one table, in their own column groups ---------------- */

.timarodir tbody th,
.timarodir tfoot th {
  font-family: var(--mono);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.timarodir thead th[colspan] { text-align: left; }
.rit-hopur-2 { border-left: 1px solid var(--rule-strong); }
.timarodir tfoot th,
.timarodir tfoot td {
  border-top: 2px solid var(--rule-strong);
  border-bottom: 0;
  font-weight: 600;
}

/* ---- Two figures that answer different questions, side by side ---------- */

.osamraemi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26ch, 1fr));
  gap: var(--s12);
  margin-top: var(--s6);
}
.stor-tala {
  font-family: var(--serif);
  font-size: var(--yfirskrift);
  font-weight: 300;
  line-height: 1;
  margin: 0 0 var(--s3);
  font-variant-numeric: tabular-nums;
}

/* The one caveat on a page that has to be read before the figures under it,
   not after. Chapter 6: a caveat placed below what it qualifies is decoration. */
.stor-fyrirvari {
  border-left: 3px solid var(--rule-strong);
  padding: var(--s3) 0 var(--s3) var(--s4);
  margin: var(--s6) 0;
  max-width: 62ch;
}

/* ---- Pagination ---------------------------------------------------------- */

.sidufletting {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
  margin-top: var(--s8);
  font-size: var(--smatt);
}
.sidufletting .staða { color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- One modest staggered reveal on first paint, never again ------------- */

@media (prefers-reduced-motion: no-preference) {
  .birta > * { animation: birta 200ms ease-out backwards; }
  .birta > *:nth-child(1) { animation-delay:   0ms; }
  .birta > *:nth-child(2) { animation-delay:  40ms; }
  .birta > *:nth-child(3) { animation-delay:  80ms; }
  .birta > *:nth-child(4) { animation-delay: 120ms; }
  .birta > *:nth-child(5) { animation-delay: 160ms; }
  @keyframes birta { from { opacity: 0; transform: translateY(4px); } }
}

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 720px) {
  :root { --hero: 3.5rem; --yfirskrift: 2rem; --h1: 1.75rem; }
  .umgjord { padding-inline: var(--s4); }
  .kafli { margin-block: var(--s16); }

  /* A chart squeezed to phone width would carry unreadable labels. It keeps
     its size and scrolls sideways instead; the table below it does not. */
  .rit-flotur { overflow-x: auto; }
  .rit-svg { min-width: 640px; }
}