/* stil.css — Jordkloden. Tokena er huben sin MØRKE palett (skald-hub/hub.css, :root[data-theme="dark"]), kopierte
   ordrett 22.09.2026. Appen har berre éin utsjånad: globusen står alltid mot svart rom. Godkjend skisse:
   skisser/ui/skisse-*.png (Roger 22.09). */
:root {
  color-scheme: dark;
  --bg:            #1A1713;
  --bg-elevated:   #241F1A;
  --bg-subtle:     #2E2822;
  --text:          #F2EBE0;
  --text-muted:    #B3A695;
  --accent:        #D9694E;
  --accent-hover:  #E67A5F;
  --accent-text:   #E8927B;
  --on-accent:     #1A1713;
  --border:        #443A31;
  --border-subtle: #332C26;
  --radius:        14px;
  /* berre Jordkloden */
  --panel:         rgba(26, 23, 19, 0.84);
  --glass:         blur(8px);
  --hogtrykk:      #6FA3D9;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #000; color: var(--text); font: 15px/1.4 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.vekk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p { margin: 0; }

#lerret { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
#lerret:focus-visible { outline: 3px solid var(--accent-text); outline-offset: -3px; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }

.sikte { position: fixed; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none;
  border: 1.5px solid rgba(242, 235, 224, 0.7); border-radius: 50%; }
.sikte::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--text); border-radius: 50%; }

.topp { position: fixed; left: 16px; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px));
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; z-index: 5; }
.topp > * { pointer-events: auto; }
.stad { padding: 12px 14px; display: grid; gap: 4px; width: 300px; }
.namn { font: 22px/1.1 "DM Serif Display", Georgia, serif; }
.her { color: var(--text-muted); min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tid { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tid .stor { color: var(--text); font-size: 20px; font-weight: 600; }
.sok { position: relative; }
.sok input { width: 100%; margin-top: 6px; min-height: 44px; padding: 0 12px; background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: 10px; }
.sok input::placeholder { color: var(--text-muted); opacity: 1; }
.sok-treff { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; z-index: 3;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
.sok-treff button { width: 100%; min-height: 44px; padding: 6px 10px; text-align: left; background: transparent; border: 0; border-radius: 8px; display: grid; }
.sok-treff button small { color: var(--text-muted); }
.sok-treff button:focus-visible, .sok-treff [aria-selected="true"] { background: var(--bg-subtle); }
@media (hover: hover) and (pointer: fine) { .sok-treff button:hover { background: var(--bg-subtle); } }
.sok-treff .ingen { padding: 10px; color: var(--text-muted); }
.verktoy { display: flex; gap: 8px; }

.rund, .pille { min-width: 44px; min-height: 44px; border-radius: 22px; border: 1px solid var(--border);
  background: var(--panel); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); font-weight: 700; }
.pille { padding: 0 14px; }
/* Språkveljaren: lista opnar under knappen (på telefon til venstre for han, sidan verktøya står i ein kolonne). */
.sprakval { position: relative; }
.sprak-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; display: grid; gap: 2px; padding: 4px; min-width: 150px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.sprak-liste button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-weight: 600; }
.sprak-liste button[aria-pressed="true"] { background: var(--bg-subtle); box-shadow: inset 3px 0 0 var(--accent); }
@media (hover: hover) and (pointer: fine) { .sprak-liste button:hover { background: var(--bg-subtle); } }

.zoom { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); display: grid; overflow: hidden; }
.zoom button { width: 48px; height: 48px; border: 0; background: transparent; font-size: 22px; }
.zoom button + button { border-top: 1px solid var(--border); }

/* Meldinga står rett under ringen, der vêret blir laga, og dekkjer då ingen kontroll (port-skjermar). */
.melding { position: fixed; left: 50%; top: calc(50% + 34px); transform: translateX(-50%);
  max-width: min(440px, calc(100vw - 32px)); padding: 10px 14px; z-index: 4;
  background: var(--bg-elevated); border: 1px solid var(--accent); border-radius: 12px; text-align: center; }

.botn { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 16px; align-items: center; padding: 10px 14px; }
.tidslinjer { flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; }
.tidsknappar { grid-row: span 2; display: flex; gap: 8px; }
.linje { display: grid; grid-template-columns: 56px 1fr 120px; align-items: center; gap: 10px; }
.linje span { color: var(--text-muted); font-size: 13px; }
.linje output { font-variant-numeric: tabular-nums; text-align: right; }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; margin: 0; }
.ver { display: flex; gap: 8px; }
.aksent, .aksent-2 { min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; font-weight: 700; color: var(--on-accent); }
.aksent { background: var(--accent); }
.aksent-2 { background: var(--hogtrykk); }
@media (hover: hover) and (pointer: fine) { .aksent:hover { background: var(--accent-hover); } }

.kort { position: fixed; right: 16px; top: calc(16px + 44px + 12px + env(safe-area-inset-top, 0px)); width: 380px; z-index: 2;
  max-height: calc(100% - 200px); overflow: auto; padding: 16px 18px; display: grid; gap: 10px; align-content: start;
  /* Det som blir rulla fram (fokus, scrollIntoView) skal ikkje hamne under det faste hovudet eller «Meir under»-stripa
     (port-vertar runde 16: lisensradene i «Om» var dekte). */
  scroll-padding: 76px 0 56px; }
/* Tittel og × står fast øvst når kortet rullar (K2 runde 12: × rulla ut av kortet etter «Meir under»). Flata dekkjer
   teksten som rullar under; -16px er polstringa i kortet, so hovudet ligg heilt i overkanten. */
.korthovud { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  position: sticky; top: -16px; z-index: 1; margin: -16px -18px 0; padding: 16px 18px 8px; background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0; }
.kort h2 { margin: 0; font: 24px/1.15 "DM Serif Display", Georgia, serif; text-wrap: balance; }
.kort p { max-width: 60ch; }
.roleg-merknad { color: var(--text-muted); font-size: 14px; }
/* Skybrytaren: stroken tekst når skyene er av (aria-pressed seier det same til skjermlesar) */
/* Kartlag: éin knapp i tidsraden, lista opnar oppover (knappen står i botnpanelet). Kvar brytar har ein boks med hake. */
.lagval { position: relative; }
.lag-liste { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; display: grid; gap: 2px; padding: 4px; min-width: 180px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.lag-liste button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; text-align: left; font-weight: 600; white-space: nowrap; }
.lag-liste button::before { content: ""; flex: none; display: grid; place-items: center; width: 18px; height: 18px;
  border: 2px solid var(--text-muted); border-radius: 4px; box-sizing: border-box; font-size: 13px; line-height: 1; color: var(--on-accent); }
.lag-liste button[aria-pressed="true"]::before { content: "✓"; border-color: var(--accent); background: var(--accent); }
/* Flagg følgjer namna: med namna av er brytaren for flagg ikkje i bruk (Roger 24.09) */
.lag-liste button:disabled { opacity: 0.45; }
@media (hover: hover) and (pointer: fine) { .lag-liste button:hover:not(:disabled) { background: var(--bg-subtle); } }
.prov { padding: 10px 12px; background: var(--bg-subtle); border-radius: 10px; }
.prov strong { color: var(--accent-text); }
/* Meir tekst under kanten av kortet (K2 og dommaren, runde 11: «Prøv sjølv» låg under kanten utan teikn på det).
   Står fast nedst i kortet medan det er meir å rulle; eit trykk rullar vidare. */
/* Ei stripe langs botnen av kortet, ikkje ein pille midt i teksten (K2 runde 12: pillen dekte ei line). */
.kort-meir { position: sticky; bottom: -16px; justify-self: stretch; margin: 0 -18px -16px; padding: 14px 18px 12px;
  border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: var(--bg);
  color: var(--text); font: inherit; font-size: 14px; text-align: center; cursor: pointer; }
.kortliste { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.kortliste button { min-height: 36px; padding: 0 10px; border-radius: 18px; border: 1px solid var(--border); background: transparent; font-size: 13px; }
.kortliste [aria-current="true"] { background: var(--bg-subtle); border-color: var(--accent); }
.lisensar { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.lisensar li { padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.lisensar strong { display: block; font-size: 14px; }
.lisensar span { color: var(--text-muted); }
.om-botn { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bygg-merke { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.kjelde { position: fixed; right: 12px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); margin: 0; max-width: 60vw;
  font-size: 11px; line-height: 1.3; color: var(--text); text-align: right; pointer-events: none;
  /* Eiga flate under teksten: skuggen åleine heldt ikkje over lyse flyfoto (K3, runde 12). --text på --panel over
     reint kvitt er 9,3:1 (panelet er 84 % dekkjande: (63, 60, 57) over kvitt). */
  background: var(--panel); padding: 2px 8px; border-radius: 8px; }
.kjelde-del { display: inline-block; max-width: 100%; } /* bryt mellom kjeldene, ikkje midt i eit namn (dommaren, runde 13); ein del som er lengre enn lina, bryt inni seg (port-namn: EOX gjekk ut over kanten på telefon) */
.lastar { position: fixed; left: 50%; top: 50%; transform: translate(-50%, 40px); color: var(--text-muted); pointer-events: none; }

@media (max-width: 600px) {
  .stad { width: auto; flex: 1; padding: 8px 12px; }
  .namn { display: none; }
  .her { color: var(--text); font-weight: 600; }
  .tid .stor { font-size: 17px; }
  .sok input { min-height: 40px; }
  .verktoy { flex-direction: column; }
  .sprak-liste { top: 0; right: calc(100% + 8px); }
  .zoom { display: none; }
  .botn { flex-direction: column; align-items: stretch; gap: 8px; }
  .tidslinjer { grid-template-columns: 1fr; }
  /* Fem knappar på 333 px, på éi rad òg på engelsk: mindre luft (K2 runde 16: «No» 13,6 px utanfor, «Now» kutta) */
  .tidsknappar { grid-row: auto; justify-content: space-between; gap: 4px; } .tidsknappar .pille { padding: 0 8px; }
  .linje { grid-template-columns: 48px 1fr 104px; }
  .ver button { flex: 1; }
  .kort { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 66%;
    background: var(--bg-elevated); }
  /* Kortet ope: glidebrytarane går, vêrknappane blir ståande under kortet («Prøv sjølv» brukar dei; Roger 2a) */
  .kort-ope .botn .tidslinjer { display: none; }
  .melding { top: auto; bottom: calc(50% + 34px); } /* over ringen: under han ligg kjeldelina og botnen */
  .kort > * { order: 2; }
  .korthovud, .kort .roleg-merknad { order: 0; } /* lina om redusert rørsle rett under tittelen, synleg utan å rulle */
  .kortliste { order: 1; flex-wrap: wrap; padding-top: 0; padding-bottom: 8px; border-top: 0; border-bottom: 1px solid var(--border-subtle); }
  .kortliste button { min-height: 44px; padding: 0 10px; font-size: 13px; }
  .kort { max-height: calc(100% - 210px - env(safe-area-inset-top, 0px)); } /* plass til kjeldelina over kortet */
  .kort-ope .kort { bottom: calc(16px + 72px + 8px + env(safe-area-inset-bottom, 0px)); max-height: calc(100% - 210px - 80px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .kjelde { bottom: calc(248px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }
  /* kortet dekkjer botnen: kjeldelina (CC BY krev ho synleg) flyttar opp under toppen */
  .kort-ope .kjelde { bottom: auto; top: calc(16px + 148px + 8px + env(safe-area-inset-top, 0px)); left: 16px; right: 84px; max-width: none; text-align: left; }
}

/* Låge skjermar (telefon liggjande, 320–500 px høge): toppen blir tettare, zoomknappane går (kniping og
   tastatur finst), botnen blir éi tett rad, og kortet tek plassen mellom verktøya og botnen. Målt i
   kontroll/port-skjermar.mjs (iPhone 15 liggjande 852 × 320). */
@media (max-height: 600px) {
  .zoom { display: none; }
}
@media (max-height: 500px) {
  .topp { top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
  .stad { width: 280px; padding: 6px 10px; gap: 2px; }
  .namn { font-size: 16px; }
  .her { display: none; }
  .tid .stor { font-size: 16px; }
  .sok input { min-height: 40px; margin-top: 2px; }
  .botn { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 4px 10px; gap: 10px; }
  .linje { grid-template-columns: 48px 1fr 104px; }
  /* Knapperaden over glidebrytarane, ikkje ved sida av: med fem knappar vart Klokka og Dato 6 px breie på 852 × 320
     (port-skjermar, runde 23, då «Grenser» kom inn). Botnpanelet blir om lag 46 px høgare; kjeldelina flyttar opp. */
  .tidslinjer { grid-template-columns: 1fr; row-gap: 0; }
  .tidsknappar { grid-row: auto; }
  /* Kartlag-lista i to kolonnar til høgre for knappen: fire rader à 46 px oppover går under stadpanelet på 320 px (port-skjermar 24.09) */
  .lag-liste { grid-template-columns: repeat(2, auto); left: calc(100% + 8px); bottom: 0; }
  input[type="range"] { min-height: 32px; }
  .kort { top: calc(8px + 44px + 8px + env(safe-area-inset-top, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: none; right: calc(8px + env(safe-area-inset-right, 0px)); }
  /* Kortet ope: vêrknappane står nedst til venstre for kortet (Roger 2a), glidebrytarane går */
  .kort-ope .botn { right: calc(8px + 380px + 8px + env(safe-area-inset-right, 0px)); }
  .kort-ope .botn .tidslinjer { display: none; }
  /* brikkene rett under tittelen, so dei er synlege utan å rulle kortet (port-skjermar, 852 × 320) */
  .kort > * { order: 2; }
  .korthovud, .kort .roleg-merknad { order: 0; }
  .kortliste { order: 1; padding-top: 0; padding-bottom: 6px; border-top: 0; border-bottom: 1px solid var(--border-subtle); }
  .kortliste button { min-height: 44px; padding: 0 10px; font-size: 13px; }
  .kort h2 { font-size: 19px; }
  .kjelde { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
  .kort-ope .kjelde { bottom: calc(8px + 58px + 6px + env(safe-area-inset-bottom, 0px)); right: auto; left: calc(8px + env(safe-area-inset-left, 0px)); max-width: calc(100vw - 420px); text-align: left; }
  /* låg skjerm: ringen er for nær botnen, so meldinga går opp i luka mellom stadpanelet og verktøya */
  .melding { top: calc(8px + env(safe-area-inset-top, 0px)); left: 300px; right: 280px; transform: none; max-width: none; padding: 6px 10px; font-size: 13px; }
}

/* ---------- namnelaget (namn på kloden; utkast/namnelag/, 24.09) ---------- */
/* namn.css: namnelaget. Alle fargar er token frå kjelde/stil.css; hav-fargen er ei blanding av to token.
   Namna er lyse med eit mørkt omriss i --bg (tekstskugge i åtte retningar pluss ei mjuk kant). Då står teksten
   mot --bg same kva biletet under er: snø og skyer om dagen, svart hav om natta. Kontrasten er rekna i prov.mjs. */

.namnelag { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.namn-rot, .namn-etikettar { position: absolute; inset: 0; pointer-events: none; }

.namn-l {
  --namn-farge: var(--text);
  position: absolute; left: 0; top: 0; margin: 0; padding: 1px 3px; border: 0; background: transparent;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 500;
  font-style: normal; letter-spacing: normal; text-transform: none; line-height: 16px; white-space: nowrap;
  color: var(--namn-farge); cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  text-shadow:
    1px 0 0 var(--bg), -1px 0 0 var(--bg), 0 1px 0 var(--bg), 0 -1px 0 var(--bg),
    1px 1px 0 var(--bg), -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg),
    0 0 3px var(--bg), 0 0 5px var(--bg);
  will-change: transform; -webkit-tap-highlight-color: transparent;
}
.namn-l:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; border-radius: 4px; }

.namn-kontinent { --namn-farge: var(--text-muted); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; }
.namn-land      { --namn-farge: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.namn-hav       { --namn-farge: color-mix(in srgb, var(--hogtrykk) 55%, var(--text-muted)); font-size: 15px; line-height: 19px; font-style: italic; letter-spacing: 0.12em; }
.namn-sjo       { --namn-farge: color-mix(in srgb, var(--hogtrykk) 55%, var(--text-muted)); font-style: italic; letter-spacing: 0.04em; }
.namn-elv       { --namn-farge: var(--hogtrykk); font-size: 11px; line-height: 15px; font-style: italic; }
.namn-innsjo    { --namn-farge: var(--hogtrykk); font-size: 11px; line-height: 15px; font-style: italic; }
.namn-fjell_region { --namn-farge: var(--text-muted); font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.08em; }
.namn-orken     { --namn-farge: var(--accent-text); font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.08em; }
.namn-slette    { --namn-farge: var(--text-muted); font-size: 11px; line-height: 15px; font-style: italic; letter-spacing: 0.04em; }
/* Byar: prikk og namn. Prikken står midt i venstre luft (padding-left / 2), og det er der punktet er. */
.namn-by        { --namn-farge: var(--text); padding-left: 12px; }
.namn-by::before { content: ""; position: absolute; left: 3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--text); box-shadow: 0 0 0 1.5px var(--bg); }

/* Infoboksen */
.namn-info { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: auto; width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px 12px; display: grid; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); /* tett: namn og liner skal ikkje skine gjennom (dommaren, runde 16) */
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); color: var(--text); }
.namn-info-hovud { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.namn-info h2 { margin: 6px 0 0; font: 20px/1.15 "DM Serif Display", Georgia, serif; text-wrap: balance; }
.namn-info-klasse { margin: 0; color: var(--text-muted); font-size: 14px; }
.namn-info-ogsa { margin: 0; font-size: 14px; }
.namn-info-lukk { flex: none; width: 44px; height: 44px; }

/* Skjermlesarvegen: usynleg på skjermen, lesen av skjermlesar (same mønster som .vekk i stil.css) */
.namn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Brytaren «Namn»: stroken tekst når namna er av, som skybrytaren */
/* Flagget framfor landnamnet (biletark frå flag-icons, MIT; plasseringa i arket kjem frå namn.js) */
.namn-l.med-flagg::before { content: ""; display: inline-block; width: 20px; height: 15px; margin-right: 5px; vertical-align: -2px;
  background: url("data/flagg.png") var(--fx) var(--fy) / var(--fs) auto no-repeat; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }

/* grenser.css: grenselaget. Alle fargar er token frå kjelde/stil.css.
   Linjefargane blir lesne av grenser.js frå --grense-linje og --grense-kant på .grenselag: ein lys kjerne i --text
   med ein mørk kant i --bg på kvar side. Kanten gir kontrast over snø, ørken og skyer om dagen; kjernen står mot
   svart hav og bylys om natta. Kontrasten er målt i prov.mjs. */

.grenselag { --grense-linje: var(--text); --grense-kant: var(--bg);
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.grense-rot { position: absolute; inset: 0; pointer-events: none; }

/* Infoboksen (same form som namn-info) */
.grense-info { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: auto; width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px 12px; display: grid; gap: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); /* tett: namn og liner skal ikkje skine gjennom (dommaren, runde 16) */
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); color: var(--text); }
.grense-info-hovud { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.grense-info h2 { margin: 2px 0 0; font: 20px/1.15 "DM Serif Display", Georgia, serif; text-wrap: balance; }
/* Merket «omstridd»: stipla ramme, same teikn som på kloden. Ikkje raudt: fargen skal ikkje seie at noko er gale. */
.grense-merke { display: inline-block; margin: 6px 0 0; padding: 1px 8px; border: 1.5px dashed var(--text-muted); border-radius: 999px;
  color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.grense-info-gruppe { margin: 0; color: var(--text-muted); font-size: 14px; }
.grense-info-ogsa { margin: 0; font-size: 14px; }
.grense-info-setning { margin: 0; font-size: 15px; }
.grense-info-kjelde { margin: 0; color: var(--text-muted); font-size: 13px; }
.grense-info-lukk { flex: none; width: 44px; height: 44px; }

/* Brytaren «Grenser»: stroken tekst når grensene er av, som skybrytaren og namnebrytaren */