:root{
  --paper:#E9EBE3;
  --card:#F4F5F0;
  --ink:#171A21;
  /* Alltid mörk, oavsett tema — texten som ligger ovanpå överstrykningsstrået
     (.mk) måste vara läsbar mot den ljusa gula färgen, som är densamma i
     bägge lägena. Om den bara ärvde --ink blev det vit text på gult i mörkt
     läge när --ink vändes ljus för resten av sidan. */
  --ink-on-mark:#171A21;
  --slate:#6A7280;
  --rule:#C7CDBF;
  --rule-soft:#D8DCD1;
  --pine:#2B6353;
  --pine-deep:#1E4A3D;
  --mark:#F0D64A;
  --alert:#A8371D;
  /* Fyllnadsgrad — samma tre nyanser återanvänds i chip, listrad, tagg och
     dagpanel (var för sig hårdkodade tidigare, 13 upprepningar av samma
     tre hex-värden). En framtida färgjustering är nu en rad, inte fyra. */
  --fill-full:#A32D2D;         --fill-full-hover:#FBEEEE;         --fill-full-text:#791F1F;
  --fill-filling:#C99A2E;      --fill-filling-hover:#FCF6EA;      --fill-filling-text:#6B4A05;
  --fill-open:#3B6D11;         --fill-open-hover:#EFF5E8;         --fill-open-text:#27500A;
  --paper-dot:rgba(0,0,0,.024);
  --hover-surface:#E4E7DE;
  --r:3px;
  --pad:clamp(14px,3.2vw,34px);
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
/* Listvyn (all kommande, opaginerad) är ofta mycket längre än månadsvyn och
   kräver en scrollbar som månadsvyn inte gör — utan det här reserveras
   scrollbarens plats alltid, annars hoppar hela sidan i sidled när den
   dyker upp eller försvinner mellan vyerna. */
html{scrollbar-gutter:stable}
body{
  background-color:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 0.6px,transparent 0.6px);
  background-size:5px 5px;
  color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pine-deep);text-decoration-thickness:1px;text-underline-offset:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}

/* ---------- masthead ---------- */
.masthead{background:var(--pine-deep);color:#F1F3EC;padding:3px 0 2px;border-bottom:3px solid var(--ink)}
.mh-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:150px;height:150px;flex-shrink:0;object-fit:contain}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,6.4vw,58px);line-height:.92;letter-spacing:-.02em;margin:0;
  font-variation-settings:"opsz" 72;
}
h1 .thin{font-weight:500;opacity:.72;display:block;font-size:.42em;letter-spacing:.06em;text-transform:uppercase;margin-top:9px}
.status{font-family:var(--mono);font-size:11.5px;line-height:1.7;letter-spacing:.01em;color:#C3D3CB;text-align:right}
/* Läser in… såg likadant ut som en vanlig statusrad — inget signalerade att
   sidan faktiskt jobbade, eller att ett fel skiljer sig från vardagsläget. */
.status.loading{animation:statusPulse 1.4s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.4}}
.status.error{color:#F0A8A0;font-weight:600;animation:none}
.status b{color:#F1F3EC;font-weight:600}
.status .warn{color:var(--mark)}

/* ---------- nytt-panel ---------- */
.news{background:var(--card);border-bottom:1px solid var(--rule)}
.news-inner{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-left:5px solid var(--mark);padding-left:14px;margin-left:-19px}
.news h2{font-family:var(--display);font-size:15px;margin:0 0 4px;font-weight:700;letter-spacing:-.01em}
.news ul{margin:0;padding:0;list-style:none;font-size:13.5px;columns:2;column-gap:28px}
.news li{margin:2px 0;break-inside:avoid}
.news li .d{font-family:var(--mono);font-size:11.5px;color:var(--slate);margin-right:7px}
.news li button{background:none;border:0;padding:0;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--rule)}
.news li button:hover{text-decoration-color:var(--ink)}
.news li.more{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.news .ack{margin-left:auto;flex:0 0 auto}
@media(max-width:720px){.news ul{columns:1}.news-inner{flex-wrap:wrap}}

/* ---------- controls ---------- */
.controls{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(7px);border-bottom:1px solid var(--rule)}
.bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:11px 0}
.nav{display:flex;align-items:center;gap:8px}
.nav .month{font-family:var(--display);font-weight:700;font-size:19px;width:15.5ch;text-align:center;letter-spacing:-.01em}
.icon-btn,.seg button,.pill,.ghost{
  border:1px solid var(--rule);background:var(--card);border-radius:var(--r);
  padding:5px 10px;cursor:pointer;font-size:13px;line-height:1.35;
}
.icon-btn{font-family:var(--mono);padding:4px 9px}
.icon-btn:hover,.pill:hover,.ghost:hover,.seg button:hover{border-color:var(--ink)}
.seg{display:flex}
.seg button{border-radius:0;margin-left:-1px}
.seg button:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
.seg button:last-child{border-radius:0 var(--r) var(--r) 0}
.seg button[aria-pressed=true]{background:var(--pine-deep);border-color:var(--pine-deep);color:#F1F3EC}
#filterToggle.active,#resetFilters.active{background:var(--pine-deep);border-color:var(--pine-deep);color:#F1F3EC}
.spacer{flex:1 1 40px}
.filters{display:flex;flex-wrap:wrap;gap:8px 10px;padding:0 0 12px;align-items:center}
#filterToggle{display:none}
.fgroup{display:flex;align-items:center;gap:6px}
.flabel{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--slate)}
.region[data-pos="mobile"]{display:none}
.pill[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.allnone{width:9ch;text-align:center;white-space:nowrap;border-style:dashed}
select,input[type=search]{
  font:inherit;font-size:13px;line-height:1.35;border:1px solid var(--rule);background:var(--card);
  border-radius:var(--r);padding:5px 8px;color:inherit;
}
input[type=search]{min-width:12ch}
/* Nativa <select> reserverar alltid lite extra höjd åt sin egen pil,
   oavsett padding/line-height — därför blev de aldrig riktigt lika
   höga som knapparna bredvid (t.ex. "Min plats"). appearance:none tar
   bort det inbyggda utrymmet, och en egenritad pil ersätter den. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3 4.5l3 3 3-3" stroke="%236A7280" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 9px center;background-size:9px 9px;
  padding-right:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- month grid ---------- */
main{padding:22px 0 60px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--rule);border-bottom:0;background:var(--card)}
.dow{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--slate);
  padding:7px 8px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule-soft);background:var(--paper)}
.dow:nth-child(7n){border-right:0}
.cell{min-height:96px;min-width:0;padding:5px 6px 8px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule-soft);position:relative}
.cell:nth-child(7n){border-right:0}
.cell.out{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--rule-soft) 6px 7px);opacity:.5}
.cell.past:not(.out){opacity:.6}
.cell.past:not(.out) .dnum{color:var(--rule)}
.cell .dnum{font-family:var(--mono);font-size:11.5px;color:var(--slate);display:block;margin-bottom:3px}
.cell.wknd .dnum{color:var(--alert)}
.cell.today .dnum{background:var(--ink);color:var(--paper);padding:0 4px;border-radius:2px}
.chip{
  display:block;width:100%;text-align:left;border:0;background:none;padding:3px 4px 3px 5px;margin:0 0 2px;
  border-left:2px solid var(--pine);cursor:pointer;font-size:12px;line-height:1.25;border-radius:0 2px 2px 0;
}
.chip:hover{background:var(--hover-surface)}
.chip .cn{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .cm{display:block;font-family:var(--mono);font-size:10px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.multi .cn::after{content:" →";color:var(--slate)}
.chip.more{border-left-color:var(--rule);color:var(--slate);font-family:var(--mono);font-size:10.5px;text-align:center}
.chip.more:hover{background:var(--hover-surface);color:var(--ink)}

/* Fyllnadsgrad — ändras dag för dag och går inte att filtrera bort, till
   skillnad från typ som man oftast redan valt bort/till innan man tittar
   på kalendern. Samma tre färger återanvänds i listvyns kantlinje/tagg. */
/* Fyller-på-guldet flyttat rejält bort ifrån fullt-rött (var #9C6B00,
   nästan lika mörkt som #A32D2D — svårt att skilja i en 2px kant). Kanterna
   är samtidigt gjorda bredare specifikt när det finns en fyllnadsgrad att
   visa, så färgytan bär även vid en hastig blick i kalenderrutan. */
.chip.fill-full{border-left-color:var(--fill-full);border-left-width:4px}
.chip.fill-filling{border-left-color:var(--fill-filling);border-left-width:4px}
.chip.fill-open{border-left-color:var(--fill-open);border-left-width:4px}
.chip.fill-full:hover{background:var(--fill-full-hover)}
.chip.fill-filling:hover{background:var(--fill-filling-hover)}
.chip.fill-open:hover{background:var(--fill-open-hover)}

/* highlighter — signaturen */
.mk{position:relative;display:inline;z-index:0;color:var(--ink-on-mark)}
.mk::before{
  content:"";position:absolute;z-index:-1;left:-3px;right:-4px;top:8%;bottom:2%;
  background:var(--mark);mix-blend-mode:multiply;
  transform:rotate(-.7deg) skewX(-9deg);
  clip-path:polygon(0 4%,100% 0,99% 96%,1% 100%);
}

/* ---------- list ---------- */
.list{border-top:1px solid var(--rule)}
/* .row är redan en <button> — favoritstjärnan kan inte nästlas i den
   (ogiltig HTML, bryter klicket), så den blir en egen flex-kolumn bredvid
   istället. Kantlinjen mellan rader flyttas hit så den täcker hela raden,
   stjärnkolumnen inräknad, annars fick delaren en synlig lucka. */
.row-wrap{display:flex;align-items:stretch;border-bottom:1px solid var(--rule-soft)}
.row-wrap .row{flex:1;min-width:0;border-bottom:0}
.fav{flex:0 0 auto;background:none;border:0;cursor:pointer;font-size:16px;color:var(--rule);
  padding:0 14px;display:flex;align-items:center}
/* (hover:hover) — mobilbrowsers applicerar :hover vid tryck och släpper det
   aldrig (ingen riktig pekare att lämna med). Utan spärren målades en
   nyss AVfavoriserad stjärna om till --pine (medelmörk grön, nästan som
   --pine-deep i .fav.on) istället för att gå tillbaka till ljusgrå — såg
   ut som att avmarkeringen inte gjort något, trots att S.favorites/
   aria-pressed redan var korrekt uppdaterade. Desktop med riktig mus
   opåverkad. */
@media (hover:hover){ .fav:hover{color:var(--pine);background:var(--card)} }
.fav.on{color:var(--pine-deep)}
.mgroup{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--slate);padding:16px 0 6px;border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule-soft);
  border-left:3px solid transparent;padding:11px 4px 11px 8px;cursor:pointer}
.row:hover{background:var(--card)}
.row.fill-full{border-left-color:var(--fill-full);border-left-width:5px}
.row.fill-filling{border-left-color:var(--fill-filling);border-left-width:5px}
.row.fill-open{border-left-color:var(--fill-open);border-left-width:5px}
.row.fill-full:hover{background:var(--fill-full-hover)}
.row.fill-filling:hover{background:var(--fill-filling-hover)}
.row.fill-open:hover{background:var(--fill-open-hover)}
.row .date{font-family:var(--mono);font-size:12.5px;line-height:1.3}
.row .date b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.row .date span{color:var(--slate);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.row .name{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.row .meta{display:block;font-size:12.5px;color:var(--slate);margin-top:3px}
.row .meta em{font-style:normal;color:var(--ink)}
.row .tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--rule);padding:2px 5px;border-radius:2px;color:var(--slate);white-space:nowrap}
.tag.fill-full{border-color:var(--fill-full);color:var(--fill-full-text);font-weight:600}
.tag.fill-filling{border-color:var(--fill-filling);color:var(--fill-filling-text);font-weight:600}
.tag.fill-open{border-color:var(--fill-open);color:var(--fill-open-text);font-weight:600}
.tag.new{background:var(--mark);border-color:#D9BE2E;color:#3A2E00;font-weight:600}
.tag.chg{border-color:var(--alert);color:var(--alert)}
.tag.src{border-style:dashed}
@media(max-width:640px){
  .row{grid-template-columns:60px 1fr;gap:11px}
  .row .tags{grid-column:2;justify-content:flex-start;margin-top:6px}

  /* Mastheaden tog nästan halva skärmen på mobil innan man ens nådde
     kalendern — dra ihop padding, rubrikstorlek och statusraden. */
  .masthead{padding:2px 0 2px}
  h1{font-size:23px}
  h1 .thin{margin-top:4px;font-size:.5em}
  .mh-top{gap:0}
  .status{text-align:left;margin-top:0;line-height:1.45}
  .brand{gap:8px}
  .mark{width:64px;height:64px}

  /* Filtren (Typ/Avstånd/Sök) är den största utrymmestjuven på mobil —
     döljs bakom en knapp och öppnas bara på begäran. Resten av .bar
     (nav, vy, region, Filter, Prenumerera, Dela vy) är avsiktligt INTE
     med i den kollapsen, och ska alltid sitta kvar på samma plats
     oavsett om panelen är öppen eller ej — annars hoppar knapparna runt
     varje gång man fäller ut/in filtren. Återställ filter är undantaget:
     den bor bara inne i den utfällda panelen på mobil (sist, efter Sök)
     eftersom den ändå bara är meningsfull när man just skådat filtren.
     Desktop är opåverkad: #filterToggle syns aldrig där och .filters
     ligger kvar i sitt vanliga display:flex. */
  #filterToggle{display:inline-flex}
  .filters{display:none;width:100%}
  .filters.open{display:flex}
  .bar{border-bottom:1px solid var(--rule-soft);padding-bottom:12px;gap:8px}

  /* Regionväxlaren finns i en andra DOM-instans för mobil (se JS) istället
     för att flyttas med CSS order — platserna har helt olika grannar per
     brytpunkt, och två riktiga element är stabilare än ett flyttat med
     order när grannars bredd (t.ex. "Filter (3)") varierar. */
  .region[data-pos="desktop"]{display:none}
  .region[data-pos="mobile"]{display:flex}

  /* Återställ filter bor i Sök-gruppen på båda ytorna (sist i filterraden
     på desktop, samma rad som Sök på mobil) — margin-left:auto knuffar
     den till högerkanten bara på mobil, där gruppen är en egen fullbred
     rad istället för en del av en gemensam desktoprad. */
  #resetFilters{margin-left:auto}

  /* .spacer finns bara för att knuffa isär desktopens vänster/höger-
     grupper; på mobil där allt ligger tätt packat på egna rader gör den
     bara annat innehåll bortknuffat, så den stängs av helt. */
  .spacer{display:none}

  .nav .month{width:14.5ch;font-size:14px;white-space:nowrap}
  .fgroup{flex-wrap:wrap;width:100%}
  /* select fick inte samma krympning som knapparna här, så "Min plats"
     (en .ghost-knapp) hamnade synligt kortare än Stockholm/Alla-rutorna
     på ömse sidor om den. Selectarna krymper nu likadant. */
  .icon-btn,.seg button,.pill,.ghost,select{padding:4px 7px;font-size:12px}
  /* Ovanstående padding-shorthand nollställer select sitt padding-right
     till 7px och äter upp hela utrymmet som är reserverat åt pilen (se
     select{} ovan) — måste sättas tillbaka här, efter, annars hamnar
     pilen ovanpå sista bokstaven i långa ortnamn som "Stockholm". */
  select{padding-right:26px}

  /* Kompaktare månadsgrid — sju kolumner på en telefonbredd ger bara ~45px
     per dag, så cellerna och chippen krymper i stället för att bli oläsliga. */
  .cell{min-height:58px;padding:3px 2px 4px}
  .dow{padding:5px 2px;font-size:9px;letter-spacing:.04em}
  .cell .dnum{font-size:10px;margin-bottom:2px}
  .chip{padding:2px 3px 2px 4px;font-size:10px}
  .chip .cm{font-size:8.5px}
}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(23,26,33,.42);opacity:0;pointer-events:none;transition:opacity .18s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--card);
  border-left:3px solid var(--ink);z-index:50;transform:translateX(101%);
  transition:transform .22s cubic-bezier(.3,.8,.3,1);overflow-y:auto;padding:22px 24px 40px;
}
.drawer.on{transform:none}
.drawer .close{position:absolute;top:12px;right:16px}
.dnav{position:absolute;top:12px;right:60px;display:flex;gap:6px}
.dnav button{font-size:20px;padding:8px 16px;line-height:1}
.dnav button:disabled{opacity:.35;cursor:default}
.drawer h3{font-family:var(--display);font-size:25px;line-height:1.08;letter-spacing:-.02em;margin:8px 172px 4px 0;font-weight:800}
.drawer .when{font-family:var(--mono);font-size:13px;color:var(--pine-deep);margin-bottom:16px}
dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 20px;font-size:13.5px}
dt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);padding-top:3px}
dd{margin:0}
.signup-cta{display:block;text-align:center;background:var(--pine-deep);color:#F1F3EC;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.005em;
  padding:13px 16px;border-radius:6px;text-decoration:none;margin:0 0 16px}
.signup-cta:hover{background:var(--pine)}
.drawer .acts{display:flex;flex-wrap:wrap;gap:8px}
/* .ghost används på både <button> och <a> (Prenumerera, "Öppna hos...",
   "Visa på karta") för att se ut som samma sortens knapp — men den globala
   a{color:...}-regeln vann över allt annat för just <a>-varianterna, så de
   fick grön text medan knapparna bredvid inte gjorde det. */
.ghost{text-decoration:none;display:inline-block;color:inherit}
.fav-toggle.on{color:var(--pine-deep);border-color:var(--pine-deep)}
.favimport-msg{background:var(--card);border:1px solid var(--pine-deep);border-left:4px solid var(--pine-deep);
  padding:10px 14px;margin:0 0 14px;font-size:13.5px;border-radius:4px}
.favexport{margin:0 0 14px}
.favexport button{background:none;border:0;padding:0;font:inherit;font-family:var(--mono);font-size:13px;
  color:var(--pine-deep);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hist{border-top:1px solid var(--rule);margin-top:20px;padding-top:12px;font-size:12.5px;color:var(--slate)}
.hist b{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);display:block;margin-bottom:5px}
.minimap{border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin:-6px 0 20px}
.minimap iframe{width:100%;height:170px;border:0;display:block}
.wx{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:10px 14px;margin:0 0 20px;
  font-size:13.5px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.wx-text{margin:0;flex:1;min-width:0}
.wx b{display:block;font-family:var(--display);font-weight:700;font-size:13px;margin-bottom:4px}
.wx-verdict{font-weight:600}
.wx-verdict.good{color:var(--fill-open-text)}
.wx-verdict.ok{color:var(--fill-filling-text)}
.wx-verdict.bad{color:var(--fill-full-text)}
.wx-detail{display:block;color:var(--slate);font-size:12px;margin-top:2px;font-family:var(--mono)}
.wx-img{width:88px;height:88px;object-fit:contain;flex:0 0 auto;display:block}
.platsbar{height:6px;border-radius:3px;background:var(--rule-soft);overflow:hidden;margin-bottom:4px}
.platsbar-fill{height:100%;background:var(--slate)}
.platsbar.fill-full .platsbar-fill{background:var(--fill-full)}
.platsbar.fill-filling .platsbar-fill{background:var(--fill-filling)}
.platsbar.fill-open .platsbar-fill{background:var(--fill-open)}
.platsbar-txt{font-size:12.5px;color:var(--slate)}
.related{border-top:1px solid var(--rule);margin-top:20px;padding-top:12px}
.related b{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);display:block;margin-bottom:6px}
.related ul{list-style:none;margin:0;padding:0}
.related li{border-bottom:1px solid var(--rule-soft)}
.related li:last-child{border-bottom:0}
.rosterstats{border-top:1px solid var(--rule);margin-top:20px;padding-top:12px}
.rosterstats b{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);display:block;margin-bottom:6px}
.rosterstats b:not(:first-child){margin-top:16px}
.statbars{list-style:none;margin:0;padding:0}
.statbars li{display:grid;grid-template-columns:minmax(0,120px) 1fr auto;align-items:center;column-gap:8px;padding:3px 0;font-size:12.5px}
.sb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-bar{height:6px;border-radius:3px;background:var(--rule-soft);overflow:hidden}
.sb-fill{display:block;height:100%;background:var(--slate)}
.sb-n{font-family:var(--mono);font-size:11.5px;color:var(--slate);text-align:right;min-width:1.4em}
.sb-context{grid-column:2/-1;font-family:var(--mono);font-size:10.5px;color:var(--slate);margin:-1px 0 3px}
.my-pick-row{display:flex;flex-wrap:wrap;gap:10px 16px;margin-bottom:14px}
.my-pick-row label{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);flex:1;min-width:140px}
.my-pick-row select{font-family:var(--body);font-size:12.5px;padding:5px 6px;border:1px solid var(--rule);border-radius:4px;background:var(--card);color:var(--ink)}
.matchup-summary{font-family:var(--mono);font-size:11.5px;color:var(--pine-deep);margin:-2px 0 8px}
.top3{border-top:1px solid var(--rule);margin-top:20px;padding-top:12px}
.top3 b{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);display:block;margin-bottom:6px}
.top3 ul{list-style:none;margin:0;padding:0}
.top3 li{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.top3 li:last-child{border-bottom:0}
.t3-rank{font-family:var(--mono);font-weight:600;color:var(--pine-deep);min-width:1.4em;text-align:center}
.t3-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t3-faction{color:var(--slate);font-size:11.5px;white-space:nowrap}
.t3-wins{font-family:var(--mono);font-size:11px;color:var(--slate);white-space:nowrap}
.t3-loading{color:var(--slate);font-size:12.5px;margin:0}
.rel-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:8px 2px}
.rel-item:hover{background:var(--card)}
.rel-item .cn{display:block;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.01em}
.rel-item .cm{display:block;font-size:12px;color:var(--slate);margin-top:1px}
.daylist{list-style:none;margin:0;padding:0}
.daylist li{border-bottom:1px solid var(--rule-soft);display:flex;align-items:stretch}
.daylist li:last-child{border-bottom:0}
.daylist li .daylist-item{width:auto;flex:1;min-width:0}
.daylist li .fav{padding:0 8px}
.daylist-item{display:block;width:100%;text-align:left;background:none;border:0;
  border-left:3px solid transparent;cursor:pointer;padding:11px 4px 11px 9px}
.daylist-item:hover{background:var(--card)}
.daylist-item.fill-full{border-left-color:var(--fill-full);border-left-width:5px}
.daylist-item.fill-filling{border-left-color:var(--fill-filling);border-left-width:5px}
.daylist-item.fill-open{border-left-color:var(--fill-open);border-left-width:5px}
.daylist-item.fill-full:hover{background:var(--fill-full-hover)}
.daylist-item.fill-filling:hover{background:var(--fill-filling-hover)}
.daylist-item.fill-open:hover{background:var(--fill-open-hover)}
.daylist-item .cn{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.daylist-item .cm{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.daylist-item .ctags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}

/* ---------- misc ---------- */
.empty{border:1px dashed var(--rule);padding:34px 20px;text-align:center;color:var(--slate);font-size:14px;
  background:var(--card);position:relative;isolation:isolate}
/* logo.png är vit linjekonst ritad för den mörka mastheaden — brightness(0)
   gör den till en svart siluett istället, som sen tonas ner till nästan
   ingenting. Bara i genuint tomma lägen, aldrig bakom faktiskt kalenderdata
   (se diskussion i CLAUDE.md om varför mitt-i-rutnätet avfärdades). */
.empty::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url('logo.png') center/130px no-repeat;
  filter:brightness(0);opacity:.05;
}
.empty b{display:block;font-family:var(--display);font-size:17px;color:var(--ink);margin-bottom:5px;font-weight:700}
footer{border-top:1px solid var(--rule);padding:20px 0 44px;font-size:12px;color:var(--slate)}
footer .fl{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center}
/* .fl hade bara två barn (två <span>) tills temaväxlaren blev ett tredje —
   justify-content:space-between fördelar sig jämnt över ALLA direkta barn,
   så integritetsraden hamnade plötsligt i mitten istället för längst till
   höger, och knappen slumpvis någonstans. Två span i en egen radbrytande
   grupp håller .fl vid exakt två barn (text-gruppen, knappen) som förut. */
footer .fl-text{display:flex;flex-wrap:wrap;gap:6px 20px}
footer .fl-controls{display:flex;gap:8px;align-items:center}
footer .fl-controls select{font-size:12px;padding:5px 26px 5px 9px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Experimentell — provkörning på Sebastians uttryckliga begäran ("testa och
   se om det är värt det"), inte färdigbeslutad. Färgerna är genomtänkta per
   roll, inte bara ljushet-inverterade: fyllnadsgrad ljusas upp rejält (de
   ursprungliga färgerna är mörka nog att nästan försvinna mot en mörk
   botten), och överstrykningsmärket byter blend mode — mix-blend-mode:
   multiply mot en mörk botten mörknar bara vidare mot svart, tvärtom mot
   den ljusa bakgrund tekniken är byggd för. screen gör samma jobb (färgar
   texten bakom utan att täcka den) fast åt rätt håll för mörkt läge.
   Ligger sist i stylesheeten med avsikt — samma specificitet som basreglerna
   den skriver över, och vid oavgjort vinner senare i källordningen. Låg den
   tidigare direkt efter :root föll den tyst tillbaka till ljusa värden för
   allt som definierades längre ner i filen (precis den sortens bugg som
   redan bet i mobilens select-padding tidigare i dag).

   Styrs via [data-theme] på <html>, satt av det blockerande skriptet i
   <head> — inte @media(prefers-color-scheme) direkt, för att en manuell
   växling (footerns knapp) ska kunna override:a systemvalet. Skriptet
   sätter data-theme="dark"/"light" redan innan CSS:en målar något, utifrån
   sparat val eller (i andra hand) systemets prefers-color-scheme. */
:root[data-theme="dark"]{
  --paper:#1B1D18;
  --card:#242620;
  --ink:#E8E9E2;
  --slate:#9CA3AC;
  --rule:#3A3D35;
  --rule-soft:#2E3129;
  --pine:#4FA085;
  --pine-deep:#23574A;
  --mark:#E0C24A;
  --alert:#E87462;
  --fill-full:#E0554F;         --fill-full-hover:#3A2422;         --fill-full-text:#F0A8A0;
  --fill-filling:#D9AC3E;      --fill-filling-hover:#332B18;      --fill-filling-text:#E0C070;
  --fill-open:#6FAF3E;         --fill-open-hover:#212D18;         --fill-open-text:#A0D080;
  --paper-dot:rgba(255,255,255,.028);
  --hover-surface:#333630;
}
[data-theme="dark"] .mk::before{mix-blend-mode:screen}
/* logo.png är redan vit linjekonst — brightness(0) i ljust läge gör den
   till en mörk siluett för den ljusa botten, men i mörkt läge är den
   rätt färg som den är. */
[data-theme="dark"] .empty::before{filter:none;opacity:.06}
/* Räknat igenom med WCAG:s kontrastformel (relativ luminans), inte bara
   ögonmått — .status.error (#F0A8A0, satt för ljust läges pine-deep)
   landade på 4.27:1 mot mörkt läges mastheadfärg, precis under kravet på
   4.5:1. --alert (används rakt av som text i .tag.chg mot --card) landade
   på 4.43:1, också precis under. Båda ljusade upp något extra här. Allt
   annat — brödtext, taggar, fyllnadsgrad, länkar — klarade 4.5:1 (text)
   eller 3:1 (gränser/komponenter) utan ändring. Ett undantag som INTE
   rättades: mastheadens egen kontrast mot sidan (pine-deep mot paper)
   ligger bara på 2.05:1 — men att ljusa upp pine-deep för att fixa det
   drog ner texten OVANPÅ mastheaden under gränsen istället (provat:
   4.33/3.11/2.85:1). Det är inte heller ett skarpt WCAG-krav i sig, bara
   ett eget mått på hur tydligt bandet syns — riktig textkontrast vägde
   tyngre än den estetiska bedömningen. */
[data-theme="dark"] .status.error{color:#F5B8B0}
@media print{.controls,.drawer,.scrim,.news .ack{display:none}body{background:#fff}}