/* 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)}
  /* 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:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
    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}
  .thead .self{color:var(--ink);font-weight:700}


  .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:11px 18px;font-size:17px;line-height:1.35;display:flex;align-items:baseline;gap:10px;min-width:0}
  .r .caret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
    color:oklch(0.55 0.03 60);width:10px;flex:none}
  .r .v{padding:11px 12px 11px 6px;text-align:right;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
  /* 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}
  .nomeas{color:oklch(0.62 0.02 60);font-weight:500}
  /* 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:11px 16px 11px 6px;text-align:right;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:600;
    color:oklch(0.4 0.03 60)}
  .gap.flat{color:oklch(0.72 0.02 60);font-weight:400}
  .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:ui-monospace,SFMono-Regular,Menlo,monospace;
    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}
  .fold{min-width:var(--tw)}
  main.head{padding-bottom:0}
  main.tail{padding-top:18px}
  /* 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 .chip{padding:3px 6px;font-size:12px}
  #out.wide .band{padding-left:18px}
  #out.wide .rowdet{padding:14px 16px 18px 38px}