/* side-valutakalkulator.css — /verktoy/valutakalkulator.

   LYST, IKKE MØRKT. Her sto en marineblå blokk med hvite felt i, og den
   var både mørkere og travlere enn resten av siden. Nå er det to lyse
   felt med tynne streker, på samme flate som brødteksten.

   TRE TING PÅ FLATEN: beløpet du skriver, svaret du får, og hvilke to
   valutaer det gjelder. Alt annet er tatt bort — seks hurtigknapper og en
   rullegardin som viste hele valutanavnet var fire elementer for mye.

   FARGER KOMMER FRA PALETTEN. Ingen verdi skrives inn her; palettvakt
   leser publisert HTML og stopper bygget på farger utenfor :root.
   Flaggene er unntaket, og de er derfor egne filer under /bilder/flagg/
   og ikke inline SVG. Se skript/flagg.mjs. */

/* ---------- skallet ----------
   Skjemaet vises ikke før valutakalkulator.js har satt `vk--klar`. Uten
   JavaScript er hvert felt i det dødt, og et dødt skjema er verre enn
   ingen: leseren prøver, ingenting skjer, og hun tror siden er ødelagt.
   Da står kurstabellen igjen som hele svaret, slik <noscript> sier. */
.vk{display:none}
.vk.vk--klar{display:block;margin-block:1.75rem 2rem}

/* ---------- de to feltene ----------
   Byttepila står i sin egen kolonne mellom dem, ikke oppå. Da kan den
   ikke dekke et tall, og den flytter seg ikke når feltene endrer høyde. */
.vk-par{
  display:grid;
  /* minmax(0,1fr) og ikke 1fr. Med bare 1fr blir sporet minst like bredt
     som innholdet, og «1 093,25» er bredere enn «100» — da står de to
     feltene ulikt brede, og den ene siden av regnestykket ser viktigere
     ut enn den andre av en grunn som bare er tilfeldig. */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
  gap:0.75rem;
}
.vk-panel{
  display:flex;flex-direction:column;justify-content:center;gap:0.5rem;
  min-width:0;
  padding:1.4rem 1.4rem 1.5rem;
  background:var(--on-spruce);
  border:1px solid var(--rule);
  border-radius:6px;
}
/* SVARET SKAL VEIE MER. Egen flate, mørkere kant og et større tall enn
   det du skriver inn. Er de to like, leser flaten som et skjema med to
   felt, ikke som et regnestykke med en fasit. */
.vk-panel--svar{
  background:var(--wash);
  border-color:var(--rule-2);
}
.vk-panel:focus-within{
  border-color:var(--spruce-3);
  box-shadow:0 0 0 3px var(--wash);
}

.vk-etikett{
  font-size:var(--tekst-xs);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-variation-settings:"wdth" 96,"wght" 700;
}

/* Etiketten til venstre, valutaen til høyre. Tallet står under, med hele
   bredden for seg selv. */
.vk-topp{
  display:flex;align-items:center;justify-content:space-between;
  gap:0.75rem;min-width:0;
}

.vk-tall{
  flex:1 1 auto;min-width:0;width:100%;
  font:inherit;
  font-size:clamp(1.6rem,1.1rem + 2vw,2.25rem);
  line-height:1.15;
  /* Et tall skal aldri brytes. «1 093,25» delt over to linjer er ikke et
     tall lenger. Blir det for langt, krymper skriften i stedet — se
     .vk-tall--lang og valutakalkulator.js. */
  white-space:nowrap;
  font-variation-settings:"wdth" 96,"wght" 700;
  font-variant-numeric:tabular-nums;
  border:0;background:transparent;color:var(--ink);
  padding:0;
}
.vk-tall:focus{outline:none}

/* Svaret er et <output>, ikke et felt. Det skal ikke invitere til å
   skrives i, og det er større enn tallet du skrev. */
.vk-tall--svar{
  display:block;
  font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);
  color:var(--spruce);
  cursor:default;
}

/* To trinn ned for lange tall. 1 752 421,50 er tolv tegn, og ved full
   størrelse er det bredere enn panelet. Klassen settes i JavaScript, som
   er det eneste stedet som vet hvor mange tegn svaret faktisk fikk. */
.vk-tall--lang{font-size:clamp(1.3rem,0.95rem + 1.4vw,1.75rem)}
.vk-tall--svar.vk-tall--lang{font-size:clamp(1.4rem,1rem + 1.5vw,1.9rem)}

/* ---------- valutavelgeren ----------
   En ekte <select>, gjennomsiktig, lagt oppå flagget og koden vi tegner
   selv. Tastatur, skjermleser og mobilens egen valgliste virker som før.

   Grunnen til at den ikke bare får stå synlig: da viser den hele navnet,
   «amerikanske dollar», og feltet skifter bredde når du velger. Da hopper
   hele regnestykket. Navnene står i lista når den åpnes. */
.vk-valuta{
  position:relative;
  display:flex;align-items:center;gap:0.45rem;
  flex:0 0 auto;
  padding:0.4rem 0.6rem;
  border:1px solid var(--rule-2);
  border-radius:999px;
  background:var(--on-spruce);
  white-space:nowrap;
}
.vk-panel--svar .vk-valuta{background:var(--on-spruce)}
.vk-kode{
  font-size:var(--tekst-base);
  font-variation-settings:"wdth" 96,"wght" 700;
  letter-spacing:0.02em;
  color:var(--ink);
}
.vk-pil{color:var(--muted);flex:0 0 auto}
.vk-select{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;cursor:pointer;
  font:inherit;
}
.vk-valuta:focus-within{
  outline:2px solid var(--rust);outline-offset:2px;
}
/* Det norske feltet er ikke en velger. Ingen pil, ingen hover. */
.vk-valuta--fast{cursor:default}

.vk-flagg{
  display:block;width:24px;height:16px;
  border-radius:2px;
  /* Hvite flagg mot lys flate forsvinner i kanten. Japan er hvitt med en
     rød sirkel, og uten dette står den sirkelen og flyter. */
  box-shadow:0 0 0 1px var(--rule-2);
  flex:0 0 auto;
}

/* ---------- byttepila ---------- */
.vk-midt{display:flex;align-items:center;justify-content:center}
.vk-bytt{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:2.75rem;block-size:2.75rem;
  border:1px solid var(--rule-2);
  border-radius:999px;
  background:var(--on-spruce);
  color:var(--spruce-2);
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.vk-bytt:hover{background:var(--spruce);color:var(--on-spruce);border-color:var(--spruce)}
.vk-bytt:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* ---------- kurslinja og forbeholdet ---------- */
.vk-kurs{
  margin:1rem 0 0;
  font-size:var(--tekst-sm);
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
  font-variation-settings:"wdth" 96,"wght" 600;
}
/* Forbeholdet står PÅ SKJEMAET, ikke bare i teksten lenger nede. Leseren
   som kommer for å regne om et beløp leser svaret og ingenting annet, og
   det er nettopp hun som trenger å vite at banken tar mer. */
.vk-forbehold{
  margin:0.35rem 0 0;
  font-size:var(--tekst-sm);
  color:var(--muted);
  max-width:62ch;
}
.vk-uten-js{
  border-left:3px solid var(--rust);
  padding-left:1rem;margin-block:1.5rem;color:var(--ink-2);
}

/* ---------- smal skjerm ----------
   Under 34rem står feltene under hverandre og pila snur et kvart omdreining,
   slik at den peker samme vei som rekkefølgen den bytter om på. */
@media(max-width:34rem){
  .vk-par{grid-template-columns:1fr;gap:0.5rem}
  .vk-midt{padding-block:0.1rem}
  .vk-bytt svg{transform:rotate(90deg)}
  .vk-panel{padding:1rem 1rem 1.1rem}
}

/* ---------- kurstabellen ----------

   Fjorten rader som skal kunne leses raskt og sammenlignes mot en
   prisliste. Tre ting styrer utformingen:

   KODEN FØRST OG FETEST. Det er den som står på kvitteringen og i
   bankens prisliste. Navnet og landet står under, i mindre og lysere
   skrift, for den som ikke kjenner koden.

   TALLENE HØYRESTILT MED TABULÆRSIFRE. Da står desimalene under
   hverandre, og fjorten kurser kan sammenlignes ved å se nedover én
   kolonne i stedet for å lese hver rad.

   FLAGGET ER STØRRE ENN I SKJEMAET. Der er det en bekreftelse på et valg
   du nettopp gjorde; her er det det du leter etter. */
.brod table.kurstabell{min-width:26rem}

.brod table.kurstabell tbody th{vertical-align:middle;padding-block:0.6rem}
.brod table.kurstabell td{vertical-align:middle;padding-block:0.6rem}

.k-valuta{display:flex;align-items:center;gap:0.7rem;min-width:0}
.k-tekst{display:flex;flex-direction:column;gap:0.05rem;min-width:0}
.k-kode{
  font-size:var(--tekst-base);
  font-variation-settings:"wdth" 96,"wght" 700;
  letter-spacing:0.02em;color:var(--ink);line-height:1.2;
}
.k-navn{
  font-size:var(--tekst-xs);color:var(--muted);
  font-variation-settings:"wdth" 94,"wght" 500;line-height:1.3;
}

.vk-flagg--tabell{
  width:34px;height:23px;border-radius:3px;
  box-shadow:0 0 0 1px var(--rule-2);
}

.brod table.kurstabell .tall{
  text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:var(--tekst-base);
  font-variation-settings:"wdth" 96,"wght" 640;
  color:var(--ink);
}
.brod table.kurstabell thead th:last-child{text-align:right}
.brod table.kurstabell .enhet{
  color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Enheten på kursen. Mindre og lysere enn tallet — den er en presisering,
   ikke en verdi, og tallet skal fortsatt være det øyet finner når det går
   nedover kolonnen. */
.k-enhet{
  font-size:var(--tekst-xs);
  color:var(--muted);
  font-variation-settings:"wdth" 94,"wght" 600;
  letter-spacing:0.02em;
}

/* Klikkbare rader, men bare når JavaScript har slått dem på. Uten det er
   pekefingeren et løfte om noe som ikke skjer. Klassen settes i
   valutakalkulator.js, sammen med hintet i caption. */
.kurstabell-hint{display:none}
.kurstabell--klikk .kurstabell-hint{display:inline}
.kurstabell--klikk tbody tr{cursor:pointer}
.kurstabell--klikk tbody tr:hover{background:var(--wash)}
.kurstabell--klikk tbody tr:hover .k-kode{color:var(--green)}
/* Raden som allerede står i kalkulatoren. Merket med en strek i kanten og
   ikke med farge alene. */
.kurstabell--klikk tbody tr[aria-current="true"]{
  background:var(--wash);
  box-shadow:inset 3px 0 0 var(--rust);
}

/* Under 30rem er «I norske kroner» og «Enhet» to kolonner for mye ved
   siden av navnet. Enheten flytter ned under kursen, der den hører
   hjemme uansett — den forteller hva kursen gjelder for. */
@media(max-width:30rem){
  .brod table.kurstabell{min-width:0}
  .brod table.kurstabell .enhet{display:none}
  /* Alt krymper litt: flagget, luften i cellene og skriften i navnet.
     Uten dette er tabellen 336 px bred i en ramme på 316, og fjorten
     rader ruller sidelengs på en telefon som ikke er stor. Målt på
     360 px, som er den smaleste vi regner med. */
  .brod table.kurstabell th,
  .brod table.kurstabell td{padding-inline:0.6rem}
  .vk-flagg--tabell{width:26px;height:18px}
  .k-valuta{gap:0.5rem}
  .k-navn{font-size:calc(var(--tekst-xs) * 0.94)}
  .brod table.kurstabell .tall::after{
    content:"per " attr(data-enhet);
    display:block;
    font-size:var(--tekst-xs);color:var(--muted);
    font-variation-settings:"wdth" 94,"wght" 500;
  }
}

/* ============================================================
   RULLEGARDIN MED FLAGG — appearance: base-select

   Alt under er en ren forbedring, lagt bak @supports. Faller den bort,
   står grensesnittet igjen nøyaktig slik det var: vår egen pille med
   flagg og kode, og en gjennomsiktig <select> oppå. Det er derfor
   fallbacken ikke trenger å testes som en egen variant — den ER dagens.

   Under base-select trenger vi ikke det hacket. <selectedcontent> speiler
   innholdet i den valgte option-en, flagget iberegnet, så selecten kan
   tegne seg selv. Da skjules vår egen pille, og selecten overtar formen.

   HVORFOR pointer:fine. På en telefon bytter base-select ut systemets
   egen valgliste med en popover vi tegner. Systemlista er en kjent
   størrelse, tegnet av operativsystemet, med treffområder tilpasset
   fingeren. Popoveren er ikke målt på en ekte telefon — bare i et smalt
   vindu på en PC, som ikke er det samme. Da skal den ikke inn der.

   Å løfte den sperren krever en måling på ekte enhet, ikke et smalere
   vindu. Til da får telefoner det de har i dag, og det virker.
   ============================================================ */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {

    /* Vår egen pille trer til side. Elementene blir stående i DOM-en og
       oppdateres fortsatt av JavaScript — det koster ingenting, og et
       skjult element som er riktig er bedre enn ett som er utdatert den
       dagen noen fjerner denne regelen. */
    /* BARE VELGEREN. Sto det `.vk-valuta` her, traff det også den norske
       pilla i svarpanelet, og den ble 0 × 0 — et svar uten enhet. Den
       gruppa har ingen select som kan tegne seg selv. */
    .vk-valuta--velger > .vk-flagg,
    .vk-valuta--velger > .vk-kode,
    .vk-valuta--velger > .vk-pil { display: none }
    .vk-valuta--velger {
      padding: 0; border: 0; background: transparent; border-radius: 0;
    }
    .vk-valuta--velger:focus-within { outline: 0 }

    /* Selecten tar over formen pillen hadde. */
    .vk-select {
      appearance: base-select;
      position: static; opacity: 1; inset: auto;
      width: auto; height: auto;
      display: flex; align-items: center; gap: 0.45rem;
      padding: 0.4rem 0.6rem;
      border: 1px solid var(--rule-2);
      border-radius: 999px;
      background: var(--on-spruce);
      color: var(--ink);
      font: inherit;
      font-size: var(--tekst-base);
      font-variation-settings: "wdth" 96, "wght" 700;
      letter-spacing: 0.02em;
      cursor: pointer;
    }
    .vk-select:hover { border-color: var(--spruce-3) }
    .vk-select:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px }

    /* I knappen står bare flagget og koden, som før. Navnet og
       skilletegnet hører til lista, ikke til det valgte. */
    .vk-select selectedcontent { display: flex; align-items: center; gap: 0.45rem }
    .vk-select selectedcontent .o-skille,
    .vk-select selectedcontent .o-navn { display: none }

    .o-flagg {
      display: block; width: 24px; height: 16px;
      border-radius: 2px;
      box-shadow: 0 0 0 1px var(--rule-2);
      flex: 0 0 auto;
    }

    /* Pila. Chrome tegner den som ::picker-icon under base-select, og den
       skal snu når lista er åpen — ellers er det ingenting som skiller
       åpen fra lukket når popoveren legger seg under. */
    .vk-select::picker-icon {
      color: var(--muted);
      transition: transform 0.15s;
    }
    .vk-select:open::picker-icon { transform: rotate(180deg) }
    /* Den globale reduced-motion-regelen i pengeguide.css treffer
       `*,*::before,*::after`, og ::picker-icon er ingen av delene. */
    @media (prefers-reduced-motion: reduce) {
      .vk-select::picker-icon { transition: none }
    }

    /* ---------- selve lista ---------- */
    .vk-select::picker(select) {
      appearance: base-select;
      border: 1px solid var(--rule-2);
      border-radius: 8px;
      background: var(--on-spruce);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
      padding: 0.3rem;
      margin-block-start: 0.35rem;
      max-height: min(60vh, 26rem);
      overflow-y: auto;
      /* Lista er bredere enn knappen. Knappen viser tre tegn, lista viser
         «amerikanske dollar», og en liste som er like smal som knappen
         ville brukket hvert eneste navn. */
      min-width: 15rem;
    }

    .vk-select option {
      display: flex; align-items: center; gap: 0.6rem;
      padding: 0.5rem 0.6rem;
      min-block-size: 2.75rem;
      border-radius: 5px;
      font-size: var(--tekst-sm);
      font-variation-settings: "wdth" 96, "wght" 500;
      color: var(--ink);
    }
    .vk-select option .o-kode {
      font-variation-settings: "wdth" 96, "wght" 700;
      letter-spacing: 0.02em;
    }
    .vk-select option .o-skille { color: var(--rule-2) }
    .vk-select option .o-navn { color: var(--muted) }

    /* Hover og tastaturmarkør skal se like ut. Den som blar med pilene
       skal se det samme som den som drar musa nedover. */
    .vk-select option:hover,
    .vk-select option:focus { background: var(--wash); outline: 0 }
    .vk-select option:checked {
      background: var(--wash);
      box-shadow: inset 3px 0 0 var(--rust);
    }
    .vk-select option:checked .o-navn { color: var(--ink-2) }

    /* Haken base-select legger inn foran den valgte. Streken i kanten
       sier det samme, og haken flytter teksten en halv centimeter når
       den dukker opp. */
    .vk-select option::checkmark { display: none }
  }
}