.skb-wrap{
    /* Sjøkyndig-paletten fra Kartbordet 0.4: marineblå topp, sjøblå bakgrunn, magenta til oppgaver,
       messing til passeren og oransje til arbeidskantene. Tekstfargene holder WCAG 4,5:1. */
    --navy:#12395f; --navy2:#1f5c9e; --blaa:#1f5c9e; --sjo:#d8e9f7; --line:#d7dde4;
    --rod:#c0212f; --gronn:#067a47; --gul:#f4c542; --oransje:#b25807; --brass:#856a26;
    --paper:#fbfcf9; --panel:#f4f7fa; --panel2:#e9eff5; --ink:#12395f; --ink2:#4d6480; --ink3:#5c6e83;
    --magenta:#c21f73; --magenta-soft:#f8e4ee; --sea-soft:#e3eef8; --ok-soft:#e1f3ea; --bad-soft:#fbe5e7;
    --hvit:#ffffff; --topptekst:#d6e3f0; --toppkant:#4a6b90; --flagg-tekst:#ffffff;
    --ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --mono:ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  }
  @media (prefers-color-scheme:dark){ .skb-wrap:not([data-theme="light"]){
    --sjo:#0f1c28; --line:#2b3a4a; --paper:#151b22; --panel:#182430; --panel2:#1f2e3c; --ink:#e6eef7; --ink2:#a9bdd1; --ink3:#8fa4b8;
    --magenta-soft:#3a1a2b; --sea-soft:#1c2f44; --ok-soft:#16321f; --bad-soft:#3a1c1c; --hvit:#1e2a36;
    /* Aksentene var valgt for lyst papir og ble stående når bakgrunnen ble mørk: grønn
       tilbakemelding, messing avlesning og magenta etikett lå på 2,3–3,5:1 mot panelene —
       under WCAGs 4,5:1 for vanlig tekst. Dette er lesbar, aktiv tekst, ikke pynt. Lysere
       varianter i samme kulør for mørk visning. (KB096-05) */
    --rod:#ff8a90; --gronn:#4ddb96; --oransje:#ffad5c; --brass:#e0be6a; --magenta:#ff8ec2; --flagg-tekst:#151b22;
    /* --navy2 er både tekst og bakgrunn (hvit tekst på knapper ved hover). Som tekst i mørk visning
       ga den 2,0:1 mot --sea-soft: «Fasit:» og «Magnet på» var nesten borte. Tekst og kanter
       bruker nå --blaa, 7,4:1 her. Bakgrunnene beholder --navy2. (KB915-04) */
    --blaa:#8cc4ff; } }
  .skb-wrap[data-theme="dark"]{
    --sjo:#0f1c28; --line:#2b3a4a; --paper:#151b22; --panel:#182430; --panel2:#1f2e3c; --ink:#e6eef7; --ink2:#a9bdd1; --ink3:#8fa4b8;
    --magenta-soft:#3a1a2b; --sea-soft:#1c2f44; --ok-soft:#16321f; --bad-soft:#3a1c1c; --hvit:#1e2a36;
    /* Aksentene var valgt for lyst papir og ble stående når bakgrunnen ble mørk: grønn
       tilbakemelding, messing avlesning og magenta etikett lå på 2,3–3,5:1 mot panelene —
       under WCAGs 4,5:1 for vanlig tekst. Dette er lesbar, aktiv tekst, ikke pynt. Lysere
       varianter i samme kulør for mørk visning. (KB096-05) */
    --rod:#ff8a90; --gronn:#4ddb96; --oransje:#ffad5c; --brass:#e0be6a; --magenta:#ff8ec2; --flagg-tekst:#151b22;
    /* --navy2 er både tekst og bakgrunn (hvit tekst på knapper ved hover). Som tekst i mørk visning
       ga den 2,0:1 mot --sea-soft: «Fasit:» og «Magnet på» var nesten borte. Tekst og kanter
       bruker nå --blaa, 7,4:1 her. Bakgrunnene beholder --navy2. (KB915-04) */
    --blaa:#8cc4ff; }
  .skb-wrap *{box-sizing:border-box}
  /* Kartbordet er en blokk på siden, ikke en hel side. Høyden må være fast, ellers har
     ikke SVG-en noe å fylle. */
  .skb-wrap{margin:0;background:var(--sjo);color:var(--ink);font-family:var(--ui);
    font-size:14px;line-height:1.45;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .skb-wrap .app{display:flex;flex-direction:column;height:min(88vh,940px);min-height:520px}
  .skb-wrap .app button{font:inherit;color:inherit;cursor:pointer}
  .skb-wrap .app input{font:inherit;color:inherit}
  .skb-wrap .app button:focus-visible, .skb-wrap .app input:focus-visible{outline:2px solid var(--blaa);outline-offset:2px}
  .skb-wrap .app h2, .skb-wrap .app p, .skb-wrap .app ul, .skb-wrap .app ol{margin:0}

  /* ---------- Topplinja ---------- */
  .skb-wrap .topp{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 16px;background:var(--navy);color:#fff;flex:0 0 auto}
  .skb-wrap .navn{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
  .skb-wrap .navn b{font-weight:700;font-size:17px;letter-spacing:.01em}
  .skb-wrap .navn span{font-size:12px;color:#b9cbe0}
  .skb-wrap .fyll{flex:1}
  .skb-wrap .seg{display:inline-flex;border:1px solid var(--toppkant);border-radius:6px;overflow:hidden}
  .skb-wrap .seg button{background:transparent;color:var(--topptekst);border:0;padding:5px 12px;font-size:13px;font-weight:600}
  .skb-wrap .seg button+button{border-left:1px solid var(--toppkant)}
  .skb-wrap .seg button[aria-pressed="true"]{background:#fff;color:var(--navy)}
  .skb-wrap .zoom{display:inline-flex;align-items:center;gap:4px}
  .skb-wrap .zoom button{background:transparent;color:#fff;border:1px solid var(--toppkant);border-radius:6px;min-width:30px;height:30px;font-size:15px;line-height:1;padding:0 8px}
  .skb-wrap .zoom button:hover{background:var(--navy2)}
  .skb-wrap .zoom .liten{font-size:12px}
  .skb-wrap .zoom .nivaa{font-family:var(--mono);font-size:12px;color:#b9cbe0;min-width:44px;text-align:center}
  .skb-wrap .poeng{font-family:var(--mono);font-size:13px;color:var(--topptekst);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
  .skb-wrap .poeng b{color:var(--gul);font-weight:700}
  .skb-wrap .poeng button{background:transparent;color:var(--topptekst);border:1px solid var(--toppkant);border-radius:6px;height:26px;padding:0 7px;font-size:12px}
  .skb-wrap .poeng button:hover{background:var(--navy2)}

  /* ---------- Hoveddelen: bordet til venstre, panelet til høyre ---------- */
  .skb-wrap .hoved{display:flex;flex:1 1 auto;min-height:0}
  .skb-wrap .bord{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:var(--sjo)}
  /* Krediteringen av Kartverket står fast rett under kartet (0.9.19). Før sto den nederst i
     panelet, og på PC måtte man rulle panelet for å se den. Kartet og linja deler venstre søyle,
     og linja tar sin egen høyde: den dekker aldri kartet, og den er med i fullskjerm. På smal
     skjerm brytes linja over to rader i stedet for å gå ut over kanten. Lenkene brytes ikke. */
  .skb-wrap .kartsoyle{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0}
  .skb-wrap .kreditt{flex:0 0 auto;margin:0;padding:4px 14px 5px;border-top:1px solid var(--line);background:var(--panel);
    color:var(--ink2);font-size:12px;line-height:1.4;text-align:left;overflow-wrap:break-word}
  .skb-wrap .kreditt a{color:var(--blaa);white-space:nowrap}
  .skb-wrap svg.ark{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:grab;background:var(--paper);
    -webkit-user-select:none;user-select:none}
  .skb-wrap svg.ark.drar, .skb-wrap svg.ark.skb-drar{cursor:grabbing}
  .skb-wrap svg.ark.peker{cursor:crosshair}
  .skb-wrap svg.ark.skb-blyant{cursor:crosshair}
  .skb-wrap svg.ark.skb-visk{cursor:cell}
  .skb-wrap svg.ark [data-drag]{cursor:grab}
  .skb-wrap .status{position:absolute;left:14px;top:14px;background:var(--hvit);border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:12px;color:var(--ink2)}
  /* Når en fil ikke kom fram (visLastefeil): beskjeden tar plassen til hele bordet. Den står
     høyt i feltet, ikke midt i: bordet er nesten en skjerm høyt, og på en bærbar ville midten
     havnet under kanten av vinduet. */
  .skb-wrap .lastefeil{flex:1 1 auto;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:10px;padding:min(16vh,140px) 20px 32px;text-align:center;background:var(--sjo);color:var(--ink)}
  .skb-wrap .lastefeil p{margin:0;max-width:34em;color:var(--ink)}
  .skb-wrap .lastefeil .h{font-size:17px;font-weight:600}
  .skb-wrap .lastefeil .liten{font-family:var(--mono);font-size:12px;color:var(--ink2)}
  .skb-wrap .toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:rgba(18,57,95,.94);color:#fff;padding:8px 14px;border-radius:10px;font-size:13px;
    box-shadow:0 6px 20px rgba(0,0,0,.2);opacity:0;transition:opacity .25s;pointer-events:none;z-index:5;max-width:92%;width:max-content;text-align:center}
  .skb-wrap .toast.vis{opacity:1}
  .skb-wrap .hint{position:absolute;left:14px;bottom:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
    background:var(--hvit);border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:12px;color:var(--ink2)}
  .skb-wrap .hint b{font-weight:500;color:var(--ink)}
  .skb-wrap .prikk{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #00000022;margin-right:5px;vertical-align:-1px}

  .skb-wrap .panel{flex:0 0 340px;width:340px;overflow:auto;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
  .skb-wrap .sek{padding:13px 16px;border-bottom:1px solid var(--line)}
  .skb-wrap .sek h2{margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
  .skb-wrap .sek h2 .hoyre{float:right;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3)}
  .skb-wrap .chips{display:flex;flex-wrap:wrap;gap:6px}
  /* .chips og .bryter setter display, og det overstyrte hidden-attributtet: «Forklar kartet»-
     kategoriene og veiviserbryteren sto synlige og virksomme i Test (KB915-02). */
  .skb-wrap [hidden]{display:none !important}
  .skb-wrap .chip{border:1px solid var(--line);background:var(--hvit);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ink2)}
  .skb-wrap .chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

  .skb-wrap .kort{background:var(--hvit);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px}
  .skb-wrap .type{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--magenta);background:var(--magenta-soft);border-radius:4px;padding:2px 7px;margin-bottom:8px}
  .skb-wrap .type.blaa{color:var(--blaa);background:var(--sea-soft)}
  .skb-wrap .tekst{font-size:14.5px;line-height:1.5;white-space:pre-line}
  .skb-wrap .tekst b{font-weight:700}
  .skb-wrap .meta{margin-top:8px;font-size:12.5px;color:var(--ink2)}
  .skb-wrap .svar{margin-top:12px}
  .skb-wrap .rad{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .skb-wrap .svar input{width:150px;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--hvit);font-family:var(--mono);font-size:15px}
  .skb-wrap .svar input.kort-felt{width:96px;text-align:right}
  /* Posisjonsfeltet må romme hele koordinaten. 150 px klippet «68 35,4 N 16 30,»; Jørn: «RUTA er
     heller ikke stor nok for alle kordinatene, det må den være.» 26 tegn rommer også skrivemåten
     med tegn og ledende null, «68° 35,4′ N 016° 30,2′ Ø» (24 tegn). */
  .skb-wrap .svar input.pos-felt{width:calc(26ch + 20px);max-width:100%}
  .skb-wrap .pos-eks{font-family:var(--mono);color:var(--ink);white-space:nowrap}
  .skb-wrap .enhet{font-family:var(--mono);color:var(--ink2);font-size:13px}
  /* Kalkulatoren (0.9.13). Fargene er appens egne tokens, så den følger lys og mørk visning. */
  .skb-wrap .kalk-knapp{padding:5px 8px;display:inline-flex;align-items:center;justify-content:center;line-height:0}
  .skb-wrap .kalk-knapp svg{width:18px;height:18px}
  .skb-wrap .knapp.kalk-knapp[aria-pressed="true"]{color:var(--ink)}
  .skb-wrap .kalk{display:none;margin:10px 0 2px;border:1px solid var(--line);border-radius:10px;background:var(--hvit);padding:8px;max-width:270px}
  .skb-wrap .kalk.vis{display:block}
  .skb-wrap .kalk:focus{outline:none}
  .skb-wrap .kalk:focus-visible{outline:2px solid var(--blaa);outline-offset:2px}
  .skb-wrap .kalk-vis{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:6px 9px;margin-bottom:7px;text-align:right}
  /* Høyrejustert, og blir linja for lang, er det SLUTTEN som synes. Ikke direction:rtl, som
     0.4.0 brukte: da snudde tovei-algoritmen rekkefølgen, så «1,93 ÷ 17 × 60 =» ble vist som
     «= 60 × 17 ÷ 1,93», og minustegnet havnet bak tallet. */
  .skb-wrap .kalk-regn, .skb-wrap .kalk-tall{display:flex;justify-content:flex-end;overflow:hidden;white-space:nowrap}
  .skb-wrap .kalk-regn>span, .skb-wrap .kalk-tall>span{flex:none}
  .skb-wrap .kalk-regn{font:400 11px/1.3 var(--mono);color:var(--ink3);min-height:14px}
  .skb-wrap .kalk-tall{font:600 22px/1.25 var(--mono);color:var(--ink)}
  .skb-wrap .kalk-tast{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .skb-wrap .kalk-tast button{min-height:40px;font:600 16px/1 var(--ui);border:1px solid var(--line);border-radius:7px;background:var(--hvit);color:var(--ink);padding:0;touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .skb-wrap .kalk-tast button:hover{background:var(--panel2)}
  .skb-wrap .kalk-tast button.op{background:var(--panel2)}
  .skb-wrap .kalk-tast button.lik{background:var(--navy);border-color:var(--navy);color:#fff}
  .skb-wrap .kalk-tast button.slett{color:var(--rod)}
  .skb-wrap .kalk-bruk{margin-top:6px;width:100%;min-height:34px;font:600 13px/1 var(--ui);border:1px solid var(--line);border-radius:7px;background:var(--hvit);color:var(--ink)}
  .skb-wrap .kalk-bruk:hover{background:var(--panel2)}
  .skb-wrap .kalk-fot{margin:6px 0 0;font-size:11px;line-height:1.35;color:var(--ink3)}
  .skb-wrap .valg{display:grid;gap:6px;margin-top:12px}
  .skb-wrap .valg button{border:1px solid var(--line);background:var(--hvit);border-radius:6px;padding:8px 10px;text-align:left;font-size:13px;line-height:1.35;white-space:normal}
  .skb-wrap .valg button[data-svar="rett"]{background:var(--ok-soft);border-color:var(--gronn)}
  .skb-wrap .valg button[data-svar="galt"]{background:var(--bad-soft);border-color:var(--rod)}
  .skb-wrap .knapper{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .skb-wrap .knapp{border:1px solid var(--line);background:var(--hvit);border-radius:6px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink)}
  .skb-wrap .knapp:hover{background:var(--panel2)}
  .skb-wrap .knapp.primar{background:var(--navy);color:#fff;border-color:var(--navy)}
  .skb-wrap .knapp.primar:hover{background:var(--navy2)}
  .skb-wrap .knapp[aria-pressed="true"]{background:var(--sea-soft);border-color:var(--blaa);color:var(--blaa)}
  .skb-wrap .knapp.demo{border-color:var(--gronn);color:var(--gronn)}
  .skb-wrap .knapp.demo:hover{background:var(--ok-soft)}
  .skb-wrap .knapp:disabled{opacity:.45;cursor:default}
  .skb-wrap .tilbake{margin-top:12px;border-radius:8px;padding:10px 12px;font-size:13.5px;line-height:1.5}
  .skb-wrap .tilbake.ok{background:var(--ok-soft);border:1px solid #b6dcc6}
  .skb-wrap .tilbake.nei{background:var(--bad-soft);border:1px solid #efc0c4}
  .skb-wrap .tilbake .h{font-weight:700;margin-bottom:4px}
  .skb-wrap .tilbake.ok .h{color:var(--gronn)}
  .skb-wrap .tilbake.nei .h{color:var(--rod)}
  .skb-wrap .tilbake.fasit{background:var(--sea-soft);border:1px solid var(--blaa)}
  .skb-wrap .tilbake.fasit .h{color:var(--blaa)}
  .skb-wrap .losning{margin-top:12px;background:var(--sea-soft);border-radius:8px;padding:10px 12px;font-size:13.5px;line-height:1.5}
  .skb-wrap .losning b{font-weight:700}
  .skb-wrap .losning ol{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}
  .skb-wrap .losning .naa{color:var(--gronn);font-weight:600}
  .skb-wrap .fremg{margin-top:10px;background:var(--hvit);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font-size:13px}
  .skb-wrap .fremg ol{margin:4px 0 0;padding-left:18px}
  .skb-wrap .fremg li{margin:3px 0}

  .skb-wrap .avles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .skb-wrap .ro{background:var(--hvit);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
  .skb-wrap .ro .l{font-size:11px;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase}
  .skb-wrap .ro .v{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
  .skb-wrap .ro .v small{font-size:12px;color:var(--ink3);font-weight:400}
  .skb-wrap .ro.kant .v{color:var(--oransje)}
  .skb-wrap .ro.messing .v{color:var(--brass)}
  .skb-wrap .ro.bred{grid-column:1/-1}
  .skb-wrap .ro.bred .v{font-size:14px;font-weight:500}
  .skb-wrap .ro-note{font-size:12px;color:var(--ink2);margin-top:8px}
  .skb-wrap .pille{display:inline-block;background:var(--ok-soft);color:var(--gronn);border-radius:999px;padding:1px 8px;font-weight:600}
  .skb-wrap .pille.av{background:var(--panel2);color:var(--ink3)}

  .skb-wrap .verktoy{display:flex;flex-wrap:wrap;gap:6px}
  .skb-wrap .rot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
  .skb-wrap .rot .knapp{padding:4px 8px;font-family:var(--mono);font-size:12px;font-weight:500}
  .skb-wrap .tips{font-size:12.5px;color:var(--ink2)}
  .skb-wrap .tips summary{cursor:pointer;font-weight:600;color:var(--ink)}
  .skb-wrap .tips ul{margin:6px 0 0;padding-left:18px}
  .skb-wrap .tips li{margin:4px 0}
  .skb-wrap .tips kbd{font-family:var(--mono);font-size:11px;background:var(--hvit);border:1px solid var(--line);border-radius:3px;padding:0 4px}
  .skb-wrap .bunn{padding:12px 16px;font-size:11.5px;color:var(--ink3);margin-top:auto;line-height:1.5}
  .skb-wrap .bunn a{color:var(--blaa)}

  /* Forklar kartet: kortet ligger i panelet, og posisjonen står i mono */
  .skb-wrap .fk .rolle{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
  .skb-wrap .fk h3{margin:2px 0 6px;font-size:15px;font-weight:700}
  .skb-wrap .fk p{margin:0 0 8px;font-size:13.5px;line-height:1.5}
  .skb-wrap .fk ul{margin:0 0 8px;padding-left:0;list-style:none;display:grid;gap:6px;font-size:13px}
  .skb-wrap .fk li{padding-left:10px;border-left:2px solid var(--sea-soft)}
  .skb-wrap .fk dl{margin:0 0 8px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-family:var(--mono);font-size:12px}
  .skb-wrap .fk dt{color:var(--ink2)} .skb-wrap .fk dd{margin:0}
  .skb-wrap .fk .flagg{display:inline-block;background:var(--magenta);color:var(--flagg-tekst);border-radius:5px;padding:2px 8px;font-size:11.5px;font-weight:600;margin-bottom:6px}
  .skb-wrap .fk .teller{font-size:12px;color:var(--ink3);margin-left:auto}

  /* Veiviseren i oppgavekortet: steg, «hvorfor», og piler/ringer på kartet */
  .skb-wrap .kort-steg{font-size:12px;color:var(--ink2);white-space:nowrap;float:right}
  .skb-wrap .instr{margin-top:10px;padding:8px 10px;background:var(--sea-soft);border-radius:6px;color:var(--ink);font-size:13.5px;line-height:1.45}
  .skb-wrap .instr:empty{display:none}
  .skb-wrap .hvorfor{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(31,92,158,.3);font-size:12.5px;color:var(--ink2)}
  .skb-wrap .bryter{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:5px;cursor:pointer;margin-top:10px}
  .skb-wrap .kort.gjort{box-shadow:0 0 0 2px var(--gronn);transition:box-shadow .3s}
  .skb-wrap .markknapp[aria-pressed="true"]{background:var(--magenta-soft);border-color:var(--magenta);color:var(--magenta)}
  .skb-wrap .hint-liten{font-size:12.5px;color:var(--ink2);margin:4px 0 0}
  .skb-wrap svg.ark.skb-mark{cursor:crosshair}
  @keyframes puls{0%{stroke-opacity:1}100%{stroke-opacity:.2}}
  @keyframes pilgang{to{stroke-dashoffset:-24}}
  .skb-wrap .puls{animation:puls 1.3s ease-out infinite alternate}
  .skb-wrap .pil{animation:pilgang 1.2s linear infinite}
  @media (prefers-reduced-motion:reduce){.skb-wrap *{transition:none!important;animation:none!important}}

  /* I fullskjerm er det bordet selv som er fullskjermelementet — da skal .app fylle skjermen. */
  .skb-wrap:fullscreen{border:0;border-radius:0}
  .skb-wrap:fullscreen .app{height:100vh}
  .skb-wrap .app:fullscreen{height:100vh}
  /* På telefon er panelet høyere enn skjermen. Fullskjermelementet ruller ikke av seg selv,
     så 100vh klippet alt under kartet bort — svarfeltet lå utenfor og kunne ikke nås.
     Der bordet er smalt, får fullskjerm samme rullende oppsett som vanlig visning. */
  @media (max-width:900px){
    .skb-wrap:fullscreen{overflow-y:auto;-webkit-overflow-scrolling:touch}
    .skb-wrap:fullscreen .app, .skb-wrap .app:fullscreen{height:auto;min-height:100vh}
  }

  @media (max-width:900px){
    /* På telefon ruller hele bordet: kartet øverst med fast høyde, panelet under. Fast
       høyde på .app ville klemt panelet inn i et lite rullefelt under kartet. */
    .skb-wrap .app{height:auto;min-height:0}
    .skb-wrap .hoved{flex-direction:column;flex:0 0 auto}
    .skb-wrap .kartsoyle{flex:0 0 auto}
    .skb-wrap .bord{flex:0 0 auto;height:62vh;min-height:360px}
    .skb-wrap .panel{flex:0 0 auto;width:auto;border-left:0;border-top:1px solid var(--line)}
    .skb-wrap .navn span{display:none}
    .skb-wrap .hint{display:none}
  }

/* --- bredde på WordPress-siden ------------------------------------------------------
   Temaets tekstspalte er smalere enn et kartbord bør være. 50 % er halve spalta og 47vw
   er nesten halve vinduet: er spalta smalest blir uttrykket negativt og blokka trekkes
   utover, er den bredest klipper min() til null, og på mobil skjer ingenting.
   WordPress' egen layoutregel for «constrained» blokker setter margin-left og
   margin-right til auto med !important, så vår må være like bestemt for å slippe til. */
.skb-wrap{
  width:auto;
  max-width:none !important;
  margin-left: min(0px, calc(50% - min(47vw, 800px))) !important;
  margin-right: min(0px, calc(50% - min(47vw, 800px))) !important;
}


/* --- før kartbord.js har kjørt ------------------------------------------------------
   Kortkoden skriver «Laster kartbordet …» i blokka, og kartbord.js bytter det ut med selve
   kartbordet. Kommer ikke kartbord.js, eller henger en fil før den, blir linja stående, og
   etter 12 sekunder kommer tilbudet om å laste sida på nytt. Uten stilark vises alt med en
   gang, og det er greit: da er noe galt uansett. !important fordi temaer, og kartbordets
   egen regel for redusert bevegelse, slår av animasjoner. Dette er ingen bevegelse, bare en
   forsinket visning. Høyden er bordets, så sida ikke hopper når kartbordet kommer, og teksten
   står høyt i feltet, så den ikke havner under kanten av vinduet på en bærbar. */
.skb-wrap .skb-vakt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  box-sizing:border-box;height:min(88vh,940px);min-height:360px;margin:0;padding:min(16vh,140px) 24px 24px;text-align:center;
  color:var(--ink2);font-family:var(--ui);font-size:14px}
.skb-wrap .skb-vakt-feil{visibility:hidden;animation:skb-vakt 0s linear 12s forwards !important}
.skb-wrap .skb-vakt-feil a{color:var(--blaa)}
@keyframes skb-vakt{to{visibility:visible}}