/* ===================================================================
   Ressursstyring — Sykehuspartner HF
   Tokens og skall. Alle verdier fra design-handoffens §Design tokens og
   §Shell, med de to ekte merkevareverdiene fra ARKITEKTUR.md §5.

   GRUNNREGELEN, som styrer alt under: farge brukes KUN på data.
   Chrome, rail, paneler og kontroller er nøytrale. Er noe farget,
   betyr det noe. `--signal` betyr overallokering og ingenting annet.
   =================================================================== */

/* ---------- Skrifter, lokalt. Ingen CDN — offentlig helseforetak. ----
   Source Sans 3 er en variabel skrift: ÉN fil dekker 400/500/600, og
   `font-weight: 400 600` lar nettleseren instansiere aksen. IBM Plex
   Mono er statisk, én fil per vekt. Relative URL-er løses mot CSS-fila
   sin egen adresse, altså APEX' statiske filkatalog.                  */

@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(fonts/source-sans-3-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(fonts/source-sans-3-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------- Tokens ---------------------------- */
:root {
  /* Merkevare. #003087 og #6CACE4 er de EKTE verdiene fra den leverte
     logoen (PMS 287 / PMS 284) og erstatter prototypens gjetning.     */
  --brand-primary: #003087;
  --brand-light:   #6CACE4;
  --link:          #1F5EA8;

  /* SIGNAL. Overallokering, ingenting annet. Aldri en knapp, aldri en
     overskrift, aldri dekor. Fortsatt UBEKREFTET mot profilhåndboka —
     den ligger her, som ÉN variabel, nettopp for å kunne byttes på ett
     sted den dagen Sykehuspartner oppgir sin egen varselfarge.        */
  --signal: #C84A0A;

  --ground:        #04182C;
  --surface:       #FBFBF9;
  --surface-2:     #F7F7F3;
  --surface-3:     #F3F3EE;
  --surface-raised:#FDFDFB;

  --rule:        #D8D8D2;
  --rule-light:  #E3E3DC;
  --rule-lighter:#EFEFE9;
  --rule-grid:   #F1F1EB;
  --rule-axis:   #E7E7E0;

  --ink:     #16202B;
  --muted:   #67727E;
  --muted-2: #8A929C;
  --muted-3: #A6ADB5;
  --hairline:#C9CCD1;

  /* På ground: nøytrale hvitnyanser, aldri farge.
     Ù-5, 28.08.2026 — MÅLT mot `--ground` #04182C, komponert:
         -1  .60   6,78:1   ✓ tekst
         -2  .48   4,77:1   ✓ tekst — GULVET. Under .465 er 4,5:1 tapt.
         -3  .40   3,68:1   ✗ tekst      -4  .32   2,81:1   ✗ tekst
         -5  .28   2,44:1   ✗ tekst
     De tre nederste er BEHOLDT, men bare for streker og flater, der
     kontrastkravet ikke gjelder (`.toppbar-skille`, ramma på `.person-filter`).
     Det er samme skille bane V gjorde for `--muted-2`/`-3` 25.08: et token
     dør ikke, det slutter å bære tekst.
     Hierarkiet i teksten bæres nå av STØRRELSE og VERSALER — 9,5 px mono
     versaler mot 10,5 px sans mot 12,5 px — og ikke lenger av en andre akse
     som tilfeldigvis gikk under lesbarhetsgulvet. */
  --paa-ground-1: rgba(251,251,249,.6);
  --paa-ground-2: rgba(251,251,249,.48);
  --paa-ground-3: rgba(251,251,249,.4);
  --paa-ground-4: rgba(251,251,249,.32);
  --paa-ground-5: rgba(251,251,249,.28);

  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --rail-bredde: 206px;
  --navn-kolonne: 212px;
}


/* ---------------------------------------------------------------------
   KONTRAST — bevisst avvik fra handoffens tokenverdier, godkjent av
   prosjektleder 26.08.

   Bane V målte 74 WCAG 2.1 AA-avvik i ekte nettleser. 34 av dem kom av at
   `--muted-2` (#8A929C) og `--muted-3` (#A6ADB5) ble brukt som TEKSTfarge:
   3,04:1 og 2,11:1 mot `--surface`, mot et krav på 4,5:1 for tekst under
   14px. `--muted` (#67727E) gir 4,73:1 mot `--surface` og 4,56:1 mot
   `--surface-2`, og er allerede et token i fila.

   Derfor: `--muted-2` og `--muted-3` brukes ikke lenger som tekstfarge.
   De står fortsatt på STREKER og FLATER, der kontrastkravet ikke gjelder —
   f.eks. roll-off-merket og den stiplede ramma på udekkede roller.

   Handoffen kaller disse verdiene endelige. Vi avviker likevel, fordi
   handoffens eget kvalitetsgulv sier 4,5:1, og universell utforming er et
   innkjøpskrav hos Sykehuspartner — ikke en finpuss. Ført i STATUS.md.
   --------------------------------------------------------------------- */

/* ---------------- Nøytralisering av APEX-temaet -------------------
   Skallet er en instrumentflate, ikke en nettside: 100vh, og det
   SCROLLER ALDRI. Bare radlista og skuffen scroller. Universal Theme
   sitt eget chrome (header, nav, breadcrumbs, footer) skal ikke vises. */
html.ressurs, html.ressurs body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
html.ressurs .t-Header,
html.ressurs .t-Body-nav,
html.ressurs .t-Body-title,
html.ressurs .t-Footer,
html.ressurs .t-Body-inf,
html.ressurs #t_Body_nav,
html.ressurs .a-Toolbar { display: none !important; }
html.ressurs .t-Body,
html.ressurs .t-Body-main,
html.ressurs .t-Body-content,
html.ressurs .t-Body-contentInner,
html.ressurs .container,
html.ressurs .row,
html.ressurs .col {
  margin: 0 !important; padding: 0 !important; width: auto !important;
  max-width: none !important; overflow: visible !important; background: transparent;
}
html.ressurs .t-Region, html.ressurs .t-Region-body,
html.ressurs .t-Region-bodyWrap, html.ressurs .t-Region-header {
  margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}

/* ------------------------- Skallet ------------------------------- */
#ressurs-app {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 760px;
  background: var(--ground);
  font-family: var(--sans);
  color: var(--surface);
  overflow: hidden;
}
#ressurs-app *, #ressurs-app *::before, #ressurs-app *::after { box-sizing: border-box; }
/* NULLSTILLING AV KNAPPER — les kommentaren, den er rettet 29.08 kl. 08:20.
   Bane ui-3, funn 3-1.

   SLIK STO DEN, og hva den kostet:

       #ressurs-app button { font: inherit; ... }        (1,0,1)
       .tavle-rolle   { font: 500 13px/1.2 var(--sans) } (0,1,0)   ← tapte
       .inventar-navn { font: 500 12.5px/1.25 ... }      (0,1,0)   ← tapte

   `font: inherit` gikk dermed til rot-standarden 16 px/400 på hver eneste
   knapp uten ID-prefiks i regelen sin. Målt i nettleseren 29.08 kl. 08:05:
   **17 klikkbare navn** — 13 av 13 kort på side 30, 4 av 10 rader på side 31 —
   sto 16 px/400 der designsystemet ba om 13 px/500 og 12,5 px/500. På side 31
   sto begge utgavene på samme skjerm, 200 px fra hverandre: prosjektnavnene
   under «Står på nå» store og lette, kompetansenavnene under «Domene» små og
   halvfete. Samme klasse. Forskjellen var bare at den ene er en <button>.

   DEN GAMLE KOMMENTAREN HER SA «prefiks med #ressurs-app», og den kuren
   virker — men den krever at hver framtidige regel husker det. Det gjorde
   `.knapp`, `.rail-valg` og `.rollebytter-valg`. Det gjorde ikke `.tavle-rolle`
   og `.inventar-navn`, som ble skrevet i fase 3 av baner som ikke leste dette
   avsnittet. **En regel som må huskes av alle for å virke, er ikke en regel.**

   KUREN NÅ: `:where()` bidrar med null spesifisitet. Selektoren under er
   derfor (0,0,1) — den slår fortsatt nettleserens egen knappestil, fordi
   forfatterregler alltid slår UA-regler uansett spesifisitet, men den taper
   mot enhver klasseregel. Nullstillingen gjør nøyaktig jobben sin og ingenting
   mer, og designsystemet trenger ikke lenger å kjenne den for å vinne.

   MÅLT FØR JEG BYTTET: 61 knapper inne i `#ressurs-app` på sidene 1, 30 og 31.
   **Null av dem bærer en temaklasse** (`t-*`, `a-*`, `apex-*`). Å senke
   spesifisiteten kan derfor ikke overlate en av våre knapper til Universal
   Theme — det var den ene risikoen ved byttet, og den er målt bort, ikke
   resonnert bort.

   Søsteren til denne fella bor i `ressurs-bemanning.css:144` og spiser
   `padding` i stedet for `font`. Vaktskriptet `tools/sjekk_knappereset.py`
   kjenner nå begge. */
:where(#ressurs-app) button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; font-family: var(--sans);
}
/* ------------------------- Fokusringen ---------------------------
   ÉN EIER, ÉN FARGE. Alt som tegner en fokusring i denne appen leser
   `--fokusring`, og `--fokusring` har nøyaktig ett sted den settes:
   linja rett under. Endres ringen, endres den her.

   ── Historikken, i to trinn ────────────────────────────────────────
   ARKITEKTUR §8 ba om `2px solid #6CACE4` overalt, og samme avsnitt sier
   at WCAG 2.1 AA er GULVET. De to er i konflikt på lys flate: `#6CACE4`
   måler 2,26:1 mot `--surface-2`, mot 1.4.11 sitt krav på 3:1. Ringen
   fantes, og var usynlig. Ù-4 (28.08) løste det ved å la FLATA bestemme
   — `--brand-light` på mørk bunn, `--brand-primary` på den lyse øya.

   Det ga en ring som var synlig overalt, men det ga også appen TO
   fokusfarger, og en tredje sto på innloggingen (nettleserens egen).
   DRAKT, 30.08: prisen for to farger er at «hvilken ring er dette»
   ikke lenger har ett svar — og at hver ny flate må huske å velge side.
   En regel som må huskes av alle for å virke, er ikke en regel; det er
   nøyaktig samme lærdom som knappenullstillinga ti linjer opp.

   ── Hvorfor ingen av de to merkefargene kunne bli DEN ene ───────────
   MÅLT 30.08 i ekte nettleser (`apex/bane_drakt_maal.mjs --merke foer`),
   komponert lag for lag mot flata ringen faktisk tegnes på:

       farge              rail      rollebytter   flate      kort      krav
                       #04182C      #132638     #F7F7F3   #FDFDFB
       #6CACE4 (284)     7,39:1      6,38:1      2,26:1    2,38:1     3:1
       #003087 (287)     1,51:1        ~1,4:1   11,03:1   11,63:1     3:1
       #417ABF           4,06:1      3,49:1      4,10:1    4,33:1     3:1

   `#6CACE4` faller på de lyse flatene, `#003087` faller på raila — der
   32 av 65 målte tabbstopp ligger. «Velg den som synes overalt» har
   altså ikke noe svar blant de to: ingen av dem synes overalt. Det er
   ikke en smakssak, det er to tall under gulvet.

   ── Fargen som ble valgt ───────────────────────────────────────────
   `#417ABF` er ikke en ny farge i systemet. Den ligger nøyaktig 60 % av
   veien fra `--brand-primary` (PMS 287) mot `--brand-light` (PMS 284):

       R  0 + .6·108 =  65      G 48 + .6·124 = 122      B 135 + .6·93 = 191

   altså det ene punktet PÅ husets egen blålinje som klarer 3:1 mot BÅDE
   den mørke raila og de lyse flatene. Vinduet er smalt og regnbart: en
   ring når 3:1 mot #04182C først over relativ luminans 0,126, og mot
   #F3F3EE bare under 0,264. `#417ABF` ligger på 0,188 — omtrent midt i,
   med 35 % margin til gulvet i begge ender. Det er derfor den tåler at
   en flate blir litt lysere eller litt mørkere senere.

   Fargen brukes til fokusringen OG INGENTING ANNET. Den er ikke en
   lenkefarge, ikke en aksent, ikke en knapp (OPPDRAG §4.1). At den
   finnes som ett token med ett bruksområde er hele poenget.

   Presedensen for å avvike fra ARKITEKTUR §8 sin literal er
   prosjektlederens egen: der to deler av spesifikasjonen er uenige,
   vinner gulvet — samme avgjørelse som ga oss 0,82-rampa.

   ── Rekkevidde, sagt høyt ──────────────────────────────────────────
   `ressurs.css` lastes på ALLE sider unntatt 100, 110 og 120
   (bemanningsskuffen og konfliktsida, `sql/41`). Der lastes bare
   `ressurs-bemanning.css`, som har sin EGEN fokusregel med `#6CACE4`
   hardkodet — 18 av 18 tabbstopp i skuffen målt til 2,26–2,38:1.
   Den fila er ikke min. Forespørselen ligger i KOORDINERING.md, og
   inntil den er besvart er skuffen et DOKUMENTERT hull, ikke et lukket
   punkt. `bane_v_uu.mjs` tabber ikke inne i skuffen og ser den ikke.  */
:root { --fokusring: #417ABF; }
#ressurs-app :focus-visible { outline: 2px solid var(--fokusring); outline-offset: 2px; }

/* ALLE tall i mono med tabular-nums. Et tall skal aldri falle tilbake
   til brødtekstfonten — det er dette som gir skjermen instrumentpreget. */
#ressurs-app .tall,
#ressurs-app .maalekort-verdi, #ressurs-app .maalekort-delta,
#ressurs-app .akse-etikett, #ressurs-app .akse-notat,
#ressurs-app .rad-belegg, #ressurs-app .rad-notat,
#ressurs-app .stolpe-verdi, #ressurs-app .merke,
#ressurs-app .gruppe-tittel, #ressurs-app .radtype,
#ressurs-app .toppbar-dato, #ressurs-app .toppbar-hvem,
#ressurs-app .stolpe-detalj-meta, #ressurs-app .stolpe-detalj-kontekst,
#ressurs-app .finn-tall, #ressurs-app .finn-ledig, #ressurs-app .finn-antall,
#ressurs-app .allok-andel, #ressurs-app .allok-uker,
#ressurs-app .allok-topp__uker,
/* Klasser som ALLEREDE står i mono, men som mistet tabular-nums fordi de
   settes med `font:`-kortformen — den nullstiller `font-variant-numeric`.
   Bane R målte dem til `normal` på konsulentens prosjektliste og på
   mulighetstavla (G-5). De må stå HER, ikke bare ha var(--mono), for at
   `#ressurs-app`-spesifisiteten skal vinne over kortformen. */
#ressurs-app .tavle-frist, #ressurs-app .tavle-pct,
#ressurs-app .status-merke, #ressurs-app .interessent-dato,
#ressurs-app .interessent-match, #ressurs-app .mulighet-tall,
#ressurs-app .mulighet-kaption, #ressurs-app .mulighet-hvorfor,
#ressurs-app .alloklinje-verdi, #ressurs-app .kort-tittel-tall,
#ressurs-app .kort-tittel-tekst,
#ressurs-app .tidslinje-undertittel {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* -------------------------- Toppbar ------------------------------ */
.toppbar { display: flex; align-items: center; gap: 26px; padding: 13px 18px 11px; flex: none; }
.toppbar-merke { display: flex; align-items: center; gap: 14px; flex: none; }
/* Klaresone: logoen får luft tilsvarende en korsprikk på hver side.
   Den skal ikke omfarges og ikke settes mot signal.                  */
.toppbar-logo { height: 26px; width: auto; display: block; padding: 0 2px; }
.toppbar-skille { width: 1px; height: 22px; background: var(--paa-ground-4); flex: none; }
.toppbar-ordmerke { font: 600 14.5px/1 var(--sans); letter-spacing: -.01em; }

.rollebytter { display: flex; align-items: center; gap: 10px; flex: none; }
/* Ù-5: sto med sin EGEN literal `.42` (3,93:1) og gikk dermed utenom rampa
   helt. Nå på `--paa-ground-2`, som er det ene stedet gulvet er skrevet ned. */
.rollebytter-etikett { font: 400 11px/1 var(--sans); color: var(--paa-ground-2); }
#ressurs-app .rollebytter-spor { display: flex; gap: 2px; padding: 2px; background: rgba(251,251,249,.06); border-radius: 4px; }
#ressurs-app .rollebytter-valg { font: 400 12px/1 var(--sans); color: var(--paa-ground-1); padding: 6px 11px; border-radius: 3px; background: transparent; }
#ressurs-app .rollebytter-valg[aria-pressed="true"] { font-weight: 600; color: var(--ground); background: var(--surface-3); }
.toppbar-hvem { font: 400 11.5px/1 var(--mono); color: rgba(251,251,249,.5); }
/* Ù-5: uka og datoen er DATA — de sier hvilken posisjon hele skjermen
   gjelder for. `--paa-ground-3` ga 3,68:1. De får `-1`, ikke gulvet: et tall
   som forteller hvor du er, skal ikke ligge på nødrasjon. Målt 6,78:1. */
.toppbar-hoyre { display: flex; align-items: baseline; gap: 16px; flex: none;
                 font: 400 11.5px/1 var(--mono); color: var(--paa-ground-1); }

/* ------------------------- Toppstripe ---------------------------- */
.toppstripe { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
              padding: 2px 18px 15px; flex: none; }
.maalekort { display: flex; flex-direction: column; gap: 5px; padding: 11px 14px 12px;
             background: rgba(251,251,249,.04); border-radius: 4px;
             border-left: 2px solid rgba(108,172,228,.3); }
.maalekort-rad { display: flex; align-items: baseline; gap: 9px; min-height: 44px; }
.maalekort-verdi { font: 500 38px/1 var(--mono); letter-spacing: -.035em; color: var(--surface); }
.maalekort-verdi[data-signal="1"] { color: var(--signal); }
.maalekort-delta { font: 500 13px/1 var(--mono); color: rgba(251,251,249,.55); }
.maalekort-etikett { font: 400 11px/1.35 var(--sans); color: var(--paa-ground-2); text-wrap: pretty; }

/* --------------------------- Kropp ------------------------------- */
/* ---------------- Omfangsnotatet ---------------------------------------
   «Tallene over er ikke filtrert. Lista under viser 3 av 38 personer.»

   Står MELLOM kortene og kroppen, fordi det er kortenes eget omfang den
   forklarer, og fordi det er den veien øyet går når det lurer.

   INGEN NY FARGE, ingen ramme, ingen bakgrunn: den er en opplysning om
   chrome, ikke data. `--signal` betyr overallokering og ingenting annet, og
   en setning som forklarer et filter er ikke en advarsel.

   `--paa-ground-1` (.6), IKKE gulvet `-2` (.48). Linja er kort, den står
   alene på en ellers tom rad, og den er den eneste teksten som forklarer
   hvorfor to tall på skjermen er uenige — den skal ikke være den svakeste
   grånyansen på siden. Målt i ekte nettleser: se
   `apex/bane_filter_omfang.mjs`.

   Venstrekanten følger STRIPA (18 px), ikke det første kortets tekst
   (34 px): setningen gjelder alle fire kortene, ikke det ene.

   Marga er negativ mot toppstripas egen 15 px bunnpolstring, så linja
   legger seg TETT under kortene framfor å flyte midt i lufta mellom to
   flater. Ingen `transition` — den kommer og går i samme bilde som
   filteret (OPPDRAG §4.7).                                              */
.omfangsnote {
  flex: none; margin: -11px 0 0; padding: 0 18px 11px;
  font: 400 11.5px/1.4 var(--sans); color: var(--paa-ground-1);
  text-wrap: pretty;
}
.omfangsnote[hidden] { display: none; }

.kropp { flex: 1; display: flex; gap: 14px; min-height: 0; padding: 0 18px 18px; }

.rail { width: var(--rail-bredde); flex: none; display: flex; flex-direction: column;
        gap: 22px; overflow: auto; padding-bottom: 6px; }
.rail-bolk { display: flex; flex-direction: column; gap: 6px; }
.rail-nav { display: flex; flex-direction: column; gap: 1px; }
/* Ù-5: 2,81:1 -> 4,77:1. Versalene og mono-en holder den fortsatt tydelig
   adskilt fra rail-valgene under, som er 12,5 px sans på `-1`. */
.gruppe-tittel { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
                 color: var(--paa-ground-2); padding-left: 10px; }
#ressurs-app .rail-valg { font: 400 12.5px/1 var(--sans); color: var(--paa-ground-1);
             background: transparent; padding: 7px 11px; border-radius: 3px; width: 100%; }
/* ---------------------------------------------------------------------
   TELLEREN PÅ RAILA — «noe venter på deg»  (bane FB, 29.08)

   INGEN NY FARGE. `--signal` betyr overallokering og ingenting annet
   (OPPDRAG §4.1), og en kø som venter er ikke en overallokering. Merket
   arver derfor rail-tekstens egen farge gjennom `currentColor` — det
   følger med når valget er aktivt, uten at noen ny verdi innføres.

   TALLET ER MONO. `.tall` er husets klasse for det (IBM Plex Mono med
   tabular-nums, `ressurs.css:250`), og merket bærer den framfor å sette
   skriften på nytt. Ett sted bestemmer hvordan et tall ser ut i denne appen.

   Flex settes BARE på valg som faktisk har et merke (`:has`), slik at de
   femten andre rail-valgene står nøyaktig som før. */
#ressurs-app .rail-valg:has(.rail-teller) {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#ressurs-app .rail-teller {
  flex: none; font-size: 10.5px; line-height: 1;
  color: inherit; border: 1px solid currentColor; border-radius: 2px;
  padding: 2px 5px; opacity: .8;
}

/* Utkoblet rail-valg: siden finnes ikke ennå. Nedtonet og uten pekefinger,
   så det er tydelig at det ikke er noe å klikke på — i stedet for at det ser
   klikkbart ut og ikke gjør noe. */
#ressurs-app .rail-valg[data-utkoblet="1"] {
  color: rgba(251,251,249,.22); cursor: default;
}
#ressurs-app .rail-valg[aria-pressed="true"], #ressurs-app .rail-valg[aria-current="page"] {
  font-weight: 500; color: var(--surface); background: rgba(251,251,249,.11); }
/* Ù-5, og dette er den dyreste av de fire: 2,44:1. `.rail-hjelp` er
   setningen «Enhet og funksjon er foretaksbrede tall …» som STATUS.md fører
   som hele forklaringen på hvorfor leveranselederen bare får to grupperinger
   — «raila sier hvorfor». Den forklaringen var den minst lesbare teksten på
   skjermen. Nå 4,77:1. */
.rail-hjelp { font: 400 10.5px/1.45 var(--sans); color: var(--paa-ground-2);
              padding: 2px 10px 0; text-wrap: pretty; }

/* Flaten. Radlista er det eneste som scroller. */
.flate { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
         background: var(--surface); border-radius: 5px; overflow: hidden; color: var(--ink); }

/* ------------------------- Tidslinje ----------------------------- */
.tidslinje-hode { flex: none; display: flex; align-items: flex-end; gap: 22px; padding: 14px 16px 10px; }
.tidslinje-tittel { font: 600 16px/1.1 var(--sans); letter-spacing: -.015em; }
.tidslinje-undertittel { font: 400 11.5px/1 var(--mono); color: var(--muted); }
.tegnforklaring { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; max-width: 52%; }
.tegnforklaring-post { display: flex; align-items: center; gap: 5px; }
.tegnforklaring-prikk { width: 8px; height: 8px; flex: none; border-radius: 1px; }
.tegnforklaring-tekst { font: 400 10.5px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
/* F-21: erstatter prikkelista på prosjektvisningen. Se begrunnelsen i
   ressurs.js — 20 nyanser er ikke en nøkkel, det er pynt. */
/* Ingen egen `max-width`: `.tegnforklaring` har allerede 52 % av hodet, og
   det er den grensa som gjelder. `34ch` var en gjetning fra min side og
   brøt setningen til to linjer med plass til overs ved siden av. */
.tegnforklaring-merknad { font: 400 10.5px/1.35 var(--sans); color: var(--muted);
                          text-align: right; }

/* Prosjektnavn er de lengste navnene i datasettet — «Regional
   laboratoriedataløsning», «Kliniske fellestjenester fase 1» — og
   prosjektvisningen er den ene flata der navnekolonnen bærer dem alene.
   48 px ekstra der, og ingen andre steder: aksen og radene leser samme
   variabel, så de kan ikke komme i utakt. */
#ressurs-app[data-gruppering="prosjekt"] { --navn-kolonne: 260px; }
/* «Regional laboratoriedataløsning» er ett 22-tegns ord etter et 8-tegns
   ord, og traff fortsatt taket på to linjer selv i den bredere kolonnen.
   Prosjektradene tåler en linje til: de er 11, ikke 38, og radhøyden
   styres uansett av stolpene. Målt, ikke antatt — se runde 8. */
#ressurs-app[data-gruppering="prosjekt"] .rad-navn { -webkit-line-clamp: 3; }

.akse { display: grid; grid-template-columns: var(--navn-kolonne) 1fr; flex: none;
        border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule);
        background: var(--surface-2); }
.radtype { display: flex; align-items: center; font: 500 9.5px/1 var(--mono); letter-spacing: .1em;
           text-transform: uppercase; color: var(--muted); padding: 0 12px 0 16px; }
.akse-celler { display: flex; padding-right: 14px; }
.akse-celle { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: 2px; padding: 4px 0;
              border-left: 1px solid var(--rule-axis); color: var(--muted); }
.akse-celle:first-child { border-left: none; }
.akse-celle[data-sterk="1"] { border-left-color: var(--hairline); }
.akse-celle[data-idag="1"] { background: rgba(108,172,228,.14); color: var(--ink); }
.akse-etikett { font: 500 11px/1 var(--mono); }
.akse-notat { font: 400 8.5px/1 var(--mono); color: var(--muted); height: 9px; }

.rader { flex: 1; min-height: 0; overflow: auto; }
.rad { display: grid; grid-template-columns: var(--navn-kolonne) 1fr; border-bottom: 1px solid var(--rule-lighter); }
.rad-venstre { padding: 7px 12px 7px 16px; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.rad-navnblokk { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rad-navnlinje { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* F-20: «Regional EPJ-konsoli…», «Sindre Bjørn…», «Integrasj…».
   Navnet brytes nå over inntil to linjer i stedet for å klippes etter én.
   To, ikke fritt: en rad som vokser ubegrenset river opp rytmen i
   tidslinja, og topografien i ryggraden er det raden er til for.
   Det som fortsatt ikke får plass på to linjer, klippes — men det er
   nesten ingenting, og hover-detaljen har hele navnet. */
.rad-navn { font: 500 13.5px/1.2 var(--sans); color: var(--ink);
            overflow: hidden; text-overflow: ellipsis;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow-wrap: anywhere; }
.rad[data-benk="1"] .rad-navn { color: var(--muted); }
.merke { flex: none; font: 500 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
         color: var(--muted); border: 1px solid #DEDED7; border-radius: 2px; padding: 2px 4px; }
.rad-under { font: 400 10.5px/1.25 var(--sans); color: var(--muted);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rad-tall { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rad-belegg { font: 500 13px/1 var(--mono); color: var(--ink); }
/* Overallokering: signal PLUS tallet. Signal er aldri eneste bærer av
   mening — det er et innkjøpskrav, ikke pynt.                        */
.rad-belegg[data-over="1"] { color: var(--signal); }
.rad-notat { font: 400 9px/1 var(--mono); color: var(--muted); }

.rad-hoyre { position: relative; padding: 8px 14px 6px 0; min-width: 0; }
.rutenett { position: absolute; top: 0; bottom: 0; left: 0; right: 14px; display: flex; pointer-events: none; }
.rutenett-celle { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--rule-grid); }
.rutenett-celle:first-child { border-left: none; }
.rutenett-celle[data-sterk="1"] { border-left-color: var(--rule-light); }
.rutenett-celle[data-idag="1"] { background: rgba(108,172,228,.07); }
.rutenett-celle[data-merket="1"] { background: rgba(22,32,43,.025); }

.stolper { position: relative; }
.stolpe { position: absolute; border-radius: 2px; display: flex; align-items: center; gap: 5px;
          padding: 0 5px; overflow: hidden; white-space: nowrap; color: var(--surface);
          /* Beholder: gjør stolpens EGEN bredde spørrbar under. */
          container-type: inline-size; }
/* F-36: på en 76 px stolpe ble «Databaseforvalter · udekket» til «Data…» —
   fire tegn av en UDEKKET rolle, på den skjermen som er til for å avsløre
   nettopp udekkede roller. En stolpe uten tekst leses som «hold over meg»;
   «Data…» leses som en feil.
   Terskelen er satt der etiketten ikke lenger får plass til rundt sju tegn:
   ~84 px minus 10 px padding, 26 px til prosenten og 5 px mellomrom.
   Beholderspørringen bruker stolpens egen bredde, så regelen gjelder like
   godt i dag-, uke- og månedsoppløsning uten å kjenne noen av dem. */
@container (max-width: 84px) {
  .stolpe-etikett { display: none; }
}
.stolpe-etikett { font: 500 10px/1 var(--sans); overflow: hidden; text-overflow: ellipsis; }
.stolpe-verdi { font: 500 9.5px/1 var(--mono); opacity: .85; margin-left: auto; }
/* Fravær: skravert, aldri farget. Etiketten er nøytral — aldri en årsak. */
.stolpe[data-slag="fravaer"] { background: transparent; color: var(--muted);
  background-image: repeating-linear-gradient(135deg,#D8D8D2 0 3px,transparent 3px 6px);
  border: 1px solid var(--rule-light); }
.stolpe[data-slag="fravaer"] .stolpe-verdi { opacity: 1; }
/* Udekket rolle: et hull, ikke en alarm. Derfor stiplet, ikke signal. */
.stolpe[data-slag="udekket"] { background: transparent; border: 1px dashed var(--muted-3); color: var(--muted); }
.stolpe[data-slag="spoekelse"] { background: transparent; }

.ryggrad { display: flex; align-items: flex-end; height: 18px; margin-top: 6px; position: relative; }
/* Naboceller med lik høyde smelter sammen til én ribbe: ingen marg,
   ingen ramme, ingen avrunding. Det er det som gjør raden til topografi. */
.ryggrad-celle { flex: 1 1 0; min-width: 0; }
.takstrek { position: absolute; left: 0; right: 0; border-top: 1px dashed #B9BDC4; pointer-events: none; }
.rolloff { position: absolute; width: 1px; background: var(--muted-2); border-radius: 1px; }

.bunnstripe { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
              border-top: 1px solid var(--rule); background: var(--surface-2); }
.bunn-hjelp { font: 400 10.5px/1.35 var(--sans); color: var(--muted); flex: 1; }
/* F-15: hvorfor en stolpe ikke lar seg dra utenfor scenariomodus. Egen
   linje fordi `ressurs-scenario.js` skriver om `.bunn-hjelp` ved hver
   veksling — denne er sann i begge tilstander og skal stå i fred. */
.bunn-merknad { flex: none; font: 400 10.5px/1.35 var(--sans); color: var(--muted);
                border-left: 1px solid var(--rule); padding-left: 12px; }
#ressurs-app .knapp { flex: none; font: 500 11.5px/1 var(--sans); color: var(--ink);
         border: 1px solid var(--hairline); border-radius: 3px; padding: 7px 11px; background: transparent; }
/* Den ENE mettede knappen i hele grensesnittet. Alt annet er nøytralt. */
#ressurs-app .knapp--primaer { background: var(--brand-primary); color: var(--surface); border-color: var(--brand-primary); }

/* «← Tilbake til X» — `Ressurs.tegnTilbake()`, delt av side 30 og 31.
   Fikk aldri egen stil da funksjonen kom [22:35]: den rendret som en
   ustylet `<button>`. Nøytral tekstlenke, samme understreks-idé som
   `.inventar-lenke` — ingen ny farge, bare markør og fokusring
   (funnet og rettet av bane N under produksjonsklar-runden på side 30). */
#ressurs-app .tilbakelenke { flex: none; align-self: flex-start;
  font: 500 11.5px/1 var(--sans); color: var(--muted); background: none;
  border: 0; padding: 4px 0; margin-bottom: 2px; cursor: pointer; }
#ressurs-app .tilbakelenke:hover { color: var(--ink); }

.tom-melding { padding: 28px 18px; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }

/* Én animasjon i hele appen: telletransisjonen i toppstripa.
   prefers-reduced-motion gjør også den umiddelbar.                    */
@media (prefers-reduced-motion: reduce) {
  #ressurs-app *, #ressurs-app *::before, #ressurs-app *::after {
    transition: none !important; animation: none !important;
  }
}

/* ============================ Min side (konsulent, side 10) ==========
   Roll-off-datoen er det mest stilte spørsmålet i bygget. Den står både i
   toppstripa og i undertittelen, og gjentas i sin egen linje her — det er
   bevisst gjentakelse, ikke slurv.                                     */
/* `align-items: start` er hele F-19. Uten den strekker rutenettet begge
   kortene til det HØYESTE, og venstre kort — «Bekreftet videre» og «Kan
   lande på deg», som er korte — sto igjen med ~300 px tom, innrammet luft
   under seg. Nå er hvert kort så høyt som innholdet sitt. */
.minside-kort { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
                padding: 16px; flex: none; align-items: start; }
.kort { border: 1px solid var(--rule-light); border-radius: 4px; padding: 13px 14px 15px;
        display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kort-tittel { display: flex; align-items: baseline; gap: 8px; }
.kort-tittel-tekst { font: 500 10px/1 var(--mono); letter-spacing: .09em;
                     text-transform: uppercase; color: var(--muted); }
.kort-tittel-tall { font: 500 11px/1 var(--mono); color: var(--ink); }

.alloklinje { display: flex; align-items: center; gap: 9px; min-width: 0; }
.alloklinje-prikk { width: 8px; height: 8px; flex: none; border-radius: 1px; }
.alloklinje-prikk[data-pipeline="1"] { background: transparent !important; border: 1px dashed #B9BDC4; }
.alloklinje-tekst { flex: 1; min-width: 0; font: 400 11.5px/1.3 var(--sans); color: var(--ink);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alloklinje-verdi { flex: none; font: 500 11.5px/1 var(--mono); color: var(--ink); }
.alloklinje-verdi[data-pipeline="1"] { color: var(--muted); }
.alloklinje-note { font: 400 10.5px/1.4 var(--sans); color: var(--muted); text-wrap: pretty; }
.kort-skille { border-top: 1px solid var(--rule-lighter); }

.mulighet { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #EAEAE3;
            border-radius: 3px; background: var(--surface-raised); padding: 10px 11px; }
.mulighet:hover { border-color: #C9D5E4; }
.mulighet-match { flex: none; width: 40px; display: flex; flex-direction: column;
                  align-items: flex-start; gap: 2px; }
.mulighet-tall { font: 500 19px/1 var(--mono); color: var(--ink); }
.mulighet-kaption { font: 400 8.5px/1 var(--mono); color: var(--muted); }
.mulighet-midt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mulighet-rolle { font: 500 12.5px/1.25 var(--sans); color: var(--ink); }
.mulighet-prosjekt { font: 400 11px/1.3 var(--sans); color: var(--muted); }
.mulighet-hvorfor { font: 400 10.5px/1.35 var(--mono); color: var(--muted); }
.kort-fot { font: 400 10.5px/1.45 var(--sans); color: var(--muted); text-wrap: pretty; }

/* Udekkede roller (leveranseleder, side 20) */
.rolletabell { flex: none; margin: 0 16px 12px; border: 1px solid var(--rule-light);
               border-radius: 4px; overflow: hidden; }
.rolletabell-hode { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
                    background: var(--surface-3); border-bottom: 1px solid var(--rule-light); }
.rolletabell-rad { display: grid; grid-template-columns: 1.4fr 1.1fr .5fr .8fr auto;
                   align-items: center; gap: 12px; padding: 8px 12px;
                   border-bottom: 1px solid #F0F0EA; }
.rolletabell-rad:last-child { border-bottom: none; }
.rolle-funksjon { font: 500 12.5px/1.2 var(--sans); color: var(--ink); }
.rolle-prosjekt { font: 400 11.5px/1.2 var(--sans); color: var(--muted); }
.rolle-tall { font: 400 11.5px/1 var(--mono); color: var(--ink); }
/* Handoffen gir `Bemann` og `Meld interesse` farget tekst (#0B3C7E) og en
   lyseblå ramme. Det er tatt bort med vilje: OPPDRAG §4.1 er ufravikelig —
   farge brukes KUN på data, aldri på en knapp — og `+ Nytt prosjekt` er den
   ene fargede knappen i hele grensesnittet. Hver ekstra blå knapp svekker
   `signal`, og `signal` er det demoen hviler på. Nøytral her. */
#ressurs-app .knapp--lenke { font: 500 11px/1 var(--sans); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 5px 8px; background: transparent; }

/* ====================== Mulighetstavla (side 6) =====================
   Tavla er ikke en tidslinje. Den er en liste over publiserte roller og
   hvem som har meldt seg. Regelen som bærer funksjonen står i foten:
   alle som melder interesse får et utfall.                             */
.tavle { flex: 1; min-height: 0; overflow: auto; display: grid;
         grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
         gap: 14px; padding: 16px; align-content: start; }
.tavle-kort { border: 1px solid var(--rule-light); border-radius: 4px;
              padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tavle-hode { display: flex; align-items: baseline; gap: 8px; }
.tavle-rolle { font: 500 13px/1.2 var(--sans); color: var(--ink); }
.tavle-pct { font: 500 12px/1 var(--mono); color: var(--ink); margin-left: auto; }
.tavle-sub { font: 400 11px/1.35 var(--sans); color: var(--muted); }
.tavle-frist { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.interessent { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 0;
               border-top: 1px solid var(--rule-lighter); }
.interessent-match { flex: none; width: 34px; font: 500 15px/1 var(--mono); color: var(--muted); }
.interessent-midt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.interessent-navn { font: 500 12px/1.2 var(--sans); color: var(--ink); }
.interessent-tittel { font: 400 10.5px/1.2 var(--sans); color: var(--muted); }
.interessent-notat { font: 400 11px/1.45 var(--sans); color: var(--ink);
                     padding-left: 8px; border-left: 2px solid var(--rule); text-wrap: pretty; }
.interessent-dato { font: 400 9.5px/1 var(--mono); color: var(--muted); }
.status-merke { flex: none; font: 500 9px/1 var(--mono); letter-spacing: .06em;
                text-transform: uppercase; color: var(--muted);
                border: 1px solid #DEDED7; border-radius: 2px; padding: 2px 4px; }
.tavle-tom { font: 400 11px/1.4 var(--sans); color: var(--muted); padding-top: 4px; }
/* Kortet er en flex-kolonne, så en knapp strekker seg over hele bredden og
   begynner å se ut som et tekstfelt. Konsulentens «Meld interesse» på
   mulighetstavla skal se ut som knappen den er. */
#ressurs-app .tavle-kort > .knapp { align-self: flex-start; margin-top: 5px; }
.tavle-fot { flex: none; padding: 10px 16px 14px; font: 400 10.5px/1.45 var(--sans);
             color: var(--muted); border-top: 1px solid var(--rule-lighter); }

/* bevisst avvik */

/* ---------------- Hover-detalj på stolper (F-18) -----------------
   Nettleserens `title` kommer etter ett sekunds venting, kan ikke styles
   og kan ikke filmes. Denne er umiddelbar — og «umiddelbar» er ikke en
   animasjon: den har ingen overgang, i tråd med OPPDRAG §4.7.

   `pointer-events: none` er lastbærende: uten den kan boksen legge seg
   under pekeren, ta over hover fra stolpen, og blinke av og på.

   Nøytral flate. Ingen farge — boksen er chrome, ikke data.             */
.stolpe-detalj {
  position: fixed; z-index: 40; max-width: 340px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px 10px;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 2px 12px rgba(4,24,44,.16);
  pointer-events: none;
}
.stolpe-detalj-tittel   { font: 500 12.5px/1.3 var(--sans); color: var(--ink); }
.stolpe-detalj-meta     { font: 400 11px/1.4 var(--mono); color: var(--ink); }
.stolpe-detalj-kontekst { font: 400 10.5px/1.4 var(--mono); color: var(--muted); }
.stolpe-detalj-hint {
  font: 400 10.5px/1.4 var(--sans); color: var(--muted); text-wrap: pretty;
  border-top: 1px solid var(--rule-lighter); padding-top: 6px; margin-top: 3px;
}

/* Pekeren skal si hva stolpen er. `help` utenfor scenariomodus — det
   FINNES noe her, det er bare ikke flyttbart — og `grab` når den er det. */
.stolpe, .rad-navnblokk[data-detalj] { cursor: help; }
.stolpe[draggable="true"] { cursor: grab; }
.stolpe[draggable="true"]:active { cursor: grabbing; }

/* Berøring: uten dette ruller siden mens man drar, og draget stopper i
   det nettleseren overtar bevegelsen. Gjelder både stolpene og
   kandidatkortene i bemanningsskuffen — ressurs.css lastes etter
   ressurs-bemanning.css, så denne vinner. */
/* Bare `.stolpe`. `.kandidat` sto her en stund, og den halvdelen kunne
   ALDRI virke: kandidatkortene lever på side 100, og `ressurs.css` lastes
   ikke der — skuffen har bare `ressurs-bemanning.css`. Jeg oppdaget det da
   berøringsbroen ble flyttet, og satte `touchAction` fra JS i
   `tegnKandidat` i stedet, men lot selektoren stå igjen.
   En regel som ser ut som den gjør noe og ikke gjør det, er samme sort som
   resten av det vi har katalogisert i natt — og verre her, fordi neste bane
   ville lest den som at saken var dekket. Fjernet 27.08. */
.stolpe[draggable="true"] { touch-action: none; }

/* ---------------- Finn personer (side 21) ------------------------
   Leveranselederens kandidatflate. Fire kolonner, samme rutenett i hodet
   og i radene, slik at tallene kan leses nedover — det er derfor de står
   i mono med tabular-nums.

   Ingen farge på chrome. Prikken foran rollenavnet bærer PROSJEKTfargen,
   den samme kontrastjusterte fargen stolpene på tidslinja har, og det er
   den eneste fargen på skjermen.                                       */
.finn-verktoy { flex: none; display: flex; align-items: center; gap: 10px;
                flex-wrap: wrap; padding: 0 16px 10px; }
/* Kolonnehode på LYS flate. `.gruppe-tittel` er raila sin og er
   hvit-på-mørk — brukt her var hodet usynlig. */
.finn-kolonne { font: 500 9.5px/1 var(--mono); letter-spacing: .1em;
                text-transform: uppercase; color: var(--muted); }
#ressurs-app .finn-sok {
  font: 400 12px/1 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 3px; padding: 7px 10px; width: 280px; max-width: 34vw;
}
#ressurs-app .finn-sok::placeholder { color: var(--muted-2); }
#ressurs-app .finn-sok:focus-visible { outline: 2px solid var(--fokusring); outline-offset: 1px; }
/* Egen knapp, ikke `.rail-valg`. Den har `width: 100%` fordi raila er en
   kolonne, og her rant den ut av panelet. */
#ressurs-app .finn-bryter {
  flex: none; width: auto; color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 3px; padding: 7px 11px; background: transparent;
  font: 400 11.5px/1 var(--sans); text-align: left;
}
#ressurs-app .finn-bryter[aria-pressed="true"] {
  background: var(--surface-3); border-color: var(--muted-3); font-weight: 500;
}
.finn-antall { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.finn-ledig-laveste { display: block; }

.finn-hode, .finn-rad {
  display: grid; grid-template-columns: 1.5fr 1.2fr 3fr auto;
  gap: 14px; align-items: start; padding: 9px 16px;
}
.finn-hode { flex: none; border-bottom: 1px solid var(--rule); padding-bottom: 7px; }
.finn-liste { flex: 1; min-height: 0; overflow: auto; }
.finn-rad { border-bottom: 1px solid var(--rule-lighter); }
.finn-navnblokk { min-width: 0; }
.finn-ledig { font: 400 11px/1.35 var(--mono); color: var(--muted); }
.finn-treff { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.finn-treffrad { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
/* Andre og tredje treff for samme person er dempet: det ØVERSTE er det
   «Bemann» går til, og da skal ikke de andre se like sterke ut. */
.finn-treffrad[data-sekundaer="1"] { opacity: .72; }
.finn-tall { flex: none; width: 26px; text-align: right; font: 500 13px/1 var(--mono); color: var(--ink); }
.finn-rolle { font: 400 11.5px/1.3 var(--sans); color: var(--ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finn-hvorfor { font: 400 10.5px/1.35 var(--sans); color: var(--muted);
                flex-basis: 100%; padding-left: 34px; text-wrap: pretty; }

/* --------------- Mine allokeringer (side 13) ---------------------
   Samme rutenett i hodet og i radene, så andelene kan leses nedover.
   Ingen farge på chrome: prikken bærer prosjektfargen, og «kan lande»
   er stiplet omriss — aldri en annen farge, og aldri `signal`, som
   betyr overallokering og ingenting annet.                            */
.allok-hode, .allok-rad {
  display: grid; grid-template-columns: 2.1fr 1.3fr 1.4fr .6fr .8fr;
  gap: 14px; align-items: start; padding: 10px 16px;
}
/* Uten rollekolonne: fire kolonner, og bredden fordeles på nytt i stedet
   for å stå igjen som et hull der den femte var. */
.allok-hode[data-rolle="0"], .allok-rad[data-rolle="0"] {
  grid-template-columns: 2.6fr 1.5fr .7fr .9fr;
}
.allok-hode { flex: none; border-bottom: 1px solid var(--rule); padding-bottom: 7px; }
/* `flex: 0 1 auto`, ikke `flex: 1`. Med fire rader i et 900 px panel sto
   listebeholderen og strakte seg 282 px forbi siste rad, og forklaringen og
   fotlinja ble dyttet ned til bunnen med et hull imellom (bane S: S-6).
   Nå hugger den innholdet sitt når lista er kort, og ruller når den er
   lang — `min-height: 0` er det som gjør rullingen mulig i en flex-kolonne. */
.allok-liste { flex: 0 1 auto; min-height: 0; overflow: auto; }
.allok-rad { border-bottom: 1px solid var(--rule-lighter); }
/* Ikke besluttet ennå: dempet, slik «Kan lande på deg» er det på Min side. */
.allok-rad[data-sikker="0"] { color: var(--muted); }
.allok-rad[data-sikker="0"] .rad-navn { color: var(--muted); }
.allok-prosjekt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.allok-rolle { font: 400 11.5px/1.35 var(--sans); color: var(--muted); }
.allok-periode { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.allok-uker { font: 400 10.5px/1 var(--mono); color: var(--muted); }
.allok-andel { font: 500 13px/1.2 var(--mono); color: var(--ink); }
.allok-rad[data-sikker="0"] .allok-andel { color: var(--muted); }
/* Roll-off strekker seg over hele raden, under kolonnene: det er en
   opplysning om raden, ikke en femte kolonne. */
.allok-rolloff {
  grid-column: 1 / -1; margin-top: 4px;
  font: 400 10.5px/1.4 var(--sans); color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: 8px;
}

/* ---- Side 30: hvem som står på hver rolle (bane N, produksjonsklar) ----
   `.rolle-blokk` er en ren stabel, ikke et grid: `.allok-rad` beholder sin
   egen understrek fra rutenettet over, og personlista under den er en
   ekstra, innrykket linje — samme idé som `.allok-rolloff`, men som egne
   rader i stedet for én grid-spennende linje, fordi hver person trenger sin
   egen klikkbare lenke. Ingen ny farge: navnet bruker `.inventar-lenke`
   (ressurs-kompetanse.css, lastet appbredt) — samme understreks-lenke som
   side 31 sine prosjektlenker. */
/* ÉN rulle for alt under hodet på side 30 — rollebehov OG «Bemannet av» —
   framfor at hver seksjon er et eget flex-barn i `.flate` (som klipper med
   `overflow: hidden`). Uten dette konkurrerte seksjonene om plass og
   «Bemannet av» ble presset ned til under 20 px synlig høyde på et
   prosjekt med sju roller ved en vanlig bærbar-skjermhøyde. Samme idé som
   `.utvikling-rulle` (ressurs-kompetanse.css), men uten dens 16px sidepadding:
   barna her (`.allok-hode`, `.allok-rad`, `.tavle`, `.nektet-kort`) har
   allerede sin egen. */
.prosjekt-rulle { flex: 1; min-height: 0; overflow: auto; }
.rolle-blokk { display: flex; flex-direction: column; }
.rolleperson-liste { display: flex; flex-direction: column; gap: 5px;
                      padding: 2px 16px 11px 44px; }
.rolleperson { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rolleperson-meta { font: 400 10.5px/1.3 var(--mono); color: var(--muted); }

/* S-4: skjermen svarer på sitt eget tall. Nøytral flate — tallet er data
   og står i mono, men boksen er chrome og har ingen farge. `signal` ligger
   allerede i toppstripa der overallokeringen faktisk måles; å gjenta den
   her ville gjort den til dekor. */
.allok-topp {
  flex: none; margin: 12px 16px 0; padding: 11px 13px;
  border: 1px solid var(--rule-light); border-radius: 4px;
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 4px;
}
.allok-topp__tall { display: flex; align-items: baseline; gap: 9px; }
.allok-topp__tall .tall { font: 500 17px/1 var(--mono); color: var(--ink); }
.allok-topp__uker { font: 400 11px/1 var(--mono); color: var(--muted); }
.allok-topp__tekst { font: 400 11px/1.45 var(--sans); color: var(--muted); text-wrap: pretty; }

/* ------------- Klikkbarhet på tidslinja (fase 3) ------------------
   INGEN NY FARGE. Klikkbarhet er markør, hover og fokusring — ikke en
   lenkefarge. `signal` betyr overallokering; en blå hue spredt over 91
   stolper ville tømt hele fargesystemet for mening på én kveld
   (OPPDRAG §4.1, OPPDRAG_FASE3 §3.2).

   Hover på en stolpe er en LYS INNSKUTT RING i chrome-fargen `--surface`,
   ikke en ny hue og ikke en metning. Hover på radetiketten er
   `--surface-2`, som er nøytral flate og allerede i bruk som chrome.
   Fokusringen er den appen alt har: `#ressurs-app :focus-visible`,
   2 px `--fokusring`. Én eier, én farge — se blokka «Fokusringen».   */
.stolpe[data-aapner], .rad-navnblokk[data-aapner] { cursor: pointer; }
.stolpe[data-aapner]:hover { box-shadow: inset 0 0 0 1px rgba(251,251,249,.55); }
.rad-navnblokk[data-aapner]:hover { background: var(--surface-2); border-radius: 3px; }
/* Fokus skal ses OGSÅ på en smal stolpe, der en outline utenfor boksen
   ville blitt klippet av `.stolper`. Derfor både outline og en innskutt
   ring — den ene virker der den andre ikke gjør. */
/* Stolpen er fylt med prosjektfargen — åtte ulike hues, alle mørke nok
   til at hvit tekst når 4,5:1. Da når INGEN enkelt ringfarge 3:1 mot alle
   åtte (`#6CACE4` 2,38:1, `#003087` 2,63:1, `#417ABF` 2,9:1 mot den
   mørkeste). Ringen er derfor tofarget: `--surface` innerst mot fyllet
   (≥4,3:1 mot hver av de åtte) er den som BÆRER kontrasten her, og
   `--fokusring` like innenfor er den som gjør at ringen på en stolpe er
   gjenkjennelig som den samme ringen som overalt ellers. Fargen leses fra
   samme token som alt annet — ingen literal, ingen andre sannhet.
   `--fokusring` mot `--surface` måler 4,25:1, så det ytre laget er synlig
   mot det indre.
   Den skiller seg samtidig fra HOVER, som er én 1 px halvgjennomsiktig hvit
   linje ti linjer opp — to px heldekkende og tofarget er ikke det samme. */
.rader .stolpe:focus-visible {
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 4px var(--fokusring);
}
/* Rader er ikke lenger bare tekst: markøren skal ikke si «marker tekst»
   på et element som åpner en side. */
.rad-navnblokk[data-aapner] { user-select: none; }

/* ---------------- Tidsvindu og personfilter (fase 3) --------------
   Begge i raila, som er mørk flate. Ingen ny farge: knappene arver
   `.rail-valg`, feltet er nøytralt, og «Til i dag» markeres med
   `aria-pressed` slik grupperingsvalgene gjør — ikke med en hue.       */
.vindu-par { display: flex; gap: 4px; }
.vindu-par .rail-valg { flex: 1 1 0; min-width: 0; text-align: center; padding-left: 4px; padding-right: 4px; }
#ressurs-app .person-filter {
  font: 400 12px/1 var(--sans); color: var(--surface);
  background: rgba(251,251,249,.06);
  border: 1px solid var(--paa-ground-5); border-radius: 3px;
  padding: 7px 9px; width: 100%; margin-bottom: 2px;
}
/* Ù-5: en plassholder ER tekst. Ingen av målerne våre ser den —
   `getComputedStyle` på elementet dekker ikke `::placeholder` — så denne er
   rettet på lesning av kilden, ikke fordi et skript ropte. */
#ressurs-app .person-filter::placeholder { color: var(--paa-ground-2); }
#ressurs-app .person-filter:focus-visible { outline: 2px solid var(--fokusring); outline-offset: 1px; }

/* ---------------- Brikkefilteret: skriv og velg -------------------------
   INGEN NY FARGE. En valgt person er ikke `signal` — `signal` betyr
   overallokering og ingenting annet (OPPDRAG §4.1). Brikkene bruker den
   samme nøytrale hvitrampa som resten av raila, og det uthevede forslaget
   bærer appens EGEN fokusring (`--fokusring`), fordi det er nettopp der
   tastaturet står: `aria-activedescendant` flytter fokus dit for
   hjelpemidler, og da skal det se ut som fokus og ikke som en ny hue.

   INGEN NY ANIMASJON (§4.7). Ingen `transition` i denne bolken. Brikker
   kommer og går i samme bilde som klikket.

   KONTRASTEN ER REGNET, IKKE GJETTET. Tekst inne i brikker og forslag står
   på en bunn som er lysere enn `--ground`, og `--paa-ground-2` (gulvet,
   4,77:1 mot ren ground) faller under 4,5:1 der. Derfor `--paa-ground-1`
   inne i lista og i brikkene:
     brikkenavn      --surface       på ground+.11   ≈ 15,9:1
     brikkekryss     --paa-ground-1  på ground+.11   ≈  5,7:1
     forslag-navn    --surface       på ground+.06   ≈ 16,8:1
     forslag-under   --paa-ground-1  på ground+.20   ≈  4,7:1
     «+N treff til»  --paa-ground-1  på ground+.06   ≈  6,2:1
   `--paa-ground-5` brukes bare til STREKER her, aldri til tekst — samme
   skille som resten av fila.                                            */
.filter-felt { display: flex; flex-direction: column; gap: 5px; }
.filter-brikker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 1px; }
.filter-brikker[hidden] { display: none; }
#ressurs-app .filter-brikke {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  font: 400 11.5px/1 var(--sans); color: var(--surface);
  background: rgba(251,251,249,.11);
  border: 1px solid var(--paa-ground-5); border-radius: 3px;
  padding: 0 0 0 7px;
}
.filter-brikke-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 0; }
/* 24 x 24 er ikke et designvalg, det er WCAG 2.5.8 (Target Size, Minimum).
   Brikken selv er 11,5 px høy; krysset måtte derfor vokse ut av den. */
#ressurs-app .filter-brikke-fjern {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: 400 14px/1 var(--sans); color: var(--paa-ground-1);
  background: transparent; border: 0; border-radius: 0 2px 2px 0; cursor: pointer;
}
#ressurs-app .filter-brikke-fjern:hover { color: var(--surface); background: rgba(251,251,249,.14); }
#ressurs-app .filter-toem {
  font: 400 10.5px/1 var(--sans); color: var(--paa-ground-2);
  background: transparent; border: 0; padding: 6px 4px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
#ressurs-app .filter-toem:hover { color: var(--surface); }

.filter-forslag {
  list-style: none; margin: 0; padding: 3px;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(251,251,249,.06);
  border: 1px solid var(--paa-ground-5); border-radius: 3px;
  max-height: 216px; overflow-y: auto;
}
.filter-forslag[hidden] { display: none; }
.filter-forslag-valg {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 7px; border-radius: 2px; cursor: pointer; min-width: 0;
}
#ressurs-app .filter-forslag-valg:hover { background: rgba(251,251,249,.11); }
/* Det uthevede forslaget. Ringen må ligge INNE i elementet: utenfor ville
   den blitt klippet av `overflow-y: auto` på lista — samme felle som
   stolpenes fokusring løser med `inset`. Bakgrunnen står i tillegg, så
   ringen ikke er eneste bærer.

   TOFARGET, og her er hvorfor — MÅLT I PIKSLER, ikke regnet (DRAKT 30.08,
   `page.screenshot` + avlesning av det gjengitte bildet):

   En innskutt ring har TO naboer, og begge teller etter WCAG 1.4.11. Den
   ytre er lista, `rgb(18,37,56)` → 3,53:1 ✓. Den indre er elementets eget
   fyll, `rgba(251,251,249,.14)` som gjengis `rgb(50,66,82)` → **2,34:1**.
   Med `--brand-light` var den indre 4,25:1; da appen gikk over til én
   fokusfarge, falt nettopp denne under gulvet. Én farge overalt skal ikke
   koste kontrast noe sted, så ringen får en 1 px `--ground`-linje på
   innsiden i stedet: da er ringens indre nabo `#04182C` → 4,06:1 ✓.

   MERK for den neste som måler dette: komponeringshjelperen i
   `apex/bane_v_uu.mjs` (og i `bane_drakt_maal.mjs`) leser den indre flata
   som `#FBFBF9` / 4,26:1. Den tar feil — `over()` setter `a: 1` etter
   FØRSTE lag, så to halvgjennomsiktige hvitlag oppå hverandre blir målt
   som ett ugjennomsiktig. Det er samme familie som Ù-7 blindsone 2. Derfor
   står tallene over fra pikslene og ikke fra måleren. */
#ressurs-app .filter-forslag-valg[aria-selected="true"] {
  background: rgba(251,251,249,.14);
  box-shadow: inset 0 0 0 2px var(--fokusring), inset 0 0 0 3px var(--ground);
}
.filter-forslag-navn { font: 400 12px/1.25 var(--sans); color: var(--surface);
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-forslag-under { font: 400 10.5px/1.25 var(--sans); color: var(--paa-ground-1);
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-forslag-tekst { font: 400 10.5px/1.35 var(--sans); color: var(--paa-ground-1);
                        padding: 5px 7px; text-wrap: pretty; }

/* Filterknappen på raden. Nøytral: den er en KONTROLL, og kontroller er
   fargeløse i dette huset.

   GEOMETRIEN ER MÅLT, IKKE VALGT. Navnekolonnen har ingen slark igjen —
   `merke`-lappen («deltid», 45,6 px) er `flex: none` og gir aldri etter, så
   navnet er det eneste som kan krympe. En knapp som tok sine fulle 24 px av
   flyten klippet «Silje Rønning», «Siri Nordhagen» og «Malin Sørhaug» ned
   til to linjer av tre. Målingene ligger i `apex/bane_filter_bredde*.mjs`:

     knappens flytkostnad   0    4    8   12   16   24  px
     klippede radnavn       0    0    0    0    1    3
     rader som vokser       0    3    3    3    3    3   (+34,5 px totalt)

   Boksen er derfor 24 x 24 — WCAG 2.5.8 måler MÅLET, ikke tegnet — mens
   flytkostnaden holdes på 12 px med negative marger. `margin-left: -8px`
   spiser den ekstra flex-luka knappen ellers ville innført; `-12px` til
   høyre lar boksen henge 4 px inn over belegget, som ikke er klikkbart.

   INGEN BAKGRUNN PÅ HOVER. En 24 px flate ville malt de 4 px oppå tallet.
   Tegnet bytter i stedet farge — og FORM: «+» mot «−». Tilstanden bæres av
   formen og av etiketten, aldri av fargen alene. */
#ressurs-app .rad-filterknapp {
  flex: none; width: 24px; height: 24px; padding: 0;
  margin-left: -8px; margin-right: -12px;
  /* `.rad-venstre` er `align-items: flex-start`, så en 24 px boks legger
     seg med overkanten mot navnets overkant — og tegnet havner 4 px under
     både navnet og belegget. Navnelinja er 13,5 px x 1,2 = 16,2 px, så
     (16,2 - 24) / 2 = -3,9. Marga sentrerer knappen på DEN linja, og koster
     ingen høyde: knappen er ikke det høyeste barnet i cella. */
  margin-top: -4px; margin-bottom: -4px;
  display: flex; align-items: center; justify-content: center;
  font: 400 15px/1 var(--sans); color: var(--muted);
  background: transparent; border: 0; border-radius: 3px; cursor: pointer;
}
#ressurs-app .rad-filterknapp:hover,
#ressurs-app .rad-filterknapp[data-valgt="1"] { color: var(--ink); }