/* ==========================================================================
   PRICR rörelselager, webben
   ==========================================================================
   Ligger ovanpå tokenlagret i pricr-empty-grid.css och ändrar ingenting i det.
   Empty Grid gäller oförändrat för dokument. För webben utvidgas det till ett
   rörelsesystem: färgerna, de tre typografiska registren, rutnätsmodulen och
   sanningskraven är exakt desamma, men rörelse, sektionsväxling och figurer
   tillkommer.

   Tre regler styr allt i denna fil:

   1. Ingen rörelse ändrar layout. Bara transform, opacity, stroke-dashoffset
      och färg animeras. Ingen animation rör width, height, margin, padding,
      top eller left på ett element som ligger i normalflödet.
   2. Alla varaktigheter, kurvor och förskjutningar kommer ur tokens i denna
      fil. Inga lösa millisekundvärden i markup.
   3. prefers-reduced-motion: reduce ger slutläget direkt. Det är ett krav,
      inte en artighet. Blocket ligger sist och nollar allt.

   Inga beroenden. CSS, IntersectionObserver, Web Animations API och SVG.
   ========================================================================== */

/* ── Reservsnitt med matchad teckenbredd ───────────────────────────────────
   Det största hoppet i sidan kom inte ur rörelsen utan ur typsnittsbytet:
   Georgia sätter samma hero-rubrik 23 procent bredare än Source Serif 4
   (uppmätt 3018,3 px mot 2456,4 px vid 200 px grad), vilket ger tre rader i
   reservsnittet och två när webbtypsnittet landar. Sidan krympte då 68 px och
   allt under heroet flyttade sig.

   size-adjust krymper reservsnittets teckenbredder till samma mått, så att
   raderna bryter likadant före och efter bytet. Times New Roman ligger redan
   på 99,2 procent och får sin egen justering. Ingen ny fil laddas: båda
   snitten finns lokalt.

   Detta är webbens font-stack. Dokumentens formspråk är oförändrat. */
@font-face {
  font-family: 'PRICR Serif Fallback';
  src: local('Georgia');
  size-adjust: 81.4%;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'PRICR Serif Fallback 2';
  src: local('Times New Roman');
  size-adjust: 99.2%;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --pricr-font-serif: 'Source Serif 4', 'PRICR Serif Fallback',
                      'PRICR Serif Fallback 2', Georgia, 'Times New Roman', serif;

  /* ── Varaktigheter. Fem steg, alla under 600 ms ────────────────────────
     Taket är hämtat ur designdirektivet för webben: ingenting på sidan får
     ta längre tid än 600 ms. De tre grundstegen ligger i tokenlagret som
     --pricr-dur-1, -2 och -3; namnen här är de roller stegen fyller. */
  --pricr-dur-tap:    120ms;                 /* hover, fokus, understrykning */
  --pricr-dur-state:  var(--pricr-dur-1);    /* 180 ms, tillståndsbyte       */
  --pricr-dur-enter:  var(--pricr-dur-3);    /* 560 ms, text som kommer in   */
  --pricr-dur-figure: var(--pricr-dur-2);    /* 360 ms, en figur slår an     */
  --pricr-dur-draw:   var(--pricr-dur-3);    /* 560 ms, en kurva ritas ut    */

  /* ── Kurvor. En enda utgångskurva för allt som avslöjas, den ur
     designdirektivet, och en symmetrisk för tillståndsbyten. Ingen studs,
     ingen översläng, ingenting som roterar. ── */
  --pricr-ease-out:   var(--pricr-ease-web);
  --pricr-ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --pricr-ease-draw:  var(--pricr-ease-web);

  /* ── Förskjutning mellan syskonelement ── */
  --pricr-stagger:      var(--pricr-step);        /* 60 ms, rader och kort   */
  --pricr-stagger-cell: var(--pricr-step-cell);   /* 14 ms, rutnätets celler */

  /* ── Rörelsens längd. Alltid liten. Rörelsen ska läsas som att något
     hamnar på plats, aldrig som att något flyger in. ── */
  --pricr-rise:  16px;
  --pricr-slide: 24px;

  /* ── Rummen, ljust läge ────────────────────────────────────────────────
     Sidan är en följd av rum. Varje rum har sin egen botten, och två rum i
     följd delar aldrig botten. Paletten är oförändrad: papper, bläck och
     bläck en nyans djupare. */
  --pricr-room-paper-bg:     var(--pricr-paper);
  --pricr-room-paper-fg:     var(--pricr-ink);
  --pricr-room-paper-dim:    var(--pricr-grey);
  --pricr-room-paper-alert:  var(--pricr-alert-light);
  --pricr-room-paper-accent: var(--pricr-accent-light);
  --pricr-room-paper-rule:   var(--pricr-grey);

  --pricr-room-ink-bg:     var(--pricr-ink);
  --pricr-room-ink-fg:     var(--pricr-paper);
  --pricr-room-ink-dim:    var(--pricr-grey-light);
  --pricr-room-ink-alert:  var(--pricr-alert-dark);
  --pricr-room-ink-accent: var(--pricr-accent-dark);
  --pricr-room-ink-rule:   var(--pricr-grey-light);

  --pricr-room-deep-bg:     var(--pricr-ink-deep);
  --pricr-room-deep-fg:     var(--pricr-paper);
  --pricr-room-deep-dim:    var(--pricr-grey-light);
  --pricr-room-deep-alert:  var(--pricr-alert-dark);
  --pricr-room-deep-accent: var(--pricr-accent-dark);
  --pricr-room-deep-rule:   var(--pricr-grey-light);

  /* Det rum sajten växlar mot papper i. Grundaren har beslutat (12 sep 2026)
     att skillnaden mellan banden ska dras ned, och rummet är därför inte
     längre djupgrönt i sidans löpande band: i ljust läge ligger det på
     nedtonat papper, i mörkt läge på bläck en nyans ljusare. Bandföljden och
     växlingen består, bara steget mellan de två bottnarna är litet.

     Djupgrönt finns kvar och bärs av foten, sidans enda avvikande yta. Se
     regeln footer.pricr-room--forest längre ned. */
  --pricr-room-forest-bg:     var(--pricr-paper-tint);
  --pricr-room-forest-fg:     var(--pricr-ink);
  --pricr-room-forest-dim:    var(--pricr-grey);
  --pricr-room-forest-alert:  var(--pricr-alert-light);
  --pricr-room-forest-accent: var(--pricr-accent-light);
  --pricr-room-forest-rule:   var(--pricr-grey);

  --pricr-nav-h:         64px;   /* navigationens öppna höjd                */
  --pricr-nav-h-compact: 48px;   /* och dess kompakterade höjd              */
}

/* Mörkt läge. Rummen behåller sin ordning, men alla bottnar är mörka. De två
   löpande bottnarna ligger inom ett smalt spann av den mörka tonen: uppmätt
   0,023 i relativ luminans mellan dem, mot 0,046 före. Foten står kvar på
   djupgrönt och är den enda ytan som avviker. */
:root:not(.light) {
  --pricr-room-paper-bg:     #38443A;
  --pricr-room-paper-fg:     var(--pricr-paper);
  --pricr-room-paper-dim:    var(--pricr-grey-light);
  --pricr-room-paper-accent: var(--pricr-accent-dark);
  --pricr-room-paper-alert:  var(--pricr-alert-dark);
  --pricr-room-paper-rule:   var(--pricr-grey-light);

  --pricr-room-forest-bg:     var(--pricr-ink-mid);
  --pricr-room-forest-fg:     var(--pricr-paper);
  --pricr-room-forest-dim:    var(--pricr-grey-light);
  --pricr-room-forest-alert:  var(--pricr-alert-dark);
  --pricr-room-forest-accent: var(--pricr-accent-dark);
  --pricr-room-forest-rule:   var(--pricr-grey-light);
}

/* ── Primitiv: rummet ──────────────────────────────────────────────────────
   Rummet pekar om fältrolltokens lokalt. Alla primitiver ur tokenlagret,
   etiketten, åtgärden, rutnätscellen och den hårfina linjen, följer med utan
   att någon av dem behöver veta vilket rum de står i. */
.pricr-room {
  background: var(--pricr-field-bg);
  color: var(--pricr-field-fg);
  border-radius: 0;
  position: relative;
}

/* Rumsgränsen bärs av bottenbytet självt. Ingen linje, ingen toning: kanten
   ska läsas som att man kommer in i ett nytt rum, och en grå linje i fogen
   försvagar just det.

   Sedan 12 sep 2026 är steget mellan de två löpande bottnarna avsiktligt
   litet. Uppmätt skillnad i relativ luminans: 0,037 i ljust läge och 0,021 i
   mörkt, mot 0,920 respektive 0,044 före. Växlingen finns kvar, men läses som
   ett andetag och inte som ett dygnsskifte.

   Delar två grannar botten finns ingen kant alls att läsa. Då halveras det
   andra rummets toppadding, se angränsningsregeln vid .room-inner. */
.pricr-room + .pricr-room { border-top: 0; }

.pricr-room--paper {
  --pricr-field-bg:     var(--pricr-room-paper-bg);
  --pricr-field-fg:     var(--pricr-room-paper-fg);
  --pricr-field-fg-dim: var(--pricr-room-paper-dim);
  --pricr-field-accent: var(--pricr-room-paper-accent);
  --pricr-field-alert:  var(--pricr-room-paper-alert);
  --pricr-field-rule:   var(--pricr-room-paper-rule);
  --pricr-cell-line:      var(--pricr-room-paper-dim);
  --pricr-cell-filled:    var(--pricr-room-paper-accent);
  --pricr-cell-on-filled: var(--pricr-room-paper-bg);
}

.pricr-room--ink {
  --pricr-field-bg:     var(--pricr-room-ink-bg);
  --pricr-field-fg:     var(--pricr-room-ink-fg);
  --pricr-field-fg-dim: var(--pricr-room-ink-dim);
  --pricr-field-accent: var(--pricr-room-ink-accent);
  --pricr-field-alert:  var(--pricr-room-ink-alert);
  --pricr-field-rule:   var(--pricr-room-ink-rule);
  --pricr-cell-line:      var(--pricr-room-ink-dim);
  --pricr-cell-filled:    var(--pricr-room-ink-accent);
  --pricr-cell-on-filled: var(--pricr-room-ink-bg);
}

.pricr-room--deep {
  --pricr-field-bg:     var(--pricr-room-deep-bg);
  --pricr-field-fg:     var(--pricr-room-deep-fg);
  --pricr-field-fg-dim: var(--pricr-room-deep-dim);
  --pricr-field-accent: var(--pricr-room-deep-accent);
  --pricr-field-alert:  var(--pricr-room-deep-alert);
  --pricr-field-rule:   var(--pricr-room-deep-rule);
  --pricr-cell-line:      var(--pricr-room-deep-dim);
  --pricr-cell-filled:    var(--pricr-room-deep-accent);
  --pricr-cell-on-filled: var(--pricr-room-deep-bg);
}

.pricr-room--forest {
  --pricr-field-bg:     var(--pricr-room-forest-bg);
  --pricr-field-fg:     var(--pricr-room-forest-fg);
  --pricr-field-fg-dim: var(--pricr-room-forest-dim);
  --pricr-field-accent: var(--pricr-room-forest-accent);
  --pricr-field-alert:  var(--pricr-room-forest-alert);
  --pricr-field-rule:   var(--pricr-room-forest-rule);
  --pricr-cell-line:      var(--pricr-room-forest-dim);
  --pricr-cell-filled:    var(--pricr-room-forest-accent);
  --pricr-cell-on-filled: var(--pricr-room-forest-bg);
}

/* Foten är sidans enda avvikande yta och den enda mörka ytan i ljust läge.
   Djupgrönt lever kvar här, och bara här. Regeln pekar om rummets egna
   värdetokens på samma element som .pricr-room--forest läser dem, så
   fältrollerna ovan löser upp mot fotens värden utan att någon markup ändras.

   Höjd på djupgrönt bärs av ytans egen ljushet och en hårfin kontur. En svart
   skugga syns inte på en mörk botten och skulle bara smutsa ner kanten. */
footer.pricr-room--forest {
  --pricr-room-forest-bg:     var(--pricr-forest);
  --pricr-room-forest-fg:     var(--pricr-paper);
  --pricr-room-forest-dim:    var(--pricr-grey-light);
  --pricr-room-forest-alert:  var(--pricr-alert-dark);
  --pricr-room-forest-accent: var(--pricr-accent-dark);
  --pricr-room-forest-rule:   var(--pricr-forest-rule);

  --pricr-surface-1-bg:   var(--pricr-forest-raise-1);
  --pricr-surface-2-bg:   var(--pricr-forest-raise-2);
  --pricr-surface-rule:   var(--pricr-forest-rule);
  --pricr-surface-shadow: none;
  --pricr-nav-veil:       var(--pricr-forest-veil);
  --pricr-nav-fg:         var(--pricr-paper);
}

/* ── Primitiv: entré ───────────────────────────────────────────────────────
   Elementet börjar förskjutet och osynligt och avslöjas en gång när det når
   vyn. Aldrig om vid uppskroll. Bara transform och opacity animeras, så
   ingenting i sidan flyttar sig av rörelsen.

   Förskjutningen mellan syskon skrivs som --pricr-i, ett heltal, satt i
   markup eller av rörelselagret. Millisekunderna räknas här. */
[data-enter] {
  opacity: 0;
  transition:
    opacity   var(--pricr-dur-enter) var(--pricr-ease-out),
    transform var(--pricr-dur-enter) var(--pricr-ease-out);
  transition-delay: calc(var(--pricr-i, 0) * var(--pricr-stagger));
  will-change: opacity, transform;
}

[data-enter="rise"]  { transform: translate3d(0, var(--pricr-rise), 0); }
[data-enter="fade"]  { transform: none; }
[data-enter="left"]  { transform: translate3d(calc(-1 * var(--pricr-slide)), 0, 0); }
[data-enter="right"] { transform: translate3d(var(--pricr-slide), 0, 0); }

/* Etiketten avslöjas som en svepning i stället för en förflyttning, så att
   den behåller sin exakta plats i rutnätet under hela rörelsen. */
[data-enter="wipe"] {
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity   var(--pricr-dur-enter) var(--pricr-ease-out),
    clip-path var(--pricr-dur-enter) var(--pricr-ease-out);
  transition-delay: calc(var(--pricr-i, 0) * var(--pricr-stagger));
}

[data-enter].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* När rörelsen är över lämnas elementet i fred. */
[data-enter].is-settled { will-change: auto; transition: none; }

/* ── Navigationen ──────────────────────────────────────────────────────────
   Ligger fixerad och byter tillstånd vid skroll: den kompakteras och tar det
   rum som just då ligger under den. En avståndshållare i normalflödet bär
   navigationens öppna höjd, så att den fixerade listen aldrig kan flytta
   något i sidan. */
.pricr-nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  color: var(--pricr-field-fg);
  border-bottom: var(--pricr-hairline) solid transparent;
  transition:
    background-color var(--pricr-dur-state) var(--pricr-ease-state),
    border-color     var(--pricr-dur-state) var(--pricr-ease-state),
    color            var(--pricr-dur-state) var(--pricr-ease-state);
}

.pricr-nav-fixed[data-room="paper"] {
  --pricr-field-bg:     var(--pricr-room-paper-bg);
  --pricr-field-fg:     var(--pricr-room-paper-fg);
  --pricr-field-fg-dim: var(--pricr-room-paper-dim);
  --pricr-field-accent: var(--pricr-room-paper-accent);
  --pricr-field-alert:  var(--pricr-room-paper-alert);
  --pricr-field-rule:   var(--pricr-room-paper-rule);
}
.pricr-nav-fixed[data-room="ink"] {
  --pricr-field-bg:     var(--pricr-room-ink-bg);
  --pricr-field-fg:     var(--pricr-room-ink-fg);
  --pricr-field-fg-dim: var(--pricr-room-ink-dim);
  --pricr-field-accent: var(--pricr-room-ink-accent);
  --pricr-field-alert:  var(--pricr-room-ink-alert);
  --pricr-field-rule:   var(--pricr-room-ink-rule);
}
.pricr-nav-fixed[data-room="deep"] {
  --pricr-field-bg:     var(--pricr-room-deep-bg);
  --pricr-field-fg:     var(--pricr-room-deep-fg);
  --pricr-field-fg-dim: var(--pricr-room-deep-dim);
  --pricr-field-accent: var(--pricr-room-deep-accent);
  --pricr-field-alert:  var(--pricr-room-deep-alert);
  --pricr-field-rule:   var(--pricr-room-deep-rule);
}
.pricr-nav-fixed[data-room="forest"] {
  --pricr-field-bg:     var(--pricr-room-forest-bg);
  --pricr-field-fg:     var(--pricr-room-forest-fg);
  --pricr-field-fg-dim: var(--pricr-room-forest-dim);
  --pricr-field-accent: var(--pricr-room-forest-accent);
  --pricr-field-alert:  var(--pricr-room-forest-alert);
  --pricr-field-rule:   var(--pricr-room-forest-rule);
}
.pricr-nav-fixed[data-room="paper"] {
  --pricr-surface-1-bg: #FFFFFF;
  --pricr-surface-rule: rgba(26, 29, 26, 0.10);
  --pricr-nav-veil:     rgba(248, 247, 242, 0.80);
  --pricr-nav-fg:       var(--pricr-ink);
}
:root:not(.light) .pricr-nav-fixed[data-room="paper"] {
  --pricr-surface-1-bg: #424F45;
  --pricr-surface-rule: rgba(217, 222, 217, 0.16);
  --pricr-nav-veil:     rgba(56, 68, 58, 0.80);
  --pricr-nav-fg:       var(--pricr-paper);
}

/* Kompakterat tillstånd: listen tar rummets botten, får sin hårfina linje och
   drar ihop sig. Höjden ändras bara på ett element som ligger utanför
   normalflödet, så ingenting i sidan förskjuts. */
.pricr-nav-fixed.is-compact {
  background: var(--pricr-field-bg);
  border-bottom-color: var(--pricr-field-rule);
}

.pricr-nav-inner {
  min-height: var(--pricr-nav-h);
  transition: min-height var(--pricr-dur-state) var(--pricr-ease-state);
}
.pricr-nav-fixed.is-compact .pricr-nav-inner { min-height: var(--pricr-nav-h-compact); }

.pricr-nav-spacer { height: var(--pricr-nav-h); }

/* Ankarmål hamnar under den fixerade listen, aldrig bakom den. */
.pricr-room { scroll-margin-top: calc(var(--pricr-nav-h) + var(--pricr-space-2)); }

/* ── Rummets etikett stannar kvar när rummet tar över ─────────────────────
   Sticky ändrar inget i flödet och kan därför inte förskjuta något. */
.pricr-room-label {
  position: sticky;
  top: calc(var(--pricr-nav-h-compact) + var(--pricr-space-2));
  z-index: 2;
}

/* ── Hover och fokus ──────────────────────────────────────────────────────
   Tillståndsbyten är korta. Åtgärden markeras med vikt och kontur, aldrig med
   en fylld grön yta, precis som i tokenlagret. */
.pricr-action {
  transition:
    color            var(--pricr-dur-tap) var(--pricr-ease-state),
    border-color     var(--pricr-dur-tap) var(--pricr-ease-state),
    background-color var(--pricr-dur-tap) var(--pricr-ease-state);
}
.pricr-action:hover { color: var(--pricr-field-accent); border-color: currentColor; }

/* Understrykningen växer ur vänsterkanten. Den ritas av ett pseudoelement som
   ligger utanför flödet, så ingenting förskjuts, och den är en hårfin linje i
   samma färg som texten. Ingen toning, ingen yta. */
.pricr-underline { position: relative; }
.pricr-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--pricr-hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pricr-dur-tap) var(--pricr-ease-state);
}
.pricr-underline:hover::after,
.pricr-underline:focus-visible::after { transform: scaleX(1); }

/* ── Figurerna ────────────────────────────────────────────────────────────
   All grafik på sidan är antingen rutnätsmotivet eller en figur ritad ur egen
   mätdata. Ingen dekoration, inga fotografier. */

.pricr-figure { display: block; width: 100%; height: auto; }

/* Figur A, dygnsrutnätet. Cellerna slår an i följd. Sekvensen bärs av
   --pricr-i, som sätts per cell när figuren ritas. */
.pricr-cell-rect {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity   var(--pricr-dur-state) var(--pricr-ease-out),
    transform var(--pricr-dur-state) var(--pricr-ease-out),
    fill      var(--pricr-dur-tap)   var(--pricr-ease-state);
  transition-delay: calc(var(--pricr-i, 0) * var(--pricr-stagger-cell));
}
.is-in .pricr-cell-rect { opacity: 1; transform: none; }

.pricr-cell-hit { cursor: pointer; }
.pricr-cell-hit:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* Figur B och C, kurvor. Ritas ut genom att streckets förskjutning går mot
   noll. Ytan under kurvan tonas in efteråt. */
.pricr-curve {
  stroke-dasharray: var(--pricr-curve-len, 1000);
  stroke-dashoffset: var(--pricr-curve-len, 1000);
  transition: stroke-dashoffset var(--pricr-dur-draw) var(--pricr-ease-draw);
}
.is-in .pricr-curve { stroke-dashoffset: 0; }

.pricr-curve-area {
  opacity: 0;
  transition: opacity var(--pricr-dur-figure) var(--pricr-ease-out);
  transition-delay: calc(var(--pricr-dur-draw) * 0.55);
}
.is-in .pricr-curve-area { opacity: 1; }

.pricr-curve-mark {
  opacity: 0;
  transition: opacity var(--pricr-dur-figure) var(--pricr-ease-out);
  transition-delay: calc(var(--pricr-dur-draw) * 0.8);
}
.is-in .pricr-curve-mark { opacity: 1; }

/* ── Slutläget, direkt ─────────────────────────────────────────────────────
   Med prefers-reduced-motion: reduce renderas allt i sitt slutläge. Inga
   övergångar, ingen förskjutning, och rörelselagret registrerar noll
   observers. Blocket ligger sist så att det vinner över allt ovanför. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }

  [data-enter],
  [data-enter="rise"],
  [data-enter="fade"],
  [data-enter="left"],
  [data-enter="right"],
  [data-enter="wipe"] {
    opacity: 1;
    transform: none;
    clip-path: none;
    will-change: auto;
  }

  .pricr-cell-rect { opacity: 1; transform: none; }
  .pricr-curve { stroke-dasharray: none; stroke-dashoffset: 0; }
  .pricr-curve-area, .pricr-curve-mark { opacity: 1; }
  .pricr-nav-inner { min-height: var(--pricr-nav-h-compact); }
}

/* ==========================================================================
   Bandsystemet: ytor, navigation, kort och figurer
   ==========================================================================
   Sidan växlar mellan två bottnar flera gånger: benvitt papper och samma
   papper en aning nedtonat i ljust läge, två närliggande mörka toner i mörkt.
   Varje växling ska läsas som ett nytt rum. Kanten är skarp, fogen har varken
   linje eller toning.

   Höjd uttrycks olika i de två lägena. I ljust läge med en vit yta och en
   mjuk skugga ur tokenlagret. I mörkt med ytans egen ljushet och en hårfin
   kontur, för att en svart skugga inte syns mot mörkt och bara skulle smutsa
   ner kanten.

   Djupgrönt är kvar och bärs av foten, sidans enda avvikande yta och den enda
   mörka ytan i ljust läge.
   ========================================================================== */

/* ── Ytornas rolltokens per rum ─────────────────────────────────────────── */
.pricr-room--paper {
  --pricr-surface-1-bg:   #FFFFFF;
  --pricr-surface-2-bg:   #FFFFFF;
  --pricr-surface-rule:   rgba(26, 29, 26, 0.08);
  --pricr-surface-shadow: var(--pricr-shadow-2);
  --pricr-nav-veil:       rgba(248, 247, 242, 0.78);
  --pricr-nav-fg:         var(--pricr-ink);
}
:root:not(.light) .pricr-room--paper {
  --pricr-surface-1-bg:   #424F45;
  --pricr-surface-2-bg:   #495946;
  --pricr-surface-rule:   rgba(217, 222, 217, 0.14);
  --pricr-surface-shadow: none;
  --pricr-nav-veil:       rgba(56, 68, 58, 0.80);
  --pricr-nav-fg:         var(--pricr-paper);
}

/* Rummet som växlar mot papper står inte längre på djupgrönt i sidans löpande
   band, och dess höjd uttrycks därför som på papper: en vit yta och en mjuk
   skugga i ljust läge, ytans egen ljushet och en hårfin kontur i mörkt.
   Värdena är papperets, oförändrade.

   Slöjan och listens text blandas ur rummets egen botten i stället för att
   skrivas som fasta värden, så att listen följer bandet i båda lägena utan
   att någon ny kulör införs.

   Foten är undantagen: den är kvar på djupgrönt och har sina egna värden i
   regeln footer.pricr-room--forest ovan. */
.pricr-room--forest:not(footer),
.pricr-nav-fixed[data-room="forest"] {
  --pricr-surface-1-bg:   #FFFFFF;
  --pricr-surface-2-bg:   #FFFFFF;
  --pricr-surface-rule:   rgba(26, 29, 26, 0.08);
  --pricr-surface-shadow: var(--pricr-shadow-2);
  --pricr-nav-veil:       color-mix(in srgb, var(--pricr-room-forest-bg) 80%, transparent);
  --pricr-nav-fg:         var(--pricr-room-forest-fg);
}
:root:not(.light) .pricr-room--forest:not(footer),
:root:not(.light) .pricr-nav-fixed[data-room="forest"] {
  --pricr-surface-1-bg:   #424F45;
  --pricr-surface-2-bg:   #495946;
  --pricr-surface-rule:   rgba(217, 222, 217, 0.14);
  --pricr-surface-shadow: none;
}
.pricr-room--ink,
.pricr-room--deep {
  --pricr-surface-1-bg:   var(--pricr-forest-raise-1);
  --pricr-surface-2-bg:   var(--pricr-forest-raise-2);
  --pricr-surface-rule:   var(--pricr-forest-rule);
  --pricr-surface-shadow: none;
  --pricr-nav-veil:       var(--pricr-forest-veil);
  --pricr-nav-fg:         var(--pricr-paper);
}

/* ── Primitiv: den upphöjda ytan ────────────────────────────────────────── */
.pricr-surface {
  background: var(--pricr-surface-1-bg);
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  border-radius: var(--pricr-radius-3);
  box-shadow: var(--pricr-surface-shadow);
  position: relative;
  z-index: var(--pricr-z-raised);
}
.pricr-surface--2 { background: var(--pricr-surface-2-bg); }
.pricr-surface--tight { border-radius: var(--pricr-radius-2); }
.pricr-surface--pad { padding: var(--pricr-space-5); }

/* ── Primitiv: stjärnfältet ─────────────────────────────────────────────────
   Rutnätsmotivet, upplöst. Ett regelbundet gitter av mycket svaga gröna
   punkter som tunnas ut mot mitten, så att rubriken alltid står på ren
   botten. Statiskt: ingenting rör sig, ingenting roterar, ingen parallax.
   Ligger bakom allt innehåll och tar inga pekhändelser. */
.pricr-starfield { position: relative; overflow: hidden; }
.pricr-starfield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--pricr-z-base);
  pointer-events: none;
  /* Punkterna tas ur rummets egna cellroller, inte ur paletten direkt: fyllda
     celler i grönt, konturer i grått, samma accentregel som rutnätet. Därmed
     följer fältet både rum och läge utan att någon kulör skrivs här. */
  background-image:
    radial-gradient(circle at 1px 1px, var(--pricr-cell-filled) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, var(--pricr-cell-line) 1px, transparent 0);
  background-size: 44px 44px, 92px 92px;
  background-position: 0 0, 22px 34px;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, transparent 30%, #000 100%);
          mask-image: radial-gradient(120% 90% at 50% 45%, transparent 30%, #000 100%);
}
.pricr-starfield > * { position: relative; z-index: var(--pricr-z-raised); }

/* ── Primitiv: åtgärden som piller ──────────────────────────────────────────
   Hierarkin ligger i fyllnaden, inte i storleken. Den primära knappen är den
   enda gröna ytan på sidan och är avsiktligt liten. Den sekundära är
   genomskinlig med kontur. */
.pricr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pricr-space-1);
  font-family: var(--pricr-font-sans);
  font-size: var(--pricr-type-3);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--pricr-radius-pill);
  border: var(--pricr-hairline) solid transparent;
  cursor: pointer;
  color: inherit;
  background: transparent;
  white-space: nowrap;
  transition:
    background-color var(--pricr-dur-tap) var(--pricr-ease-state),
    border-color     var(--pricr-dur-tap) var(--pricr-ease-state),
    color            var(--pricr-dur-tap) var(--pricr-ease-state);
}
.pricr-btn--primary {
  background: var(--pricr-field-accent);
  border-color: var(--pricr-field-accent);
  color: var(--pricr-field-bg);
  font-weight: 600;
}
.pricr-btn--primary:hover { background: var(--pricr-field-fg); border-color: var(--pricr-field-fg); }
.pricr-btn--ghost {
  border-color: var(--pricr-surface-rule);
  background: var(--pricr-surface-1-bg);
}
.pricr-btn--ghost:hover { border-color: var(--pricr-field-fg); }
.pricr-btn--sm { font-size: var(--pricr-type-2); padding: 9px 16px; }

/* ── Den flytande piller-navigationen ───────────────────────────────────────
   Centrerad överst, i en rundad behållare med svag genomskinlighet och blur.
   Ligger fixerad och byter rum vid skroll, precis som listen gjorde förut. En
   avståndshållare i normalflödet bär höjden, så listen kan aldrig förskjuta
   något i sidan. */
.pricr-nav-fixed.pricr-nav-float {
  top: var(--pricr-space-2);
  background: transparent;
  border-bottom: 0;
  z-index: var(--pricr-z-nav);
  pointer-events: none;
}
.pricr-nav-float .pricr-navbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--pricr-space-3);
  margin: 0 auto;
  max-width: var(--pricr-shell);
  min-height: var(--pricr-nav-h);
  padding: var(--pricr-space-1) var(--pricr-space-1) var(--pricr-space-1) var(--pricr-space-3);
  border-radius: var(--pricr-radius-pill);
  background: var(--pricr-nav-veil);
  color: var(--pricr-nav-fg);
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  transition:
    background-color var(--pricr-dur-state) var(--pricr-ease-state),
    border-color     var(--pricr-dur-state) var(--pricr-ease-state),
    color            var(--pricr-dur-state) var(--pricr-ease-state),
    min-height       var(--pricr-dur-state) var(--pricr-ease-state);
}
.pricr-nav-float.is-compact .pricr-navbar { min-height: var(--pricr-nav-h-compact); }
.pricr-nav-float .pricr-navbar > .pricr-nav-links { margin: 0 auto; }

/* Den öppna menyn på smal skärm hänger under pillret som en egen yta. */
.pricr-nav-float .pricr-navmenu {
  pointer-events: auto;
  display: none;
  max-width: var(--pricr-shell);
  margin: var(--pricr-space-1) auto 0;
  padding: var(--pricr-space-3);
  border-radius: var(--pricr-radius-3);
  background: var(--pricr-nav-veil);
  color: var(--pricr-nav-fg);
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
}
.pricr-nav-float .pricr-navmenu.open { display: grid; gap: var(--pricr-space-2); }

.pricr-nav-spacer { height: calc(var(--pricr-nav-h) + var(--pricr-space-4)); }
.pricr-room { scroll-margin-top: calc(var(--pricr-nav-h) + var(--pricr-space-4)); }

/* ── Kort ───────────────────────────────────────────────────────────────── */
.pricr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--pricr-space-3);
}
.pricr-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricr-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pricr-card {
  background: var(--pricr-surface-1-bg);
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  border-radius: var(--pricr-radius-3);
  box-shadow: var(--pricr-surface-shadow);
  padding: var(--pricr-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--pricr-space-2);
  min-width: 0;
}
.pricr-card__title {
  font-family: var(--pricr-font-sans);
  font-size: var(--pricr-type-5);
  font-weight: 500;
  line-height: 1.25;
}
.pricr-card__body { color: var(--pricr-field-fg-dim); }

/* ── Bento ──────────────────────────────────────────────────────────────────
   Sex kort i det mörka bandet. Ikonen sitter i en rundad ruta uppe till
   vänster, texten hänger i kortets underkant, så att raden av ikoner och
   raden av rubriker vardera ligger på en gemensam axel. */
.pricr-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pricr-space-3); }
.pricr-bento .pricr-card { min-height: 300px; gap: var(--pricr-space-2); }
.pricr-bento .pricr-card__title { margin-top: auto; }

.pricr-icon-box {
  width: var(--pricr-space-6);
  height: var(--pricr-space-6);
  border-radius: var(--pricr-radius-2);
  background: var(--pricr-surface-2-bg);
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--pricr-space-8);
}
.pricr-icon-box svg { width: 20px; height: 20px; display: block; }

/* ── Tidslinje ──────────────────────────────────────────────────────────────
   Tre steg på en vågrät linje. Linjen ritas ut vid scroll genom att den
   skalas från vänsterkanten. Skalning rör ingenting i flödet. */
.pricr-timeline { position: relative; }
.pricr-timeline__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: var(--pricr-hairline);
  background: var(--pricr-field-rule);
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pricr-dur-3) var(--pricr-ease-web);
}
.pricr-timeline.is-in .pricr-timeline__rail,
.is-in .pricr-timeline__rail { transform: scaleX(1); }
.pricr-timeline__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pricr-space-5);
}
.pricr-timeline__dot {
  width: 22px;
  height: 22px;
  border-radius: var(--pricr-radius-pill);
  background: var(--pricr-field-bg);
  border: 2px solid var(--pricr-field-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricr-timeline__dot i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--pricr-radius-pill);
  background: var(--pricr-field-accent);
  font-style: normal;
}

/* ── Smal skärm ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pricr-cards--3, .pricr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .pricr-cards--3, .pricr-cards--2, .pricr-bento { grid-template-columns: minmax(0, 1fr); }
  .pricr-bento .pricr-card { min-height: 0; }
  .pricr-icon-box { margin-bottom: var(--pricr-space-4); }
  .pricr-timeline__steps { grid-template-columns: minmax(0, 1fr); gap: var(--pricr-space-4); }
  .pricr-timeline__rail { display: none; }
}

/* ── Slutläget, direkt, för det nya lagret ──────────────────────────────────
   Blocket ovanför nollar allt som fanns då. Detta nollar det som tillkommit
   med bandsystemet, och ligger därför sist i filen. */
@media (prefers-reduced-motion: reduce) {
  .pricr-timeline__rail { transform: scaleX(1); }
  .pricr-nav-float .pricr-navbar { min-height: var(--pricr-nav-h-compact); }
}

/* ==========================================================================
   Sidans stomme
   ==========================================================================
   Det som är gemensamt för samtliga sidor: ordmärket, den flytande
   navigationens innehåll, bandets inre rytm och foten. Ligger här och inte i
   varje sidas style-block, så att de fyra sidorna inte kan glida isär.
   ========================================================================== */

/* ── Ordmärket ── */
.wordmark {
  font-family: var(--pricr-font-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--pricr-track-wordmark);
  color: currentColor;
  text-decoration: none;
  display: inline-block;
}
.wordmark-sub {
  font-family: var(--pricr-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--pricr-track-sub);
  font-size: var(--pricr-type-1);
  color: var(--pricr-field-fg-dim);
  display: block;
}

/* ── Navigationens innehåll ── */
.pricr-navbar .wordmark { font-size: var(--pricr-type-5); }
.pricr-nav-links { display: flex; gap: var(--pricr-space-3); align-items: center; }
.pricr-nav-links a {
  font-family: var(--pricr-font-mono);
  font-size: var(--pricr-type-1);
  letter-spacing: var(--pricr-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.78;
  white-space: nowrap;
  transition: opacity var(--pricr-dur-tap) var(--pricr-ease-state);
}
.pricr-nav-links a:hover,
.pricr-nav-links a:focus-visible,
.pricr-nav-links a.active { opacity: 1; }
.nav-tools { display: flex; align-items: center; gap: var(--pricr-space-1); margin-left: auto; }

.theme-toggle {
  background: transparent;
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  border-radius: var(--pricr-radius-pill);
  width: var(--pricr-space-4);
  height: var(--pricr-space-4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: inherit;
  opacity: 0.78;
  flex-shrink: 0;
  transition: opacity var(--pricr-dur-tap) var(--pricr-ease-state),
              border-color var(--pricr-dur-tap) var(--pricr-ease-state);
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: var(--pricr-space-2); height: var(--pricr-space-2); }

.nav-login {
  font-family: var(--pricr-font-mono);
  font-size: var(--pricr-type-1);
  letter-spacing: var(--pricr-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  padding: 0 var(--pricr-space-1);
}

.hamburger {
  display: none;
  background: transparent;
  border: var(--pricr-hairline) solid var(--pricr-surface-rule);
  border-radius: var(--pricr-radius-pill);
  width: var(--pricr-space-4); height: var(--pricr-space-4);
  cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  flex-shrink: 0;
  color: inherit;
}
.hamburger span { display: block; width: 16px; height: 1px; background: currentColor; }
.pricr-navmenu a {
  font-family: var(--pricr-font-mono);
  font-size: var(--pricr-type-2);
  letter-spacing: var(--pricr-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

/* ── Bandets inre rytm ── */
.room-inner { padding-top: var(--pricr-space-12); padding-bottom: var(--pricr-space-12); }

/* ── Angränsning: två rum i följd på samma botten ──────────────────────────
   När grannarna delar botten finns ingen kant att läsa, och deras paddingar
   staplas till ett dubbelt luftgap. Det andra rummet halverar därför sin
   toppadding, så att fogen mäter ett bandavstånd och inte två.

   Regeln gäller varianterna, inte enskilda sidor: två rum av samma variant
   har alltid samma botten, i båda lägena. Foten träffas aldrig, dess inre
   heter .foot och inte .room-inner, och den har dessutom aldrig samma botten
   som bandet ovanför. */
.pricr-room--paper  + .pricr-room--paper  > .room-inner,
.pricr-room--forest + .pricr-room--forest > .room-inner,
.pricr-room--ink    + .pricr-room--ink    > .room-inner,
.pricr-room--deep   + .pricr-room--deep   > .room-inner {
  padding-top: var(--pricr-space-6);
}
.room-head { max-width: var(--pricr-measure); }
.room-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.room-title {
  font-family: var(--pricr-font-serif);
  font-weight: 600;
  font-size: var(--pricr-type-6);
  line-height: 1.14;
  letter-spacing: var(--pricr-track-display);
  margin-top: var(--pricr-space-2);
  max-width: 26ch;
}
.room-head--center .room-title { margin-left: auto; margin-right: auto; }
.room-lead {
  font-size: var(--pricr-type-4);
  color: var(--pricr-field-fg-dim);
  max-width: 58ch;
  margin-top: var(--pricr-space-3);
}
.room-head--center .room-lead { margin-left: auto; margin-right: auto; }
.room-body { max-width: var(--pricr-measure); margin-top: var(--pricr-space-3); }
.room-body p + p { margin-top: var(--pricr-space-3); }
.room-actions { display: flex; flex-wrap: wrap; gap: var(--pricr-space-2); margin-top: var(--pricr-space-6); }
.room-actions--center { justify-content: center; }
.accent { color: var(--pricr-field-accent); font-style: normal; }

.terms { display: flex; flex-wrap: wrap; gap: var(--pricr-space-4); margin-top: var(--pricr-space-6); }
.term {
  font-family: var(--pricr-font-mono);
  font-size: var(--pricr-type-1);
  letter-spacing: var(--pricr-track-label);
  text-transform: uppercase;
  color: var(--pricr-field-fg-dim);
}

/* ── Foten ── */
.foot { padding-top: var(--pricr-space-8); padding-bottom: var(--pricr-space-8); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--pricr-space-6);
}
.foot-legal, .foot-links { display: grid; gap: 6px; }
.foot-legal span, .foot-links a, .foot-links button {
  font-family: var(--pricr-font-mono);
  font-size: var(--pricr-type-2);
  color: var(--pricr-field-fg-dim);
  text-decoration: none;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer;
}
.foot-legal a { color: inherit; }
.foot-links a:hover, .foot-links button:hover, .foot-legal a:hover { color: var(--pricr-field-fg); }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Länkraden faller ihop till hamburgaren när pillret inte längre rymmer
   den. Gränsen är mätt, inte gissad: vid 1023 px trängs länkarna, ordmärket
   och de tre verktygen ut ur behållarens högerkant.

   Från samma bredd räknas navigationen som en pekskärmsnavigation: varje
   träffyta i pillret och i den öppna menyn är minst 44 gånger 44 px. Måtten
   är mätta i Playwright, inte uppskattade. */
@media (max-width: 1023px) {
  .pricr-nav-links, .nav-login { display: none; }
  .hamburger { display: flex; }

  .hamburger,
  .theme-toggle { width: 44px; height: 44px; }
  .pricr-navbar .wordmark { display: flex; align-items: center; min-height: 44px; }
  .pricr-navmenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .pricr-nav-float .pricr-navmenu.open { gap: var(--pricr-space-1); }
}

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pricr-space-4); }
  .room-inner { padding-top: var(--pricr-space-10); padding-bottom: var(--pricr-space-10); }
  .pricr-room--paper  + .pricr-room--paper  > .room-inner,
  .pricr-room--forest + .pricr-room--forest > .room-inner,
  .pricr-room--ink    + .pricr-room--ink    > .room-inner,
  .pricr-room--deep   + .pricr-room--deep   > .room-inner {
    padding-top: var(--pricr-space-5);
  }

  /* Foten är på en telefon en lista att träffa med tummen, inte en tät
     kolumn med radavstånd på sex pixlar. */
  .foot-links { gap: 0; }
  .foot-links a,
  .foot-links button {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Knapparna når 44 px i höjd även när de står ensamma i ett band. */
  .pricr-btn { min-height: 44px; }
  .room-actions .pricr-btn { min-height: 48px; }
}

/* Vid 360 px räcker inte bredden till ordmärket i full grad plus de tre
   verktygen. Ordmärket krymper ett steg och pillrets vänstermarginal med det,
   i stället för att något tillåts sticka ut ur behållaren. */
@media (max-width: 400px) {
  .pricr-navbar .wordmark { font-size: var(--pricr-type-4); letter-spacing: var(--pricr-track-sub); }
  .pricr-nav-float .pricr-navbar { padding-left: var(--pricr-space-2); gap: var(--pricr-space-2); }
}