/* ================================================================
   SCEN C — "DIARIET, DJUPARE"
   Scen B:s arkitektur (fast diarium + akter) men flikad: en akt i
   taget, så skrollen aldrig blir meterlång. Grafiskt tas svängarna
   ut — glas och skimmer i stället för platta fält, bärnsten i stället
   för brunt, och färglägena tonar mjukt i varandra vid flikbyte.

   ⛔ Fortfarande LÄTT: noll WebGL, noll shaders. Djupet kommer ur
   lagrade gradienter, backdrop-filter och två ljuskällor som vandrar.
   ================================================================ */

/* Animerbara färg-variabler — det är dessa som gör tema-övergången mjuk.
   Utan @property hoppar en CSS-variabel; med den interpolerar den. */
@property --t-bas   { syntax: '<color>'; inherits: true; initial-value: #faf7ee; }
@property --t-djup  { syntax: '<color>'; inherits: true; initial-value: #f5ecd6; }
@property --t-ljus1 { syntax: '<color>'; inherits: true; initial-value: #ffd281; }
@property --t-ljus2 { syntax: '<color>'; inherits: true; initial-value: #cdd4d0; }
@property --t-text  { syntax: '<color>'; inherits: true; initial-value: #2a2418; }
@property --t-mjuk  { syntax: '<color>'; inherits: true; initial-value: #6a5f48; }
@property --t-accent{ syntax: '<color>'; inherits: true; initial-value: #b07a1d; }
@property --t-kant  { syntax: '<color>'; inherits: true; initial-value: #e0d4b4; }
@property --t-glas  { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

body {
  --t-glas-alpha: .5;
  --skum: 0 30px 70px -46px rgba(67, 38, 0, .45);
  background: var(--t-bas);
  color: var(--t-text);
  transition: --t-bas 1.1s ease, --t-djup 1.1s ease, --t-ljus1 1.1s ease,
              --t-ljus2 1.1s ease, --t-text .8s ease, --t-mjuk .8s ease,
              --t-accent .8s ease, --t-kant .8s ease, --t-glas .8s ease,
              background-color 1.1s ease, color .8s ease;
}

/* ── FEM LÄGEN — tre ljusa med djup, två mörka. Varje läge bär mening ── */

/* KLARHET · beviset, dokumentet. Ljust papper, kall silverglöd */
body[data-tema="klarhet"] {
  --t-bas: #f7f2e6; --t-djup: #e8dcc2;
  --t-ljus1: #ffd68e; --t-ljus2: #c6cfca;
  --t-text: #241f14; --t-mjuk: #6a5f48;
  --t-accent: #a8731a; --t-kant: #e2d6b6; --t-glas: #fffdf7; --t-glas-alpha: .62;
}
/* SOL · överflödet, det öppna. Varm kräm, sol som stiger */
body[data-tema="sol"] {
  --t-bas: #f8efd9; --t-djup: #ecd9ae;
  --t-ljus1: #ffb43a; --t-ljus2: #cfd3a4;
  --t-text: #2a2012; --t-mjuk: #6d5c39;
  --t-accent: #b4720f; --t-kant: #e6d2a4; --t-glas: #fffaf0; --t-glas-alpha: .58;
}
/* BÄRNSTEN · historia, arkiv, det bevarade. Harts med ljus bakom */
body[data-tema="barnsten"] {
  --t-bas: #100a03; --t-djup: #060402;
  --t-ljus1: #f0a72e; --t-ljus2: #b06a10;
  --t-text: #f8eed9; --t-mjuk: #cdb48b;
  --t-accent: #f5bd63; --t-kant: #8a6220; --t-glas: #6b4310; --t-glas-alpha: .30;
}
/* SKOG · det slutna, det som bevaras. Djupgrönt med honung */
body[data-tema="skog"] {
  --t-bas: #0a150e; --t-djup: #050b07;
  --t-ljus1: #d8ab55; --t-ljus2: #4a7043;
  --t-text: #eef1e7; --t-mjuk: #a9b39c;
  --t-accent: #e0b869; --t-kant: #3d5c41; --t-glas: #1d3626; --t-glas-alpha: .36;
}
/* GLÖD · brytpunkten. Sparsamt — den bränner om den överanvänds */
body[data-tema="glod"] {
  --t-bas: #0e0803; --t-djup: #050201;
  --t-ljus1: #f4802a; --t-ljus2: #8a3b0d;
  --t-text: #f7e9d8; --t-mjuk: #c4a58a;
  --t-accent: #ffa33c; --t-kant: #6b3a17; --t-glas: #4a2109; --t-glas-alpha: .30;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--forest-dark); color: var(--cream); padding: 10px 16px; }

/* ── ATMOSFÄREN — två ljuskällor + korn. Bär mystiken utan GPU-kostnad ── */
.atmosfar { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ljus {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(96px); opacity: .62;
  transition: background 1.3s ease, opacity 1.1s ease;
}
/* Koncentrerat, inte utsmetat — ett ljus som tvättar hela ytan blir en gul
   flod i stället för glöd (bet 2026-07-30 på första c-renderingen). */
.ljus-1 {
  width: 46vw; height: 46vw; right: -8vw; top: -14vw;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--t-ljus1) 76%, transparent) 0%,
    color-mix(in srgb, var(--t-ljus1) 26%, transparent) 34%, transparent 66%);
}
.ljus-2 {
  width: 40vw; height: 40vw; left: -10vw; bottom: -16vw;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--t-ljus2) 58%, transparent) 0%,
    color-mix(in srgb, var(--t-ljus2) 16%, transparent) 40%, transparent 68%);
}
/* Vinjett: mörkare kanter ger rummet djup. Utan den ligger ytan platt. */
.atmosfar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 52% 34%, transparent 42%,
    color-mix(in srgb, var(--t-djup) 62%, transparent) 100%);
  transition: background 1.1s ease;
}
/* Kornet ger materialkänsla — utan det läser gradienterna som plast */
.korn {
  position: absolute; inset: -50%; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── RIGG ───────────────────────────────────────────────────── */
.rigg { position: relative; z-index: 1; display: grid; grid-template-columns: clamp(250px, 20vw, 316px) minmax(0, 1fr); }

/* ── DIARIET ────────────────────────────────────────────────── */
.diarie {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 30px; padding: 34px 26px 26px;
  /* ⛔ Diariet är ALLTID djupt, oavsett aktens läge. Följde det ytans tema
     försvann separationen som var hela styrkan i den valda scenen. Bara
     accentfärgen tonar med. */
  background:
    linear-gradient(178deg, #12231a 0%, #0a1610 62%, #060d09 100%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-ljus1) 9%, transparent));
  box-shadow: inset -22px 0 40px -34px #000;
  border-right: 1px solid color-mix(in srgb, var(--t-accent) 30%, transparent);
  color: #a9b39c; overflow-y: auto;
  transition: border-color .9s ease;
}
.diarie-brand { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.diarie-brand img { filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--t-ljus1) 40%, transparent)); }
.diarie-brand span { display: grid; }
.diarie-brand strong { font-family: var(--serif); font-size: 1.28rem; color: var(--t-text); font-weight: 600; letter-spacing: .005em; }
.diarie-brand small { font-family: var(--mono); font-size: .66rem; color: var(--t-accent); letter-spacing: .05em; }

.diarie-etikett {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--t-accent) 82%, transparent); margin: 0 0 14px;
}
.diarie-nav { display: grid; gap: 1px; }
.diarie-nav button {
  display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline;
  font: inherit; font-size: .96rem; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--t-mjuk); padding: 11px 10px 11px 0;
  transition: color .25s, background .25s, padding-left .25s;
}
.diarie-nav button i {
  font-family: var(--mono); font-style: normal; font-size: .68rem;
  color: color-mix(in srgb, var(--t-accent) 62%, transparent); letter-spacing: .07em;
}
.diarie-nav button:hover { color: var(--t-text); padding-left: 6px; }
.diarie-nav button.ar-vald {
  color: var(--t-text); font-weight: 500; padding-left: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--t-ljus1) 22%, transparent), transparent 82%);
  box-shadow: inset 2px 0 0 var(--t-accent);
}
.diarie-nav button.ar-vald i { color: var(--t-accent); }

.diarie-status dl { display: grid; grid-template-columns: 1fr auto; gap: 9px 10px; margin: 0; font-size: .82rem; }
.diarie-status dt { color: var(--t-mjuk); }
.diarie-status dd {
  margin: 0; text-align: right; line-height: 1;
  font-family: var(--serif); font-size: 1.1rem; color: var(--t-accent);
}
.diarie-fot { margin-top: auto; display: grid; gap: 5px; font-size: .82rem; }
.diarie-fot a { color: var(--t-accent); text-decoration: none; }
.diarie-fot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── YTAN + AKTERNA — mycket mer luft än scen B ─────────────── */
.yta { min-width: 0; }
.akt { padding: clamp(52px, 7vw, 116px) clamp(24px, 6vw, 112px) clamp(60px, 8vw, 130px); }
.akt-inner { max-width: 1080px; }
.akt-nr {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: color-mix(in srgb, var(--t-accent) 88%, transparent);
  margin: 0 0 20px;
}
.akt h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); letter-spacing: -.024em; line-height: 1.06; }
.akt h1 em { font-style: italic; }
.akt h2 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); letter-spacing: -.016em; }
.akt-lead {
  font-size: clamp(1.06rem, .6vw + .92rem, 1.28rem); max-width: 64ch;
  color: color-mix(in srgb, var(--t-text) 84%, var(--t-mjuk)); margin-top: 24px; line-height: 1.62;
}
.akt-slag {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.62rem); color: var(--t-accent);
  margin-top: 26px; letter-spacing: .002em;
}
.akt-not { font-size: .88rem; color: var(--t-mjuk); max-width: 74ch; margin-top: 34px; }
.liten-rubrik {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t-accent); font-weight: 600; margin: 0 0 14px;
}

/* ⭐ SKIMMER — KONSTANT flöde, aldrig en sekvens man missar.
   Bet 2026-07-30: en 1-sekunds glimt var 20:e sekund ser ingen. Nu ligger
   guldet alltid i rörelse genom texten: tre ljuszoner som vandrar utan
   paus, långsamt nog att aldrig bli en blinkande banner. */
/* ⛔ Svepets topp-färg måste bytas per läge. På kräm blir bärnsten 1,8:1 och
   rubriken tappar både tyngd och läsbarhet (bet 2026-07-30) — där sveper vi i
   mörkguld i stället, och smalare. På mörk botten får bärnstenen lysa fullt. */
.skimmer {
  /* ⛔ background-clip:text klipper stapelbokstäverna g, j, p, y i botten om
     raden inte har luft under baslinjen (bet 2026-07-30). padding + rymligare
     line-height löser det; ingen negativ marginal, den flyttar bara felet. */
  line-height: 1.16; padding-bottom: .12em;
  --sk-topp: color-mix(in srgb, var(--t-ljus1) 96%, var(--t-text));
  --sk-halv: color-mix(in srgb, var(--t-ljus1) 52%, var(--t-text));
  background: linear-gradient(96deg,
    var(--t-text) 0%,
    var(--sk-halv) 13%,
    var(--t-text) 24%,
    var(--t-text) 44%,
    var(--sk-topp) 52%,
    var(--sk-topp) 55%,
    var(--t-text) 68%,
    var(--sk-halv) 87%,
    var(--t-text) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: skimra 11s linear infinite;
}
@keyframes skimra {
  from { background-position: 300% 0; }
  to   { background-position: 0% 0; }
}
/* ljusa lägen: mörkguld-svep, aldrig bärnsten */
body[data-tema="klarhet"] .skimmer,
body[data-tema="sol"] .skimmer {
  /* ⛔ background-clip:text klipper stapelbokstäverna g, j, p, y i botten om
     raden inte har luft under baslinjen (bet 2026-07-30). padding + rymligare
     line-height löser det; ingen negativ marginal, den flyttar bara felet. */
  line-height: 1.16; padding-bottom: .12em;
  --sk-topp: color-mix(in srgb, var(--t-accent) 72%, var(--t-text));
  --sk-halv: color-mix(in srgb, var(--t-accent) 26%, var(--t-text));
}

/* PULS — samma andning på det som inte är text, så ytan lever överallt.
   Tre olika perioder så ingenting hamnar i takt med något annat. */
@keyframes puls-glod {
  0%, 100% { opacity: .58; }
  50%      { opacity: 1; }
}
@keyframes puls-kant {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-ljus1) 0%, transparent); }
  50%      { box-shadow: 0 0 22px -6px color-mix(in srgb, var(--t-ljus1) 46%, transparent); }
}
@keyframes svep {
  from { transform: translateX(-118%); }
  to   { transform: translateX(118%); }
}
.akt-nr { animation: puls-glod 7.5s ease-in-out infinite; }
.akt-slag { animation: puls-glod 9.5s ease-in-out infinite; }
.summa-tal, .kanal-stallning b { animation: puls-glod 6.5s ease-in-out infinite; }
.diarie .diarie-nav button.ar-vald { animation: puls-kant 5.5s ease-in-out infinite; }
.diarie-brand img { animation: puls-glod 13s ease-in-out infinite; }

/* Ett ljusstråk sveper genom glaskanten — långsamt, en gång per 9 s per panel,
   men förskjutet per panel så ytan alltid har någon i rörelse. */
.glas { overflow: hidden; }
.glas .svep, .grupp-huvud::after { pointer-events: none; }
.glas::before { animation: puls-glod 8s ease-in-out infinite; }
.loft:nth-child(1), .grans-kort:nth-child(1), .niva:nth-child(1) { --svep-drojd: 0s; }
.loft:nth-child(2), .grans-kort:nth-child(2), .niva:nth-child(2) { --svep-drojd: 3s; }
.loft:nth-child(3), .niva:nth-child(3) { --svep-drojd: 6s; }
.loft, .grans-kort, .niva, .kanal, .grupp, .stycke-glas {
  position: relative;
}
.loft::after, .grans-kort::after, .niva::after, .kanal::after {
  animation: svep 9s cubic-bezier(.4,.1,.6,.9) infinite var(--svep-drojd, 1.5s);
  opacity: .5;
}

/* ── GLAS — ljus genom material, aldrig platt fyllning ──────── */
.glas {
  position: relative; border-radius: 4px; isolation: isolate;
  background:
    /* transmission: ljus som kommer igenom materialet, starkast där ljuskällan är */
    radial-gradient(120% 90% at 12% 0%,
      color-mix(in srgb, var(--t-ljus1) 16%, transparent) 0%, transparent 62%),
    linear-gradient(152deg,
      color-mix(in srgb, var(--t-glas) calc(var(--t-glas-alpha) * 100%), transparent),
      color-mix(in srgb, var(--t-glas) calc(var(--t-glas-alpha) * 40%), transparent) 58%,
      color-mix(in srgb, var(--t-djup) 34%, transparent));
  backdrop-filter: blur(14px) saturate(1.24);
  border: 1px solid color-mix(in srgb, var(--t-kant) 74%, transparent);
  box-shadow: var(--skum),
              inset 0 1px 0 color-mix(in srgb, var(--t-ljus1) 34%, transparent),
              inset 0 0 42px -18px color-mix(in srgb, var(--t-ljus1) 52%, transparent);
  transition: background 1.1s ease, border-color .9s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
/* Ljusbrytning som ligger KVAR — en glasskiva bryter ljus även i vila.
   Den förstärks bara vid hover. */
.glas::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 30%,
    color-mix(in srgb, var(--t-ljus1) 20%, transparent) 46%,
    color-mix(in srgb, #fff 8%, transparent) 50%, transparent 64%);
  opacity: .34; transition: opacity .6s ease;
}
.glas:hover::after { opacity: .9; }
/* På ljus botten blir samma brytning en gul dis — dämpa den där. */
body[data-tema="klarhet"] .glas::after,
body[data-tema="sol"] .glas::after { opacity: .16; }
body[data-tema="klarhet"] .glas:hover::after,
body[data-tema="sol"] .glas:hover::after { opacity: .42; }
body[data-tema="klarhet"] .glas::before,
body[data-tema="sol"] .glas::before { opacity: .5; }
/* och en hårfin ljus kant längs överkanten, som på slipat glas */
.glas::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--t-ljus1) 62%, transparent) 22%,
    color-mix(in srgb, #fff 46%, transparent) 50%,
    color-mix(in srgb, var(--t-ljus1) 40%, transparent) 78%, transparent);
  opacity: .7; pointer-events: none;
}

/* ── I · INGÅNGEN ───────────────────────────────────────────── */
.akt-ingang h1 { max-width: 22ch; }
.loften { list-style: none; margin: clamp(40px, 5vw, 70px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr)); gap: 16px; }
.loft { padding: 26px 24px 24px; }
.loft-nr { font-family: var(--mono); font-size: .7rem; color: var(--t-accent); letter-spacing: .12em; }
.loft h3 { font-size: 1.22rem; margin: 10px 0 10px; color: var(--t-text); }
.loft p { font-size: .95rem; color: var(--t-mjuk); margin: 0; }
.ingang-fot {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 62px); align-items: start; margin-top: clamp(44px, 5vw, 78px);
}
.titelblad {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; margin: 0;
  padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--t-kant) 70%, transparent); font-size: .89rem;
}
.titelblad dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-mjuk); padding-top: 3px;
}
.titelblad dd { margin: 0; color: var(--t-text); }
.inlaga {
  margin: 0; padding: 12px 12px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--t-glas) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-kant) 70%, transparent);
  box-shadow: var(--skum);
}
.inlaga img { width: 100%; height: auto; aspect-ratio: 2048 / 1152; border-radius: 2px; }
.inlaga figcaption { font-size: .74rem; color: var(--t-mjuk); margin-top: 9px; }

/* ── II · LIGGAREN ──────────────────────────────────────────── */
.liggare-topp {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between;
  margin: clamp(32px, 4vw, 54px) 0 22px;
}
.liggare-summa { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.summa-tal { font-family: var(--serif); font-size: 2.15rem; color: var(--t-accent); line-height: 1; }
.summa-txt { font-size: .8rem; color: var(--t-mjuk); margin-right: 18px; }
.liggare-filter { display: flex; gap: 8px; }
.liggare-filter button {
  font: inherit; font-size: .78rem; letter-spacing: .05em; cursor: pointer; padding: 7px 15px;
  background: color-mix(in srgb, var(--t-glas) 40%, transparent); color: var(--t-mjuk);
  border: 1px solid color-mix(in srgb, var(--t-kant) 70%, transparent); border-radius: 999px;
  backdrop-filter: blur(8px); transition: all .25s;
}
.liggare-filter button:hover { color: var(--t-text); border-color: var(--t-accent); }
.liggare-filter button.ar-vald {
  background: color-mix(in srgb, var(--t-ljus1) 82%, transparent);
  border-color: transparent; color: #23180a; font-weight: 500;
}
.liggare { list-style: none; margin: 0; padding: 0; }
.arende { border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent); }
.arende.ar-dold { display: none; }
.arende[data-internt] { outline: 1px dashed var(--ember); outline-offset: -2px; }
.arende-huvud {
  width: 100%; display: grid; align-items: center; gap: 16px;
  grid-template-columns: 3rem minmax(0, 1fr) 8.4rem 6rem 1rem;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font: inherit; text-align: left; padding: 18px 6px; border-radius: 3px;
  transition: background .22s;
}
.arende-huvud:hover { background: color-mix(in srgb, var(--t-ljus1) 10%, transparent); }
.arende-nr { font-family: var(--mono); font-size: .78rem; color: var(--t-accent); }
.arende-namn { font-family: var(--serif); font-size: clamp(1.04rem, 1.2vw, 1.24rem); color: var(--t-text); }
.arende-status {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; justify-self: start;
  border: 1px solid currentColor;
}
.st-vantar { color: var(--t-mjuk); }
.st-dialog { color: color-mix(in srgb, var(--t-ljus1) 86%, var(--t-text)); }
.st-del    { color: var(--ember); }
.st-klar   { color: var(--moss-green); }
.arende-datum { font-family: var(--mono); font-size: .74rem; color: var(--t-mjuk); }
.arende-pil {
  justify-self: end; width: 8px; height: 8px; transform: rotate(45deg);
  border-right: 1.5px solid var(--t-accent); border-bottom: 1.5px solid var(--t-accent);
  transition: transform .3s;
}
[aria-expanded="true"] .arende-pil { transform: rotate(225deg); }
.arende-kropp {
  padding: 18px 26px 26px; margin: 0 6px 10px; border-radius: 4px;
  background: color-mix(in srgb, var(--t-glas) 34%, transparent);
  border-left: 2px solid var(--t-accent);
  backdrop-filter: blur(8px);
}
.arende-fraga {
  font-family: var(--serif); font-size: clamp(1.08rem, 1.3vw, 1.34rem);
  max-width: 56ch; line-height: 1.44; color: var(--t-text); margin-top: 0;
}
.arende-rader { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr)); gap: 26px; margin-top: 18px; }
.arende-rader h4 {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-accent); margin-bottom: 8px; font-weight: 600;
}
.arende-rader p { font-size: .93rem; color: var(--t-mjuk); margin: 0 0 .5em; }
.arende-nasta { color: color-mix(in srgb, var(--t-text) 72%, var(--t-mjuk)) !important; }
.arende-fynd {
  margin-top: 22px; padding: 18px 22px; border-radius: 3px;
  background: color-mix(in srgb, var(--t-ljus1) 12%, transparent);
  border-left: 2px solid var(--t-ljus1);
}
.arende-fynd h4 {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-accent); margin-bottom: 8px; font-weight: 600;
}
.arende-fynd p { margin: 0; font-size: .94rem; color: var(--t-text); }
.visa-fler {
  font: inherit; font-size: .84rem; letter-spacing: .04em; cursor: pointer;
  margin-top: 20px; padding: 11px 22px; border-radius: 999px;
  background: transparent; color: var(--t-accent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 50%, transparent);
  transition: background .25s, color .25s;
}
.visa-fler:hover { background: color-mix(in srgb, var(--t-ljus1) 16%, transparent); }
.akt-fot { margin-top: 34px; }
.akt-fot summary {
  cursor: pointer; color: var(--t-accent); font-size: .88rem; padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--t-kant) 60%, transparent);
}
.akt-fot ul { font-size: .92rem; color: var(--t-mjuk); max-width: 78ch; padding-left: 1.2em; }
.akt-fot li { margin-bottom: .6em; }

/* ── III · ÄNDAMÅLET ────────────────────────────────────────── */
.stadgecitat { margin: clamp(30px, 4vw, 50px) 0 0; padding: 32px 38px; max-width: 76ch; }
.stadgecitat p {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.16rem, 1.5vw, 1.54rem);
  line-height: 1.5; color: var(--t-text); margin: 0 0 12px;
}
.stadgecitat cite {
  font-style: normal; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent);
}
.varden {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 256px), 1fr));
  gap: 26px 36px; margin: clamp(36px, 4vw, 58px) 0 0;
}
.vard dt { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 6px; color: var(--t-text); }
.vard dd { margin: 0; font-size: .93rem; color: var(--t-mjuk); }

/* ── IV · DET VI DELAR ──────────────────────────────────────── */
.kanaler { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(30px, 3.5vw, 48px) 0 0; }
.kanal {
  display: grid; gap: 4px; text-decoration: none; padding: 17px 22px; min-width: 252px;
}
.kanal:hover { transform: translateY(-2px); }
.kanal strong { font-family: var(--serif); font-size: 1.1rem; color: var(--t-text); }
.kanal span { font-size: .87rem; color: var(--t-mjuk); }
.grupper { display: grid; gap: 12px; margin-top: clamp(30px, 3.5vw, 46px); }
.grupp { overflow: hidden; }
.grupp-huvud {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem;
  gap: 18px; align-items: center; text-align: left;
  font: inherit; background: transparent; border: 0; cursor: pointer;
  color: inherit; padding: 20px 24px;
}
.grupp-namn { font-family: var(--serif); font-size: clamp(1.14rem, 1.4vw, 1.36rem); color: var(--t-text); }
.grupp-tal { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; color: var(--t-accent); }
.grupp-kropp { padding: 0 24px 22px; }
.grupp-vad { font-size: .93rem; color: var(--t-mjuk); max-width: 72ch; margin: 0 0 16px; }
.serier { list-style: none; margin: 0; padding: 0; }
.serie {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: 16px;
  align-items: baseline; padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--t-kant) 42%, transparent);
}
.serie-id { font-family: var(--mono); font-size: .74rem; color: var(--t-accent); }
.serie-titel { font-family: var(--serif); font-size: 1.04rem; color: var(--t-text); }
.serie-titel em {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: .85rem; color: var(--t-mjuk); margin-top: 3px; max-width: 62ch;
}
.serie-meta { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; }
.serie-avsnitt { font-family: var(--mono); font-size: .68rem; color: var(--t-mjuk); }

/* ── En serie med publicerade avsnitt fälls ut till sin egen lista ──────
   ⛔ Sajten hade 25 publika avsnitt på YouTube och länkade inte ett enda
   (Ulrika Lundby 7 aug: "det går inte att klicka sig in på dem"). Talet är
   publicerade/planerade och inget mer — status upprepas inte i ord bredvid
   ett tal som redan säger det. */
.serie-fallbar { display: block; padding: 0; }
.serie-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.serie-huvud {
  width: 100%; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto 1rem;
  gap: 16px; align-items: baseline; text-align: left;
  font: inherit; color: inherit; background: transparent; border: 0;
  cursor: pointer; padding: 12px 0;
}
.serie-huvud .arende-pil { align-self: center; }
.serie-kvot { color: var(--t-ljus1); letter-spacing: .04em; }

/* Spellistelänken lämnar sajten — därför egen yta bredvid knappen, aldrig inuti den */
.serie-spellista {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-mjuk);
  border: 1px solid color-mix(in srgb, var(--t-kant) 60%, transparent);
  background: color-mix(in srgb, var(--t-glas) 45%, transparent);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.serie-spellista:hover, .serie-spellista:focus-visible {
  color: var(--t-ljus1);
  border-color: color-mix(in srgb, var(--t-accent) 55%, transparent);
  background: color-mix(in srgb, var(--t-accent) 11%, transparent);
}
.serie-spellista .yt-marke { width: 17px; height: auto; }

.serie-kropp { padding: 2px 0 14px 4.4rem; }
.avsnitt {
  display: grid; grid-template-columns: 88px 2.2rem minmax(0, 1fr); gap: 13px;
  align-items: center; padding: 6px 8px 6px 0; text-decoration: none;
  border-radius: 8px; color: inherit;
}
.avsnitt:hover, .avsnitt:focus-visible {
  background: color-mix(in srgb, var(--t-accent) 9%, transparent);
}
.avsnitt:hover .avsnitt-titel { color: var(--t-ljus1); }
.avsnitt:hover .avsnitt-omslag { border-color: color-mix(in srgb, var(--t-accent) 55%, transparent); }
.avsnitt-nr { font-family: var(--mono); font-size: .68rem; color: var(--t-accent); }
.avsnitt-titel { font-family: var(--serif); font-size: .97rem; color: var(--t-text); }
.avsnitt-omslag {
  width: 88px; height: 50px; object-fit: cover; border-radius: 5px; display: block;
  border: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
  transition: border-color .2s ease;
}
.avsnitt-lista { list-style: none; margin: 0; padding: 0; }

/* ── V · MEDLEMSKAPET ───────────────────────────────────────── */
.nivaer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  gap: 18px; margin: clamp(32px, 4vw, 52px) 0 0; align-items: stretch;
}
.niva { padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 13px; height: 100%; }
.niva:hover { transform: translateY(-3px); }
.niva-rost { border-color: color-mix(in srgb, var(--t-ljus1) 58%, transparent); }
.niva h3 { font-size: 1.3rem; color: var(--t-text); }
.niva-pris { font-family: var(--serif); font-size: 2.1rem; color: var(--t-accent); margin: 0; line-height: 1; }
.niva-pris small { font-family: var(--mono); font-size: .68rem; color: var(--t-mjuk); margin-left: 8px; }
.niva-rostratt { font-family: var(--mono); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--t-mjuk); margin: 0; }
.prickar { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.prickar li { font-size: .92rem; color: var(--t-mjuk); padding-left: 15px; position: relative; }
.prickar li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: color-mix(in srgb, var(--t-accent) 78%, transparent);
}
.niva-not {
  font-size: .89rem; font-style: italic; color: color-mix(in srgb, var(--t-text) 78%, var(--t-mjuk));
  border-top: 1px solid color-mix(in srgb, var(--t-kant) 60%, transparent); padding-top: 13px; margin: 0;
}
.niva-qr { margin: auto 0 0; padding-top: 6px; display: grid; gap: 6px; justify-items: start; }
.niva-qr img { width: 108px; height: 108px; background: #fff; padding: 6px; border-radius: 3px; }
.niva-qr figcaption { font-family: var(--mono); font-size: .62rem; color: var(--t-mjuk); }
.medlem-fot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr));
  gap: 16px; margin-top: 22px;
}
.medlem-betal, .medlem-gemenskap { padding: 24px 26px; }
.medlem-betal p, .medlem-gemenskap p { font-size: .92rem; color: var(--t-mjuk); margin: 0 0 12px; }
.lank-ut {
  display: inline-block; font-size: .9rem; color: var(--t-accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 45%, transparent); padding-bottom: 2px;
}
.lank-ut:hover { border-bottom-color: var(--t-accent); }

/* ── VI · VITTNESMÅLET ──────────────────────────────────────── */
.vittne-rader {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 3.5vw, 54px); margin-top: clamp(30px, 4vw, 48px); align-items: start;
}
.tips-form { padding: 28px 26px; display: grid; gap: 20px; }
.tips-status { font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--t-ljus1); margin: 0; }
.falt { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.falt > span:first-child, .falt legend {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--t-accent); padding: 0;
}
.tips-form textarea {
  font: inherit; font-size: .95rem; resize: vertical; padding: 12px 14px; border-radius: 3px;
  background: color-mix(in srgb, var(--t-djup) 62%, transparent); color: var(--t-text);
  border: 1px solid color-mix(in srgb, var(--t-kant) 78%, transparent);
}
.tips-form textarea:focus { border-color: var(--t-ljus1); }
.raknare { font-family: var(--mono); font-size: .72rem; color: var(--t-mjuk); justify-self: end; }
.raknare-nara { color: var(--ember); }
.val { display: flex; flex-wrap: wrap; gap: 9px 16px; }
.val-kolumn { flex-direction: column; }
.val label { display: flex; gap: 9px; align-items: center; font-size: .92rem; color: var(--t-mjuk); cursor: pointer; }
.val input { accent-color: var(--t-ljus1); }
.val-stark { color: var(--t-ljus1) !important; }
.knapp-glod {
  font: inherit; font-size: .86rem; padding: 13px 20px; border-radius: 3px; cursor: not-allowed;
  background: transparent; color: var(--t-ljus1);
  border: 1px solid color-mix(in srgb, var(--t-ljus1) 46%, transparent);
}
.vittne-sida { display: grid; gap: 20px; padding-top: 6px; }
.tips-langre { font-size: .96rem; color: var(--t-ljus1); margin: 0; }
.tips-grans {
  font-size: .88rem; color: var(--t-mjuk); margin: 0; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
}

/* ── VII · HANDLINGARNA ─────────────────────────────────────── */
.handlingar {
  list-style: none; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 274px), 1fr)); gap: 14px;
}
.handling a, .handling span {
  display: grid; gap: 5px; height: 100%; text-decoration: none; padding: 18px 20px; border-radius: 4px;
  background: color-mix(in srgb, var(--t-glas) calc(var(--t-glas-alpha) * 78%), transparent);
  border: 1px solid color-mix(in srgb, var(--t-kant) 68%, transparent);
  backdrop-filter: blur(8px); transition: transform .4s ease, border-color .3s;
}
.handling a:hover { transform: translateY(-2px); border-color: var(--t-accent); }
.handling-typ { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent); }
.handling-titel { font-family: var(--serif); font-size: 1.02rem; color: var(--t-text); }
.handling-meta { font-size: .78rem; color: var(--t-mjuk); }
.handling-vantar span { border-style: dashed; background: transparent; }
.mk-last, .mk-internt { margin-top: 34px; padding: 24px 26px; }
.mk-last p { font-size: .92rem; color: var(--t-mjuk); max-width: 72ch; }
.mk-antal { font-family: var(--mono); font-size: .74rem; color: var(--t-accent) !important; margin: 0 !important; }
.mk-flagga { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ember); }
.mk-grindtext { font-size: .9rem; color: var(--t-mjuk); max-width: 76ch; }
.mk-galleri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 16px; }
.mk-galleri figure { margin: 0; }
.mk-galleri img { border-radius: 3px; }
.mk-galleri figcaption { font-size: .76rem; color: var(--t-mjuk); margin-top: 6px; }
.mk-galleri figcaption span { font-family: var(--mono); font-size: .66rem; color: var(--t-accent); margin-right: 7px; }

/* ── VIII · DIN INGÅNG ──────────────────────────────────────── */
.portal-rader {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px; margin: clamp(30px, 4vw, 48px) 0 16px;
}
.portal-rader .glas { padding: 26px 26px 24px; }
.portal-inlogg { padding: 26px 26px 24px; }
.portal-inlogg p { font-size: .95rem; color: var(--t-mjuk); max-width: 72ch; }
.app { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 20px 0 0; font-size: .88rem; }
.app dt {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-accent); padding-top: 3px;
}
.app dd { margin: 0; color: var(--t-mjuk); }

/* ── FOT ────────────────────────────────────────────────────── */
.yta-fot {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 30px; align-items: start;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 6vw, 112px) 40px;
  border-top: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
}
.yta-fot img { opacity: .9; }
.fot-data { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: .84rem; }
.fot-data dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--t-accent); padding-top: 2px;
}
.fot-data dd { margin: 0; color: var(--t-mjuk); }

/* ── MOBIL — diariet blir panel, som i scen B ─────────────────
   ⛔ LÄXA 2026-07-30 (operatören på mobil under mötet): meny-ingången låg
   som en pill i NEDERKANTEN (`bottom:16px`). Playwright såg den, handen
   gjorde det inte — mobilens egen verktygsrad ligger exakt där, och en
   knapp som heter "Innehåll" är inte det ögat letar efter. Ingången bor
   nu i toppen, som en hamburgare, där varje annan sajt har den. */
.mobil-topp, .diarie-sloja { display: none; }
@media (max-width: 960px) {
  .rigg { grid-template-columns: 1fr; }
  .diarie {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 60;
    transform: translateX(-102%); transition: transform .34s cubic-bezier(.3,.85,.3,1);
    box-shadow: 26px 0 60px -30px rgba(0,0,0,.55);
    /* Panelen börjar under topp-baren — annars klipps dess logga och org.nr
       av baren och raden ser trasig ut i stället för lagrad. */
    padding-top: calc(84px + env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .diarie.ar-oppen { transform: none; }

  /* Topp-baren följer temat i alla fem lägen — samma variabler som ytan */
  .mobil-topp {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 62;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: color-mix(in srgb, var(--t-bas) 82%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 22%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    transition: background .8s ease, border-color .8s ease;
  }
  .mt-brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--t-text); min-width: 0;
  }
  .mt-brand img { border-radius: 7px; flex: none; }
  .mt-brand span {
    font-family: var(--serif, inherit); font-size: 1.02rem; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mt-brand small { color: var(--t-mjuk); font-size: .78rem; letter-spacing: .02em; }

  /* Hamburgaren: tre streck som fälls till ett kryss när panelen är öppen */
  .diarie-knapp {
    display: grid; place-items: center; flex: none; cursor: pointer;
    width: 46px; height: 46px; padding: 0; border-radius: 13px;
    background: color-mix(in srgb, var(--t-glas) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--t-accent) 45%, transparent);
    box-shadow: 0 8px 20px -14px rgba(0,0,0,.5);
    transition: background .25s ease, border-color .25s ease;
  }
  .diarie-knapp .strecken { display: block; width: 21px; height: 15px; position: relative; }
  .diarie-knapp .strecken i {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: var(--t-accent);
    transition: transform .28s cubic-bezier(.3,.85,.3,1), opacity .18s ease, background .8s ease;
  }
  .diarie-knapp .strecken i:nth-child(1) { top: 0; }
  .diarie-knapp .strecken i:nth-child(2) { top: 50%; margin-top: -1px; }
  .diarie-knapp .strecken i:nth-child(3) { bottom: 0; }
  .diarie-knapp[aria-expanded="true"] .strecken i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .diarie-knapp[aria-expanded="true"] .strecken i:nth-child(2) { opacity: 0; }
  .diarie-knapp[aria-expanded="true"] .strecken i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .diarie-knapp[aria-expanded="true"] { background: color-mix(in srgb, var(--t-accent) 16%, transparent); }

  /* Slöjan: ytan bakom panelen dämpas och ett tryck var som helst stänger.
     ⛔⛔ TVÅ SPÄRRAR, OCH BÅDA BEHÖVS (bet 2026-07-30, kostade en död sida):
     `display:block` här SLÅR UT `hidden`-attributet — webbläsarens egen
     `[hidden]{display:none}` har lägre specificitet än en klass-regel. Slöjan
     låg alltså kvar osynlig över HELA sidan och åt varje tryck: inga fält gick
     att markera, inget tangentbord kom fram. `pointer-events` är andra
     spärren, så ett tappat attribut aldrig kan döda ytan igen. */
  .diarie-sloja {
    display: block; position: fixed; inset: 0; z-index: 59;
    background: rgba(12, 10, 6, .46); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .diarie-sloja[hidden] { display: none; }
  .diarie-sloja.ar-synlig { opacity: 1; pointer-events: auto; }
  .ingang-fot, .vittne-rader { grid-template-columns: 1fr; }
  .arende-huvud { grid-template-columns: 2.4rem minmax(0, 1fr) 1rem; row-gap: 6px; }
  .arende-status, .arende-datum { grid-column: 2; }
  .arende-kropp { padding: 16px 18px 20px; margin-inline: 0; }
  .serie { grid-template-columns: 3.8rem minmax(0, 1fr); row-gap: 6px; }
  .serie-huvud { grid-template-columns: 3.8rem minmax(0, 1fr) 1rem; row-gap: 6px; }
  .serie-huvud .serie-meta { grid-column: 2 / -1; }
  .serie-rad { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .serie-spellista { justify-self: start; margin: 0 0 10px; }
  .serie-kropp { padding-left: 0; }
  .avsnitt { grid-template-columns: 68px 1.9rem minmax(0, 1fr); gap: 10px; }
  .avsnitt-omslag { width: 68px; height: 38px; }
  .serie-meta { grid-column: 2; }
  /* Grupprubriken får aldrig radbrytas runt sitt tal (bet 2026-07-30 på mobil) */
  .grupp-huvud { grid-template-columns: minmax(0, 1fr) 1rem; row-gap: 5px; padding: 17px 20px; }
  .grupp-tal { grid-column: 1; }
  .grupp-kropp { padding: 0 20px 18px; }
  .yta-fot { padding-bottom: 42px; }
  .akt h1 { font-size: clamp(2.1rem, 8.4vw, 3rem); }
}

/* ── DIARIETS EGNA FÄRGER — sist och med .diarie-prefix, annars vinner
   de generella tema-reglerna och aktiv flik blir mörk text på mörk yta
   (bet 2026-07-30: "Ingången" var oläslig i klarhet-läget). ───────── */
.diarie .diarie-brand strong { color: #f2ece0; }
.diarie .diarie-brand small  { color: color-mix(in srgb, var(--t-ljus1) 88%, #d8b46a); }
.diarie .diarie-etikett      { color: color-mix(in srgb, var(--t-ljus1) 76%, #c9a45e); }
.diarie .diarie-nav button              { color: #aab48f; }
.diarie .diarie-nav button i            { color: #7d8a6a; }
.diarie .diarie-nav button:hover        { color: #f2ece0; }
.diarie .diarie-nav button.ar-vald      { color: #fff9ec; }
.diarie .diarie-nav button.ar-vald i    { color: var(--t-ljus1); }
.diarie .diarie-nav button.ar-vald {
  background: linear-gradient(90deg, color-mix(in srgb, var(--t-ljus1) 26%, transparent), transparent 84%);
  box-shadow: inset 2px 0 0 var(--t-ljus1);
}
.diarie .diarie-status dt { color: #93a07c; }
.diarie .diarie-status dd { color: color-mix(in srgb, var(--t-ljus1) 92%, #e6c079); }
.diarie .diarie-fot a     { color: color-mix(in srgb, var(--t-ljus1) 84%, #dab86d); }


/* ── AKT II · RÄTTEN — tung text, luftigt satt ────────────────── */
.stycken {
  display: grid; gap: clamp(26px, 3vw, 40px);
  margin: clamp(34px, 4vw, 56px) 0 0;
  max-width: 74ch;
}
.stycke { position: relative; padding-left: 26px; }
.stycke::before {
  content: ''; position: absolute; left: 0; top: .5em; bottom: .3em; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t-ljus1) 74%, transparent),
    color-mix(in srgb, var(--t-accent) 24%, transparent) 60%, transparent);
}
.stycke h3 {
  font-family: var(--serif); font-size: clamp(1.16rem, 1.5vw, 1.42rem);
  color: var(--t-text); margin-bottom: 10px;
}
.stycke p { font-size: 1rem; line-height: 1.68; color: color-mix(in srgb, var(--t-text) 82%, var(--t-mjuk)); margin: 0; }
.stjarna { color: var(--t-ljus1); font-weight: 400; }
.kanalen { margin-top: clamp(34px, 4vw, 54px); padding: 28px 30px; max-width: 76ch; }
.kanalen p { font-size: .96rem; color: var(--t-mjuk); margin: 0 0 16px; }
.kanal-stallning { display: flex; flex-wrap: wrap; gap: 26px; margin: 4px 0 16px; }
.kanal-stallning span { font-size: .84rem; color: var(--t-mjuk); }
.kanal-stallning b {
  font-family: var(--serif); font-size: 1.7rem; color: var(--t-accent);
  font-weight: 600; margin-right: 7px; line-height: 1;
}
.kanal-not {
  font-size: .9rem !important; font-style: italic;
  color: color-mix(in srgb, var(--t-text) 74%, var(--t-mjuk)) !important;
  padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
}
.kanal-internt { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--ember); }

/* ── AKT VIII · gränsen öppet ↔ inloggat ─────────────────────── */
.grans-kort { padding: 26px 26px 24px; }
.grans-etikett {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--t-mjuk); margin: 0 0 10px;
}
.grans-inne .grans-etikett { color: var(--t-accent); }
.grans-inne { border-color: color-mix(in srgb, var(--t-ljus1) 52%, transparent); }
.tips-lagring { font-size: .84rem; color: var(--t-mjuk); margin: 0; }

.serie-inspelat {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em;
  color: var(--t-ljus1); animation: puls-glod 6s ease-in-out infinite;
}

/* ══════════ AKT I — bilden hel, aldrig beskuren ══════════
   ⛔ Kollaget tål ingen crop: object-fit cover kapade först loggan i sidled
   och sedan rutornas över- och underkant. Bilden ligger nu i sitt eget
   bildförhållande — uppe till höger på bred skärm, överst på mobil. */
.akt-ingang-yta { padding-top: clamp(40px, 5vw, 84px); }
.ingang-topp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.ingang-ord { min-width: 0; }
.banner {
  margin: 0; position: relative; padding: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--t-glas) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-kant) 62%, transparent);
  box-shadow: var(--skum);
}
.banner img {
  width: 100%; height: auto; aspect-ratio: 2048 / 1152;
  display: block; border-radius: 3px;
}
/* ett svagt guldskimmer över glaset, samma familj som rubrikernas */
.banner::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%,
    color-mix(in srgb, var(--t-ljus1) 16%, transparent) 48%, transparent 62%);
  animation: puls-glod 12s ease-in-out infinite;
}
.akt-ingang h1 { max-width: 14ch; }

/* ── OMPRÖVNINGEN — sidans hjärta, får luft ─────────────────── */
.omprovning {
  margin: clamp(40px, 5vw, 74px) 0 0;
  padding: clamp(28px, 3vw, 44px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
  max-width: 70ch;
}
.omprovning .akt-slag {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem); margin: 0 0 22px;
  font-family: var(--serif); font-style: italic;
}
.omprovning-ingress {
  font-size: clamp(1rem, .5vw + .88rem, 1.14rem); line-height: 1.7;
  color: color-mix(in srgb, var(--t-text) 84%, var(--t-mjuk)); margin: 0 0 26px;
}
.omprovning-rader { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.omprovning-rader li {
  position: relative; padding-left: 22px;
  font-family: var(--serif); font-size: clamp(1.02rem, 1.1vw, 1.16rem);
  color: var(--t-text); line-height: 1.5;
}
.omprovning-rader li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 9px; height: 1px;
  background: color-mix(in srgb, var(--t-accent) 82%, transparent);
}
.omprovning-rader li:nth-child(odd)::before  { animation: puls-glod 7s ease-in-out infinite; }
.omprovning-rader li:nth-child(even)::before { animation: puls-glod 9s ease-in-out infinite; }
.omprovning-avslut {
  font-size: .96rem; font-style: italic;
  color: color-mix(in srgb, var(--t-text) 70%, var(--t-mjuk)); margin: 0; max-width: 58ch;
}
.akt-ingang .loften { margin-top: clamp(38px, 4.5vw, 66px); }
.akt-ingang .titelblad { margin-top: clamp(38px, 4.5vw, 62px); }

/* ── YouTube-märket i guld ──────────────────────────────────── */
.kanal-topp { display: flex; align-items: center; gap: 11px; }
.yt-marke { width: 26px; height: auto; flex: none; fill: var(--t-ljus1); }
.yt-marke .yt-pil { fill: var(--t-djup); }
.kanal-vad { font-size: .87rem; color: var(--t-mjuk); display: block; margin-top: 6px; }
.kanal:hover .yt-marke { fill: var(--t-accent); }

@media (max-width: 960px) {
  /* mobil: bilden först, hel, som sidans första intryck */
  .ingang-topp { grid-template-columns: 1fr; gap: 26px; }
  .banner { order: -1; }
  .akt-ingang h1 { max-width: none; }
}


/* ── EiF-STÄMPELN — 706×936, alltså stående. Aldrig tvingad till kvadrat
   (bet 2026-07-30: renderades 44×44 och blev tillplattad). Höjden styr,
   bredden följer, och källan är hög nog för skärpa på 2× skärm. ── */
.eif-stampel {
  height: clamp(64px, 6vw, 92px); width: auto; display: block;
  filter: drop-shadow(0 3px 14px color-mix(in srgb, var(--t-ljus1) 34%, transparent));
  animation: puls-glod 11s ease-in-out infinite;
}
.yta-fot { align-items: center; }

/* Obelagda påståenden ska SYNAS i bygget — aldrig kunna slinka ut publikt */
.vantar {
  background: color-mix(in srgb, var(--ember) 22%, transparent);
  color: var(--t-text); padding: 1px 7px; border-radius: 3px;
  font-family: var(--mono); font-size: .74em; letter-spacing: .03em;
  border: 1px dashed color-mix(in srgb, var(--ember) 62%, transparent);
}
.ratten-fotnot {
  font-size: .82rem !important; font-style: italic; margin: 14px 0 0 !important;
  color: color-mix(in srgb, var(--t-text) 62%, var(--t-mjuk)) !important;
}


/* Stämpeln finns i två versioner — guldgradient och grön duoton. Guld på
   mörk botten, duotonen på kräm, där guld mot kräm tappar densitet. */
.eif-stampel-vagga { display: block; position: relative; }
.st-gron { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.st-guld { transition: opacity .8s ease; }
body[data-tema="klarhet"] .st-guld,
body[data-tema="sol"] .st-guld { opacity: 0; }
body[data-tema="klarhet"] .st-gron,
body[data-tema="sol"] .st-gron { opacity: 1; }

/* ── FORMULÄR — anmälan, inloggning, vittnesmål ─────────────── */
.falt-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.falt input[type=text], .falt input[type=email], .falt input[inputmode=numeric] {
  font: inherit; font-size: .96rem; padding: 11px 13px; border-radius: 3px;
  background: color-mix(in srgb, var(--t-djup) 42%, transparent); color: var(--t-text);
  border: 1px solid color-mix(in srgb, var(--t-kant) 78%, transparent);
}
.falt input:focus { border-color: var(--t-ljus1); outline: none; }
.falt input:disabled { opacity: .45; }
.kryss { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--t-mjuk); cursor: pointer; }
.kryss input { accent-color: var(--t-ljus1); margin-top: .28em; flex: none; }
.kryss a { color: var(--t-accent); }
.anmalan, .inlogg { padding: 28px 26px; display: grid; gap: 18px; margin-top: clamp(28px, 3vw, 42px); }
.anmalan-ingress { font-size: .94rem; color: var(--t-mjuk); margin: 0; }
.knapp-fylld {
  font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; justify-self: start;
  padding: 13px 26px; border-radius: 3px; border: 1px solid transparent;
  background: var(--t-accent); color: #1c1409; transition: filter .25s, transform .25s;
}
.knapp-fylld:hover { filter: brightness(1.08); transform: translateY(-1px); }
.knapp-fylld:disabled { opacity: .55; cursor: wait; }
.knapp-tunn {
  font: inherit; font-size: .86rem; cursor: pointer; justify-self: start;
  padding: 10px 20px; border-radius: 3px; background: transparent; color: var(--t-accent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 46%, transparent);
}
.knapp-glod-fylld {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; justify-self: start;
  padding: 13px 24px; border-radius: 3px; border: 0;
  background: var(--t-ljus1); color: #23130a;
}
.form-svar { font-size: .9rem; margin: 0; min-height: 1.2em; }
.svar-ok  { color: var(--t-ljus1); }
.svar-fel { color: var(--ember); }
.falt-kontakt { margin-left: 27px; }

/* betalvägar */
.betalning { margin-top: clamp(30px, 3.5vw, 46px); }
.qr-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 16px; }
.qr-kort {
  margin: 0; padding: 12px; border-radius: 4px; text-align: center;
  background: color-mix(in srgb, var(--t-glas) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-kant) 66%, transparent);
}
.qr-kort img { width: 100%; height: auto; border-radius: 3px; }
.qr-kort figcaption { margin-top: 10px; display: grid; gap: 3px; }
.qr-kort b { font-family: var(--mono); font-size: .76rem; color: var(--t-text); letter-spacing: .01em; }
.qr-kort span { font-size: .74rem; color: var(--t-mjuk); }
.betal-not { font-size: .88rem; color: var(--t-mjuk); margin: 14px 0 0; }

/* portalen */
.portal-rigg { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 38px); align-items: start; margin-top: clamp(26px, 3vw, 40px); }
.portal-rigg .portal-rader { margin: 0; grid-template-columns: 1fr; }
.inlogg-not { font-size: .84rem; color: var(--t-mjuk); margin: 0; }
.inne-hej { font-size: .98rem; color: var(--t-ljus1); margin: 0 0 14px; }
.handlingar-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 38px); }
.handling-kort { display: grid; gap: 7px; text-decoration: none; padding: 24px 24px 22px; }
.handling-kort:hover { transform: translateY(-2px); }
.handling-text { font-size: .92rem; color: var(--t-mjuk); }
.handling-hamta { font-size: .86rem; color: var(--t-accent); margin-top: 6px; }
.handling-inne { padding: 24px 24px 22px; }
.handling-inne .prickar { margin-top: 10px; }

/* diariet: ord i stället för siffror */
.diarie-ord { display: grid; gap: 6px; padding-top: 4px; }
.diarie-motto { font-family: var(--serif); font-size: 1.02rem; color: #cbb98f; margin: 0; font-style: italic; }
.diarie-viska { font-size: .82rem; color: #8b9678; margin: 0; }

@media (max-width: 960px) { .portal-rigg { grid-template-columns: 1fr; } }

/* villkors- och routningspaneler */
.villkor { margin: -4px 0 0 27px; }
.villkor summary { cursor: pointer; font-size: .86rem; color: var(--t-accent); padding: 6px 0; }
.villkor p { font-size: .88rem; color: var(--t-mjuk); margin: 0 0 .8em; max-width: 68ch; }
.villkor b { color: var(--t-text); font-weight: 600; }
.routning { display: grid; gap: 4px 0; margin: 8px 0 0; font-size: .88rem; }
.routning dt { color: var(--t-text); font-weight: 600; margin-top: 8px; }
.routning dd { margin: 0; color: var(--t-mjuk); }
.anonym-upplysning { font-size: .86rem; color: var(--t-mjuk); margin: 4px 0 0 27px; max-width: 62ch; }
/* handlingarna bakom inloggning */
.handlingar-inne { padding: 26px 26px 22px; margin-top: clamp(24px, 3vw, 38px); }
.handlingar-not { font-size: .88rem; color: var(--t-mjuk); margin: 0 0 14px; }
.handling-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.handling-lista a, .handling-lista .handling-lank {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  text-decoration: none; padding: 11px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 45%, transparent);
}
/* Handlingen öppnas i luckan → knapp, inte länk. Ärvd knapp-stil nollas. */
.handling-lista .handling-lank {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: none; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 45%, transparent);
}
.handling-lista a:hover, .handling-lista .handling-lank:hover {
  background: color-mix(in srgb, var(--t-ljus1) 9%, transparent);
}
.hl-titel { font-family: var(--serif); font-size: 1.02rem; color: var(--t-text); }
.hl-meta { font-family: var(--mono); font-size: .7rem; color: var(--t-mjuk); white-space: nowrap; }

/* Tidslinjen får inte sluta i uppgivenhet — vändningen är sidans skäl att handla */
.vandning { margin-top: clamp(30px, 3.5vw, 46px); padding: 26px 30px; max-width: 76ch;
  border-left: 2px solid var(--t-ljus1); }
.vandning p { font-size: .98rem; color: var(--t-mjuk); margin: 0 0 12px; }
.vandning-slut { font-family: var(--serif); font-style: italic;
  font-size: clamp(1.06rem, 1.2vw, 1.24rem); color: var(--t-accent) !important;
  margin: 0 !important; animation: puls-glod 8s ease-in-out infinite; }

/* Kassa-avstämningen — bara i styrelserummet */
.kassa { padding: 26px 26px 22px; margin-top: clamp(24px, 3vw, 38px); }
.kassa-not { font-size: .88rem; color: var(--t-mjuk); margin: 0 0 14px; max-width: 66ch; }
.kassa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kassa-lista li { padding: 10px 4px; border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 40%, transparent); }
.kassa-lista .kryss span { display: grid; gap: 2px; }
.kassa-lista b { color: var(--t-text); font-weight: 600; }
.kassa-lista em { font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--t-mjuk); }
.kassa-lista li.ar-betald { opacity: .5; }
.kassa-tom { color: var(--t-mjuk); font-size: .9rem; }
.kassa-summa { font-family: var(--mono); font-size: .78rem; color: var(--t-accent); margin: 0 0 12px; }
.kassa-summa b { font-family: var(--serif); font-size: 1.15rem; }
.kassa-status { font-size: .86rem; color: var(--t-ljus1); margin: 10px 0 0; min-height: 1.2em; }
.falt-hjalp { font-size: .78rem; color: var(--t-mjuk); }

/* Rättens inledning — frågan är redan ställd, lagtexten svarar */
.inledning { margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 28px 32px; max-width: 78ch; }
.invandningar { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; }
.invandningar li { font-size: .98rem; line-height: 1.62; color: var(--t-mjuk); }
.invandningar b { color: var(--t-text); font-weight: 600; }
.invandningar i { font-style: italic; }
.inledning-slut {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  color: var(--t-accent); margin: 18px 0 0; animation: puls-glod 9s ease-in-out infinite;
}
.inledning-kalla { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  color: var(--t-mjuk); margin: -6px 0 16px; }
.stycke-ref { font-family: var(--mono); font-size: .68rem; letter-spacing: .03em;
  color: color-mix(in srgb, var(--t-mjuk) 82%, transparent); margin: 8px 0 0 !important;
  padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--t-kant) 38%, transparent); }
.arenden-inne { padding: 26px 26px 22px; margin-top: clamp(24px, 3vw, 38px); }
.arenden-inne .arende-huvud { grid-template-columns: 2.6rem minmax(0,1fr) 8rem 6rem 1rem; }

/* ══════════════════════════════════════════════════════════════════
   LUCKAN — handlingar och ärendehandlingar öppnas ovanpå sidan
   (operatör-direktiv 2026-07-30: aldrig en ny flik, det är störigt;
   samma logik som gods.pub). Stängs med X, klick utanför eller Escape.
   ⛔ Två spärrar mot den döda ytan: `[hidden]{display:none}` explicit
   OCH `pointer-events:none` i vila — samma fälla som slöjan satt i.
   ══════════════════════════════════════════════════════════════════ */
.lucka {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: clamp(12px, 3vw, 40px);
  background: rgba(10, 8, 5, .62); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
.lucka[hidden] { display: none; }
.lucka.ar-oppen { opacity: 1; pointer-events: auto; }

.lucka-ram {
  width: min(980px, 100%); max-height: min(86vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--t-accent) 42%, transparent);
  background: color-mix(in srgb, var(--t-bas) 96%, transparent);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
  transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.3,.85,.3,1);
}
.lucka.ar-oppen .lucka-ram { transform: none; }

.lucka-topp {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 14px; border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 20%, transparent);
}
.lucka-topp h2 { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.32rem); color: var(--t-text); }
.lucka-meta {
  margin: 4px 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--t-accent);
}
.lucka-stang {
  flex: none; width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--t-accent);
  background: color-mix(in srgb, var(--t-glas) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent);
  transition: background .2s ease, transform .2s ease;
}
.lucka-stang:hover { background: color-mix(in srgb, var(--t-accent) 18%, transparent); transform: rotate(90deg); }

.lucka-kropp { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.lucka-kropp iframe { display: block; width: 100%; height: min(72vh, 780px); border: 0; background: #fff; }
.lucka-kropp pre {
  margin: 0; padding: 22px 24px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: .82rem; line-height: 1.62; color: var(--t-text);
}
.lucka-fot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 20px; border-top: 1px solid color-mix(in srgb, var(--t-accent) 18%, transparent);
  font-size: .84rem; color: var(--t-mjuk);
}
.lucka-ladda {
  display: inline-block; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  font-size: .84rem; color: var(--t-accent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 45%, transparent);
  background: color-mix(in srgb, var(--t-glas) 60%, transparent);
}
.lucka-kort { padding: 30px 24px; text-align: center; color: var(--t-mjuk); }
.lucka-kort p { margin: 0 0 16px; }

/* Ärendets handlingar — knappraden under varje expanderat ärende */
.arende-filer { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.arende-fil {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: .8rem;
  color: var(--t-accent); background: color-mix(in srgb, var(--t-glas) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 34%, transparent);
  transition: background .2s ease, border-color .2s ease;
}
.arende-fil:hover { background: color-mix(in srgb, var(--t-accent) 15%, transparent); }
.arende-fil small { font-family: var(--mono); font-size: .68rem; opacity: .72; }
.arende-svar { margin-top: 12px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--t-accent) 40%, transparent); }
.arende-etikett {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--t-accent); margin-bottom: 5px;
}
.st-finns_inte { border-color: #b98a3a; color: #d8a95a; }

/* På mobil tar luckan hela ytan — en halvstor ruta blir bara trång */
@media (max-width: 760px) {
  .lucka { padding: 0; }
  .lucka-ram { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .lucka-topp { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .lucka-kropp iframe { height: 100%; min-height: 60vh; }
  .lucka-fot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
.kassa-not-rad {
  list-style: none; margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  font-size: .84rem; color: var(--t-mjuk);
  background: color-mix(in srgb, var(--t-glas) 40%, transparent);
  border: 1px dashed color-mix(in srgb, var(--t-accent) 28%, transparent);
}
.falt-onskemal[hidden] { display: none; }

/* Adressboken — styrelsens postadresser, synliga bara i styrelserummet */
.adress-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.adress-lista li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 10px 4px; border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 40%, transparent);
}
.ad-namn { font-family: var(--serif); font-size: .98rem; color: var(--t-text); }
.ad-adress { font-size: .86rem; color: var(--t-mjuk); text-align: right; }
.ad-saknas { font-style: italic; opacity: .6; }
.adress-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.adress-form .falt { flex: 1 1 260px; margin: 0; }

/* ── GEMENSAMT UPPDRAG — levande logg i styrelserummet ───────────── */
.upp-ingress { margin: 0 0 14px; color: var(--t-mjuk); }
.upp-punkter { margin: 0 0 20px; padding-left: 18px; display: grid; gap: 6px; }
.upp-punkter li { color: var(--t-mjuk); font-size: .92rem; }
.upp-godkann { margin-bottom: 22px; }
.upp-svar { margin: 8px 0 0; font-size: .86rem; color: var(--t-accent); }

.upp-kedja { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.upp-steg {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
  background: color-mix(in srgb, var(--t-glas) 34%, transparent);
  transition: border-color .3s ease, background .3s ease;
}
.upp-steg.ar-tur {
  border-color: color-mix(in srgb, var(--t-accent) 62%, transparent);
  background: color-mix(in srgb, var(--t-accent) 10%, transparent);
}
.upp-steg.ar-klar { opacity: .74; }
.upp-steg.ar-jag { box-shadow: inset 3px 0 0 var(--t-accent); }
.upp-huvud { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.upp-nr {
  font-family: var(--mono); font-size: .74rem; color: var(--t-accent);
  min-width: 1.4rem;
}
.upp-namn { font-family: var(--serif); font-size: 1.02rem; color: var(--t-text); }
.upp-namn em { font-style: normal; color: var(--t-accent); font-size: .84rem; }
.upp-marke {
  margin-left: auto; font-family: var(--mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--t-accent);
}
.upp-gor { margin: 7px 0 0; font-size: .9rem; color: var(--t-mjuk); }
.upp-not { margin: 6px 0 0; font-size: .84rem; font-style: italic; color: var(--t-accent); }
.upp-godk { margin: 6px 0 0; font-size: .78rem; color: var(--t-mjuk); }
.upp-lank { color: var(--t-accent); font-size: .86rem; }
.upp-utfort { margin-top: 12px; }
.upp-summa {
  list-style: none; margin-top: 4px; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; color: var(--t-mjuk); text-align: right;
}
.upp-mitt-godk { margin: 0 0 18px; font-size: .86rem; color: var(--t-accent); }
.upp-mitt-godk[hidden] { display: none; }

/* Notiser — ntfy för styrelsen */
.upp-notis {
  margin: 18px 0 20px; padding: 16px 18px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--t-accent) 34%, transparent);
  background: color-mix(in srgb, var(--t-glas) 30%, transparent);
}
.upp-notis[hidden] { display: none; }
.upp-notis h4 { margin: 0 0 8px; font-size: .96rem; color: var(--t-text); font-weight: 600; }
.upp-notis p { margin: 0 0 10px; font-size: .88rem; color: var(--t-mjuk); }
.notis-rader { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 10px; }
.notis-rader dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--t-accent); padding-top: 3px;
}
.notis-rader dd { margin: 0; font-family: var(--mono); font-size: .82rem; color: var(--t-text); word-break: break-all; }
.notis-lank-rad a { color: var(--t-accent); font-size: .84rem; word-break: break-all; }
.notis-svar { margin: 10px 0 0 !important; font-size: .84rem; color: var(--t-accent) !important; }

/* ── RUMS-GRÄNSEN — vad alla medlemmar ser vs vad bara styrelsen ser ── */
.rums-rubrik {
  margin: clamp(34px, 4vw, 52px) 0 16px; padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--t-accent) 40%, transparent);
}
.rums-rubrik[hidden] { display: none; }
.rums-rubrik h3 {
  margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--t-text); letter-spacing: .01em;
}
.rums-rubrik p { margin: 5px 0 0; font-size: .86rem; color: var(--t-mjuk); }
.rums-styrelse { border-bottom-style: dashed; }
.rums-styrelse h3::before {
  content: '⛔ '; font-size: .8em; color: var(--t-accent);
}

/* Projekt-flikar */
.upp-flikar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.upp-flik {
  display: grid; gap: 2px; cursor: pointer; text-align: left; font: inherit;
  padding: 10px 16px; border-radius: 11px;
  color: var(--t-mjuk); background: color-mix(in srgb, var(--t-glas) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-kant) 60%, transparent);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.upp-flik:hover { border-color: color-mix(in srgb, var(--t-accent) 45%, transparent); }
.upp-flik.ar-vald {
  color: var(--t-text);
  border-color: color-mix(in srgb, var(--t-accent) 70%, transparent);
  background: color-mix(in srgb, var(--t-accent) 13%, transparent);
}
.uf-namn { font-family: var(--serif); font-size: .98rem; }
.uf-datum, .uf-status { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; opacity: .8; }
.uf-status { color: var(--t-accent); }

/* Notis-anslutningen */
.notis-steg { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 7px; }
.notis-steg li { font-size: .9rem; color: var(--t-mjuk); }
.notis-steg code {
  display: inline-block; padding: 2px 8px; border-radius: 6px; margin-top: 2px;
  font-family: var(--mono); font-size: .84rem; color: var(--t-text);
  background: color-mix(in srgb, var(--t-accent) 15%, transparent);
  user-select: all; word-break: break-all;
}
.notis-not { margin: 10px 0 0; font-size: .8rem; font-style: italic; color: var(--t-mjuk); }

/* Projekt-grupperna ärver Sammanhangens mönster; stegen fälls ut var för sig */
.upp-projekt { display: grid; gap: 10px; }
.upp-grupp .grupp-namn { font-family: var(--serif); }
.upp-steg-huvud {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto 1rem;
  align-items: center; gap: 10px; width: 100%; cursor: pointer;
  padding: 11px 4px; font: inherit; text-align: left; background: none; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 40%, transparent);
}
.upp-steg-huvud:hover { background: color-mix(in srgb, var(--t-ljus1) 8%, transparent); }
.upp-steg-kropp { padding: 4px 4px 16px 2.4rem; }
.upp-steg-kropp[hidden] { display: none; }
.upp-steg.ar-tur .upp-steg-huvud { background: color-mix(in srgb, var(--t-accent) 9%, transparent); }
.upp-steg.ar-klar .upp-namn { opacity: .7; }
.upp-steg.ar-jag .upp-steg-huvud { box-shadow: inset 3px 0 0 var(--t-accent); }
@media (max-width: 760px) {
  .upp-steg-huvud { grid-template-columns: 1.5rem minmax(0, 1fr) 1rem; row-gap: 3px; }
  .upp-marke { grid-column: 2; margin-left: 0; }
  .upp-steg-kropp { padding-left: 1.5rem; }
}

/* Medlemsregistret — styrelsens vy över betalande medlemmar */
.ml-summa { margin: 0 0 12px; font-size: .9rem; color: var(--t-mjuk); }
.ml-summa b { font-family: var(--mono); font-size: 1.1rem; color: var(--t-accent); }
.ml-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ml-lista li {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) auto auto;
  gap: 6px 16px; align-items: baseline; padding: 10px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--t-kant) 40%, transparent);
}
.ml-namn { font-family: var(--serif); font-size: 1rem; color: var(--t-text); }
.ml-kontakt a { color: var(--t-accent); font-size: .86rem; text-decoration: none; word-break: break-all; }
.ml-niva, .ml-datum { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--t-mjuk); }
@media (max-width: 760px) {
  .ml-lista li { grid-template-columns: minmax(0, 1fr) auto; }
  .ml-kontakt { grid-column: 1 / -1; }
  .ml-datum { text-align: right; }
}

/* Orienteringen — hur styrelserummet läses */
.orientering { margin-bottom: 14px; }
.or-lista { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 7px; }
.or-lista li { font-size: .9rem; color: var(--t-mjuk); }
.or-lista b { color: var(--t-text); }
.or-not { margin: 0; font-size: .84rem; font-style: italic; color: var(--t-mjuk); }
.adressbok .grupp-kropp { padding: 4px 20px 20px; }

/* Honungsfällan — dold för människor, synlig för bottar. Aldrig display:none:
   en välbyggd bot hoppar över det som är display:none. */
.falla {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

/* Kansliets flikar — struktur, adresser, rollkarta */
.kansli-lista { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 18px; margin: 0 0 14px; }
.kansli-lista dt { font-family: var(--serif); font-size: .96rem; color: var(--t-text); }
.kansli-lista dt a { color: var(--t-accent); text-decoration: none; font-family: var(--mono); font-size: .82rem; }
.kansli-lista dd { margin: 0; font-size: .88rem; color: var(--t-mjuk); }
.roll-rad { display: grid; gap: 14px; margin: 0 0 18px; }
.roll { padding: 14px 16px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--t-kant) 55%, transparent);
  background: color-mix(in srgb, var(--t-glas) 30%, transparent); }
.roll h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 1rem; color: var(--t-text);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.roll h4 em { font-style: normal; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .06em; color: var(--t-accent); }
.roll-ansvar { margin: 0 0 8px; font-size: .88rem; color: var(--t-text); }
.roll-stod { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.roll-stod li { font-size: .85rem; color: var(--t-mjuk); }
.karta-samarbete { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.karta-samarbete li { font-size: .86rem; color: var(--t-mjuk); }
@media (min-width: 900px) { .roll-rad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kansli-lista { grid-template-columns: 1fr; gap: 3px 0; }
  .kansli-lista dd { margin-bottom: 10px; } }

/* ── Discord-inbjudan i styrelserummet ─────────────────────────────────────
   Läget bärs av färg, inte av att någon läser ett datum. En utgången inbjudan
   ska synas i samma ögonkast som listan öppnas. */
.discord .grupp-tal { font-variant-numeric: tabular-nums; }
.discord-frisk .grupp-tal { color: #8fbf6a; }
.discord-snart .grupp-tal { color: var(--amber-hot, #f19c20); }
.discord-dod   .grupp-tal { color: #e06a5a; font-weight: 600; }
.discord-dod   { box-shadow: inset 3px 0 0 #e06a5a; }
.discord-lank a { color: var(--amber, #e49c31); word-break: break-all; }
.discord-meta { margin-top: .35rem; font-size: .86rem; opacity: .78; }
.discord-dod .discord-meta { color: #e06a5a; opacity: 1; }

/* ── Beslut att rösta om + kassaboken (2026-08-08) ─────────────────────────
   Följer aktens glas och bärnsten; inget nytt formspråk. Mobil först — Johan
   bokför från telefonen lika ofta som från datorn. */
.rost-fraga{padding:1.1rem 0;border-bottom:1px solid rgba(228,156,49,.14)}
.rost-fraga:last-child{border-bottom:0}
.rost-fraga h4{margin:0 0 .35rem;font-size:1.02rem;letter-spacing:.01em}
.rost-varfor{margin:0 0 .8rem;opacity:.86;line-height:1.55}
.rost-alternativ{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}
.rost-alt{display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;
  border:1px solid rgba(228,156,49,.3);border-radius:.6rem;background:transparent;
  color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.rost-alt:hover:not([disabled]){border-color:rgba(228,156,49,.7)}
.rost-alt.ar-min{border-color:#e49c31;background:rgba(228,156,49,.14);font-weight:600}
.rost-alt[disabled]{opacity:.55;cursor:default}
.rost-alt-tal{min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums;
  opacity:.8;font-size:.9em}
.rost-krav,.rost-utfall{font-size:.9rem;opacity:.8;margin:.2rem 0 .6rem}
.rost-utfall{opacity:1}
.rost-vem{list-style:none;margin:.5rem 0 0;padding:0;font-size:.9rem}
.rost-vem li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;
  border-top:1px solid rgba(255,255,255,.06);opacity:.62}
.rost-vem li.har-rostat{opacity:1}
.rost-vem em{font-style:normal;opacity:.6;font-size:.85em}
.rost-forhinder{font-size:.86rem;padding:.35rem .7rem}
.ar-avgjord{opacity:.9}

.kassa-summa{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1rem}
.kassa-tal{display:flex;flex-direction:column}
.kassa-tal span{font-size:.8rem;opacity:.7;text-transform:uppercase;letter-spacing:.08em}
.kassa-tal strong{font-size:1.15rem;font-variant-numeric:tabular-nums}
.kassa-saldo strong{color:#e49c31}
.kassa-form{margin-bottom:1.1rem}
.kassa-rad{margin-bottom:.6rem}
.kassa-rad label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;opacity:.9}
.kassa-rad input,.kassa-rad select{padding:.62rem .7rem;border-radius:.5rem;
  border:1px solid rgba(228,156,49,.26);background:rgba(0,0,0,.22);color:inherit;
  font:inherit;font-size:16px}          /* 16px = ingen auto-zoom på iOS */
.kassa-tre{display:grid;gap:.6rem}
.kassa-valfri{opacity:.5;font-size:.85em}
.kassa-knappar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.3rem}
.kassa-lista{list-style:none;margin:0;padding:0}
.kassa-post{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .7rem;
  padding:.55rem 0;border-top:1px solid rgba(255,255,255,.07);font-size:.92rem}
.kassa-datum{font-variant-numeric:tabular-nums;opacity:.65;font-size:.86em}
.kassa-kat{grid-column:2;opacity:.6;font-size:.84em}
.kassa-belopp{grid-row:1;grid-column:3;font-variant-numeric:tabular-nums;font-weight:600}
.ar-in .kassa-belopp{color:#8fc79a}
.ar-ut .kassa-belopp{opacity:.85}
.kassa-bort{grid-row:2;grid-column:3;background:none;border:0;color:inherit;opacity:.4;
  cursor:pointer;font-size:1rem;padding:0}
.kassa-bort:hover{opacity:.9}
.kassa-tom{padding:.8rem 0;opacity:.6}
@media (min-width:640px){
  .kassa-tre{grid-template-columns:1fr 1fr 1fr}
}
.rost-logg{margin-top:1.1rem;border-top:1px solid rgba(228,156,49,.18);padding-top:.4rem}
.rost-logg summary{cursor:pointer;padding:.55rem 0;font-size:.9rem;opacity:.8;
  letter-spacing:.04em;text-transform:uppercase}
.rost-logg summary:hover{opacity:1}
.rost-logg .rost-fraga{opacity:.85}
.rost-inga{opacity:.7;padding:.6rem 0}
.kbok-instruktion{opacity:.85;line-height:1.6;margin:0 0 .9rem;font-size:.93rem}
.kbok-svar{min-height:1.2em;font-size:.88rem;opacity:.85;margin:.2rem 0}
.kbok-fil input[type=file]{padding:.5rem 0;font-size:.86rem;border:0;background:none}
.kbok-kvitto{grid-row:2;grid-column:3;justify-self:end;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;opacity:.75;text-decoration:none;cursor:pointer;
  border-bottom:1px solid rgba(228,156,49,.4)}
.kbok-kvitto:hover{opacity:1}
.kbok-saknas{opacity:.45;border-bottom-style:dotted}

/* ── Beredningen: rummen ──────────────────────────────────────────────────
   ⭐ Rummet är ett CHATTFÖNSTER, inte en sida med en chatt på. Huvudet ligger
   fast överst, flödet skrollar i mitten, skrivrutan är frusen nertill. Filfliken
   skrollar i stället hela sitt innehåll i samma mittyta. */
.akt-rum{display:flex;flex-direction:column;height:100dvh;padding:0;overflow:hidden}
.akt-rum > div{display:flex;flex-direction:column;flex:1;min-height:0}
.rum-huvud{flex:0 0 auto;padding:1.4rem 2rem .8rem;
  border-bottom:1px solid rgba(228,156,49,.16);background:rgba(0,0,0,.16)}
.rum-huvud h2{margin:0 0 .25rem;font-size:1.7rem;letter-spacing:.01em}
.rum-deltagare{font-size:.84rem;opacity:.78;margin:0 0 .7rem}
.rum-deltagare .ar-agent{opacity:.72}
.rum-deltagare em{font-style:normal;font-size:.82em;opacity:.7}
.rum-flikval{display:flex;gap:.45rem}
.rum-flikval button{padding:.4rem .9rem;border:1px solid rgba(228,156,49,.26);
  border-radius:.5rem;background:transparent;color:inherit;font:inherit;font-size:.88rem;
  cursor:pointer}
.rum-flikval button.ar-vald{background:rgba(228,156,49,.16);border-color:#e49c31}

.rum-kropp{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:1.2rem 2rem;display:flex;flex-direction:column}
/* ⛔⛔ justify-content:flex-end BORTTAGET 2026-08-10 — det KAPADE TOPPEN AV SAMTALET.
   Min egen kommentar här sa "vid många inlägg tar overflow över". Det var en ANTAGELSE,
   och den är fel: på en flex-container med overflow-y:auto lägger flex-end innehållets
   överskott UTANFÖR scroll-området i den ände man inte kan nå. Äldre inlägg fanns kvar i
   databasen men gick inte att skrolla till — operatören såg det direkt ("jag vet att det
   stod mer text innan").
   ⭐ RÄTT MEKANIK: margin-top:auto på listan. Ett kort samtal ligger fortfarande nedtill,
   närmast skrivrutan, men när innehållet växer förbi höjden blir HELA flödet skrollbart.
   ⭐ Läxan är densamma som slöjan och [hidden]: jag testade att det SÅG rätt ut i det korta
   fallet och skrev en kommentar om det långa fallet i stället för att prova det. */
.rum-inlagg{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.rum-inlagg li{max-width:78%;padding:.6rem .9rem;border-radius:.9rem;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.rum-inlagg li.ar-jag{align-self:flex-end;background:rgba(228,156,49,.13);
  border-color:rgba(228,156,49,.26)}
.rum-fran{font-size:.8rem;font-weight:600;opacity:.9}
.rum-tid{font-size:.72rem;opacity:.5;margin-left:.5rem;font-variant-numeric:tabular-nums}
.rum-inlagg p{margin:.25rem 0 0;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.rum-tomt{opacity:.6;align-self:center;background:none;border:0}
.rum-om p{max-width:62ch;line-height:1.6}
.rum-om-not{opacity:.7;font-size:.9rem;margin-top:.9rem}
/* ⭐ Om rummet är en LÄSSIDA, inte en notis — den ska tåla att läsas en gång ordentligt
   och sedan aldrig mer. Rubriker som ankare, luft mellan styckena, och samma bärnsten
   som resten av rummet så den hör ihop med ytan i stället för att se påklistrad ut. */
.rum-om-syfte{font-size:1.05rem;color:#e9dcc4;border-left:2px solid rgba(228,156,49,.5);
  padding-left:.9rem;margin-bottom:1.4rem}
.rum-om h4{margin:1.5rem 0 .45rem;font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:#e49c31;font-weight:600}
.rum-om h4:first-of-type{margin-top:.6rem}
.rum-om-lista{max-width:62ch;margin:.3rem 0 0;padding-left:1.1rem;line-height:1.6}
.rum-om-lista li{margin:.4rem 0}
.rum-om-lista strong{color:#e9dcc4;font-weight:600}

/* Frusen skrivrad — en rad som växer med texten, aldrig en blankett */
.rum-skriv{flex:0 0 auto;display:flex;gap:.6rem;align-items:flex-end;
  padding:.8rem 2rem 1.1rem;border-top:1px solid rgba(228,156,49,.16);
  background:rgba(0,0,0,.24)}
.rum-skriv textarea{flex:1;padding:.65rem .8rem;border-radius:1.1rem;
  border:1px solid rgba(228,156,49,.26);background:rgba(0,0,0,.3);color:inherit;
  font:inherit;font-size:16px;resize:none;max-height:160px;line-height:1.45}
.rum-bifoga{cursor:pointer;flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:50%;
  border:1px solid rgba(228,156,49,.3);display:grid;place-items:center;font-size:1.3rem;
  opacity:.8;user-select:none}
.rum-bifoga:hover{opacity:1;border-color:#e49c31}
.rum-skriv .knapp-fylld{flex:0 0 auto}
.rum-svar{position:absolute;bottom:.2rem;left:2rem;font-size:.82rem;opacity:.85;margin:0}

.rumfil-lista{list-style:none;margin:0;padding:0}
.rumfil{padding:.65rem 0;border-top:1px solid rgba(255,255,255,.07);display:flex;
  flex-direction:column;gap:.15rem}
.rumfil a{color:inherit}
.rumfil-meta{font-size:.78rem;opacity:.6}
.rumfil-om{font-size:.88rem;opacity:.85}
.rumfil-tom{padding:.9rem 0;opacity:.6}

.flik-rum .rum-prick{display:inline-block;margin-left:.4rem;min-width:1.3em;padding:0 .3em;
  border-radius:1em;background:#e49c31;color:#140f0a;font-size:.7rem;font-style:normal;
  font-weight:700;text-align:center;vertical-align:middle}

@media (max-width:860px){
  .rum-huvud{padding:1rem 1.1rem .7rem}
  .rum-huvud h2{font-size:1.35rem}
  .rum-kropp{padding:1rem 1.1rem}
  .rum-skriv{padding:.7rem 1.1rem 1rem}
  .rum-inlagg li{max-width:90%}
  .rum-svar{left:1.1rem}
}

/* ⛔ Rummet är det enda som ska äga hela fönstret — därför gäller detta bara när
   rums-akten är öppen. `.yta` och `.rigg` växer annars med innehållet och gav
   1102 px i ett 900 px-fönster, vilket gjorde att hela sidan skrollade under
   chatten i stället för att chatten skrollade i sig själv. */
body[data-akt="rum"]{overflow:hidden}
body[data-akt="rum"] .rigg{height:100dvh;overflow:hidden}
body[data-akt="rum"] .yta{padding:0;height:100dvh;overflow:hidden}
/* ⛔ På mobil ligger en sticky topp-bar (67 px) OVANFÖR riggen och skjuter ner den,
   så 100dvh blev 67 px för högt och skrivraden hamnade under fönsterkanten.
   Mätt, inte gissat: HEADER.mobil-topp h=67 top=0 pos=sticky. */
@media (max-width:860px){
  body[data-akt="rum"] .rigg,
  body[data-akt="rum"] .yta,
  body[data-akt="rum"] .akt-rum{height:calc(100dvh - 67px)}
}
body[data-akt="rum"] .akt-rum{position:relative}


/* ⛔⛔ [hidden] MÅSTE SKRIVAS UT EXPLICIT när ett element har display i en klassregel.
   Webbläsarens [hidden]{display:none} har LÄGRE specificitet än .rum-inlagg{display:flex},
   så flikbytet dolde ingenting: "Delat" var vald medan chatten låg kvar under.
   Exakt samma bugg som slöjan 2026-07-30 — och läxan stod redan i EKO_MANWE. */
.rum-inlagg[hidden], .rum-filer[hidden], .rum-om[hidden],
.rum-skriv[hidden], .akt[hidden]{display:none !important}

/* Karaktär: initial, datumavdelare, och ett tomt läge som säger vad rummet ÄR */
.rum-inlagg li{position:relative;padding-left:2.9rem}
.rum-inlagg li.ar-jag{padding-left:.9rem;padding-right:.9rem}
.rum-avatar{position:absolute;left:.72rem;top:.6rem;width:1.65rem;height:1.65rem;
  border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;
  background:rgba(228,156,49,.2);border:1px solid rgba(228,156,49,.3);color:#e9dfcb}
.rum-inlagg li.ar-jag .rum-avatar{display:none}
.rum-dag{align-self:center;background:none;border:0;padding:.3rem 0 .1rem;max-width:none}
.rum-dag span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.45;
  padding:.15rem .7rem;border:1px solid rgba(255,255,255,.09);border-radius:1em}
.rum-tomt{display:flex;flex-direction:column;gap:.4rem;max-width:34ch;text-align:center;
  padding:2rem 0;opacity:.75}
.rum-tomt strong{font-size:1.05rem;font-weight:600}
.rum-tomt span{font-size:.92rem;line-height:1.55;opacity:.8}

/* ── Delat: ett arkiv med struktur, inte en mörk yta ─────────────────────── */
.rum-filer{padding-bottom:1rem}
.rumfil-lagg{margin-bottom:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.rumfil-valj{display:flex;flex-direction:column;gap:.15rem;padding:1.1rem 1.2rem;
  border:1px dashed rgba(228,156,49,.35);border-radius:.7rem;cursor:pointer;
  background:rgba(228,156,49,.05);transition:border-color .2s,background .2s}
.rumfil-valj:hover{border-color:#e49c31;background:rgba(228,156,49,.1)}
.rumfil-valj strong{font-size:.98rem}
.rumfil-valj span{font-size:.84rem;opacity:.7}
.rumfil-lagg input[name="om"]{padding:.6rem .8rem;border-radius:.5rem;
  border:1px solid rgba(228,156,49,.22);background:rgba(0,0,0,.24);color:inherit;
  font:inherit;font-size:16px}
.rumfil-man{list-style:none;padding:.9rem 0 .3rem;font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;opacity:.5;border:0}
.rumfil{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;align-items:baseline;
  padding:.6rem 0;border-top:1px solid rgba(255,255,255,.07)}
.rumfil-typ{grid-row:1/3;align-self:start;font-size:.62rem;letter-spacing:.08em;
  padding:.22rem .45rem;border-radius:.3rem;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);opacity:.85;min-width:3.6em;text-align:center}
.rumfil-typ.ar-pdf{background:rgba(228,120,80,.18);border-color:rgba(228,120,80,.3)}
.rumfil-typ.ar-bild{background:rgba(120,180,140,.16);border-color:rgba(120,180,140,.28)}
.rumfil-typ.ar-kalkyl{background:rgba(120,160,220,.16);border-color:rgba(120,160,220,.28)}
.rumfil-typ.ar-mail{background:rgba(228,156,49,.16);border-color:rgba(228,156,49,.3)}
.rumfil a{color:inherit;font-size:.98rem;word-break:break-word}
/* Filnamnet är en knapp sedan 11 aug (öppnar i luckan, inte i ny flik) — den ska
   se ut precis som länken gjorde, annars märker ögat en skillnad som inte finns. */
.rumfil-oppna{grid-column:2;justify-self:start;text-align:left;padding:0;border:0;
  background:none;color:inherit;font-family:inherit;font-size:.98rem;word-break:break-word;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(228,156,49,.45)}
.rumfil-oppna:hover{text-decoration-color:#e49c31}
.rumfil-oppna:focus-visible{outline:2px solid #e49c31;outline-offset:3px;border-radius:3px}
/* Bilder i luckan: hela bilden ska rymmas utan att man behöver nypa och dra */
/* Läsvyer i luckan — en handling ska gå att läsa, inte laddas ner (11 aug 2026) */
.lucka-vantar{margin:0;padding:26px 24px;font-size:.92rem;opacity:.72}
.lucka-pdf{display:flex;flex-direction:column;gap:10px;padding:12px;background:#0e0f0d}
.lucka-pdf canvas{width:100%;height:auto;border-radius:4px;background:#fff}
.lucka-text{padding:20px 22px;max-width:74ch;font-size:.96rem;line-height:1.66}
.lucka-text h2{font-size:1.18rem;margin:0 0 .6rem}
.lucka-text h3{font-size:1.04rem;margin:1.5rem 0 .4rem}
.lucka-text h4,.lucka-text h5{font-size:.96rem;margin:1.2rem 0 .3rem;letter-spacing:.02em}
.lucka-text p{margin:0 0 .85rem}
.lucka-text ul{margin:0 0 .95rem;padding-left:1.15rem}
.lucka-text li{margin-bottom:.35rem}
.lucka-text blockquote{margin:0 0 .95rem;padding:.55rem .9rem;border-left:2px solid rgba(228,156,49,.5);
  background:rgba(228,156,49,.06);border-radius:0 6px 6px 0}
.lucka-text code{font-family:var(--mono);font-size:.86em;padding:.08em .35em;border-radius:4px;
  background:rgba(255,255,255,.07)}
.lucka-text hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:1.3rem 0}
@media (max-width:760px){.lucka-text{padding:16px 15px;font-size:1rem}.lucka-pdf{padding:6px}}
.lucka-bild{display:flex;justify-content:center;padding:14px}
.lucka-bild img{max-width:100%;max-height:calc(86vh - 160px);height:auto;border-radius:8px}
@media (max-width:760px){.lucka-bild img{max-height:none}}
.rumfil-meta{grid-column:2;font-size:.78rem;opacity:.58}
.rumfil-om{grid-column:2;font-size:.88rem;opacity:.85;margin-top:.1rem}
.rumfil-tom{display:flex;flex-direction:column;gap:.4rem;max-width:40ch;padding:1.6rem 0;
  opacity:.75;border:0}
.rumfil-tom strong{font-size:1.02rem}
.rumfil-tom span{font-size:.92rem;line-height:1.55;opacity:.8}
/* Delat ska börja UPPTILL — bara samtalet ankras nedtill */
.rum-kropp:has(.rum-filer:not([hidden])){justify-content:flex-start}