/* Live desk: det nya skalet. Laddas sist på alla sidor, efter stil.css och stil-3.css, så att reglerna här vinner.
   Färgerna och typsnitten kommer ur skissen (docs/superpowers/specs/2026-10-23-live-desk-skiss.html). */

/* Archivo, variabelt i vikt och bredd (SIL OFL, public/fonts/OFL-Archivo.txt). Samma uppdelning som övriga typsnitt:
   latin och latin-ext, så att webbläsaren bara hämtar det tecknen kräver. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-full-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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-ext-full-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0C1118;
  --bg-2: #121A23;
  --bg-3: #1A232E;
  --ink: #F1ECE3;
  --ink-2: #B9BFC7;
  --ink-3: #8E99A6;
  --line: #263141;
  --line-2: #36475B;
  --live: #F0483E;
  --steel: #8FB3D9;
  --steel-deep: #2E4D6E;
  --sand: #D9C28F;
  --sand-deep: #4A3D1C;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --editor: "Instrument Serif", Georgia, serif;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

/* ===== Huvudet och klockraden =====
   Markupen kommer från sidhuvud() i src/sok/sidram.js; värdena ur skissen (rad 17-47 och mobilen rad 223-235).
   Reglerna är scopade till .topp där gamla klasser (.knapp m.fl.) finns kvar i stil.css för annat innehåll. */

/* Huvudets höjd (58 + klockraden 34 + kanten 1 px): nordljusets förskjutning och den klistrade högerspalten i stil-3.css */
:root { --huvud-hojd: 93px; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
svg.ik { width: 15px; height: 15px; flex: 0 0 auto; }
/* Det klistrade huvudet täcker överkanten: ankarhopp (/#alerts), scrollIntoView ("See all →", Alerts) och fokus
   landar under det, inte bakom det. Gäller alla mål, så .rek-sektion behöver inget eget scroll-margin. */
html { scroll-padding-top: calc(var(--huvud-hojd) + 8px); }

.topp {
  position: sticky;
  top: 0;
  z-index: 5;   /* över sökdelen på /all (3), under multiviewlistan (15) */
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: 400 14px/20px var(--font);
}
.topp-rad { display: flex; align-items: center; gap: 18px; min-height: 58px; flex-wrap: wrap; padding-block: 6px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 700 18px/1 var(--font); text-decoration: none; letter-spacing: -.01em; }
.logo-ikon { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); position: relative; }
.logo-ikon::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--live); }
.logo:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

nav.meny { display: flex; gap: 2px; flex-wrap: wrap; }
nav.meny a { color: var(--ink-2); padding: 8px 10px; border-radius: 3px; font-size: 13px; text-decoration: none; }
nav.meny a:hover { color: var(--ink); }
nav.meny a[aria-current] { color: var(--ink); background: var(--bg-3); }
nav.meny a:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

.topp-hoger { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Sökfältet (form.huvud-sok). På /all är #huvud-sok-falt listans sökfält (app.js) */
.topp .huvud-sok {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 210px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink-3);
  font-size: 13px;
}
.topp .huvud-sok:focus-within { outline: 2px solid var(--steel); outline-offset: 2px; }
.topp .huvud-sok input {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.topp .huvud-sok input::placeholder { color: var(--ink-3); opacity: 1; }
.topp .huvud-sok input::-webkit-search-cancel-button { display: none; }
/* /-tipset */
.topp .huvud-sok .kbd {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 4px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--ink-3);
  font: 11px var(--font);
}
/* × (visas av app.js eller klocka.js när fältet har text) tar tipsets plats */
.topp .huvud-sok:has(.sok-rensa:not([hidden])) .kbd { display: none; }
.topp .huvud-sok .sok-rensa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink-2);
  cursor: pointer;
}
.topp .huvud-sok .sok-rensa:hover { background: var(--line-2); color: var(--ink); }
.topp .huvud-sok .sok-rensa:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

/* Knapparna: Following, Alerts och Pro */
.topp .knapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.topp .knapp:hover { border-color: var(--ink-3); background: var(--bg-3); }
.topp .knapp:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.topp .knapp.fylld { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.topp .knapp.fylld:hover { background: #fff; }
.topp .knapp .antal { padding: 1px 7px; border-radius: 9px; background: var(--bg-3); color: var(--ink); font-size: 12px; }

/* Klockraden: datum, UTC, lokal tid, antal live och siffrorna ur registret */
.klockrad {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 34px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
}
.klockrad .datum { color: var(--ink-2); }
.klocka { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.klockrad .hoger { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.klockrad b { color: var(--ink); font-weight: 600; }
.klockrad .stat { white-space: nowrap; }
.klockrad .livepunkt { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--live); vertical-align: 1px; }

/* Mobil (Anders 2026-10-23): toppen följer inte med vid rullning; ikonknappar; menyn på en svepbar rad; klockan på en rad
   med bara UTC, lokal tid och live */
@media (max-width: 680px) {
  /* Uppmätt i Chrome med 44 px tryckytor (uppgift 10); /all har sökfältet på en egen rad */
  :root { --huvud-hojd: 141px; }
  body[data-vy="sok"] { --huvud-hojd: 185px; }
  /* Följer inte med vid rullning. relative i stället för static, så att huvudet (z-index 5) ligger över nordljusen
     (.nyhetsrum::before, #soksida::before) som annars lyser igenom det */
  .topp { position: relative; }
  html { scroll-padding-top: 0; }   /* huvudet klistras inte här, så inget att hålla undan för */
  .topp-rad { gap: 8px; min-height: 52px; }
  .topp-hoger { gap: 6px; }
  .topp-hoger .txt, .klockrad .datum, .klockrad .stat, .klockrad .txt, .klockrad #klocka-zon, .topp .huvud-sok { display: none; }
  .topp .knapp { padding: 0 10px; }
  nav.meny {
    order: 3;
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  nav.meny::-webkit-scrollbar { display: none; }
  nav.meny a { white-space: nowrap; }
  .klockrad { gap: 12px; flex-wrap: nowrap; min-height: 32px; overflow: hidden; }
  .klockrad .hoger { flex-wrap: nowrap; }
  /* /all: #huvud-sok-falt är listans sökfält (app.js), så det finns kvar på mobil, på en egen rad under menyn */
  body[data-vy="sok"] .topp-hoger { display: contents; }
  body[data-vy="sok"] #huvud-folj { margin-left: auto; }
  body[data-vy="sok"] .topp .huvud-sok { display: flex; order: 5; flex: 1 1 100%; min-width: 0; }
  body[data-vy="sok"] .topp .huvud-sok input { font-size: 16px; }   /* iOS zoomar inte in i fältet */
  /* × får 44 px tryckyta utan att pillret blir högre */
  .topp .huvud-sok .sok-rensa::after { content: ""; position: absolute; inset: -11px; }
  /* Tryckytorna: minst 44 px (projektets regel för mobil) */
  .topp .knapp { justify-content: center; min-width: 44px; min-height: 44px; }
  nav.meny a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mellanbredd (681-1060 px): logotyp, meny, sökfält och tre knappar ryms inte på en rad. I stället för att låta raden
   brytas där den råkar (två eller tre rader, 137-160 px, uppgift 4) får menyn en egen rad under logotypen, sökfältet
   krymper och klockraden bryts aldrig (siffrorna ur registret står i budskapet och på /official). Höjden blir då
   bestämd, och --huvud-hojd (scroll-padding, nordljuset, den klistrade högerspalten) stämmer: uppmätt 121 px. */
@media (min-width: 681px) and (max-width: 1060px) {
  :root { --huvud-hojd: 121px; }
  .topp-rad { row-gap: 2px; }
  nav.meny { order: 3; flex: 1 1 100%; margin-left: -10px; }
  /* flex-basis 0: annars bryts raden efter knapparnas fulla bredd innan sökfältet hinner krympa (145 px vid 681) */
  .topp-hoger { flex: 1 1 0; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; }
  .topp .huvud-sok { flex: 0 1 220px; min-width: 0; }
  .klockrad { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .klockrad .hoger { flex-wrap: nowrap; }
  .klockrad .stat { display: none; }
}

/* ===== /pro: Coming soon (src/sok/prosida.js) =====
   Pris-rutan och de två kolumnerna ur skissen (rad 160-181). Ingen köpknapp: knappen går till startsidan. */
.pro-sida { padding-block: 32px 56px; }
.pro { border-top: 2px solid var(--ink); padding-top: 24px; display: grid; gap: 28px; color: var(--ink); }
.pro-topp { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.pro-marke { display: inline-block; padding: 2px 8px; border: 1px solid var(--sand); border-radius: 2px; background: var(--sand-deep); color: var(--sand); font: 600 11px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.pro h1 { margin: 12px 0 10px; font: 700 40px/42px var(--font); font-stretch: 70%; letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; }
.pro h2 { margin: 0 0 12px; font: 600 14px/20px var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pro p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 56ch; }
.pro-pris { background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 16px; display: grid; gap: 8px; }
.pro-pris .pro-pris-rad { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.pro-pris .belopp { font: 700 30px/1 var(--font); font-stretch: 80%; }
.pro-pris .belopp span { font: 400 14px var(--font); color: var(--ink-3); }
.pro-pris .liten { font-size: 12px; color: var(--ink-3); }
.pro-pris .grundare { font-size: 12px; color: var(--sand); border: 1px dashed var(--sand); border-radius: 2px; padding: 6px 8px; }
.pro-pris .knapp.fylld { display: flex; align-items: center; justify-content: center; min-height: 40px; height: auto; margin-top: 4px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--bg); font: 600 13px/1 var(--font); text-decoration: none; }
.pro-pris .knapp.fylld:hover { background: #fff; }
.pro-pris .knapp.fylld:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.pro-lista { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
.pro-kol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pro-kol li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--ink-2); }
.pro-kol li::before { content: "+"; flex: 0 0 auto; width: 15px; color: var(--steel); font-weight: 700; text-align: center; }
.pro-kol li b { color: var(--ink); font-weight: 600; }
.pro-kol.fri { border-left: 1px solid var(--line); padding-left: 24px; }
.pro-kol.fri li::before { content: "✓"; color: var(--ink-3); font-weight: 400; }
@media (max-width: 680px) {
  .pro-sida { padding-block: 20px 40px; }
  .pro h1 { font-size: 32px; line-height: 34px; }
  .pro-topp, .pro-lista { grid-template-columns: minmax(0, 1fr); }
  .pro-kol.fri { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
}

/* ===== Startsidan: budskap, filterrad och desk (Live desk, uppgift 7) =====
   Markupen står i public/index.html (#nyhetsrum.desk-start); värdena ur skissen (rad 50-66, 69-70, 121-124, 155-157,
   184-193). Reglerna är scopade till .desk-start, eftersom stil.css/stil-3.css har egna .knapp, .marke, .meta och .status.
   Radernas, toppnyhetens, redaktionernas och tablåns detaljstil kommer i uppgift 8-9; här står grundlayouten och
   skelettens mått (en riktig rad = --rad-hojd, så att sidan inte hoppar). */
/* Uppmätta i headless Chrome (uppgift 8 och fixrunda 1, falskt index): raden har alltid plats för två titelrader
   (.kanaltitel min-height), 169 px; toppnyheten 531 px (bandet med fyra vinklar och Top story med fyra redaktioner).
   Mobil (390 px): raden 345 px, toppnyheten 885 px (Top story; bandet med fyra vinklar 963 px). Toppskelettet ritas
   bara när det finns en toppnyhet (server.js toppnyhetsLage, Ruling 18). Uppgift 10: bandets skelett har
   data-lage="band" och en egen höjd (--band-hojd), eftersom bandet på mobil är högre än Top story; mobilraden är
   kompaktare (tid och status bredvid tumnageln). Mätningarna står i task-10-report.md. Slutgranskningen: 44 px-verktyg
   på mobil (raden 303,5 px), "Read the full story" 38 px i stället för 57 (toppnyheten 512 px på dator, 866 px Top story
   och 988 px band på mobil; bandets längre larmknapp gör att knapprader radbryts). Mätningarna står i final-fix-report.md. */
:root { --rad-hojd: 169px; --topp-hojd: 512px; --band-hojd: 512px; }

/* Typsnittsvariablerna som stil.css/stil-3.css använder (filterraden, panelerna) pekar på Archivo här, så att
   startsidan bara behöver Archivo och Instrument Serif (server.js förladdar inte Geist, Unbounded eller Martian Mono på /) */
.desk-start { padding-bottom: 24px; --sans: var(--font); --skylt: var(--font); --mono-3: var(--font); }
.desk-start a { color: inherit; }
.desk-start .knapp {
  display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink);
  font: 500 13px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.desk-start .knapp:hover { border-color: var(--ink-3); background: var(--bg-3); }
.desk-start .knapp:focus-visible, .desk-start a:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.desk-start .knapp.fylld { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.desk-start .knapp.fylld:hover { background: #fff; }

/* Budskapet */
.budskap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 48px 36px; border-bottom: 1px solid var(--line); }
.budskap h1 { margin: 0 0 16px; font: 700 60px/0.98 var(--font); font-stretch: 70%; letter-spacing: -.015em; text-transform: none; color: var(--ink); text-wrap: balance; }
.budskap p { margin: 0 0 22px; font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 56ch; }
.budskap h1 + p { margin-bottom: 4px; }
.budskap .cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.budskap .not { margin: 14px 0 0; font-size: 13px; line-height: 20px; color: var(--ink-3); }
.verifierat { border-left: 2px solid var(--steel-deep); padding: 4px 0 4px 16px; align-self: end; color: var(--ink-2); font-size: 13px; line-height: 20px; display: grid; gap: 8px; }
.verifierat b { color: var(--ink); font-weight: 600; }
.verifierat a { color: var(--steel); }

/* Filterraden: filterrad.js ritar i #nyhetsrum-filter; "Showing N live · M upcoming today" till höger */
.desk-start .filter { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); }
.desk-start .filter .filterrad-plats { flex: 1 1 auto; min-width: 0; min-height: 48px; }
.filter .visar { margin-left: auto; font-size: 12px; color: var(--ink-3); }
/* Filterknapparna (filterrad.js) i skissens stil (.valj, rad 60-61): rak kant, ingen glasyta; samma höjd som förut (40 px),
   så att platsens min-height står kvar */
.desk-start .filterrad .filterrad-knapp {
  border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink);
  font: 500 13px/1 var(--font); letter-spacing: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.desk-start .filterrad .filterrad-knapp:hover { background: var(--bg-3); border-color: var(--ink-3); }
.desk-start .filterrad .filterrad-knapp[data-aktiv] { background: var(--bg-3); border-color: var(--steel); }
.desk-start .filterrad .filterrad-knapp:focus-visible { outline-color: var(--steel); }
.desk-start .filterrad .filterrad-rensa { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--steel); }
/* Type som segmentknappar (filterrad.js segment, skissen rad 62-65): All · Parliaments · Governments · Institutions ·
   Newsrooms; den valda fylld. 38 px + kanten = 40 px, samma höjd som de andra knapparna i raden */
.desk-start .filterrad .segment { flex: none; display: inline-flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.desk-start .filterrad .segment-knapp {
  min-height: 38px; margin: 0; padding: 0 11px; border: 0; border-right: 1px solid var(--line-2); border-radius: 0;
  background: transparent; color: var(--ink-2); font: 400 13px/1 var(--font); white-space: nowrap; cursor: pointer;
}
.desk-start .filterrad .segment-knapp:last-child { border-right: 0; }
/* Hover bara på ovalda knappar, så att den valda förblir fylld under pekaren (och efter ett tryck på mobil) */
.desk-start .filterrad .segment-knapp:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--bg-3); color: var(--ink); }
.desk-start .filterrad .segment-knapp[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.desk-start .filterrad .segment-knapp:disabled { opacity: .45; cursor: default; }
.desk-start .filterrad .segment-knapp:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }

/* Desken: vänsterspalt och högerspalt */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 36px 64px; }
.vanster, .hogerspalt { min-width: 0; display: grid; gap: 40px; align-content: start; }

.desk-start .sektion-h { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin: 0 0 4px; }
.desk-start .sektion-h h2 { margin: 0; font: 600 20px/26px var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); }
.desk-start .sektion-h .sub { font-size: 12px; color: var(--ink-3); }
.desk-start .sektion-h .alla { margin-left: auto; font-size: 12px; color: var(--steel); text-decoration: none; }
.desk-start .rader { list-style: none; margin: 0; padding: 0; }
.desk-start .mer { padding-block: 16px 0; }
.desk-start .mer .knapp { min-height: 36px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink); font: 500 13px/1 var(--font); }

/* Skeletten: samma mått som en riktig rad respektive toppnyheten (CLS) */
.desk-start .skelett-topp[data-lage="band"] { min-height: var(--band-hojd); }
.desk-start .skelett-topp { display: block; min-height: var(--topp-hojd); border-bottom: 1px solid var(--line); background: linear-gradient(var(--bg-2), var(--bg-2)) 0 0 / 70% 40px no-repeat, linear-gradient(var(--bg-2), var(--bg-2)) 0 60px / 60% 90px no-repeat; pointer-events: none; }
.desk-start .skelett-rad { display: block; height: var(--rad-hojd); border-bottom: 1px solid var(--line); border-left: 2px solid transparent; padding: 0; pointer-events: none; background: linear-gradient(var(--bg-2), var(--bg-2)) 190px 18px / 168px 95px no-repeat, linear-gradient(var(--bg-2), var(--bg-2)) 374px 20px / 40% 14px no-repeat, linear-gradient(var(--bg-2), var(--bg-2)) 374px 48px / 50% 14px no-repeat; }

/* Pro-remsan: en rad text och länk */
.pro-remsa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; border-top: 2px solid var(--ink); padding-top: 22px; }
.pro-remsa h2 { margin: 0 0 6px; font: 700 26px/28px var(--font); font-stretch: 70%; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pro-remsa p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 20px; max-width: 60ch; }
.pro-remsa-lank { color: var(--steel); font-size: 13px; text-decoration: none; white-space: nowrap; }
.pro-remsa-lank:hover { text-decoration: underline; }

/* Högerspalten: larmpanelen och tablån */
.desk-start .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: 20px; display: grid; gap: 12px; }
.desk-start .panel h2 { margin: 0; font: 600 18px/24px var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); }
.desk-start .panel p { margin: 0; color: var(--ink-2); font-size: 13px; }
.desk-start .panel .liten { font-size: 12px; color: var(--ink-3); }
.desk-start .tabla { list-style: none; margin: 0; padding: 0; position: relative; }

@media (max-width: 1000px) {
  .budskap, .desk { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .verifierat { align-self: start; }
}
@media (max-width: 680px) {
  :root { --rad-hojd: 303.5px; --topp-hojd: 866px; --band-hojd: 988px; }
  .budskap { padding-block: 28px 24px; }
  .budskap h1 { margin-bottom: 12px; font-size: 44px; }
  .budskap p { font-size: 16px; line-height: 24px; margin-bottom: 16px; }
  .budskap h1 + p { margin-bottom: 4px; }
  .budskap .not, .verifierat { display: none; }
  .desk { padding-block: 24px 40px; }
  .pro-remsa { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .filter .visar { margin-left: 0; width: 100%; }
  /* Filterraden (med Type-segmentet) är svepbar på mobil (stil-3.css overflow-x: auto); den tonade högerkanten visar
     att det finns mer (skissen rad 245-248) */
  .desk-start .filterrad .filterrad-knappar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* ===== Startsidan: toppnyheten, raderna, redaktionerna och 24/7 (Live desk, uppgift 8) =====
   Byggs av public/desk-rader.js; värdena ur skissen (rad 72-152 och 210-213, mobilen 242-253). Scopat till
   .desk-start: stil.css har egna .marke, .officiell, .meta, .status, .tomt, .push-knapp och .menyval (app.js
   Follow-knapp får klassen menyval för att skriva ordet bredvid stjärnan), så reglerna här sätter allt de ändrar. */

/* Spalternas enda kolumn får krympa: annars gör 24/7-raden på mobil (svepbar, 240 px per kort) hela spalten bredare
   än skärmen, och rubriker och titlar klipps i stället för att radbrytas */
.desk-start .vanster, .desk-start .hogerspalt { grid-template-columns: minmax(0, 1fr); }

/* .knapp sätter display, så hidden (push.js visar Get alerts först när push fungerar; Show more) måste vinna */
.desk-start .knapp[hidden], .desk-start .push-info[hidden] { display: none; }

/* Märken */
.desk-start .marke {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid var(--line-2);
  border-radius: 2px; background: transparent; color: var(--ink-2); font: 400 11px/16px var(--font); letter-spacing: 0; white-space: nowrap;
}
.desk-start .marke.officiell { border-color: var(--steel); color: var(--steel); background: transparent; }
.desk-start .marke.redaktion { border-color: var(--line-2); color: var(--ink-2); }
.desk-start .marke.statlig, .desk-start .marke.erkand { border: 1px dashed var(--sand); color: var(--sand); background: transparent; }
.desk-start .marke.lage { border-color: var(--sand-deep); background: var(--sand-deep); color: var(--sand); font-weight: 600; letter-spacing: .02em; }
.desk-start .live { color: var(--live); font-weight: 700; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }

/* Tumnageln: 16:9, länk till sändningen; utan bild en neutral ruta med plattformens namn */
.desk-start .tumnagel { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: var(--bg-3); text-decoration: none; }
.desk-start .tumnagel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.desk-start .tumnagel.utan { display: grid; place-items: center; border: 1px solid var(--line); }
.desk-start .tumnagel-namn { color: var(--ink-3); font: 600 11px/1 var(--font); letter-spacing: .08em; }

/* Raden: avsändare, titel, plattform och verktyg */
.desk-start .innehall { min-width: 0; display: grid; gap: 5px; align-content: start; }
.desk-start .avs { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 13px; line-height: 20px; }
.desk-start .avs .iso { flex: 0 0 auto; color: var(--ink-3); font-size: 11px; letter-spacing: .06em; }
.desk-start .avs b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.desk-start .kanaltitel { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; color: var(--ink); font-size: 15px; line-height: 21px; overflow-wrap: anywhere; }
/* Live now-raden har alltid plats för två titelrader (min-height ovan), så att varje rad är lika hög som skelettraden
   (--rad-hojd); de kompakta raderna nedan sätter en egen, lägre höjd */
.desk-start .kanaltitel a { text-decoration: none; }
.desk-start .kanaltitel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.desk-start .plattform { color: var(--ink-3); font-size: 12px; line-height: 17px; }
.desk-start .verktyg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.desk-start .verktyg .knapp { justify-content: center; min-height: 34px; padding: 0 10px; font-size: 12px; font-weight: 500; line-height: 1; border-radius: 3px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); }
.desk-start .verktyg .push-knapp, .desk-start .verktyg .folj { min-width: 116px; margin: 0; }
.desk-start .verktyg .knapp.ikon { min-width: 36px; padding: 0 9px; }
.desk-start .verktyg .knapp[aria-pressed="true"] { border-color: var(--steel); color: var(--steel); }
.desk-start .verktyg svg { flex: 0 0 auto; width: 15px; height: 15px; }
/* Copy link är en ikon; ordet syns bara som svar ("Copied ✓", "Could not copy") */
.desk-start .knapp.ikon .kopiera-text { display: none; }
.desk-start .knapp.ikon.klar .kopiera-text, .desk-start .knapp.ikon.misslyckad .kopiera-text { display: inline; }
.desk-start .push-info { flex: 1 1 100%; margin: 2px 0 0; color: var(--ink-3); font-size: 12px; line-height: 17px; }

/* Live now from official sources: tid · status · tumnagel · innehåll */
.desk-start .rad { display: grid; grid-template-columns: 76px 70px 168px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0 16px 12px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.desk-start .rad.off { border-left-color: var(--steel-deep); }
.desk-start .rad .tid { display: block; font-variant-numeric: tabular-nums; }
.desk-start .rad .utc { display: block; color: var(--ink); font-size: 20px; font-weight: 600; line-height: 22px; }
.desk-start .rad .utc small { margin-left: 2px; color: var(--ink-3); font-size: 10px; font-weight: 400; }
.desk-start .rad .lokal { display: block; color: var(--ink-3); font-size: 11px; line-height: 16px; }
.desk-start .rad .status { display: grid; gap: 2px; align-content: start; color: var(--ink-3); font-size: 11px; line-height: 16px; }
.desk-start .rad .tumnagel { margin-top: 2px; }
.desk-start .rader .tomt { padding: 24px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-2); }
.desk-start .nyhetsrum-tomt { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.desk-start .tomt-lank { color: var(--steel); font-size: 13px; text-decoration: none; }
.desk-start .tomt-lank:hover { text-decoration: underline; }

/* Toppnyheten */
.desk-start .topstory { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.desk-start .topstory.utan-live { grid-template-columns: minmax(0, 1fr); }
.desk-start .topstory-text { min-width: 0; }
.desk-start .topstory .meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; max-width: none; overflow: visible; white-space: normal; color: var(--ink-3); font-size: 12px; line-height: 18px; }
.desk-start .topstory .meta b { color: var(--ink); font-weight: 600; }
.desk-start .topstory h2 { margin: 14px 0 10px; color: var(--ink); font: 400 46px/48px var(--editor); letter-spacing: 0; text-transform: none; text-wrap: balance; overflow-wrap: anywhere; }
.desk-start .topstory h2 a { text-decoration: none; }
.desk-start .topstory h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.desk-start .rapporterat { margin: 0 0 16px; color: var(--ink-2); font-size: 13px; line-height: 20px; }
.desk-start .lasmer { display: grid; border-top: 1px solid var(--line); }
.desk-start .lasmer .rubrik { padding: 12px 0 6px; color: var(--ink-3); font-size: 11px; line-height: 20px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.desk-start .lasmer-lank { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 14px; text-decoration: none; }
.desk-start .lasmer-lank .namn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-start .lasmer-lank:hover .namn { text-decoration: underline; text-underline-offset: 3px; }
.desk-start .lasmer-lank .pil { margin-left: auto; color: var(--ink-3); }
.desk-start .knapprad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.desk-start .knapprad .push-knapp { margin: 0; padding: 0 12px; border-radius: 3px; font-weight: 500; }
.desk-start .knapprad .knapp[aria-pressed="true"] { border-color: var(--steel); color: var(--steel); }
.desk-start .knapprad .push-info { margin: 0; }
.desk-start .idennastory { min-width: 0; }
.desk-start .idennastory h3 { margin: 0 0 10px; color: var(--ink-3); font: 500 12px/18px var(--font); letter-spacing: 0; text-transform: none; }
.desk-start .vinkel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.desk-start .vinkel:first-of-type { padding-top: 0; }
.desk-start .vinkel.stor { grid-template-columns: minmax(0, 1fr); gap: 10px; border-bottom: 0; }
.desk-start .vinkel .innehall { gap: 4px; }
.desk-start .vinkel .innehall > .marke { justify-self: start; }
.desk-start .alla-strommar { display: inline-block; margin-top: 10px; color: var(--steel); font-size: 13px; text-decoration: none; }
.desk-start .alla-strommar:hover { text-decoration: underline; }
.desk-start .vinkel:not(.stor) .kanaltitel { font-size: 13px; line-height: 18px; min-height: 18px; }

/* Newsrooms on air och 24/7: kompakta rader med liten tumnagel */
.desk-start .redaktioner, .desk-start .alltid-rad-lista { list-style: none; margin: 0; padding: 0; }
.desk-start .red-rad, .desk-start .alltid-rad { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.desk-start .red-rad .vad, .desk-start .alltid-rad .vad { min-width: 0; display: grid; gap: 4px; font-size: 13px; }
.desk-start .red-rad .kanaltitel, .desk-start .alltid-rad .kanaltitel { font-size: 13px; line-height: 18px; min-height: 18px; }
.desk-start .red-rad .verktyg, .desk-start .alltid-rad .verktyg { margin-top: 2px; }
.desk-start .red-rad .verktyg .folj { min-width: 0; }
.desk-start .alltid-rad .verktyg .folj { min-width: 0; }
.desk-start .alla-rad { padding: 12px 0; }
.desk-start .alla-rad .alla { color: var(--steel); font-size: 13px; text-decoration: none; }
.desk-start .alla-rad .alla:hover { text-decoration: underline; }

/* Sektionsrubriken radbryts hellre än att trycka ihop "12 bodies on air" och All live på smala skärmar */
.desk-start .sektion-h { flex-wrap: wrap; row-gap: 2px; }
.desk-start .sektion-h .sub, .desk-start .sektion-h .alla { white-space: nowrap; }

@media (max-width: 1000px) {
  .desk-start .topstory { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 680px) {
  .desk-start .topstory h2 { font-size: 34px; line-height: 36px; }
  /* Raden som skissen (rad 242-253): tid och status bredvid tumnageln, innehållet under i full bredd. Tumnageln är
     högst 200 px (112 px hög), så att raden blir kompaktare utan att något tas bort (uppgift 10: 345 → 293,5 px) */
  .desk-start .rad { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; padding-left: 10px; }
  .desk-start .rad .tid { grid-column: 1; grid-row: 1; }
  .desk-start .rad .status { grid-column: 1; grid-row: 2; }
  .desk-start .rad .tumnagel { grid-column: 2; grid-row: 1 / span 2; max-width: 200px; }
  .desk-start .rad .innehall { grid-column: 1 / -1; }
  .desk-start .skelett-rad { background: linear-gradient(var(--bg-2), var(--bg-2)) 118px 18px / min(200px, calc(100% - 130px)) 112px no-repeat, linear-gradient(var(--bg-2), var(--bg-2)) 10px 146px / 70% 14px no-repeat, linear-gradient(var(--bg-2), var(--bg-2)) 10px 172px / 50% 14px no-repeat; }
  /* En spelare på mobil (multiview-beslutet): ingen Add to multiview på raderna */
  .desk-start .verktyg .mv-knapp { display: none; }
  /* 24/7: en svepbar rad med tonad kant */
  .desk-start .alltid-rad-lista {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .desk-start .alltid-rad-lista::-webkit-scrollbar { display: none; }
  .desk-start .alltid-rad { flex: 0 0 240px; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0 0; border-bottom: 0; scroll-snap-align: start; }
}

/* ===== Högerspalten: larmpanelen och Upcoming-tablån (Live desk, uppgift 9) =====
   Byggs av larmpanel() och tabla() i public/desk-rader.js; värdena ur skissen (rad 184-209). Scopat till .desk-start:
   stil.css har egna .titel och .tomt som annars slår igenom. */

.desk-start .larmpanel { display: grid; gap: 12px; }
.desk-start .larm-knappar { display: flex; flex-wrap: wrap; gap: 6px; }
/* Knapparna är dolda tills push.js visar dem (servern utan push, eller webbläsaren utan stöd): inget tomt mellanrum */
.desk-start .larm-knappar:not(:has(.knapp:not([hidden]))) { display: none; }
.desk-start .larm-knappar .knapp { justify-content: center; min-height: 32px; padding: 0 12px; margin: 0; font-size: 12px; font-weight: 500; line-height: 1; border-radius: 3px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); }
.desk-start .larm-knappar .knapp[aria-pressed="true"] { border-color: var(--steel); color: var(--steel); }
.desk-start .larm-tomt, .desk-start .larm-meddelande, .desk-start .larm-fler { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 20px; }
.desk-start .larm-fler { color: var(--ink-3); font-size: 12px; }
.desk-start .larm-lank, .desk-start .panel .pro-lank { color: var(--steel); text-decoration: none; }
.desk-start .larm-lank:hover, .desk-start .panel .pro-lank:hover { text-decoration: underline; text-underline-offset: 3px; }

.desk-start .tabla::before { content: ""; position: absolute; left: 72px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); }
.desk-start .tabla li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 26px; padding: 12px 0; border-bottom: 1px solid var(--line); position: relative; text-align: left; }
.desk-start .tabla li::before { content: ""; position: absolute; left: 68px; top: 17px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--steel); background: var(--bg); }
.desk-start .tabla li.avdel { display: block; border-bottom: 0; padding: 0; }
.desk-start .tabla li.avdel::before { display: none; }
.desk-start .tabla li.tomt { display: block; padding: 12px 0; border-bottom: 0; color: var(--ink-2); font-size: 13px; line-height: 20px; }
.desk-start .tabla li.tomt::before { display: none; }
.desk-start .tabla:has(li.tomt)::before { display: none; }
.desk-start .tabla .t { display: block; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); }
.desk-start .tabla .t small { display: block; font-weight: 400; font-size: 11px; line-height: 16px; color: var(--ink-3); }
.desk-start .tabla .vad { display: grid; gap: 3px; min-width: 0; }
.desk-start .tabla .vad .namn { font-size: 13px; font-weight: 600; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.desk-start .tabla .vad .titel { display: block; max-width: none; overflow: visible; font-size: 13px; font-weight: 400; line-height: 19px; color: var(--ink-2); overflow-wrap: anywhere; }
.desk-start .tabla .vad .verktyg { margin-top: 6px; }
.desk-start .tabla .vad .verktyg .knapp { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; text-decoration: none; }
.desk-start .tabla .vad .verktyg .push-knapp { min-width: 0; }
.desk-start .nu { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--steel); font-size: 11px; font-weight: 600; }
.desk-start .nu::after { content: ""; flex: 1; height: 1px; background: var(--steel); }
.desk-start .dag { padding-top: 12px; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* Tryckytor på mobil (projektets regel: minst 44 px). Sist i filen, så att reglerna vinner över de kompakta måtten ovan
   (radverktyg 34 px, larmknappar 32 px, tablå 30 px, segment 38 px). Filterknapparna får 46 px, så att raden med
   segmentet (44 px + kant) blir jämn. */
@media (max-width: 680px) {
  .desk-start .verktyg .knapp { min-height: 44px; }
  .desk-start .larm-knappar .knapp { min-height: 44px; }
  .desk-start .tabla .vad .verktyg .knapp { min-height: 44px; }
  .desk-start .filterrad .segment-knapp { min-height: 44px; }
  .desk-start .filterrad .filterrad-knapp { min-height: 46px; }
}

/* Minskad rörelse (skissen rad 258): inga övergångar, animationer eller mjuk rullning. Den enda plats där desk.css
   använder !important, så att den vinner över alla övergångar i stil.css och stil-3.css */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}