/* Bas-reset och iOS-nära defaultstil. Stoffe är primärmodell. Vi siktar
   på native känsla utan att bygga ett eget designsystem. CSS-variabler
   så feature-komponenter kan luta sig mot samma tokens. */

/* Modulära globala stilark (samma mapp som app.css så man inte blir vilsen). */
@import './markdown.css?v=361b44bf1c';
@import './detalj.css?v=361b44bf1c';

/* Shantell Sans — handstil för lapparna (Klotter/Alarm PostIt-känsla; OFL, self-hostat, CSP font-src 'self').
   Variabel vikt 300-800 (klarar vår 600 + markdown-fet 800). Latin-subset (åäö).
   font-display: swap → ingen osynlig text. */
/* Noto Serif 600 — artikelrubrikernas ÄKTA semibold där ui-serif (New York)
   saknas: Android/Windows/Chrome. Utan den knäpper 600 till fet 700 (Georgia/
   Noto ships bara 400+700). Latin-subset (åäö), 15 KB, OFL, self-hostat. */
@font-face {
	font-family: 'Noto Serif';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/noto-serif-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2212;
}

@font-face {
	font-family: 'Shantell Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('/fonts/shantell-sans.woff2') format('woff2');
}

* {
	box-sizing: border-box;
}

/* A11y (WCAG 2.4.7): synlig fokusring, men BARA vid tangentbordsnavigering.
   :focus-visible är en webbläsar-heuristik som ibland matchar vid tap på
   element med tabindex (t.ex. puls-puffen) och ger en "slumpmässig" blå
   ring. Vi gör det deterministiskt: klassen .input-keyboard sätts på <html>
   vid Tab/pilar och tas bort vid pekar-input (se lib/utils/focusModality.ts).
   Default är ingen ring; i tangentbordsläge ritas accent-ringen. !important
   vinner över komponenternas scoped `outline: none`. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: none; }
html.input-keyboard :focus-visible {
	outline: 2px solid var(--color-accent) !important;
	outline-offset: 2px;
	border-radius: 4px;
}

/* A11y (A11Y-4): respektera prefers-reduced-motion. Neutraliserar CSS-
   animationer/transitions globalt (TabBar-slider, drawer/sheet-slide-in,
   backdrop-fade m.m.). Svelte JS-transitions (fly i drawer-subpages)
   hanteras separat i komponenterna via prefersReducedMotion-storen. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html, body {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
}

/* iOS Mobile Safari (verktygsfält i botten): body är min-height:100dvh =
   bara det DYNAMISKA fönstret ovanför verktygsfältet. Safari målar däremot
   ROT-elementets (html) bakgrund över HELA skärmen, inkl. safe-area-bandet
   bakom det nedre verktygsfältet / home-indicatorn. Utan bakgrund på html
   syns där webbläsarens vita default-canvas → ett ljust band "i safe area".
   Måla html med samma grupperade bakgrund så sidan går edge-to-edge ända
   ner (adapterar ljus/mörk via :root-varianten). */
html {
	background: var(--color-grouped-bg);
}

/* Lås all scroll OCH pointer-events bakom öppen Sheet (iOS-paritet med
   native modals). Sheet.svelte togglar body.sheet-open när open=true.
   - overflow: hidden + touch-action: none → ingen scroll/rubber-band-
     effekt på listan bakom, och touch-start på sheet/handle missförstås
     inte som scroll-gest.
   - pointer-events: none på .shell → iOS Safari kan inte ge "ghost-
     click" till element bakom efter att backdrop unmountat (300ms-
     delay i synthetic click efter touchend). Backdrop + sheet får
     explicit pointer-events: auto i Sheet.svelte. */
body.sheet-open { overflow: hidden; touch-action: none; }
body.sheet-open main { overflow: hidden !important; touch-action: none; }
body.sheet-open .shell { pointer-events: none; }

/* Drawers (Drawer.svelte registrerar i overlay-räknaren → body.overlay-open):
   identiskt robust lås som body.sheet-open. Vi räknar INTE upp scroll-containrar
   (den listan drev isär varje gång en ny yta byggdes); i stället stoppar
   pointer-events:none på .shell ALL bakgrunds-scroll oavsett container. Drawerns
   backdrop + panel återtar pointer-events:auto (Drawer.svelte) så att även en
   drawer som renderas INNE i shell (Loggbok) förblir klickbar. overflow:hidden
   behåller scrollTop (inget hopp när drawern öppnas/stängs). */
body.overlay-open { overflow: hidden; touch-action: none; }
body.overlay-open main { overflow: hidden !important; touch-action: none; }
body.overlay-open .shell { pointer-events: none; }

body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
		"Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.4;
	color: var(--color-text);
	background: var(--color-grouped-bg);
	/* dvh = dynamic viewport height. Räknar live med Safari/Chrome address-
	   bar collapse/expand. vh-fallback för äldre browsers (iOS <15.4). */
	min-height: 100vh;
	min-height: 100dvh;
}

/* Native-känsla: UI-chrome går INTE att markera (som en riktig app). Bara
   artikeltext (.markdown), kommentarer (.msg-text), artikelrubriker och
   inmatningsfält är markeringsbara — för citat och kopiering. Sätts på body
   så även portalerade overlays (drawers/popovers/sheets) täcks. */
body { -webkit-user-select: none; user-select: none; }
body :is(.markdown, .msg-text, .card .title, input, textarea, [contenteditable]) {
	-webkit-user-select: text; user-select: text;
}

/* Skyddsnät mot Safari-autozoom (iOS): fokuserade fält med font-size < 16px
   zoomar in hela sidan, och zoomen backar inte när fältet lämnas. Basen här
   fångar fält utan egen storleksregel; komponentregler som sätter storlek på
   fält ska peka på var(--fs-input) eller större (17px förekommer). max() gör
   att fält i stor text (t.ex. ärvd 17px) inte krymps till 16. */
input, textarea, select { font-size: max(var(--fs-input, 16px), 1em); }

:root {
	--color-text:          #000000;
	--color-text-secondary: rgba(60, 60, 67, 0.6);
	/* Tertiär: chevroner, ledarlinjer och annan svag grafik. Tokenet var
	   ODEFINIERAT, så varje användning föll tillbaka på sin egen hårdkodning
	   (#c4c4c8 och ljusare) och hamnade på 1,7:1 — under WCAG:s 3:1 för
	   grafik. #8a8a8e ger 3,44:1 mot vitt och 3,08:1 mot den grå botten, och
	   ligger ändå ett snäpp ljusare än sekundär så hierarkin står kvar. */
	--color-text-tertiary: #8a8a8e;
	/* Grön text på grön tonad kapsel (Gratis, Betrodd, Ja): mörkare i ljust
	   läge för kontrast, iOS systemGreen dark i mörkt. Spegel av Color.grönText. */
	--color-gron-text:     #1f7a3c;
	/* Ledtext i tomma fält (iOS .placeholderText). Låg ton MED FLIT — den ska
	   vika för det man skriver. Måste ändå vara tokeniserad: hårdkodad i sin
	   ljusa form försvinner den helt mot mörk botten, vilket den gjorde i
	   kontaktformuläret och nya meddelanden. */
	--color-placeholder:   rgba(60, 60, 67, 0.3);
	--color-bg:            #ffffff;
	--color-grouped-bg:    #f2f2f7;
	--color-surface:       #ffffff;
	--color-border:        rgba(60, 60, 67, 0.18);
	--color-accent:        #007aff;
	--color-destructive:   #ff3b30;
	--color-success:       #34c759;
	--color-warning:       #ff9500;
	/* --farg-rod/gul/gron/bla deklareras INTE här. De renderas ur KATEGORI
	   (features/loggbok/post.ts) av +layout.svelte, som skriver dem i <head>.
	   Kart- och canvas-kontexter tar rå hex och kan inte tolka var(), så hexen
	   måste bo i JS — då hämtar CSS dem därifrån i stället för att upprepa dem. */
	/* DIVIDER-KONVENTIONEN (Apple HIG): hairlines i listor börjar vid TEXTSTART
	   (indragna förbi ledande ikon/avatar) och går ända ut till TRAILING-KANTEN —
	   förbi chevronen, aldrig avkortade vid den. (Rättat 2026-07-27: tidigare stod
	   "slutar vid chevron-spetsen", vilket byggde på ett felaktigt antagande om
	   Apple-standard. UIKit: separatorInset.left = textmarginal, .right = 0.)
	   ÄGS av Section (`separated`-prop): gruppen ritar linjen mellan sina rad-barn,
	   raden sätter bara `--row-sep-inset` för sin textstart. Migrera bespoke listor
	   dit i stället för att rita egna ::before/border. Kvarvarande egna varianter
	   (t.ex. färgade ListRad-kort) följer samma left/right-regel tills de migreras. */
}

/* Wide gamut (Display P3): infödda iOS-appar renderar systemfärgerna i P3,
   som ser klarare ut än samma hex i sRGB — därför upplevs webbens blå som
   "aningen mörkare". På P3-skärmar mappas accenten till P3-värdet. */
@supports (color: color(display-p3 0 0 0)) {
	:root { --color-accent: color(display-p3 0 0.478 1); }
	@media (prefers-color-scheme: dark) {
		:root { --color-accent: color(display-p3 0.039 0.518 1); }
	}
}

:root {
	/* Typografi-skala — SINGLE SOURCE. Sektions-/rad-text pekar hit i stället för
	   hårdkodad px, så storlekar ändras på EN plats (DRY). Roller:
	     --fs-section-header  grupprubrik (Section-titel, .seclbl)
	     --fs-row             primär rad-/pushnav-etikett (.gt, .use-title, list-titel)
	     --fs-row-sub         värde/inmatning/beskrivning (.gm, .val, .description)
	     --fs-meta            badge/tid/who (small) */
	--fs-section-header: 14px;
	--fs-row:            15px;
	--fs-row-sub:        13px;
	--fs-meta:           12px;
	/* Vertikalt avstånd MELLAN grupperade sektioner (Apple inset-grouped). SINGLE
	   SOURCE — pekar alla flex-gap/section-marginer hit så vyerna aldrig driver isär
	   (StandingView/SettingsView/UserDrawer var 22/24/24). */
	--section-gap:       20px;
	/* Inmatningsfält (input/textarea/select). ALDRIG under 16px — Safari på
	   iOS autozoomar fokuserade fält med mindre text, och zoomen backar inte
	   när fältet lämnas. Fältregler pekar hit (eller sätter större, t.ex. 17). */
	--fs-input:          16px;
	/* Segmented control / pill-grupper — SINGLE SOURCE. Track + vald pill delas
	   av ALLA pill-grupper (SegmentedControl, DistriktFilter, TabBar) så de aldrig
	   kan driva isär. Standard iOS-look: ljust grått spår, vit pill med mjuk skugga.
	   Segmented controls får mörk aktiv text; TabBar tintar aktiv text accent-blå
	   (egen kontroll: navigation tintar aktiv flik, HIG). */
	--seg-track:       rgba(118, 118, 128, 0.12);
	--seg-pill:        #ffffff;
	/* Ogenomskinlig markering för iPad-flikpillret, som ligger på VIT botten
	   (iPadOS-standard) i stället för botten-TabBarens grå spår. */
	--seg-track-solid: rgb(233, 233, 236);
	--seg-pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.06);
	/* ══ Z-INDEX — EN dokumenterad skala (SINGLE SOURCE) ══════════════════════
	   ALLA z-index i SPA:t pekar hit. Inga hårdkodade heltal ute i komponenter.
	   Två grupper:

	   A. Content-ladder — lokala lager INOM en komponents egen stacking-kontext
	      (badge över bild, sticky rad, sänkt dekor-pseudo). Relativa till syskon;
	      absolutvärdet spelar ingen global roll, men ladder-ordningen gör.
	        --z-below    -1  dekor bakom innehållet (bakgrunds-SVG, pseudo)
	        --z-base      0  grundplan / återställ i stacking-kontexten
	        --z-raised    1  strax över syskon (aktiv flik/chip, markör, färgbalk)
	        --z-raised-2  2  över ett redan lyft element (overlay-kontroll, badge)
	        --z-sticky    3  sticky rubrik/rad + absolut vy-overlay-rad (hint/legend)
	        --z-float     4  svävande panel/knapp över sticky (FAB, reglage, detaljlager)

	   B. App-lager — fixed/portalerade, GLOBAL staplingsordning. Lägst→högst:
	        --z-chrome            3   topbar / header-block / tabbar
	        --z-arbetsyta         6   fullskärmsyta man klickar sig VIDARE ur (radarn,
	                                  felrapport-tavlan): över chrome, UNDER drawers,
	                                  så ärendet öppnas ovanpå och ytan blir kvar
	        --z-drawer-backdrop   8   drawer/sheet-backdrop
	        --z-drawer            9   drawers & sheets (elevated +10, topmost +20, överPaneler +30 lokalt)
	        --z-takeover          12  helskärms-takeover (skattjakt) över drawer-basen
	        --z-menu-backdrop     20  inline-popover-backdrop (meny i komponent/drawer)
	        --z-menu              21  inline-popover-meny — över sin backdrop
	        --z-overlay           1000 fullskärms-overlay (QR/kamera, bild-lightbox)
	        --z-modal             2000 alerts / obligatoriska notiser — över allt
	        --z-popover           2100 portalerade menyer — över modalen de triggas från
	   ────────────────────────────────────────────────────────────────────────
	   Grupp A och B delar avsiktligt några heltal (3/4 ↔ chrome/float): A bor i
	   isolerade stacking-kontexter, B i roten, så de kolliderar aldrig i praktiken. */
	--z-below:           -1;
	--z-base:             0;
	--z-raised:           1;
	--z-raised-2:         2;
	--z-sticky:           3;
	--z-float:            4;
	--z-chrome:           3;
	/* Hette --z-radar tills felrapport-tavlan behövde exakt samma relation.
	   Aliaset står kvar så äldre komponenter inte behöver röras i samma svep. */
	--z-arbetsyta:        6;
	--z-radar:            6;
	--z-drawer-backdrop:  8;
	--z-drawer:           9;
	--z-takeover:         12;
	--z-menu-backdrop:    20;
	--z-menu:             21;
	--z-overlay:          1000;
	--z-modal:            2000;
	--z-popover:          2100;

	--safe-top:    env(safe-area-inset-top, 0);
	--safe-bottom: env(safe-area-inset-bottom, 0);
	/* Råa horisontella insets (notch i iPhone-landscape). UI använder
	   nästan alltid de "tunnade" varianterna nedan eftersom 12pt av
	   safe-zonen redan absorberas av baseline-paddingen på chrome och
	   listor. Vi vill respektera notchen utan att lägga dubbel buffer. */
	--safe-left:   env(safe-area-inset-left, 0);
	--safe-right:  env(safe-area-inset-right, 0);
	--safe-left-eff:  max(0px, calc(env(safe-area-inset-left, 0)  - 12px));
	--safe-right-eff: max(0px, calc(env(safe-area-inset-right, 0) - 12px));
	/* Höjd på drawer-headerns titelyta (close/back + titel). EN källa
	   (MNT-4). About- och UserDrawer delar den men har annars olika
	   layout (flex vs grid), så bara höjden centraliseras. 56 ger luft
	   mot kanten i iPhone-landscape-PWA där --safe-top ≈ 0. */
	--drawer-header-h: 56px;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* iOS systemfärger är ljusare i mörkt läge (systemBlue 007AFF → 0A84FF) —
		   men bara ACCENTEN skiftar. Ärendefärgerna (--farg-*) är temaneutrala. */
		--color-accent:        #0a84ff;
		--color-text:          #ffffff;
		--color-text-secondary: rgba(235, 235, 245, 0.6);
		--color-text-tertiary: #7c7c80;   /* 4,09:1 mot #1c1c1e */
		--color-gron-text:     #30d158;
		--color-placeholder:   rgba(235, 235, 245, 0.3);   /* iOS .placeholderText dark */
		--color-bg:            #000000;
		--color-grouped-bg:    #000000;
		--color-surface:       #1c1c1e;
		--color-border:        rgba(84, 84, 88, 0.65);
		--seg-track:       rgba(118, 118, 128, 0.24);
		--seg-pill:        rgb(99, 99, 102);
		--seg-track-solid: rgb(58, 58, 60);
	}
}

button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

/* Drawer push/pop-scen — delad av EntityDrawer (toppnivå-byten) och
   LogoListPane (intern lista↔detalj). Panelerna ligger absolut så in-/utgående
   vy glider förbi varandra utan hopp; ogenomskinlig bakgrund occluderar. */
.drawer-pane-host { position: relative; flex: 1; min-height: 0; }
.drawer-pane { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--color-grouped-bg); }

/* Lane-stack — scen för sidor pushade I en flikkolumn (master), iOS-push med
   tillbaka-pil. Roten ligger kvar under (state bevaras); sidorna slidar in
   ovanpå. Bara detaljvyer öppnas i höger drawer; alla mellanliggande listor
   bor här. Delas av Aktuellt (snabbvalen) och Sponsorer (översiktskortet). */
.lane-stack { position: relative; height: 100%; min-height: 0; overflow: hidden; }
.lane-page { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--color-grouped-bg); }
/* Pushade sidors scroll-yta (sidor utan egen, t.ex. sevärt/statistik).
   Tabbar-clearance: innehållet ska kunna scrollas upp ovanför det
   flytande pillet (0 på bred skärm där tabbar-h=0). */
/* contain: paint — MÄT INNAN DU TAR BORT. Lane-sidan animeras in och ut med
   transform (fly). Under animeringen promotas den till ett kompositlager, och
   utan containment vill WebKit rastrera HELA scrollinnehållet, inte bara den
   synliga rutan. Uppmätt 2026-09-09 på iPhone (@3x): 5 kort = 2 307 px scroll
   ≈ 31 MB textur, 60 kort ≈ 27 000 px ≈ 370 MB. Där dödar iOS fliken, och man
   kastades tillbaka till Aktuellt vid tryck på chevron.left. Tröskeln låg
   uppmätt mellan 55 och 60 kort. Med containment binds ytan till elementets
   egen box oavsett hur lång listan är. */
.lane-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; contain: paint; padding: 0 12px calc(var(--tabbar-h, 0px) + var(--safe-bottom) + 28px); }

/* Verktygsraden (segmentväljare + sök/filter) på de tre flikarna. INTE sticky:
   klibbig tog för mycket vertikalt utrymme på mobil — segmentväljare plus
   sökfält åt ~100 px av varje skärm, hela tiden, medan innehållet är det man
   kom för. Raden scrollar med sidan som allt annat.
   Negativ marginal + padding: bakgrunden täcker hela bredden inklusive gutter. */
.verktygsrad {
	margin: 0 -12px; padding: 0 12px;
	background: var(--color-grouped-bg);
}

/* Compact: lane-sidor är FULLSKÄRMS-pushar (NavigationStack-paritet) —
   täcker TopBar + DistriktFilter och HELA fönsterhöjden; sidans egen
   header (tillbaka + titel + distrikt) tar över. TabBar:n FLYTER ovanpå
   (Liquid Glass: innehållet scrollar under glaset): z 3 = samma som
   header-block/tabbar → DOM-ordningen målar main (sidan) ÖVER headern
   men UNDER tabbaren. Distriktsbyte görs på rotnivån (iOS-mönster). */
@media (max-width: 768px) {
	.lane-page {
		position: fixed;
		inset: 0;
		z-index: 3;
		box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
	}
	/* Feature-scrollarna (byggda för fullhöjds-drawers med bara safe-bottom)
	   får tabbar-clearance när de bor i en fullskärms-push. Selektorn förankras i
	   .lane-stack (0,3,0) så den TILLFÖRLITLIGT slår komponenternas Svelte-scope:ade
	   `.tscroll.svelte-HASH` (0,2,0) — utan .lane-stack blir det specificitets-tie
	   och komponentens egen (tabbar-lösa) padding vinner på källordning. */
	.lane-stack .lane-page .tscroll,
	.lane-stack .lane-page .koscroll,
	.lane-stack .lane-page .gscroll,
	.lane-stack .lane-page .sscroll,
	.lane-stack .lane-page .kaladd,
	.lane-stack .lane-page .kscroll > :last-child,
	.lane-stack .lane-page .dscroll {
		padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 24px);
	}
}

/* Detalj-KOLUMN öppen (icke-modal drawer på bred skärm, >1124px): main
   reserverar kolumnbredden så mittenytan (lägesbilden) krymper i stället
   för att täckas — karta/tidsmaskin centreras i det som är kvar.
   Transition i takt med drawerns fly (260ms). */
body.detail-column .shell main {
	padding-right: 375px;
	transition: padding-right 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Sponsorloggor i mörkt läge (use:sponsorLogga): ljus platta bakom loggan, eller
   helt vit logga direkt på den mörka ytan när sponsorn valt det. :root lyfter
   reglerna över komponenternas egna bakgrunder. Filtret färgar även ram och
   skugga, därför nollas de. */
@media (prefers-color-scheme: dark) {
	:root img[data-sponsorlogga] { background: #fff; }
	:root img[data-sponsorlogga='vit'] { background: transparent; border-color: transparent; box-shadow: none; filter: brightness(0) invert(1); }
}