/*
 * "WIRE" — riktning 2 för domänfabriken.
 *
 * Riktning 1 (tema/) blev en urvattnad medelsida: jag mätte CSS-tokens ur
 * referenssajterna och fick fram genomsnittet av dem. Det som saknades var allt
 * som faktiskt ger en sajt karaktär — bildmassa, rörelse, djup, densitet.
 *
 * Den här går åt andra hållet med avsikt: en NYHETSWIRE. Information överallt,
 * allt synligt samtidigt, siffror som tickar, tidsstämplar på sekunden, källa
 * på varje påstående. Det är motsatsen till den luftiga enkolumnssida varje
 * AI-generator spottar ur sig, och det är rätt för en innehållssajt: hög
 * densitet = mer på skärmen = mer för både läsare och Google.
 *
 * Tre saker bär karaktären, och de är avsiktliga val, inte dekoration:
 *   1. TÄTHET — 13–14px bastext, hårfina linjer, moduler kant i kant. En
 *      terminal, inte en broschyr.
 *   2. SIFFROR SOM LEVER — monospace, tabular-nums, värden som räknas upp,
 *      pulserande LIVE-punkter, sparklines i inline-SVG.
 *   3. KONTRAST MELLAN BAND — kolsvart hero med foto och 3D, sedan skarpt
 *      ljusa datasektioner. Växlingen är personligheten.
 */

:root {
  --svart: #07080a;
  --kol: #0e1013;
  --kol-2: #15181d;
  --linje: #23272e;
  --linje-ljus: #dfe3e8;

  --papper: #ffffff;
  --papper-2: #f4f6f8;

  --text: #0b0d10;
  --text-2: #5b6572;
  --text-mork: #eef1f4;
  --text-mork-2: #93a0ae;

  /* Elektrisk lime — läser som "instrument", inte som "varumärkesgrön". */
  --volt: #c6f34a;
  /*
   * MÅSTE härledas ur --volt, aldrig sättas för sig. Renderaren injicerar bara
   * `--volt` per sajt; låg --volt-mork kvar som egen hexkod blev betygsstaplarna
   * och navigeringens understrykning limegröna på en blå sajt (mätt 2026-07-31).
   * En variabel per sajt är hela löftet — då får inget annat vara hårdkodat.
   */
  --volt-mork: color-mix(in srgb, var(--volt) 74%, #1a2200);
  --cyan: #35e0d4;
  --rod: #ff4d4d;
  --gul: #ffc148;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bred: 1560px;   /* medvetet BREDARE än referenssajterna — täthet kräver plats */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.bred { max-width: var(--bred); margin-inline: auto; padding-inline: 20px; }

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }

/* Alla siffror i hela gränssnittet är monospace och tabulära. Det är det enskilt
   starkaste greppet: kolumner ligger i lod och sidan känns mätt, inte skriven. */
.tal { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.etikett {
  font-family: var(--mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-2);
}
.mork .etikett { color: var(--text-mork-2); }

/* ---------- LIVE-punkt ---------- */
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; }
.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--volt); box-shadow: 0 0 0 0 rgb(198 243 74 / 0.7);
  animation: puls 1.8s infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgb(198 243 74 / 0.6); }
  70% { box-shadow: 0 0 0 7px rgb(198 243 74 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(198 243 74 / 0); }
}

/* ---------- TICKER ---------- */
.ticker {
  background: var(--svart); color: var(--text-mork);
  border-bottom: 1px solid var(--linje);
  display: flex; align-items: stretch; overflow: hidden;
  height: 34px;
}
.ticker__fast {
  display: flex; align-items: center; gap: 10px;
  padding-inline: 14px; flex: none;
  background: var(--volt); color: var(--svart);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
}
.ticker__spar { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker__rad {
  display: flex; gap: 28px; white-space: nowrap; padding-left: 20px;
  animation: rulla 42s linear infinite;
}
.ticker__spar:hover .ticker__rad { animation-play-state: paused; }
@keyframes rulla { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__post { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.ticker__post b { font-family: var(--mono); font-weight: 600; }
.upp { color: var(--rod); }      /* dyrare el = rött, inte "grönt=upp" */
.ner { color: var(--volt); }

/* ---------- TOPP ---------- */
.topp {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje-ljus);
}
.topp__rad { display: flex; align-items: center; gap: 24px; height: 52px; }
.marke { font-weight: 900; font-size: 19px; letter-spacing: -0.04em; }
.marke i { font-style: normal; color: var(--volt-mork); }
.topp nav { display: flex; gap: 20px; font-size: 13px; font-weight: 600; }
.topp nav a { padding-block: 4px; border-bottom: 2px solid transparent; color: var(--text-2); }
.topp nav a:hover, .topp nav a.pa { color: var(--text); border-bottom-color: var(--volt-mork); }
.topp__hoger { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.klocka { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* ---------- HERO ---------- */
.hero {
  position: relative; background: var(--svart); color: var(--text-mork);
  overflow: hidden; isolation: isolate;
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55;
}
/* Vinjett så att texten alltid håller kontrast oavsett bild. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgb(7 8 10 / 0.96) 0%, rgb(7 8 10 / 0.7) 45%, rgb(7 8 10 / 0.15) 70%),
    linear-gradient(to top, rgb(7 8 10 / 0.9), transparent 45%);
}
.hero__inre {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px; align-items: center;
  padding-block: 54px 44px;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  letter-spacing: -0.045em; max-width: 15ch; margin-bottom: 18px;
}
.hero h1 em { font-style: normal; color: var(--volt); }
.hero__under { color: var(--text-mork-2); font-size: 15px; max-width: 46ch; margin-bottom: 26px; }

/* Stora nyckeltal sida vid sida — det är sajtens innehåll, inte pynt. */
.nyckeltal { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 26px; }
.nyckeltal__post { display: grid; gap: 3px; }
.nyckeltal__tal { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.nyckeltal__tal small { font-size: 14px; font-weight: 500; color: var(--text-mork-2); margin-left: 3px; }
.nyckeltal__diff { font-family: var(--mono); font-size: 11px; }

.hero__knappar { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; font: 700 13px/1 var(--sans);
  background: var(--volt); color: var(--svart);
  border: 1px solid var(--volt); border-radius: 2px; cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:hover { transform: translateY(-1px); background: #d4ff5c; }
.btn--linje { background: transparent; color: var(--text-mork); border-color: var(--linje); }
.btn--linje:hover { background: var(--kol-2); border-color: var(--text-mork-2); }

/* 3D-scenen: landskapet är brett, inte kvadratiskt. */
.scen { position: relative; aspect-ratio: 4 / 3; max-height: 470px; }
.scen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Syns om WebGL2 saknas — då står en glödande ring kvar i stället för tomrum. */
.scen__reserv {
  position: absolute; inset: 12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 38% 32%, rgb(198 243 74 / 0.55), transparent 58%),
              radial-gradient(circle at 68% 70%, rgb(53 224 212 / 0.4), transparent 60%);
  filter: blur(28px);
}
.scen__text {
  position: absolute; bottom: 0; right: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-mork-2); text-align: right;
}

/* ---------- BAND ---------- */
.band { border-bottom: 1px solid var(--linje-ljus); }
.band__topp {
  display: flex; align-items: center; gap: 14px;
  padding-block: 12px; border-bottom: 1px solid var(--linje-ljus);
}
.band__topp h2 { font-size: 15px; letter-spacing: -0.01em; }
.band__topp .etikett { margin-left: auto; }

/* ---------- NYHETSVÄGG: tre kolumner, tät ---------- */
.vagg { display: grid; grid-template-columns: 1.6fr 1.1fr 0.85fr; gap: 0; }
.vagg > * { padding: 18px 20px; border-right: 1px solid var(--linje-ljus); }
.vagg > *:last-child { border-right: 0; }

.stor { display: grid; gap: 12px; }
.stor__bild { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 2px; }
.stor h3 { font-size: 26px; letter-spacing: -0.03em; }
.stor p { margin: 0; color: var(--text-2); font-size: 14px; }

.rad-lista { display: grid; gap: 0; }
.post {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px;
  padding-block: 12px; border-top: 1px solid var(--linje-ljus);
}
.post:first-child { border-top: 0; padding-top: 0; }
.post__tid { font-family: var(--mono); font-size: 11px; color: var(--text-2); padding-top: 2px; }
.post__rubrik { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.post__kalla { font-family: var(--mono); font-size: 10px; color: var(--text-2); letter-spacing: 0.06em; }
.post:hover .post__rubrik { color: var(--volt-mork); }

/* Höger räl: staplade datamoduler, ingen luft mellan dem. */
.modul { border-top: 1px solid var(--linje-ljus); padding-block: 12px; }
.modul:first-child { border-top: 0; padding-top: 0; }
.modul__rad { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-block: 4px; }
.modul__rad b { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.modul__namn { font-size: 12px; color: var(--text-2); }

.spark { display: block; width: 100%; height: 30px; margin-top: 6px; }

/* ---------- DATATABELL ---------- */
.tabellband { background: var(--papper-2); }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--linje-ljus); text-align: right; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); background: var(--papper); position: sticky; top: 52px;
}
table.data td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data td:first-child { font-family: var(--sans); font-weight: 700; }
table.data tbody tr:hover { background: rgb(198 243 74 / 0.16); }
.stapel { display: inline-block; height: 8px; background: var(--volt-mork); vertical-align: middle; }

/* ---------- KARTBAND (fullbredd foto) ---------- */
.foto-band { position: relative; min-height: 340px; display: grid; align-items: end; color: var(--text-mork); }
.foto-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.foto-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(7 8 10 / 0.92), rgb(7 8 10 / 0.1) 70%);
}
.foto-band__inre { padding-block: 30px; display: grid; gap: 14px; }
.foto-band h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 22ch; }
.plattor { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: rgb(255 255 255 / 0.14); }
.platta { background: rgb(7 8 10 / 0.55); padding: 12px 14px; display: grid; gap: 2px; }
.platta b { font-family: var(--mono); font-size: 22px; font-weight: 700; }

/* ---------- FOT ---------- */
.fot { background: var(--svart); color: var(--text-mork-2); padding-block: 34px 20px; font-size: 12px; }
.fot__rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; }
.fot a { display: block; padding-block: 3px; }
.fot a:hover { color: var(--volt); }
.fot__slut { border-top: 1px solid var(--linje); margin-top: 24px; padding-top: 14px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; }

/* ---------- avslöjande vid rullning ---------- */
/*
 * Grundtillståndet är SYNLIGT. Döljandet aktiveras bara när skriptet har
 * lagt `js` på <html> — annars gör en misslyckad IntersectionObserver, en
 * JS-krasch eller en rendering utan rullning innehållet PERMANENT osynligt.
 * Det hände i praktiken 2026-07-31: kortrutnätet och betygslistan låg i DOM:en
 * men ritades som tomma grå block, och Google rullar inte för att hitta text.
 */
.in { opacity: 1; }
html.js .in { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
html.js .in.syns { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .in, .in { opacity: 1; transform: none; transition: none; }
  .ticker__rad { animation: none; }
  .live::before { animation: none; }
}

@media (max-width: 1100px) {
  .vagg { grid-template-columns: 1fr 1fr; }
  .vagg > *:nth-child(2) { border-right: 0; }
  .vagg > *:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--linje-ljus); }
}
@media (max-width: 760px) {
  .hero__inre { grid-template-columns: 1fr; padding-block: 30px; }
  .scen { max-height: 300px; order: -1; }
  .vagg { grid-template-columns: 1fr; }
  .vagg > * { border-right: 0; border-top: 1px solid var(--linje-ljus); }
  .topp nav { display: none; }
  .nyckeltal { gap: 20px; }
  .nyckeltal__tal { font-size: 30px; }
}

/* ============================================================
   MODULER som inte fanns i den första WIRE-sidan.
   Samma regel gäller: bara tokens, aldrig hårdkodade värden — annars
   slutar accentbytet per sajt att fungera.
   ============================================================ */

/* ---------- kortrutnät (resemål, restauranger, produkter, erbjudanden) ---------- */
.kortrutnat {
  display: grid; gap: 1px; background: var(--linje-ljus);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  margin-block: 18px;
}
.kkort { background: var(--papper); display: flex; flex-direction: column; }
.kkort img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.kkort__kropp { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kkort__taggrad { min-height: 18px; }   /* alltid närvarande → rubriker i linje */
.ktagg {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--volt); color: var(--svart);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
}
.kkort__rubrik { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: var(--text); }
.kkort__text { font-size: 12px; color: var(--text-2); }
.kkort__pris { margin-top: auto; padding-top: 8px; font-family: var(--mono); }
.kkort__pris b { font-size: 20px; letter-spacing: -0.03em; }
.kkort__pris span { font-size: 11px; color: var(--text-2); }
.kkort:hover .kkort__rubrik { color: var(--volt-mork); }

/* ---------- betyg (recensionssajter) ---------- */
.betygslista { display: grid; gap: 1px; background: var(--linje-ljus); margin-block: 18px; }
.betyg { background: var(--papper); display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 14px 16px; }
.betyg__tal {
  font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -0.04em;
  display: grid; place-items: center; border-radius: 2px; color: var(--svart);
  background: var(--ram-neutral, var(--papper-2));
}
.betyg__tal.bra { background: var(--volt); }
.betyg__tal.ok { background: var(--gul); }
.betyg__tal.dalig { background: var(--rod); color: #fff; }
.betyg__namn { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.betyg__dom { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-2); text-transform: uppercase; margin-bottom: 8px; }
.betyg__del { display: grid; grid-template-columns: 110px 1fr 28px; gap: 10px; align-items: center; font-size: 12px; padding-block: 2px; }
.betyg__del span:first-child { color: var(--text-2); }
.betyg__stapel { display: block; height: 6px; background: var(--papper-2); border-radius: 999px; overflow: hidden; }
.betyg__stapel i { display: block; height: 100%; background: var(--volt-mork); }
.betyg__del b { font-family: var(--mono); font-size: 12px; text-align: right; }

/* ---------- annonser ---------- */
/* Egen bakgrund så annonsbandet aldrig kan förväxlas med redaktionellt innehåll.
   Det är ett lagkrav (marknadsföringslagen), inte en stilfråga. */
.annonsband { background: var(--papper-2); }
.annonsrutnat { display: grid; gap: 1px; background: var(--linje-ljus); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-block: 18px; }
.annons { background: var(--papper); padding: 14px 16px; display: grid; gap: 4px; border-left: 3px solid var(--gul); }
.annons__titel { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.annons__text { font-size: 12px; color: var(--text-2); }
.annons:hover .annons__titel { color: var(--volt-mork); }

/* ---------- frågor ---------- */
.fraga2 { border-bottom: 1px solid var(--linje-ljus); padding-block: 12px; }
.fraga2 summary {
  cursor: pointer; font-weight: 700; font-size: 14px; list-style: none;
  display: flex; justify-content: space-between; gap: 12px;
}
.fraga2 summary::-webkit-details-marker { display: none; }
.fraga2 summary::after { content: "+"; font-family: var(--mono); color: var(--volt-mork); }
.fraga2[open] summary::after { content: "−"; }
.fraga2 p { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }

@media (max-width: 640px) {
  .betyg { grid-template-columns: 64px 1fr; gap: 12px; }
  .betyg__tal { font-size: 22px; }
  .betyg__del { grid-template-columns: 84px 1fr 26px; }
}