/* Madeform · portal.css, v5 (2026-10-18): koncept A, Skrivbordet. Samma fil bär inloggningen (/login), portalen (/portal)
 * och dagsidorna under Uppdateringar.
 *
 * MALLEN. Filen har tre lager, i den här ordningen:
 *   1. TOKENS: Madeforms färger i mörkt och ljust läge (live är designkällan, ADR-0010). Värdena är desamma som förut,
 *      och presentationsvisaren (presentation.css) läser samma ljusa värden.
 *   2. KUND: kundens namn och accent. Det är det enda en kund byter. Accentens fyra steg (fylld, text, svag yta och text
 *      på fylld) räcker för hela portalen; layouten nedanför läser bara --accent*, aldrig en kundfärg direkt.
 *   3. LAYOUT och KOMPONENTER: sidomenyn, arbetsytan, kön, kartan och resten. Bara variabler, inga kundnamn.
 * En kund som PR Active eller Micropower ärver portalen så här: kopiera filen, byt blocket KUND (namnet, accenten och
 * --accent-text så att kontrasten håller 4,5:1 i båda lägena) och byt ordmärket i portal.html och login.html mot
 * kundens SVG. Namnet läses av portal.js ur --kund-namn och skrivs i sidans titel. Inget annat behöver röras.
 * En egen tema.css går inte att servera utan en ny rutt i server.js (och serverkopian), så temat står överst här.
 *
 * Inga inline-stilar: sidornas CSP är style-src 'self'. Rörelse bara för det som jobbar, högst 200 ms i gränssnittet,
 * ingen studs, och allt står still vid prefers-reduced-motion.
 */


/* Samma typsnitt som startsidan: den lätta delmängden av Archivo (vikt 400–800, bredd 75–125 %, se
   start/fonts/README.md). Portalen och startsidan ritas därmed med exakt samma bokstäver (2026-10-16). */
@font-face {
  font-family: "Archivo";
  src: url("/start/fonts/Archivo-Start.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --natt: #0e1819;
  --yta: #142124;
  --yta-2: #1a2c30;
  --linje: #243a3f;
  --linje-stark: #36545a;
  --text: #e8eeec;
  --dampad: #93a8a8;
  --ord: #e2ddd6;
  --turkos: #00c5b5;
  --turkos-text: #3fd9cb;
  --turkos-svag: rgba(0, 197, 181, 0.13);
  --pa-turkos: #04211f;
  --dom: #e6d38a;
  --fel: #ff8f7a;
  /* Diagramfärger (2026-10-07, Arbetet): tre delar, alltid i samma ordning. Prövade mot ytan i mörkt och ljust
     läge för ljushet, kroma, färgblindhet och kontrast – portalens egna tre färger höll inte som diagramfärger. */
  --bild-1: #00a99c;
  --bild-2: #c97d30;
  --bild-3: #8a78dc;
  --knapp: var(--text);
  --knapp-text: var(--natt);
  --knapp-hover: var(--turkos-text);
  --skugga: none;
  --lyft: none;
  --kundfarg: var(--turkos);
  --rail: 208px;
  --mellan: clamp(20px, 3.2vw, 44px);
  /* Startsidans mått (start.css): sidans kant, största bredd och rännan i tolvkolumnsrutnätet. Portalen och inloggningen
     står på samma rutnät, så att vänsterkanten och kolumnerna är desamma på alla tre sidor (2026-10-17). */
  --kant: clamp(20px, 3.9vw, 56px);
  --max: 1680px;
  --ranna: 24px;
  /* Rytmen på 4 px-skalan: avståndet mellan block i ett rum, före ett nytt avsnitt, och luften i en ram. */
  --rytm: 24px;
  --rytm-stor: 48px;
  --ram-luft: 24px;
  --ram-luft-tat: 16px;
  --rad: 0px;
  --kort: 0px;
  --ut: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="mork"]) {
    color-scheme: light;
    --ord: #0b1719;
    --natt: #f5f7f6;
    --yta: #ffffff;
    --yta-2: #e6ecea;
    --linje: #dbe3e0;
    --linje-stark: #b3c2be;
    --text: #0b1719;
    --dampad: #4f6263;
    --turkos-text: #006d65;
    --turkos-svag: rgba(0, 150, 138, 0.1);
    --dom: #7a6110;
    --fel: #b3321c;
    --bild-1: #008f85;
    --bild-2: #b8651f;
    --bild-3: #6f5bd0;
    --knapp: #0b1719;
    --knapp-text: #ffffff;
    --knapp-hover: #006d65;
    --skugga: none;
    --lyft: none;
  }
}

:root[data-tema="ljus"] {
  color-scheme: light;
  --ord: #0b1719;
  --natt: #f5f7f6;
  --yta: #ffffff;
  --yta-2: #e6ecea;
  --linje: #dbe3e0;
  --linje-stark: #b3c2be;
  --text: #0b1719;
  --dampad: #4f6263;
  --turkos-text: #006d65;
  --turkos-svag: rgba(0, 150, 138, 0.1);
  --dom: #7a6110;
  --fel: #b3321c;
  --bild-1: #008f85;
  --bild-2: #b8651f;
  --bild-3: #6f5bd0;
  --knapp: #0b1719;
  --knapp-text: #ffffff;
  --knapp-hover: #006d65;
  --skugga: none;
  --lyft: none;
}

/* ---------------------------------------------------------------- KUND */
/* Det enda en kund byter. Madeforms accent är turkos; en annan kund sätter sina egna fyra värden här. */
:root {
  --kund-namn: "Madeform";
  --accent: var(--turkos);
  --accent-text: var(--turkos-text);
  --accent-svag: var(--turkos-svag);
  --pa-accent: var(--pa-turkos);
}

/* ------------------------------------------------------------- härledda */
/* Ytor, statusfärger och mått som layouten använder. Allt räknas ur tokens ovanför, så båda lägena följer med. */
:root {
  --hovra: color-mix(in srgb, var(--text) 4%, var(--yta));
  --vald: color-mix(in srgb, var(--text) 7%, var(--yta));
  --meny-hovra: color-mix(in srgb, var(--text) 6%, transparent);
  --vilar: color-mix(in srgb, var(--dampad) 72%, var(--yta));
  --dom-yta: color-mix(in srgb, var(--dom) 13%, var(--yta));
  --fel-yta: color-mix(in srgb, var(--fel) 11%, var(--yta));
  --skugga-1: 0 1px 2px rgb(11 23 25 / 0.06);
  --skugga-pop: 0 16px 40px -12px rgb(11 23 25 / 0.28), 0 2px 6px rgb(11 23 25 / 0.1);
  --t-s: 0.8125rem;
  --t-m: 0.9375rem;
  --t-l: 1.125rem;
  --t-xl: 1.75rem;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --sidomeny: 252px;
  --t-snabb: 120ms;
  --t-ui: 180ms;
  --kurva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kant-ut: clamp(20px, 3vw, 40px);
}

/* ------------------------------------------------------------------ grund */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--natt);
  color: var(--text);
  font-family: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-m);
  font-weight: 420;
  line-height: 1.5;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
mark { padding: 0 3px; border-radius: 3px; background: var(--dom-yta); color: var(--text); }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-svag); }

.dold { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rubrik-2 { font-size: var(--t-l); font-weight: 720; line-height: 1.3; letter-spacing: -0.01em; }
h3 { letter-spacing: -0.005em; }
.siffra { font-stretch: 84%; font-weight: 620; font-variant-numeric: tabular-nums; }

.hoppa {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--r-s);
  background: var(--text);
  color: var(--yta);
  font-weight: 640;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-snabb) var(--kurva);
}
.hoppa:focus { transform: none; }

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid var(--linje-stark);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--yta);
  color: var(--dampad);
  font: 600 11px/16px "Archivo", system-ui, sans-serif;
  font-stretch: 84%;
  text-align: center;
}

/* ---------------------------------------------------------------- knappar */
/* En fylld knapp per vy (accenten), resten med hårfin ram eller utan ram. Små radier, 36 px höga, 44 px på telefon. */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--linje-stark);
  border-radius: 8px;
  background: var(--yta);
  color: var(--text);
  font-size: var(--t-m);
  font-weight: 620;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-snabb) var(--kurva), border-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.knapp:not([disabled]):hover { border-color: var(--dampad); background: var(--hovra); }
.knapp:not([disabled]):active { transform: translateY(1px); }
.knapp[disabled] { opacity: 0.55; cursor: default; }
.knapp-huvud { border-color: color-mix(in srgb, var(--accent) 70%, #000); background: var(--accent); color: var(--pa-accent); }
.knapp-huvud:not([disabled]):hover { border-color: color-mix(in srgb, var(--accent) 58%, #000); background: color-mix(in srgb, var(--accent) 86%, #000); color: var(--pa-accent); }
.knapp.tyst { border-color: var(--linje-stark); background: transparent; }
.knapp.tyst:not([disabled]):hover { border-color: var(--dampad); background: var(--hovra); color: var(--text); }
.knapp kbd { margin-left: 2px; opacity: 0.8; }
.knapp-huvud kbd { border-color: color-mix(in srgb, var(--pa-accent) 30%, transparent); background: color-mix(in srgb, var(--pa-accent) 10%, transparent); color: inherit; }
.knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.visafler { justify-self: start; }

.ikonknapp {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dampad);
  cursor: pointer;
  transition: background-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.ikonknapp:hover { background: var(--meny-hovra); color: var(--text); }
.ikonknapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ fält */

.falt { display: grid; gap: 6px; min-width: 0; }
.falt > span, .falt > label { font-size: var(--t-s); font-weight: 640; }
.falt small { color: var(--dampad); font-size: var(--t-s); line-height: 1.4; }
.falt input,
.falt textarea,
.falt select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--linje-stark);
  border-radius: 8px;
  background: var(--yta);
  font-size: var(--t-m);
  transition: border-color var(--t-snabb) var(--kurva), box-shadow var(--t-snabb) var(--kurva);
}
.falt input:hover, .falt textarea:hover, .falt select:hover { border-color: var(--dampad); }
.falt textarea { min-height: 88px; resize: vertical; line-height: 1.45; }
.falt select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--dampad) 50%), linear-gradient(135deg, var(--dampad) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.falt input::placeholder, .falt textarea::placeholder { color: var(--dampad); opacity: 1; }
.falt input:focus-visible, .falt textarea:focus-visible, .falt select:focus-visible { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-svag); }
.falt input[type="file"] { min-height: 0; padding: 8px; }
.falt [aria-invalid="true"] { border-color: var(--fel); box-shadow: 0 0 0 1px var(--fel); }
.falt [aria-invalid="true"]:focus-visible { border-color: var(--fel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fel) 22%, transparent); }
.falt-fel, .falt .falt-fel { color: var(--fel); font-size: var(--t-s); font-weight: 620; line-height: 1.4; }
.kryss { display: flex; align-items: center; gap: 10px; font-size: var(--t-m); cursor: pointer; }
.kryss input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.kryss.intyg { align-items: flex-start; line-height: 1.45; }
.kryss.intyg input { margin-top: 2px; }

.besked { min-height: 1.5em; color: var(--dampad); font-size: var(--t-s); }
.besked[data-slag="fel"] { color: var(--fel); font-weight: 600; }
.besked[data-slag="bra"] { color: var(--accent-text); font-weight: 600; }

/* ------------------------------------------------------------ ordmärket */
/* Ordmärket ligger inline i varje sida och ärver färgen från texten. Storleken sätts med HÖJD; bredden följer av
   proportionen, så att bilden aldrig sträcks. viewBoxen (5 19.016 323 174.15) börjar på MADEs överkant och FORM står
   103,2 enheter under MADE, 1,5 versalhöjder. Chrome lägger SVG:ns origo på hel enhetspixel, så alla fyra vågräta
   kanter landar på hela enhetspixlar när versalhöjden (68,8 enheter) är ett jämnt antal enhetspixlar (2026-10-15).
   Sidomenyn och inloggningen har startsidans höjder (start.css .ordmark-start), med egna höjder där tätheten annars
   ger udda pixlar. */
.ordmark { display: block; width: auto; max-width: none; color: var(--ord); }
.ordmark-rail { height: 50.625px; }
.ordmark-in { height: 50.625px; }
@media (min-resolution: 1.125dppx) and (max-resolution: 1.374dppx) {
  .ordmark-rail { height: 48.59375px; }
  .ordmark-in { height: 48.59375px; }
}
.ordmark-start { height: 72px; }

/* O:et med ögat (startsidans form): bläck med turkos pupill. Pupillen följer rullningen; bara dekor. */
.oga-form { fill: var(--text); }
.oga-pupill { fill: var(--accent); }

/* ------------------------------------------------------------ inloggningen */
/* En egen sida, inte startsidan: startsidans ordmärke i sidhuvudet, ett kort i mitten och Intelligensens O med
   agenterna i en bana runt det. Ögat blundar medan lösenordet skrivs. Rörelsen tar slut och står still vid minskad
   rörelse. */

.in-sida { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100dvh; }
.in-topp { padding: 28px var(--kant-ut) 0; }
.in-logo { display: inline-block; color: var(--ord); line-height: 0; text-decoration: none; }
.in { display: grid; place-items: center; padding: 24px 16px 48px; }
.in-kort {
  display: grid;
  gap: 20px;
  width: min(100%, 400px);
  padding: 32px 32px 24px;
  border: 1px solid var(--linje);
  border-radius: 18px;
  background: var(--yta);
  box-shadow: 0 1px 2px rgb(11 23 25 / 0.05), 0 20px 48px -36px rgb(11 23 25 / 0.35);
}
.in-kort form { display: grid; gap: 16px; }
.in-rubrik { font-size: var(--t-xl); font-weight: 760; font-stretch: 112%; line-height: 1.15; letter-spacing: -0.015em; text-align: center; }
.in-kort .knapp { width: 100%; min-height: 44px; }
.in-eller { display: flex; align-items: center; gap: 12px; color: var(--dampad); font-size: var(--t-s); }
.in-eller::before, .in-eller::after { content: ""; flex: 1; border-top: 1px solid var(--linje); }
.in-fel { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-m); background: var(--fel-yta); color: var(--fel); font-weight: 620; }
.in-fel svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.in-fel:focus { outline: none; }
.in-kort .besked { text-align: center; }
.in-fot { padding: 16px 16px 24px; color: var(--dampad); font-size: var(--t-s); text-align: center; }
.in-fot a { text-underline-offset: 3px; }
.in-fot a:hover { color: var(--text); }

/* Intelligensens O och agenterna i en bana: färgerna ur tokens, rörelsen bara transform och opacity. */
.in-hjarna { justify-self: center; width: 96px; height: 96px; overflow: visible; }
.in-hjarna-bana { fill: none; stroke: var(--linje-stark); stroke-width: 1; stroke-dasharray: 1.5 4.5; }
.in-hjarna-varv { transform-origin: 60px 60px; animation: in-varv 9s var(--kurva) 0.3s 2 both; }
.in-hjarna-agent { fill: var(--vilar); }
.in-hjarna-tand { fill: var(--accent); opacity: 0; animation: in-tand 2.4s ease-in-out 3 both; }
.in-hjarna-tand:nth-of-type(2) { animation-delay: 0.5s; }
.in-hjarna-tand:nth-of-type(3) { animation-delay: 1s; }
.in-hjarna-tand:nth-of-type(4) { animation-delay: 1.5s; }
.in-hjarna-tand:nth-of-type(5) { animation-delay: 2s; }
.in-hjarna-o { fill: var(--text); }
.in-hjarna-pupill { fill: var(--accent); animation: in-blick 6s ease-in-out 0.8s 2 both; transition: opacity var(--t-ui) var(--kurva); }
.in-hjarna-lock { fill: var(--text); opacity: 0; transition: opacity var(--t-ui) var(--kurva); }
.in-hjarna-streck { fill: none; stroke: var(--yta); stroke-width: 22; stroke-linecap: round; opacity: 0; transition: opacity var(--t-ui) var(--kurva); }
.in-sida:has(#in-losenord:focus) .in-hjarna-lock,
.in-sida:has(#in-losenord:focus) .in-hjarna-streck { opacity: 1; }
.in-sida:has(#in-losenord:focus) .in-hjarna-pupill { opacity: 0; }
@keyframes in-varv { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes in-tand { 0%, 100% { opacity: 0; } 30%, 60% { opacity: 1; } }
@keyframes in-blick { 0%, 20%, 100% { transform: translate(0, 0); } 35%, 50% { transform: translate(-16px, -8px); } 65%, 80% { transform: translate(14px, -12px); } }

/* ------------------------------------------------------------------ skalet */
/* Sidomenyn till vänster på bakgrunden, arbetet på en panel till höger. Under 1024 px blir sidomenyn en låda bakom
   menyknappen i raden överst, med samma meny i samma ordning. */

.skal { display: grid; grid-template-columns: var(--sidomeny) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.skal > .rail {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  height: 100dvh;
  padding: 20px 12px 12px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.skal > .rail > * { flex-shrink: 0; }
.sm-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 0 4px 4px 10px; }
.rail-logo { display: block; line-height: 0; color: var(--ord); text-decoration: none; }
.sm-stang { display: none; }

.sm-sok {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--linje);
  border-radius: 8px;
  background: var(--yta);
  color: var(--dampad);
  font-size: var(--t-s);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.sm-sok:hover { border-color: var(--linje-stark); color: var(--text); }
.sm-sok svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sm-sok span { flex: 1; }

/* Menyn: rummen i grupper. Det öppna rummet står på en panel med en hårfin ram, och dess delar är indragna under det. */
.meny { display: flex; flex-direction: column; gap: 1px; }
.sm-grupp { margin: 14px 10px 4px; color: var(--dampad); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.02em; }
.meny > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--dampad);
  font-weight: 560;
  text-decoration: none;
  transition: background-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva);
}
.meny > a::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ikon) center / contain no-repeat;
  mask: var(--ikon) center / contain no-repeat;
}
.meny > a:hover { background: var(--meny-hovra); color: var(--text); }
.meny > a[aria-current="page"] { background: var(--yta); color: var(--text); font-weight: 650; box-shadow: var(--skugga-1), 0 0 0 1px var(--linje); }
.meny > a[aria-current="page"]::before { background: var(--accent-text); }
.meny .siffra {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--pa-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.meny a[data-rum="aterkoppling"] .siffra { background: var(--meny-hovra); color: var(--dampad); }
/* Ikonerna är masker i textens färg: inga bildfiler och inga extra element i menyn. */
.meny a[data-rum="idag"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='14' height='12' rx='2.5'/%3E%3Cpath d='M3 8.5h14M7 2.5v3M13 2.5v3'/%3E%3Ccircle cx='10' cy='12.5' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.meny a[data-rum="teamet"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Cpath d='M10 2.5v2M10 15.5v2M2.5 10h2M15.5 10h2M4.7 4.7l1.4 1.4M13.9 13.9l1.4 1.4M4.7 15.3l1.4-1.4M13.9 6.1l1.4-1.4'/%3E%3C/svg%3E"); }
.meny a[data-rum="hjarnan"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M10 3c3.9 0 6.3 2 6.3 7s-2.4 7-6.3 7-6.3-2-6.3-7 2.4-7 6.3-7z'/%3E%3Ccircle cx='10' cy='11.3' r='2.1'/%3E%3C/svg%3E"); }
.meny a[data-rum="affarer"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='4' height='13' rx='1.2'/%3E%3Crect x='8.5' y='3.5' width='4' height='9' rx='1.2'/%3E%3Crect x='14' y='3.5' width='3' height='5' rx='1'/%3E%3C/svg%3E"); }
.meny a[data-rum="pengar"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2.5' y='5' width='15' height='10.5' rx='2.2'/%3E%3Cpath d='M2.5 8.5h15M5.5 12.5h3'/%3E%3C/svg%3E"); }
.meny a[data-rum="uppdateringar"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7.5 5.5h9M7.5 10h9M7.5 14.5h9'/%3E%3Ccircle cx='4' cy='5.5' r='.9' fill='black'/%3E%3Ccircle cx='4' cy='10' r='.9' fill='black'/%3E%3Ccircle cx='4' cy='14.5' r='.9' fill='black'/%3E%3C/svg%3E"); }
.meny a[data-rum="aterkoppling"] { --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-3.5 3v-3h0a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }

/* Det öppna rummets delar: indragna under rummet, med en hårfin linje till vänster. */
.sm-under { position: relative; display: grid; gap: 1px; margin: 2px 0 6px; padding-left: 28px; }
.sm-under::before { content: ""; position: absolute; left: 19px; top: 4px; bottom: 4px; border-left: 1px solid var(--linje-stark); }
.sm-under a { display: flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 7px; color: var(--dampad); font-size: var(--t-s); text-decoration: none; }
.sm-under a:hover { background: var(--meny-hovra); color: var(--text); }
.sm-under a[aria-current="true"] { color: var(--text); font-weight: 650; }
.sm-mer { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--dampad); font-size: var(--t-s); text-align: left; cursor: pointer; }
.sm-mer::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sm-mer:hover { background: var(--meny-hovra); color: var(--text); }
.sektion-rubrik { margin-top: 16px; font-size: var(--t-m); font-weight: 700; }

/* Agenterna nu: en O per agent, med läget i O:et. Bara den som jobbar rör sig. */
.sm-team { margin-top: auto; padding-top: 16px; }
.sm-team .sm-grupp { margin-top: 0; }
.sm-agenter { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 4px; }
.sm-agent { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; text-decoration: none; }
.sm-agent:hover { background: var(--meny-hovra); }
.sm-agent .agent-o { width: 22px; height: 22px; }
.sm-agent[data-lage="vantar"]::after, .sm-agent[data-lage="fel"]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--dom); box-shadow: 0 0 0 2px var(--natt); }
.sm-agent[data-lage="fel"]::after { background: var(--fel); }
.sm-team-text { min-height: 1.4em; margin: 4px 8px 0; color: var(--dampad); font-size: 0.75rem; line-height: 1.4; }

/* Agentens O: kroppen i bläck, pupillen i accent. Jobbar: pupillen tittar runt. Väntar: bärnsten. Fel: röd. Vilar: blundar. */
.agent-o { flex: none; width: 20px; height: 20px; overflow: visible; color: var(--text); }
.agent-o .o-kropp { fill: currentColor; }
.agent-o .o-pupill { fill: var(--accent); }
.agent-o .o-lock { fill: none; stroke: var(--yta); stroke-width: 26; stroke-linecap: round; display: none; }
.sm-agent .agent-o .o-lock { stroke: var(--natt); }
[data-lage="jobbar"] > .agent-o .o-pupill { animation: blick 7s ease-in-out infinite; }
[data-lage="vantar"] > .agent-o .o-pupill { fill: var(--dom); }
[data-lage="fel"] > .agent-o .o-pupill { fill: var(--fel); }
[data-lage="vilar"] > .agent-o { color: var(--vilar); }
[data-lage="vilar"] > .agent-o .o-pupill { fill: currentColor; r: 54px; }
[data-lage="vilar"] > .agent-o .o-lock { display: inline; }
@keyframes blick { 0%, 18%, 100% { transform: translate(0, 0); } 28%, 42% { transform: translate(-22px, -10px); } 56%, 70% { transform: translate(20px, -14px); } 82% { transform: translate(6px, 6px); } }

/* Kontot längst ned: e-posten, utseendet, enheterna, inställningarna och Logga ut i en ruta som öppnas uppåt. */
.konto { position: relative; padding-top: 4px; border-top: 1px solid var(--linje); }
.konto-knapp {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dampad);
  font-size: var(--t-s);
  text-align: left;
  cursor: pointer;
}
.konto-knapp:hover, .konto-knapp[aria-expanded="true"] { background: var(--meny-hovra); color: var(--text); }
.konto-knapp svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.konto-bokstav { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-svag); color: var(--accent-text); font-size: 0.75rem; font-weight: 760; }
.konto-namn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-meny {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--linje);
  border-radius: 12px;
  background: var(--yta);
  box-shadow: var(--skugga-pop);
}
.konto-epost { padding: 6px 8px 8px; font-weight: 650; overflow-wrap: anywhere; }
.konto-rubrik { padding: 6px 8px 2px; color: var(--dampad); font-size: 0.75rem; font-weight: 640; }
.konto-meny .segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2px 8px 6px; }
.konto-meny .segment button { padding: 0 6px; }
.konto-meny hr { margin: 6px 0; border: 0; border-top: 1px solid var(--linje); }
.meny-rad {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: var(--t-s);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.meny-rad:hover { background: var(--hovra); }
.nycklar { display: grid; gap: 2px; }
.nycklar li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; font-size: var(--t-s); }
.nycklar button { padding: 0; border: 0; background: transparent; color: var(--accent-text); font-weight: 620; cursor: pointer; }
.nycklar button:hover { text-decoration: underline; }

/* Segment: ett val av få, som Ljust, Mörkt och System eller filtren i kön. */
.segment { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 9px; background: var(--meny-hovra); }
.segment button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--dampad); font-size: var(--t-s); font-weight: 620; white-space: nowrap; cursor: pointer; transition: background-color var(--t-snabb) var(--kurva), color var(--t-snabb) var(--kurva); }
.segment button:hover { color: var(--text); }
.segment button[aria-checked="true"], .segment button[aria-pressed="true"] { background: var(--yta); color: var(--text); box-shadow: var(--skugga-1), 0 0 0 1px var(--linje); }

/* Raden överst på telefonen: menyknappen, rummets namn och sökningen. */
.mobilrad { display: none; }
.skugga { display: none; }

/* Arbetsytan: en panel med hårfin ram. Rubriken, raden för besked och rummet. */
.arbetsyta { min-width: 0; padding: 8px 8px 8px 0; }
.huvud {
  position: relative;
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
  min-height: calc(100vh - 16px);
  min-height: calc(100dvh - 16px);
  padding: 32px var(--kant-ut) 72px;
  border: 1px solid var(--linje);
  border-radius: var(--r-l);
  background: var(--yta);
  box-shadow: var(--skugga-1);
  outline: none;
}
.topp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; }
.topp h1 { grid-column: 1; font-size: var(--t-xl); font-weight: 760; font-stretch: 112%; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: anywhere; }
.topp h1:focus { outline: none; }
.under { grid-column: 1; color: var(--dampad); }
.under:empty { display: none; }
.topp-oga { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; overflow: visible; }
.huvud > .besked { min-height: 0; margin-top: -12px; font-size: var(--t-m); }
.huvud > .besked:empty { display: none; }
/* Raden Nytt i rummet (pulsen i portal.js) står kvar överst medan man rullar, så att den syns där man skriver. Samma
   yta och hårfina linje som panelen; på telefon står den under raden överst. */
.huvud > .nytt { position: sticky; top: 0; z-index: 3; justify-content: space-between; margin-top: -12px; padding: 8px 12px; border: 1px solid var(--linje); border-radius: var(--r-m); background: var(--yta); color: var(--text); box-shadow: var(--skugga-1); }
#vy { display: grid; gap: 24px; min-width: 0; }

/* ------------------------------------------------------------------ kort */
/* EN ram för allt som står i ett rum: hårfin kant, liten radie och samma inre luft. */
.kort { min-width: 0; padding: 20px 24px; border: 1px solid var(--linje); border-radius: var(--r-l); background: var(--yta); }
.kort.stor { display: grid; gap: 14px; }
.kort.stor h2 { font-size: 1.25rem; font-weight: 720; font-stretch: 106%; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.kort .om, .om { color: var(--dampad); }
.brodtext, .kort .brodtext { max-height: 16em; overflow: auto; padding: 12px 16px; border-radius: var(--r-m); background: var(--hovra); white-space: pre-wrap; overflow-wrap: anywhere; }
.etikett { display: inline-flex; align-items: center; gap: 8px; color: var(--dampad); font-size: var(--t-s); font-weight: 620; line-height: 1.4; }
.etikett::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.kort h3, .del h3 { margin-top: 8px; font-size: var(--t-m); font-weight: 700; }
.fel { color: var(--fel); }
.tal { font-size: 2.25rem; font-weight: 760; font-stretch: 84%; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stort-tal { display: flex; align-items: baseline; gap: 12px; }
.rad { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 10px 0; border-top: 1px solid var(--linje); }
.rad:first-of-type { border-top: 0; }
.rad span:last-child { color: var(--dampad); font-variant-numeric: tabular-nums; }

/* Läget i ord: en prick och ett ord. Bara det som jobbar pulserar. */
.ord { display: inline-flex; align-items: center; gap: 7px; color: var(--dampad); font-size: var(--t-s); font-weight: 620; white-space: nowrap; }
.ord::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vilar); }
.ord[data-lage="jobbar"] { color: var(--accent-text); }
.ord[data-lage="jobbar"]::before { background: var(--accent); animation: puls 2.4s ease-out infinite; }
.ord[data-lage="vantar"] { color: var(--dom); }
.ord[data-lage="vantar"]::before { background: var(--dom); }
.ord[data-lage="fel"] { color: var(--fel); }
.ord[data-lage="fel"]::before { background: var(--fel); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid var(--linje); border-radius: 999px; background: var(--hovra); color: var(--dampad); font-size: 0.75rem; font-weight: 620; }
.chip[data-lage="jobbar"] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-svag); color: var(--accent-text); }
.chip[data-lage="vantar"] { border-color: transparent; background: var(--dom-yta); color: var(--dom); }
.chip[data-lage="klar"] { border-color: var(--text); background: var(--text); color: var(--yta); }

/* Laddning: ett lugnt skelett i rätt form, utan skimmer. Fel: dagens ord och Försök igen. */
.skelett { display: grid; gap: 12px; }
.skelett span { display: block; height: 52px; border-radius: var(--r-m); background: var(--hovra); }
.skelett span:first-child { width: 40%; height: 20px; }
.skelett span:nth-child(3) { width: 86%; }
.felruta { display: grid; gap: 10px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--fel) 32%, transparent); border-radius: var(--r-l); background: var(--fel-yta); }
.felruta strong { color: var(--fel); }
.tomt-o { width: 48px; height: 48px; color: var(--linje-stark); }

/* "Inte klart än": det som saknar källa i dag står där det ska, i en ärlig ruta. */
.inte-klart { padding: 10px 14px; border: 1px dashed var(--linje-stark); border-radius: var(--r-m); color: var(--dampad); font-size: var(--t-s); }
.inte-klart strong { margin-right: 6px; color: var(--text); font-weight: 650; }

/* ------------------------------------------- delarna (progressiv visning) */
/* Rummets delar som en flikrad under rubriken: en del öppen i taget, i ytan under raden. Samma delar står indragna i
   sidomenyn. */
.delrad { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--linje); }
.delrad .knapp, .delrad .knapp.tyst {
  position: relative;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--dampad);
  font-size: var(--t-m);
  font-weight: 620;
}
.delrad .knapp:not([disabled]):hover { background: var(--hovra); color: var(--text); }
.delrad .knapp[aria-expanded="true"], .delrad .knapp[aria-expanded="true"]:hover { background: transparent; color: var(--text); }
.delrad .knapp[aria-expanded="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.detalj { min-width: 0; }
.detalj:empty { display: none; }
.del { display: grid; gap: 16px; min-width: 0; animation: tona-in var(--t-ui) var(--kurva); }
.del > .kort, .affar-del > .kort { display: grid; gap: 0; padding: 12px 20px; }
@keyframes tona-in { from { opacity: 0; transform: translateY(4px); } }

/* Listor: en rad per sak med hårfin ram. */
.lista { display: grid; gap: 8px; }
.lardom { display: grid; gap: 6px; min-width: 0; padding: 14px 18px; border: 1px solid var(--linje); border-radius: var(--r-m); background: var(--yta); }
.lardom > button { display: grid; gap: 2px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.lardom strong { font-weight: 650; overflow-wrap: anywhere; }
.lardom .om { font-size: var(--t-s); }
.lardom .text { padding-top: 6px; white-space: pre-wrap; }
.lardom .knappar .knapp, .del .knappar .knapp { min-height: 32px; padding: 0 12px; font-size: var(--t-s); }
.lardom.olast strong::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
.lardom.struken > button strong { text-decoration: line-through; color: var(--dampad); }
.lardom[data-slapp="ja"] { border-color: var(--accent); }
.lardom details > summary { display: grid; gap: 4px; list-style: none; cursor: pointer; }
.lardom details > summary::-webkit-details-marker { display: none; }
.lardom details[open] > summary { margin-bottom: 10px; }
.bolag-inre { display: grid; gap: 12px; padding-top: 8px; }
.kvittorad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kvittorad a, .lardom > a { color: var(--accent-text); }
.beslut summary { color: var(--dampad); cursor: pointer; }
.beslut ul { margin-top: 8px; }
.lanklik { padding: 0; border: 0; background: transparent; color: var(--accent-text); text-decoration: underline; cursor: pointer; }

/* Delarna i ett affärskort: ord i rad, det valda bär en linje under. */
.delar { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-self: stretch; padding: 0; border-bottom: 1px solid var(--linje); }
.delar button { min-height: 36px; margin-bottom: -1px; padding: 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--dampad); font-weight: 620; cursor: pointer; transition: color var(--t-snabb) var(--kurva), border-color var(--t-snabb) var(--kurva); }
.delar button:hover { color: var(--text); }
.delar button[aria-pressed="true"] { border-bottom-color: var(--text); color: var(--text); }
.delar.reglage { gap: 2px; padding: 2px; border: 0; border-radius: 9px; background: var(--meny-hovra); justify-self: start; }
.delar.reglage button { min-height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 7px; font-size: var(--t-s); }
.delar.reglage button[aria-pressed="true"] { background: var(--yta); box-shadow: var(--skugga-1), 0 0 0 1px var(--linje); }
.affar-del { display: grid; gap: 16px; }
.affar-del .lista { gap: 8px; }
.prisblad { display: grid; gap: 12px; padding-top: 8px; }
.uppdragsform { display: grid; gap: 14px; max-width: 640px; }
.uppdragsform > .om { margin: -6px 0 0; font-size: var(--t-s); }

/* Stegen i en plan. */
.raket { display: grid; gap: 12px; }
.steg { display: grid; gap: 8px; }
.steg-rad { display: grid; gap: 8px; padding: 14px 18px; border: 1px solid var(--linje); border-radius: var(--r-m); background: var(--yta); }
.steg-rad[data-lage="pagar"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.steg-rad[data-lage="klar"] { opacity: 0.8; }
.steg-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.steg.kompakt { gap: 4px; padding-top: 8px; }
.steg.kompakt li { font-size: var(--t-s); }

/* ------------------------------------------------------------------ Idag */
/* Bandet Sedan senast överst, sedan kön till vänster och det valda ärendet till höger. Dagens plan under kön. */

.band { display: grid; gap: 6px; min-width: 0; padding: 14px 18px 12px 20px; border: 1px solid var(--linje); border-radius: var(--r-l); background: linear-gradient(var(--yta), var(--hovra)); }
.band-huvud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.band-huvud h2 { font-size: var(--t-m); font-weight: 700; }
.band-tid { color: var(--dampad); font-size: var(--t-s); }
.spar-forklaring { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; color: var(--dampad); font-size: var(--t-s); }
.spar-forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.tecken { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.tecken-vantar { border-radius: 2px; background: var(--dom); }
.tecken-jobbar { background: var(--accent); }
.tecken-fel { border-radius: 1px; background: var(--fel); transform: rotate(45deg); }
.spar { min-height: 60px; min-width: 0; }
.spar svg { width: 100%; height: auto; overflow: visible; }
.spar-text { min-height: 1.4em; color: var(--dampad); font-size: var(--t-s); }
.band .inte-klart { margin-top: 4px; padding: 6px 10px; font-size: 0.75rem; }
.band-agenter { display: none; }
.band-vaxla { display: none; }

.s-namn { fill: var(--text); font-size: 13px; font-weight: 620; }
.s-lage { fill: var(--dampad); font-size: 13px; font-weight: 620; }
.s-lage[data-lage="jobbar"] { fill: var(--accent-text); }
.s-lage[data-lage="vantar"] { fill: var(--dom); }
.s-lage[data-lage="fel"] { fill: var(--fel); }
.s-linje { stroke: var(--linje-stark); stroke-width: 1; }
.s-nu { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 3; }
.s-nu-text { fill: var(--dampad); font-size: 12px; font-weight: 600; }
.s-pagar { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; animation: rinna 1.4s linear infinite; }
@keyframes rinna { to { stroke-dashoffset: -20; } }
.s-h { cursor: pointer; outline: none; }
.s-h .s-traff { fill: transparent; }
.s-h .s-form { fill: var(--text); transform-box: fill-box; transform-origin: center; transition: transform var(--t-snabb) var(--kurva); }
.s-h[data-typ="vantar"] .s-form { fill: var(--dom); }
.s-h[data-typ="jobbar"] .s-form { fill: var(--accent); }
.s-h[data-typ="fel"] .s-form { fill: var(--fel); }
.s-h .s-ring { fill: none; stroke: var(--accent-text); stroke-width: 2; opacity: 0; }
.s-h:hover .s-form, .s-h.aktiv .s-form { transform: scale(1.35); }
.s-h:focus-visible .s-ring, .s-h.aktiv .s-ring { opacity: 1; }
.s-h[data-typ="jobbar"] .s-puls { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring-ut 2.4s ease-out infinite; }
@keyframes ring-ut { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(2.2); } }
.s-rad.dimmad { opacity: 0.35; }

.skrivbord { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); align-items: start; gap: 24px; min-width: 0; }
.ko { display: grid; gap: 4px; min-width: 0; }
.ko-rubrik { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 0 12px; color: var(--dampad); font-size: var(--t-s); font-weight: 680; }
.ko-rubrik .antal { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--meny-hovra); color: var(--dampad); font-size: 0.6875rem; font-weight: 700; }
.ko-rubrik[data-grupp="ja"] .antal { background: var(--accent); color: var(--pa-accent); }
.ko-lista { display: grid; gap: 2px; }
.ko-rad {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-snabb) var(--kurva), opacity var(--t-ui) var(--kurva), transform var(--t-ui) var(--kurva);
}
.ko-rad:hover { background: var(--hovra); }
.ko-rad[aria-current="true"] { background: var(--vald); }
.ko-rad[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--accent); }
.ko-rad:focus-visible { outline-offset: -2px; }
.ko-rad.ut { opacity: 0; transform: translateX(12px); }
.ko-prick { justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--dom); }
.ko-rad[data-grupp="gora"] .ko-prick { border-radius: 2px; background: var(--dampad); }
.ko-text { min-width: 0; }
.ko-titel { display: block; overflow: hidden; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.ko-meta { display: block; overflow: hidden; color: var(--dampad); font-size: var(--t-s); text-overflow: ellipsis; white-space: nowrap; }
.ko-tom { padding: 16px 12px; color: var(--dampad); }
.ko .visafler { margin: 4px 0 0 46px; }

/* Det valda ärendet: rubriken, förhandsvisningen och knapparna längst ned. Kortet heter #valt som förut. */
.skrivbord > #valt, .skrivbord > .valt-tomt { position: sticky; top: 24px; }
#valt { min-height: 360px; align-content: start; padding: 24px 28px; box-shadow: 0 1px 2px rgb(11 23 25 / 0.04), 0 12px 32px -20px rgb(11 23 25 / 0.2); }
#valt:focus { outline: none; }
#valt > .knappar { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--linje); }
.valt-tillbaka { display: none; justify-self: start; min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: var(--dampad); font-weight: 620; cursor: pointer; }
.valt-tillbaka:hover { color: var(--text); }
.valt-tomt { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.valt-tomt h2 { font-size: var(--t-l); font-weight: 700; }

/* Toasten med Ångra: det som sagts skickas först när tiden gått ut. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 24px);
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: var(--text);
  color: var(--yta);
  font-weight: 620;
  box-shadow: var(--skugga-pop);
  transform: translateX(-50%);
  animation: toast-in var(--t-ui) var(--kurva);
}
.toast button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--yta) 14%, transparent); color: inherit; font-weight: 700; cursor: pointer; }
.toast button:hover { background: color-mix(in srgb, var(--yta) 24%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* Förhandsvisningarna i ärendet. */
.forhand { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--hovra); }
.forhand-text { max-height: 14em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.mejlbild { gap: 6px; }
.mejlbild .mejl-rad { display: flex; gap: 12px; font-size: var(--t-s); }
.mejlbild .mejl-rad > span:first-child { flex: none; width: 48px; color: var(--dampad); }
.mejlbild .mejl-rad > :last-child { min-width: 0; overflow-wrap: anywhere; }
.mejlbild .forhand-text { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--linje); }
.stegbild svg { width: 100%; max-width: 420px; height: auto; }
.stegbild line { stroke: var(--linje-stark); stroke-width: 2; }
.stegbild rect { fill: var(--yta); stroke: var(--linje-stark); stroke-width: 3; }
.stegbild .prick-klar rect { fill: var(--accent); stroke: var(--accent); }
.stegbild .aktiv rect { fill: var(--accent-svag); stroke: var(--accent-text); stroke-width: 4; }
.stegbild text { fill: var(--dampad); font-size: 12px; }
.stegbild .aktiv text { fill: var(--text); font-weight: 640; }

/* Dagens plan: möten och planstegen, en rad per sak. */
.plan { display: grid; gap: 12px; min-width: 0; }
.plan h3 { margin: 4px 0 0; font-size: var(--t-s); color: var(--dampad); }
.plan-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.plan-lista > li { min-width: 0; border-top: 1px solid var(--linje); }
.plan-lista > li:first-child { border-top: 0; }
.plan-rad { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 10px 0; overflow-wrap: anywhere; }
.plan-rad time { flex: none; min-width: 6.5em; color: var(--dampad); }
.plan-tom { margin: 0; }
.plan-steg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: color var(--t-snabb) var(--kurva); }
.plan-steg:hover { color: var(--accent-text); }
.plan-om { margin: 0; max-width: 68ch; font-size: var(--t-s); }
.plan-lank { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 620; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ko + .plan, .ko .plan { margin-top: 16px; }

/* ------------------------------------------------------------ Agenterna */
.rutnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rutnat .kort { display: grid; align-content: start; gap: 8px; }
.agent-kort-topp { display: flex; align-items: center; gap: 12px; }
.agent-kort-topp .agent-o { width: 30px; height: 30px; }
.rutnat h2 { font-size: var(--t-l); font-weight: 700; }
.rutnat .kr { color: var(--dampad); font-size: var(--t-s); }
.agent-senaste { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--linje); font-size: var(--t-s); }
.agent-senaste summary { color: var(--dampad); font-weight: 620; cursor: pointer; }
.agent-senaste li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.agent-senaste li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autonomi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.tavla .tavla-kort { display: grid; gap: 2px; width: 100%; padding: 10px 0; border: 0; background: transparent; text-align: left; }
.tavla button.tavla-kort { cursor: pointer; }
.tavla button.tavla-kort:hover strong { color: var(--accent-text); }
.tavla .tavla-kort strong { font-weight: 620; }
.tavla .tavla-kort .om { font-size: 0.75rem; }
.kpi { width: 100%; border-collapse: collapse; }
.kpi th, .kpi td { padding: 10px 8px; border-top: 1px solid var(--linje); text-align: left; vertical-align: middle; }
.kpi thead th { border-top: 0; color: var(--dampad); font-size: var(--t-s); font-weight: 620; }
.kpi td:first-of-type { display: flex; align-items: center; gap: 12px; }
.kpi-stapel { width: 120px; height: 10px; }
.kpi-stapel rect { fill: var(--bild-1); }
.kpi-stapel .spar { fill: var(--vald); }
.glom { display: grid; gap: 12px; }

/* --------------------------------------------------------------- Affärer */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pipe .kol { min-width: 0; padding: 12px; border-radius: var(--r-l); background: var(--hovra); }
.pipe .kol.forst { box-shadow: inset 0 2px 0 var(--accent); }
.pipe h3 { margin: 0 0 6px; color: var(--dampad); font-size: var(--t-s); font-weight: 680; }
.pipe ul { display: grid; gap: 6px; }
.pipe li button { width: 100%; padding: 10px 12px; border: 1px solid var(--linje); border-radius: var(--r-m); background: var(--yta); font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: border-color var(--t-snabb) var(--kurva); }
.pipe li button:hover { border-color: var(--linje-stark); color: var(--accent-text); }
.pipe .tomt { padding: 8px 4px; color: var(--dampad); }
.tavla .kol ul { display: grid; gap: 0; }
.tavla li + li { border-top: 1px solid var(--linje); }
.affar { display: grid; gap: 16px; }
.affar dl { display: grid; gap: 2px; }
.affar dt { color: var(--dampad); font-size: var(--t-s); font-weight: 620; }
.affar dd { margin-bottom: 8px; overflow-wrap: anywhere; }
.affar .anteckningar { display: grid; gap: 8px; }
.affar .anteckningar li { padding: 10px 14px; border-radius: var(--r-m); background: var(--hovra); }
.affar form { display: grid; gap: 12px; max-width: 560px; }

/* ----------------------------------------------------------- Intelligens */
.sokrad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sokrad .falt { flex: 1 1 280px; }

/* Kartan i tre spalter: källorna fyller Intelligens från vänster, slagen ligger runt kärnan och agenterna läser ut
   till höger. Varje nod är en knapp; kartan går att peka på, tabba till och flytta i med pilarna. */
.karta-figur { display: grid; gap: 6px; min-width: 0; padding: 16px 16px 12px; border: 1px solid var(--linje); border-radius: var(--r-l); background: radial-gradient(ellipse at 50% 50%, var(--yta) 0%, var(--hovra) 100%); }
.karta { min-width: 0; }
.karta svg, .hjarnkarta { width: 100%; height: auto; overflow: visible; }
.k-trad { fill: none; stroke: var(--linje-stark); stroke-width: 1.25; transition: stroke var(--t-snabb) var(--kurva), opacity var(--t-snabb) var(--kurva); }
.k-trad-ut { stroke-dasharray: 4 5; }
.k-trad.aktiv { stroke: var(--accent-text); stroke-width: 2; }
.k-ring { fill: none; stroke: var(--linje); stroke-dasharray: 2 5; }
.k-spalt { fill: var(--dampad); font-size: 13px; font-weight: 620; }
.k-nod { cursor: pointer; outline: none; }
.k-nod .k-yta { fill: var(--yta); stroke: var(--linje-stark); stroke-width: 1.5; transition: fill var(--t-snabb) var(--kurva), stroke var(--t-snabb) var(--kurva); }
.k-nod .k-yta-agent { fill: transparent; stroke: transparent; }
.k-nod text { fill: var(--text); font-size: 13px; font-weight: 620; }
.k-nod .k-antal { fill: var(--dampad); font-size: 12px; font-weight: 600; }
.k-nod:hover .k-yta, .k-nod.aktiv .k-yta { stroke: var(--accent-text); }
.k-nod:hover .k-yta-agent, .k-nod.aktiv .k-yta-agent { fill: var(--vald); stroke: transparent; }
.k-nod[aria-pressed="true"] .k-yta { fill: var(--accent-svag); stroke: var(--accent-text); stroke-width: 2; }
.k-fokus { fill: none; stroke: var(--accent-text); stroke-width: 2; opacity: 0; }
.k-nod:focus-visible .k-fokus { opacity: 1; }
.k-karna-yta { fill: var(--yta); stroke: var(--linje); }
.k-karna text { fill: var(--text); font-size: 13px; font-weight: 700; }
.k-karna .k-antal { fill: var(--dampad); font-weight: 600; }
.k-paket { fill: var(--accent); }
.k-paket-in { fill: var(--text); }
.karta svg.dimma .k-nod:not(.aktiv) { opacity: 0.45; }
.karta svg.dimma .k-trad:not(.aktiv) { opacity: 0.4; }
.karta-text { min-height: 1.4em; color: var(--text); font-size: var(--t-s); }

/* Intelligensens delar som flikar under rubriken: namnet och talet. Bilden står kvar för skärmläsaren som dekor. */
.delrad.rutor { display: flex; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid var(--linje); }
.ruta { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--dampad); font-weight: 620; text-align: left; cursor: pointer; transition: color var(--t-snabb) var(--kurva), background-color var(--t-snabb) var(--kurva); }
.ruta:hover { background: var(--hovra); color: var(--text); }
.ruta[aria-expanded="true"] { color: var(--text); }
.ruta[aria-expanded="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.ruta-bild { display: none; }
.ruta-tal { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--meny-hovra); color: var(--dampad); font-size: 0.6875rem; font-weight: 700; }
.hjarna-delad { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; min-width: 0; }
.hjarna-delad:has(> .detalj[data-del="lardomar"]) { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.karta-verktyg { display: flex; justify-content: flex-end; min-height: 28px; margin-bottom: -28px; position: relative; z-index: 2; }
.k-smal { font-size: 11.5px !important; }
.glyf { width: 40px; height: 40px; }
.glyf circle, .glyf line, .glyf polyline { fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.glyf .fylld { fill: var(--accent); stroke: var(--accent); }
.glyf .spar, .tidslinje .spar { stroke: var(--linje-stark); }
.glyf .bage, .tidslinje .bage { stroke: var(--accent); stroke-width: 5; }

/* Min utveckling. */
.tidslinje { width: 100%; height: auto; max-height: 150px; }
.tidslinje > line { stroke: var(--linje-stark); stroke-width: 2; }
.tidslinje .vecka { cursor: pointer; outline: none; }
.tidslinje .vecka circle { fill: var(--yta); stroke-width: 4; }
.tidslinje .vecka .spar { stroke: var(--linje-stark); }
.tidslinje .vecka .bage { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.tidslinje .vecka.vald .spar { fill: var(--accent-svag); stroke: var(--accent-text); }
.tidslinje .vecka:focus-visible .spar { stroke: var(--accent-text); stroke-width: 6; }
.tidslinje text { fill: var(--dampad); font-size: 14px; font-weight: 560; }
.tidslinje .vecka-nr { fill: var(--text); font-size: 17px; font-weight: 700; }
.tidslinje .vecka.vald text { fill: var(--text); }
.veckan, .vanor, .omtag { display: grid; gap: 12px; }
.veckan > a.knapp { justify-self: start; }
.bockar { display: grid; gap: 6px; max-width: 560px; }
.bock { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--linje); border-radius: var(--r-m); background: var(--yta); text-align: left; cursor: pointer; }
.bock:hover { border-color: var(--linje-stark); }
.bock-ruta { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--linje-stark); border-radius: 5px; }
.bock[aria-pressed="true"] .bock-ruta { border-color: var(--accent); background: var(--accent); }
.bock[aria-pressed="true"] .bock-ruta::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--pa-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chipbockar { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-width: none; }
.chipbockar .bock { min-height: 44px; font-size: var(--t-s); }
.tre { display: grid; gap: 6px; padding-left: 1.4em; list-style: decimal; }
.omtag .diagram svg { max-width: 380px; }

/* ---------------------------------------------------------------- diagram */
.diagram { display: grid; gap: 6px; margin: 4px 0 8px; min-width: 0; }
.diagram svg { width: 100%; height: auto; max-height: 200px; }
.diagram .stapel { cursor: pointer; outline: none; }
.diagram .stapel rect { fill: var(--bild-1); opacity: 0.6; transition: opacity var(--t-snabb) var(--kurva); }
.diagram .stapel.idag rect { opacity: 0.9; }
.diagram .stapel:hover rect, .diagram .stapel:focus-visible rect { opacity: 1; }
.diagram .stapel:focus-visible rect { stroke: var(--accent-text); stroke-width: 2; }
.diagram .stapel text { fill: var(--dampad); font-size: 12px; }
.diagram .stapel rect.yta { fill: transparent; opacity: 1; }
.diagram .stapel:hover rect.yta, .diagram .stapel:focus-visible rect.yta { fill: var(--hovra); stroke: none; }
.diagram .stapel rect.d2, .liggande rect.d2, .fprick.d2 { fill: var(--bild-2); background: var(--bild-2); }
.diagram .stapel rect.d3, .liggande rect.d3, .fprick.d3 { fill: var(--bild-3); background: var(--bild-3); }
.diagram .stapel.vald rect { opacity: 1; }
.diagram svg > line { stroke: var(--linje-stark); stroke-width: 1.5; }
.diagram-text { display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 1.5em; color: var(--dampad); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.liggande { display: grid; gap: 6px; }
.liggande-rad { display: grid; grid-template-columns: minmax(80px, 200px) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 2px 4px; border-radius: 6px; outline: none; }
.liggande-rad:hover, .liggande-rad:focus-visible { background: var(--hovra); }
.liggande-rad > span:first-child { overflow: hidden; color: var(--dampad); font-size: var(--t-s); text-overflow: ellipsis; white-space: nowrap; }
.liggande-rad svg { width: 100%; height: 14px; max-height: none; }
.liggande rect { fill: var(--bild-1); }
.liggande rect.spar { fill: var(--vald); }
.forklaring { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--dampad); font-size: var(--t-s); }
.forklaring li { display: flex; align-items: center; gap: 8px; }
.fprick { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--bild-1); }

/* ----------------------------------------------------------------- Pengar */
.oversikt { display: grid; gap: 12px; }
.arval { display: flex; justify-content: flex-end; }
.arval .falt { width: min(100%, 220px); }
.nyckeltal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nyckel { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 18px; border: 1px solid var(--linje); border-radius: var(--r-m); background: var(--yta); color: var(--text); font: inherit; text-align: left; }
button.nyckel { cursor: pointer; transition: background-color var(--t-snabb) var(--kurva); }
button.nyckel:hover { background: var(--hovra); }
.nyckel .om { color: var(--dampad); font-size: var(--t-s); font-weight: 620; }
.nyckel strong { font-size: 1.375rem; font-weight: 720; font-stretch: 84%; letter-spacing: -0.01em; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nyckel[data-lage="fel"] strong { color: var(--fel); }
.nyckel[data-lage="vantar"] strong { color: var(--dom); }
.bokrad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--t-s); }
.del .om, .del .fel { font-size: var(--t-s); }
.del > .om, .lardom > .om { color: var(--dampad); }
.del h3 { margin-top: 12px; }
.marke { justify-self: start; padding: 2px 8px; border: 1px solid var(--linje-stark); border-radius: 999px; color: var(--dampad); font-size: 0.75rem; font-weight: 620; }
.marke[data-kvitto="saknas"], .marke-knapp[data-kvitto="saknas"] { border-color: var(--fel); color: var(--fel); }
.marke-knapp[aria-pressed="true"] { background: var(--vald); }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter > .falt { flex: 1 1 160px; }
.filter > .kryss { min-height: 40px; }
.del .knappar .falt { flex: 0 1 260px; }
.radform { display: grid; gap: 14px; max-width: 760px; }
.radform-rad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.radform-mer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
.ibgrupp { display: grid; gap: 12px; margin: 0; padding: 16px 20px; border: 1px solid var(--linje); border-radius: var(--r-m); }
.ibgrupp legend { padding: 0 6px; color: var(--dampad); font-size: var(--t-s); font-weight: 620; }
.rulla { max-width: 100%; overflow-x: auto; }
.tabell { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.tabell th, .tabell td { padding: 8px 12px; border-top: 1px solid var(--linje); text-align: left; vertical-align: top; font-weight: 420; }
.tabell thead th { border-top: 0; color: var(--dampad); font-size: 0.75rem; font-weight: 620; }
.tabell tbody tr:hover { background: var(--hovra); }
.tabell .hoger { text-align: right; white-space: nowrap; }
.tabell .modell { white-space: nowrap; }
.tabell .grupp th, .tabell .grupp td, .tabell .summa th, .tabell .summa td { font-weight: 650; }
.tabell .summa th, .tabell .summa td { border-top: 2px solid var(--linje-stark); }
.kalla { display: grid; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linje); }
.kalla h3 { margin: 0; }
.kalla-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kalla-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border: 1px solid var(--linje); border-radius: var(--r-m); }
.kalla-rad:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kalla-val { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; font-weight: 620; }
.kalla-val input { accent-color: var(--accent); }
.kalla-rad small { flex: 1 1 140px; color: var(--dampad); font-size: var(--t-s); }
.kalla-text { flex: 1 1 100%; margin: 0; padding-top: 8px; border-top: 1px solid var(--linje); font-size: var(--t-s); }
.kalla-vidare { margin: 0; max-width: 68ch; }
.nasta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 16px; border: 1px solid var(--linje); border-radius: var(--r-m); background: transparent; color: var(--dampad); text-align: left; cursor: pointer; }
.nasta:hover { border-color: var(--linje-stark); color: var(--text); }

@media print {
  .rail, .mobilrad, .topp, .besked, .delrad, .delar, .knappar, .pipe, .visafler, .oversikt, .filter, .toast { display: none !important; }
  .skal { display: block; }
  .arbetsyta { padding: 0; }
  .huvud, .kort { border: 0; box-shadow: none; }
}
/* Idag: kalendern (kalender.js). Madeforms tokens till kalenderns variabler; reglerna under är desamma i Micropower. */
.kal-rot { min-width: 0; }
.kal {
  --kal-yta: var(--yta); --kal-yta-2: var(--yta-2); --kal-linje: var(--linje); --kal-linje-stark: var(--linje-stark);
  --kal-text: var(--text); --kal-dampad: var(--dampad); --kal-accent: var(--turkos); --kal-accent-text: var(--turkos-text);
  --kal-accent-svag: var(--turkos-svag); --kal-varn: var(--dom); --kal-varn-svag: color-mix(in srgb, var(--dom) 14%, transparent);
  --kal-fel: var(--fel); --kal-fokus: color-mix(in srgb, var(--bild-3) 16%, transparent); --kal-fokus-kant: var(--bild-3);
  --kal-knapp: var(--knapp); --kal-knapp-text: var(--knapp-text); --kal-knapp-hover: var(--knapp-hover);
  --kal-radie: var(--rad); --kal-radie-stor: var(--kort); --kal-pad: 22px;
}
/* Idag-kalendern (kalender.js, samma regler i Madeform och Micropower). Färgerna kommer från --kal-* ovanför. */
.kal { --kal-tim: 64px; --kal-axel: 48px; display: grid; gap: 12px; min-width: 0; padding: var(--kal-pad); border: 1px solid var(--kal-linje); border-radius: var(--kal-radie-stor); background: var(--kal-yta); color: var(--kal-text); }
.kal-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kal-titelrad { display: flex; align-items: center; gap: 10px; }
.kal-rubrik { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.kal-verktyg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kal-vaxel { display: inline-flex; padding: 3px; border: 1px solid var(--kal-linje); border-radius: 999px; background: var(--kal-yta-2); }
.kal-vaxelknapp { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--kal-dampad); font: inherit; font-weight: 620; cursor: pointer; }
.kal-vaxelknapp[aria-pressed="true"] { background: var(--kal-yta); color: var(--kal-text); box-shadow: 0 0 0 1px var(--kal-linje-stark); }
.kal-nav { display: inline-flex; gap: 6px; }
.kal-knapp { min-height: 36px; padding: 0 14px; border: 1px solid var(--kal-linje-stark); border-radius: 999px; background: transparent; color: var(--kal-text); font: inherit; font-weight: 620; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.kal-knapp:hover { border-color: var(--kal-text); }
.kal-knapp[disabled] { opacity: 0.5; cursor: default; }
.kal-knapp-primar { border-color: var(--kal-knapp); background: var(--kal-knapp); color: var(--kal-knapp-text); }
.kal-knapp-primar:hover { border-color: var(--kal-knapp-hover); background: var(--kal-knapp-hover); }
.kal-datum { margin: 0; color: var(--kal-dampad); font-weight: 600; }
.kal-om { margin: 0; max-width: 68ch; color: var(--kal-dampad); font-size: 0.9375rem; }
.kal-varning { margin: 0; padding: 10px 14px; border: 1px solid var(--kal-varn); border-radius: var(--kal-radie); background: var(--kal-varn-svag); color: var(--kal-text); font-weight: 600; }
.kal-kvitto:focus-visible { outline: 2px solid var(--kal-fokus-kant); outline-offset: 2px; }
.kal-kvitto { margin: 0; color: var(--kal-accent-text); font-weight: 600; }
.kal-kvitto-fel, .kal-fel { color: var(--kal-fel); }
.kal-forklaring { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--kal-dampad); font-size: 0.8125rem; }
.kal-forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.kal-forklaring li::before { content: ""; width: 14px; height: 10px; border: 1px solid var(--kal-linje-stark); border-radius: 3px; background: var(--kal-yta-2); }
.kal-forklaring [data-typ="bokat"]::before { border-color: var(--kal-accent); background: var(--kal-accent-svag); }
.kal-forklaring [data-typ="forslag"]::before { border: 1.5px dashed var(--kal-accent-text); background: transparent; }
.kal-forklaring [data-typ="fokus"]::before { border-color: var(--kal-fokus-kant); background: var(--kal-fokus); }
.kal-forklaring [data-typ="ledig"]::before { border-style: dotted; background: transparent; }
.kal-yta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 16px; min-width: 0; }
.kal[data-vy="vecka"] .kal-yta { grid-template-columns: minmax(0, 1fr); }
.kal-skal { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--kal-linje); border-radius: var(--kal-radie); background: var(--kal-yta); }
.kal-rutnat { display: grid; grid-template-columns: var(--kal-axel) repeat(var(--kal-dagar, 1), minmax(0, 1fr)); }
.kal[data-vy="vecka"] .kal-rutnat { min-width: calc(var(--kal-axel) + var(--kal-dagar, 5) * 132px); }
.kal-dag { min-width: 0; border-left: 1px solid var(--kal-linje); }
.kal-dagrubrik { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 36px; padding: 0 8px; border-bottom: 1px solid var(--kal-linje); color: var(--kal-dampad); font-size: 0.8125rem; font-weight: 640; }
.kal-dag[data-idag="ja"] .kal-dagrubrik { color: var(--kal-text); }
.kal-fullmarke { padding: 0 8px; border: 1px solid var(--kal-varn); border-radius: 999px; background: var(--kal-varn-svag); color: var(--kal-text); font-size: 0.75rem; }
.kal-kolumn { position: relative; height: calc(11 * var(--kal-tim)); background-image: repeating-linear-gradient(to bottom, var(--kal-linje) 0 1px, transparent 1px var(--kal-tim)); }
.kal-axel .kal-kolumn { background: none; }
.kal-timme { position: absolute; right: 8px; transform: translateY(-50%); color: var(--kal-dampad); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.kal-timme:first-child { transform: none; }
.kal-block { position: absolute; left: 4px; right: 4px; display: flex; flex-direction: column; min-height: 18px; overflow: hidden; padding: 3px 8px; border: 1px solid var(--kal-linje-stark); border-radius: 8px; background: var(--kal-yta-2); color: var(--kal-text); font: inherit; font-size: 0.8125rem; line-height: 1.25; text-align: left; }
.kal-btid { color: var(--kal-dampad); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.kal-btitel { overflow: hidden; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.kal-btyp { color: var(--kal-dampad); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.kal-block[data-typ="bokat"] { border-color: var(--kal-accent); background: var(--kal-accent-svag); }
.kal-block[data-typ="last"] { opacity: 0.85; }
.kal-block[data-typ="fokus"] { border-color: var(--kal-fokus-kant); background: var(--kal-fokus); }
.kal-block[data-typ="forslag"] { z-index: 2; border: 1.5px dashed var(--kal-accent-text); background: var(--kal-yta); cursor: pointer; }
.kal-block[data-typ="forslag"]:hover { background: var(--kal-accent-svag); }
.kal-block[data-typ="ledig"] { z-index: 0; padding: 2px 8px; border: 1px dotted var(--kal-linje-stark); background: transparent; }
.kal-block[data-kort] { flex-direction: row; align-items: center; gap: 6px; min-height: 0; padding: 0 8px; font-size: 0.75rem; line-height: 1.1; white-space: nowrap; }
.kal-block[data-kort] .kal-btid { flex: none; }
.kal-block[data-kort] .kal-btitel { flex: 1 1 auto; min-width: 0; }
.kal-block[data-kort] .kal-btyp { display: none; }
/* Under 30 min (15 min i 1440-rutnätet = ca 13 px, kant 1 px + 1 px): bara titeln, 10 px hög rad. Tid och etikett ligger i title. */
.kal-block[data-kort="mini"] { box-sizing: border-box; padding-block: 0; border-width: 1px; font-size: 0.6875rem; line-height: 1; }
.kal-block[data-kort="mini"] .kal-btid { display: none; }
@media (min-width: 900px) { .kal:not([data-vy="vecka"]) .kal-skal { position: sticky; top: 16px; } }
.kal-nu { position: absolute; left: 0; right: 0; z-index: 3; height: 0; border-top: 2px solid var(--kal-fel); }
.kal-forslag { display: grid; gap: 10px; min-width: 0; }
.kal-underrubrik { margin: 0; font-size: 1rem; font-weight: 700; }
.kal-kortlista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kal-kort { display: grid; gap: 6px; min-width: 0; padding: 12px 14px; border: 1.5px dashed var(--kal-accent-text); border-radius: var(--kal-radie); background: transparent; }
.kal-korttopp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--kal-dampad); font-size: 0.8125rem; }
.kal-kategori { color: var(--kal-accent-text); font-weight: 640; letter-spacing: 0.06em; text-transform: uppercase; }
.kal-korttopp time { font-weight: 600; font-variant-numeric: tabular-nums; }
.kal-klass { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--kal-linje-stark); border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
.kal-korttitel { font-weight: 640; overflow-wrap: anywhere; }
.kal-varfor { margin: 0; color: var(--kal-dampad); font-size: 0.875rem; }
.kal-underlag summary { color: var(--kal-accent-text); font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.kal-underlag ul, .kal-underlag ol { display: grid; gap: 4px; margin: 8px 0 0 1.2em; padding: 0; color: var(--kal-dampad); font-size: 0.875rem; }
.kal-underlag ul { list-style: disc; }
.kal-underlag ol { list-style: decimal; }
.kal-knappar { display: flex; flex-wrap: wrap; gap: 8px; }
.kal :focus-visible, .kal-kort:focus { outline: 2px solid var(--kal-accent-text); outline-offset: 2px; }
@media (width <= 900px) { .kal-yta { grid-template-columns: minmax(0, 1fr); } }
@media (width <= 640px) {
  .kal { --kal-tim: 46px; --kal-axel: 40px; padding: 14px; }
  .kal-block { padding: 2px 6px; }
  .kal-block .kal-btyp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kal-knapp { transition: none; } }
/* Portalens kalender får portalens luft; reglerna ovanför är desamma som i Micropower. */
.kal { --kal-pad: 20px; }
.kal-rubrik { font-weight: 720; }

/* ---------------------------------------------------------- uppdateringar */
/* Listan i rummet Uppdateringar: en rad per dag, hela raden är länken till dagsidan. */
.uppd-lista { display: grid; max-width: 820px; border: 1px solid var(--linje); border-radius: var(--r-l); overflow: hidden; }
.uppd-lista > li + li { border-top: 1px solid var(--linje); }
.uppd-rad {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 24px;
  padding: 14px 20px;
  background: var(--yta);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-snabb) var(--kurva);
}
.uppd-rad:hover { background: var(--hovra); }
.uppd-dag { color: var(--dampad); font-size: var(--t-s); font-weight: 620; font-variant-numeric: tabular-nums; }
.uppd-rubrik { font-weight: 650; overflow-wrap: anywhere; }
.uppd-antal { color: var(--accent-text); font-size: var(--t-s); font-weight: 620; white-space: nowrap; }
.uppd-tomt { display: grid; gap: 8px; max-width: 640px; padding: 24px; border: 1px dashed var(--linje-stark); border-radius: var(--r-l); }
.uppd-lista + .visafler { justify-self: start; }

/* Dagsidan: eget dokument utan skript (CSP default-src 'none'). Bara de saneringen släpper igenom stylas här. */
.dagsida-ram { display: grid; gap: 20px; max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--mellan) 80px; }
.dagsida-tillbaka { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--linje-stark); border-radius: 8px; background: var(--yta); color: var(--text); font-size: var(--t-m); font-weight: 620; text-decoration: none; transition: background-color var(--t-snabb) var(--kurva), border-color var(--t-snabb) var(--kurva); }
.dagsida-tillbaka::before { content: "←"; }
.dagsida-tillbaka:hover { border-color: var(--dampad); background: var(--hovra); }
.dagsida-meta { color: var(--dampad); font-size: var(--t-m); font-weight: 600; }
.dagsida-text { display: grid; gap: 16px; overflow-wrap: anywhere; }
.dagsida-text h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 780; font-stretch: 112%; line-height: 1.1; letter-spacing: -0.02em; }
.dagsida-text h2 { margin-top: 12px; font-size: 1.375rem; font-weight: 740; line-height: 1.2; letter-spacing: -0.01em; }
.dagsida-text h3 { margin-top: 8px; font-size: 1.0625rem; font-weight: 680; }
.dagsida-text ul, .dagsida-text ol { display: grid; gap: 8px; padding-left: 1.4em; }
.dagsida-text ul { list-style: disc; }
.dagsida-text ol { list-style: decimal; }
.dagsida-text li::marker { color: var(--accent-text); }
.dagsida-text a { color: var(--accent-text); text-underline-offset: 3px; }
.dagsida-text code { padding: 1px 6px; border-radius: 4px; background: var(--yta-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
.dagsida-text figure { display: grid; gap: 10px; margin-top: 8px; }
.dagsida-text img { height: auto; border: 1px solid var(--linje-stark); border-radius: var(--r-m); background: var(--yta); }
.dagsida-text figcaption { color: var(--dampad); font-size: var(--t-m); }

@media (max-width: 640px) {
  .uppd-rad { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .uppd-rubrik { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------- återkoppling */
/* Rummet Återkoppling: en mening, tre siffror, ett kort per rapport. Adminens lista ligger bakom "Alla rapporter". */
.ak-oversikt { display: grid; gap: 20px; max-width: 820px; }
.ak-mening { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.ak-siffror { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; margin: 0; border: 1px solid var(--linje); border-radius: var(--r-l); overflow: hidden; }
.ak-siffror > div { display: grid; gap: 4px; padding: 14px 18px; border-left: 1px solid var(--linje); }
.ak-siffror > div:first-child { border-left: 0; }
.ak-siffror dt { color: var(--dampad); font-size: var(--t-s); font-weight: 620; }
.ak-siffror dd { margin: 0; }
.ak-siffror .tal { font-size: 1.75rem; }
.ak-form { display: grid; gap: 14px; max-width: 640px; }
.ak-del { display: grid; gap: 14px; max-width: 820px; margin-top: 24px; }
.ak-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ak-kort { display: grid; gap: 6px; padding: 16px 20px; border: 1px solid var(--linje); border-radius: var(--r-l); background: var(--yta); }
.ak-kort.ak-ny { box-shadow: inset 3px 0 0 var(--accent); }
.ak-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ak-nytt { color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.ak-titel { font-size: var(--t-m); font-weight: 680; overflow-wrap: anywhere; }
.ak-meta { color: var(--dampad); font-size: var(--t-s); }
.ak-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ak-senast { display: flex; flex-wrap: wrap; gap: 4px; color: var(--dampad); font-size: var(--t-s); }
.ak-senast time, .ak-logg time { font-variant-numeric: tabular-nums; }
.ak-citat { flex-basis: 100%; padding: 8px 12px; border-left: 2px solid var(--linje-stark); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ak-lank { justify-self: start; color: var(--accent-text); font-weight: 640; text-underline-offset: 3px; }
.ak-svar { display: grid; gap: 12px; max-width: 640px; }
.ak-tack { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ak-tack a { color: var(--accent-text); font-weight: 640; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ak-tack span { color: var(--dampad); }
.ak-tomt { max-width: 720px; }
.ak-tomt .ak-form { margin-top: 8px; }
.ak-admin { display: grid; gap: 16px; max-width: 820px; margin-top: 24px; }
.ak-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ak-filter .falt { flex: 1 1 180px; }
.ak-logg { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--linje); list-style: none; font-size: var(--t-s); }
.ak-logg li { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 640px) {
  .ak-kort { padding: 14px 16px; }
  .ak-siffror > div { padding: 12px; }
}

/* ------------------------------------------------------- kommandopaletten */
/* Ctrl K, ⌘K eller /: gå till ett rum eller en del, eller gör det vanligaste. Pilarna väljer, Enter öppnar. */
.palett-skugga {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 12vh 12px 12px;
  background: color-mix(in srgb, #0b1719 36%, transparent);
  animation: tona var(--t-snabb) var(--kurva);
}
@keyframes tona { from { opacity: 0; } }
.palett { width: min(620px, 100%); overflow: hidden; border: 1px solid var(--linje); border-radius: 14px; background: var(--yta); box-shadow: var(--skugga-pop); animation: pop-in var(--t-ui) var(--kurva); }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(0.985); } }
.palett-sok { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--linje); }
.palett-sok svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--dampad); stroke-width: 1.6; stroke-linecap: round; }
.palett-sok input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; font-size: 1rem; }
.palett-sok input:focus { outline: none; }
.palett-lista { max-height: min(400px, 56vh); overflow-y: auto; padding: 8px; }
.palett-grupp { padding: 8px 8px 4px; color: var(--dampad); font-size: 0.75rem; font-weight: 650; }
.palett-post { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer; }
.palett-post span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palett-post[aria-selected="true"] { background: var(--vald); }
.palett-tom { padding: 24px 16px; color: var(--dampad); text-align: center; }
.palett-fot { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 16px; border-top: 1px solid var(--linje); color: var(--dampad); font-size: 0.75rem; }
.palett-fot kbd { margin: 0 2px; }

/* ------------------------------------------------------------ smalare skärm */

@media (max-width: 1240px) {
  .skrivbord { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .hjarna-delad:has(> .detalj[data-del="lardomar"]) { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
}
@media (max-width: 1100px) {
  .hjarna-delad:has(> .detalj[data-del="lardomar"]) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .skal { grid-template-columns: minmax(0, 1fr); }
  .skal > .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(86vw, 320px);
    background: var(--natt);
    box-shadow: var(--skugga-pop);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--t-ui) var(--kurva), visibility 0s linear var(--t-ui);
  }
  .meny-oppen .skal > .rail { transform: none; visibility: visible; transition: transform var(--t-ui) var(--kurva); }
  .sm-stang { display: inline-grid; }
  .meny-oppen .skugga { position: fixed; inset: 0; z-index: 55; display: block; background: color-mix(in srgb, #0b1719 32%, transparent); animation: tona var(--t-snabb) var(--kurva); }
  .mobilrad {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 6px;
    border-bottom: 1px solid var(--linje);
    background: color-mix(in srgb, var(--yta) 94%, transparent);
    backdrop-filter: blur(8px);
  }
  .mobilrad .ikonknapp { width: 44px; height: 44px; }
  .mobilrad-titel { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .arbetsyta { padding: 0; }
  .huvud { min-height: calc(100dvh - 56px); padding: 24px 20px 64px; border: 0; border-radius: 0; box-shadow: none; }
  .huvud > .nytt { top: 56px; }
  .rail .meny > a { min-height: 44px; }
  .sm-under a { min-height: 40px; }
}

@media (hover: none), (max-width: 860px) {
  .knapp kbd, .sm-sok kbd { display: none; }
}

@media (max-width: 900px) {
  /* Ordmärket i lådan har startsidans höjd på telefon (14 px versalhöjd). */
  .ordmark-rail { height: 35.4375px; }
  .ordmark-in { height: 35.4375px; }
  @media (min-resolution: 1.125dppx) and (max-resolution: 1.374dppx) {
    .ordmark-rail { height: 36.4375px; }
    .ordmark-in { height: 36.4375px; }
  }
  @media (min-resolution: 1.375dppx) and (max-resolution: 1.749dppx) {
    .ordmark-rail { height: 33.75px; }
    .ordmark-in { height: 33.75px; }
  }
  .skrivbord { grid-template-columns: minmax(0, 1fr); }
  .skrivbord > #valt, .skrivbord > .valt-tomt { display: none; }
  .skrivbord.visar-valt > .ko { display: none; }
  .skrivbord.visar-valt > #valt { position: static; display: grid; min-height: 0; padding: 20px; }
  .valt-tillbaka { display: inline-flex; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nyckeltal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radform-rad, .radform-mer { grid-template-columns: minmax(0, 1fr); }
  .liggande-rad { grid-template-columns: minmax(72px, 112px) minmax(0, 1fr) auto; gap: 8px; }
  .delrad { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .delrad .knapp, .delrad .ruta { flex: none; }
}

/* Agenter (agentmallen): på smal skärm blir tabellens rader kort, så att inget rullar i sidled. */
@media (max-width: 640px) {
  .agenttabell thead { display: none; }
  .agenttabell, .agenttabell tbody, .agenttabell tr, .agenttabell th, .agenttabell td { display: block; }
  .agenttabell tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--linje); }
  .agenttabell th, .agenttabell td { padding: 0; border-top: 0; }
  .agenttabell th, .agenttabell td:nth-of-type(2) { grid-column: 1 / -1; }
  .agenttabell td.hoger { text-align: left; }
  .agenttabell td[data-etikett]::before { content: attr(data-etikett) " "; color: var(--dampad); font-size: var(--t-s); font-weight: 600; }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .falt input, .falt select, .falt textarea { min-height: 44px; font-size: 1rem; }
  .knapp { min-height: 44px; }
  .lardom .knappar .knapp, .del .knappar .knapp { min-height: 40px; }
  .in-sida .in { align-items: start; padding: 20px 12px 32px; }
  .in-kort { padding: 24px 20px 20px; border-radius: 16px; }
  .in-topp { padding: 20px 20px 0; }
  .pipe { grid-template-columns: minmax(0, 1fr); }
  .ko-rad { min-height: 56px; }
  .band { padding: 12px 14px 10px; border-radius: var(--r-m); }
  .band-huvud .spar-forklaring { display: none; }
  .band-vaxla { display: inline-grid; margin-left: auto; }
  .band:not(.oppen) .spar, .band:not(.oppen) .spar-text, .band:not(.oppen) [data-paus] { display: none; }
  .band:not(.oppen) .band-agenter { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 4px; }
  .band.oppen .band-huvud .spar-forklaring { display: flex; flex-basis: 100%; order: 10; margin: 4px 0 0; }
  .band-agenter a { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 8px 2px; border-radius: var(--r-m); color: var(--dampad); font-size: 0.75rem; font-weight: 620; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: anywhere; hyphens: auto; }
  .band-agenter a:hover { background: var(--hovra); color: var(--text); }
  .band-agenter .agent-o { width: 24px; height: 24px; }
  .band-vaxla svg { transition: transform var(--t-ui) var(--kurva); }
  .band.oppen .band-vaxla svg { transform: rotate(180deg); }
  .topp h1 { font-size: 1.5rem; }
  .toast { bottom: 16px; }
  .skrivbord.visar-valt > #valt > .knappar .knapp { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- rörelse */
/* Rubriken tonar in när man byter rum (portal.js sätter .visas), 180 ms. Pupillen i O:et vid rubriken följer
   rullningen. Allt står stilla vid minskad rörelse. */
@media (prefers-reduced-motion: no-preference) {
  .topp h1.visas { animation: tona-in var(--t-ui) var(--kurva) both; }
  @supports (animation-timeline: scroll()) {
    .oga-pupill { animation: oga-folj linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes oga-folj { from { translate: 0 -18px; } 50% { translate: 0 0; } to { translate: 0 18px; } }

@media (prefers-reduced-motion: reduce) {
  .in-hjarna *, .in-kort { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Pausa rörelsen (WCAG 2.2.2): knappen i bandet och på kartan stannar allt som rör sig. */
:root[data-rorelse="av"] *, :root[data-rorelse="av"] *::before, :root[data-rorelse="av"] *::after { animation-play-state: paused !important; }