/* Stílblað tölfræðisíðunnar (/tolfraedi/), endurhönnun 15.10.2026.

   Hleðst AÐEINS á tölfræðisíðunni, á eftir sameiginlega still.css, og
   hver regla er afmörkuð við `.tolfr` - aðrar síður miðilsins haldast
   óbreyttar. Allir litir eru tókar úr still.css (`--gras`, `--gull`,
   `--jakvaett`, `--neikvaett` ...), svo önnur deild fær sína eigin pallettu.

   Litareglurnar (dataviz-prófun, sjá docs/superpowers/specs/
   2026-10-15-tolfraedi-endurhonnun-design.md):
   - Lið þekkjast á merki og nafni, ekki lit. Línur sætaferðarinnar eru
     daufar og valið lið fær `--gull`.
   - Grænt og rautt merkja AÐEINS gott og slæmt (sigur/tap, yfir/undir).
     Rauðgræn litblinda greinir þau illa (ΔE 7,1), svo hver grænn eða
     rauður flötur ber líka bókstaf, formerki eða stöðu.
   - Snertimörk minnst 44 px og 16 px letur í fellivali (iOS þysjar annars
     inn þegar smellt er).

   Samræming við endurhönnun vefsins (áfangi 3, 15.10.2026): spjöldin
   taka upp horn og skugga still.css, stýringar og texti kerfisletrið
   (`--letur-vidmot`) og minnst 0,875rem, fókus sameiginlega græna
   hringinn. Gröfin sjálf halda Bricolage (`--tolfr-graf-letur`) og útliti
   sínu; aðeins daufu línurnar dökkna í 3,35:1 á hvítu (voru 1,88:1). */

.tolfr {
  --tolfr-dauft: #848f89;
  --tolfr-dauft: color-mix(in srgb, var(--daemt) 70%, var(--flotur));
  --tolfr-jafnt: #d3ddd6;
  --tolfr-jafnt: color-mix(in srgb, var(--daemt) 22%, var(--flotur));
  --tolfr-leturgerd: var(--letur-vidmot);
  --tolfr-graf-letur: "Bricolage Grotesque", "Arial Narrow", sans-serif;
}

/* Síðuhausinn kemur úr still.css (`.sidu-haus`), eins og á öðrum gagnasíðum. */
.tolfr > .sidu-haus { margin-bottom: 1.5rem; }

/* --- Hnappar og stýringar --------------------------------------------------- */

.tolfr button,
.tolfr select,
.tolfr summary,
.tolfr input[type="range"] { touch-action: manipulation; }

.tolfr-hnappur,
.tolfr-breyta,
.tolfr-aftur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1.5px solid var(--gras);
  border-radius: 8px;
  background: var(--flotur);
  color: var(--gras);
  font: 700 0.95rem/1.2 var(--tolfr-leturgerd);
  text-decoration: none;
  cursor: pointer;
}

.tolfr-hnappur:hover,
.tolfr-breyta:hover,
.tolfr-aftur:hover { background: var(--randi); }

.tolfr .sf-spila {
  background: var(--gras);
  color: var(--gras-blek);
  min-width: 6.5rem;
}

.tolfr-tengill { margin-top: 0.75rem; text-align: center; }

/* Fókus: sami græni hringur og annars staðar á vefnum (still.css). */
.tolfr g:focus { outline: none; }

/* --- Stöðulínan (föst efst) og síustikan -------------------------------------- */

.tolfr-stadalina {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin: 0 -1.25rem 1rem;
  padding: 0.35rem 1.25rem;
  background: var(--grunnur);
  border-bottom: 1px solid var(--lina);
}

.tolfr-stadalina[hidden],
.tolfr-sia[hidden] { display: none; }

.tolfr-stada {
  flex: 1 1 12rem;
  margin: 0;
  font: 700 0.95rem/1.3 var(--tolfr-leturgerd);
  overflow-wrap: anywhere;
}

.tolfr-stadalina--villa .tolfr-stada { color: var(--neikvaett); }

.tolfr-sia {
  scroll-margin-top: 4.5rem;
  margin: 0 0 2rem;
  padding: 1rem;
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: var(--horn-spjald);
  box-shadow: var(--skuggi);
}

.sia-hnappar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: 0.5rem;
}

.sia-hnappur {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--lina);
  border-radius: 8px;
  background: var(--grunnur);
  color: var(--blek);
  font: 700 0.95rem/1.2 var(--tolfr-leturgerd);
  text-align: center;
  cursor: pointer;
}

.sia-hnappur:hover:not(:disabled) { border-color: var(--gras); }

.sia-hnappur[aria-pressed="true"] {
  background: var(--gras);
  border-color: var(--gras);
  color: var(--gras-blek);
}

.sia-hnappur:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--daemt);
  cursor: not-allowed;
}

.sia-bil {
  display: block;
  margin-top: 0.15rem;
  font-weight: 400;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* Tvöfaldi sleðinn: tveir sleðar ofan á sömu braut. Endarnir eru jafnréttháir
   (bilið er alltaf frá þeim lægri til þess hærri), svo hvorugur þarf að
   "ýta" hinum. Aðeins hnapparnir taka við snertingu, ekki brautin. */
.sia-sledi {
  --a: 0%;
  --b: 100%;
  position: relative;
  height: 44px;
  margin: 1rem 14px 0;
}

.sia-sledi::before,
.sia-sledi::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
}

.sia-sledi::before { left: 0; right: 0; background: var(--lina); }
.sia-sledi::after { left: var(--a); right: calc(100% - var(--b)); background: var(--gras); }

.sia-endi {
  position: absolute;
  inset: 0 -14px;
  width: calc(100% + 28px);
  height: 44px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 1;
}

.sia-endi::-webkit-slider-runnable-track { background: none; height: 44px; }
.sia-endi::-moz-range-track { background: none; }

.sia-endi::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 28px;
  height: 28px;
  margin-top: 8px;
  border-radius: 50%;
  border: 3px solid var(--flotur);
  background: var(--gras);
  box-shadow: 0 1px 4px rgba(18, 41, 28, 0.35);
  cursor: grab;
}

.sia-endi::-moz-range-thumb {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--flotur);
  background: var(--gras);
  box-shadow: 0 1px 4px rgba(18, 41, 28, 0.35);
  cursor: grab;
}

.sia-endi:focus-visible { outline: none; }
.sia-endi:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--gras); outline-offset: 2px; }
.sia-endi:focus-visible::-moz-range-thumb { outline: 3px solid var(--gras); outline-offset: 2px; }

/* --- Spjöldin -------------------------------------------------------------------- */

.tolfr .tolfr-spjald {
  margin-top: 1.25rem;
  padding: 1.25rem 1.25rem 0.75rem;
  background: var(--flotur);
  border: 1px solid var(--lina);
  border-radius: var(--horn-spjald);
  box-shadow: var(--skuggi);
  transition: opacity 0.2s;
}

@media (max-width: 30rem) {
  .tolfr .tolfr-spjald { padding: 1.125rem 1rem 0.625rem; }
}

.tolfr-spjald h2 { font-size: 1.375rem; }

.tolfr-lysing { margin: 0.35rem 0 1rem; color: var(--daemt); font-size: 0.95rem; line-height: 1.45; }

.tolfr-hledst .tolfr-spjald { opacity: 0.5; }

.tolfr-graf:empty { display: none; }
.tolfr-graf { margin-bottom: 0.5rem; }

.tolfr-tomt-texti { margin: 0 0 0.75rem; }

.tolfr details > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  list-style: none;
  color: var(--gras);
  font: 700 0.92rem/1.2 var(--tolfr-leturgerd);
  cursor: pointer;
}

.tolfr details > summary::-webkit-details-marker { display: none; }

.tolfr details > summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.tolfr details[open] > summary::before { transform: rotate(45deg); }

.tolfr-tolur:not([open]) .tolfr-fela,
.tolfr-tolur[open] .tolfr-syna { display: none; }

.tolfr-skyring p { margin: 0 0 0.75rem; color: var(--daemt); font-size: 0.95rem; }
.tolfr-tolur[hidden] { display: none; }
.tolfr-tafla { padding-bottom: 0.75rem; }

.tolfr-upplysing { min-height: 1.5em; margin: 0.6rem 0 0.25rem; font-size: 0.95rem; line-height: 1.45; }

.tolfr-skyringarlina { margin: 0.4rem 0 0; color: var(--daemt); font-size: 0.9rem; }

.tolfr-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: 0.75rem;
  font: 700 0.9rem/1.2 var(--tolfr-leturgerd);
}

.tolfr-val select {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--lina);
  border-radius: 8px;
  background: var(--grunnur);
  color: var(--blek);
  font: 400 16px/1.2 var(--letur-vidmot);
}

.tolfr-rofi {
  display: inline-flex;
  margin-top: 0.75rem;
  border: 1.5px solid var(--gras);
  border-radius: 8px;
  overflow: hidden;
}

.tolfr-rofi button {
  min-height: 44px;
  min-width: 6rem;
  padding: 0 1rem;
  border: 0;
  background: var(--flotur);
  color: var(--gras);
  font: 700 0.95rem/1.2 var(--tolfr-leturgerd);
  cursor: pointer;
}

.tolfr-rofi button + button { border-left: 1.5px solid var(--gras); }
.tolfr-rofi button[aria-pressed="true"] { background: var(--gras); color: var(--gras-blek); }

.tolfr-skyringar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 0;
  color: var(--daemt);
  font-size: 0.875rem;
}

.tolfr-takn {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border-radius: 3px;
  vertical-align: -0.1em;
}

/* --- Liðsheiti og merki ------------------------------------------------------------ */

.tolfr .tolfr-merki {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.4rem;
  border-radius: 4px;
  object-fit: contain;
  vertical-align: -0.3em;
}

.tolfr .tolfr-merki--stafur {
  background: var(--randi);
  color: var(--gras);
  font: 800 0.72rem/1.25rem var(--tolfr-graf-letur);
  text-align: center;
}

.tolfr-graf a,
.tolfr .lidsnafn a { color: var(--blek); text-decoration: none; }
.tolfr-graf a:hover,
.tolfr .lidsnafn a:hover { text-decoration: underline; }

/* --- Töflurnar ------------------------------------------------------------------------ */

.tolfr table { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.tolfr td, .tolfr th { padding: 0.45rem 0.55rem; }

/* Fyrsti dálkurinn var hástafir í grænu letri á öllum síðum miðilsins. Hér
   eru liðsheitin venjulegur texti með merki, svo þau taki minna pláss. */
.tolfr td:first-child,
.tolfr th:first-child {
  font-family: inherit;
  font-weight: 400;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.tolfr td:first-child { color: var(--blek); }
.tolfr td.lidsnafn { min-width: 8rem; }

[data-tafla="innbyrdis"] td:not(.lidsnafn),
[data-tafla="saetaferd"] td:not(.lidsnafn) { white-space: nowrap; text-align: center; }

/* --- Gröfin: sameiginlegt --------------------------------------------------------------- */

.tolfr svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.tolfr svg text { font-family: var(--tolfr-graf-letur); }

.tolfr-grind { stroke: var(--lina); stroke-width: 1; }
.tolfr-as { fill: var(--daemt); font-size: 11px; }
.tolfr-as--nu { fill: var(--blek); font-weight: 800; }
.tolfr-asheiti { fill: var(--daemt); font-size: 12px; font-weight: 700; }

.tolfr-hringrond { fill: var(--flotur); stroke: var(--lina); stroke-width: 1.5; }
.tolfr-valid .tolfr-hringrond { stroke: var(--gull); stroke-width: 3; }
g[data-lid] { cursor: pointer; }
g[data-lid]:focus-visible .tolfr-hringrond { stroke: var(--blek); stroke-width: 3; }
.tolfr-stafur { fill: var(--gras); font-size: 11px; font-weight: 800; }

/* --- 1. Sætaferðin ----------------------------------------------------------------------- */

.sf-lina {
  fill: none;
  stroke: var(--tolfr-dauft);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sf-lina.sf-valin { stroke: var(--gull); stroke-width: 3.5; }
.sf-dauf { opacity: 0.4; }
.sf-snerting { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.sf-punktur { fill: var(--tolfr-dauft); }
.sf-punktur.sf-valin { fill: var(--gull); }
.sf-nu { stroke: var(--daemt); stroke-width: 1; stroke-dasharray: 3 3; }

.sf-stjorn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

.sf-sledi { flex: 1 1 8rem; min-width: 0; height: 44px; accent-color: var(--gras); }
.sf-umf { font: 700 0.9rem/1.2 var(--tolfr-leturgerd); color: var(--daemt); }

/* --- 2. Heppnin ---------------------------------------------------------------------------- */

.hp-ska { stroke: var(--daemt); stroke-width: 1.5; stroke-dasharray: 5 4; }

.hp-svaedi {
  fill: var(--daemt);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- 3. Sigurgöngur ------------------------------------------------------------------------- */

.sg-as {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.4rem;
  color: var(--daemt);
  font-size: 0.875rem;
}

.sg-listi { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.sg-nafn { margin: 0 0 0.3rem; font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }

.sg-strimill {
  display: grid;
  grid-template-columns: repeat(var(--fjoldi), minmax(0, 1fr));
  gap: 2px;
  height: 26px;
}

.sg-reitur { position: relative; overflow: hidden; border-radius: 2px; background: var(--randi); }
.sg-autt { background: transparent; box-shadow: inset 0 0 0 1px var(--lina); }

/* Staðan segir úrslitin, líka án litar: sigur er kubbur í efri helmingi,
   tap í neðri helmingi og jafntefli strik á miðjunni. */
.sg-kubbur { position: absolute; left: 0; right: 0; background: var(--tolfr-dauft); }
.sg-s .sg-kubbur { top: 0; height: 50%; }
.sg-t .sg-kubbur { bottom: 0; height: 50%; }
.sg-j .sg-kubbur { top: calc(50% - 2px); height: 4px; }
.sg-ganga .sg-kubbur { background: var(--jakvaett); }
.sg-hrina .sg-kubbur { background: var(--neikvaett); }

/* Með nógu breiðum reitum: heill litaður reitur með bókstaf. */
.sg-stafur { display: none; }
.sg--stafir .sg-kubbur { top: 0; bottom: 0; height: auto; }
.sg--stafir .sg-j .sg-kubbur { background: transparent; }
.sg--stafir .sg-stafur {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blek);
  font: 800 0.72rem/1 var(--tolfr-graf-letur);
}
.sg--stafir .sg-ganga .sg-stafur,
.sg--stafir .sg-hrina .sg-stafur { color: #fff; }

.sg-texti { margin: 0.3rem 0 0; color: var(--daemt); font-size: 0.875rem; line-height: 1.4; }
.sg-rod { display: block; }
.sg-merking { color: var(--blek); font-weight: 700; }
.sg-merking::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.3rem;
  border-radius: 2px;
  vertical-align: -0.05em;
}
.sg-merking--ganga::before { background: var(--jakvaett); }
.sg-merking--hrina::before { background: var(--neikvaett); }

/* --- 4. Innbyrðis ---------------------------------------------------------------------------- */

.ib-grind {
  display: grid;
  grid-template-columns: repeat(calc(var(--fjoldi) + 1), minmax(0, 1fr));
  gap: 2px;
}

.ib-horn,
.ib-haus,
.ib-rodhaus,
.ib-reitur { aspect-ratio: 1; min-width: 0; }

.ib-haus,
.ib-rodhaus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
}

.ib-rodhaus { cursor: pointer; }
.ib-rodhaus.tolfr-valid { box-shadow: inset 0 0 0 2px var(--gull); }

.tolfr .ib-haus .tolfr-merki,
.tolfr .ib-rodhaus .tolfr-merki { width: 82%; height: 82%; margin: 0; vertical-align: 0; }
.tolfr .ib-haus .tolfr-merki--stafur,
.tolfr .ib-rodhaus .tolfr-merki--stafur { display: flex; align-items: center; justify-content: center; line-height: 1; }

.ib-reitur {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: #fff;
  font: 800 clamp(0.6rem, 2.7vw, 0.85rem)/1 var(--tolfr-graf-letur);
}

button.ib-reitur { cursor: pointer; }
.ib-plus { background: var(--jakvaett); }
.ib-minus { background: var(--neikvaett); }
.ib-jafnt { background: var(--tolfr-jafnt); color: var(--blek); }
.ib-ekki { background: transparent; box-shadow: inset 0 0 0 1px var(--lina); }
.ib-sjalf { background: var(--randi); }
.ib-reitur.tolfr-valid { outline: 3px solid var(--gull); outline-offset: -2px; }

.ib-listi-haus { margin: 1rem 0 0.5rem; font-weight: 600; overflow-wrap: anywhere; }
.ib-motherjar { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ib-mot { padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--grunnur); border: 1px solid var(--lina); }
.ib-mot.tolfr-valid { border-color: var(--gull); box-shadow: inset 3px 0 0 var(--gull); }
.ib-mot-haus { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0; font-weight: 600; }
.ib-mot-haus a { min-width: 0; overflow-wrap: anywhere; }
.ib-samtals { flex: none; font-variant-numeric: tabular-nums; }
.ib-mot ul { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }

/* --- 5., 7. og 8. Súlurnar ----------------------------------------------------------------- */

.sulur { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; }

.sula-haus {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  line-height: 1.3;
}

.sula-nafn { min-width: 0; overflow-wrap: anywhere; }
.sula-gildi { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.sula-auki { margin: 0.25rem 0 0; color: var(--daemt); font-size: 0.875rem; }

.sula-braut { height: 10px; overflow: hidden; border-radius: 4px; background: var(--randi); }
.sula { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--gras); }

.tvi-as {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
  color: var(--daemt);
  font-size: 0.875rem;
}

.tvi-as span:last-child { text-align: right; }

.tvi-braut { position: relative; height: 10px; border-radius: 4px; background: var(--randi); }
.tvi-braut::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(50% - 1px);
  width: 2px;
  background: var(--daemt);
}

.tvi-sula { position: absolute; top: 0; bottom: 0; }
.tvi-plus { background: var(--neikvaett); border-radius: 0 4px 4px 0; }
.tvi-minus { background: var(--jakvaett); border-radius: 4px 0 0 4px; }

.stafla { display: flex; gap: 2px; height: 12px; }
.stafla > span { flex-basis: 0; }
.stafla-yfir { background: var(--jakvaett); }
.stafla-a { background: var(--tolfr-jafnt); }
.stafla-undir { background: var(--neikvaett); }
.stafla > span:first-child { border-radius: 4px 0 0 4px; }
.stafla > span:last-child { border-radius: 0 4px 4px 0; }
.stafla > span:only-child { border-radius: 4px; }
.tolfr-takn.stafla-yfir,
.tolfr-takn.stafla-a,
.tolfr-takn.stafla-undir { border-radius: 3px; }

/* --- 6. Slögin ---------------------------------------------------------------------------------- */

.slog { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.slag {
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--gull);
  border-radius: 0 8px 8px 0;
  background: var(--grunnur);
}

.slag-umf {
  margin: 0;
  color: var(--daemt);
  font: 700 0.875rem/1.3 var(--tolfr-leturgerd);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.slag-texti { margin: 0.15rem 0; line-height: 1.45; overflow-wrap: anywhere; }
.slag-texti strong { font-variant-numeric: tabular-nums; }
.slag-ord { color: var(--daemt); }
.slag-auki { margin: 0; color: var(--daemt); font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  .tolfr *,
  .tolfr *::before { transition: none !important; }
}