/* SPALTEN ER DEN SAMME HELE VEJEN NED, 21/9.
     Tabellen er ikke prosa og skal ikke have prosaens bredde: paa 720px ombroed 113 af de
     138 etiketter paa Benchmark. Men da kortet alene blev bredt, stak det firs pixels ud
     til hver side af logoet, overskriften, fanerne og vaelgerne, og siden laeste som to
     lag der ikke hoerte sammen.
     `--col` er den ene knap: `canvas.css` giver header, main, footer OG kortet den samme
     bredde ud af den. Saettes den her, flytter hele siden sig samlet, og de tre
     rapportsider deler stadig kant, saa fanerne ikke hopper naar man skifter.
     Maalt paa Loop mod Hears, 142 raekker, hvor kun spalten aendres: ved 720 ombryder
     nitten etiketter, ved 800 er der to tilbage (og de to ER saetninger, ikke etiketter),
     og over 800 koeber hver ekstra pixel ingenting. Fra 800 til 880 falder ombrydningen
     med een raekke, mens afstanden fra etiket til foerste tal vokser niogtredive pixels,
     og sidehoejden rykker sig 0,2 procent. Tomrummet mellem etiket og tal er selve den
     fejl den gamle femkolonne-tabel havde, saa spalten stopper ved knaekket. */
  /* Broedteksten foelger ikke med ud. En dok paa 21px over 832px er femogfirs tegn pr.
     linje; oejet taber linjen paa vej tilbage. Venstrekanten er den samme, og det er den
     der binder siden sammen. */
  .deck{max-width:62ch}
  /* Kortet udvider sig med antallet af brands: kolonnebredden er den samme uanset hvor
     mange der staar, og min-width regnes ud af antallet, saa kortet scroller vandret
     naar der ikke er plads i spalten. Det er hele mekanikken bag "op til syv". */
  .grid{display:grid;grid-template-columns:var(--cols);min-width:var(--tw)}
  /* MATERIALETS .grid ER EN ANDEN .grid (1/10). Rapporten bruger klassen til sine gallerier
     (annoncer, opslag, omtaler: column-count 3), og regnen ovenfor gav dem tabellens fire
     kolonner, saa annoncekortene stod 304, 111, 111 og 100 px brede. */
  .matblok .grid{display:block;min-width:0}
  /* v3 flyttede domaenevaelgerne op i vaerktoejslinjen, og hovedet blev rene
     kolonneetiketter. Med syv brands er det ogsaa det eneste der kan lade sig goere:
     syv piller i tabelhovedet ville presse hver talkolonne under et brandnavn. */
  .thead{align-items:end;font-family:'Bricolage Grotesque',Helvetica,sans-serif;
    font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
    border-bottom:1.5px solid var(--ink)}
  .thead div{padding:9px 12px 9px 6px;text-align:right}
  .thead div:first-child{padding:9px 18px;text-align:left}
  .thead div:last-child{padding:9px 16px 9px 6px}
  /* Ingen overskriftsmaerke over titlen (30/9, Jesper): menuen ved siden af Sort siger hvilken
     side det er, og saa staar kontrollerne samme sted paa de tre sider. */
  .hero .eyebrow{display:none}
  .thead .self{color:var(--ink);font-weight:700}
  /* BRANDNAVNENE ER DET MAN SKAL KUNNE SE (30/9, Jesper): i 11,5 px graa versaler kunne man
     naesten ikke se hvem der sammenlignes, heller ikke i det faste hoved paa telefon. Navnene
     staar i 16 px, sort og fed; "Measure" og "Spread" er etiketter og bliver smaa. */
  .thead .bn{font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:700;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thead{align-items:center}
  /* Kopien af tabelhovedet der staar fast oeverst paa telefon (30/9), se `klaebHoved`. */
  .fasthoved{position:fixed;top:0;z-index:20;display:none;overflow:hidden;
    background:var(--white);box-shadow:0 2px 8px oklch(0.24 0.02 60 / .12)}
  .fasthoved .thead{background:var(--white)}
  /* HELE BAANDET ER KNAPPEN (30/9, mobil-review): navnet var 23 px hoejt at ramme, og resten af
     baandet gjorde ingenting. */
  .band{position:relative}
  .band .baandnavn::after{content:"";position:absolute;inset:0}
  /* Genvejen ligger over baandets klikflade, ellers aabnede et klik bare baandet (1/10). */
  .band .baandgenvej{position:relative;z-index:1;font-family:'DM Sans',Helvetica,sans-serif;font-weight:600;
    font-size:13.5px;letter-spacing:0;color:inherit;text-decoration:none;white-space:nowrap;
    border:1.5px solid currentColor;border-radius:999px;padding:4px 12px}
  .band .baandgenvej:hover{background:oklch(1 0 0 / .45)}
  .band .baandgenvej:focus-visible{outline:2px solid currentColor;outline-offset:2px}
  @media (max-width:760px){.band .baandgenvej{padding:9px 14px}}
  /* "every brand on this account is already shown" hoerer til en konto; eksemplet har ingen. */
  .slots .fuldt{display:none}
  /* TELEFON (30/9, Jesper, efter mobil-reviewet). Under 760 px: 16 px i felterne, saa iPhone
     ikke zoomer ind ved et tryk, og 44 px trykflader. */
  @media (max-width:760px){
    .meta select,.slots .pick{font-size:16px;min-height:44px}
    .matknap{min-height:44px}
    nav.top a{min-height:44px;display:inline-flex;align-items:center}
  }
  /* Under 480 px: raekken i to linjer, navnet i fuld bredde og tallene under i hver sin kolonne,
     saa Hears og Spread staar paa skaermen uden at swipe. Menuen er logo og knap, kontrollerne
     staar paa een linje og brandene side om side. `--nk` er antallet af talkolonner. */
  @media (max-width:480px){
    #out.narrow .grid{min-width:0;grid-template-columns:repeat(var(--nk),minmax(0,1fr))}
    #out.narrow .band,#out.narrow .rowdet{min-width:0}
    #out.narrow .r .m{grid-column:1 / -1;padding:12px 16px 4px}
    #out.narrow .r .v,#out.narrow .r .gap{padding:0 10px 12px 6px}
    #out.narrow .r .pakn{grid-column:1 / -1 !important;text-align:left;padding:0 16px 12px 38px}
    #out.narrow .thead > div:first-child{display:none}
    /* Det faste hoved ligger uden for #out og skal have de samme to regler, ellers staar det med
       "Measure" og fire kolonner over raekker med tre (30/9). */
    .fasthoved .grid{min-width:0;grid-template-columns:repeat(var(--nk),minmax(0,1fr))}
    .fasthoved .thead > div:first-child{display:none}
    #out.narrow .swipe{display:none !important}
    nav.top a:not(.cta){display:none}
    /* Show faar lidt mere end Sort: "Benchmark" er 86 px, "By role" 53 (maalt ved 16 px). */
    .meta .ctrls{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,.82fr) minmax(0,1.2fr);gap:4px;width:100%}
    .meta .ctrls label{font-size:0;gap:0;min-width:0}
    /* Egen smal pil i stedet for browserens, saa "Everyone" og "Benchmark" kan staa helt i en
       tredjedel af linjen. Klippet tekst ("Everyo...") var det designnoten advarer imod. */
    .meta .ctrls select{width:100%;max-width:none;padding:7px 20px 7px 9px;text-overflow:clip;
      -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% - 12px) calc(50% + 1px),calc(100% - 8px) calc(50% + 1px);
      background-size:4px 4px,4px 4px;background-repeat:no-repeat}
    .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
    .matblok{margin:0 8px 12px;padding:12px}
  }
  /* Smalle Android-telefoner (360 px): mindre luft om teksten, saa ingen af de tre klippes. */
  @media (max-width:374px){
    .meta .ctrls select{padding:7px 15px 7px 5px;
      background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 5px) calc(50% + 1px)}
  }


  /* PAKKEN ER EN RAEKKE SOM DE ANDRE (29/9, Jesper). Den var en graa foldeknap med en
     saetning fuld af tal under, og den lignede ingen af raekkerne omkring den. Nu har den
     samme etiket, samme + og samme hoejde, og hvor tallene staar paa en maaling, staar
     antallet af maalinger i pakken: der er ingen to tal at stille over for hinanden. */
  .r .pakn{padding:13px 12px 13px 6px;text-align:right;
    font-family:'DM Sans',Helvetica,sans-serif;font-size:15px;color:var(--mute)}
  /* RAMMEN OM MATERIALET. Selve indholdet er rapportens egen markup og styres af
     `data/materiale.css`, som er rapportens stilark scopet til `.matblok`. Her staar kun
     det der holder blokken paa plads paa Benchmark. */
  /* BREDDEN FRATRUKKET MARGENEN, 25/9. `.fold` er 100 % bred, og med 18px paa hver side stak
     knappen 36px ud af tabellen, saa kortet kunne rulles sidelaens paa alle bredder uden at
     der var noget at se derude. */
  .matknap{margin:10px 18px 14px;width:calc(100% - 36px);}
  .matknap.fri{margin:14px 18px;}
  /* MATERIALET RULLER I SIG SELV (30/9). Det er skrevet til omkring 1.000 px, og kortet
     blev foer bredere naar det blev aabnet. Nu bliver kortet paa 800 px. */
  .matblok{margin:0 18px 18px;padding:14px 16px;background:oklch(0.985 0.008 85);
    border:1px solid var(--hair);border-radius:12px;overflow-x:auto;}
  /* AFSNITTET UNDER SIN RAEKKE (30/9). En foldelinje, ikke en maaling: ingen tal, lidt
     lysere bund, samme venstrekant som raekkerne. */
  .matrad{display:flex;align-items:baseline;gap:8px;width:100%;margin:0;padding:10px 18px;
    border:0;border-bottom:1px solid var(--hair);background:oklch(0.985 0.008 85);
    font:inherit;color:var(--ink2);text-align:left;cursor:pointer}
  .matrad .caret{font-family:'DM Sans',Helvetica,sans-serif;font-size:13px;width:10px;flex:none;
    color:oklch(0.55 0.03 60)}
  .matrad .mtit{font-family:'DM Sans',Helvetica,sans-serif;font-size:15px;font-weight:600}
  .matrad .matvin{margin-left:8px;font-weight:400;font-size:12.5px;color:var(--mute)}
  .matrad:hover .mtit{text-decoration:underline;text-underline-offset:4px}
  .matrad:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  .matrad + .matblok{margin-top:10px}
  .matblok.matiraekke{margin:0 0 6px;padding:4px 18px 14px;border-bottom:1px solid var(--rule)}
  .matsek + .matsek{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);}
  .matsek h4{margin:0 0 10px;font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:17px;}
  .matsek h4 .matvin{margin-left:10px;font-family:inherit;font-weight:400;font-size:12.5px;
    letter-spacing:.02em;color:var(--mute);}
  .matn{font-weight:600;letter-spacing:0;opacity:.75;}
  .matfejl{margin:0;font-size:14px;color:var(--mute);font-style:italic;}
  /* UNDEROVERSKRIFTERNE ER OVERSKRIFTER (29/9, proeve). De stod i 12,5px graa versaler og
     laestes som en billedtekst mellem raekkerne. Nu 16px i blaek og almindelige bogstaver, en
     papirtone bag og en streg under; baandet over er stadig det stoerste niveau. */
  .tema{display:flex;align-items:baseline;gap:12px;padding:17px 18px 10px;
    font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-weight:700;font-size:16px;
    color:var(--ink);background:oklch(0.975 0.012 85);border-bottom:1.5px solid var(--rule);}
  .tema .tn{font-family:'DM Sans',Helvetica,sans-serif;font-weight:500;font-size:14px;color:var(--mute);}
  /* `.matslut`: et afsnit sidst i et baand (battlecardet, vaekstplanen, framework-kapitlerne)
     ser ud som underoverskrifterne over det (30/9, Jesper). */
  .tema.temaknap,.tema.matslut{width:100%;margin:0;border:0;border-bottom:1.5px solid var(--rule);text-align:left;cursor:pointer}
  .tema.temaknap .caret,.tema.matslut .caret{font-family:'DM Sans',Helvetica,sans-serif;font-weight:500;font-size:15px;width:12px;flex:none}
  .tema.temaknap:hover .tnavn,.tema.matslut:hover .tnavn{text-decoration:underline;text-underline-offset:4px}
  .tema.temaknap:focus-visible,.tema.matslut:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  .konstlinje{margin:14px 18px 4px;font-size:13.5px;line-height:1.6;color:oklch(0.42 0.02 60);max-width:88ch;}
  .band{min-width:var(--tw)}
  .r{align-items:baseline;border-bottom:1px solid var(--hair);cursor:pointer;
    background:transparent;text-align:left;font:inherit;color:inherit;padding:0;
    border-left:0;border-right:0;border-top:0;width:100%}
  .r:hover{background:oklch(0.975 0.014 85)}
  .r[aria-expanded="true"]{background:var(--tint)}
  .r .m{padding:13px 18px;font-size:17px;line-height:1.35;display:flex;align-items:baseline;gap:10px;min-width:0;color:var(--ink)}
  .r .caret{font-family:'DM Sans',Helvetica,sans-serif;font-size:13px;
    color:oklch(0.55 0.03 60);width:10px;flex:none}
  .r .v{padding:13px 12px 13px 6px;text-align:right;
    font-family:'DM Sans',Helvetica,sans-serif;font-size:15px;font-variant-numeric:tabular-nums}
  /* ET TAL MAA IKKE KLIPPES. Med ellipsis stod "16,608,824" som "16,608,8…" paa telefon,
     og et afkortet tal er et forkert tal. Tabellen scroller, saa der ER plads. */
  .chip{display:inline-block;padding:3px 8px;border-radius:6px;white-space:nowrap}
  .win{background:var(--winBg);color:var(--winFg);font-weight:700}
  .lose{background:var(--loseBg);color:var(--loseFg);font-weight:500}
  .tie{background:var(--tieBg);color:var(--tieFg);font-weight:500}
  .mid{background:oklch(0.92 0.085 95);color:oklch(0.40 0.08 80);font-weight:500}
  .nomeas{color:var(--mute);font-weight:400;font-size:13.5px}
  /* Spread-kolonnen farves efter HVEM DER FOERER, ikke efter fortegn: paa "lavere er
     bedre" ville et minus ellers blive malet som et tab. */
  .gap{padding:13px 16px 13px 6px;text-align:right;
    font-family:'DM Sans',Helvetica,sans-serif;font-size:14px;font-weight:600;
    font-variant-numeric:tabular-nums;
    color:oklch(0.4 0.03 60)}
  /* KONTRAST 4,5:1 (30/9, mobil-review): den graa var 2,7:1 paa 12,5 px. */
  .gap.flat{color:var(--mute);font-weight:400;font-size:12.5px}
  .rowdet{min-width:var(--tw)}
  .rowdet .cav{margin:0 0 10px;padding:9px 12px;border-radius:10px;
    background:oklch(0.93 0.055 75);color:oklch(0.34 0.09 55);font-size:15px;line-height:1.5}
  .rowdet .evid{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hair)}
  .rowdet .evhead{margin:0 0 3px;font-family:'Bricolage Grotesque',Helvetica,sans-serif;
    font-weight:700;font-size:15px}
  .rowdet .evintro{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--mute)}
  .rowdet .evlist{margin:0;padding-left:18px;font-size:15px;line-height:1.55}
  .rowdet .evlist li{margin-bottom:5px}
  .rowdet .evlist a{color:oklch(0.42 0.09 60)}
  .rowdet .evmeta{margin-left:8px;font-family:'DM Sans',Helvetica,sans-serif;
    font-size:12.5px;color:var(--mute)}
  .rowdet .evnote{display:block;font-size:13.5px;color:var(--mute)}
  .rowdet .evmore{margin:7px 0 0;font-size:13.5px;color:var(--mute)}
  .rowdet .where{margin:10px 0 0;font-size:15px;line-height:1.6}
  .rowdet .where a{color:oklch(0.42 0.09 60)}
  .rowdet .tod{font-weight:700}
  /* FORKLARINGEN I FOLDEN (4/10): hvordan tallet laeses og forbeholdet, foer metadatalinjen. */
  .rowdet .metode{margin:8px 0 0;font-size:14px;line-height:1.55;color:oklch(0.36 0.02 60)}
  .rowdet .metode b{font-weight:700;color:oklch(0.3 0.02 60)}
  /* SIDE OM SIDE (4/10): en fordeling med poster for begge brands staar i een tabel. */
  .rowdet .evtab{width:100%;max-width:520px;border-collapse:collapse;margin-top:6px;
    font-size:15px;font-variant-numeric:tabular-nums}
  .rowdet .evtab th,.rowdet .evtab td{padding:5px 8px;border-bottom:1px solid var(--hair);text-align:right}
  .rowdet .evtab th:first-child,.rowdet .evtab td:first-child{text-align:left;padding-left:0}
  .rowdet .evtab th{font-family:'Bricolage Grotesque',Helvetica,sans-serif;font-size:13px;font-weight:700}
  .fold{min-width:var(--tw)}
  /* Den brede: mindre raekkehoejde og centrerede tal, saa otte kolonner kan staa
     paa een skaerm uden at hver raekke bliver to linjer hoej. */
  #out.wide .r .m{padding:10px 10px 10px 14px;font-size:15px;line-height:1.3;gap:8px}
  #out.wide .r .v{padding:10px 3px;text-align:center}
  #out.wide .r .pakn{padding:10px 3px;text-align:center}
  #out.wide .chip{padding:3px 6px;font-size:12px}
  #out.wide .band{padding-left:18px}
  #out.wide .rowdet{padding:14px 16px 18px 38px}
  /* INDLEJRET: SIDENS EGEN RAMME SKAL VAEK.
     Forsiden viser den her side i en iframe. Uden reglen her stod sidens EGEN footer midt
     paa forsiden — "About  Privacy  Contact" mellem rapporten og prisafsnittet, hvor det
     laeses som forsidens egen bund. Samme med headeren og "Back to the overview": inde i
     en ramme peger de ud af den side man staar paa.
     Flaget kommer fra `?indlejret=1` i iframens adresse og saettes af scriptet nedenfor. */
  /* HEADEREN BLIVER STAAENDE. Forsiden klipper 293 px af toppen for at skjule den, og
     goer man den `display:none`, flytter alt 293 px op og klippet skaerer ind i indholdet.
     Den var aldrig synlig; det var kun footeren der stak ud. */
  /* FARVENOEGLEN STAAR IKKE PAA FORSIDEN (Jesper 29/9). Kundens egen Benchmark har den stadig. */
  html.indlejret #legend,
  html.indlejret > body > footer,
  html.indlejret main.rapport > .tail .back,
  /* Formularen "Want this for your own brand?" paa /b/-siderne: forsiden har sin egen, og dens
     underkant stak ud over klippet i monday-fanen (13/10). */
  html.indlejret .egen { display: none !important; }
  /* TABELLEN RULLER, OG DET SKAL KUNNE SES, 25/9. Ved 390px klippede kortet det andet brand
     af uden tegn paa at der var mere. Naar tabellen er bredere end kortet (JS saetter
     `rulbar`), staar en linje over den og en skygge i hoejre kant; rullet helt til hoejre
     forsvinder skyggen. */
  .swipe{display:none;margin:14px 0 -12px;font-family:'Bricolage Grotesque',Helvetica,sans-serif;
    font-size:13px;font-weight:600;color:var(--mute)}
  #out.rulbar .swipe{display:block}
  #out.rulbar .card{position:relative}
  #out.rulbar .card::after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;
    pointer-events:none;border-radius:0 20px 20px 0;
    background:linear-gradient(to left,oklch(0.3 0.02 60 / .18),oklch(0.3 0.02 60 / 0));transition:opacity .2s}
  #out.rulbar.rulslut .card::after{opacity:0}
  /* DEN UDFOLDEDE RAEKKE LAESES INDEN FOR KORTET, 25/9. Den var lige saa bred som tabellen, saa
     ved 390px stod hver linje i noten og listerne klippet af i hoejre kant, og med begge
     brands' lister under raekken blev det dobbelt saa meget. Naar tabellen ruller, er
     uddybningen kortets bredde og bliver staaende mens tallene rulles. */
  #out.rulbar .rowdet{min-width:0;position:sticky;left:0}
  html.indlejret > body { padding-bottom: 0 }