/* ==========================================================================
   site.css — sidestiler for undersidene
   Bygger på assets/tokens.css, som er eneste kilde til farger, typografi og
   rom. Her ligger bare det tokens.css ikke dekker: topplinjen, sidefoten og
   noen få sidespesifikke mønstre.

   Forsiden (spiralreisen) har sin egen inline CSS, fordi den er
   koreografispesifikk og skal lastes i én forespørsel.
   ========================================================================== */

/* --- Topplinjen ----------------------------------------------------------
   Navigerer mellom sider. Stasjonsskinnen på forsiden navigerer inne i
   reisen — de to har bevisst ulike roller og skal aldri forveksles. */
.topline{position:sticky;top:0;z-index:30;
  background:rgba(8,19,31,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topline .wrap{display:flex;align-items:center;gap:var(--s-5);
  padding-block:var(--s-3)}
.topline .mark{display:flex;align-items:center;gap:13px;flex:none}
.topline .mark svg{width:24px;height:auto;display:block}
.topline .nm{font-size:12px;letter-spacing:.36em;color:var(--text)}
.topline nav{display:flex;gap:var(--s-5);margin-inline-start:auto;flex-wrap:wrap}
.topline nav a{font-size:var(--t-caption);letter-spacing:var(--ls-nav);
  text-transform:uppercase;color:var(--text-soft);
  padding-block:var(--s-2);
  transition:color var(--dur) var(--ease)}
.topline nav a:hover{color:var(--accent-bright)}
.topline nav a[aria-current]{color:var(--accent-bright)}
.topline nav a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Gjeldende sides navn i høyre felt på rad én under 560 — svarer på «hvor er
   jeg» når lenken til siden er skjult i rad to. Tekst, ikke lenke. */
.topline .here{display:none}
/* 9a — mobilkrom: to jobber, to rader under 560 — identitet/posisjon øverst,
   sidenavigasjon under. Rad to viser alltid nøyaktig de tre sidene du IKKE er
   på, så gjeldende sides lenke skjules og siden navngis i høyre felt på rad én.
   560–760 én rad; fra 760 ordinær topplinje. */
@media(max-width:760px){
  .topline{background:rgba(8,19,31,.86)}
  .topline .wrap{min-height:56px;padding-block:0}
}
@media(max-width:559px){
  /* gap 0 20: shorthand — rad-gap 0 (radene skilles av hårstreken, ikke
     luft), kolonne-gap 20 så navnet får plass ved siden av ordmerket på 320. */
  .topline .wrap{flex-wrap:wrap;gap:0 var(--s-4)}
  .topline .mark{min-height:56px}
  /* Merket viker som på reisen: ordmerket bærer identiteten alene i kromen.
     Uten dette, og med mindre skrift her, ble «BUSINESS AREAS» dyttet til en
     tredje rad på 320–360 px. Målt: ordmerke + navn = 257 px på 320. */
  .topline .mark svg{display:none}
  /* Gjeldende lenke skjules FØRST her, i samme steg som .here overtar jobben.
     Lå tidligere i 760-blokken, som ga et bånd 560–760 der lenken var borte
     og navnet ennå ikke kommet — «hvor er jeg» besvart av ingen. */
  .topline nav a[aria-current]{display:none}
  .topline .here{display:inline-flex;align-items:center;min-height:56px;margin-inline-start:auto;
    color:var(--accent-bright);font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;white-space:nowrap}
  /* Runde 13: wrap, ikke nowrap. Raden ble tegnet for tre lenker; med fire
     (New projects, runde 12) sprakk den allerede på 320, og med fem — som på
     /group/, der ingen lenke er gjeldende og derfor ingen skjules — sprakk den
     også på 390. Topplinjen er sticky i flyten, så den kan vokse uten at noe
     legger seg under den. Får lenkene plass på én linje ser raden ut som før. */
  .topline nav{order:4;width:100%;min-height:36px;margin-inline-start:0;align-items:center;
    justify-content:space-between;gap:0 var(--s-2);border-top:1px solid var(--line);flex-wrap:wrap}
  /* 10,5 px som skinnen og reisens sidelenker — t-caption brøt «Business
     areas» over to linjer under 367 px. */
  .topline nav a{padding-block:0;min-height:36px;display:inline-flex;align-items:center;
    font-size:10.5px;letter-spacing:.1em;white-space:nowrap}
}

/* --- Sidehode ------------------------------------------------------------ */
.hero{padding-block:var(--s-7) var(--s-6)}
.hero .overline{margin-bottom:var(--s-4)}
.hero h1{font-size:var(--t-h2);font-weight:var(--w-light);
  line-height:var(--lh-head);letter-spacing:var(--ls-head);max-width:20ch}
.hero .badge{margin-top:var(--s-5)}

/* --- Faktarad ------------------------------------------------------------
   tokens.css setter fire kolonner. Tre er også tillatt i systemet, og det er
   antallet vi faktisk har verifiserte fakta til. */
.facts.three{grid-template-columns:repeat(3,1fr)}
/* 9b — én kolonne med hårstreker på mobil; to-i-bredden etterlater én
   foreldreløs av tre og trenger 26px-verdiene på 390. */
@media(max-width:559px){
  .facts.three{grid-template-columns:1fr}
  .facts.three .fact{border-right:0;padding-right:0;border-top:1px solid var(--line)}
  .facts.three .fact:first-child{border-top:0}
}

/* --- Bildeplass ----------------------------------------------------------
   Står til ekte foto foreligger. Ingen AI-genererte bilder. */
.photo-slot{border:1px dashed var(--line-strong);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  color:var(--text-soft);font-size:var(--t-overline);
  letter-spacing:var(--ls-overline);text-transform:uppercase}

/* Ekte foto fra tomten (runde 15). Rammen er den samme hårstreken som
   .photo-slot hadde, slik at bildet leser som del av rutenettet og ikke
   som et løst element. width/height på <img> gir nettleseren forholdet
   før bildet er lastet, så layouten ikke hopper. */
.site-foto{margin:0;border:1px solid var(--line);background:var(--navy-900)}
.site-foto img{display:block;width:100%;height:auto}
/* Situasjonssnittet (runde 15). Full innholdsbredde, ikke φ-kolonnen —
   det er det som løfter etikettene fra 11 til 18,9 px. Samme ramme som
   fotoet over, så paret leser som ett. */
.site-fig{margin:var(--s-5) 0 0;border:1px solid var(--line);background:var(--navy-900)}
.site-fig svg{display:block;width:100%;height:auto}
@media print{.site-fig{border-color:var(--line-strong);break-inside:avoid}}
@media print{
  /* Fotoet er innhold, ikke plassholder — det skal med på arket. Regelen
     som skjuler .photo-slot gjelder ikke her. */
  .site-foto{border-color:var(--line-strong);break-inside:avoid}
}

/* --- Plassholdertekst ----------------------------------------------------
   Synlig merket, aldri plausibel. Skal aldri overleve til godkjent innhold
   foreligger — grep etter «[TEKST» før publisering.
   Dempet, men på --ink-3, ikke --ink-4: --ink-4 måler 4,16:1 og faller under
   AA på brødtekststørrelse. Den stiplede gulllinjen bærer «uferdig», ikke
   fargen. Samme begrunnelse for bildeplassen og sidefoten. */
.todo{color:var(--text-soft);border-bottom:1px dashed var(--line-gold)}

/* --- Sidefot ------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);padding-block:var(--s-6);
  margin-top:var(--s-7)}
.foot .wrap{display:flex;gap:var(--s-5);flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between}
.foot .meta{font-size:var(--t-caption);color:var(--text-soft);line-height:1.7}
.foot nav{display:flex;gap:var(--s-4);flex-wrap:wrap}
.foot nav a{font-size:var(--t-caption);color:var(--text-soft)}
.foot nav a:hover{color:var(--accent-bright)}
.foot nav a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* --- Områderad (business areas) ------------------------------------------
   .row fra tokens.css deler 1 : φ. Her legges bare tekstbehandlingen på. */
.area-k{font-size:var(--t-overline);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--accent)}
.area-h{font-size:var(--t-h3);font-weight:var(--w-light);color:var(--text);
  margin-top:var(--s-3);letter-spacing:var(--ls-head)}
.area-b{margin-top:var(--s-3)}
.area-a{margin-top:var(--s-4);display:inline-flex}

/* --- Småting -------------------------------------------------------------
   Erstatter style-attributter. Uten byggesteg er hver inline-stil også en
   grunn til å beholde 'unsafe-inline' i CSP-en, så de holdes ute av markup. */
address{font-style:normal}
/* Seksjon som følger rett etter sidehodet trenger ingen skillelinje —
   overskriften er allerede skillet. */
.section.flush{border-top:0}
/* Andre og senere avsnitt i innholdskolonnen. */
.phi-grid p + p{margin-top:var(--s-4)}
/* Handling som avslutter en kolonne — som par når det finnes en stille
   utgang ved siden av (6a: boks-primær + btn-quiet-sekundær). */
.cta{margin-top:var(--s-5);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-4) var(--s-5)}
/* Ingress mellom sidehodet og første seksjon. Uten bunnluft legger neste
   seksjons skillelinje seg tvers gjennom siste tekstlinje. */
.intro{padding-bottom:var(--s-7)}

/* --- Innsendingen (runde 9, 13a) -----------------------------------------
   «You write on the site's own line»: korrespondanse, ikke webskjema.
   Den aktive feltlinjen er systemets ene gradient (samme som .rule) — ingen
   andre steder på siden. Ingen rødt i valideringen: systemet har ingen
   andreaksent, så mangelen sies med sterkere linje og en nøktern setning. */
.enq{display:flex;flex-direction:column;gap:28px;max-width:34rem}
.felt{display:flex;flex-direction:column;gap:6px}
.felt label{font-size:var(--t-overline);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--text-soft);font-weight:var(--w-medium);
  transition:color var(--dur-fast) var(--ease)}
.valgfri{letter-spacing:.1em;color:var(--text-soft);opacity:.7;margin-left:8px;
  text-transform:none;font-size:11px}
.felt input,.felt textarea{background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--text);font:inherit;font-size:17px;padding:8px 0 10px;min-height:44px;
  border-radius:0;transition:border-color var(--dur-fast) var(--ease)}
.felt textarea{resize:vertical;min-height:120px}
.felt input:hover,.felt textarea:hover{border-color:var(--line-strong)}
/* Den tente linjen: 1px gradient under det aktive feltet, etiketten løftes
   til gull. 140 ms; nulles av reduced-motion-regelen. */
.felt input:focus,.felt textarea:focus{outline:none;border-color:transparent;
  background:linear-gradient(90deg,var(--accent),transparent) bottom/100% 1px no-repeat}
.felt:focus-within label{color:var(--accent-bright)}
/* Mangel: sterkere linje + setning i brødfarge. Aldri rødt. 13a angir
   styrken eksplisitt: .4 — sterkere enn line-strong, svakere enn tekst. */
.felt input.mangler,.felt textarea.mangler{border-color:rgba(255,255,255,.4)}
.hjelp{font-size:var(--t-caption);color:var(--text-body);margin-top:2px}
.enq .btn{align-self:flex-start}
.enq .btn:disabled{opacity:.6;cursor:default}
.pv{font-size:var(--t-caption);color:var(--text-soft);line-height:1.6;max-width:46ch}
/* Honeypot (13a): klippet til ingenting, ikke display:none — feltet må
   renderes for å bli fylt av roboter. Utenfor tab-rekkefølgen via markup. */
.hp{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
/* Feiltilstanden: en tilstand, ikke en prestasjon — line-strong, ikke gull. */
.feilnote{border:1px solid var(--line-strong);padding:14px 18px;
  font-size:var(--t-caption);color:var(--text-body);line-height:1.6}
/* Kvitteringen: registeret svarer. Sidens eneste gullramme, reservert for
   øyeblikket besøkeren har gjort noe. */
.kvitt{border:1px solid var(--line-gold);padding:var(--s-5);max-width:34rem;
  display:flex;flex-direction:column;gap:var(--s-3)}
.kvitt-topp{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap}
.kvitt-h{font-size:var(--t-h3);font-weight:var(--w-light);color:var(--text)}
.kvitt-stempel{font-size:var(--t-overline);letter-spacing:var(--ls-overline);
  color:var(--accent);text-transform:uppercase;white-space:nowrap}
.kvitt p{color:var(--text-body)}
.kvitt-ut{margin-top:var(--s-2)}
@media(max-width:900px){.enq,.kvitt{max-width:none}}

/* --- Kontaktoppsett ------------------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6);
  max-width:var(--measure,34rem)}
.contact-block .overline{margin-bottom:var(--s-3)}
.contact-block p{color:var(--text-body)}
.contact-block a{color:var(--accent-bright)}
.contact-block a:hover{color:var(--gold-200)}
.contact-block a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* --- Konsernarket (runde 13, Eb) -----------------------------------------
   Kvadratets areal ER egenkapitalen, så figuren tåler ikke å bli liten:
   ved 8,5 px etiketter er den uleselig under 760. Der byttes den derfor mot
   de samme tallene satt som rader. To visninger av samme sak, ikke en
   fullverdig og en degradert. */
.grp-fig{margin:0;border:1px solid var(--line);background:var(--navy-900)}
.grp-fig svg{display:block;width:100%;height:auto}
/* Ikke display:none: role="img" gjør SVG-en til en løvnode, så uten den
   lesbare listen får en skjermleser aria-label og ingenting mer — og arket
   ER tallene. Visuelt skjult, men i tilgjengelighetstreet. Samme oppskrift
   som .hp. */
.grp-list{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.grp-row{padding:20px 0;border-top:1px solid var(--line)}
.grp-row:first-child{border-top:0}
/* Døtrene rykkes inn med en gullhårstrek — eierskapet tegnet, ikke forklart. */
.grp-sub{padding-left:20px;border-left:1px solid var(--line-gold);margin-left:2px}
.grp-name{font-size:16px;color:var(--ink-1);display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap}
.grp-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-300)}
.grp-meta{font-size:11px;letter-spacing:.1em;color:var(--ink-4);margin-top:4px}
.grp-figs{font-size:13.5px;color:var(--ink-3);margin-top:10px}
.grp-figs b{font-weight:400;font-size:22px;color:var(--gold-300);
  margin-right:4px}
.grp-note{font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:24px}
@media(max-width:760px){
  .grp-fig{display:none}
  .grp-list{position:static;clip-path:none;width:auto;height:auto;overflow:visible}
}

/* --- View transitions (leveranse 10a) ------------------------------------
   Samme oppskrift som forsiden: topplinjen pinnet, heroens overline er
   kapittel-eyebrowens motpart (geometrien morfer, teksten kryssfader),
   resten kryssfader under. Underside ↔ underside deler oppskriften.
   Nøyaktig ett element per side bærer hvert navn. */
@view-transition{navigation:auto}
.topline{view-transition-name:topline}
.hero .overline{view-transition-name:overline}
::view-transition-group(*){animation-duration:220ms;
  animation-timing-function:var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  /* Pseudoene lever på rotelementet — universalselektoren når dem ikke. */
  ::view-transition-group(*),::view-transition-image-pair(*),
  ::view-transition-old(*),::view-transition-new(*){animation-duration:.01ms!important}
}


/* --- Utskriftsdrakt (runde 14B fra Claude Design) -------------------------
   Undersidene. Forsidens blokk bor i index.html — den laster ikke dette
   arket. Rettelser gjort ved integrering er merket «runde 15» under. */

@media print{

@page{margin:16mm 17mm}

:root{
  --bg:#fff;
  --text:#0B1622;
  --text-body:#2B3A48;
  --text-soft:#4A5B6B;
  --text-meta:#6B7B8A;
  --accent:#8A6D12;
  --accent-bright:#8A6D12;
  --line:rgba(8,19,31,.14);
  --line-strong:rgba(8,19,31,.25);
  --line-gold:rgba(138,109,18,.45);
}
html,body{background:#fff !important;color:var(--text)}

/* Topplinjen blir brevhode. */
.topline{position:static;background:#fff;backdrop-filter:none;
  border-bottom-color:var(--line-strong)}
.topline nav,.topline .here{display:none}
.topline .nm{color:var(--text)}

.hero{padding-block:6mm 4mm}
.section{padding-block:5mm;border-top-color:var(--line)}
p{color:var(--text-body)}

/* Handlinger og skjema er skjerm, ikke papir. Kontaktsidens adresser og
   telefonnumre står i .contact-block og blir med. */
.cta,.btn,.btn-quiet,.enq,.hp,.feilnote,.kvitt{display:none !important}
/* Plassholdere innrømmer hull på skjermen; på et ark er de bare hull. */
.photo-slot,.todo{display:none !important}

.facts{border-top-color:var(--line-strong)}
.fact{border-right-color:var(--line);break-inside:avoid}
.fact-v{color:var(--text)}
.badge{color:var(--accent);border-color:var(--line-gold);white-space:nowrap}
.badge::before{background:var(--accent)}
.row,.grp-row,.contact-block{break-inside:avoid}
h1,h2,h3,.area-h{break-after:avoid}

/* Sidefoten er arkets adresse: meta beholdes, lenkeraden er navigasjon. */
.foot{margin-top:8mm;border-top-color:var(--line-strong);padding-block:4mm}
.foot nav{display:none}
.foot .meta{color:var(--text-soft)}
.foot .meta::before{content:"fibonaccias.no";display:block;
  font-weight:600;letter-spacing:.04em;color:var(--accent)}

/* --- /group/: figuren OG listen -----------------------------------------
   Kvadratets areal er egenkapitalen — proporsjonen er poenget og skal på
   papir. Men ved A4-innholdsbredde (~174 mm) tegnes 1280-lerretet i ~51 %:
   8,5 px-etikettene måler ~4,4 px og er uleselige. Derfor begge: figuren
   bærer proporsjonen, listen bærer tallene leselig. To visninger av samme
   sak — samme beslutning som skjermens 760-bytte, bare at papiret har plass
   til begge. */
.grp-fig{display:block;background:#fff;border-color:var(--line-strong)}
.grp-list{display:block}

/* Figuren tegnes om til papir der den står: CSS-fill/stroke vinner over
   presentasjonsattributter, så kartet under snur hele det inlinede arket —
   og enhver senere scene i samme palett (situasjonstegningen fra 14A
   inkludert) — uten å røre SVG-en. */
svg [fill="#EDF1F6"]{fill:#0B1622}
svg [fill="#F2F6FA"]{fill:#0B1622}
svg [fill="#E8C766"]{fill:#8A6D12}
svg [fill="#C9A227"]{fill:#A8851B}
svg [fill="#7B8EA1"]{fill:#44566A}
svg [fill="#65798D"]{fill:#5A6B7A}
svg [fill="#A6B6C6"]{fill:#2B3A48}
svg [fill="#08131F"]{fill:#fff}
svg [fill="#0C1B2B"]{fill:rgba(8,19,31,.05)}
svg [fill="#12293F"]{fill:rgba(8,19,31,.09)}
svg [fill="#1B3A56"]{fill:rgba(8,19,31,.12)}
svg [stroke="#C9A227"]{stroke:#A8851B}
svg [stroke="#E8C766"]{stroke:#8A6D12}
svg [stroke="#A6B6C6"]{stroke:#2B3A48}
svg [stroke="#7B8EA1"]{stroke:#44566A}
svg [stroke="#65798D"]{stroke:#5A6B7A}
svg [stroke="#27506F"]{stroke:#7B93A8}
svg [stroke="#1B3A56"]{stroke:rgba(8,19,31,.3)}
svg [stroke="#12293F"]{stroke:rgba(8,19,31,.2)}
svg [stroke="rgba(255,255,255,.1)"]{stroke:rgba(8,19,31,.25)}
/* Runde 15: 14d-v2 bruker to svakere hvit-alfaer til rutenettet bak figuren. */
svg [stroke="rgba(255,255,255,.05)"]{stroke:rgba(8,19,31,.12)}
svg [stroke="rgba(255,255,255,.03)"]{stroke:rgba(8,19,31,.08)}
svg [stroke="rgba(255,255,255,.13)"]{stroke:rgba(8,19,31,.25)}
svg [stroke="rgba(255,255,255,.07)"]{stroke:rgba(8,19,31,.14)}
svg [stroke="rgba(201,162,39,.28)"]{stroke:rgba(138,109,18,.45)}
svg [fill="rgba(201,162,39,.05)"]{fill:rgba(138,109,18,.05)}
svg [fill="rgba(201,162,39,.04)"]{fill:rgba(138,109,18,.05)}
svg pattern path{stroke:rgba(8,19,31,.06) !important}

.grp-name,.grp-figs b{color:var(--text)}
.grp-tag{color:var(--accent)}
.grp-meta{color:var(--text-meta)}
.grp-figs,.grp-note{color:var(--text-soft)}
.grp-sub{border-left-color:var(--line-gold)}
.grp-row{border-top-color:var(--line)}

}/* @media print — undersidene */

/* Rettelser ved integrering (runde 15) — mot dagens kode, ikke referansen
   byrået fikk. */
@media print{
  /* .grp-list er ikke display:none lenger: den ble visuelt skjult i runde 14
     fordi role="img" gjorde SVG-ens tall utilgjengelige for skjermleser.
     display:block alene lot den stå klippet til 1x1 på papiret — figuren
     ville blitt alene igjen, med de 4,4 px-etikettene byråets egen kommentar
     sier de løser ved å ta med begge. Målt: 1x1 -> 1100x473 px. */
  .grp-list{position:static;clip-path:none;width:auto;height:auto;overflow:visible}

  /* Kvitteringssiden er ETT .kvitt-element. Blankettregelen over tømte den
     til et blankt ark; her er blokken innholdet, ikke en skjematilstand. */
  .kvitt{display:block !important}
}

/* --- Presentasjonsmodus (runde 14C fra Claude Design) ---------------------
   Undersidene og bryteren. Stage-reglene ligger i @media screen av samme
   grunn som i tokens.css: html[data-stage] (0,1,1) slår print-draktens
   :root (0,1,0), og uten innpakningen vinner møtevisningen over papiret. */
@media screen{
  /* Gull peker med vekt på tre meter: samme farge, dobbel strek. */
  html[data-stage] .rule{height:2px}
  html[data-stage] .btn{border-width:2px}
  html[data-stage] .btn-quiet{border-bottom-width:2px;padding-bottom:5px}
  html[data-stage] .badge{border-width:1.5px}
  html[data-stage] .badge::before{width:7px;height:7px}
  html[data-stage] .fact-k{letter-spacing:.24em}
  /* Det som forsvinner projisert: bunnmenyen. */
  html[data-stage] .foot{display:none}
  /* Metastrenger som står i --ink-4 direkte, løftes til gulvet: */
  html[data-stage] .grp-meta{color:var(--ink-3)}
  /* MERK: byråets `html[data-stage] .todo{display:none}` er IKKE tatt inn.
     .todo er de synlige [TEKST-plassholderne, og site.css sier om dem
     «Synlig merket, aldri plausibel». En møtevisning som skjuler at teksten
     mangler, lar en uferdig side se ferdig ut foran eierne — det er
     nøyaktig det markøren finnes for å hindre. */
  html[data-stage] .stage-tgl{color:var(--accent-bright)}
  html[data-stage] .stage-tgl::before{background:var(--accent)}
}

/* Bryteren. Stille i vanlig visning, gull når den er på. Skjules under 760
   (møtevisning er en skrivebordstilstand — stage.js slår også modusen AV der,
   så møtelenken ikke blir en enveisdør på telefon) og på papir. */
.stage-tgl{border:0;background:none;cursor:pointer;font:inherit;
  font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-soft);display:inline-flex;align-items:center;gap:8px;
  padding:8px 0;transition:color var(--dur-fast) var(--ease)}
.stage-tgl::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--text-meta);transition:background var(--dur-fast) var(--ease)}
.stage-tgl:hover{color:var(--accent-bright)}
.stage-tgl:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(max-width:760px){.stage-tgl{display:none}}
@media print{.stage-tgl{display:none}}