/* Stiler for de interaktive figurene.
 *
 * EGEN FIL, ikke site.css, og grunnen er målt: design/build.py:71 leser static/site.css ORDRETT
 * inn i designpakkens updn-<v>.css, som begge Flask-appene vendrer inn. Da disse reglene lå i
 * site.css, meldte `design/build.py --check` DRIFTED på de vendrede kopiene og CI falt — og
 * hadde jeg i stedet synkronisert pakken, ville srs og reader fått 21 regler for figurer de
 * ikke har.
 *
 * Fila lastes bare på sider som faktisk har en widget, sammen med interaktiv.js
 * (se build/assemble.py). Uten JavaScript brukes ingen av reglene, og den statiske figuren
 * fra boka står igjen — som er hele poenget med at markup-en er progressiv.
 */
.interaktiv { margin-block: 0; }

.interaktiv-figur {
  inline-size: 100%;
  block-size: auto;
  touch-action: none;          /* ellers scroller telefonen i stedet for å dra objektet */
}

.interaktiv-figur .akse {
  stroke: var(--tekst); stroke-width: 1; stroke-dasharray: 5 4; opacity: .55;
}
.interaktiv-figur .linse   { stroke: var(--tekst); stroke-width: 2.5; }
.interaktiv-figur .straale { stroke: var(--tekst); stroke-width: 1.1; opacity: .8; }
.interaktiv-figur .forlengelse {
  stroke: var(--tekst); stroke-width: 1; stroke-dasharray: 4 4; opacity: .45;
}
.interaktiv-figur .brennpunkt { fill: var(--tekst); }
.interaktiv-figur .merke { fill: var(--tekst); font-size: 13px; text-anchor: middle; }

.interaktiv-figur .objekt, .interaktiv-figur .bilde { stroke: var(--lenke); stroke-width: 2.5; }
.interaktiv-figur .objekt-spiss, .interaktiv-figur .bilde-spiss { fill: var(--lenke); }
.interaktiv-figur .bilde-virtuelt { opacity: .55; }
.interaktiv-figur line.bilde-virtuelt { stroke-dasharray: 5 4; }

/* Gripepunktet skal se ut som noe man kan ta i, og vise at det har fokus. */
.interaktiv-figur .gripe {
  fill: var(--lenke); fill-opacity: .22;
  stroke: var(--lenke); stroke-width: 2;
  cursor: grab;
}
.interaktiv-figur .gripe:hover { fill-opacity: .38; }
.interaktiv-figur .gripe:focus-visible {
  outline: none;
  stroke-width: 3;
  fill-opacity: .45;
}

.interaktiv-avlesning {
  font-variant-numeric: tabular-nums;   /* tallene skal ikke hoppe sidelengs mens man drar */
  margin-block: .5rem .25rem;
  text-align: center;
}
.interaktiv-hjelp {
  font-size: .85em; opacity: .75; text-align: center; margin-block: 0;
}

@media (prefers-reduced-motion: reduce) {
  .interaktiv-figur * { transition: none !important; }
}

/* Hele objektpilen er gripeflate, ikke bare sirkelen — musa er den viktigste veien inn,
   og en 2,5 px strek er et dårlig mål å treffe. */
.interaktiv-figur .gripeflate { cursor: grab; }
.interaktiv-figur .gripeflate:hover { stroke-width: 3.5; }

/* Kontrollrad: skyveknapper og tallfelt under figuren. */
.interaktiv-kontroller {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  justify-content: center; align-items: center;
  margin-block: .6rem .2rem;
}
.interaktiv-kontroll { display: flex; align-items: center; gap: .5rem; font-size: .9em; }
.interaktiv-kontroll label { white-space: nowrap; }
.interaktiv-kontroll input[type="range"] { inline-size: 11rem; accent-color: var(--lenke); }
.interaktiv-kontroll input[type="number"] { inline-size: 5.5rem; }
.interaktiv-kontroll input[type="checkbox"] { accent-color: var(--lenke); }
.interaktiv-verdi { font-variant-numeric: tabular-nums; min-inline-size: 2.6em; }

/* Valgknapper (plan / konkav / konveks og liknende små, navngitte utvalg). */
.interaktiv-valg-tittel { white-space: nowrap; }
.interaktiv-knapp {
  font: inherit; font-size: .9em; padding: .15em .7em;
  border: 1px solid var(--kant, currentColor); border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
}
.interaktiv-knapp:hover { border-color: var(--lenke); }
.interaktiv-knapp.er-valgt {
  border-color: var(--lenke); background: var(--lenke); color: var(--bakgrunn, #fff);
}

/* Forbeholdet fra den trykte underteksten. Det følger med inn i widgeten: figuren blir ikke
   mer nøyaktig av å bli interaktiv, og «skjematisk, ikke i målestokk» gjelder fortsatt. */
.interaktiv-forbehold {
  font-size: .8em; opacity: .65; text-align: center; margin-block: .35rem 0;
}

/* ── grafer ────────────────────────────────────────────────────────────────
   Aksene skal tre tilbake for kurven: studenten skal lese formen, ikke rutenettet. */
.interaktiv-figur .akselinje { stroke: var(--tekst); stroke-width: 1.2; opacity: .7; }
.interaktiv-figur .aksemerke { stroke: var(--tekst); stroke-width: 1; opacity: .7; }
.interaktiv-figur .rutenett  { stroke: var(--tekst); stroke-width: .5; opacity: .16; }
.interaktiv-figur .aksetall  { fill: var(--tekst); font-size: 12px; text-anchor: middle; opacity: .8; }
.interaktiv-figur .aksetall-y { text-anchor: end; }
.interaktiv-figur .aksenavn  { fill: var(--tekst); font-size: 13px; font-style: italic; opacity: .9; }

.interaktiv-figur .kurve {
  fill: none; stroke: var(--lenke); stroke-width: 2.2; stroke-linejoin: round;
}
/* En andrekurve som sammenlignes med den første (før/etter, teori/måling). */
.interaktiv-figur .kurve-to {
  fill: none; stroke: var(--tekst); stroke-width: 1.6; opacity: .55; stroke-linejoin: round;
}
/* Referansekurven figuren startet i: den blir stående svakt mens leseren drar, slik at
   endringen er synlig som en endring og ikke bare som en ny tilstand. */
.interaktiv-figur .kurve-spor {
  fill: none; stroke: var(--tekst); stroke-width: 1.2; opacity: .28;
  stroke-dasharray: 4 4; stroke-linejoin: round;
}
.interaktiv-figur .flate { fill: var(--lenke); fill-opacity: .16; stroke: none; }
.interaktiv-figur .flate-to { fill: var(--tekst); fill-opacity: .10; stroke: none; }
.interaktiv-figur .soyle {
  fill: var(--lenke); fill-opacity: .22; stroke: var(--lenke); stroke-width: 1;
}
.interaktiv-figur .hjelpelinje {
  stroke: var(--tekst); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5;
}
.interaktiv-figur .punkt { fill: var(--lenke); }
.interaktiv-figur .punkt-aapen { fill: var(--bakgrunn, #fff); stroke: var(--lenke); stroke-width: 2; }

/* Et sted i figuren der noe kvalitativt skifter (PPV krysser 50 %, vergensen skifter
   fortegn, oppløsningen når Rayleigh-grensen). Skal skille seg fra en hjelpelinje. */
.interaktiv-figur .terskel {
  stroke: var(--lenke); stroke-width: 1.4; stroke-dasharray: 7 4; opacity: .8;
}
.interaktiv-figur .merke-uthevet { fill: var(--lenke); font-size: 13px; text-anchor: middle; }

/* En merkelapp som ber om annen justering, skal få den.
 *
 * `.merke`, `.aksetall` og `.merke-uthevet` setter alle text-anchor, og en CSS-regel slår et
 * presentasjonsattributt uansett hvor sent attributtet settes. setAttribute("text-anchor", "end")
 * inne i en widget gjorde derfor ingenting: lappen ble midtstilt likevel, og lange tallkolonner
 * og kantmerker rant ut av rammen mens alle tallene var riktige. Fem av de 42 figurene gikk i den
 * fella hver for seg.
 *
 * Disse tre reglene har én klasse og ett attributt (0,2,1) mot klassereglenes (0,2,0), og vinner
 * derfor -- men bare når attributtet faktisk er satt. Det er ett sted å rette, i stedet for 44
 * kall i 24 filer, og det gjør w.tekst(..., anker) sant. */
.interaktiv-figur text[text-anchor="start"]  { text-anchor: start; }
.interaktiv-figur text[text-anchor="middle"] { text-anchor: middle; }
.interaktiv-figur text[text-anchor="end"]    { text-anchor: end; }