:root{--sh-ink:#251e4c;--sh-ink90:#483862;--sh-line:#e8e7ea;--sh-bg:#f8f9fc;--sh-card:#ffffff;
--sh-light:#c5cfea;--sh-light50:#e2e7f4;--sh-violet:#7f69bd;--sh-violet-dark:#5b439f;--sh-red:#ea644e;--sh-red10:#fef5f3;
--sh-yellow10:#fffaef;--sh-yellow90:#ffc478;--sh-pill:1.875rem;--sh-shadow:0 1px 3px rgba(37,30,76,.08),0 14px 36px rgba(37,30,76,.08);
/* Design B (eiervalg 19.10.2026): merkevaren fra web-no. Timetype har fast farge: inntak = oransje, oppfølging = fiolett. */
--hr-bg:#f6f2ef;--hr-surface:#ffffff;--hr-ink:#251e4c;--hr-muted:#5d5677;--hr-line:#e7dfd8;--hr-soft:#f1ebe6;
--hr-inntak:#fff1dd;--hr-inntak-edge:#f8911c;--hr-folg:#ede9f7;--hr-folg-edge:#7f69bd;--hr-folg-ink:#4f4280;
--hr-warn:#fde8e3;--hr-warn-ink:#a3361e;--hr-r:14px;--hr-r-big:20px;--hr-rail:0px;--hr-nav-h:64px;
--hr-font:'Barlow', system-ui, -apple-system, sans-serif;--hr-font-head:'Frank Ruhl Libre', Georgia, 'Times New Roman', serif}
/* Skrifter: SIL OFL 1.1, se /clinical/fonts/barlow-OFL.txt og /clinical/fonts/frank-ruhl-libre-OFL.txt */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/clinical/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/clinical/fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/clinical/fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url(/clinical/fonts/frank-ruhl-libre-500.woff2) format('woff2')}
[hidden]{display:none!important}
body{margin:0;background:var(--hr-bg);color:var(--sh-ink);font-family:var(--hr-font);line-height:1.4}
/* Toppfeltet (likt i alle delene): hvitt med tynn kant, logo · del · miljø · appveksler; økten til høyre */
header.top{box-sizing:border-box;background:var(--sh-card);color:var(--sh-ink);border-bottom:1px solid var(--sh-line);display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap;min-height:3.65rem;padding:.4rem 1rem}
header.top .brand{display:flex;align-items:center;gap:.6rem;min-width:0}header.top .logo{display:block;flex:none;height:1.6rem;width:auto}
/* Smal mobil: litt mindre logo, så logo, TEST-merket og søkeikonet står på én linje (merket brytes aldri) */
@media (max-width:599.98px){header.top .logo{height:1.3rem}header.top .brand{gap:.5rem}}
header.top h1{margin:0;padding-left:.6rem;border-left:1px solid var(--sh-line);font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--sh-ink90)}
/* Navnet på delen står én gang: vises appveksleren (med den aktive delen markert), er etiketten bare for skjermlesere */
header.top:has(#apps:not([hidden]) a[aria-current=page]:not([hidden])) h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}
.env{display:inline-block;background:var(--sh-yellow10);color:var(--sh-ink);border:1px solid var(--sh-yellow90);border-radius:var(--sh-pill);padding:0 .55rem;font-weight:600;font-size:.72rem;line-height:1.5;
white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.apps{display:flex;gap:.15rem;padding:.15rem;border:1px solid var(--sh-line);border-radius:var(--sh-pill);background:var(--sh-bg)}
.apps a{display:inline-flex;align-items:center;min-height:2rem;padding:0 .85rem;border-radius:var(--sh-pill);color:var(--sh-ink90);font-size:.8rem;font-weight:600;text-decoration:none}
.apps a:hover{background:var(--sh-light50);color:var(--sh-ink)}
.apps a[aria-current=page]{background:var(--sh-violet-dark);color:var(--sh-card)}
.apps a:focus-visible,.door-primary:focus-visible,#work>.who button:focus-visible,.appnav :is(a,button):focus-visible,.hr-btn:focus-visible{outline:3px solid var(--sh-violet);outline-offset:2px}
/* Eldre flater (Journal og Lab på en origin uten arbeidsflaten) har navn og knapper i `#work>.who`. */
body:has(#work:not([hidden])>.who) header.top{padding-right:20rem}
#work>.who{position:absolute;top:0;right:1rem;height:3.65rem;margin:0;display:flex;align-items:center;gap:.25rem;color:var(--sh-ink90);font-size:.78rem;z-index:5}
#work>.who #who{margin-right:.35rem}#work>.who #who:empty{display:none}
#work>.who button{font:inherit;font-size:.8rem;font-weight:600;color:var(--sh-ink);background:transparent;border:1px solid transparent;border-radius:var(--sh-pill);min-height:2rem;padding:.1rem .65rem;cursor:pointer}
#work>.who button:hover:not(:disabled){background:var(--sh-light50)}
@media (max-width:48rem){body:has(#work:not([hidden])>.who) header.top{padding-right:1rem}#work>.who{position:static;height:auto;justify-content:flex-end;margin:.25rem 0}}
/* Menyen: bare med en aktiv arbeidsflate (innlogget, ikke låst). Lenkene skjules per domene av ClinicalShell.parts. */
.appnav{display:none}
body:has(#work:not([hidden])) .appnav,.hr-boot .appnav{display:flex;box-sizing:border-box;background:var(--hr-surface);z-index:20}
.navitem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:56px;
padding:6px 4px;border:0;border-radius:var(--hr-r);background:none;color:var(--hr-muted);font:inherit;font-size:12px;font-weight:600;line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.navitem:hover{color:var(--hr-ink);background:var(--hr-soft)}
.navitem[aria-current=page]{color:var(--hr-ink);background:var(--hr-soft);font-weight:700}
.navitem .badge{position:absolute;top:6px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--hr-warn-ink);color:#fff;font-size:11px;line-height:18px;text-align:center}
.navitem .badge:empty{display:none}
.me{display:none}
.me-btn{font:inherit;font-size:13px;font-weight:600;color:var(--hr-ink);background:none;border:1px solid var(--hr-line);border-radius:var(--hr-r);min-height:44px;padding:0 8px;cursor:pointer}
.me-btn:hover{background:var(--hr-soft)}
.me #who{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:2.4em;line-height:1.2;font-size:12px;color:var(--hr-muted);text-align:center;overflow-wrap:anywhere}
.me-link{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 4px;border-radius:var(--hr-r);color:var(--hr-muted);font-size:12px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent}
.me-link:hover,.me-link[aria-current=page]{color:var(--hr-ink);background:var(--hr-soft)}
.me-link .badge{min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--hr-warn-ink);color:#fff;font-size:11px;line-height:18px;text-align:center}.me-link .badge:empty{display:none}
.top-search{display:none;align-items:center;gap:10px;box-sizing:border-box;flex:1 1 320px;max-width:760px;min-height:44px;padding:0 14px;border:1.5px solid var(--hr-line);border-radius:var(--hr-r);background:var(--hr-bg);color:var(--hr-muted);font-size:15px;text-decoration:none}
.top-search:hover{border-color:var(--hr-muted);color:var(--hr-ink)}
body:has(#work:not([hidden])) .top-search:not([hidden]),.hr-boot .top-search:not([hidden]){display:flex}
/* Under oppstart (husket meny) står hele menyen som på forrige side, men bare navigasjonen er aktiv: Lås, Logg ut og
 * «Mer» er inert fra HTML-en til shell.js slipper dem ved avklart økt (navnets plass står, så bunnen ikke hopper). Før
 * shell.js har satt lenkenes hidden, viser boot.js-klassene på <html> de huskede domenene. */
.hr-has-calendar #nav-calendar[hidden],:is(.hr-has-journal,.hr-has-calendar) :is(#nav-patients,#top-search)[hidden]{display:flex!important}
@media (max-width:899.98px){.top-search{flex:none;width:44px;margin-left:auto;padding:0;justify-content:center;border:0;background:none;color:var(--hr-ink)}.top-search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (min-width:900px){
body:has(#work:not([hidden])),.hr-boot body{--hr-rail:76px;padding-left:var(--hr-rail)}
body:has(#work:not([hidden])) .appnav,.hr-boot .appnav{position:fixed;top:0;bottom:0;left:0;width:var(--hr-rail);flex-direction:column;gap:4px;padding:12px 6px;border-right:1px solid var(--hr-line);overflow-y:auto}
.appnav .more-open{display:none}
.appnav .me{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:8px}
.hr-has-review #nav-review[hidden]{display:flex!important}}
@media (max-width:899.98px){
body:has(#work:not([hidden])),.hr-boot body{padding-bottom:calc(var(--hr-nav-h) + env(safe-area-inset-bottom))}
body:has(#work:not([hidden])) .appnav,.hr-boot .appnav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
min-height:var(--hr-nav-h);padding:0 max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));border-top:1px solid var(--hr-line)}
.appnav #nav-review{display:none!important}
.navitem{border-radius:0}.navitem[aria-current=page],.more-open[data-here=true]{background:none;color:var(--hr-ink);font-weight:700;box-shadow:inset 0 3px 0 var(--hr-ink)}}
/* Byggesteiner for flatene (prefiks hr- så de ikke kolliderer med flatenes egne klasser) */
.hr-title{margin:0;font-family:var(--hr-font-head);font-weight:500;font-size:1.6rem;line-height:1.2;color:var(--hr-ink)}
.hr-card{background:var(--hr-surface);border:1px solid var(--hr-line);border-radius:var(--hr-r-big)}
.hr-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:46px;padding:0 18px;border:1.5px solid var(--hr-line);border-radius:var(--hr-r);
background:var(--hr-surface);color:var(--hr-ink);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.hr-btn:hover:not(:disabled){border-color:var(--hr-ink)}.hr-btn:disabled{opacity:.6;cursor:default}
.hr-btn--primary{background:var(--hr-ink);border-color:var(--hr-ink);color:#fff}.hr-btn--primary:hover:not(:disabled){background:#483862;border-color:#483862}
.hr-btn--warn{color:var(--hr-warn-ink)}.hr-btn--quiet{border-color:transparent;color:var(--hr-muted)}
.hr-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--hr-line);background:var(--hr-surface);color:var(--hr-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.hr-chip[aria-pressed=true]{background:var(--hr-ink);border-color:var(--hr-ink);color:#fff}
.hr-row{display:flex;align-items:center;gap:12px;min-height:56px;box-sizing:border-box;padding:8px 14px;border-radius:var(--hr-r);border:1.5px solid transparent;background:var(--hr-surface)}
.hr-row--inntak{background:var(--hr-inntak)}.hr-row--oppfolging{background:var(--hr-folg)}.hr-row--ledig{border:1.5px dashed var(--hr-line);color:var(--hr-muted)}
.hr-empty{margin:0;padding:12px 4px;color:var(--hr-muted)}
.hr-skeleton{border-radius:var(--hr-r);background:linear-gradient(90deg,var(--hr-soft),var(--hr-surface),var(--hr-soft));background-size:200% 100%;animation:hr-shimmer 1.2s linear infinite;min-height:56px}
@keyframes hr-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.hr-skeleton{animation:none}}
.hr-toast{position:fixed;left:50%;bottom:calc(var(--hr-nav-h) + env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);z-index:45;margin:0;padding:12px 18px;border-radius:var(--hr-r);background:var(--hr-ink);color:#fff;font-weight:700;max-width:calc(100vw - 32px)}
.hr-tabs{display:flex;gap:4px;overflow-x:auto}.hr-tabs>*{min-height:46px;padding:0 12px;white-space:nowrap;font-weight:700;color:var(--hr-muted)}
.hr-tabs>[aria-selected=true],.hr-tabs>[aria-current=page]{color:var(--hr-ink);box-shadow:inset 0 -3px 0 var(--hr-ink)}
/* Arket: bunnark på mobil, sentrert dialog fra 900 px. Lukkes med Lukk, Esc eller klikk utenfor; fokus tilbake til åpneren. */
dialog.hr-sheet{box-sizing:border-box;border:0;padding:12px 16px calc(20px + env(safe-area-inset-bottom));color:var(--hr-ink);background:var(--hr-surface);display:none;flex-direction:column;gap:10px}
dialog.hr-sheet[open]{display:flex}
dialog.hr-sheet::backdrop{background:rgba(15,18,30,.42)}
@media (max-width:899.98px){dialog.hr-sheet{margin:auto 0 0;width:100%;max-width:100%;max-height:85dvh;overflow:auto;border-radius:var(--hr-r-big) var(--hr-r-big) 0 0}}
@media (min-width:900px){dialog.hr-sheet{width:min(420px,calc(100% - 32px));border-radius:var(--hr-r-big);padding:20px}}
.more-who{margin:0;color:var(--hr-muted)}.more-who:empty{display:none}
.more-review{justify-content:space-between;text-align:left}
.more-count{flex:none;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--hr-warn);color:var(--hr-warn-ink)}.more-count:empty{display:none}
/* Feilsiden (dokumentnavigasjon til en adresse som ikke finnes eller avvises) */
body.errorpage{display:grid;place-items:center;min-height:100dvh;padding:16px;box-sizing:border-box}
.errorcard{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:2.5rem 2rem;width:min(440px,100%);box-sizing:border-box}
.errorcard p{margin:0;color:var(--hr-muted)}
/* Inngang, PIN-valg og låst skjerm er sentrerte kort uten toppfelt: én ting å gjøre */
body:has(#login:not([hidden])) header.top,body:has(#locked:not([hidden])) header.top,body:has(#pin-setup:not([hidden])) header.top{display:none}
/* Rolig merkevarebilde bak inngang, PIN-valg og låst skjerm (dekorativt, ingen tekst over). CSS-bakgrunn per media-
   spørring: hver skjerm laster bare sin egen versjon. PC (≥ 960 px): venstre halvdel, kortet sentrert i høyre.
   Under 960 px: stående bilde over hele skjermen (også under statuslinjen), figuren i øvre del, og innholdet i et
   bunnark i tommelsonen med høyde etter innholdet og en myk hvit overgang. */
body:has(#login:not([hidden]))::before,body:has(#locked:not([hidden]))::before,body:has(#pin-setup:not([hidden]))::before{content:"";position:fixed;z-index:25;
background-color:var(--sh-light50);background-repeat:no-repeat;background-size:cover}
@media (min-width:960px){
body:has(#login:not([hidden]))::before,body:has(#locked:not([hidden]))::before,body:has(#pin-setup:not([hidden]))::before{inset:0 50% 0 0;
background-image:url(/clinical/door.webp);background-position:center 30%}
section.door{left:50%}}
@media (max-width:959.98px){
body:has(#login:not([hidden]))::before,body:has(#locked:not([hidden]))::before,body:has(#pin-setup:not([hidden]))::before{inset:0;
background-image:url(/clinical/door-mobile.webp);background-position:center bottom;background-color:#fff}
section.door{display:flex;flex-direction:column;justify-content:flex-end;padding:0;overflow-y:auto}
section.door .door-card{width:100%;border-radius:24px 24px 0 0;box-shadow:0 -20px 48px 4px rgba(255,255,255,.75);
padding:1.75rem max(1.25rem,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 24px) max(1.25rem,env(safe-area-inset-left))}
section.door .door-card>*{max-width:420px;margin-left:auto;margin-right:auto}
.door-card .door-logo{width:200px;margin-bottom:1rem}.door-card .door-primary{min-height:52px;margin-top:1.25rem}}
/* PIN-valg og låst skjerm har et høyere ark: bildet flyttes opp, så figuren står over arket (ikke bak det) */
@media (max-width:959.98px){body:has(#locked:not([hidden]))::before,body:has(#pin-setup:not([hidden]))::before{background-size:100% auto;background-position:center -16svh}}
@media (max-width:959.98px) and (max-height:740px){body:has(#locked:not([hidden]))::before,body:has(#pin-setup:not([hidden]))::before{background-position:center -27svh}}
/* Bredere enn bildet (nettbrett på høykant o.l.): hele høyden vises, sidene fylles med himmelfargen */
@media (min-width:600px) and (max-width:959.98px) and (min-aspect-ratio:3/5){
body:has(#login:not([hidden]))::before,body:has(#locked:not([hidden]))::before,body:has(#pin-setup:not([hidden]))::before{background-size:auto 100%}}
/* Inngangen dekker hele vinduet på samme sted i alle delene (sidens egen statuslinje skyver den aldri) */
.door{position:fixed;inset:0;z-index:30;box-sizing:border-box;overflow-y:auto;display:grid;place-items:center;min-height:100dvh;background:transparent;
padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.door-card{box-sizing:border-box;background:var(--sh-card);border-radius:1.25rem;box-shadow:var(--sh-shadow);padding:2.75rem 2rem 2.25rem;width:min(420px,100%);text-align:center}
.door-logo{display:block;margin:0 auto 1.25rem;width:220px;max-width:100%;height:auto}
.door-primary{display:block;box-sizing:border-box;width:100%;min-height:3.25rem;margin:1.5rem 0 0;font:inherit;font-size:1.05rem;font-weight:700;color:var(--sh-card);background:var(--sh-violet-dark);border:1px solid var(--sh-violet-dark);border-radius:var(--sh-pill);cursor:pointer}
.door-primary:hover:not(:disabled){background:var(--sh-ink90);border-color:var(--sh-ink90)}.door-primary:disabled{opacity:.6;cursor:progress}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0;border:0}
.door-note:empty,.door-error:empty{display:none}
.door-note{margin:1.1rem 0 0;padding:.5rem .75rem;border-radius:.6rem;background:var(--sh-bg);font-weight:600;font-size:.9rem}
.door-error{margin:.6rem 0 0;padding:.45rem .7rem;border-left:4px solid var(--sh-red);border-radius:.4rem;background:var(--sh-red10);font-weight:600;font-size:.9rem;text-align:left}