/* Kvasano — det faelles stilark for alle siderne fra Claude Design (v2).
   Ti sider deler een spalte, een skrifttrappe og eet farvesystem. Aendres noget her,
   aendres det paa alle ti; det er hele grunden til at det ikke staar i hver fil. */

/* Fonts som paa produktionssitet: selvhostede woff2, ikke Google Fonts.
   Canvas henter fra fonts.googleapis.com; site/fonts/ har allerede de samme to
   familier, og rapportsiderne maa ikke lave kald ud af huset. */
@font-face{font-family:'Bricolage Grotesque';font-weight:800;src:url("/fonts/bricolage-latin.woff2") format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';font-weight:600;src:url("/fonts/bricolage-latin.woff2") format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';font-weight:400;src:url("/fonts/bricolage-latin.woff2") format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'DM Sans';font-weight:400;src:url("/fonts/dmsans-latin.woff2") format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'DM Sans';font-weight:500;src:url("/fonts/dmsans-latin.woff2") format('woff2');unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:'DM Sans';font-weight:700;src:url("/fonts/dmsans-latin.woff2") format('woff2');unicode-range:U+0000-00FF;font-display:swap}

:root{
  --paper:oklch(0.972 0.016 85);
  --ink:oklch(0.24 0.02 60);
  --ink2:oklch(0.38 0.02 60);
  --mute:oklch(0.5 0.03 60);
  --mute2:oklch(0.54 0.04 60);
  --hair:oklch(0.93 0.015 60);
  --rule:oklch(0.88 0.02 60);
  --white:oklch(1 0 0);
  --tint:oklch(0.985 0.008 85);

  /* EEN SPALTE FOR HELE SITET. Headeren var 48px bredere end indholdet, fordi
     border-box trak main's polstring fra dens 720px, mens headerens raekke fik sine
     720px indvendigt. Nu baerer alle tre baand den samme regel: samme tal inklusive
     polstring.

     800 OG IKKE 720, fra 22/9. Kundesiderne satte selv `:root{--col:800px}` og resten
     af sitet stod paa 720, saa bredden skiftede naar man gik fra en artikel til sin
     rapport. Det er forvirrende, og een af de to skulle vinde.

     MAALT PAA BENCHMARK-SIDEN, ombrudte etiketter af 138:
       680px -> 28    720px -> 19    760px -> 15    800px -> 3    840px -> 1
     Kurven knaekker mellem 760 og 800: de sidste 40px fjerner fire femtedele af
     ombrydningen, og 840 koeber kun een raekke mere for 8 tegn pr. linje. Derfor 800.

     PRISEN STAAR NEDENFOR. 800px giver 72 tegn pr. linje i broedtekst mod 720px' 64,
     og det er i den oevre ende af det laesbare. Det redaktionelle faar derfor sit eget
     laesemaal i stedet for at hele huset bliver smallere. */
  --col:800px;
  --pad:24px;

  /* v2: groen og ler i stedet for staalblaa og rust. Bundet til HVEM DER FOERER,
     ikke til hvilket tal der er stoerst — 23 af de 260 maal er "lavere er bedre". */
  --winBg:oklch(0.88 0.075 150);  --winFg:oklch(0.33 0.09 152);
  --loseBg:oklch(0.88 0.075 35);  --loseFg:oklch(0.36 0.12 32);
  --tieBg:oklch(0.93 0.012 60);   --tieFg:oklch(0.44 0.02 60);

  /* v2 fane-rampe: samme lyshed og chroma hele vejen rundt, kun kulaeren skifter. */
  /* INGEN BLAA (20/10, Jesper): fladerne der var blaa er den knaekkede hvide, teksten sort. */
  --benchBg:oklch(0.972 0.016 85); --benchFg:oklch(0.24 0.02 60);
  --detBg:oklch(0.86 0.055 195);   --detFg:oklch(0.31 0.07 210);
  --chBg:oklch(0.86 0.055 130);    --chFg:oklch(0.31 0.07 140);
  --actBg:oklch(0.86 0.055 70);    --actFg:oklch(0.33 0.08 62);
  --headBg:oklch(0.972 0.016 85);
}
*{box-sizing:border-box}
/* MILLIMETERPAPIR (21/10, Jesper): hele sitet, ogsaa bag login, staar paa hvidt ternet papir som forsiden. */
body{margin:0;background:#fff;background-image:linear-gradient(#e9eef2 1px,transparent 1px),linear-gradient(90deg,#e9eef2 1px,transparent 1px);background-size:36px 36px;color:var(--ink);
  font-family:'DM Sans',Helvetica,sans-serif;min-height:100%}
a{color:oklch(0.42 0.09 60);text-underline-offset:3px}
a:hover{color:oklch(0.28 0.06 60)}
::selection{background:oklch(0.88 0.15 88);color:oklch(0.22 0.02 60)}
.bg{font-family:'Bricolage Grotesque',Helvetica,sans-serif}

/* ---- baandene: header, main, footer deler --col ---------------------------- */
header{padding:20px 0 8px}
.row{max-width:var(--col);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.logo{text-decoration:none;color:var(--ink);font-family:'Bricolage Grotesque',Helvetica,sans-serif;
  font-weight:800;font-size:26px;letter-spacing:-.03em}
nav.top{display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:14px}
nav.top a{text-decoration:none;font-weight:600;color:oklch(0.3 0.02 60);
  border-radius:999px;padding:6px 12px;white-space:nowrap}
nav.top a:hover{background:oklch(0.94 0.02 60)}
nav.top a.here{background:oklch(0.91 0.02 60);color:var(--ink)}
nav.top a.login{color:var(--ink);background:var(--white);border:1.5px solid var(--ink)}
/* KNAPPEN I MENUEN (25/9): "Get a free benchmark" paa alle offentlige sider, fyldt, saa Log in
   ikke er det eneste fremhaevede. Samme udseende som .kvhead nav a.cta i site-chrome.mjs. */
nav.top a.cta{color:oklch(1 0 0);background:var(--ink);border:1.5px solid var(--ink)}
nav.top a.cta:hover{background:oklch(0.34 0.03 60)}
nav.top a.login:hover{background:oklch(0.93 0.09 88)}

main{max-width:var(--col);margin:0 auto;padding:0 var(--pad) 64px}
/* SIDEHOVEDET SLUTTER HVOR KORTET BEGYNDER.
   `main` har 64px i bunden, fordi den normalt ER sidens sidste element. Paa rapportsiderne
   staar kortet uden for `main`, og de 64px blev saa et hul mellem brandvaelgerne og
   kortet. Reglen laa kun i d-benchmark.html, saa Benchmark havde 22px luft der og Changes
   havde 86. Kortenes egen `margin-top` er den luft der skal vaere. */
/* EEN <main> OM HELE RAPPORTEN, 25/9. Benchmark og Changes havde to <main> med kortet
   imellem, altsaa selve rapporten UDEN for sidens hovedindhold: en skaermlaeser der
   springer til "main" landede i vaelgerne og aldrig i tabellen. Nu er der een
   <main class="rapport"> uden egen bredde, og spalten sidder paa .head og .tail inden i den.
   Ikke `display:contents`: det fjerner elementet fra tilgaengelighedstraeet i flere
   browsere, og saa er der igen ingen main. Luften er den samme som foer: ingen bund under
   hovedet, 18 over bunden og 64 under den. */
main.rapport{max-width:none;margin:0;padding:0}
main.rapport > .head{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
main.rapport > .tail{max-width:var(--col);margin:0 auto;padding:18px var(--pad) 64px}
footer{border-top:1.5px solid var(--rule);padding:26px 0 40px;margin-top:8px}
footer .row{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:14px;color:var(--mute)}
footer a{color:var(--mute);text-decoration:none}
/* FEATURE-LISTEN (19/10, Jesper): otte spoergsmaal med svar over linkraekken. Samme regler som
   .kvfoot .fq i site-chrome.mjs, med variablerne her. */
footer .fq{max-width:var(--col);margin:0 auto 26px;padding:0 var(--pad);font-family:'Bricolage Grotesque',Helvetica,sans-serif}
footer .fqh{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
footer .fq ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 24px}
footer .fq a{display:block}
footer .fq b{display:block;font-size:14px;font-weight:600;color:oklch(0.3 0.02 60)}
footer .fq span{display:block;font-size:13px;line-height:1.4;margin-top:2px}
footer .fq a:hover b{text-decoration:underline}
/* PAA EN TELEFON STOD FOOTERENS LINKS KLINET SAMMEN PAA EEN LINJE (16/10, Jesper): luft imellem
   og en hoejde der kan rammes med en finger. */
@media (max-width:520px){footer .links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
  footer .links a{display:inline-block;padding:10px 0}}

/* ---- forsidestykket -------------------------------------------------------- */
.hero{padding:clamp(22px,4vw,38px) 0 0}
.eyebrow{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute2);margin:0 0 18px}
h1{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:800;
  font-size:clamp(32px,5.4vw,48px);line-height:1.05;letter-spacing:-.03em;
  margin:0 0 18px;text-wrap:balance}
/* FANERAKKEN SKAL LIGGE SAMME STED PAA ALLE FIRE SIDER.
   Changes og Actions har en fast overskrift; Benchmarks er bygget af to brandnavne og
   Details' bar brandnavnet med. Maalt 11/9: fanerne stod paa 327px paa Changes og
   Actions, 357 paa Details og 378 paa et langt par paa Benchmark. Menuen hoppede altsaa
   naar man skiftede side.
   Overskriften faar her EEN linjes hoejde ved fuld stoerrelse som gulv. Sammen med
   skrump-til-en-linje paa Benchmark (se d-benchmark.html) betyder det at blokken fylder
   det samme uanset hvor langt navnet er: et kortere navn faar ikke en hoejere menu. */
.hero h1{min-height:calc(clamp(32px,5.4vw,48px) * 1.05)}
h2{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:800;
  font-size:clamp(23px,3.2vw,29px);line-height:1.15;letter-spacing:-.02em;
  margin:44px 0 14px;text-wrap:balance}
h3{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:700;
  font-size:19px;line-height:1.3;margin:0 0 8px}
/* OG UNDERTEKSTEN SKAL OGSAA FYLDE DET SAMME. Overskriften fik sit gulv ovenfor, men
   fanerakken hoppede stadig: maalt paa kundemappen ag1 12/9 stod fanerne paa 328px paa
   Benchmark, Details og Changes og paa 295px paa Actions. Forskellen var dokken, ikke
   overskriften — de tre bryder til TRE linjer ved 1280px, AG1's Actions-dok kun til to,
   fordi den baerer brandnavnet og AG1 er et kort navn.
   GULVET ER TO LINJER SIDEN 21/9, ikke tre. Dokken er kappet paa 62 tegn og spalten er
   800px, og med den sidste saetning ude af Benchmarks dok bryder alle tre til praecis to
   linjer. Et gulv paa tre holdt derfor et tomt felt aabent paa hver af siderne.
   Bryder en dok til TRE linjer — et langt brandnavn kan goere det, for Changes og Actions
   baerer navnet i teksten — hopper menuen igen, og det er `checks/fire-sider.mjs` der
   fanger det. Den maaler tre kundemapper, heriblandt den med det laengste navn. */
.deck{font-size:21px;line-height:1.6;color:var(--ink2);margin:0;text-wrap:pretty;
  max-width:62ch;min-height:calc(21px * 1.6 * 2)}
.deck b{font-weight:700;color:var(--ink)}
p.body{font-size:18px;line-height:1.65;color:var(--ink2);margin:0 0 16px;text-wrap:pretty}

/* ---- fanerne og meta-raekken ----------------------------------------------- */
.tabs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 16px;margin:30px 0 0;padding-bottom:12px;border-bottom:1.5px solid var(--rule);
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:15px}
.tabs nav{display:flex;flex-wrap:wrap;gap:6px}
/* INGEN GENNEMSIGTIGHED PAA FANERNE, 25/9. `opacity:.72` skulle skille den aktive fane fra
   de andre, men paa en telefon er der ingen hover, og de tre andre faner saa slukkede ud,
   som knapper man ikke kan trykke paa. Den aktive fane er stadig markeret med vaegt og
   skygge. */
.tab{font:inherit;text-decoration:none;font-weight:600;border:1.5px solid var(--ink);
  border-radius:999px;padding:8px 16px;cursor:pointer}
.tab:hover{box-shadow:2px 2px 0 var(--ink)}
.tab[aria-current="page"]{font-weight:700;box-shadow:2px 2px 0 var(--ink);cursor:default}
.tab.bench{background:var(--benchBg);color:var(--benchFg)}
.tab.det{background:var(--detBg);color:var(--detFg)}
.tab.ch{background:var(--chBg);color:var(--chFg)}
.tab.act{background:var(--actBg);color:var(--actFg)}

.meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;margin:12px 0 0;font-family:'Bricolage Grotesque',Helvetica,sans-serif;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.meta label{display:inline-flex;align-items:center;gap:8px}
/* KONTROLLERNE ER EEN GRUPPE, TAELLEREN ER DEN ANDEN.
   Raekken er `space-between` med `flex-wrap`, og med fire dele (For, Sort, Window, taeller)
   brak den midt i kontrollerne: Window faldt ned paa anden linje med taelleren hoejt oppe
   til hoejre paa foerste. Benchmark har tre dele og braekkede ikke, saa de tre sider saa
   forskellige ud af en grund der ikke var en beslutning. Nu bryder kontrollerne inden for
   deres egen gruppe, og taelleren staar yderst til hoejre uanset hvor mange der er. */
.meta .ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;min-width:0}
/* EN RULLEMENU ER SAA BRED SOM SIN LAENGSTE MULIGHED, OGSAA NAAR DEN IKKE ER VALGT.
   Maalt paa Actions: rollevaelgeren tog 197px og Kind 204px, fordi "Legal & compliance" og
   "Broken SEO & Content" staar i listen. De tre kontroller plus taelleren kraevede 836px i
   en raekke paa 752, saa taelleren faldt ned paa en linje for sig — og saa saa raekken ud
   til at svaeve mellem fanerne og indholdet. Benchmark har een kontrol mindre og slap.
   Loftet gaelder den lukkede menu; naar den er aaben, viser browseren hele teksten.
   140 og ikke 158: Changes har det laengste saet (For, Sort, Window plus "62 of 156
   moved"), og ved 158 var raekken stadig enogtyve pixels for bred. Tallet er den bredeste
   af de tre sider, ikke et skoen. */
.meta select{max-width:140px;text-overflow:ellipsis}
/* OG SMALLERE I EN RAMME. Forsidens iframe er 720px, og der var 140 stadig for bredt:
   taelleren faldt ned paa en linje for sig paa Changes og Actions, praecis den svaevende
   raekke der blev rettet i spalten paa 800. Under 860px koerer de tre kontroller paa 112. */
/* KUN OVER 560PX, 25/9. Paa en telefon brydes kontrollerne alligevel paa hver sin linje,
   saa loftet koebte ingen plads og klippede "Everyone" til "Everyo...". Under 560 er
   menuen saa bred som sin tekst. */
@media(max-width:860px) and (min-width:561px){ .meta select{max-width:112px} }
@media(max-width:560px){ .meta select{max-width:none} }
/* TAELLEREN STAAR TIL HOEJRE, OGSAA NAAR DEN BLIVER SKUBBET NED.
   Med tre kontroller (Actions og Changes) er der ikke plads til taelleren paa samme linje,
   og `space-between` satte den saa i venstre kant af naeste linje, hvor den lignede en
   overskrift til vaelgerne under. `margin-left:auto` holder den i hoejre kant uanset
   hvilken linje den lander paa. */
.meta > span:last-child{margin-left:auto}
.meta select{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--ink);background:var(--white);
  border:1.5px solid var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer}

/* ---- knapper og vaelgere --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:15px;font-weight:700;
  color:var(--ink);background:var(--white);border:1.5px solid var(--ink);
  border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;
  box-shadow:2px 2px 0 var(--ink)}
.btn:hover{background:oklch(0.93 0.09 88);color:var(--ink)}
.btn:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}
.btn.quiet{box-shadow:none;font-weight:600}
.btn.quiet:hover{box-shadow:2px 2px 0 var(--ink)}

/* Vaelger tegnet som en pille-knap. appearance:none fjerner browserens egen pil,
   saa den tegnes som baggrund — uden den laeser en select som en etiket. */
.pick{display:inline-flex;align-items:center;max-width:100%;
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--white);border:1.5px solid var(--ink);
  border-radius:999px;padding:7px 24px 7px 11px;cursor:pointer;white-space:nowrap;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.pick:hover{background-color:oklch(0.95 0.02 85)}
.pick:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pick.lg{font-size:14px;padding:8px 32px 8px 14px;
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px)}
.pick.ch:hover{background-color:var(--chBg)}
.pick.act:hover{background-color:var(--actBg)}
.pick.det:hover{background-color:var(--detBg)}

/* ---- "Explain the data": metadata og forbehold bag et plus ------------------
   Jesper 12/9: de lange databeskrivelser stod foer selve fundet, baade paa Details og paa
   Changes. Foerste saetning bliver staaende, resten flyttes herned. Intet klippes vaek:
   forbeholdene er halvdelen af grunden til at tallene kan bruges, de skal bare ikke vaere
   det foerste oejet lander paa.
   Reglerne stod foerst kun i Details' eget stilark. De hoerer her, saa de fire sider ikke
   faar hver sin knap. */
.mere{margin:8px 0 0}
.mere>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:600;font-size:13.5px;
  color:oklch(0.42 0.09 60);padding:4px 0}
.mere>summary::-webkit-details-marker{display:none}
.mere>summary::before{content:"+";display:inline-grid;place-items:center;width:17px;
  height:17px;border:1.5px solid currentColor;border-radius:6px;font-size:12px;line-height:1}
.mere[open]>summary::before{content:"\2212"}
.forklar{margin-top:14px;padding-top:10px;border-top:1px solid var(--hair)}
.forklar .facts{margin-top:8px}
.addbtn{display:inline-flex;align-items:center;gap:6px;
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:13px;font-weight:600;
  color:oklch(0.42 0.03 60);background:transparent;border:1.5px dashed oklch(0.55 0.03 60);
  border-radius:999px;padding:7px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.addbtn:hover{color:var(--ink);border-color:var(--ink);border-style:solid;background:var(--white)}

/* ---- kortet: baand, raekker, foldeud --------------------------------------- */
.card{margin-top:22px;background:var(--white);border:1.5px solid var(--ink);
  border-radius:20px;overflow:hidden}
.scroll{overflow-x:auto}
/* BAANDET ER EN OVERSKRIFT, IKKE EN ETIKET (29/9, proeve). Det stod i 14px versaler med
   spaerring paa alle tre sider; nu almindelige bogstaver i 18px, og tallene ved siden af i
   DM Sans, saa navnet er det man laeser foerst. Farven er stadig sidens egen. */
.band{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:800;font-size:18px;
  letter-spacing:-.005em;padding:13px 18px;
  background:var(--benchBg);color:var(--benchFg);
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.band .n{font-family:'DM Sans',Helvetica,sans-serif;font-weight:500;font-size:13.5px;letter-spacing:0;opacity:.8}
.band.under{font-size:16px;padding:11px 18px}
/* Baandets navn som foldeknap (Benchmark, Changes og Actions). */
.band .baandnavn{font:inherit;letter-spacing:inherit;color:inherit;background:none;
  border:0;padding:0;cursor:pointer;display:inline-flex;align-items:baseline;gap:12px;text-align:left}
.band .baandnavn .caret{font-family:'DM Sans',Helvetica,sans-serif;font-weight:500;font-size:17px;width:12px;flex:none}
.band .baandnavn:hover{text-decoration:underline;text-underline-offset:4px}
.band .baandnavn:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}
.band.ch{background:var(--chBg);color:var(--chFg)}
.band.act{background:var(--actBg);color:var(--actFg)}
.band.det{background:var(--detBg);color:var(--detFg)}

.r2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:baseline;
  gap:14px;padding:13px 18px;border-bottom:1px solid var(--hair)}
.r2:last-child{border-bottom:0}
.r2 .lab{margin:0;font-size:18px;line-height:1.4}
.r2 .sub{margin:4px 0 0;font-family:'Bricolage Grotesque',Helvetica,sans-serif;
  font-size:13px;color:var(--mute)}
.r2 .why{margin:7px 0 0;font-size:15px;line-height:1.55;color:oklch(0.36 0.02 60);max-width:62ch}

.chipS{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;display:inline-block;padding:5px 10px;
  border-radius:999px;white-space:nowrap;background:var(--tieBg);color:var(--tieFg)}
.chipS.good{background:var(--winBg);color:var(--winFg)}
.chipS.bad{background:var(--loseBg);color:var(--loseFg)}

.fold{width:100%;text-align:left;font:inherit;color:var(--mute);background:var(--tint);
  border:0;border-bottom:1px solid var(--hair);padding:10px 18px;cursor:pointer;
  font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:13px}
.fold:hover{color:var(--ink);background:oklch(0.96 0.014 85)}

.legend{margin:18px 0 0;font-size:15px;line-height:1.6;color:oklch(0.54 0.03 60);font-style:italic}
.back{margin:44px 0 0;font-size:19px}
/* EN VEJ VIDERE (24/9): blokken paa de offentlige sider og compare.html, der sender til
   /start.html?d=. Kortets form og husets handlingsknap. */
.egen{background:var(--white);border:1.5px solid var(--ink);border-radius:18px;padding:16px 20px;margin:18px 0 0}
.egen p{margin:0 0 10px;font-size:17px;line-height:1.5}
.egenform{display:flex;flex-wrap:wrap;gap:8px}
.egenform input{flex:1 1 200px;font:inherit;font-size:16px;padding:9px 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white)}
.egenform button{font:inherit;font-weight:700;font-size:15px;padding:9px 18px;border:1.5px solid var(--ink);border-radius:999px;background:#ff8a47;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
/* EDITORIALS EMNER (24/9). Boksen nederst i en artikel og emnesektionen i en hovedartikel.
   Et kort i husets form, saa den laeses som en del af siden og ikke som en annonce. Se
   lib/emner.mjs. */
.emne{background:var(--white);border:1.5px solid var(--ink);border-radius:18px;
  padding:18px 22px;margin:40px 0 0}
.emne h2{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:600;font-size:21px;
  letter-spacing:-.01em;margin:0 0 8px}
.emne ul{margin:8px 0 0;padding-left:20px}
.emne li{margin:6px 0;font-size:17px;line-height:1.45}
.emne p{margin:10px 0 0;font-size:16px}

/* ---- smaa faelles moenstre -------------------------------------------------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0 0}
.tile{background:var(--white);border:1.5px solid var(--ink);border-radius:18px;padding:18px 20px}
.tile .num{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:800;
  font-size:34px;line-height:1.05;letter-spacing:-.02em}
.tile .cap{font-size:15px;line-height:1.5;color:var(--ink2);margin:6px 0 0}
.note{background:var(--white);border:1.5px solid var(--ink);border-radius:18px;
  padding:16px 20px;margin:22px 0 0;font-size:16px;line-height:1.6;color:var(--ink2)}
.note b{color:var(--ink)}

/* ---- den udfoldede raekke (.rowdet, IKKE .det: .det er Details-fanens modifier,
   og .tab.det arvede display:grid herfra og blev fuld bredde) ---------------------------------------------------
   Tre sider folder raekker ud, og de gjorde det med hver sin skrifttrappe: tallene
   i mono 14, forklaringen i 17, kilden i Bricolage 13. Tre skriftstoerrelser og to
   skrifter oven paa hinanden laeser som tre loesrevne stumper i stedet for eet svar.
   Artboardet har to elementer og ikke flere: forklaringen, og een linje med
   grundlaget. Det er det her moenster, og det bor her saa de tre sider ikke kan
   drive fra hinanden igen. */
.rowdet{padding:14px 18px 18px 46px;background:var(--tint);
  border-bottom:1px solid var(--hair);display:grid;gap:10px}
.rowdet p{margin:0}
.rowdet .prose{font-size:17px;line-height:1.6;color:oklch(0.32 0.02 60);
  max-width:62ch;text-wrap:pretty}
.rowdet .prose + .prose{margin-top:-2px}
.rowdet .facts{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:13px;
  line-height:1.65;color:oklch(0.48 0.03 60);letter-spacing:.01em}
.rowdet .facts b{font-weight:700;color:oklch(0.34 0.02 60)}


/* ---- brandvaelgeren -----------------------------------------------------------
   Pillerne var saa brede som deres navn, og med seks brands ombroed de frit: tre
   halve raekker med huller i, og en "Changes"-vaelger der blev dobbelt saa bred som
   nabosiden fordi brandet tilfaeldigvis hed noget langt. Nu er sporet fast, saa de
   staar i kolonner uanset navnene, og et langt navn afkortes i pillen — det staar
   helt i listen naar man aabner den. Et brandnavn maa gerne forkortes; et TAL maa ikke. */
/* CHANGES' BRANDVAELGERE ligger UNDER vinduet og ikke ved siden af det. `.meta` er en
   flex-raekke med plads imellem, og `.slots` fylder hele bredden, saa den bryder af sig
   selv til sin egen linje. Vinduet foerst, fordi det gaelder alle kortene; brandene
   derunder, fordi hvert af dem er et kort for sig. */
.chslots{flex:1 1 100%}
/* EET KORT PR. BRAND, og baandet baerer brandets navn og dets eget antal. Med to kort under
   hinanden er "12 of 35 measures moved" i toppen en sum af to ting der ikke kan laegges
   sammen, saa taelleren staar her i stedet. */
.brandband{margin-top:22px}
.brandband:first-child{margin-top:12px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:6px;width:100%;margin:10px 0 0}
.slot{display:flex;align-items:stretch;min-width:0}
.slot .pick{flex:1 1 auto;min-width:0;text-overflow:ellipsis;overflow:hidden;
  border-top-right-radius:0;border-bottom-right-radius:0}
.slot.solo .pick{border-radius:999px}
.slot .x{flex:none;font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:14px;
  font-weight:700;line-height:1;color:var(--mute);background:var(--white);
  border:1.5px solid var(--ink);border-left:0;border-radius:0 999px 999px 0;
  padding:0 11px;cursor:pointer}
.slot .x:hover{color:var(--ink);background:var(--loseBg)}
.slots .addbtn{justify-content:center}
/* SAMME HOEJDE SOM VAELGEREN VED SIDEN AF. `.addbtn` arvede grundstoerrelsen paa 13px og
   stod 31px hoej ved siden af en pille paa 34. To knapper paa samme raekke der ikke er
   lige hoeje, laeser som to forskellige slags kontrol. */
.slots .addbtn{font-size:14px;padding:8px 14px}
/* LINJEN DER STAAR I STEDET FOR KNAPPEN. Er der intet ledigt brand at tilfoeje, staar
   grunden paa raekken i stedet, saa pladsen ikke bare er tom. Den er med vilje ikke en
   knap: der er intet at trykke paa. */
.fuldt{font-size:12.5px;color:var(--mute);font-style:italic;align-self:center}
/* Vaelgeren ved siden af fanerne maa ikke vokse med navnet. */
.pick.rival{max-width:230px}


/* ---- den brede tabel ----------------------------------------------------------
   Op til tre brands staar tabellen i sidens egen 720px-spalte. Ved den FJERDE bryder
   den ud til naesten hele vinduet: otte kolonner i 672px giver 84px pr. brand, og
   "16,608,824" er bredere end det. Skiftet er ikke en indstilling — det er det punkt
   hvor den smalle tabel holder op med at kunne vise tallene. */
#out.narrow{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
#out.wide{width:calc(100vw - 24px);max-width:1560px;margin:22px auto 0}
#out.wide .card{margin-top:0}
/* TIL KANTEN PAA EN TELEFON (1/10, Jesper: "fjern alt det padding paa siderne, saa tallene
   lettere kan vaere der"). Under 480 px stod kortet 24 px inde fra hver side, og de tre
   talkolonner delte 309 px paa en 360 px-telefon, saa "4,430,499" var bredere end sin kolonne.
   Nu deler de hele skaermen. Overskrift og kontroller beholder spalten; kun tabellen gaar ud.
   Gaelder Benchmark og Changes; Actions har ingen talkolonner og staar i <main>. */
@media(max-width:480px){
  #out.narrow{padding:0}
  #out.narrow .card{border-left:0;border-right:0;border-radius:0}
}

/* Kolonnehovedet i den brede: pillen med navnet, og under den hvad kolonnen er. */
.bhead{display:grid;justify-items:center;gap:2px;padding:9px 3px;min-width:0}
.bhead .bpick{max-width:100%;font-family:'Bricolage Grotesque',Helvetica,sans-serif;
  font-size:12px;font-weight:600;color:var(--ink);background:var(--white);
  border:1.5px solid var(--ink);border-radius:999px;padding:5px 9px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  -webkit-appearance:none;appearance:none;text-align:center}
.bhead .bpick.self{background:var(--benchBg);font-weight:700}
.bhead .bpick:hover{box-shadow:2px 2px 0 var(--ink)}
.bhead .bpick:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bhead .hint{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:oklch(0.58 0.03 60)}
.bhead .drop{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:oklch(0.58 0.03 60);
  background:none;border:0;padding:0;cursor:pointer}
.bhead .drop:hover{color:var(--loseFg)}


/* ---- kilden paa tallet ---------------------------------------------------------
   Stiplet understregning, arvet farve. Et tal der er blaat laeses som et link foerst
   og et tal bagefter, og det er den forkerte raekkefoelge. Navnet paa kilden staar
   ogsaa som tekst i linket, skjult for oejet: en title-attribut vises aldrig paa en
   telefon og sjaeldent for en oplaesning. */
a.prov{color:inherit;text-decoration:none;border-bottom:1px dotted oklch(0.72 0.02 60)}
a.prov:hover{color:inherit;border-bottom-color:var(--ink);border-bottom-style:solid}
a.prov:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* BROEDTEKSTEN I DET REDAKTIONELLE HAR SIT EGET LAESEMAAL.
   Spalten er 800px paa hver eneste side, saa rammen aldrig skifter. Men et langt afsnit
   laeses ikke bedst paa 800: maalt paa editorial.html giver 800px 72 tegn pr. linje mod
   720px' 64. Artiklerne er det ene sted paa sitet hvor man laeser mange afsnit i traek.

   680px og ikke en procentdel: det er praecis den tekstbredde siderne havde da spalten
   var 720 (720 minus 2x24 polstring = 672), saa laesemaalet er det samme som foer.

   DEN SKIFTER IKKE BREDDE PAA SIDEN. Header, footer, kort og billeder staar stadig i de
   800 som alle andre sider; det er kun selve afsnittene der er smallere. Reglen findes i
   forvejen paa forsiden, hvor decket er laast med `max-width:58ch`.

   `.redaktionel` saettes paa <body> i editorial.html og article-*.html. */
body.redaktionel main p,
body.redaktionel main ul,
body.redaktionel main ol,
body.redaktionel main blockquote{max-width:680px}

/* BAANDHOVEDETS REGNSKAB. Tre tal der svarer paa "hvad er der mere her", i den linje der
   i forvejen sagde "23 of 27". To af dem er knapper; foer stod de som graa linjer under
   hvert baand, altsaa tyve kontroller paa en side med enogtyve. Se kommentaren i
   d-benchmark.html.

   KNAPPEN SKAL LIGNE EN KNAP UDEN AT RAABE. Den laaner baandets egen farve og faar kun en
   understregning, saa baandet stadig laeses som eet hoved og ikke som en vaerktoejslinje. */
.band .bandregn{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
/* "N PIECES OF EVIDENCE" ER VAEK FRA BAANDET (30/9): materialet staar i bundfolden. */
@media(max-width:560px){
  .band .bandregn{gap:10px}
  .band .n{font-size:12px}
}

/* Linjen over de ensidige raekker naar de er foldet ud. Den forklarer hvad de ER; foer
   stod forklaringen inde i knappens tekst, og saa forsvandt den naar man aabnede. */
.foldnote{font-size:13.5px;color:var(--mute);line-height:1.5;margin:0;
  padding:10px 16px 10px 38px;border-top:1px solid var(--hair)}

/* ETIKETTEN FAAR HELE BREDDEN PAA EN TELEFON, 25/9. Changes og Actions staar i tre
   kolonner: plus, etiket og chip. Ved 390px tog chippen ("16 changed · 8 days", "BROKEN")
   sin fulde bredde, og etiketten blev presset ned paa eet ord pr. linje. Under 560px
   ligger chippen paa linjen under etiketten i stedet. Changes' tabel med flere brands
   (.chtab) har sine egne kolonner og roeres ikke. `button.arow` og ikke `.arow`: Settings
   har sin egen .arow (en div med to kolonner), og den maa ikke faa de her. */
@media(max-width:560px){
  .chrow:not(.chtab .chrow),button.arow{grid-template-columns:16px minmax(0,1fr)}
  .chrow:not(.chtab .chrow) > :nth-child(n+3),button.arow > :nth-child(n+3){grid-column:2;justify-self:start;margin-top:4px}
}