/* ============================================================
   globalstyle.css - MyAccount Design System  ·  STANDARD + Obsidian + Ljust
   Importeras av alla sidor: <link rel="stylesheet" href="/assets/css/globalstyle.css">

   ENDA STÄLLET DÄR FÄRGER DEFINIERAS.
   Vill du byta sajtens forvalda utseende: andra Standard-blocket
   langre ner. :root bar Obsidian-vardena (data-theme="dark").
   Alla andra filer refererar till variablerna, aldrig till hex-koder.
   ============================================================ */

/* ── VARIABLER ── */
:root {
  /* Bakgrunder - opaka paneler pa kolsvart. INGEN glasmorfism:
     inga backdrop-filter nagonstans, ytorna ar riktiga farger.
     --card ar ogenomskinlig (basyta), --card-2/-3 ar genomskinliga
     tintlager som anvands OVANPA en yta for hover/aktivt lage. */
  --bg:          #0a0a0c;
  --card:        #131418;
  --card-2:      rgba(255,255,255,.085);
  --card-3:      rgba(255,255,255,.13);

  /* Ogenomskinliga varianter (för menyer, dropdowns, toasts -
     allt som måste vara läsbart utan att bakgrunden syns igenom) */
  --solid:       #141416;
  --solid-2:     #1c1c1f;
  --solid-3:     #26262a;

  /* Kanter */
  --edge:        rgba(255,255,255,.11);
  --edge-hi:     rgba(255,255,255,.22);

  /* Accent - silver/vit, ingen kulör */
  --accent:      #d8dade;
  --accent-2:    #8b8f98;
  --accent-hover:#ffffff;
  --accent-glow: rgba(255,255,255,.18);
  --accent-dim:  rgba(255,255,255,.10);
  --accent-border:rgba(255,255,255,.28);
  --accent-text: #f0f1f3;
  --grad:        linear-gradient(115deg,#ffffff 0%,#9aa0aa 100%);
  --on-accent:   #0a0a0c;   /* textfärg ovanpå accent/gradient */

  /* Text */
  --ink:         #e6e7ea;
  --ink-dim:     #8e9198;
  --title:       #ffffff;

  /* Chalmers varumarkeslila. Aktas: originalet #6746eb ger bara 3,45:1 mot
     --bg och blir grumligt i Obsidian, sa market lyfts har och bara har.
     De ljusa temana far den akta tonen. */
  --chalmers:    #8264f0;

  /* Linkopings turkos. Samma avvagning som raden ovanfor: originalet
     #00b5e2 ar avsedd for tryck och blir gall mot kolsvart, sa tonen ar
     lyft och nedmattad har. De ljusa temana far en morkare variant -
     originalet ger bara 2:1 mot vitt. */
  --liu:         #35c1e8;

  /* KTH-blatt. Samma avvagning som de tva raderna ovanfor: larosatets
     egen #1954a6 ar en mork tryckfarg och ger bara 1,6:1 mot kolsvart,
     alltsa oläslig. Tonen lyfts har och bara har - de ljusa temana far
     den akta. */
  --kth:         #4f97e6;
  --arkiv:       #4f97e6;   /* det gemensamma arkivet (/arkiv/), samma ton som KTH */

  /* Status */
  --green:       #5ce6a8;
  --green-bg:    rgba(92,230,168,.10);
  --green-border:rgba(92,230,168,.30);
  --teal:        #34d9c3;   /* cyangrön, nyheten på startsidan - 11,2:1 mot --bg */

  /* Betygsgrona - tre steg for godkant (3, 4, 5). Underkant ar --red,
     alltsa den enda icke-grona i stapeln. Ordningen ar semantisk och
     inte "ljus till mork": femman ska sticka ut MEST, vilket pa
     kolsvart betyder ljusast och pa vitt betyder morkast. Darfor gar
     rampen at motsatt hall i de ljusa temana. Anvands av
     /tenta-stats/ betygsstaplar. */
  --grade-3:     #1e7a54;
  --grade-4:     #38b681;
  --grade-5:     #6df0b4;
  --red:         #ff7a92;
  --red-bg:      rgba(255,122,146,.10);
  --red-border:  rgba(255,122,146,.30);
  --yellow:      #ffd166;
  --yellow-bg:   rgba(255,209,102,.10);
  --yellow-border:rgba(255,209,102,.30);
  --orange:      #ff9f43;
  --orange-bg:   rgba(255,159,67,.12);
  --orange-border:rgba(255,159,67,.38);
  --cyan:        #a9c7ff;

  /* Kommande tenta (rad utan filer, /chalmers/search): ljusbla botten. */
  --soon-bg:     rgba(110,176,255,.12);
  --soon-fg:     #8ec1ff;

  /* Radier */
  --r:           20px;
  --r-sm:        12px;
  --r-full:      100px;

  /* Skugga - tre steg, medvetet diskreta.
     Bakgrunden ar nastan svart, sa en svart skugga syns mest som smuts.
     Hall alfat lagt och lat kanten (--edge) gora avgransningen i stallet.
     Anvand ALDRIG en egen rgba-skugga i en sidfil - valj ett av de har. */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.20);   /* knappar, sma kort, inputs */
  --shadow:      0 8px 24px rgba(0,0,0,.28);  /* kort, paneler, dropdowns */
  --shadow-lg:   0 16px 40px rgba(0,0,0,.36); /* modaler, overlays          */

  /* Header */
  --hdr-h:       64px;
  /* Ogenomskinlig. Var tidigare halvtransparent med blur, vilket gjorde
     att innehallet skymtade igenom nar man scrollade - sag rorigt ut. */
  --hdr-bg:      #111114;

  /* Typsnitt */
  --font:        'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Fält */
  --input-bg:       rgba(255,255,255,.05);
  --input-bg-focus: rgba(255,255,255,.09);

  /* ── BAKÅTKOMPATIBILITET ──
     Gamla variabelnamn som fortfarande används på undersidor.
     Pekar på de nya så inget går sönder. */
  --navy:        #16161a;
  --blue-dim:    var(--accent-dim);
  --panel:       var(--card);
  --panel-2:     var(--card-2);
  --text:        var(--ink);
  --text-muted:  var(--ink-dim);
  --border:      var(--edge);
  --muted:       var(--ink-dim);
  --white:       var(--title);
  --danger:      var(--red);
  --ok:          var(--green);
  --link:        var(--accent);

  /* Kretssimulatorn (/electrical/). Ritytan ar en canvas och laser de
     har via getComputedStyle, sa de MASTE finnas i alla tre teman. */
  --el-grid:      rgba(255,255,255,.07);
  --el-wire:      #c9ccd3;
  --el-body:      #1c1c1f;
  --el-flow:      #ffd166;
  --el-heat-warm: #ffb347;
  --el-heat-hot:  #ff4d4d;
  --el-trace-1:   #7cc4ff;
  --el-trace-2:   #ffd166;
  --el-trace-3:   #5ce6a8;
  --el-trace-4:   #ff7a92;

  /* Labbeditorn (/matlab/labb/): parenteser i farg efter djup, sex
     nivaer. Morkt tema = oneDark i editorn, darav dess toner. */
  --labb-br-1:    #e5c07b;
  --labb-br-2:    #c678dd;
  --labb-br-3:    #61afef;
  --labb-br-4:    #56b6c2;
  --labb-br-5:    #98c379;
  --labb-br-6:    #ef8fb5;
}

/* ============================================================
   TEMAN

   STANDARD ar numera det ljusblaa temat (tidigare "Vibrant").
   :root ovan bar fortfarande Obsidian-vardena, men Standard-blocket
   nedan matchar aven NAR INGET attribut ar satt - darfor ar Standard
   det man far utan val, och Obsidian kraver data-theme="dark".

   Att defaulten ligger i CSS och inte i skriptet ar med flit: en
   besokare med JavaScript av, blockerad localStorage eller en sida
   som glommer render_theme_boot() far anda ratt tema.

   Attributet sätts av skriptet hogst upp i includes/header.php,
   innan sidan malas, sa att man aldrig ser en blink forst. Valet
   gors under Mitt konto → Installningar och sparas pa users-raden
   i databasen for inloggade, i localStorage ("ma-theme") for ovriga.

   REGELN AR OFORANDRAD: hexkoder bor bara har. Sidfiler refererar
   variabler. Ett nytt tema = ett nytt block har, inget annat.
   ============================================================ */

/* ── LJUS ──
   Kall, pappersfri vit. Ingen cream, ingen beige: gratonerna drar
   at blatt sa att de morka temanas kylighet halls kvar. Ytorna ar
   inverterade - --card-2/-3 gar fran vita till svarta tintlager,
   annars blir hover osynlig pa vit botten. */
html[data-theme="light"] {
  --bg:          #f4f5f7;
  --card:        #ffffff;
  --card-2:      rgba(16,18,24,.05);
  --card-3:      rgba(16,18,24,.09);

  --solid:       #ffffff;
  --solid-2:     #f0f1f4;
  --solid-3:     #e3e5ea;

  --edge:        rgba(16,18,24,.13);
  --edge-hi:     rgba(16,18,24,.30);

  --accent:      #1f4fd8;
  /* Morkare an den forsta teal-tonen (#0e9f8a): --grad anvands som fylld
     knapp med --on-accent (vit) ovanpa, och da maste BADA andarna av
     gradienten halla 4.5:1. #0e9f8a landade pa 3.3:1. */
  --accent-2:    #0a7a6a;
  --accent-hover:#1740b4;
  --accent-glow: rgba(31,79,216,.18);
  --accent-dim:  rgba(31,79,216,.08);
  --accent-border:rgba(31,79,216,.40);
  --accent-text: #1b45bd;
  --grad:        linear-gradient(115deg,#1f4fd8 0%,#0a7a6a 100%);
  --on-accent:   #ffffff;

  --ink:         #1b1e26;
  --ink-dim:     #5f646f;
  --title:       #0b0d12;

  --chalmers:    #6746eb;   /* 5,25:1 mot --bg */
  --liu:         #0a6f8c;   /* 4,88:1 mot --bg */
  --kth:         #1954a6;   /* 6,73:1 mot --bg - KTH:s egen ton */
  --arkiv:       #1954a6;   /* det gemensamma arkivet (/arkiv/), samma ton som KTH */

  --green:       #0f7a50;
  --green-bg:    rgba(15,122,80,.10);
  --green-border:rgba(15,122,80,.30);
  --teal:        #0a7a70;   /* cyangrön, nyheten på startsidan - 4,78:1 mot --bg */

  /* Betygsgrona, ljus botten: femman ar morkast eftersom det ar den
     som ska sticka ut mest. Se kommentaren i :root. */
  --grade-3:     #4aae83;
  --grade-4:     #148055;
  --grade-5:     #063d28;
  --red:         #c02f24;
  --red-bg:      rgba(192,47,36,.09);
  --red-border:  rgba(192,47,36,.28);
  --yellow:      #8a5900;
  --yellow-bg:   rgba(138,89,0,.10);
  --yellow-border:rgba(138,89,0,.28);
  --orange:      #a84a00;
  --orange-bg:   rgba(168,74,0,.09);
  --orange-border:rgba(168,74,0,.32);
  --cyan:        #1f4fd8;

  --soon-bg:     rgba(70,150,235,.16);
  --soon-fg:     #1b5fb0;

  /* Svart skugga pa vitt blir smuts pa samma satt som pa svart -
     hall alfat lagt och lat --edge gora avgransningen. */
  --shadow-sm:   0 1px 3px rgba(16,18,24,.08);
  --shadow:      0 6px 20px rgba(16,18,24,.10);
  --shadow-lg:   0 16px 40px rgba(16,18,24,.18);

  --hdr-bg:      #ffffff;

  --input-bg:       rgba(16,18,24,.04);
  --input-bg-focus: rgba(16,18,24,.07);

  --navy:        #eceef3;

  --el-grid:      rgba(16,18,24,.09);
  --el-wire:      #2a2f3a;
  --el-body:      #f0f1f4;
  --el-flow:      #c2410c;
  --el-heat-warm: #d97706;
  --el-heat-hot:  #dc2626;
  --el-trace-1:   #1f4fd8;
  --el-trace-2:   #b45309;
  --el-trace-3:   #0f7a50;
  --el-trace-4:   #c02f24;

  --labb-br-1:    #b45309;
  --labb-br-2:    #7c3aed;
  --labb-br-3:    #1d4ed8;
  --labb-br-4:    #0f766e;
  --labb-br-5:    #15803d;
  --labb-br-6:    #be185d;
}

/* ── STANDARD (hette Vibrant fram till 2026-08-29) ──
   Sajtens forvalda utseende. Byggd pa Inleeds palett: blatonad ljusgra botten, vita ytor,
   blagra hairlines och deras bla #2c7ddc som accent. Skillnaden mot
   Ljus ar att fargen sitter i sjalva underlaget, inte bara i accenten
   - hela sidan lutar at blatt i stallet for att vara neutralt gra.

   Accenten ar en snaps morkare an Inleeds egen (#2168c4 mot #2c7ddc)
   sa att vit text pa fylld knapp klarar 5.5:1 i stallet for 4.1:1.
   Inleeds egen bla lever kvar i --accent-glow/-dim/-border och --cyan.
   Statusfargerna ar likasa nedmorkade tills de klarar 4.5:1 mot
   botten - Inleeds egen grona (#43c979) hamnar pa 1.8:1 som text. */
/* Matchar bade "inget val alls" och det uttalade valet. Ordningen
   ar viktig: darfor namns bara de ANDRA tva i :not(). */
:root:not([data-theme="dark"]):not([data-theme="light"]) {
  --bg:          #e9eefb;
  --card:        #ffffff;
  --card-2:      rgba(127,139,190,.12);
  --card-3:      rgba(127,139,190,.20);

  --solid:       #ffffff;
  --solid-2:     #f4f7fe;
  --solid-3:     #e4eaf8;

  --edge:        rgba(120,140,190,.32);
  --edge-hi:     rgba(90,112,170,.55);

  --accent:      #2168c4;
  /* Se anteckningen i Ljus: gradientens ljusa ande maste ocksa bara vit
     text. Inleeds egen #2c7ddc ger 4.1:1 och #2f8fd8 bara 3.5:1, sa den
     andra tonen ar en tealblå (#127a9c, 4.9:1) i stallet. */
  --accent-2:    #127a9c;
  --accent-hover:#1a57a8;
  --accent-glow: rgba(44,125,220,.25);
  --accent-dim:  rgba(44,125,220,.10);
  --accent-border:rgba(44,125,220,.45);
  --accent-text: #1f63bd;
  --grad:        linear-gradient(115deg,#1f63bd 0%,#127a9c 100%);
  --on-accent:   #ffffff;

  --ink:         #203149;
  --ink-dim:     #55637a;
  --title:       #16243a;

  --chalmers:    #6746eb;   /* 4,93:1 mot --bg */
  --liu:         #0a6f8c;   /* 4,61:1 mot --bg */
  --kth:         #1954a6;   /* 6,32:1 mot --bg - KTH:s egen ton */
  --arkiv:       #1954a6;   /* det gemensamma arkivet (/arkiv/), samma ton som KTH */

  --green:       #0f7a50;
  --green-bg:    rgba(15,122,80,.10);
  --green-border:rgba(15,122,80,.30);
  --teal:        #077269;   /* cyangrön, nyheten på startsidan - 5,0:1 mot --bg */

  /* Betygsgrona, ljus botten: femman ar morkast eftersom det ar den
     som ska sticka ut mest. Se kommentaren i :root. */
  --grade-3:     #4aae83;
  --grade-4:     #148055;
  --grade-5:     #063d28;
  --red:         #c02f24;
  --red-bg:      rgba(192,47,36,.09);
  --red-border:  rgba(192,47,36,.28);
  --yellow:      #8a5900;
  --yellow-bg:   rgba(138,89,0,.10);
  --yellow-border:rgba(138,89,0,.28);
  --orange:      #a84a00;
  --orange-bg:   rgba(168,74,0,.09);
  --orange-border:rgba(168,74,0,.32);
  --cyan:        #2c7ddc;

  --soon-bg:     rgba(70,165,245,.20);
  --soon-fg:     #1a5aa8;

  --shadow-sm:   0 1px 3px rgba(32,49,73,.10);
  --shadow:      0 6px 20px rgba(32,49,73,.12);
  --shadow-lg:   0 16px 40px rgba(32,49,73,.20);

  --hdr-bg:      #ffffff;

  --input-bg:       rgba(127,139,190,.12);
  --input-bg-focus: rgba(127,139,190,.20);

  --navy:        #dde5f7;

  --el-grid:      rgba(90,112,170,.16);
  --el-wire:      #203149;
  --el-body:      #f4f7fe;
  --el-flow:      #d9480f;
  --el-heat-warm: #d97706;
  --el-heat-hot:  #dc2626;
  --el-trace-1:   #2168c4;
  --el-trace-2:   #b45309;
  --el-trace-3:   #0f7a50;
  --el-trace-4:   #c02f24;

  --labb-br-1:    #b45309;
  --labb-br-2:    #7c3aed;
  --labb-br-3:    #1d4ed8;
  --labb-br-4:    #0f766e;
  --labb-br-5:    #15803d;
  --labb-br-6:    #be185d;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── STICKY FIX (förhindrar att sticky slutar fungera) ── */
html {
  overflow-y: scroll !important;
  overflow-x: clip;
  height: auto !important;
  background: var(--bg);
  /* Styr webblasarens egna ytor: scrollbar, formularkontroller, autofyll.
     Standard ar ljust, sa basvardet ar light och bara Obsidian byter. */
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }
body {
  overflow-x: clip;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ingen aurora. Bakgrunden ar plan var(--bg) fran html-regeln ovan.
   Det suddiga ljusfaltet togs bort: procentbaserade radialer blev
   2:1-utdragna ellipser pa 16:9, filter: blur(30px) pa ett fixerat
   helskarmslager kostade utan att synas, och 13 % alfa over #0a0a0c
   bandade pa 1080p. Ett platt, medvetet underlag passar dessutom den
   redaktionella riktningen battre an ett ambient glodfalt. */

a { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--edge);
  height: var(--hdr-h);
}
.hdr-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 26px;
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hdr-brand {
  /* Ordet "myaccount" ersattes 2026-09-05 av market (includes/logo_mark.php).
     Market ar inline-SVG med currentColor, sa fargen satts har. Reserven
     (texten, om inkluderingen saknas) far samma farg. */
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -.6px;
  margin-right: 20px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--title);
}
/* Market fyller raden: hojden foljer --hdr-h (64/54/70 px) med 12 px luft
   over och under, sa den kan aldrig gora sidhuvudet hogre. Var 22 px. */
.hdr-brand-mark { display: block; height: calc(var(--hdr-h) - 24px); width: auto; }
.hdr-brand:hover { opacity: .85; }

/* Startsidans marke: centrerat overst, i rubrikfargen, ovanfor registret. */
.index-logo { display: flex; justify-content: center; margin: 8px 0 40px; color: var(--title); }
.index-logo-mark { display: block; height: clamp(88px, 14vw, 132px); width: auto; }
/* Ordmarket (market + "account", render_logo_wordmark) sedan 2026-09-06:
   4,6 ganger sa brett som hogt, sa hojden halls lagre an det rena
   market och bredden tar aldrig mer an raden. */
.index-logo-wordmark { display: block; height: clamp(52px, 8vw, 84px); width: auto; max-width: 100%; }
@media (max-width: 560px) { .index-logo { margin-bottom: 28px; } }

/* ── Markets animation (includes/logo_mark.php, render_logo_mark_animated) ──
   Vilolage = det statiska market: konturen osynlig, klipprutan fullt
   utfalld. Med .is-animating: 1) konturen ritas runt formen, pa insidan
   av kanten (dubbel bredd, klippt mot formen sjalv), 2) fyllningen sveper
   in uppifran genom att klipprutan skalas ut fran overkanten, 3) konturen
   tonar bort. Allt i currentColor. Klipprutan animeras med transform, inte
   height: Chrome uppdaterar inte klippningen for en CSS-animerad height. */
.logo-anim .logo-anim-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 24;
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0;
}
.logo-anim .logo-anim-clip {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(1);
}
.logo-anim.is-animating .logo-anim-outline {
  opacity: 1;
  stroke-dashoffset: 1;
  animation: logo-draw 1.5s cubic-bezier(.4, 0, .2, 1) forwards,
             logo-fadeout .35s ease-out 2.25s forwards;
}
.logo-anim.is-animating .logo-anim-clip {
  transform: scaleY(0.001);
  animation: logo-reveal .75s cubic-bezier(.65, 0, .35, 1) 1.55s forwards;
}
/* Akt tva, bara ordmarket (render_logo_wordmark_animated): market star
   forst ensamt i rutans mitt (gruppen forskjuten +1966,5 = rutans mitt
   minus markets mitt), och nar det ar fyllt vaxer "account" ut ur dess
   hogerkant och skjuter det at vanster. Klipprutan skalas ut fran sin
   vansterkant och gruppen glider hem med samma kurva, sa helheten ar
   centrerad hela vagen. Startar 2,4 s, klar 3,2 s. Vilolage = statiskt. */
.logo-anim-wordmark .logo-anim-shift { transform: translateX(0); }
.logo-anim-wordmark .logo-anim-wordclip {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(1);
}
.logo-anim-wordmark.is-animating .logo-anim-shift {
  transform: translateX(1966.5px);
  animation: logo-push .8s cubic-bezier(.65, 0, .25, 1) 2.4s forwards;
}
.logo-anim-wordmark.is-animating .logo-anim-wordclip {
  transform: scaleX(0.001);
  animation: logo-wordgrow .8s cubic-bezier(.65, 0, .25, 1) 2.4s forwards;
}
@keyframes logo-draw     { to { stroke-dashoffset: 0; } }
@keyframes logo-reveal   { to { transform: scaleY(1); } }
@keyframes logo-fadeout  { to { opacity: 0; } }
@keyframes logo-push     { to { transform: translateX(0); } }
@keyframes logo-wordgrow { to { transform: scaleX(1); } }
/* Reducerad rorelse: hoppa direkt till slutlaget. */
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-outline,
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-clip,
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-shift,
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-wordclip { animation: none; }
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-outline { opacity: 0; }
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-clip { transform: scaleY(1); }
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-shift { transform: translateX(0); }
html[data-motion="reduced"] .logo-anim.is-animating .logo-anim-wordclip { transform: scaleX(1); }

/* Adminlage - ingen rod pill. En tunn accentstapel och versal etikett,
   samma sprak som registret pa startsidan. */
/* Adminmarkeringen ar numera lanken till kontrollpanelen (/admin/).
   Den ar fortfarande en markering forst och framst, sa den behaller
   sitt utseende - men den ska bete sig som en lank vid hovring, med
   samma vaxande understreck som ovriga lankar i sidhuvudet. */
.hdr-admin-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 1px 0 3px 10px;
  border-left: 2px solid var(--red);
  color: var(--red);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 12px;
  flex-shrink: 0;
  text-decoration: none;
  transition: color .18s cubic-bezier(.2,.75,.3,1);
}
.hdr-admin-badge::after {
  content: '';
  position: absolute;
  left: 10px; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.75,.3,1);
}
/* Fargen ligger kvar i rott vid hovring med flit. --accent-hover ar
   vit i Obsidian men bla i de ljusa temana, och en rod ram med bla
   text ovanpa ser ut som ett misstag. Affordansen bar strecket. */
.hdr-admin-badge:hover,
.hdr-admin-badge:focus-visible { outline: none; }
.hdr-admin-badge:hover::after,
.hdr-admin-badge:focus-visible::after,
.hdr-admin-badge[aria-current="page"]::after { transform: scaleX(1); }

/* Vaxlingen adminvy <-> anvandarvy (includes/admin_view.php). Samma
   sprak som markeringen bredvid: liten versal text med en tunn stapel.
   I anvandarvyn bar den accentfarg, sa att man inte glommer att man
   tittar pa sajten som ett vanligt konto. */
.hdr-admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 1px 0 1px 10px;
  border-left: 2px solid var(--edge-hi);
  color: var(--ink-dim);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
  margin-right: 12px;
  flex-shrink: 0;
  transition: color .18s cubic-bezier(.2,.75,.3,1), border-color .18s;
}
.hdr-admin-switch:hover,
.hdr-admin-switch:focus-visible { color: var(--title); outline: none; }
.hdr-admin-switch.is-user-view { border-left-color: var(--accent); color: var(--accent-text); }
.hdr-admin-switch.is-user-view:hover,
.hdr-admin-switch.is-user-view:focus-visible { color: var(--title); }
/* Raden i mobilmenyn ar full bredd som de andra raderna. */
.hdr-mobile .hdr-admin-switch--mobile {
  border-left: none;
  margin-right: 0;
  font-size: inherit;
  font-weight: inherit;
  gap: 8px;
}
.hdr-mobile .hdr-admin-switch--mobile.is-user-view { color: var(--accent-text); }

/* ── KNAPP SOM SER UT SOM EN LANK (csrf_post_link) ──
   En atgard som andrar nagot ska skickas med POST, inte ligga som en
   lank med en token i adressen. Utloggningen gick over till det
   2026-09-12 - se includes/csrf.php for hela resonemanget.

   Formularet ska inte finnas i layouten. display:contents plockar bort
   sjalva <form> som box och later knappen arva sin plats av foraldern,
   sa att markup som forut hade <a> mitt i en rad ser exakt likadan ut.

   .csrf-btn nollstaller bara webblasarens EGNA knappstilar - typsnitt,
   grabeige bakgrund, 3d-ram, centrerad text. Ingenting annat.

   PLACERINGEN I FILEN AR MEDVETEN. .csrf-btn, .hdr-link, .btn och
   .btn-ghost har alla samma specificitet (en klass), sa den som star
   SIST vinner. Reglerna harunder ska forlora mot dem: en knapp med
   class="csrf-btn btn btn-ghost" ska se ut som en ghost-knapp, inte som
   naken text. Darfor star blocket har, fore .hdr-link och .btn.
   Flyttas det nedat slutar knapparna se ut som knappar. */
.csrf-post { display: contents; }
.csrf-btn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  text-decoration: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.hdr-nav {
  display: flex;
  gap: 22px;          /* luft i stallet for boxar */
  list-style: none;
}

/* Navlankar och kontolankar delar beteende: ingen bakgrund, ingen ram.
   Hovring drar ut ett understreck fran vanster - vaxande, inte tandande. */
.hdr-nav a,
.hdr-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  color: var(--ink-dim);
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s cubic-bezier(.2,.75,.3,1);
}
.hdr-nav a::after,
.hdr-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.75,.3,1);
}
.hdr-nav a:hover,
.hdr-nav a:focus-visible,
.hdr-link:hover,
.hdr-link:focus-visible { color: var(--title); outline: none; }
.hdr-nav a:hover::after,
.hdr-nav a:focus-visible::after,
.hdr-link:hover::after,
.hdr-link:focus-visible::after { transform: scaleX(1); }

/* Aktuell sida: strecket ligger kvar, i accentfarg. */
.hdr-nav a[aria-current="page"] { color: var(--title); }
.hdr-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--accent);
}

.hdr-account { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.hdr-greeting { color: var(--ink-dim); font-size: .84rem; white-space: nowrap; }
.hdr-hint     { color: var(--ink-dim); font-size: .82rem; white-space: nowrap; }
.hdr-link--user strong { font-weight: 700; color: var(--ink); }
/* Strecket arver currentColor, sa det blir rott av sig sjalvt. */
.hdr-link--logout:hover { color: var(--red); }

/* Framhavd knapp (t.ex. Registrera) far vara en riktig knapp - men utan
   understreck, annars krockar de tva sprakan. */
.hdr-link--cta {
  padding: 8px 16px;
  border-radius: var(--r-full);
  background: var(--grad);
  color: var(--on-accent);
  font-weight: 600;
}
.hdr-link--cta::after { display: none; }
.hdr-link--cta:hover { color: var(--on-accent); transform: translateY(-1px); }

.hdr-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px; height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.hdr-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.hdr-burger:hover span { background: var(--title); }

.hdr-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 14px;
  list-style: none;
  background: var(--solid);
  border-top: 1px solid var(--edge);
}
.hdr-mobile.show { display: flex; }
/* .csrf-btn star med for att utloggningen i mobilmenyn ar en knapp och
   inte en lank (se includes/csrf.php). Utan den raden hade just den
   raden i menyn saknat bade padding och hovring. */
.hdr-mobile a,
.hdr-mobile .csrf-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-dim);
  transition: color .15s, background .15s;
}
.hdr-mobile a:hover,
.hdr-mobile .csrf-btn:hover { color: var(--ink); background: var(--card-2); }

@media (max-width: 900px) { .hdr-hint, .hdr-greeting { display: none; } }
@media (max-width: 768px) {
  .hdr-nav, .hdr-account { display: none; }
  .hdr-inner > form > .hdr-admin-switch { display: none; }   /* finns i mobilmenyn */
  .hdr-burger { display: flex; }
  .site-header { height: auto; min-height: var(--hdr-h); }
  .hdr-inner { flex-wrap: wrap; height: auto; padding: 12px 16px; }
}

/* ============================================================
   LAYOUT - WRAPPER & SPACING
   ============================================================ */
.page-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}
.page-wrap--wide   { max-width: 1200px; }
.page-wrap--narrow { max-width: 640px; }
.page-wrap--xs     { max-width: 440px; }

.center-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.center-col {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}
.center-col--wide { max-width: 860px; }
.center-col--xs   { max-width: 440px; }

/* .container fanns i den gamla assets/css/style.css (borttagen
   2026-09-06). Filhanteraren anvander den fortfarande. */
.container { width: min(1320px, 92vw); margin: 0 auto; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card--pad   { padding: 28px; }
.card--pad-sm{ padding: 18px; }

/* ============================================================
   TYPOGRAFI
   ============================================================ */
.page-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--title);
  letter-spacing: -.8px;
  margin-bottom: 6px;
}
.page-subtitle {
  font-size: .92rem;
  color: var(--ink-dim);
  margin-bottom: 28px;
}
/* Basdefinition. Startsidans variant (med h2 + linje) star langre ner.
   Ingen versalsattning och ingen utspokad tracking - se designbriefen. */
.section-label {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--title);
  margin-bottom: 10px;
}

/* Gradient-text (rubriker som ska sticka ut) */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   KNAPPAR
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border: none;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary   { background: var(--grad); color: var(--on-accent); box-shadow: 0 8px 22px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-2px); color: var(--on-accent); }

.btn-secondary { background: var(--card-2); color: var(--ink); border: 1px solid var(--edge-hi); }
.btn-secondary:hover { background: var(--card-3); }

.btn-danger    { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.btn-danger:hover { background: rgba(255,122,146,.18); }

.btn-ghost     { background: transparent; color: var(--ink-dim); border: 1px solid var(--edge); }
.btn-ghost:hover { color: var(--ink); background: var(--card-2); }

.btn-sm { padding: 8px 16px; font-size: .82rem; }
.btn-lg { padding: 14px 30px; font-size: 1rem; }

/* Full-width submit (auth pages) */
.btn-submit {
  width: 100%;
  padding: 13px;
  background: var(--grad);
  color: var(--on-accent);
  border: none;
  border-radius: var(--r-sm);
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 8px 22px var(--accent-glow);
  transition: transform .2s, box-shadow .2s;
}
.btn-submit:hover  { transform: translateY(-2px); }
.btn-submit:active { transform: scale(.98); }
.btn-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ============================================================
   FORMULÄR
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.field label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-dim);
}
.field .field-note {
  font-size: .8rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* Frågan om mejl och notiser på registreringssidorna (includes/notiser.php,
   notif_signup_field). Ingen .field: den ger kryssrutan textfältets
   bredd och ram. Avbockad från början - ett ja ska vara ett val. */
.notif-ask {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 0 18px;
  cursor: pointer;
}
.notif-ask input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.notif-ask span {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.notif-ask b {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
}

/* background-color, INTE kortformen background.
   Kortformen nollstaller background-image, och .field select nedan lagger
   sin nedatpil just dar. Med "background" i :focus-regeln (som vinner pa
   specificitet) forsvann pilen sa fort man klickade i rutan - och
   eftersom overgangen ocksa gallde hela "background" animerades
   background-position mellan 0% 0% och "right 14px center", sa pilen
   gled diagonalt over rutan nar fokus lamnade den. Overgangen ar darfor
   ocksa smalnad till background-color. */
.input,
.field input,
.field select,
.field textarea {
  background-color: var(--input-bg);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  color: var(--ink);
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  background-color: var(--input-bg-focus);
}
.input::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-dim); opacity: .7; }
.input:disabled,
.field input:disabled,
.field select:disabled { opacity: .4; cursor: not-allowed; }

.field input[readonly] { opacity: .55; cursor: default; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238e9198' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
/* Den utfallda listan i en <select> ritas av webblasaren och kan inte
   vara genomskinlig. Ar faltets bakgrund en rgba (som --input-bg) blir
   listan vit i Chrome och Edge, med faltets ljusa text ovanpa - sa sag
   "Startsida efter inloggning" i /settings/ ut i morkt tema. Darfor en
   ogenomskinlig yta for ALLA listor pa sajten, inte bara .field. */
select option,
select optgroup { background: var(--solid-2); color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }

/* Password wrapper with icon button */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-wrap .pw-btn {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 1rem;
  padding: 4px;
  transition: color .15s;
}
.pw-wrap .pw-btn:hover { color: var(--title); }

/* ============================================================
   ALERTS / MEDDELANDEN
   ============================================================ */
.alert {
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.alert i { margin-top: 2px; flex-shrink: 0; }
.alert.ok     { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-border); }
.alert.err    { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-border);   }
.alert.warn   { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border);}
.alert a      { color: inherit; font-weight: 700; text-decoration: underline; }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--r-full);
  font-size: .77rem;
  font-weight: 600;
  border: 1px solid var(--edge);
  background: var(--card-2);
  color: var(--ink-dim);
  white-space: nowrap;
}
.pill.good   { border-color: var(--green-border);  background: var(--green-bg);  color: var(--green); }
.pill.bad    { border-color: var(--red-border);    background: var(--red-bg);    color: var(--red);   }
.pill.warn   { border-color: var(--yellow-border); background: var(--yellow-bg); color: var(--yellow);}
.pill.accent { border-color: var(--accent-border); background: var(--accent-dim);color: var(--accent-text);}

/* ============================================================
   TABELLER
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--edge); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
thead th {
  background: var(--card-2);
  color: var(--ink-dim);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 11px 15px;
  text-align: left;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--edge); transition: background .15s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--card-2); }
tbody td { padding: 11px 15px; color: var(--ink); vertical-align: middle; }

/* ============================================================
   AUTH-SIDOR (login, register, reset etc.)
   ============================================================ */
.auth-page,
body.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-wrap {
  width: 100%;
  max-width: 400px;
}

/* Märket i stället för ordmärket, samma som sidhuvudet och startsidan.
   Länk till startsidan: det är det enda "tillbaka" sidan behöver, så
   .back-link är borta från inloggningssidorna. */
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
  color: var(--title);
  transition: opacity .15s;
}
.auth-brand:hover { opacity: .8; }
.auth-brand-mark { display: block; height: 46px; width: auto; }

.auth-card {
  /* Registerstil, samma som resten av sajten: ingen box och ingen
     skugga. En 2px-linje mot --ink-dim over rubriken avgransar
     formularet, precis som linjen over startsidans register. */
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink-dim);
  border-radius: 0;
  padding: 24px 0 0;
  box-shadow: none;
}
.auth-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--title);
  margin: 0 0 22px;
}
.auth-card .subtitle {
  font-size: .9rem;
  color: var(--ink-dim);
  margin-top: -14px;
  margin-bottom: 22px;
  line-height: 1.6;
  max-width: 44ch;
}
/* Knappen ar en yta i blacksvart, inte en gradient med glod. Hover
   byter bara ton - ingen lyftning. */
.auth-card .btn-submit {
  background: var(--title);
  color: var(--bg);
  border-radius: var(--r-sm);
  box-shadow: none;
  margin-top: 10px;
  transition: background .15s, color .15s;
}
.auth-card .btn-submit:hover { background: var(--ink); transform: none; }
.auth-card .btn-submit:active { transform: none; }
.auth-card .btn-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.auth-msg {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  line-height: 1.55;
}
.auth-msg.err  { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-border);   }
.auth-msg.ok   { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-border); }
.auth-msg.warn { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border);}
.auth-msg a    { color: inherit; font-weight: 700; }

/* Fingeravtryck eller ansikte: en andra vag in under formularet. Syns
   bara i en webblasare dar en enhet lagts till (assets/js/passkey.js),
   darav [hidden]-regeln. En linje skiljer den fran losenordet, och
   knappen ar en ram, inte en yta: losenordsknappen ovanfor ska forbli
   den tunga. */
.auth-alt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
}
.auth-alt[hidden],
.auth-alt .auth-msg[hidden] { display: none; }
.auth-alt .btn-alt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  color: var(--title);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.auth-alt .btn-alt:hover { border-color: var(--ink-dim); background: var(--card-2); }
.auth-alt .btn-alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-alt .btn-alt:disabled { opacity: .45; cursor: not-allowed; }
/* Tva vagar under formularet (enheten och kameran): en linje racker. */
.auth-alt:not([hidden]) + .auth-alt { margin-top: 10px; padding-top: 0; border-top: 0; }

/* ============================================================
   ANSIKTSSKANNINGEN (includes/face_scan.php, assets/js/face-login.js)
   ============================================================
   En helsida ovanpa inloggningen eller Mitt konto. Ansiktet ritas som
   punkter och linjer pa en yta; kamerabilden visas aldrig.

   Fargerna som skriptet ritar med ar --face-*, satta har sa att de
   foljer temat som allt annat. Pilarna och ringen ar ren CSS.

   Sidan tar hela fonstret med en riktig bakgrundsfarg - ingen
   genomskinlig slojd, se regeln overst i filen. */
.face-scan {
  position: fixed;
  inset: 0;
  z-index: 1000001;   /* over sidhuvudet (999999) och Mya-knappen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--bg);
  overflow-y: auto;
}
.face-scan[hidden] { display: none; }

.face-scan-panel {
  width: 100%;
  max-width: 520px;
  border-top: 2px solid var(--ink-dim);
  padding-top: 20px;
}
.face-scan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.face-scan-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--title);
}
.face-scan-close {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--edge-hi);
  padding: 0 0 1px;
  color: var(--ink);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
}
.face-scan-close:hover { color: var(--title); border-bottom-color: var(--accent); }
.face-scan-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.face-scan-stage {
  --face-line: var(--ink-dim);
  --face-edge: var(--accent);
  --face-dot:  var(--title);
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--solid);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  overflow: hidden;
  color: var(--title);
}
.face-scan-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Kamerabilden ska aldrig synas, men elementet maste finnas i sidan
   och spela for att modellen ska kunna lasa av det. display:none far
   vissa webblasare att sluta avkoda bildrutorna. */
.face-scan-video {
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 2px;
  opacity: 0;
  pointer-events: none;
}

/* Ovalen ansiktet ska hamna i. Pulserar nar man ska titta rakt fram,
   star stilla annars. */
.face-scan-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 46%;
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--edge-hi);
  border-radius: 50%;
  opacity: .55;
  transition: opacity .3s, border-color .3s;
}
.face-scan-stage[data-pose="center"]::before {
  border-color: var(--accent);
  animation: face-pulse 1.8s ease-in-out infinite;
}
.face-scan-stage[data-pose="done"]::before,
.face-scan-stage[data-pose="wait"]::before { opacity: .25; }

/* Pilarna. Tre vinklar som tands i tur och ordning, utat fran
   ansiktet, medan hela pilen ror sig en aning at samma hall. Ritad
   pekande at hoger och vriden for de andra hallen: rorelsen ligger pa
   <svg>, vridningen pa <div>, sa "framat" ar alltid pilens eget hall. */
.face-scan-arrow {
  position: absolute;
  width: 15%;
  max-width: 76px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.face-scan-arrow svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.face-scan-arrow.is-right { right: 5%;  top: 50%; transform: translateY(-50%); }
.face-scan-arrow.is-left  { left: 5%;   top: 50%; transform: translateY(-50%) rotate(180deg); }
.face-scan-arrow.is-up    { left: 50%;  top: 6%;  transform: translateX(-50%) rotate(-90deg); }
.face-scan-arrow.is-down  { left: 50%;  bottom: 6%; transform: translateX(-50%) rotate(90deg); }

.face-scan-stage[data-pose="up"]    .is-up,
.face-scan-stage[data-pose="down"]  .is-down,
.face-scan-stage[data-pose="left"]  .is-left,
.face-scan-stage[data-pose="right"] .is-right { opacity: 1; }

.face-scan-stage[data-pose="up"]    .is-up svg,
.face-scan-stage[data-pose="down"]  .is-down svg,
.face-scan-stage[data-pose="left"]  .is-left svg,
.face-scan-stage[data-pose="right"] .is-right svg { animation: face-nudge 1.2s ease-in-out infinite; }

.face-scan-arrow polyline { opacity: .9; }
.face-scan-stage[data-pose="up"]    .is-up polyline,
.face-scan-stage[data-pose="down"]  .is-down polyline,
.face-scan-stage[data-pose="left"]  .is-left polyline,
.face-scan-stage[data-pose="right"] .is-right polyline { animation: face-chevron 1.2s ease-in-out infinite; }
.face-scan-arrow polyline:nth-child(2) { animation-delay: .16s !important; }
.face-scan-arrow polyline:nth-child(3) { animation-delay: .32s !important; }

/* Bocken nar alla stallningar ar klara. */
.face-scan-ok {
  position: absolute;
  left: 50%; top: 50%;
  width: 22%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  color: var(--green);
  transition: opacity .25s, transform .35s cubic-bezier(.2,.75,.3,1);
  pointer-events: none;
}
.face-scan-ok svg {
  display: block;
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.face-scan-stage[data-pose="done"] .face-scan-ok { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.face-scan-stage[data-pose="done"] .face-scan-canvas { opacity: .35; transition: opacity .3s; }

/* Stegen: ett streck per stallning. Klara ar fyllda, det aktuella
   pulserar. */
.face-scan-steps {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
}
.face-scan-steps li {
  flex: 1;
  height: 3px;
  background: var(--edge);
  border-radius: 2px;
  transition: background .25s;
}
.face-scan-steps li.is-done { background: var(--green); }
.face-scan-steps li.is-now  { background: var(--accent); animation: face-step 1.2s ease-in-out infinite; }

.face-scan-status {
  min-height: 1.6em;
  margin: 14px 0 0;
  color: var(--title);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.012em;
}
.face-scan-note {
  margin: 8px 0 0;
  color: var(--ink-dim);
  font-size: .82rem;
  line-height: 1.55;
  max-width: 56ch;
}

@keyframes face-chevron {
  0%, 100% { opacity: .18; }
  35%      { opacity: 1; }
  70%      { opacity: .18; }
}
@keyframes face-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14%); }
}
@keyframes face-pulse {
  0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.035); }
}
@keyframes face-step {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.auth-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
  font-size: .85rem;
  color: var(--ink-dim);
  line-height: 1.6;
}
/* .csrf-btn: utloggningen i sidfoten ar en knapp, inte en lank. */
.auth-footer a,
.auth-footer .csrf-btn { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--edge-hi); padding-bottom: 1px; }
.auth-footer a:hover,
.auth-footer .csrf-btn:hover { color: var(--title); border-bottom-color: var(--accent); }

.back-link {
  position: fixed;
  top: 20px; left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  font-size: .85rem;
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--edge);
  background: var(--card);
  transition: color .15s, background .15s;
  z-index: 50;
}
.back-link:hover { color: var(--ink); background: var(--card-2); }

/* ============================================================
   NOTICE BANNER
   ============================================================ */
.notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: .88rem;
  color: var(--yellow);
}
.notice-banner i { margin-top: 2px; flex-shrink: 0; }
.notice-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--yellow);
  cursor: pointer;
  font-size: .85rem;
  opacity: .7;
  padding: 2px 4px;
  flex-shrink: 0;
}
.notice-close:hover { opacity: 1; }

/* ============================================================
   SPINNER / LOADING
   ============================================================ */
.spinner-bar { height: 3px; background: var(--edge); border-radius: 4px; overflow: hidden; }
.spinner-bar > div { height: 100%; width: 0; background: var(--grad); transition: width .25s; }

/* ============================================================
   TOAST (flash-meddelanden, popups)
   ============================================================ */
.toast {
  position: fixed;
  z-index: 999999;
  background: var(--solid-2);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  padding: 16px;
  font-family: var(--font);
}
.toast--tl { top: 24px; left: 50%; transform: translateX(-50%); }
.toast--bl { left: 16px; bottom: 16px; width: 320px; max-width: calc(100vw - 32px); }
.toast h4  { margin: 0 0 6px; font-size: .92rem; font-weight: 700; color: var(--title); }
.toast p   { margin: 0 0 12px; font-size: .84rem; line-height: 1.5; color: var(--ink-dim); }
.toast .row{ display: flex; gap: 8px; align-items: center; }

/* ============================================================
   UTILS
   ============================================================ */
.text-dim    { color: var(--ink-dim); }
.text-accent { color: var(--accent-text); }
.text-green  { color: var(--green);   }
.text-red    { color: var(--red);     }
.text-yellow { color: var(--yellow);  }
.text-center { text-align: center;    }
.mt-0  { margin-top: 0;    }
.mt-8  { margin-top: 8px;  }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0  { margin-bottom: 0;    }
.mb-8  { margin-bottom: 8px;  }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.hidden { display: none !important; }
.flex   { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-8  { gap: 8px;  }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.w-full { width: 100%; }

/* ── CENTER-PAGE body override ── */
body.center-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ============================================================
   REGISTER-SIDA
   ============================================================ */
/* Formuläret ligger ALLTID i mitten av sidan. Rutan bredvid (säkerhets-
   varningen, "Så går det till") sitter i högerkolumnen och påverkar inte
   formulärets plats: de yttre kolumnerna är lika breda, så mitten blir
   mitt. Det kräver 2 x (kolumn + glapp) i sidled, därför staplas allt
   under 1100px i stället för att pressa ihop formuläret. */
.reg-layout {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}
.reg-layout > .auth-card { grid-column: 2; }
.reg-layout > .warn-card,
.reg-layout > .how-card {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  width: 100%;
  max-width: 260px;
}
@media (max-width: 1100px) {
  .reg-layout {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    row-gap: 20px;
  }
  .reg-layout > .auth-card { grid-column: 1; }
  .reg-layout > .warn-card,
  .reg-layout > .how-card {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
  .reg-layout > .warn-card { order: -1; }
}

/* Säkerhetsvarningen: en tonad ruta i varningsfärgen, med en rubrikrad
   (ikon + text) och en separat tips-rad under en hårlinje. Tonen kommer
   från --yellow-*, som finns i alla teman. */
.warn-card {
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  border-radius: var(--r-sm);
  padding: 18px 18px 16px;
  font-size: .85rem;
  color: var(--ink);
  line-height: 1.6;
}
.warn-card p { margin: 0; }
.warn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.warn-head i {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  color: var(--yellow);
  font-size: .8rem;
}
.warn-head strong {
  color: var(--yellow);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.warn-card u { text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.warn-tip {
  display: flex;
  gap: 9px;
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--yellow-border);
  color: var(--ink-dim);
}
.warn-tip i { flex: none; margin-top: 4px; color: var(--yellow); font-size: .78rem; }

.dice-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  font-size: 1.1rem;
  padding: 4px;
  transition: color .15s;
}
.dice-btn:hover { color: var(--title); }
/* Kopiera-raden som kommer fram under fälten när tärningen använts
   (accounts/resetpassword.php). Fältets eget mellanrum räcker. */
.ra-actions.pw-dice-tools { margin-top: 0; }

body.register-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 20px 80px;
}

/* ============================================================
   REGISTRERING MED ETT FALT (register_beta.php, activate.php)
   ============================================================
   Samma register-stil som resten av auth-sidorna: en linje, ingen
   ruta och ingen skugga. .ra-* ar de sma byggstenarna som delas av
   "kolla din mejl"-skarmen och valkomstsidan: knappar, finstilt,
   losenordsrutan.

   Alla farger ar variabler. Ingen hex-kod har, av samma skal som
   overst i filen. */

.beta-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: .8rem;
  color: var(--ink-dim);
}
.beta-flag span {
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid var(--yellow-border);
  background: var(--yellow-bg);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}
.beta-flag a { color: var(--ink); text-decoration: underline; }
.beta-flag a:hover { color: var(--title); }

/* Skolkontot. Den HAR knappen ar vagen framat pa sidan, sa den ar den
   enda fyllda ytan ovanfor formularet - hjalpknappen under ar kantad,
   och Registrera langst ner ar fylld. Tre nivaer, en per beslut. */
.reg-sso { margin-bottom: 20px; }

.reg-sso-lead {
  margin: 0 0 12px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
}

.reg-sso-form { margin: 0 0 8px; }

.reg-sso-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  color: var(--bg);
  background: var(--title);
  border: 1px solid var(--title);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.reg-sso-btn:hover { background: var(--ink); border-color: var(--ink); }

/* Andrahandsleverantoren. Kantad i stallet for fylld: den tacker ett
   larosate, huvudknappen tacker sju, och tva likadana svarta ytor
   bredvid varandra sager inte vilken man ska ta. */
.reg-sso-btn.alt {
  background: transparent;
  color: var(--title);
  border-color: var(--edge-hi);
}
.reg-sso-btn.alt:hover { background: var(--card-2); border-color: var(--accent-border); }
.reg-sso-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reg-sso-btn i { font-size: 1.15rem; flex: 0 0 auto; }
.reg-sso-btn span { display: block; line-height: 1.3; }
.reg-sso-btn small {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  font-size: .74rem;
  opacity: .72;
}

/* Skiljeraden. En linje med ett ord i, inte en rubrik: valet under ar
   inte ett andra alternativ av samma tyngd, det ar reservvagen. */
.reg-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: .78rem;
  color: var(--ink-dim);
}
.reg-or::before,
.reg-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge);
}

/* Kvittot efter en lyckad skolinloggning. */
.sso-done {
  margin: 0 0 22px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: .86rem;
  line-height: 1.6;
}
.sso-done strong {
  display: block;
  margin-bottom: 3px;
  font-size: .9rem;
}
.sso-done.ok {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--ink);
}
.sso-done.ok strong { color: var(--green); }
.sso-done.part {
  background: var(--yellow-bg);
  border: 1px solid var(--yellow-border);
  color: var(--ink);
}
.sso-done.part strong { color: var(--yellow); }

.ra-lead {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 48ch;
}

.ra-fine {
  margin: 12px 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 48ch;
}

.ra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ra-btn {
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ra-btn:hover { background: var(--card-2); color: var(--title); }
.ra-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ra-btn i { margin-right: 6px; }

.ra-btn-main {
  background: var(--title);
  color: var(--bg);
  border-color: var(--title);
}
.ra-btn-main:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* En lank i knappform, bredvid en riktig knapp ("Fel adress? Borja om"). */
.ra-btn-link {
  display: inline-block;
  text-decoration: none;
  color: var(--ink-dim);
  border-color: transparent;
}
.ra-btn-link:hover { color: var(--ink); border-color: var(--edge); }
.ra-actions form { margin: 0; }

/* Losenordsfaltet pa valkomstsidan: monospace och luftigt, sa att
   tecknen gar att lasa hogt ett i taget. */
.field input.pw-mono {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: .04em;
  font-size: 1rem;
}

/* "Sa gar det till" bredvid formularet. Samma plats som
   sakerhetsvarningen pa register.php, men neutral - det ar en
   forklaring, inte en varning. */
.how-card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--edge-hi);
  border-radius: var(--r);
  padding: 20px;
  font-size: .85rem;
  color: var(--ink-dim);
  line-height: 1.6;
}
.how-card strong {
  color: var(--title);
  display: block;
  margin-bottom: 8px;
  font-size: .9rem;
}
.how-card ol {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--ink);
}
.how-card li { margin-bottom: 4px; }
/* Pa mobil ligger rutan EFTER formularet, till skillnad fran
   sakerhetsvarningen pa register.php som lyfts forst. Den har ar en
   forklaring till ett falt man redan ser; ett falt ovanfor forklaringen
   ar snabbare an tvartom. */

/* Driftmeddelande pa startsidan. En heltackande remsa langs sidans
   overkant, ovanfor sidhuvudet, i sajtens felfarg som HEL bakgrund -
   inte en tonad ruta i innehallet. Texten tar sidans bakgrundsfarg, sa
   kontrasten haller i alla tre teman (ljust rott pa morkt, morkt rott
   pa ljust). Ingen radie, ingen marginal: remsan ar en del av kanten.
   Tas bort tillsammans med blocket i index.php. */
/* Driftmeddelande: en heltackande remsa ovanfor sidhuvudet. INGEN
   HTML anvander den just nu - den ligger kvar for nasta gang nagot ar
   nere. Anvands genom att lagga det har forst i <body> i index.php,
   fore render_header():

     <div class="site-down" role="alert">
       <div class="site-down-inner">
         <i class="fa fa-triangle-exclamation" aria-hidden="true"></i>
         <div><strong>Rubrik.</strong> Brodtext.</div>
       </div>
     </div>

   Grinden som satt runt den senast - visa bara for utloggade och
   admin - ar vard att ta med igen: den som ar inloggad har ett konto
   som fungerar och behover inte oroas. */
.site-down {
  background: var(--red);
  color: var(--bg);
  border-bottom: 3px solid var(--bg);
  font-size: 1.02rem;
  line-height: 1.55;
}
.site-down-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.site-down-inner > i {
  flex-shrink: 0;
  margin-top: 4px;
  font-size: 1.7rem;
}
.site-down strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.site-down u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .site-down-inner { padding: 14px 16px; gap: 12px; }
  .site-down-inner > i { font-size: 1.3rem; margin-top: 2px; }
  .site-down strong { font-size: 1.1rem; }
  .site-down { font-size: .95rem; }
}

/* ============================================================
   CONTACT-SIDA
   ============================================================ */
.contact-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}
.contact-hero { margin-bottom: 28px; }
.contact-hero h1 { margin: 0 0 6px; font-size: 1.9rem; font-weight: 800; color: var(--title); letter-spacing: -.8px; }
.contact-hero p  { margin: 0; color: var(--ink-dim); font-size: .92rem; }
.contact-card {
  /* Samma behandling som inloggningen: ingen box, en 2px-linje overst
     och en blacksvart knapp. Se .auth-card. */
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink-dim);
  border-radius: 0;
  padding: 26px 0 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-card .btn-submit {
  background: var(--title);
  color: var(--bg);
  box-shadow: none;
  transition: background .15s;
}
.contact-card .btn-submit:hover { background: var(--ink); transform: none; }

/* ============================================================
   AUTH_CHALMERS 403-SIDA
   ============================================================ */
.card-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--red);
  margin-bottom: 18px;
}
p.desc {
  font-size: .9rem;
  color: var(--ink-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}
.btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
  font-size: .8rem;
  color: var(--ink-dim);
  line-height: 1.6;
}
.legal p { margin-bottom: 8px; }
.legal p:last-child { margin-bottom: 0; }

/* ============================================================
   UPLOAD-SIDA
   ============================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.topbar h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--title); letter-spacing: -.5px; }

.drop {
  border: 2px dashed var(--edge-hi);
  border-radius: var(--r);
  padding: 28px 20px;
  text-align: center;
  background: var(--card);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  color: var(--ink-dim);
  font-size: .92rem;
  line-height: 1.6;
}
.drop i { font-size: 2rem; color: var(--accent); margin-bottom: 10px; display: block; }
.drop strong { color: var(--ink); }
.drop.drag { background: var(--card-2); border-color: var(--accent); }
.drop small { display: block; margin-top: 6px; opacity: .7; }

.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ============================================================
   PAGE-WRAPPER ALIAS (bakåtkompatibilitet)
   ============================================================ */
.page-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 20px 80px;
  overflow: visible !important;
  height: auto !important;
}

/* ============================================================
   STARTSIDA - masthead & projektregister

   Layouten är medvetet INTE ett kortrutnät. Projekten listas som ett
   register: nummer i vänstermarginalen, hairline mellan raderna,
   status högerställd. Första raden får större vikt än de övriga så att
   sektionen får en egen rytm i stället för identiska boxar.
   ============================================================ */
.index-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 64px 26px 96px;
  position: relative;
  z-index: 1;
}

/* ── Masthead ──
   Rubrik och ingress ovanfor registret. Ingen centrerad hero med
   jattetypografi - texten ar vansterstalld och sitter tatt ihop, sa att
   2px-linjen overst i .proj-index blir sidans forsta riktiga avgransning. */
.index-masthead {
  max-width: 62ch;
  margin-bottom: 44px;
}
.index-masthead h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--title);
  margin-bottom: 16px;
}
.index-masthead p {
  font-size: .97rem;
  line-height: 1.68;
  color: var(--ink-dim);
  margin: 0;
}

/* ── Ledtext ovanfor registret ──
   Sidans forsta text, och den ska las som en del av sidan - inte som en
   notisruta. Darfor ingen stapel, ingen etikett och ingen bakgrund: bara
   typografin baer den. Raden satts nastan lika stort som en rubrik och
   halls kort (~40ch) sa att den bryter pa ett medvetet stalle i stallet
   for att flyta ut over hela bredden.

   Registrets 2px-linje ar fortfarande sidans forsta hardavgransning -
   marginalen har ar tilltagen sa att texten hor ihop med sidhuvudet
   ovanfor och inte klistrar sig fast i linjen under. */
.index-intro {
  margin: -8px auto 48px;
  text-align: center;
}
.index-intro-lead {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(1.18rem, 2.5vw, 1.6rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--title);
  text-wrap: balance;
}
.index-intro-sub {
  margin: 12px auto 0;
  max-width: 60ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-dim);
  text-wrap: balance;
}
/* Nyheten om studieplattformen (2026-10-18), cyangrön i alla tre teman.
   Står direkt under ledtexten och syns även för inloggade, som då ser
   den ensam under märket - därav first-child-regeln. */
.index-intro-news {
  margin: 14px auto 0;
  max-width: 60ch;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--teal);
  text-wrap: pretty;
}
.index-intro-news strong { font-weight: 700; }
.index-intro > :first-child { margin-top: 0; }
@media (max-width: 640px) {
  .index-intro { margin-bottom: 32px; }
  .index-intro-sub { margin-top: 11px; }
}

/* ── Raden under registret om dolda arkiv ──
   Sist pa sidan, i samma dampade ton som ingressen. Ingen ruta och
   ingen ikon: den ar en fotnot till listan ovanfor, inte en notis. */
.index-more {
  margin: 26px 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
.index-more a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--edge-hi);
  padding-bottom: 1px;
}
.index-more a:hover,
.index-more a:focus-visible { color: var(--title); border-bottom-color: var(--accent); }

/* ── Raden om att sajten ar fristaende ──
   Star dar larosatenas logotyper visas: under registret pa startsidan och
   under logotypen pa Chalmers- och arkivsidorna. En fotnot, inte en
   varningsruta - men tydlig nog att lasa. Texten i universities.php. */
.uni-disclaimer {
  margin: 22px 0 0;
  max-width: 68ch;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* ── Sektionsrubrik ──
   Ingen versalsättning med utspökad tracking. Tight, tung, liten. */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 54px 0 0;
}
.section-label h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--title);
  white-space: nowrap;
}
.section-label .count {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--edge);
  transform: translateY(-3px);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--edge);
  margin: 48px 0;
}

/* ── Projektregister ──
   Siffran ar sidans blickfang: stor marginalfigur som spanner over hela
   raden. Ingen statusmarkering - registret listar vad som finns, inte
   vad som svarar just nu. */
.proj-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink-dim);
}

.proj-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0 26px;
  padding: 34px 0;
  border-top: 1px solid var(--edge);
  color: var(--ink);
  text-decoration: none;
  transition: padding-left .22s cubic-bezier(.2,.75,.3,1);
}
.proj-index li:first-child .proj-row { border-top: none; }

/* Accentstapel som vaxer ut ur vanstermarginalen vid hover. */
.proj-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s cubic-bezier(.2,.75,.3,1);
}
.proj-row:hover::before,
.proj-row:focus-visible::before { transform: scaleY(1); }
.proj-row:hover,
.proj-row:focus-visible { padding-left: 16px; outline: none; }
.proj-row:focus-visible .proj-row-title { text-decoration: underline; text-underline-offset: 4px; }

.proj-row-title {
  grid-column: 1;
  font-size: 1.32rem;
  font-weight: 650;
  color: var(--title);
  letter-spacing: -.022em;
  line-height: 1.25;
}
.proj-row-desc {
  grid-column: 1;
  font-size: .92rem;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 7px;
}

/* ── Hanglas efter en rubrik ──
   Ett larosate som anvandaren valt att se men inte slapps in i. Sitter
   EFTER rubriktexten, inte hogerstallt som .proj-row-lock: den platsen
   ar ordmarkets, och de tva kan forekomma pa samma rad. Storleken ar i
   em sa att det foljer rubriken - lead-raden satter storre typ. */
.uni-lock {
  font-size: .58em;
  margin-left: .55em;
  color: var(--ink-dim);
  vertical-align: middle;
  transform: translateY(-.12em);
  display: inline-block;
}

/* Forsta raden bar sektionen - storre typ, mer luft. */
.proj-row--lead { padding: 42px 0; }
.proj-row--lead::before { top: 34px; bottom: 34px; }
.proj-row--lead .proj-row-title { font-size: 1.62rem; letter-spacing: -.03em; }
.proj-row--lead .proj-row-desc  { font-size: .97rem; margin-top: 9px; }

/* ── Chalmers ordmarke ──
   Fyllningen ar currentColor, sa fargen sitter har och inte i SVG:n. */
.chalmers-mark {
  display: block;
  height: auto;
  color: var(--chalmers);
  flex-shrink: 0;
}

/* ── Linkopings ordmarke ──
   Ingen avritad logotyp, se includes/liu_wordmark.php. Typgraden haller
   sig till bredden som anropet ber om, sa att market tar samma plats som
   Chalmers-market i registret och i sidfoten pa /liu/. */
.liu-mark {
  display: block;
  flex-shrink: 0;
  width: var(--liu-mark-w, 162px);
  color: var(--liu);
  line-height: 1;
  text-align: left;
}
.liu-mark-short {
  display: block;
  font-size: calc(var(--liu-mark-w, 162px) * .155);
  font-weight: 800;
  letter-spacing: -.01em;
}
.liu-mark-name {
  display: block;
  margin-top: calc(var(--liu-mark-w, 162px) * .028);
  font-size: calc(var(--liu-mark-w, 162px) * .073);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── KTH:s ordmarke ──
   Samma losning som LiU-market ovanfor, av samma skal: ingen avritad
   logotyp, se includes/kth_wordmark.php. Typgraden foljer bredden som
   anropet ber om, sa att market tar samma plats som de andra tva i
   registret och i sidfoten pa /kth/.

   Namnet ar langre an de andra tvas ("Kungliga Tekniska Hogskolan"), och
   satt i samma grad som LiU:s hade det spratt ut over market. Graden ar
   darfor nagot mindre och sparrningen tightare - market blir lika brett
   som de andra i stallet for att sticka ut i registret. */
.kth-mark {
  display: block;
  flex-shrink: 0;
  width: var(--kth-mark-w, 162px);
  color: var(--kth);
  line-height: 1;
  text-align: left;
}
.kth-mark-short {
  display: block;
  font-size: calc(var(--kth-mark-w, 162px) * .155);
  font-weight: 800;
  letter-spacing: -.01em;
}
.kth-mark-name {
  display: block;
  margin-top: calc(var(--kth-mark-w, 162px) * .028);
  font-size: calc(var(--kth-mark-w, 162px) * .062);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── Larosatenas egna logotyper (assets/img/logos/) ──
   Se render_uni_logo() i includes/arkiv_wordmark.php. Bredden fran
   anropet ar taket; hojden far hogst en tredjedel av den, sa att ett
   runt sigill (KTH, GU, Uppsala) inte blir hogre an raden runt det.
   Fargerna ar logotypernas egna. Morkt tema: alla vita, annars syns de
   morka inte mot botten. Ljusa teman: de som bara finns i vitt
   (.uni-logo--ljus) gors svarta. */
.uni-logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: var(--uni-logo-w, 162px);
  max-height: calc(var(--uni-logo-w, 162px) * .34);
}
html[data-theme="dark"] .uni-logo { filter: brightness(0) invert(1); }
html:not([data-theme="dark"]) .uni-logo--ljus { filter: brightness(0); }

/* ── Ordmarke for det gemensamma arkivet (/arkiv/) ──
   Samma konstruktion som .kth-mark; ett marke for alla skolor dar,
   satt i --arkiv. Se includes/arkiv_wordmark.php. */
.arkiv-mark {
  display: block;
  flex-shrink: 0;
  width: var(--arkiv-mark-w, 162px);
  color: var(--arkiv);
  line-height: 1;
  text-align: left;
}
.arkiv-mark-short {
  display: block;
  font-size: calc(var(--arkiv-mark-w, 162px) * .155);
  font-weight: 800;
  letter-spacing: -.01em;
}
.arkiv-mark-name {
  display: block;
  margin-top: calc(var(--arkiv-mark-w, 162px) * .028);
  font-size: calc(var(--arkiv-mark-w, 162px) * .062);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Market i registrets Chalmers-rad. Det lagger sig i en tredje, implicit
   kolumn - .proj-row deklarerar bara en, och en auto-track racker - och
   centreras mot radens hela hojd i stallet for att folja rubrikens baslinje.
   Ingen opacitetsdampning: --chalmers ar redan avvagd mot bakgrunden, och
   ett lager opacity ovanpa hade atit upp den avvagningen. */
.proj-row-mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}

/* ── Last rad i registret ──
   Raden ska synas - poangen ar att den finns och ar pa vag - men inte
   se klickbar ut. Alltsa: ingen accentstapel, ingen indragning, ingen
   pekare. Den ar ett <div> i markupen, sa det finns heller ingen
   lank att tabba till. */
.proj-row--locked { cursor: default; }
.proj-row--locked::before { content: none; }
.proj-row--locked:hover { padding-left: 0; }
.proj-row--locked .proj-row-title { color: var(--ink-dim); }

/* Status hogerstalld, samma plats som Chalmers-market. */
.proj-row-lock {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-dim);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .proj-row { grid-template-columns: minmax(0, 1fr); gap: 0 16px; padding: 26px 0; }
  /* Tredje kolumnen finns inte har; statusen far falla ned under texten
     i stallet. Till skillnad fran ordmarket ar den information och far
     darfor inte doljas. */
  .proj-row-lock { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; }
  /* Radens tva textkolumner ar redan trangda pa smal skarm; en tredje
     skulle klamma rubriken. Market ar dekor och far falla bort. */
  .proj-row-mark { display: none; }
  .proj-row::before { top: 20px; bottom: 20px; }
  .proj-row-title { font-size: 1.12rem; }
  .proj-row--lead { padding: 30px 0; }
  .proj-row--lead::before { top: 24px; bottom: 24px; }
  .proj-row--lead .proj-row-title { font-size: 1.3rem; }
}

/* ── Kompakt lista (avstängda / avslutade projekt) ──
   Medvetet annan behandling än registret ovan: tvåkolumnigt, tätare,
   underordnat. Ger höjdvariation mellan sektionerna. */
.proj-compact {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
}
.proj-compact li { border-top: 1px solid var(--edge); }
.proj-compact li:nth-child(-n+2) { border-top: none; }
.proj-compact-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 3px 12px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}
.proj-compact-item .ic {
  color: var(--ink-dim);
  font-size: .85rem;
  text-align: center;
  padding-top: .2em;
}
.proj-compact-item .nm {
  color: var(--ink);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.012em;
}
.proj-compact-item .dsc {
  grid-column: 2;
  color: var(--ink-dim);
  font-size: .82rem;
  line-height: 1.5;
}
.proj-compact-item .proj-badge { grid-row: 1; grid-column: 3; }
.proj-compact-item--off .nm { color: var(--ink-dim); }
a.proj-compact-item:hover .nm { color: var(--title); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .proj-compact { grid-template-columns: 1fr; }
  .proj-compact li:nth-child(2) { border-top: 1px solid var(--edge); }
  .proj-compact li:first-child { border-top: none; }
}

/* ── Statusmarkörer ── */
.proj-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: 0;
  width: fit-content;
  white-space: nowrap;
}
.badge-active      { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-border); }
.badge-maintenance { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border); }
.badge-offline     { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-border); }
.badge-off         { background: transparent;      color: var(--ink-dim);border: 1px solid var(--edge); }
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   DONATIONSRAD (startsidan)
   Ligger som en avslutande rad i samma registerlogik - inte ett kort.
   ============================================================ */
.donate-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 64px;
  padding: 26px 0 0;
  border-top: 2px solid var(--ink-dim);
  color: inherit;
  text-decoration: none;
}
.donate-cta h3 {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--title);
  letter-spacing: -.02em;
  margin-bottom: 5px;
}
.donate-cta p {
  font-size: .89rem;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 62ch;
}
.donate-cta .go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--title);
  white-space: nowrap;
  border-bottom: 1px solid var(--edge-hi);
  padding-bottom: 4px;
  transition: border-color .2s, gap .2s;
}
.donate-cta:hover .go { border-color: var(--accent); gap: 15px; }
@media (max-width: 620px) {
  .donate-cta { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
* { scrollbar-color: var(--edge-hi) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--edge-hi); border-radius: 100px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); background-clip: content-box; }

/* ── Respektera reducerad rörelse ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .proj-card:hover, .donate-cta:hover, .btn-primary:hover, .hdr-link--cta:hover { transform: none; }
}

/* ============================================================
   UTSEENDEVAL  ·  Mitt konto → Webbutseende
   ============================================================
   Tre attribut på <html>, satta av includes/theme_boot.php innan
   sidan målas. Alla tre är frånvarande som standard, och det är
   själva poängen: en besökare som aldrig rört en inställning
   matchar ingen av reglerna här nere och får sajten precis som
   den alltid sett ut. Det finns alltså inget "normalläge" att
   definiera - normalläget är resten av den här filen.

   Varför de bor här och inte i sidfilerna: samma skäl som
   färgerna. En sida som vill vara tätare ska inte uppfinna sitt
   eget kompaktläge, den ska ärva det.
   ============================================================ */

/* ── Teckenstorlek ──
   html-elementets storlek och inte body: nästan all typografi på
   sajten är satt i rem, alltså relativt roten. Skalar vi body
   följer rubriker, knappar och etiketter inte med.

   112.5% = 18px i stället för 16px. Måtten som är satta i px
   (bl.a. body nedan och --hdr-h) räknas inte om av rem-bytet, så
   de få som spelar roll skalas för hand. */
html[data-fontsize="large"] {
  font-size: 112.5%;
}
html[data-fontsize="large"] body { font-size: 16.2px; }
html[data-fontsize="large"] { --hdr-h: 70px; }

/* ── Kompakt läge ──
   Mindre luft, tätare rader. Det ändrar avstånd - aldrig färger,
   aldrig storleken på text (det är teckenstorleken ovan), och
   aldrig något som gör en yta svårare att träffa med fingret:
   knappar och listrader behåller sin höjd.

   Rader som griper in i enskilda sidor bor hos den sidan. Här
   ligger bara det som är gemensamt: sidhuvudet, sidramarna,
   korten och radavståndet. */
html[data-density="compact"] {
  --hdr-h: 54px;
}
html[data-density="compact"] body {
  line-height: 1.45;
}
html[data-density="compact"] .page-wrap,
html[data-density="compact"] .center-col {
  padding-top: 32px;
  padding-bottom: 48px;
}
html[data-density="compact"] .card--pad    { padding: 20px; }
html[data-density="compact"] .card--pad-sm { padding: 13px; }
html[data-density="compact"] .page-title    { margin-bottom: 6px; }
html[data-density="compact"] .page-subtitle { margin-bottom: 18px; }
html[data-density="compact"] .field         { margin-bottom: 12px; }

/* ── Reducerad rörelse, valt på kontot ──
   Samma regler som mediefrågan högst upp, men vald för hand av
   någon vars operativsystem inte säger ifrån. Duplicerat och inte
   hopslaget med @media: en :is()-lista över en mediefråga och en
   attributväljare stöds inte av äldre webbläsare, och det här ska
   fungera överallt.

   .01ms i stället för 0: en övergång som tar noll tid fyrar aldrig
   transitionend, och kod som väntar på det (kvittot i Mitt konto,
   modalerna) skulle hänga sig. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  transition-duration: .01ms !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}
html[data-motion="reduced"] {
  scroll-behavior: auto !important;
}
html[data-motion="reduced"] .proj-card:hover,
html[data-motion="reduced"] .donate-cta:hover,
html[data-motion="reduced"] .btn-primary:hover,
html[data-motion="reduced"] .hdr-link--cta:hover { transform: none; }

/* ============================================================
   /legal/ - rättslig grund, villkor, personuppgifter
   ============================================================
   Löpande text, inga kort. Innehållsförteckningen är en rad länkar,
   inte ett rutnät. Tabellen scrollar i sidled i sin egen ruta så att
   sidan aldrig gör det. */
.legal-page { max-width: 760px; }
.legal-lead { border-bottom: 2px solid var(--ink-dim); padding-bottom: 26px; margin-bottom: 22px; }
.legal-lead h1 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--title);
}
.legal-meta { margin: 0 0 14px; font-size: .84rem; color: var(--ink-dim); }
.legal-lead p:last-child { margin: 0; }
.legal-page p, .legal-page li { font-size: .94rem; line-height: 1.7; color: var(--ink); }
.legal-page p { margin: 0 0 12px; }
.legal-page ul { margin: 6px 0 14px; padding-left: 20px; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.legal-page a:hover { border-bottom-color: currentColor; }

.legal-toc { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 34px; font-size: .86rem; }
.legal-toc a { color: var(--ink-dim); border-bottom: 1px solid var(--edge-hi); padding-bottom: 1px; }
.legal-toc a:hover { color: var(--title); border-bottom-color: var(--title); }

.legal-section { padding: 26px 0; border-top: 1px solid var(--edge); }
.legal-section:last-child { padding-bottom: 0; }
.legal-section h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--title);
}
.legal-section h3 {
  margin: 20px 0 6px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.legal-page code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .86em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--card-2);
  color: var(--title);
}

.legal-table-wrap { overflow-x: auto; margin: 8px 0 6px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--edge);
  line-height: 1.5;
}
.legal-table th { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
.legal-table td { color: var(--ink); }
.legal-table td:first-child { width: 42%; }

@media (max-width: 700px) {
  .legal-section { padding: 20px 0; }
  .legal-toc { gap: 4px 14px; }
}

/* ============================================================
   SIDFOT  (includes/footer.php)
   ============================================================
   Samma registerlogik som startsidan: en 2px-linje mot --ink-dim
   overst, hairline mellan lankraderna, ingen ruta. Sidfoten ligger
   sist i body och trycks ned till underkanten pa korta sidor genom
   att body blir en kolumn - bara nar en sidfot faktiskt finns, sa
   sidor utan (inloggning, lasaren) paverkas inte. */
body:has(> .site-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-footer {
  margin-top: auto;
  padding-top: 72px;
  color: var(--ink-dim);
  font-size: .86rem;
}
.ftr-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 26px 26px;
  border-top: 2px solid var(--ink-dim);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
.ftr-mark { display: inline-flex; color: var(--title); transition: opacity .15s; }
.ftr-mark:hover { opacity: .75; }
.ftr-mark-svg { display: block; height: 30px; width: auto; }
.ftr-tagline {
  margin: 14px 0 0;
  max-width: 36ch;
  line-height: 1.6;
}
.ftr-head {
  margin: 0 0 8px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--title);
}
.ftr-col ul { list-style: none; margin: 0; padding: 0; }
.ftr-col li { border-top: 1px solid var(--edge); }
.ftr-col li:first-child { border-top: none; }
.ftr-col a {
  display: block;
  padding: 7px 0;
  color: var(--ink-dim);
  transition: color .15s, padding-left .15s;
}
.ftr-col a:hover,
.ftr-col a:focus-visible { color: var(--title); padding-left: 6px; outline: none; }
.ftr-bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 26px 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: .8rem;
}
.ftr-bottom a { color: var(--ink); border-bottom: 1px solid var(--edge-hi); padding-bottom: 1px; }
.ftr-bottom a:hover { color: var(--title); border-bottom-color: var(--accent); }
/* Språklänken (includes/footer.php). Står på det andra språket, sist i raden. */
.ftr-bottom .ftr-lang { white-space: nowrap; }
.ftr-lang .fa { margin-right: 5px; font-size: .72rem; color: var(--ink-dim); }
@media (max-width: 760px) {
  .site-footer { padding-top: 56px; }
  .ftr-inner { grid-template-columns: 1fr 1fr; gap: 26px 28px; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .ftr-inner { grid-template-columns: 1fr; }
}
html[data-density="compact"] .site-footer { padding-top: 44px; }

/* Live-sokningens "inga traffar"-rad (arkivens startsidor). Samma rad
   som en traff, men utan pekare och i dampad ton. */
.lr-item--none { color: var(--ink-dim); cursor: default; }
.lr-item--none:hover { background: transparent; }

/* ============================================================
   GUIDEVIDEO (startsidan, index.php)
   ============================================================
   Ligger sist pa startsidan, mellan en egen 2px-linje och sidfotens.
   Ingen ram, ingen skugga: rutan ar en yta i --card med samma radie
   som falten. Startknappen visas bara nar videon inte spelar, eller
   alltid for den som har reducerad rorelse (.is-manual). */
.index-guide {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 2px solid var(--ink-dim);
}
/* Bara videon, ingen text: rutan centrerad och lite smalare an sidan. */
.index-guide-video {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--card);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.index-guide-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--card); }
.index-guide-play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px;
  border: 0; border-radius: 50%;
  background: var(--title); color: var(--bg);
  font-size: 1.15rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding-left: 4px; /* triangeln ser centrerad ut forst nar den ar lite forskjuten */
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .15s;
}
.index-guide-play:hover { transform: scale(1.06); }
.index-guide-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.index-guide-video.is-manual:not(.is-playing) .index-guide-play { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  .index-guide { margin-top: 40px; padding-top: 18px; }
}

/* ============================================================
   FEEDBACK (startsidan, includes/feedback_widget.php)
   ============================================================
   Sist pa startsidan, under guidevideon. Diskret med flit: en
   1px-linje och inte sidans 2px (den ar reserverad for masthead,
   registret och videon), en liten rubrik i samma vikt som
   .section-label, och inget som ropar.

   Formen ar samma sprak som resten av sajten: hairline-separerade
   rader med etiketten till vanster och valen till hoger. Ingen ruta,
   inget kortrutnat, ingen ram som tands vid hover.

   Sjalva radio- och checkbox-rutorna ar dolda for ogat men INTE
   borttagna: de ar fortfarande fokuserbara och lasta av skarmlasare,
   och etiketten bredvid ar det man ser och klickar pa. Darfor
   :checked + .fb-chip i stallet for en klass satt av JavaScript -
   markeringen fungerar aven utan skript.
   ============================================================ */
.fb {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--edge);
}

/* ── Huvudet ──
   Rubrik och ledtext till vanster, lagesvalen till hoger nar det finns
   plats. Under 760px hamnar valen pa egen rad under texten. */
.fb-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 30px;
  align-items: start;
}
.fb-title {
  grid-column: 1;
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--title);
}
.fb-lead {
  grid-column: 1;
  margin: 8px 0 0;
  max-width: 58ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
/* Raden efter ett skickat svar. Samma plats, men i lastexten - det ar
   ett kvitto och inte en uppmaning. */
.fb-lead--tack { color: var(--ink); }
.fb-lead a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--edge-hi);
  padding-bottom: 1px;
}
.fb-lead a:hover,
.fb-lead a:focus-visible { color: var(--title); border-bottom-color: var(--accent); }

.fb-fel {
  grid-column: 1;
  margin: 12px 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--red);
}

/* ── Lagesvalen ──
   Tre val i ETT spar, inte tre kort. Kanterna kollapsar mot varandra
   (-1px) sa att gruppen las som en enhet. Det valda ar fyllt; de andra
   ar bara text bakom en hairline. */
.fb-val {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-self: start;
}
.fb-valj {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 15px;
  border: 1px solid var(--edge);
  margin-left: -1px;
  color: var(--ink-dim);
  text-decoration: none;
  background: transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.fb-valj:first-child { margin-left: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.fb-valj:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.fb-valj:hover {
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--edge-hi);
  position: relative;   /* hover-kanten ska ligga over grannens */
}
.fb-valj:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  position: relative;
}
.fb-valj.is-vald {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  position: relative;
}
.fb-valj.is-vald .fb-valj-tid { color: var(--on-accent); opacity: .72; }
.fb-valj-namn { font-size: .84rem; font-weight: 650; letter-spacing: -.01em; }
.fb-valj-tid  { font-size: .7rem; color: var(--ink-dim); }

/* Beskrivningen av det valda laget. Egen rad under huvudet sa att de
   tre knapparna kan sta tatt utan att bara text. */
.fb-valj-rad {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-size: .8rem;
  color: var(--ink-dim);
}

/* ── Formularet ── */
.fb-form { margin: 22px 0 0; }

/* En fraga = en rad i registret: etikett till vanster, valen till
   hoger, hairline mellan. Samma rytm som .proj-row pa samma sida. */
.fb-q {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 10px 28px;
  align-items: start;
  padding: 17px 0;
  border-top: 1px solid var(--edge);
}
.fb-q:first-child { border-top: 2px solid var(--ink-dim); }

.fb-q-text {
  display: block;
  font-size: .85rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink);
}
.fb-q-hjalp {
  display: block;
  margin-top: 3px;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-dim);
}

/* ── Valen ──
   Dolda men fokuserbara rutor. clip-tekniken och inte display:none:
   det senare tar bort dem ur tabbordningen och ur skarmlasaren, och
   da gar formularet inte att fylla i med tangentbordet. */
.fb-radio,
.fb-kryss {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fb-alt {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fb-chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-full);
  background: var(--input-bg);
  font-size: .82rem;
  line-height: 1.25;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fb-chip:hover { background: var(--card-2); border-color: var(--edge-hi); }
.fb-radio:checked + .fb-chip {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.fb-radio:focus-visible + .fb-chip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Femstegsskalan ──
   Inga stjarnor: fem lika breda steg med siffra och ord. Skalan far
   samma fyllda markering som chipsen, sa att hela formularet har ETT
   satt att se valt ut. */
.fb-skala {
  position: relative;
  display: flex;
  gap: 6px;
  max-width: 460px;
}
.fb-steg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fb-steg:hover { background: var(--card-2); border-color: var(--edge-hi); }
.fb-steg-siffra {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fb-steg-text {
  font-size: .66rem;
  line-height: 1.2;
  color: var(--ink-dim);
}
.fb-radio:checked + .fb-steg {
  background: var(--accent);
  border-color: var(--accent);
}
.fb-radio:checked + .fb-steg .fb-steg-siffra { color: var(--on-accent); }
.fb-radio:checked + .fb-steg .fb-steg-text   { color: var(--on-accent); opacity: .8; }
.fb-radio:focus-visible + .fb-steg { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Fritexten ── */
.fb-text {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: .87rem;
  line-height: 1.55;
  resize: vertical;
}
.fb-text::placeholder { color: var(--ink-dim); }
.fb-text:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--accent-border);
}

/* ── Far jag hora av mig? ──
   Egen rad utan vansterkolumn: meningen ar lang och hor till hela
   formularet, inte till en fraga. Rutan ritas av ::before pa
   etiketten, sa att den foljer samma fargschema som chipsen. */
.fb-q--kontakt {
  position: relative;
  display: block;
  padding: 17px 0;
  border-top: 1px solid var(--edge);
}
.fb-kryss-text {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.fb-kryss-text::before {
  content: '';
  position: absolute;
  left: 0; top: 1px;
  width: 17px; height: 17px;
  border: 1px solid var(--edge-hi);
  border-radius: 5px;
  background: var(--input-bg);
  transition: background .15s ease, border-color .15s ease;
}
/* Bocken: tva sidor av en fyrkant, vriden. Ritas alltid, men syns
   forst nar rutan ar ikryssad. */
.fb-kryss-text::after {
  content: '';
  position: absolute;
  left: 6px; top: 4px;
  width: 5px; height: 9px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .12s ease;
}
.fb-kryss:checked + .fb-kryss-text::before { background: var(--accent); border-color: var(--accent); }
.fb-kryss:checked + .fb-kryss-text::after  { opacity: 1; }
.fb-kryss:focus-visible + .fb-kryss-text::before { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Skicka ── */
.fb-skicka {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0 2px;
  border-top: 1px solid var(--edge);
}
.fb-knapp {
  padding: 10px 24px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font);
  font-size: .86rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.fb-knapp:hover { background: var(--accent-hover); }
.fb-knapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fb-knapp:disabled { opacity: .55; cursor: default; }
.fb-avbryt {
  font-size: .82rem;
  color: var(--ink-dim);
  text-decoration: none;
}
.fb-avbryt:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ── Kvittot vid fetch-inskick ── */
.fb-kvitto {
  margin: 16px 0 0;
  font-size: .86rem;
  line-height: 1.6;
}
.fb-kvitto--ok  { color: var(--ink); }
.fb-kvitto--fel { color: var(--red); }

@media (max-width: 760px) {
  .fb { margin-top: 40px; padding-top: 20px; }
  /* Valen under texten, och fragorna i en kolumn: etiketten over
     sina val i stallet for bredvid. */
  .fb-head { grid-template-columns: minmax(0, 1fr); }
  .fb-val { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .fb-valj { padding: 8px 12px; }
  .fb-q { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; }
  .fb-skala { max-width: none; gap: 5px; }
  .fb-steg-text { font-size: .62rem; }
}

/* ── På gång (startsidan, under feedbackrutan) ──
   En nyhet om det som byggs. Samma rad som en fråga i feedbackrutan:
   etiketten i vänsterkolumnen (15rem, som .fb-q), texten till höger,
   1px-linje över. Ingen ruta och ingen ikon. */
.index-news {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 10px 28px;
  align-items: start;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--edge);
}
/* Efter feedbackrutan hör de ihop: kortare avstånd. Syskon (~) och
   inte granne (+): rutans skript kan ligga emellan. */
.fb ~ .index-news { margin-top: 34px; }
.index-news-tag {
  margin: 2px 0 0;
  font-size: .78rem;
  font-weight: 650;
  color: var(--ink-dim);
}
.index-news-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--title);
}
.index-news-text {
  margin: 8px 0 0;
  max-width: 58ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-dim);
}
@media (max-width: 760px) {
  .index-news { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 40px; padding-top: 20px; }
  .fb ~ .index-news { margin-top: 28px; }
}


/* ============================================================
   MINA KURSER (bara admin, under test sedan 2026-09-12)

   Startsidan: fästa kurser som ett register. Kurskoden står i
   vänstermarginalen där startsidans register har sin figur, namnet i
   mitten, läget högerställt. Hover som i resten av sajten: en
   accentstapel ur vänsterkanten och raden skjuts in, ingen ram.
   Kurssidorna: en tyst Fäst-knapp i topbaren och en rund markering
   per tenta. Se includes/mina_kurser.php.
   ============================================================ */
.mk { margin: 0 0 56px; }
.mk-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.mk-title {
  margin: 0; font-size: .95rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--title);
}
.mk-note { font-size: .74rem; font-weight: 650; color: var(--ink-dim); }

.mk-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink-dim); }
.mk-row {
  position: relative;
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 20px;
  padding: 17px 0;
  border-top: 1px solid var(--edge);
  color: var(--ink);
  text-decoration: none;
  transition: padding-left .22s cubic-bezier(.2,.75,.3,1);
}
.mk-list li:first-child .mk-row { border-top: none; }
.mk-row::before {
  content: '';
  position: absolute; left: 0; top: 13px; bottom: 13px;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .22s cubic-bezier(.2,.75,.3,1);
}
.mk-row:hover::before,
.mk-row:focus-visible::before { transform: scaleY(1); }
.mk-row:hover,
.mk-row:focus-visible { padding-left: 14px; outline: none; }
.mk-row:focus-visible .mk-namn { text-decoration: underline; text-underline-offset: 4px; }

.mk-kod {
  grid-column: 1; grid-row: 1 / span 2;
  font-size: .95rem; font-weight: 700; color: var(--title);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.mk-namn { grid-column: 2; font-size: 1rem; font-weight: 620; color: var(--title); line-height: 1.35; }
.mk-skola { grid-column: 2; font-size: .8rem; color: var(--ink-dim); }
.mk-meta {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px;
  font-size: .78rem; font-weight: 650; color: var(--ink-dim);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mk-meta .mk-nasta { color: var(--accent-text); }
.mk-meta .mk-nya   { color: var(--green); }
.mk-tom {
  margin: 0; padding: 16px 0 0; border-top: 2px solid var(--ink-dim);
  max-width: 64ch; font-size: .88rem; line-height: 1.6; color: var(--ink-dim);
}
@media (max-width: 620px) {
  .mk-row { grid-template-columns: 4.8rem minmax(0, 1fr); padding: 15px 0; }
  .mk-meta { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 6px; }
}

.mk-pin {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--edge-hi); border-radius: var(--r-full);
  background: transparent; color: var(--ink-dim);
  font: inherit; font-size: .8rem; font-weight: 650; white-space: nowrap;
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.mk-pin:hover { color: var(--ink); border-color: var(--accent); }
.mk-pin[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mk-pin:disabled { opacity: .6; cursor: progress; }
.mk-rakna {
  font-size: .8rem; font-weight: 650; color: var(--ink-dim);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.mk-klar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; padding: 0;
  border: 1.5px solid var(--edge-hi); border-radius: 50%;
  background: transparent; color: transparent;
  font-size: .6rem; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mk-klar:hover { border-color: var(--accent); color: var(--ink-dim); }
.mk-klar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-klar[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--card); }