/* Genereret af build.mjs: skallens <style> for "main" + src/landing.css. */

/* ===========================================================================
   Stories - statisk skal.
   Implementeret efter designforslaget af 2026-08-10:
   "Laesningen faar skaermen, vaerktoejet faar et sted at bo."

   Baerende idé: app'en har to tilstande. LAESNING er default og hele fladen,
   uden betjening oven paa teksten. VAERKSTEDET er ark man selv kalder frem.
   Afsnittet er enheden - man scroller lodret i det og bladrer i foden.

   Ingen eksterne assets, ingen webfonts, ingen build. Alt er i denne fil.
   =========================================================================== */

:root{
  --paper:#FAF7F2; --surface:#FFFDFA; --field:#F4F1EB;
  --ink:#211D19; --ink-2:#6A6259; --ink-3:#948C80;
  --line:#E7E0D5; --accent:#A65A32; --warn:#8E3A28;
  --shadow-sheet:0 -18px 40px rgb(0 0 0 / .18);
  --scrim:rgb(33 29 25 / .34);

  --font-prose:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --prose:19px; --prose-lh:1.72; --measure:66ch;
  --title:28px;
  --ui-lg:17px; --ui-md:15px; --ui-sm:13px; --micro:11px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:26px; --sp-7:34px;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --tap:44px;
  --dur:140ms; --dur-sheet:220ms;
}
html[data-theme="sepia"]{
  --paper:#F4ECDC; --surface:#FBF5E9; --field:#EDE3CE;
  --line:#DFD2B8; --ink:#241F18; --ink-2:#655C4B; --ink-3:#8E836E;
}
html[data-theme="dark"]{
  --paper:#16140F; --surface:#1B1813; --field:#141210;
  --ink:#E4DDD1; --ink-2:#A39B8E; --ink-3:#7A7368;
  --line:#2E2A23; --accent:#D2895C; --warn:#C1553F;
  --shadow-sheet:0 -18px 40px rgb(0 0 0 / .35);
  --scrim:rgb(0 0 0 / .55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html[data-theme="system"]{
    --paper:#16140F; --surface:#1B1813; --field:#141210;
    --ink:#E4DDD1; --ink-2:#A39B8E; --ink-3:#7A7368;
    --line:#2E2A23; --accent:#D2895C; --warn:#C1553F;
    --shadow-sheet:0 -18px 40px rgb(0 0 0 / .35);
    --scrim:rgb(0 0 0 / .55);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
/* Ingen vandret scroll nogen steder. min-width:0 er den vigtige: uden den
   naegter et grid- eller flex-barn at blive smallere end sit indhold og
   skubber hele siden bredere. */
html,body{max-width:100%;overflow-x:hidden}
.row>*,.col>*,.grid>*,.foot>*,.bar>*{min-width:0}
body{
  background:var(--paper); color:var(--ink);
  font:var(--ui-md)/1.55 var(--font-ui);
  -webkit-text-size-adjust:100%;
  padding-env:0;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.hide{display:none !important}
.micro{font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.muted{color:var(--ink-2)} .sm{font-size:var(--ui-sm)} .spacer{flex:1}
.row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.wrap{max-width:640px;margin:0 auto;padding:0 var(--sp-5)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- Knapper ---------- */
.btn{
  min-height:var(--tap);padding:0 var(--sp-5);border-radius:var(--r-pill);
  border:1px solid var(--ink-3);background:var(--surface);
  font-size:var(--ui-md);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  transition:border-color var(--dur),background var(--dur);
}
.btn:hover:not(:disabled){border-color:var(--ink-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#FFFDFA;font-weight:600}
html[data-theme="dark"] .btn.primary{color:#FFFDFA}
@media (prefers-color-scheme:dark){html[data-theme="system"] .btn.primary{color:#FFFDFA}}
.btn.danger{border-color:var(--warn);color:var(--warn);background:none}
.btn.danger:hover:not(:disabled){border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2);padding:0 var(--sp-3)}
.btn.ghost:hover{color:var(--ink)}
.btn.wide{width:100%}
/* Foldeknap. "Advanced options" var en micro-label i en usynlig knap og blev
   overset (ejeren 2026-08-12). Nu ser den ud som noget man kan trykke paa. */
.disclose{
  width:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-4);margin:var(--sp-4) 0 var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--field);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--ui-md);font-weight:600;color:var(--ink);text-align:left;
}
.disclose>span:first-child{white-space:nowrap}
.disclose .sum{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.disclose:hover{border-color:var(--ink-3)}
.disclose .chev{color:var(--ink-3);font-size:var(--ui-lg);line-height:1;
  display:inline-block;transition:transform var(--dur)}
.disclose[aria-expanded="true"]{border-color:var(--ink-3)}
.disclose[aria-expanded="true"] .chev{transform:rotate(90deg)}
.icon{
  width:var(--tap);height:var(--tap);border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:var(--ui-lg);
}
.icon:hover{color:var(--ink);background:var(--field)}

/* ---------- Laesning ---------- */
/* Fremdrift er information, ikke betjening: 2 px i selve skaermkanten. */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);
  z-index:60;transition:width var(--dur) linear;
}
.bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  padding-top:calc(var(--sp-2) + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:transform var(--dur-sheet) ease,border-color var(--dur);
}
.bar.scrolled{border-bottom-color:var(--line)}
/* Ved scroll ned glider bjaelken vaek. Scroll op henter den. Ingen bjaelke
   der ligger oven paa prosaen. */
.bar.away{transform:translateY(-105%)}
.bar .title{
  font-family:var(--font-prose);font-size:var(--ui-lg);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.reader{padding-top:calc(var(--tap) + var(--sp-5) + env(safe-area-inset-top));padding-bottom:var(--sp-7)}
.sec-head{margin-bottom:var(--sp-5)}
.sec-head .meta{margin-top:var(--sp-1);color:var(--ink-3);font-size:var(--ui-sm)}
.prose{
  font-family:var(--font-prose);
  font-size:var(--prose);line-height:var(--prose-lh);
  max-width:var(--measure);margin:0 auto;
  overflow-wrap:anywhere;
}
.prose p{margin:0 0 1.15em}
.steer-note{
  font-family:var(--font-ui);font-size:var(--ui-sm);color:var(--ink-2);
  border-left:2px solid var(--accent);padding:var(--sp-1) var(--sp-3);
  margin:0 auto var(--sp-6);max-width:var(--measure);font-style:italic;
}

/* Afsnitsfoden: her MAA betjeningen fylde. */
.foot{
  max-width:var(--measure);margin:var(--sp-7) auto 0;
  border-top:1px solid var(--line);padding-top:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.foot .totals{display:flex;justify-content:space-between;gap:var(--sp-3);color:var(--ink-3);font-size:var(--ui-sm)}
.foot .live{color:var(--accent);font-size:var(--ui-sm)}

/* ---------- Ark (sheets) ---------- */
.scrim{
  position:fixed;inset:0;background:var(--scrim);z-index:80;
  opacity:0;pointer-events:none;transition:opacity var(--dur-sheet) ease;
}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--surface);border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-sheet);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform var(--dur-sheet) cubic-bezier(.32,.72,0,1);
  padding:var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.sheet.open{transform:translateY(0)}
.sheet-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.sheet-head h2{font-family:var(--font-prose);font-size:21px;font-weight:400}
.sheet .group{margin-bottom:var(--sp-6)}
.sheet .group>.micro{display:block;margin-bottom:var(--sp-3)}
@media(min-width:760px){
  /* Lukket sheet paa desktop var opacity:0 men stadig klikbar: den laa
     usynligt centreret med z-index 90 og opslugte klik og tastetryk over
     alt andet (bl.a. login-feltet). Derfor visibility+pointer-events her.
     Rettet 2026-08-10. */
  .sheet{
    left:50%;right:auto;bottom:auto;top:50%;width:min(620px,92vw);
    transform:translate(-50%,-42%) scale(.98);opacity:0;
    visibility:hidden;pointer-events:none;
    transition:transform var(--dur-sheet) cubic-bezier(.32,.72,0,1),
      opacity var(--dur-sheet) ease,visibility 0s linear var(--dur-sheet);
    border-radius:var(--r-lg);border:1px solid var(--line);
    max-height:86vh;
  }
  .sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;
    visibility:visible;pointer-events:auto;transition-delay:0s}
}

/* ---------- Felter ---------- */
.field{margin-bottom:var(--sp-4)}
.field>label{display:block;font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:var(--sp-2)}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;min-height:var(--tap);padding:var(--sp-3);
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--ui-md);
}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.hint{font-size:var(--ui-sm);color:var(--ink-2);margin-top:var(--sp-2)}
.seg{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.seg button{
  min-height:var(--tap);padding:0 var(--sp-4);border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:var(--ui-sm);color:var(--ink-2);background:var(--surface);
}
.seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* Heat-skyderen. Native range med app'ens farver - en custom slider ville skulle
   genopfinde tastaturbetjening og touch-target gratis. */
.heat input[type=range]{
  width:100%;height:var(--tap);margin:0;background:transparent;-webkit-appearance:none;appearance:none;
}
.heat input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
.heat input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.heat input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-11px;
  border-radius:50%;background:var(--accent);border:none;cursor:pointer;
}
.heat input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;
}
.heat .ticks{display:flex;justify-content:space-between;font-size:var(--micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.heat .now{font-family:var(--font-prose);font-size:18px;font-weight:400;color:var(--ink)}
.tb-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:980px){.tb-grid{grid-template-columns:repeat(2,1fr)}}
.tb-grid .prose-sample{font-family:var(--font-prose);font-size:15px;line-height:1.6;white-space:pre-wrap;margin-top:var(--sp-3)}

/* ---------- Kort og lister ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.item{
  display:block;width:100%;text-align:left;padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
}
.sticky-new{
  position:sticky;top:var(--tap);z-index:40;
  background:var(--paper);padding:var(--sp-2) 0 var(--sp-3);
  margin:calc(var(--sp-2) * -1) 0 0;
}
.item:last-child{border-bottom:0}
.item .t{font-family:var(--font-prose);font-size:var(--ui-lg);line-height:1.3}
.item .m{margin-top:var(--sp-1);font-size:var(--ui-sm);color:var(--ink-3)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 6px}
.note{padding:var(--sp-4);border-radius:var(--r-md);font-size:var(--ui-sm);
  background:var(--field);border:1px solid var(--line);margin-bottom:var(--sp-4)}
.note b{display:block;margin-bottom:var(--sp-1);font-size:var(--ui-md)}
.note.bad{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));
  background:color-mix(in srgb,var(--warn) 9%,var(--field))}
.note.ok{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,var(--field))}
.locked{border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--sp-4);color:var(--ink-3)}
.locked .pair{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-1) 0;font-size:var(--ui-sm)}

/* ---------- Skrivning ---------- */
.writing{padding-top:calc(var(--tap) + var(--sp-6) + env(safe-area-inset-top));padding-bottom:var(--sp-7)}
.beat{
  max-width:var(--measure);margin:0 auto var(--sp-6);
  border-left:2px solid var(--accent);padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-prose);font-size:16px;line-height:1.55;color:var(--ink-2);
}
/* Pladsen reserveres, saa intet hopper naar prosaen kommer. */
.stream{min-height:52vh}

/* ---------- Skriver / faerdig ----------
   To tegn der besvarer det samme spoergsmaal fra hver sin side: kommer der
   mere? Markoeren blinker mens der goer; reglen staar naar der ikke goer.
   Begge ligger I teksten, ikke over eller under den - statuslinjen og foden
   er uden for synsfeltet naar man laeser med nede i prosaen. */
.caret{
  display:inline-block;width:.5em;height:1.05em;margin-left:.06em;
  vertical-align:-.16em;background:var(--accent);
  animation:caret 1.05s steps(2,end) infinite;
}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.endmark{
  max-width:var(--measure);margin:var(--sp-6) auto 0;
  display:flex;align-items:center;gap:var(--sp-3);color:var(--ink-3);
}
.endmark::before,.endmark::after{content:"";flex:1;height:1px;background:var(--line)}
.endmark span{
  font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
}
/* Informationen ligger i ORDENE, ikke i blinket. Slaar man animationer fra,
   staar markoeren stille - og slutmarkoeren siger stadig det samme. */
@media (prefers-reduced-motion:reduce){
  .caret{animation:none;opacity:.55}
}
.dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* Prikkerne stod og hoppede ogsaa for den der har slaaet bevaegelse fra. De
   staar stille nu - og det koster ingen information, fordi sekundtaelleren
   ved siden af er den der baerer "den arbejder stadig". */
@media (prefers-reduced-motion:reduce){ .dots::after{animation:none;content:"..."} }

/* ---------- Arbejdsbjaelken (2026-09-08) ----------
   Ejeren: *"tror det skal vaere mere tydeligt at den arbejder og ikke er
   gaaet i staa"*. Planlaegningen er app'ens laengste enkeltkald - maalt til
   85 sekunder 8/9 - og indtil nu var hele signalet en linje graa tekst der
   skiftede én gang. Et stillestaaende ord ligner en app der er gaaet ned.

   DEN ER UBESTEMT MED VILJE. Der findes ingen fremdrift at maale paa: kaldet
   er ikke streamet, saa serveren ved lige saa lidt som browseren hvor langt
   modellen er. En procent der talte op mod 100 ville vaere digtet, og den
   ville lyve praecis naar den betyder mest - de sidste tyve sekunder.
   Bjaelken siger "der sker noget", sekundtaelleren siger "hvor laenge", og
   ingen af dem paastaar at vide hvornaar. Samme regel som skrivevisningen:
   ingen procent der lyver. */
.workbar{position:relative;overflow:hidden;height:3px;border-radius:2px;
  background:color-mix(in oklab, var(--ink) 12%, var(--paper));margin:var(--sp-3) 0}
.workbar>i{position:absolute;top:0;bottom:0;width:38%;border-radius:2px;
  background:var(--accent-fill);animation:workslide 1.5s ease-in-out infinite}
@keyframes workslide{0%{left:-38%}100%{left:100%}}
/* Uden bevaegelse: en fyldt, rolig bjaelke. Den siger stadig "i gang", og den
   er stadig et andet syn end den tomme rende foer man trykkede. */
@media (prefers-reduced-motion:reduce){
  .workbar>i{animation:none;left:0;width:100%;opacity:.5}
}
.worksec{font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- Afkrydsning ----------
   Kun brugt paa oprettelsesfanen. Native checkbox med app'ens accentfarve -
   en custom boks ville skulle genopfinde tastatur og touch-target gratis. */
.check{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-3)}
.check input[type=checkbox]{
  width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.check label{font-size:var(--ui-md);line-height:1.4;cursor:pointer}

/* ---------- Admin · brugere og forbrug ----------
   Tal og tabeller. Ingen nye farver: alt henter fra de samme variabler som
   resten af papiret, saa fladen foelger med i lys, sepia og moerk. */
.kpis{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(136px,1fr))}

/* ---------- Stjerner ----------
   Fem knapper i tekststoerrelse. En stjerne skal kunne gives med ét tryk paa
   en telefon, saa maalet er --tap som alt andet man rammer med en finger.
   Tegnet selv er aria-hidden - knappen baerer teksten "3 out of 5". */
/* Centreret 2026-08-15 (ejeren). Kortet er en afslutning og ikke et
   felt i en formular; venstrestillet stod det som endnu en raekke i
   foden. Baade etiketten, stjernerne og hjaelpeteksten flytter med -
   ellers staar stjernerne i midten under en overskrift i kanten. */
#ratingCard{text-align:center}
.stars{display:flex;justify-content:center;gap:var(--sp-1);margin-top:var(--sp-2)}
.star{
  min-width:var(--tap);min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--ink-3);
  background:none;border:1px solid transparent;border-radius:var(--r-2);
  cursor:pointer;transition:color .12s ease,border-color .12s ease;
}
.star[aria-pressed="true"]{color:var(--accent)}
.star:hover{border-color:var(--line)}
.star:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Fordelingen i admin ----------
   Bjaelken er bredden, tallet staar ved siden af. En laengde alene kan ikke
   laeses af den der ikke ser den. */
.ratrow{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.ratlab{width:2.4em;text-align:right;font-size:var(--ui-sm);color:var(--ink-2)}
.ratbar{flex:1;height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.ratbar>i{display:block;height:100%;background:var(--accent)}
.ratn{width:8.5em;text-align:right;font-size:var(--ui-sm);color:var(--ink-2);
      font-variant-numeric:tabular-nums}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4)}
.kpi .k{font-size:var(--micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.kpi .v{font-family:var(--font-prose);font-size:23px;line-height:1.2;margin-top:var(--sp-2);
  font-variant-numeric:tabular-nums}
.meter{height:8px;border-radius:var(--r-pill);background:var(--field);border:1px solid var(--line);overflow:hidden}
.meter>span{display:block;height:100%;background:var(--accent)}
.meter.hot>span{background:var(--warn)}
/* Soejlegrafen. preserveAspectRatio:none straekker koordinatsystemet, saa
   grafen fylder bredden - derfor staar aksetekst som HTML udenfor og ikke
   som <text> inde i SVG'en, hvor den ville blive traadt skaev. */
.spark{width:100%;height:120px;display:block}
.spark rect{fill:var(--accent)}
.spark rect.zero{fill:var(--line)}
.spark line{stroke:var(--line)}
.two{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:var(--sp-3)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--ui-sm)}
table.tbl th{text-align:left;font-size:var(--micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;white-space:nowrap;
  padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;border-bottom:1px solid var(--line)}
table.tbl td{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl th.num,table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{display:inline-block;padding:2px var(--sp-2);border-radius:var(--r-pill);
  font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);background:var(--field);color:var(--ink-2)}
.badge.good{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.badge.stop{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));
  background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}
/* Tabelknapper er lavere end --tap. Bevidst: en raekke med tre handlinger i
   fuld hoejde goer listen ulaeselig, og det her er en admin-flade paa desktop. */
.btn.tiny{min-height:32px;padding:0 var(--sp-3);font-size:var(--ui-sm)}
input.mini{width:96px;min-height:34px;padding:var(--sp-1) var(--sp-2)}
input[type=number].mini{text-align:right}
.setrow{display:flex;gap:var(--sp-4);justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow .lbl{flex:1;min-width:180px}
.setrow .lbl b{font-weight:600}
.setrow .hint{margin-top:var(--sp-1)}
/* Udbyderbeskeder i fejllisten kan vaere lange. De klippes VISUELT til to
   linjer - teksten smides ikke vaek, den staar hel i title-attributten. */
.clip2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Temabjaelke: samme maaler som forbrugsbaren, bare i en raekke med tal. */
.barrow{display:grid;grid-template-columns:minmax(90px,1.2fr) minmax(0,3fr) auto;
  gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;font-size:var(--ui-sm)}
.cols4{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ---------- Desktop ---------- */
@media(min-width:900px){
  :root{--prose:20px;--prose-lh:1.75}
  .reader,.writing{padding-top:calc(var(--tap) + var(--sp-7))}
  .deck .reader{padding-left:0;padding-right:0}
  /* Spalten vokser ikke. Venstre gyde bliver en stille afsnitsliste. */
  .deck{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,640px);
        gap:var(--sp-7);justify-content:center;padding:0 var(--sp-5)}
  .rail{position:sticky;top:calc(var(--tap) + var(--sp-6));align-self:start;
        padding-top:var(--sp-2);border-right:1px solid var(--line)}
  .rail .micro{display:block;margin-bottom:var(--sp-3)}
  .rail button{display:block;width:100%;text-align:left;padding:var(--sp-2) var(--sp-3) var(--sp-2) 0;
        color:var(--ink-3);font-size:var(--ui-sm)}
  .rail button[aria-current="true"]{color:var(--accent);font-weight:600}
  /* Kun vandret. Skriver man padding:0 her, nulstilles ogsaa afstanden til
     topbjaelken, og overskriften havner bag den. */
  .deck .wrap{padding-left:0;padding-right:0}
}
@media(max-width:899px){
  .rail{display:none}
  /* Telefonens topbjaelke har kun to greb: Aa og Memory. Skriv videre naas
     fra afsnitsfoden og fra styrings-arket - det skal ikke ombryde
     bjaelken til to raekker og aede laeseflade.
     Justér-knappen stod her indtil 2026-08-15 og er helt vaek; arket naas
     fra afsnitsfodens "See the plan"-knap. */
  #btnSteer{display:none !important}
}

/* ---------- Sitets accent ----------
   Efter porten er HELE paletten Fase 0's, ens paa alle sites - ejerens
   beslutning. Accenten er den ene undtagelse, saa de to sites kan kendes fra
   hinanden uden at forgrene skallen: hovedsitet beholder Fase 0's braendte
   orange, undersitet faar en falmet roed.

   Den staar EFTER Fase 0's tre temablokke, ellers ville dark-blokken vinde.
   Den moerke variant regnes med color-mix frem for at vaere endnu et token:
   build.mjs kender kun de placeholders den kender, og en ny ville kraeve en
   aendring i byggescriptet - præcis det SITE-1 siger et nyt site ikke maa
   koste. Browsere uden color-mix beholder bare basisaccenten.
   ---------------------------------------------------------------------- */
/* TRE ROLLER, ÉT TOKEN (etape 34).
   --accent         tekst, kanter, smaa flader. Loeftes paa moerk grund, fordi
                    en maettet moerkeroed er ulaeselig som SKRIFT paa naesten sort.
   --accent-display ordmaerket og anden STOR accenttekst. Loeftes mindre, fordi
                    kravet dér er 3:1 og ikke 4,5:1 - saa kan farven vaere dybere.
   --accent-fill    baggrunde. Loeftes ALDRIG: her er farven fladen, og det er
                    blaekket der skal kunne laeses. Et loeftet fyld betalte for
                    tekstens problem og gjorde knappen stoevet.
   Alle tre regnes af #A65A32, saa site nummer tre faar dem uden en linje
   data eller en placeholder mere (SITE-5). */
:root{ --accent:#A65A32; --accent-display:#A65A32; --accent-fill:#A65A32 }
html[data-theme="dark"]{
  --accent:color-mix(in oklab, #A65A32 76%, #ffffff);
  --accent-display:color-mix(in oklab, #A65A32 90%, #ffffff);
}
@media (prefers-color-scheme:dark){
  html[data-theme="system"]{
    --accent:color-mix(in oklab, #A65A32 76%, #ffffff);
    --accent-display:color-mix(in oklab, #A65A32 90%, #ffffff);
  }
}
/* ---------- Fase 1's egne flader ----------
   Aldersport, geoblokering, landingsside og konto findes ikke i Fase 0, fordi
   Fase 0 kun havde én bruger og ingen fremmede. De bruger Fase 0's klasser og
   tokens - der er ingen ny palet her, kun tre layouts. */
.pane{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
/* ALDERSPORTEN SOM LAG, ikke som erstatning (2026-10-10).
   Indtil i dag slog boot'en forsiden fra og satte porten i stedet. En
   renderende crawler endte derfor paa en side hvis eneste tekst var portens
   og de lukkede dialogers etiketter, og Google doemte bound-forsiden
   "Soft 404" den 9/10 (crawlet 08:32, fetch SUCCESSFUL, robots ALLOWED -
   altsaa en INDHOLDSDOM, ikke en spaerre).
   Laget lader forsiden blive staaende i det renderede dokument. For et
   menneske er porten uaendret: samme tekst, samme tidspunkt, samme krav, og
   `port-aaben` laaser body saa der ikke kan scrolles videre uden et ja.
   Det er scroll-laasen der goer de to krav forenelige: en crawler laeser
   DOM'et og scroller ikke, et menneske kan ikke komme forbi.
   ⚠️ Baggrunden er var(--paper), altsaa body's egen: laget skal se ud
   PRAECIS som porten gjorde foer, saa ingen bruger ser en aendring.
   z-index 70 ligger over forsiden og dens bjaelke (<=60) og under
   ark-scrim'en (80), som alligevel ikke kan aabnes mens porten er oppe. */
#viewAgegate.laag{position:fixed;inset:0;z-index:70;overflow-y:auto;background:var(--paper)}
body.port-aaben{overflow:hidden}
.pane .wrap{width:100%}
.lede{font-family:var(--font-prose);font-size:21px;line-height:1.5;color:var(--ink-2)}
.hero{padding-top:14vh}
.hero h1{font-family:var(--font-prose);font-size:clamp(30px,7vw,46px);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.cards{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
@media(min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}}
/* ---------- Forsidens tre skridt: kort og ikke bare tekstblokke ----------
   De tre skridt havde ingen CSS uden for arkene: tre bare tekstblokke med
   16px imellem, og intet der sagde hvor det ene sluttede og det naeste
   begyndte. Rammen sidder paa BLOKKEN og ikke paa grid'et, saa den samme
   regel virker i én kolonne under 720px og i tre over - uden en ny media
   query. Ingen nye tokens: flade, streg, radius og polstring findes alle. */
#page-home .cards>.group{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-5)}
/* Nummeret er trukket ud af overskriften og staar paa egen linje.
   Handoveren skrev --accent-display, og det var det rigtige valg indtil
   kortet kom ind under nummeret. MAALT paa det byggede artefakt, 2026-09-02:
   --accent-display paa kortets flade i moerkt tema giver 4,38 mod papiret paa
   hovedsitet, men 2,84 paa undersitet - og --accent-display er defineret ved
   at den skal holde 3:1. Den rolle beskriver altsaa sig selv ud af opgaven i
   det ene af de to temaer der er standard. --accent er den rolle der loeftes
   for TEKST og maaler 5,07 og 3,94 paa samme flade. I lyst og sepia er de to
   roller den SAMME farve, saa skiftet aendrer intet uden for moerkt tema, og
   den braendte orange er urert. */
#page-home .stepno{font-family:var(--font-prose);font-size:30px;line-height:1;
  color:var(--accent)}
/* Overskriften stod i micro-stilen: versaler i den mindste grad, altsaa
   MINDRE end sin egen broedtekst. Hierarkiet var vendt om. Den staar nu ét
   trin over teksten i stoerrelse OG ét blaek moerkere - dobbelt kodet, saa
   det ogsaa holder for den der ikke ser forskel paa to graa. */
#page-home .steph{font-size:var(--ui-lg);font-weight:600;color:var(--ink);
  margin-top:var(--sp-2)}
/* Skridtets broedtekst. Egen klasse og IKKE en efterkommer-selektor:
   #page-home .cards>.group .hint ville have hoejere specificitet end
   #page-home .hint i 640px-blokken laengere nede og dermed have slaaet
   BL-180's gulv paa 16px ihjel paa en telefon. Samme specificitet og
   tidligere i filen giver 15px paa store skaerme og 16px paa telefonen. */
#page-home .stepbody{font-size:var(--ui-md);line-height:1.55}
/* Sektionslabelen faar sidetitlens stemme, ét trin mindre. Den staar over det
   eneste afsnit paa siden der forklarer selve produktet, og en label i den
   mindste grad laeste den som mindre vigtig end manchetten ovenover.
   Ny klasse og ikke .micro: #viewLanding .micro baerer de oevrige labels paa
   de offentlige sider og skal blive staaende hvor den er. */
#page-home .seclabel{font-family:var(--font-prose);font-size:24px;line-height:1.2;
  font-weight:400;color:var(--ink)}
/* Krypteringsafsnittet er flyttet ned til beslutningspunktet og sat paa en
   flade. "Tor jeg give min mail?" er et spoergsmaal man foerst har EFTER at
   have forstaaet produktet; ovenover var det broedtekst nummer tre, nedenunder
   er det et svar. Ingen kant: fladen alene skiller det ud, og en kant mere paa
   en side der nu har tre, ville goere den til et skema. */
/* .encbox er fjernet 8/9 sammen med krypteringsboksen paa forsiden. */
/* MOERKT TEMA: fladerne skal kunne SES.
   Paa hovedsitet er --surface (#1B1813) kun ét trin over --paper (#16140F).
   Paa undersitet er --surface faktisk MOERKERE end --paper (#0D0B0C mod
   #131013), saa et kort paa --surface ville synke ned i siden i stedet for at
   loefte sig - og undersitet staar i moerkt tema som standard. Det samme
   gaelder --field, der er moerkere end --paper i BEGGE moerke paletter.
   Loeftet regnes derfor af --paper og gaelder begge sites uden en linje i
   sites.json: samme greb som accenten allerede bruger i dark, ingen ny token.
   Lys og sepia bruger --surface, --line og --field direkte og er urerte. */
html[data-theme="dark"] #page-home .cards>.group{
  background:color-mix(in oklab, var(--ink) 7%, var(--paper));
  border-color:color-mix(in oklab, var(--ink) 16%, var(--paper))}
@media (prefers-color-scheme:dark){
  html[data-theme="system"] #page-home .cards>.group{
    background:color-mix(in oklab, var(--ink) 7%, var(--paper));
    border-color:color-mix(in oklab, var(--ink) 16%, var(--paper))}
}
.qa{margin-top:var(--sp-6)}
.qa h3{font-family:var(--font-prose);font-size:19px;font-weight:400;margin-top:var(--sp-5)}
.qa p{font-size:var(--ui-md);color:var(--ink-2);margin-top:var(--sp-2)}
/* Bundlinjen baerer aldersgraensen og linkene til vilkaar og privatliv, og
   stod paa 3,1:1. Netop det afsnit maa ikke vaere det svageste paa siden.
   Stoerrelsen er uaendret; kun blaekket. */
.legal{border-top:1px solid var(--line);margin-top:var(--sp-7);padding:var(--sp-6) 0;font-size:var(--ui-sm);color:var(--ink-2)}
.legal a{color:var(--ink-2);margin-right:var(--sp-4)}
.pagebar{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5;padding:var(--sp-2) 0}
.pagebar .wrap{display:flex;align-items:center;flex-wrap:wrap}
.pagenav{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.pagenav button{min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-pill);
  font-size:var(--ui-md);color:var(--ink-2);white-space:nowrap}
.pagenav button:hover{color:var(--ink)}
.pagenav button[aria-current="true"]{color:var(--ink);font-weight:600;background:var(--field)}
/* Clamp'ens bund laa over dens flydende del paa en telefon (2026-09-02).
   6vw er 21-25px paa en telefonskaerm, saa clamp'en stod paa 28px paa ENHVER
   telefon og begyndte foerst at vokse over 467px skaermbredde. En overskrift
   der er laast fast praecis dér hvor den skal virke, er ikke responsiv - den
   er en konstant med ekstra trin.
   8,5vw taender inden for telefonintervallet: 30px ved 360, 33px ved 390 og
   37px ved 430. Loftet paa 40px er uaendret, saa store skaerme ser ud som
   foer. Bunden paa 30px gaelder under 353px, altsaa de smalleste telefoner. */
.pagetitle{font-family:var(--font-prose);font-size:clamp(30px,8.5vw,40px);font-weight:400;line-height:1.15;letter-spacing:-.01em}
/* BL-180. FORSIDENS BROEDTEKST VAR 13px PAA TELEFONEN.
   ⚠️ Ejerens navn maa ikke staa her. PAGE-8 faeldede foerste udgave af den
   her kommentar, og den havde ret: en CSS-kommentar foelger med ud i det
   servererede artefakt. Hvem der bad om noget, hoerer i backloggen.
   Overskriften og manchetten skalerer allerede med skaermen; det gjorde
   afsnittene under dem ikke. De staar paa den mindste af de fire
   tekststoerrelser, som er valgt til smaa hjaelpelinjer inde i app'en - ikke
   til den tekst der skal overbevise en fremmed om at oprette sig. Paa en
   telefon er 13px under det man laeser uden at knibe oejnene sammen, og
   forsiden er den eneste flade hvor hele argumentet staar.
   Loest i typografien og ikke ved at skaere i indholdet.
   ⚠️ Bevidst kun paa forsiden og kun under 640px. Den samme klasse bruges
   som billedtekst under felter inde i app'en, hvor 13px ER det rigtige, og
   en global aendring ville have flyttet begge dele paa en gang. De oevrige
   indholdssider staar med samme stoerrelse og hoerer til den samme
   beslutning, men den er ejerens og ikke min at tage paa hele sitet. */
@media (max-width:640px){
  #page-home .hint{font-size:16px;line-height:1.6}
  #page-home .lede{line-height:1.45}
}
/* Labels paa de offentlige sider stod under WCAG AA. --ink-3 maaler 3,1:1
   mod --paper i lyst tema og 3,9:1 i moerkt, hvor kravet er 4,5:1 for tekst i
   den stoerrelse. Det ramte baade sektionslabelen og de tre skridt-
   overskrifter, altsaa den eneste flade hvor hele argumentet staar for en
   fremmed. Ét trin op i stoerrelse og ét blaek moerkere; formen er urert. */
#viewLanding .micro{font-size:12px;color:var(--ink-2)}
.btn.sm{min-height:36px;padding:0 var(--sp-4);font-size:var(--ui-sm)}
.switch{white-space:nowrap}
/* "Sign in" brydede til to linjer i sidebjaelken (ejeren 2026-08-15).
   Reglen er SCOPET til .pagebar med vilje: .btn.wide i afsnitsfoden
   kan baere et afsnitsnummer og en total, som gerne maa ombryde paa
   en telefon. En global nowrap ville skubbe den
   ud over kanten i stedet. */
.pagebar .btn{white-space:nowrap}

/* ---------- v6: kvote, favoritter og bundlinje ----------
   Ingen nye farver. Alt herunder bruger Fase 0's tokens - en maaler der
   introducerede sin egen groenne, ville vaere det foerste sted paletten begyndte
   at forgrene sig. */

/* Kvotemaaleren. Striben er ikke pynt: "3.240 of 10.000" er et tal man skal
   laese, en stribe er noget man ser. Den er 4 px hoej med vilje - hoejere, og
   den begynder at ligne noget man skal goere noget ved. */
.quotawrap{margin-top:var(--sp-5)}
.quotabar{height:4px;border-radius:2px;background:var(--field);overflow:hidden;margin-top:var(--sp-2)}
.quotafill{height:100%;width:0;background:var(--accent);transition:width .25s ease}

/* Stjernen. Ingen baggrund og ingen ramme: den staar inde i en raekke der
   allerede har to knapper, og en tredje kasse ville goere raekken til en
   vaerktoejslinje. Farven er det eneste der skifter. */
.star{flex:0 0 auto;width:var(--tap);min-height:var(--tap);font-size:19px;line-height:1;
  color:var(--ink-3);background:none;border:0;border-radius:var(--r-pill)}
.star:hover{color:var(--ink-2)}
.star[aria-pressed="true"]{color:var(--accent)}

/* Filterchips. Bruges baade over historielisten og i admin. */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.chip{min-height:32px;padding:0 var(--sp-3);border-radius:var(--r-pill);
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font-size:var(--ui-sm);white-space:nowrap}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* Bundlinjen i app'en. De offentlige sider fandtes kun FOER login; er man
   logget ind, var der ingen vej til dem uden at logge ud - og det gjaldt ogsaa
   Privacy, som er den side en bruger er mest tilboejelig til at laese EFTER
   han er begyndt at skrive. */
.applegal{display:flex;gap:var(--sp-4);flex-wrap:wrap;border-top:1px solid var(--line);
  margin-top:var(--sp-7);padding-top:var(--sp-5)}
.applegal button{font-size:var(--ui-sm);color:var(--ink-3);background:none;border:0;
  min-height:var(--tap);padding:0}
.applegal button:hover{color:var(--ink)}

/* ---------- v7 (UI-justering 2026-08-15) ----------
   Fire ting, ingen af dem synlige i sig selv:
   1100 px foer pagebaren tvinges paa én raekke - ved 900-1100 kolliderer den
   med site-skiftet; topbjaelken flugter med 640 px-kolonnen paa desktop;
   hover er kun for mus (en :hover-regel paa touch haenger fast efter tryk);
   og chips/smaa knapper faar en usynlig ramme udenom, saa fingeren rammer
   6-8 px uden for kanten uden at noget flytter sig. */
@media(min-width:1100px){
  .pagebar .wrap,.pagenav{flex-wrap:nowrap}
}
@media(min-width:900px){
  .bar{padding-left:max(var(--sp-3),calc((100vw - 640px)/2 + var(--sp-5)));
       padding-right:max(var(--sp-3),calc((100vw - 640px)/2 + var(--sp-5)))}
}
@media(hover:hover){
  #storyList .item button:hover .t{color:var(--accent)}
  .rail button:hover{color:var(--ink)}
}
.chip,.btn.sm{position:relative}
.chip::after{content:"";position:absolute;inset:-6px;border-radius:inherit}
.btn.sm::after{content:"";position:absolute;inset:-4px;border-radius:inherit}
.applegal{justify-content:space-between;align-items:center;row-gap:var(--sp-2)}
.applegal .links{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.applegal .acct{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--ui-sm);color:var(--ink-3)}

/* ---------- Ordmaerket (2026-08-16) ----------
   Maerket er ren HTML og CSS. Ingen billedfil i topbjaelken: en PNG dér ville
   skulle findes i to stoerrelser, to temaer og to sites, og den ville stadig
   ikke arve accentfarven naar den skiftes i sites.json.

   Markuppen bygges ét sted (build.mjs) og bruges fire steder. Reglerne her
   siger kun hvordan delene ser ud - HVILKEN del der er accent, staar i
   sites.json, saa et site med omvendt vaegtning ikke kraever en linje CSS.

   .a er accentleddet. `i` er imprinten, og de to maa ikke slaas sammen:
   forslags-udgaven brugte `i` til begge dele, og saa betyder det ene taal det
   ene paa hovedsitet og det andet paa undersitet. */
.wm b{font-weight:inherit}
.wm .a{color:var(--accent)}
/* Den dybere tone gaelder kun hvor maerket er STORT. Kravet til stor tekst er
   3:1 og ikke 4,5:1, og det er hele grunden til at den maa vaere dybere.
   Scopet haenger paa h1 og ikke paa .wm, fordi bjaelkens maerke er 17 px - dér
   ville den samme farve vaere for svag, og ingen ville opdage det. */
h1 .wm .a{color:var(--accent-display)}
/* wm-dark = maerket MED imprint. Klassen haenger paa imprinten, ikke paa
   temaet: den skal ogsaa gaelde naar en bruger paa undersitet laeser i Light. */
.wm-dark b{font-weight:600}
.wm-dark i{font-style:normal;font-weight:300;letter-spacing:.32em;text-transform:uppercase;
  font-size:.68em;color:var(--accent);margin-left:.6em;white-space:nowrap}
h1 .wm-dark i{color:var(--accent-display)}
/* Bjaelken er 44 px. Imprinten staar derfor PAA linjen og ikke under: en
   anden linje ville enten goere bjaelken hoejere paa en telefon eller goere
   maerket for lille til at laese. Ejerens valg 2026-08-16. */
.bar .title .wm{white-space:nowrap}
/* ---------- Login-kortet (etape 33) ----------------------------------------
   Samme markup paa begge sites; farven kommer fra sitets egne tokens. Fladen
   er surface og ikke paper, saa kortet loefter sig fra siden i det ene tema og
   saenker sig i det andet - hvilken vej det gaar, er sitets valg og ikke
   skallens.

   Under 620 px falder rammen vaek. Et kort der er bredere end skaermen er
   ikke et kort; det er en vandret streg over og under indholdet. */
.loginCard{max-width:560px;margin:0 auto}
/* Etape 74: to kort frem for én ramme med faner. Oprettelsen staar foerst og
   har den primaere knap; sign in staar nedenunder. Samme flade, kant og
   radius som forsidens tre skridt, og samme loeft i moerkt tema, saa kortene
   ogsaa kan ses paa undersitet, hvor --surface er moerkere end --paper. */
.authblock{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-5);margin-top:var(--sp-5)}
.authblock+.authblock{margin-top:var(--sp-6)}
/* Etape 76: i kodekortet har kodefeltet sin overskrift over sig og behoever
   ikke stregen, der adskiller det fra Send code inde i sign in-kortet. */
#paneKode #codeBox{margin-top:var(--sp-4)!important;padding-top:0!important;border-top:0!important}
.authhead{font-family:var(--font-prose);font-size:21px;font-weight:400;
  line-height:1.25;color:var(--ink);margin:0}
html[data-theme="dark"] .authblock{
  background:color-mix(in oklab, var(--ink) 7%, var(--paper));
  border-color:color-mix(in oklab, var(--ink) 16%, var(--paper))}
@media (prefers-color-scheme:dark){
  html[data-theme="system"] .authblock{
    background:color-mix(in oklab, var(--ink) 7%, var(--paper));
    border-color:color-mix(in oklab, var(--ink) 16%, var(--paper))}
}

.sisterbox{margin-top:var(--sp-6);padding:var(--sp-5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md)}
.sisterhead{font-family:var(--font-prose);font-size:19px;line-height:1.35;color:var(--ink);margin:0}
.sisterbody{font-size:var(--ui-md);line-height:1.6;color:var(--ink-2);margin-top:var(--sp-2)}
.sisterline{margin-top:var(--sp-2)}
.sisterline a{color:var(--accent)}

/* Landingssiderne (BL-147). Kun det skallen ikke allerede har: den offentlige
   bjaelke med RIGTIGE links i stedet for knapper, og prosaen i en artikel.
   Ingen nye farver - alt er skallens tokens, ellers forgrener paletten sig her
   foerst. Filen inlines af build.mjs sammen med skallens egen <style>. */
.lp .brand{text-decoration:none;color:inherit}
.pagenav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);
  border-radius:var(--r-pill);font-size:var(--ui-md);color:var(--ink-2);white-space:nowrap;text-decoration:none}
.pagenav a:hover{color:var(--ink)}
/* ⚠️ BJAELKEN MAA IKKE OMBRYDE. Maalt 8/9: med en knap i bjaelken faldt den
   ned paa linje to ved smalle vinduer, og bjaelkens hoejde hoppede mellem én
   og to linjer alt efter bredde. Ombrydningen er slaaet fra HER og ikke i
   skallen: skallens .pagebar deles med app'en, og dér er reglen en anden.
   Under 560 px viger navigationen i stedet - maerket og knappen er det der
   skal overleve paa en telefon, og guiderne kan naas fra foden. */
.lp .pagebar .wrap{flex-wrap:nowrap}
.lp .pagenav{display:flex;flex-wrap:nowrap;min-width:0}
@media (max-width:560px){ .lp .pagenav{display:none} }

/* INTROSTRIBEN. Egen flade og ikke artiklens: det er ikke guiden der taler
   her, det er sitet der praesenterer sig. Venstrestillet i SAMME 640 px-spalte
   som artiklen og som bjaelkens maerke - alt paa siden hviler paa den samme
   lodrette linje, og en centreret eller hoejrestillet stribe ville vaere det
   eneste der ikke gjorde. Én saetning: hver linje mere skubber guidens
   aabningsafsnit - det Google loefter ud som featured snippet - laengere ned. */
.lp-intro{background:var(--field);border-bottom:1px solid var(--line);
  padding:var(--sp-3) 0}
.lp-intro p{font-size:var(--ui-md);line-height:1.55;color:var(--ink-2);
  max-width:70ch;margin:0}
.lp-intro b{color:var(--ink);font-weight:600}
/* ⚠️ 8/9: overskriften stod kun 3 px over broedteksten og havde ingen luft over
   sig, saa en guide paa 13 afsnit laeste som én uoverskuelig soejle. Rettet med
   afstand og en haarstreg, ikke med stoerre skrift alene - luft giver rytmen.
   ⚠️ Denne fil inlines i hver side: ejerens navn i en kommentar braekker PAGE-8. */
.lp-article h2{font-family:var(--font-prose);font-size:25px;font-weight:400;line-height:1.25;
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line);color:var(--ink);
  scroll-margin-top:var(--sp-6)}
/* Foerste overskrift efter indholdsfortegnelsen baerer allerede dens ramme. */
.lp-toc + h2{border-top:0;padding-top:0;margin-top:var(--sp-6)}
.lp-article p{font-size:var(--ui-md);line-height:1.65;color:var(--ink-2);margin-top:var(--sp-3)}

/* ⚠️ RYTMEN INDE I ET AFSNIT. Oensket 8/9: teksten skal vaere mere levende
   naar man scroller ned ad den. h2 alene gav rytme paa sektionsniveau; inde i en
   sektion var alt stadig én graa skriftgrad.
   Tre grader nu, og de er adskilt paa SKRIFT og FARVE og ikke paa stoerrelse
   alene - to grader der kun er 2 px fra hinanden laeses som én. */

/* Underoverskriften. Prosaskriften og fuld ink mod broedtekstens
   grotesk i ink-2: forskellen ses i et oejenkast paa en telefon.
   Den klaeber til sit eget afsnit (sp-2 under, sp-5 over), saa etiket og
   forklaring laeses som ét og ikke som to lige store blokke. */
.lp-article h3{font-family:var(--font-prose);font-size:19px;font-weight:400;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);margin:var(--sp-5) 0 0;scroll-margin-top:var(--sp-6)}
.lp-article h3 + p,.lp-article h3 + .lp-says{margin-top:var(--sp-2)}
.lp-article h2 + h3{margin-top:var(--sp-4)}

/* Replikblokken: et afsnit der kun er replikker. Én pr. linje frem for en
   raekke i samme streng - det er dét der goer en frasesamling til noget man
   kan skimme og tage ét citat fra, hvilket er hele grunden til at siden
   findes.

   ⚠️ STREGEN ER --ink-3 OG IKKE --accent. Valgt 8/9 efter at have set alle
   fem vaegte paa hele guiden. Accenten markerer ÉN tekstblok paa siden:
   uddraget under "An example". En guide har ni replikblokke mod ét uddrag,
   saa fik de ni ogsaa accent, ville siden holde op med at skelne mellem
   "her er en frase du kan bruge" og "her er et stykke fiktion" - og med ni
   mod én er det uddraget der taber. --ink-3 er tydelig uden at bruge farve.
   --line, som den var foerst, var for svag til at blive set. */
/* ⚠️ .lp-article .lp-say og ikke .lp-say alene. `.lp-article p` er to
   selektorer og vinder over én: skrives det kort, arver replikken
   broedtekstens 15 px og ink-2, og hele forskellen forsvinder i stilhed.
   Maalt paa den live side foerste gang, og det er samme grund til at
   blockquote herover ogsaa staar med to led. */
.lp-says{margin-top:var(--sp-3);padding:2px 0 2px var(--sp-4);border-left:2px solid var(--ink-3)}
.lp-article .lp-say{font-family:var(--font-prose);font-size:18px;line-height:1.45;
  color:var(--ink);margin:var(--sp-2) 0 0}
.lp-article .lp-says .lp-say:first-child{margin-top:0}

/* Replikker MIDT i et afsnit. Samme skrift som uddraget og som replikblokken,
   saa "det nogen siger" ser ens ud overalt paa siden uanset hvor det staar.
   Relativ stoerrelse: prosaskriften saetter mindre end grotesken ved samme
   px-tal, og 1.05em faar de to til at staa lige hoeje paa linjen. */
.lp-q{font-family:var(--font-prose);font-size:1.05em;color:var(--ink)}
/* Aabningen er svaret. Den skal se ud som et svar og ikke som endnu et afsnit. */
.lp-article > h1 + p{font-family:var(--font-prose);font-size:19px;line-height:1.55;color:var(--ink)}

/* Indholdsfortegnelsen. Genereret i build.mjs af sidens egne h2-er.
   Kolonner frem for en liste: 13 punkter under hinanden er selv en mur. */
.lp-toc{display:block;margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.lp-toc-h{display:block;font-size:var(--ui-sm);text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin-bottom:var(--sp-3)}
.lp-toc a{display:block;font-size:var(--ui-md);line-height:1.5;color:var(--ink-2);
  text-decoration:none;padding:3px 0}
.lp-toc a:hover{color:var(--accent);text-decoration:underline}
@media (min-width:720px){
  .lp-toc{columns:2;column-gap:var(--sp-6)}
  .lp-toc-h{column-span:all}
}
.lp-article .lp-lede{font-family:var(--font-prose);font-size:19px;line-height:1.55;color:var(--ink);margin-top:var(--sp-4)}
.lp-article blockquote{margin:var(--sp-4) 0 0;padding:var(--sp-4) var(--sp-5);border-left:3px solid var(--accent);
  background:var(--surface);border-radius:var(--r-md);font-family:var(--font-prose);font-size:17px;line-height:1.65;color:var(--ink)}
.lp-article blockquote p{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin-top:var(--sp-2)}
.lp-article blockquote p:first-child{margin-top:0}
.lp-article .lp-note{font-size:var(--ui-sm);color:var(--ink-3);margin-top:var(--sp-2)}
.lp-article .lp-dated{font-size:var(--ui-sm);color:var(--ink-3);margin-top:var(--sp-5)}
.lp-cta{margin-top:var(--sp-6)}
.lp a.btn{text-decoration:none}
.lp-crumb{font-size:var(--ui-sm);color:var(--ink-3);margin-bottom:var(--sp-2)}
.lp-crumb a{color:var(--ink-2)}
.lp-article a{color:var(--accent)}
.lp-index{list-style:none;padding:0;margin:var(--sp-5) 0 0}
.lp-index li{padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.lp-index li a{font-family:var(--font-prose);font-size:19px;color:var(--ink);text-decoration:none}
.lp-index li a:hover{color:var(--accent)}
.lp-index li span{display:block;font-size:var(--ui-sm);color:var(--ink-2);margin-top:var(--sp-1)}

/* Krydslinkene i bunden af en landingsside eller et leksikonopslag. De er
   GENERERET af build.mjs, ikke skrevet i kilden - se krydslinks() der.
   Sat visuelt fra artiklen med en haarstreg og mindre type, saa en laeser kan
   se at her holder teksten op og navigationen begynder. */
.lp-kryds{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.lp-kryds h2{font-size:var(--ui);color:var(--ink-2);text-transform:uppercase;
 letter-spacing:.06em;margin:var(--sp-5) 0 var(--sp-2)}
.lp-kryds h2:first-child{margin-top:0}
.lp-kryds p{font-size:var(--ui-sm);color:var(--ink-2);margin:0 0 var(--sp-2)}
.lp-links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.lp-links li{margin:0}
.lp-links a{font-family:var(--font-prose);font-size:17px;color:var(--ink);text-decoration:none;
 border-bottom:1px solid var(--line)}
.lp-links a:hover{color:var(--accent);border-bottom-color:currentColor}


/* --------------------------------------------------------------------------
   De tre historiebokse i bunden af en guide (SEO/SKABELON-GUIDE.md afsnit 9).
   Grid frem for flex, saa de tre kort er lige hoeje uanset hvor lang
   opsummeringen er: tre kort i forskellig hoejde laeses som tre forskellige
   slags ting, og det er de ikke. Under 720 px staar de under hinanden.
   -------------------------------------------------------------------------- */
/* Bryder ud af laesebredden (640 px). Tre kort i 600 px giver 186 px hver,
   og saa er resuméet ikke laengere laesbart. Prosaen bliver i sin bredde;
   boksene er en anden slags blok og maa gerne se sådan ud. clamp'en mod
   100vw sikrer at der aldrig kommer vandret scroll paa en telefon. */
.lp-stories{margin:var(--sp-7) 0 var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);
  width:min(920px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
/* ⚠️ .lp-stories staar UDEN FOR .lp-article, saa artiklens h2-regel naar den
   ikke - overskriften stod som browserens fede standard-h2 midt i en side hvor
   alt andet er prosaskrift. Den faar samme stemme som artiklens overskrifter,
   men uden streg over: sektionen har allerede sin egen. */
.lp-stories h2{font-family:var(--font-prose);font-size:25px;font-weight:400;
  line-height:1.25;color:var(--ink);margin:0 0 var(--sp-2)}
/* Noten er boksens eneste chance for at sige HVAD det her er, til en laeser
   der kom fra en soegning og ikke kender navnet. Derfor ink-2 og ikke ink-3:
   den skal laeses, ikke overses. */
.lp-storynote{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:62ch;
  margin:0 0 var(--sp-4)}
.lp-storygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);align-items:stretch}
.lp-story{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4)}
.lp-story h3{margin:0 0 var(--sp-2);font-size:17px;line-height:1.3}
.lp-story p{margin:0 0 var(--sp-3);font-size:14.5px;line-height:1.55}
.lp-story .lp-heat{margin-top:auto;margin-bottom:var(--sp-3);display:flex;flex-direction:column;gap:1px}
.lp-story .lp-heat .lab{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.lp-story .lp-heat .val{font-size:14px;color:var(--ink);font-weight:600}
.lp-story .btn{width:100%;justify-content:center;text-align:center}
@media (max-width:720px){.lp-storygrid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Hurtigstarten oeverst i en guide (28/9). Kompakt: overskrift, én linje,
   tre knapper med samme noegler som boksene i bunden, og et ankerlink ned til
   de fulde beskrivelser. Den staar INDE i .lp-article (efter aabningen, foer
   TOC'en), saa alle regler er scopet med to led - ellers vinder
   .lp-article p over dem. Accentkanten er det der skiller den fra TOC'en
   lige under; de to har ellers samme flade og radius.
   -------------------------------------------------------------------------- */
.lp-article .lp-quick{margin:var(--sp-5) 0 0;padding:var(--sp-4) var(--sp-5);
  background:var(--surface);border:1px solid var(--accent-fill);border-radius:var(--r-md)}
.lp-article .lp-quick-h{font-family:var(--font-prose);font-size:21px;line-height:1.3;
  font-weight:400;color:var(--ink);margin:0 0 var(--sp-2)}
.lp-article .lp-quick-p{font-size:var(--ui-sm);line-height:1.5;color:var(--ink-2);margin:0 0 var(--sp-3)}
.lp-article .lp-quick-p .lp-free{color:var(--ink);font-weight:600}
.lp-article .lp-quick-links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.lp-article a.lp-quick-link{text-decoration:none}
.lp-article .lp-quick-more{font-size:var(--ui-sm);line-height:1.5;color:var(--ink-3);margin:var(--sp-3) 0 0}
.lp-article .lp-quick-more a{color:var(--ink-2)}
.lp-quick + .lp-toc{margin-top:var(--sp-4)}
@media (max-width:480px){.lp-article a.lp-quick-link{width:100%}}