/* 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: 720px inklusive
     polstring, altsaa 672px tekst. */
  --col:720px;
  --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. */
  --benchBg:oklch(0.86 0.055 250); --benchFg:oklch(0.31 0.07 258);
  --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.92 0.035 250);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);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)}
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}
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}

/* ---- 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}
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}
.deck{font-size:21px;line-height:1.6;color:var(--ink2);margin:0;text-wrap:pretty}
.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}
.tab{font:inherit;text-decoration:none;font-weight:600;border:1.5px solid var(--ink);
  border-radius:999px;padding:8px 16px;opacity:.72;cursor:pointer}
.tab:hover{opacity:1;box-shadow:2px 2px 0 var(--ink)}
.tab[aria-current="page"]{font-weight:700;opacity:1;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}
.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.9 0.045 250)}
.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)}
.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}
.band{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;padding:11px 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:baseline}
.band .n{font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:none;opacity:.85}
.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}

/* ---- 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. */
.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}
/* 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}

/* 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}