/* Stil 3 (premium glas) för startsidan version 2. Laddas efter stil.css.
   Reglerna nedan gäller bara inom .nyhetsrum, .huvud och body[data-vy="nyhetsrum"] (fylls i av senare uppgifter). */

/* Typsnitt: självhostade, bara de vikter som används (ingen kursiv, ingen Unbounded 700). */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/unbounded-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/unbounded-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/MartianMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/MartianMono-500.woff2") format("woff2");
}

:root {
  --serif: "Instrument Serif", Georgia, "Noto Serif", serif;
  --skylt: "Unbounded", var(--sans);
  --mono-3: "Martian Mono", ui-monospace, monospace;
  /* Huvudets höjd med kanten (76 + 1 px från 900 px; mobil och mellanbredd nedan). Nordljuset (.nyhetsrum::before)
     börjar så långt ovanför nyhetsrummet, alltså vid sidans överkant bakom huvudet, så att ljuset aldrig får en kant
     mitt i huvudet (slutgranskningen I2). */
  --huvud-hojd: 77px;
}
@media (max-width: 639px) { :root { --huvud-hojd: 63px; } }

/* Huvudet i stil 3 (startsidan v2, uppgift 4): glasmenyn och sökfältet. Gäller på alla sidor med .huvud.
   Värdena kommer ur .v3 .huvud, .v3 .meny och .v3 .sokfalt i skissen stilar-2-3-utforlig.html. */
.huvud .vyval {
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.huvud .flik { color: #b8bbcc; white-space: nowrap; }
.huvud .flik:hover { color: #fff; }
.huvud .flik[aria-current="page"] { background: rgb(255 255 255 / .94); color: #0a0b10; }

.huvud-sok {
  margin-left: auto;
  flex: 0 1 300px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .12);
  color: #b8bbcc;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.huvud-sok[hidden] { display: none; }
.huvud-sok:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
.huvud-sok .sok-ikon { flex: 0 0 auto; }
.huvud-sok input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: #f2f3f8; font-size: 13px; line-height: 20px; }
.huvud-sok input::placeholder { color: #b8bbcc; }
.huvud-sok input::-webkit-search-cancel-button { display: none; }
/* Rensaknappen (×) i fältet: syns när det har text (app.js), på glas som pillret */
.huvud-sok .sok-rensa { position: relative; width: 22px; height: 22px; background: rgb(255 255 255 / .14); color: #f2f3f8; }
.huvud-sok .sok-rensa:hover { background: rgb(255 255 255 / .24); }
.huvud-sok .sok-rensa:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Ljust tema: glaset blir mörkt på ljus botten */
:root[data-theme="light"] .huvud .vyval,
:root[data-theme="light"] .huvud-sok { background: rgb(0 0 0 / .04); border-color: rgb(0 0 0 / .14); }
:root[data-theme="light"] .huvud .flik { color: var(--text-2); }
:root[data-theme="light"] .huvud .flik:hover { color: var(--text); }
:root[data-theme="light"] .huvud .flik[aria-current="page"] { background: var(--text); color: var(--yta-0); }
:root[data-theme="light"] .huvud-sok { color: var(--text-3); }
:root[data-theme="light"] .huvud-sok input { color: var(--text); }
:root[data-theme="light"] .huvud-sok input::placeholder { color: var(--text-3); }

/* Ruling 13: mellan 640 och 899 px ryms inte logotyp, flikar och sökfält på en rad (sökpillret krympte till 30 px
   och flödade ut: horisontell rullning 640–674 px, med fliken Register 640–767 px). Huvudet radbryts där: logotyp
   och flikar på första raden, sökfältet på en egen rad i full bredd utan kbd-tipset. Med fliken Register (fullt läge,
   lokalt och på adminlyssnaren) bryts menyn till en egen rad när den inte ryms (under ~710 px).
   Höjden: 12 + 44 (menyn) + 10 + 38 (sökfältet) + 12 = 116 px + kanten (sökfältet syns på alla vyer sedan /all fick
   stil 3). --huvud-hojd är 117 px, och med fliken Register 167 px (tre rader: 40 px logotyp + 10 +
   44 px meny). Där menyn ändå ryms bredvid logotypen (fullt läge från ~710 px) ligger nordljuset 50 px för högt men
   utan kant: rutan börjar då ovanför sidan. */
@media (min-width: 640px) and (max-width: 899px) {
  :root { --huvud-hojd: 117px; }
  :root:has(.huvud .flik[data-vy="register"]:not([hidden])) { --huvud-hojd: 167px; }
  .huvud .huvud-in { flex-wrap: wrap; height: auto; min-height: 76px; padding-block: 12px; row-gap: 10px; }
  .huvud-sok { flex: 1 1 100%; margin-left: 0; }
  .huvud-sok .kbd { display: none; }
}

@media (max-width: 639px) {
  .huvud-sok { flex: 1; min-width: 0; width: auto; height: 38px; }
  .huvud-sok input { font-size: 16px; }
  /* × får 44 px tryckyta (slutgranskningen), utan att pillret blir högre */
  .huvud-sok .sok-rensa::after { content: ""; position: absolute; inset: -11px; }
  /* Bottenfliken: glas och blur, men kanten uppåt ligger kvar (stil B:s slutgranskning) */
  .huvud .vyval {
    background: rgb(18 19 28 / .72);
    border: 0;
    border-top: 1px solid var(--kant-stark);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .huvud .flik { color: var(--text-3); }
  .huvud .flik[aria-current="page"] { background: transparent; color: var(--text); font-weight: 600; }
  :root[data-theme="light"] .huvud .vyval { background: rgb(255 253 248 / .8); border: 0; border-top: 1px solid var(--kant-stark); }
  :root[data-theme="light"] .huvud .flik[aria-current="page"] { background: transparent; color: var(--text); }
}

/* ===== Startsidan v2, uppgift 5: heron, nordljuset och sidans ramar =====
   Värdena kommer ur .v3 i skissen stilar-2-3-utforlig.html; typsnitten ur .M i blandning-mot-c.html, med
   Instrument Serif (--serif) för rubriken och Unbounded (--skylt) för knappar, sektionsrubriker och LIVE-märket. */
body[data-vy="nyhetsrum"], body[data-vy="sok"],
body[data-vy="kommande"], body[data-vy="folj"], body[data-vy="register"], body[data-vy="sida"] { background: #090a0f; }
/* .filterrad: filterraden står också på /all, utanför .nyhetsrum, och behöver samma färger där. #soksida (/all),
   #kommandevy (Upcoming), #foljvy (Following) och #registervy (Register) använder samma textfärger. */
.nyhetsrum, .huvud, .filterrad, #soksida, #kommandevy, #foljvy, #registervy, .kategori, .om {
  --v3-text: #f2f3f8;
  --v3-text-2: #b8bbcc;
  --v3-text-3: #9ea2b8;
  --v3-violett: #b9b4ff;
}
.nyhetsrum, #soksida { position: relative; isolation: isolate; overflow-x: clip; color: var(--v3-text); }
/* Nordljuset: tre mjuka radiella ljus bakom huvudet och heron. Rutan börjar bakom huvudet (som är genomskinligt
   och ligger över, z-index 4 i stil.css), ovanför sidans överkant: förskjutningen är huvudets höjd (--huvud-hojd på :root),
   så att rutans överkant aldrig hamnar synlig mitt i ett högre huvud (Ruling 13), plus 12 px så att blurens
   uttoning vid rutans kant ligger utanför sidan. Ljusens mitt står i px från sidans överkant (12 px in i rutan =
   sidans överkant; samma läge som förut, då rutan var 560 px hög och mitten 0 %, 4 % och 30 %).
   Ljusen tonar ut långt före rutnätet. Dekor: inga klick, under allt innehåll. */
.nyhetsrum::before, #soksida::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--huvud-hojd) - 12px);
  right: 0;
  left: 0;
  height: 572px;
  background:
    radial-gradient(620px 300px at 18% 12px, rgb(118 112 255 / .34), transparent 68%),
    radial-gradient(560px 260px at 80% 34px, rgb(56 210 196 / .22), transparent 66%),
    radial-gradient(420px 200px at 55% 180px, rgb(255 90 120 / .10), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}

/* Heron: kompakt, så att rubrik, ingress och knappar ryms ovanför skyltraden på 1280 × 800.
   Radarn mäts som förut mot .sokdel (stil.css: .sokdel är positionerad, .hero medvetet static). */
.nyhetsrum .sokdel, #soksida .sokdel { padding-top: 32px; }
.nyhetsrum .hero-text, #soksida .hero-text { gap: 0; }
.nyhetsrum .hero-rubrik, #soksida .hero-rubrik, #kommandevy .hero-rubrik, #foljvy .hero-rubrik, #registervy .hero-rubrik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  max-width: none;
  color: var(--v3-text);
  font: 400 56px/1.04 var(--serif);
  letter-spacing: -0.01em;
}
.nyhetsrum .hero-rubrik-text, #soksida .hero-rubrik-text,
#kommandevy .hero-rubrik-text, #foljvy .hero-rubrik-text, #registervy .hero-rubrik-text {
  background: linear-gradient(95deg, #fff 0%, #e4e2ff 45%, #b9f0ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* LIVE-märket: ett genomskinligt rött glaspiller med punkt, egna röda värden (inte --signal).
   min-width är märkets bredd i Unbounded (uppmätt: 80 px vid 12 px, 91 px vid 14 px), så att märket är lika brett
   med reservtypsnittet och rubriken bryts likadant före och efter att Unbounded laddats (slutgranskningen I1:
   märket bröts till en egen rad först med Unbounded, och skyltraden hoppade 30 px vid 430 px). */
.nyhetsrum .hero-live, #soksida .hero-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 91px;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgb(255 90 80 / .45);
  border-radius: var(--radius-pill);
  background: rgb(255 72 60 / .14);
  color: #ff6a5c;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 14px/1 var(--skylt);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nyhetsrum .hero-live::before, #soksida .hero-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.nyhetsrum .hero-ingress, #soksida .hero-ingress { margin-top: 10px; color: var(--v3-text-2); }
/* /all: ingressen utan knappar under */
#soksida .hero-ingress { margin-bottom: 0; font-size: 16px; line-height: 1.5; }
.nyhetsrum .hero-knappar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.nyhetsrum .knapp-vit, .nyhetsrum .knapp-glas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 500 13px/1 var(--skylt);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.nyhetsrum .knapp-vit { background: #fff; color: #0a0b10; }
.nyhetsrum .knapp-vit:hover { background: #e4e2ff; }
.nyhetsrum .knapp-glas { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .15); color: var(--v3-text); }
.nyhetsrum .knapp-glas:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .24); }
.nyhetsrum .knapp-vit:focus-visible, .nyhetsrum .knapp-glas:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

/* Sektionerna: rubriken i Unbounded med versaler, raden till höger i Martian Mono */
.nyhetsrum #nyhetsrum-skylt-sektion { margin-top: 28px; }
.nyhetsrum .sektionsrubrik, #soksida .sektionsrubrik, #foljvy .sektionsrubrik { color: var(--v3-text); font: 500 13px/1.4 var(--skylt); letter-spacing: .06em; text-transform: uppercase; }
.nyhetsrum .nyhetsrum-under { flex-basis: auto; margin-left: auto; color: var(--v3-text-3); font: 400 11px/1.4 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
.nyhetsrum .se-alla { color: var(--v3-text-2); font: 400 11px/1.4 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
.nyhetsrum .se-alla:hover { color: var(--v3-text); }

/* Kortens yttre mått (Ruling 2): uppgift 6 sköter innehåll, typografi, chips, märken och hover. Serverns skelett
   (server.js SKYLTSKELETT och NATSKELETT) har samma klasser och får därför samma mått, så att sidan inte hoppar. */
/* Skyltraden (Ruling 8): under 640 px tre kort i 16:9 i en kolumn. Från 640 px 2fr/1fr: det stora kortet till
   vänster spänner två rader och fyller deras höjd, de två mindre i 16:9 i en kolumn till höger. Med 2fr/1fr avviker
   det stora kortet bara med ungefär mellanrummet × 16/9 från 16:9, så bilden (object-fit: cover) beskärs knappt. */
.nyhetsrum .skyltrad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nyhetsrum .skyltkort {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: rgb(255 255 255 / .05);
  box-shadow: 0 18px 44px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .09);
  color: #fff;
  text-decoration: none;
  transition: transform 180ms ease;
  /* Källraden anpassas efter kortets egen bredd (@container nedan); kortets mått påverkas inte (grid minmax(0, …)) */
  container-type: inline-size;
}
.nyhetsrum .skyltkort-bild { position: absolute; inset: 0; display: block; transition: filter 180ms ease; }
.nyhetsrum .skyltkort-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Rutnätet i Live now: tre kolumner, två på mellanbredd och en på mobil */
.nyhetsrum .glasnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nyhetsrum .glaskort {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 8px 8px 12px;
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: 20px;
  background: rgb(255 255 255 / .035);
  color: var(--v3-text);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.nyhetsrum .glaskort-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: rgb(255 255 255 / .05); transition: transform 180ms ease, filter 180ms ease; }
.nyhetsrum .glaskort-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Textytan: plats för tre rader titel (Instrument Serif 17 px × 1.2 = 61 px), mellanrummet och metaraden med
   märket (18 px): 85 px ryms i 88 px, så att skelettet och det riktiga kortet får samma höjd. */
.nyhetsrum .glaskort-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 88px; padding: 0 6px; overflow-wrap: anywhere; }
/* Skeletten: bara utseendet, inga egna mått */
.nyhetsrum .skelett-skyltkort, .nyhetsrum .skelett-glaskort { pointer-events: none; }
.nyhetsrum .skelett-skyltkort { background: linear-gradient(135deg, rgb(255 255 255 / .07), rgb(255 255 255 / .03)); }
.nyhetsrum .skelett-glaskort .glaskort-bild { background: rgb(255 255 255 / .06); }
.nyhetsrum .skelett-glaskort .glaskort-text {
  background: linear-gradient(rgb(255 255 255 / .06) 0 18px, transparent 18px 26px, rgb(255 255 255 / .06) 26px 44px, transparent 44px 70px, rgb(255 255 255 / .04) 70px 84px, transparent 84px);
  background-clip: content-box;
}

/* ===== Startsidan v2, uppgift 6: kortens innehåll, typografi, chips, schemaraderna och hovern =====
   Värdena kommer ur .v3 (.bild, .pa, .chip.live, .chip.typ2, .typ, .gk, .meta, .schema) i stilar-2-3-utforlig.html
   och typsnitten ur .M i blandning-mot-c.html: titlar i Instrument Serif, chips och siffror i Martian Mono.
   Märkena (.officiell, .statskontroll, .erkand) får inga regler här och behåller stil B:s färger. */

/* Skyltkortet: texten ligger ovanpå bilden (Ruling 8) och lägger ingen höjd, så kortet har bara bildens mått.
   Den mörka gradienten nedtill bär texten (kontrast mot vilken bild som helst). */
.nyhetsrum .skyltkort-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .88), rgb(0 0 0 / .5) 45%, rgb(0 0 0 / .08) 78%, transparent);
  pointer-events: none;
}
.nyhetsrum .skylt-utan-bild, .nyhetsrum .glaskort-utan-bild {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(255 255 255 / .08), rgb(255 255 255 / .03));
  color: rgb(255 255 255 / .82);
  text-align: center;
  overflow-wrap: anywhere;
}
/* Namnet i den övre delen, ovanför texten som ligger på bilden */
.nyhetsrum .skylt-utan-bild { padding: 12px 16px 42%; font: 500 15px/1.25 var(--skylt); }
.nyhetsrum .glaskort-utan-bild { padding: 12px 16px 28px; font: 500 14px/1.25 var(--skylt); }
.nyhetsrum .skylt-pa {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
}
/* Kontrast (fixrunda 1): kortets gradient följer kortets höjd, inte textens, så textblocket har en egen mörk yta
   som alltid är minst .78 bakom metaraden, titeln och källraden och tonar ut 44 px ovanför. Den går ut till kortets
   kanter (kortet klipper) och ligger bakom texten men över bilden, eftersom .skylt-pa (z-index 1) är en egen stapling. */
.nyhetsrum .skylt-pa::before {
  content: "";
  position: absolute;
  top: -44px;
  right: -16px;
  bottom: -14px;
  left: -16px;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / .78) calc(100% - 44px), transparent 100%);
  pointer-events: none;
}
.nyhetsrum .skylt-topp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nyhetsrum .chip-live, .nyhetsrum .chip-start {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: #fff;
  font: 500 10px/1 var(--mono-3);
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Mörkare röd än skissens, så att den vita texten klarar AA */
.nyhetsrum .chip-live { background: rgb(220 38 38 / .95); }
.nyhetsrum .chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nyhetsrum .chip-start { background: rgb(12 13 20 / .62); border: 1px solid rgb(255 255 255 / .2); }
/* "BREAKING COVERAGE · 758 WATCHING" på en rad */
.nyhetsrum .skylt-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(255 255 255 / .86);
  font: 400 10.5px/1.4 var(--mono-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgb(0 0 0 / .6);
}
.nyhetsrum .skylt-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  color: #fff;
  font: 400 18px/1.15 var(--serif);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
.nyhetsrum .skyltkort-stor .skylt-titel { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
/* Källraden: källa · land (eller Covered by …) och märkena. Raden bryts, så att två märken (Official och
   Not internationally recognised, ~255 px) hamnar på en egen rad i stället för att klippas; källan får ellips. */
.nyhetsrum .skylt-kalla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  color: rgb(255 255 255 / .8);
  font: 400 12px/1.4 var(--sans);
  text-shadow: 0 1px 2px rgb(0 0 0 / .6);
}
.nyhetsrum .skylt-kalla-text { flex: 1 1 8em; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nyhetsrum .skylt-kalla b { color: #fff; font-weight: 600; }
.nyhetsrum .skylt-tackning { flex: 1 1 12em; min-width: 0; max-width: 100%; }

/* Glaskortet: sändningstypen som chip nere till vänster på bilden, titeln och metaraden */
.nyhetsrum .glaskort-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .5), transparent 55%); pointer-events: none; }
.nyhetsrum .chip-typ {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 1;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgb(12 13 20 / .62);
  border: 1px solid rgb(255 255 255 / .16);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 10px/1 var(--mono-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nyhetsrum .glaskort-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  color: var(--v3-text);
  font: 400 17px/1.2 var(--serif);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.nyhetsrum .glaskort-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-top: auto; color: var(--v3-text-2); font: 400 12px/1.4 var(--sans); }
/* Märkesraden bryts (två märken får en egen rad, och kortet blir då en rad högre; rutnätets rader töjs ändå).
   Källan får ellips, och siffran till höger (flex: 0 0 auto) trycks aldrig undan: ett märke som är bredare än
   raden klipps av overflow: hidden i stället för att täcka siffran. Med ett märke är raden 18 px som i skelettet. */
.nyhetsrum .glaskort-kalla-rad { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; overflow: hidden; }
.nyhetsrum .glaskort-kalla { flex: 1 1 8em; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nyhetsrum .glaskort-tittare { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: #e9eaf2; font: 400 11px/1 var(--mono-3); font-variant-numeric: tabular-nums; }
.nyhetsrum .glaskort-punkt { width: 6px; height: 6px; border-radius: 50%; background: #ff6a5c; }
.nyhetsrum .nyhetsrum-tomt { grid-column: 1 / -1; color: var(--v3-text-2); }
.nyhetsrum .mer .knapp, #soksida .mer .knapp {
  padding: 0 22px;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .07);
  color: var(--v3-text);
  font: 500 13px/1 var(--skylt);
}
.nyhetsrum .mer .knapp:hover, #soksida .mer .knapp:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .24); }

/* Next 24 hours: glasrader med tiden i violett Martian Mono och sändningstypen till höger.
   Ersätter stil B:s a.schemarad (negativ marginal, linjen under). */
.nyhetsrum .nyhetsrum-kommande { display: grid; gap: 6px; }
.nyhetsrum .schemarad {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: 14px;
  background: rgb(255 255 255 / .035);
  color: var(--v3-text);
  font: 400 14px/1.4 var(--sans);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.nyhetsrum .schemarad::after { content: none; }
.nyhetsrum .schemarad .tid { color: var(--v3-violett); font: 500 12px/1.4 var(--mono-3); font-variant-numeric: tabular-nums; }
.nyhetsrum .schemarad-text { min-width: 0; overflow-wrap: anywhere; color: var(--v3-text-2); }
.nyhetsrum .schemarad-text b { color: var(--v3-text); font-weight: 600; }
.nyhetsrum .schemarad-typ { color: var(--v3-text-3); font: 400 10px/1.4 var(--mono-3); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* Länken över hela kortet (nyhetsrum.js kortlank): tom, ovanpå bild och text (.skylt-pa har z-index 1) men under
   åtgärderna. Fokusringen ritas inuti länken, eftersom skyltkortet klipper allt utanför sina kanter. */
.nyhetsrum .kortlank { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.nyhetsrum .kortlank:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

/* Åtgärderna (Follow, Copy link, Add to multiview) överst till höger, som på /all: synliga vid hover och fokus och
   alltid på pekskärmar (stil.css). stil.css döljer dem under 640 px, där /all har ⋮-menyn; här står de kvar. */
.nyhetsrum .kort-atgarder { display: flex; z-index: 3; top: 10px; right: 10px; }
.nyhetsrum .glaskort .kort-atgarder { top: 16px; right: 16px; }
.nyhetsrum .skyltkort:hover .kort-atgarder, .nyhetsrum .skyltkort:focus-within .kort-atgarder,
.nyhetsrum .glaskort:hover .kort-atgarder, .nyhetsrum .glaskort:focus-within .kort-atgarder { opacity: 1; }
.nyhetsrum .kort-atgarder .ikonknapp {
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--radius-pill);
  background: rgb(12 13 20 / .62);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nyhetsrum .kort-atgarder .ikonknapp:hover { background: rgb(12 13 20 / .82); border-color: rgb(255 255 255 / .28); }
.nyhetsrum .kort-atgarder .ikonknapp.klar { color: var(--ok); }
.nyhetsrum .kort-atgarder .ikonknapp.misslyckad { color: var(--fel); }
.nyhetsrum .kort-atgarder .ikonknapp[aria-pressed="true"] { background: rgb(255 255 255 / .9); border-color: transparent; color: #0c0d14; }

/* Hover och tangentbordsfokus: kortet tonas upp, bilden lyfts 2 px och ljusnar 10 %, titeln stryks under.
   Skyltkortets bild är hela kortet, så där lyfts kortet (bilden skulle annars lämna en springa nedtill).
   Fokus ligger på kortets länk, så kortet reagerar via :has(). */
.nyhetsrum .glaskort:hover, .nyhetsrum .glaskort:has(> .kortlank:focus-visible),
.nyhetsrum .schemarad:hover, .nyhetsrum .schemarad:focus-visible { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); }
.nyhetsrum .glaskort:hover .glaskort-bild, .nyhetsrum .glaskort:has(> .kortlank:focus-visible) .glaskort-bild { transform: translateY(-2px); filter: brightness(1.1); }
.nyhetsrum .skyltkort:hover, .nyhetsrum .skyltkort:has(> .kortlank:focus-visible) { transform: translateY(-2px); }
.nyhetsrum .skyltkort:hover .skyltkort-bild, .nyhetsrum .skyltkort:has(> .kortlank:focus-visible) .skyltkort-bild { filter: brightness(1.1); }
.nyhetsrum .glaskort:hover .glaskort-titel, .nyhetsrum .glaskort:has(> .kortlank:focus-visible) .glaskort-titel,
.nyhetsrum .skyltkort:hover .skylt-titel, .nyhetsrum .skyltkort:has(> .kortlank:focus-visible) .skylt-titel { text-decoration: underline; }
.nyhetsrum .schemarad:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

@media (min-width: 640px) {
  .nyhetsrum .skyltrad { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .nyhetsrum .skyltkort-stor { grid-row: span 2; aspect-ratio: auto; height: 100%; }
  /* Ruling 10: med färre än tre kort finns inget i högerkolumnen att fylla höjden mot, och det stora kortet skulle
     kollapsa. nyhetsrum.js sätter data-antal; utan attribut (serverns skelett med tre kort) gäller reglerna ovan.
     1 kort: en kolumn i 16:9. 2 kort: 2fr/1fr, båda i 16:9 och det lilla överst i sin cell. */
  .nyhetsrum .skyltrad[data-antal="1"] { grid-template-columns: minmax(0, 1fr); }
  .nyhetsrum .skyltrad[data-antal="1"] .skyltkort-stor,
  .nyhetsrum .skyltrad[data-antal="2"] .skyltkort-stor { grid-row: auto; aspect-ratio: 16 / 9; height: auto; }
  .nyhetsrum .skyltrad[data-antal="2"] .skyltkort { align-self: start; }
}
/* Ruling 14: ett ensamt kort i full bredd blev 1216×684 vid 1280 px, och textblocket hamnade under första skärmen.
   Från 900 px får det samma bredd som det stora kortet med två kort (2fr av 2fr/1fr), vänsterställt och i 16:9
   (regeln ovan); högerkolumnen står tom. Mellan 640 och 899 px står det kvar i full bredd (576×324 vid 640 px). */
@media (min-width: 900px) {
  .nyhetsrum .skyltrad[data-antal="1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .nyhetsrum .glasnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ruling 11: 640–799 px. De små skyltkorten är bara ~190–240 px breda och ~105–135 px höga i 16:9. Tre rader titel,
   chipet och källraden ryms inte ovanpå bilden vid den bredden, så de små titlarna klipps där efter två rader; det
   stora kortet behåller tre. Från 800 px gäller tre rader överallt. */
@media (min-width: 640px) and (max-width: 799px) {
  .nyhetsrum .skylt-pa { left: 12px; right: 12px; bottom: 10px; gap: 4px; }
  .nyhetsrum .skylt-titel { -webkit-line-clamp: 2; line-clamp: 2; }
  .nyhetsrum .skyltkort-stor .skylt-titel { -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 639px) {
  .nyhetsrum .sokdel { padding-top: 20px; }
  .nyhetsrum .hero-rubrik, #soksida .hero-rubrik,
  #kommandevy .hero-rubrik, #foljvy .hero-rubrik, #registervy .hero-rubrik { gap: 4px 12px; font-size: 40px; }
  #soksida .sokdel { padding-top: 20px; }
  #soksida .hero-ingress { font-size: 15px; }
  .nyhetsrum .hero-live, #soksida .hero-live { min-width: 80px; padding: 6px 12px 6px 10px; font-size: 12px; }
  .nyhetsrum .nyhetsrum-under { flex-basis: 100%; margin-left: 0; }
  .nyhetsrum .glasnat { grid-template-columns: minmax(0, 1fr); }
  .nyhetsrum .schemarad { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; }
  .nyhetsrum .schemarad-typ { grid-column: 2; white-space: normal; }
}
/* Skyltkort smalare än 300 px (de små korten mellan 640 och ~900 px) är högst ~169 px höga i 16:9. En andra rad i
   källraden trycker då upp textblocket över kortets överkant, så att Live-chipet klipps (uppmätt i headless Chrome:
   -14 px vid 640 och 800 px). Där hålls källraden på en rad: källan får ellips (minst 3em) och märkena ligger kvar
   till höger; bara ett andra märke (Not internationally recognised) som inte ryms klipps vid kortets kant.
   Från 300 px bryts raden som i glaskorten. */
/* Slutgranskningen I1: under 480 px rymdes de två knapparna på en rad med reservtypsnittet men inte med Unbounded,
   så skyltraden hoppade 54 px när typsnittet kom (360–390 px). Här står knapparna alltid på var sin rad i full bredd,
   oberoende av typsnittet; från 480 px ryms de på en rad med båda. */
@media (max-width: 479px) {
  .nyhetsrum .hero-knappar > a { flex: 1 1 100%; justify-content: center; }
}
@container (max-width: 299px) {
  .nyhetsrum .skylt-kalla { flex-wrap: nowrap; overflow: hidden; }
  .nyhetsrum .skylt-kalla-text { flex: 1 1 0; min-width: 3em; }
}
@media (prefers-reduced-motion: reduce) {
  .nyhetsrum .knapp-vit, .nyhetsrum .knapp-glas { transition: none; }
  .nyhetsrum .skyltkort, .nyhetsrum .skyltkort-bild, .nyhetsrum .glaskort, .nyhetsrum .glaskort-bild, .nyhetsrum .schemarad { transition: none; }
  .nyhetsrum .skyltkort:hover, .nyhetsrum .skyltkort:has(> .kortlank:focus-visible),
  .nyhetsrum .glaskort:hover .glaskort-bild, .nyhetsrum .glaskort:has(> .kortlank:focus-visible) .glaskort-bild { transform: none; }
}

/* 24/7 News Live, förut Always on (Anders 2026-10-18: "man vill ha dom lättillgängliga men man vill fronta med det som är nytt och hett"):
   24/7-kanalerna i en egen panel. Under 1100 px en svepbar rad med små brickor direkt under skyltraden (DOM-ordningen);
   från 1100 px en klistrad sidokolumn till höger om skyltraden, Live now och Next 24 hours. Skelettraderna i
   index.html håller platsen, så att rutnätet inte smalnar av när svaret kommer. */
.nyhetsrum .nyhetsrum-yta { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.nyhetsrum .alltid { min-width: 0; margin-top: 32px; }
/* Filterradens plats på News (filtren, uppgift 4): överst i huvudkolumnen, ovanför skyltraden. Höjden (knapparna
   40 px och radens 4 px luft över och under) står från första ritningen, så att skyltraden inte flyttas när
   nyhetsrum.js ritar raden. Skyltraden står närmare raden än heron, eftersom raden filtrerar den. */
.nyhetsrum .filterrad-plats { min-width: 0; min-height: 48px; margin-top: 24px; }
.nyhetsrum .filterrad-plats + #nyhetsrum-skylt-sektion { margin-top: 20px; }
/* Filtrets tomma läge i Live now: texten och Clear filters under den */
.nyhetsrum .nyhetsrum-tomt-atgard { grid-column: 1 / -1; }
.nyhetsrum .nyhetsrum-rensa { cursor: pointer; }
.nyhetsrum .alltid[hidden] { display: none; }
.nyhetsrum .alltid-topp { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.nyhetsrum .alltid-rubrik { margin: 0; color: var(--v3-text); font: 500 13px/1.4 var(--skylt); letter-spacing: .06em; text-transform: uppercase; }
.nyhetsrum .alltid-lista {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--sidmarginal));
  padding: 2px var(--sidmarginal) 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sidmarginal);
  scrollbar-width: thin;
}
/* En kanal (Anders 2026-10-18: "vi behöver thumbnails här med allt vad det innebär"): tumnageln i 16:9 med Live-chipet
   och tittarsiffran på bilden, som på korten; under den (brickorna) eller till höger (sidokolumnen) kanalens namn,
   vad som sänds i Instrument Serif och landet. Under 1100 px är raden en bricka med bilden överst. */
.nyhetsrum .alltid-rad {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  flex: 0 0 220px;
  padding: 8px 8px 10px;
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: 16px;
  background: rgb(255 255 255 / .035);
  color: var(--v3-text);
  scroll-snap-align: start;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.nyhetsrum .skelett-alltid { min-height: 186px; pointer-events: none; background: rgb(255 255 255 / .05); }
.nyhetsrum .alltid-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: rgb(255 255 255 / .05); transition: filter 180ms ease; }
.nyhetsrum .alltid-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nyhetsrum .alltid-utan-bild {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(255 255 255 / .08), rgb(255 255 255 / .03));
  color: rgb(255 255 255 / .82);
  font: 500 12px/1.2 var(--skylt);
  text-align: center;
  overflow-wrap: anywhere;
}
.nyhetsrum .alltid-bild .chip-live { position: absolute; top: 5px; left: 5px; gap: 4px; padding: 3px 6px; font-size: 9px; }
.nyhetsrum .alltid-bild .chip-live::before { width: 5px; height: 5px; }
.nyhetsrum .alltid-tittare {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgb(12 13 20 / .78);
  color: #fff;
  font: 500 10px/1.3 var(--mono-3);
  font-variant-numeric: tabular-nums;
}
.nyhetsrum .alltid-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px; }
.nyhetsrum .alltid-namn, .nyhetsrum .alltid-titel, .nyhetsrum .alltid-land { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nyhetsrum .alltid-namn { color: var(--v3-text); font: 600 13px/1.35 var(--sans); }
.nyhetsrum .alltid-titel { color: var(--v3-text-2); font: 400 15px/1.25 var(--serif); }
.nyhetsrum .alltid-land { color: var(--v3-text-3); font: 400 10.5px/1.5 var(--mono-3); letter-spacing: .02em; }
/* Åtgärderna ligger ovanpå bilden och skymmer aldrig texten: på brickorna uppe till höger på bilden, alltid synliga.
   Knapparna är mindre än på korten. */
.nyhetsrum .alltid-rad .kort-atgarder { position: absolute; top: 13px; right: 13px; gap: 4px; opacity: 1; }
.nyhetsrum .alltid-rad .kort-atgarder .ikonknapp { min-width: 28px; height: 28px; padding: 0 6px; }
.nyhetsrum .alltid-rad:hover, .nyhetsrum .alltid-rad:has(> .kortlank:focus-visible) { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); }
.nyhetsrum .alltid-rad:hover .alltid-bild, .nyhetsrum .alltid-rad:has(> .kortlank:focus-visible) .alltid-bild { filter: brightness(1.1); }
.nyhetsrum .alltid-rad:hover .alltid-titel, .nyhetsrum .alltid-rad:has(> .kortlank:focus-visible) .alltid-titel { text-decoration: underline; }
@media (min-width: 1100px) {
  .nyhetsrum .nyhetsrum-yta { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 28px; }
  .nyhetsrum .nyhetsrum-yta > :not(.alltid) { grid-column: 1; }
  .nyhetsrum .alltid {
    position: sticky;
    top: calc(var(--huvud-hojd) + 16px);
    grid-column: 2;
    grid-row: 1 / span 5;   /* filterraden, skyltraden, Live now, Next 24 hours och slutraden */
    max-height: calc(100vh - var(--huvud-hojd) - 32px);
    margin-top: 28px;   /* filterradens plats (24 px) och radens luft (4 px): rubriken står i höjd med filterknapparna */
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .nyhetsrum .alltid-lista { flex-direction: column; gap: 6px; margin: 0; padding: 0; overflow: visible; }
  /* Raden: tumnageln 112 × 63 till vänster, texten till höger */
  .nyhetsrum .alltid-rad { flex: none; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px; border-radius: 14px; }
  .nyhetsrum .skelett-alltid { min-height: 79px; }
  /* Knapparna ligger över tumnageln (samma ruta, 112 × 63) och tonas in vid hover och fokus */
  .nyhetsrum .alltid-rad .kort-atgarder {
    top: 7px;
    right: auto;
    left: 7px;
    width: 112px;
    height: 63px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgb(0 0 0 / .45);
    opacity: 0;
  }
  .nyhetsrum .alltid-rad:hover .kort-atgarder, .nyhetsrum .alltid-rad:focus-within .kort-atgarder { opacity: 1; }
}
/* Pekskärm med sidokolumn: ingen hover, så knapparna syns hela tiden men utan den mörka ytan över bilden */
@media (min-width: 1100px) and (hover: none) {
  .nyhetsrum .alltid-rad .kort-atgarder { background: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nyhetsrum .alltid-rad, .nyhetsrum .alltid-bild { transition: none; }
}

/* Filterraden (filtren, uppgift 3; public/filterrad.js): samma rad på News och /all. Knapparna är glaspiller som
   .knapp-glas; en markerad knapp (aria-pressed) får ljus kant. Raden rullar i sidled inuti sig själv och ger aldrig
   sidrullning. Panelen är en <dialog> i glas under knappen (show()); under 640 px ett ark nerifrån (showModal()).
   I panelen rullar bara listan, så att sökfältet, snabbvalet och Done står kvar. */
.filterrad { position: relative; min-width: 0; max-width: 100%; color: var(--v3-text); }
.filterrad .filterrad-knappar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: -4px;
  padding: 4px;   /* plats för fokusringen inom rullningsytan */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.filterrad .filterrad-knappar::-webkit-scrollbar { display: none; }
.filterrad .filterrad-knapp {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .07);
  color: var(--v3-text);
  font: 500 12px/1 var(--skylt);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 150ms ease, border-color 150ms ease;
}
/* Pilen (▾) ritas med kanter, så att den inte läses upp som text */
.filterrad .filterrad-knapp::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
}
.filterrad .filterrad-knapp[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.filterrad .filterrad-knapp:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .24); }
.filterrad .filterrad-knapp[data-aktiv] { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .55); }
.filterrad .filterrad-knapp:focus-visible, .filterrad .filterrad-rensa:focus-visible, .filterrad .filterrad-snabbval:focus-visible, .filterrad .filterrad-klar:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}
.filterrad .filterrad-rensa {
  flex: none;
  margin-left: auto;
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--v3-text-2);
  font: 400 11px/1.4 var(--mono-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / .3);
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.filterrad .filterrad-rensa:hover { color: var(--v3-text); }

.filterrad .filterrad-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  z-index: 20;
  width: min(320px, 100%);
  margin: 8px 0 0;
  padding: 0;   /* innehållet fyller dialogen: ett klick på själva dialogen är bara arkets bakgrund */
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 14px;
  background: rgb(18 19 26 / .94);
  color: var(--v3-text);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgb(0 0 0 / .4);
}
.filterrad .filterrad-panel::backdrop { background: rgb(0 0 0 / .55); }
.filterrad .filterrad-panel-in { display: flex; flex-direction: column; max-height: min(440px, 60vh); padding: 10px; }
.filterrad .filterrad-sok {
  flex: none;
  width: 100%;
  min-height: 38px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 10px;
  background: rgb(255 255 255 / .05);
  color: var(--v3-text);
  font: 400 14px/1.2 var(--sans);
}
.filterrad .filterrad-sok::placeholder { color: var(--v3-text-3); }
.filterrad .filterrad-sok:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; }
.filterrad .filterrad-snabbval {
  flex: none;
  align-self: flex-start;
  min-height: 32px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .05);
  color: var(--v3-text);
  font: 500 11px/1 var(--skylt);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.filterrad .filterrad-snabbval:hover { background: rgb(255 255 255 / .1); }
.filterrad .filterrad-snabbval[aria-pressed="true"] { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .55); }
.filterrad .filterrad-snabbval:disabled { opacity: .45; cursor: default; }
.filterrad .filterrad-snabbval:disabled:hover { background: rgb(255 255 255 / .05); }
.filterrad .filterrad-lista { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.filterrad .filterrad-val {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--v3-text);
  font: 400 14px/1.3 var(--sans);
  cursor: pointer;
}
.filterrad .filterrad-val[hidden] { display: none; }
.filterrad .filterrad-val:hover { background: rgb(255 255 255 / .06); }
/* Fokusringen inåt, så att listans rullningsyta inte klipper den */
.filterrad .filterrad-val:has(> input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: -2px; }
.filterrad .filterrad-val input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--v3-violett); }
.filterrad .filterrad-namn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterrad .filterrad-antal { flex: none; color: var(--v3-text-3); font: 400 11px/1.4 var(--mono-3); font-variant-numeric: tabular-nums; }
/* Val med 0 avsändare, och ovalda val när dimensionens tak är nått: nedtonade och inte valbara (ett valt val är
   alltid valbart och tonas inte ned) */
.filterrad .filterrad-val-noll, .filterrad .filterrad-val-full { opacity: .45; cursor: default; }
.filterrad .filterrad-val-noll:hover, .filterrad .filterrad-val-full:hover { background: none; }
.filterrad .filterrad-tom { margin: 6px 8px; color: var(--v3-text-3); font: 400 12px/1.4 var(--mono-3); }
.filterrad .filterrad-klar {
  flex: none;
  align-self: flex-end;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #0a0b10;
  font: 500 12px/1 var(--skylt);
  cursor: pointer;
}
@media (max-width: 639px) {
  /* Arket: fast nertill i full bredd, högst 70 % av höjden; listan rullar */
  .filterrad .filterrad-panel {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 70vh;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
    background: rgb(18 19 26 / .97);
  }
  .filterrad .filterrad-panel-in { max-height: 70vh; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .filterrad .filterrad-sok { font-size: 16px; }   /* under 16 px zoomar iOS in vid fokus */
  .filterrad .filterrad-val { min-height: 44px; }
  .filterrad .filterrad-klar { align-self: stretch; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .filterrad .filterrad-knapp, .filterrad .filterrad-snabbval { transition: none; }
}
/* ===== /all i stil 3 (delprojekt B, 2026-10-19; skiss B2) =====
   Heron, nordljuset, sektionsrubriken och Show 50 more delar News regler ovan (#soksida i selektorlistorna). /all är
   mörk i båda teman som News, så filterraden där har inga egna ljusa regler längre (Ruling 7 från filtren utgår). */

/* Kategorierna och flikarna: glaspiller i Unbounded, valt vitt som menyn i huvudet. Ingen radie här: flikarna
   (.flik-chip) behåller stil.css 8 px så att de inte förväxlas med kategorierna. */
#soksida .chip, #soksida .amne, #kommandevy .chip {
  border-color: rgb(255 255 255 / .14);
  background: rgb(255 255 255 / .06);
  color: #e9eaf2;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 12px/1 var(--skylt);
  letter-spacing: .01em;
}
#soksida .chip:hover, #soksida .amne:hover, #kommandevy .chip:hover { border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .1); color: #fff; }
#soksida .chip[aria-pressed="true"], #soksida .amne[aria-pressed="true"], #kommandevy .chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0b10; }
#soksida .chip .antal { color: var(--v3-text-3); font-family: var(--mono-3); font-size: 10px; }
#soksida .chip[aria-pressed="true"] .antal { color: #0a0b10; }
/* 18+-frågan (smafix 3): "I am 18 or older" är huvudknappen, vit som News "Watch top story"; Cancel står kvar i glas */
#soksida .bekrafta-ja { border-color: #fff; background: #fff; color: #0a0b10; }
#soksida .bekrafta-ja:hover { border-color: #e4e2ff; background: #e4e2ff; color: #0a0b10; }

/* Listans topp som Live now: rubriken (regeln ovan), antalet och "updated" i Martian Mono, växlaren i glas */
#soksida .sektion.alla { margin-top: 28px; padding-top: 0; border-top: 0; }
#soksida .alla-antal { margin-left: auto; color: var(--v3-text-3); font: 400 11px/1.4 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
#soksida .vaxlare { margin-left: 0; border-color: rgb(255 255 255 / .12); border-radius: var(--radius-pill); background: rgb(255 255 255 / .06); }
#soksida .vaxlare button { border-radius: var(--radius-pill); color: var(--v3-text-3); }
#soksida .vaxlare button:hover { color: var(--v3-text); }
#soksida .vaxlare button[aria-pressed="true"] { background: rgb(255 255 255 / .14); color: var(--v3-text); }
#soksida .rattad, #soksida .tomt, #soksida .mer-fel { color: var(--v3-text-2); }
/* Mobil: rubriken tar hela första raden; antalet till vänster och växlaren till höger på nästa (efter grundreglerna) */
@media (max-width: 639px) {
  #soksida .alla-antal { margin-left: 0; }
  #soksida .vaxlare { margin-left: auto; }
}

/* Korten på /all, Following och Picked for you (kortvariant B med News-kortens detaljer): bilden fri med radie 14 och
   hårfin ljus kant, plattformen och sändningstiden som glaschips nere på bilden (som typchipet på News), och
   tittarsiffran i kanalraden i Martian Mono med röd punkt (app.js kortTittare). Kanalnamnet klipps, siffran aldrig. */
#soksida .kort .bild, #foljvy .kort .bild { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .09); }
#soksida .kort .bild .m, #foljvy .kort .bild .m {
  padding: 4px 9px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--radius-pill);
  background: rgb(12 13 20 / .62);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 10px/1 var(--mono-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#soksida .kort .bild .m.plattform, #foljvy .kort .bild .m.plattform { top: auto; bottom: 9px; left: 10px; }
#soksida .kort .bild .m.pagatt, #foljvy .kort .bild .m.pagatt,
#soksida .kort .bild .m.dygnet-runt, #foljvy .kort .bild .m.dygnet-runt { top: auto; bottom: 9px; right: 10px; }
#soksida .kort .avatar, #foljvy .kort .avatar { border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .08); color: #e9eaf2; font: 500 11px/1 var(--skylt); }
#soksida .kort .titel, #foljvy .kort .titel { color: var(--v3-text); font: 600 15px/1.3 var(--sans); }
/* Kanalraden bryts (slutgranskningen): namnet (minst 6em) och tittarsiffran står först; märkena kommer sist och bryts
   till en egen rad när de inte ryms, så att siffran aldrig trycks ut. "✓ Official" ryms bredvid; State-controlled
   media får en egen rad, så att namnet inte krymper till några tecken (provet vid 390 px). */
#soksida .kort .kanal, #foljvy .kort .kanal { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; min-width: 0; color: var(--v3-text-2); font-size: 12px; }
#soksida .kort .kanal-namn, #foljvy .kort .kanal-namn { flex: 1 1 0; min-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#soksida .kort .kanal .officiell, #foljvy .kort .kanal .officiell,
#soksida .kort .kanal .statskontroll, #foljvy .kort .kanal .statskontroll,
#soksida .kort .kanal .erkand, #foljvy .kort .kanal .erkand { order: 3; }
#soksida .kort .avatar.aktor, #foljvy .kort .avatar.aktor { background: var(--aktor-yta); color: var(--aktor); }
#soksida .kommande-kort .bild, #foljvy .kommande-kort .bild { box-shadow: none; }
#soksida .kort-tittare, #foljvy .kort-tittare { order: 2; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: #e9eaf2; font: 400 11px/1 var(--mono-3); font-variant-numeric: tabular-nums; }
#soksida .kort-tittare.inga, #foljvy .kort-tittare.inga { color: var(--v3-text-3); letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
#soksida .kort-punkt, #foljvy .kort-punkt { width: 6px; height: 6px; border-radius: 50%; background: #ff6a5c; }
#soksida .kort .meta, #foljvy .kort .meta { color: var(--v3-text-3); font: 400 10.5px/1.5 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }

/* Listvyn på /all: tabellen (dator) och raderna (mobil) behåller uppställningen och får stil 3:s glas, färger och
   typsnitt. Tillväxtens färger (.upp, .ned) står kvar. */
#soksida .tabellram { border-color: rgb(255 255 255 / .07); border-radius: 20px; background: rgb(255 255 255 / .035); }
/* Martian Mono är bredare än Geist Mono: 12 px luft i sidled (i stället för 14) håller tabellen inom ramen vid 1280 px */
#soksida .tabell th { padding-inline: 12px; color: var(--v3-text-3); font: 400 10px/1.4 var(--mono-3); letter-spacing: .08em; }
#soksida .tabell td { padding-inline: 12px; border-top-color: rgb(255 255 255 / .06); }
#soksida .tabell .tal { font-family: var(--mono-3); }
#soksida .t-titel, #soksida .mobilrad-titel { color: var(--v3-text); }
#soksida .mobilrad { border-top-color: rgb(255 255 255 / .06); }
#soksida .mobilrad .kanal { color: var(--v3-text-2); }
#soksida .mobilrad-meta { color: var(--v3-text-3); font: 400 10.5px/1.5 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
#soksida .t-tumnagel, #soksida .m-tumnagel { border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / .09); }
#soksida .t-tumnagel .m, #soksida .m-tumnagel .m {
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--radius-pill);
  background: rgb(12 13 20 / .62);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 9px/1.4 var(--mono-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
#soksida .m-tumnagel .m.tittare { display: inline-flex; align-items: center; gap: 5px; }
#soksida .m-tumnagel .m.tittare .live-ord { display: none; }
#soksida .m-tumnagel .m.tittare::before { width: 6px; height: 6px; border-radius: 50%; background: #ff6a5c; }

/* ===== Upcoming, Following och Register i stil 3 (Anders 2026-10-19: "beta av hela listan") =====
   Samma botten, nordljus och serifrubrik som News och /all. Vyerna är smala .in-sektioner, så nordljuset ligger på
   body (absolut mot sidans första skärm, alltid i fönstrets bredd och utan sidrullning) i stället för på sektionen. */
body[data-vy="kommande"]::before, body[data-vy="folj"]::before, body[data-vy="register"]::before, body[data-vy="sida"]::before {
  content: "";
  position: absolute;
  top: -12px;
  right: 0;
  left: 0;
  height: 572px;
  background:
    radial-gradient(620px 300px at 18% 12px, rgb(118 112 255 / .34), transparent 68%),
    radial-gradient(560px 260px at 80% 34px, rgb(56 210 196 / .22), transparent 66%),
    radial-gradient(420px 200px at 55% 180px, rgb(255 90 120 / .10), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}
#kommandevy, #foljvy, #registervy { color: var(--v3-text); }
#kommandevy .kom-topp { padding-top: 32px; }
#foljvy .rubrik, #registervy .rubrik { padding-block: 32px 0; }
#kommandevy .kom-ingress, #foljvy .ingress, #registervy .ingress { margin-top: 10px; color: var(--v3-text-2); font-size: 16px; line-height: 1.5; }
#foljvy .info, #registervy .info { color: var(--v3-text-2); }

/* Upcoming: Subscribe i glas som News "All live streams", menyn som filterradens panel */
#kommandevy .knapp-fylld {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .07);
  color: var(--v3-text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 13px/1 var(--skylt);
}
#kommandevy .knapp-fylld:hover, #kommandevy .knapp-fylld[aria-expanded="true"] { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .24); }
#kommandevy .prenum-meny {
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 14px;
  background: rgb(18 19 26 / .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgb(0 0 0 / .4);
}
#kommandevy .prenum-meny .menyval { color: var(--v3-text); }
#kommandevy .prenum-meny .menyval:hover, #kommandevy .prenum-meny .menyval:focus-visible { background: rgb(255 255 255 / .06); }
#kommandevy .prenum-tips { color: var(--v3-text-3); }

/* Upcoming: dagarna som sektionsrubriker och raderna som glasrader (som Next 24 hours på News): tiden i violett
   Martian Mono, titeln i Geist, statusen som glaschip i mono. Mellan 640 px och uppåt står allt på en rad. */
#kommandevy .kom-dag-grupp { display: grid; gap: 6px; margin-top: 32px; }
#kommandevy .kom-dag { margin: 0 0 6px; color: var(--v3-text); font: 500 13px/1.4 var(--skylt); letter-spacing: .06em; text-transform: uppercase; }
#kommandevy .kom-rad {
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: 14px;
  background: rgb(255 255 255 / .035);
  transition: background-color 180ms ease, border-color 180ms ease;
}
#kommandevy .kom-rad:hover { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); }
#kommandevy .kom-tid { color: var(--v3-violett); font: 500 15px/1.4 var(--mono-3); }
#kommandevy .kom-tid.sen { color: var(--v3-text-3); }
#kommandevy .kom-titel { color: var(--v3-text); font: 600 15px/1.35 var(--sans); }
#kommandevy .kom-kanal { color: var(--v3-text-2); font-size: 12px; }
#kommandevy .kom-skiljetecken { color: rgb(255 255 255 / .22); }
#kommandevy .kom-etikett, #kommandevy .kom-marke {
  padding: 4px 9px;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .05);
  color: var(--v3-text-2);
  font: 500 10px/1.2 var(--mono-3);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Etiketten står i titelns kolumn (flex-kolumn) och ska inte töjas över hela bredden */
#kommandevy .kom-etikett { align-self: flex-start; margin-top: 4px; }
#kommandevy .kom-marke.soon { border-color: rgb(255 90 80 / .45); background: rgb(255 72 60 / .14); color: #ff6a5c; }
#kommandevy .kom-marke.delayed { border-color: rgb(255 196 87 / .4); background: rgb(255 196 87 / .1); color: #ffc457; }
#kommandevy .kalender.ikonknapp { border: 1px solid rgb(255 255 255 / .15); border-radius: var(--radius-pill); background: rgb(255 255 255 / .07); color: var(--v3-text-2); }
#kommandevy .kalender.ikonknapp:hover { border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .12); color: var(--v3-text); }
#kommandevy .kom-tom { color: var(--v3-text-2); }

/* Following: rubrikerna i Unbounded (regeln ovan), "See all →" i mono, knapparna som glaspiller. Follow-knappen
   bredvid "All live streams" på /all (#foljkategori) är samma slags knapp. */
#foljvy .se-alla { color: var(--v3-text-2); font: 400 11px/1.4 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
#foljvy .se-alla:hover { color: var(--v3-text); }
#foljvy .folj-av, #soksida .foljkategori, #registervy .reg-knappar button {
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .07);
  color: var(--v3-text);
  font: 500 12px/1 var(--skylt);
  letter-spacing: .01em;
}
#foljvy .folj-av:hover, #soksida .foljkategori:hover, #registervy .reg-knappar button:hover { border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .12); }
#soksida .foljkategori[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0b10; }
/* Rutan har sin egen höjd: .folj-innehall har min-height 60vh (stil.css), och rutan töjdes annars över hela den */
#foljvy .folj-tomvy { align-self: start; align-content: start; border: 1px dashed rgb(255 255 255 / .16); border-radius: 20px; background: rgb(255 255 255 / .035); }
#foljvy .folj-tom { color: var(--v3-text); }
#foljvy .folj-tom-hjalp, #foljvy .rek-beskr, #foljvy .rek-lart, #foljvy .rek-grupp, #foljvy .rek-tom, #foljvy .lank { color: var(--v3-text-2); }
#foljvy .folj-ejlive li { border-top-color: rgb(255 255 255 / .06); }
#foljvy .folj-plattform, #foljvy .rek-under { color: var(--v3-text-3); font: 400 10.5px/1.5 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
#foljvy .folj-integritet { color: var(--v3-text-3); }
#foljvy .rek-sektion { border-top-color: rgb(255 255 255 / .07); }
#foljvy .brytare { color: var(--v3-text); }
#foljvy .brytare-spar { border-color: rgb(255 255 255 / .16); background: rgb(255 255 255 / .08); }
#foljvy .brytare-spar::after { background: var(--v3-text-2); }
#foljvy .brytare[aria-pressed="true"] .brytare-spar { border-color: #fff; background: #fff; }
#foljvy .brytare[aria-pressed="true"] .brytare-spar::after { background: #0a0b10; }

/* Register (bara admin): kandidaterna som glasrader; Approve behåller den gröna fyllningen */
#registervy .reg-rad { border: 1px solid rgb(255 255 255 / .07); border-radius: 14px; background: rgb(255 255 255 / .035); }
#registervy .reg-detalj { color: var(--v3-text-2); }
#registervy .reg-knappar button { padding: 8px 14px; }
#registervy .reg-knappar .godkann { border-color: var(--aktor); background: var(--aktor); color: var(--yta-0); }

@media (max-width: 639px) {
  #kommandevy .kom-topp { padding-top: 20px; }
  #foljvy .rubrik, #registervy .rubrik { padding-top: 20px; }
  #kommandevy .kom-ingress, #foljvy .ingress, #registervy .ingress { font-size: 15px; }
  /* Tiden (56 px) och mellanrummet (12 px): statusen står under titeln (stil.css margin-left 68 px) */
  #kommandevy .kom-rad { gap: 8px 12px; padding: 12px; }
  /* stil.css .chips { flex-wrap: nowrap } (kategoriraden på /all) står senare och vann över .kom-filter: Following
     hamnade utanför skärmen. Filtren radbryts här. */
  #kommandevy .kom-filter { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #kommandevy .kom-rad { transition: none; }
}

/* ===== De serverrenderade sidorna i stil 3 (src/sok/sidram.js, 2026-10-19) =====
   /official, /official/<slug>, /event, /week, /genre, /developers och about.html: samma botten, nordljus och huvud
   som vyerna (body[data-vy="sida"], reglerna ovan). Innehållet: serifrubrik med toning, brödsmulorna i mono,
   avsnittsrubrikerna i Unbounded, raderna som glasrader och knapparna som glaspiller. */
.kategori, .om { color: var(--v3-text); }
.kategori { padding-block: 32px 56px; }
.om { padding-block: 32px 56px; }
.kategori .kategori-brod { margin: 0 0 4px; color: var(--v3-text-3); font: 400 11px/1.5 var(--mono-3); letter-spacing: .04em; text-transform: uppercase; }
.kategori .kategori-brod a { color: var(--v3-text-2); text-decoration: none; }
.kategori .kategori-brod a:hover { color: var(--v3-text); text-decoration: underline; text-underline-offset: 3px; }
/* Toningen följer texten (fit-content), så att en kort rubrik inte bara får den vita början av en bred toning */
.kategori h1, .om h1 {
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 14px;
  background: linear-gradient(95deg, #fff 0%, #e4e2ff 45%, #b9f0ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 400 52px/1.06 var(--serif);
  letter-spacing: -0.01em;
}
.kategori .kategori-ingress, .om p, .kategori.api-dok p, .kategori .api-lista { color: var(--v3-text-2); }
.kategori h2, .om h2 { margin: 40px 0 12px; color: var(--v3-text); font: 500 13px/1.4 var(--skylt); letter-spacing: .06em; text-transform: uppercase; }
.om h3, .kategori.api-dok h3 { color: var(--v3-text); }
.kategori a, .om a { color: var(--v3-text); text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: 3px; }
.kategori .kategori-lista { gap: 6px; }
.kategori .kategori-rad {
  padding: 12px 14px;
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: 14px;
  background: rgb(255 255 255 / .035);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.kategori .kategori-rad:hover { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); }
.kategori .kategori-titel { color: var(--v3-text); font: 600 15px/1.35 var(--sans); }
.kategori .kategori-detalj { color: var(--v3-text-2); font-size: 12px; }
.kategori .kategori-tittare { font: 400 11px/1.5 var(--mono-3); }
.kategori .kategori-punkt { color: rgb(255 255 255 / .22); }
.kategori .kategori-tom { border: 1px dashed rgb(255 255 255 / .16); border-radius: 20px; background: rgb(255 255 255 / .035); color: var(--v3-text-2); }
.kategori .push-knapp, .kategori .kategori-oppna {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .07);
  color: var(--v3-text);
  font: 500 12px/42px var(--skylt);
  letter-spacing: .01em;
  text-decoration: none;
}
.kategori .push-knapp:hover, .kategori .kategori-oppna:hover { border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .12); }
.kategori .push-knapp[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0b10; }
.kategori .dela { color: var(--v3-text-2); }
.kategori .dela-rubrik { margin-right: 6px; color: var(--v3-text-3); font: 400 10.5px/1.5 var(--mono-3); letter-spacing: .06em; text-transform: uppercase; }
.kategori .kategori-andra p { color: var(--v3-text-2); }
.kategori.api-dok pre { border-color: rgb(255 255 255 / .07); border-radius: 14px; background: rgb(255 255 255 / .035); }
.kategori.api-dok p code, .kategori .api-lista code, .kategori .api-tabell code, .om code { background: rgb(255 255 255 / .07); color: var(--v3-text); }
@media (max-width: 639px) {
  .kategori, .om { padding-top: 20px; }
  .kategori h1, .om h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .kategori .kategori-rad { transition: none; }
}

/* Sidfotens SEO-del (Anders 2026-10-18: "Vad är det här för sektion"): Categories och Live now on LiveRadar står kvar
   som vanlig HTML för sökmotorerna, men tystare. Rubrikerna i Martian Mono, kategorierna på en rad, live-listan i
   tre kolumner utan nummer och understrykning, en rad per post med ellips (hela titeln står kvar i HTML:en).
   Färgerna är stil B:s variabler, så att sidfoten fungerar även i ljust tema. */
.sidfot .sidfot-seo { gap: 18px; padding-block: 28px 20px; border-top: 1px solid var(--kant); color: var(--text-3); font-size: 12px; line-height: 18px; }
.sidfot .sidfot-seo .sidfot-rubrik { margin-bottom: 6px; color: var(--text-3); font: 400 10.5px/1.4 var(--mono-3); letter-spacing: .06em; }
.sidfot .sidfot-kategorier a, .sidfot .sidfot-livenu a { color: var(--text-2); text-decoration: none; }
.sidfot .sidfot-kategorier a:hover, .sidfot .sidfot-livenu a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.sidfot .sidfot-livenu ol { padding-left: 0; list-style: none; columns: 3 240px; column-gap: 28px; }
.sidfot .sidfot-livenu li { margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidfot .sidfot-livenu li span { color: var(--text-3); }
.sidfot .villkorsrad { font-size: 12px; }