/* KOSS — Klätterapans grafiska uttryck: svart krom, orange accent,
   tunga versaler i rubrikerna. Ljust och mörkt läge delar samma form.

   Ordningen i filen: tokens, stomme, krom, typografi, ytor, listor,
   dokument, formulär, ledning, botten. Allt mått kommer ur skalorna
   nedan — inga lösa pixelvärden i komponenterna. */

/* ---------- tokens ---------- */
:root{
  --bg:#f4f1ec; --bg2:#ffffff; --ink:#161513; --ink2:#6a655e; --line:#e2ddd4;
  --line2:#efebe4;
  --chrome:#ffffff; --chrome2:#efebe4; --chrome-ink:#141414;
  --chrome-ink2:#6b6660; --chrome-line:#e0dbd2;
  --brand:#f95103; --brand2:#b8440a; --brand-soft:#fdeadf; --on-brand:#150c05;
  --crit:#8c0f22; --crit-soft:#fbe7ea; --on-crit:#ffffff;
  --warn:#7d5100; --warn-soft:#fdf1dc;
  --ok:#2f7a4f; --ok-soft:#e6efe7;
  --field:#ffffff;
  --leaf:#3c7a33; --bark:#6b5340;
  --sheet:rgba(255,255,255,.82);
  --e1:0 1px 2px rgba(20,16,12,.05);
  --e2:0 1px 2px rgba(20,16,12,.05),0 10px 26px -18px rgba(20,16,12,.35);
  --e3:0 2px 6px rgba(20,16,12,.07),0 18px 44px -22px rgba(20,16,12,.45);
  --shadow:var(--e2);

  /* Avstånd: en 4-punktsskala. Komponenterna plockar härifrån. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:6px; --r:12px; --r-lg:16px; --r-pill:999px;
  --max:1180px; --wide:1600px;
  --dur:.16s; --dur2:.28s; --ease:cubic-bezier(.2,.7,.3,1);

  /* Typskala. Rubrikerna växer med skärmen, brödtexten står stilla. */
  --t-h1:clamp(22px,1.25rem + 1.6vw,30px);
  --t-h2:clamp(16px,.95rem + .4vw,18px);
  --display:"Bahnschrift","DIN Alternate","Avenir Next Condensed",
    "Roboto Condensed","Arial Narrow",-apple-system,"Segoe UI",sans-serif;
  /* Ordmärket: en stencil när den finns, annars ett tungt slabsnitt. Den
     riktiga husfonten ligger inte i repot — läggs den i static/ pekas den
     in här först i listan. */
  --wordmark:"Stencil","Stencil Std","Rockwell Extra Bold","Rockwell",
    "Bahnschrift SemiBold",var(--display);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f0f0f; --bg2:#171717; --ink:#ededea; --ink2:#9a958d; --line:#2a2a28;
  --line2:#222221;
  --chrome:#0a0a0a; --chrome2:#181818; --chrome-ink:#ffffff;
  --chrome-ink2:#8f8a83; --chrome-line:#262626;
  --brand:#f95103; --brand2:#ff8f4d; --brand-soft:#2a160c; --on-brand:#150c05;
  --crit:#ff7d95; --crit-soft:#2e1419; --on-crit:#2a0a12;
  --warn:#e8bd6b; --warn-soft:#2b2211;
  --ok:#63b784; --ok-soft:#172a1e;
  --field:#0d0d0d;
  --leaf:#7fb96b; --bark:#a58a6c;
  --sheet:rgba(10,10,10,.8);
  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 1px 2px rgba(0,0,0,.5),0 10px 26px -18px rgba(0,0,0,.9);
  --e3:0 2px 6px rgba(0,0,0,.6),0 20px 46px -22px rgba(0,0,0,1);
  --shadow:var(--e2);
}}
:root[data-theme="dark"]{
  --bg:#0f0f0f; --bg2:#171717; --ink:#ededea; --ink2:#9a958d; --line:#2a2a28;
  --line2:#222221;
  --chrome:#0a0a0a; --chrome2:#181818; --chrome-ink:#ffffff;
  --chrome-ink2:#8f8a83; --chrome-line:#262626;
  --brand:#f95103; --brand2:#ff8f4d; --brand-soft:#2a160c; --on-brand:#150c05;
  --crit:#ff7d95; --crit-soft:#2e1419; --on-crit:#2a0a12;
  --warn:#e8bd6b; --warn-soft:#2b2211;
  --ok:#63b784; --ok-soft:#172a1e;
  --field:#0d0d0d;
  --leaf:#7fb96b; --bark:#a58a6c;
  --sheet:rgba(10,10,10,.8);
  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 1px 2px rgba(0,0,0,.5),0 10px 26px -18px rgba(0,0,0,.9);
  --e3:0 2px 6px rgba(0,0,0,.6),0 20px 46px -22px rgba(0,0,0,1);
  --shadow:var(--e2);
}
:root[data-theme="light"]{
  --bg:#f4f1ec; --bg2:#ffffff; --ink:#161513; --ink2:#6a655e; --line:#e2ddd4;
  --line2:#efebe4;
  --chrome:#ffffff; --chrome2:#efebe4; --chrome-ink:#141414;
  --chrome-ink2:#6b6660; --chrome-line:#e0dbd2;
  --brand:#f95103; --brand2:#b8440a; --brand-soft:#fdeadf; --on-brand:#150c05;
  --crit:#8c0f22; --crit-soft:#fbe7ea; --on-crit:#ffffff;
  --warn:#7d5100; --warn-soft:#fdf1dc;
  --ok:#2f7a4f; --ok-soft:#e6efe7;
  --field:#ffffff;
  --leaf:#3c7a33; --bark:#6b5340;
  --sheet:rgba(255,255,255,.82);
  --e1:0 1px 2px rgba(20,16,12,.05);
  --e2:0 1px 2px rgba(20,16,12,.05),0 10px 26px -18px rgba(20,16,12,.35);
  --e3:0 2px 6px rgba(20,16,12,.07),0 18px 44px -22px rgba(20,16,12,.45);
  --shadow:var(--e2);
}

/* ---------- stomme ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.58 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%; padding-bottom:env(safe-area-inset-bottom);
  font-synthesis-weight:none;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block;flex:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
@media(min-width:600px){.wrap{padding:0 var(--s5)}}
.wrap.wide{max-width:var(--wide)}
.dim{opacity:.35}

/* En synlig fokusmarkering på allt som går att nå med tangentbordet. Den
   ritas utanför elementet så att den aldrig flyttar något. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:var(--s4);top:var(--s2);background:var(--bg2);color:var(--ink);
  padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--e3)}

/* ---------- krom ---------- */
header{
  position:sticky;top:0;z-index:40;background:var(--chrome);color:var(--chrome-ink);
  border-top:3px solid var(--brand);border-bottom:1px solid var(--chrome-line);
}
@supports (backdrop-filter:blur(1px)){
  header{background:var(--sheet);backdrop-filter:saturate(1.6) blur(14px)}
}
.hbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  max-width:var(--max);margin:0 auto}
@media(min-width:600px){.hbar{padding:var(--s3) var(--s5)}}
body.wide .hbar{max-width:var(--wide)}
/* Ordmärket: KLÄTTERAPAN över KOSS, och apan till höger — lika hög som de
   två raderna tillsammans. Undertiteln står under båda och följer med ner
   på telefonen: den som möter KOSS första gången ska se vad de fyra
   bokstäverna betyder. */
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:none}
.mark{display:block;min-width:0}
/* KLÄTTERAPAN och KOSS är lika breda — den lilla radens teckenavstånd är
   satt så att orden slutar på samma ställe. Undertiteln under får vara
   längre; den är en mening, inte en del av märket. */
.mark i{display:block;font-style:normal;font-family:var(--wordmark);font-size:10px;
  line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-ink2)}
/* Apan ligger som vit bild — samma fil som på trädrapportens omslag — och
   vänds i ljust läge, där kromet är vitt. */
.brand .apa{height:46px;width:auto;flex:none;display:block;filter:invert(1)}
@media (prefers-color-scheme:dark){.brand .apa{filter:none}}
:root[data-theme="dark"] .brand .apa{filter:none}
:root[data-theme="light"] .brand .apa{filter:invert(1)}
.loginlogo{filter:invert(1);mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.loginlogo{filter:none;mix-blend-mode:screen}}
:root[data-theme="dark"] .loginlogo{filter:none;mix-blend-mode:screen}
:root[data-theme="light"] .loginlogo{filter:invert(1);mix-blend-mode:multiply}
.brand b{
  font-family:var(--wordmark);font-size:30px;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:3px;
}
.brand .sub{
  font-size:10.5px;color:var(--chrome-ink2);display:block;line-height:1.3;
  margin-top:3px;letter-spacing:.02em;text-transform:none;font-weight:400;
  white-space:nowrap;
}
/* På en telefon får undertiteln plats först när navigeringen flyttar ner
   på en egen rad. Den raden är bokstäver, jämnt fördelade över bredden. */
@media(max-width:700px){
  .hbar{flex-wrap:wrap;row-gap:0;padding:8px 14px}
  .mark i{font-size:9px}
  .brand b{font-size:26px}
  .brand .apa{height:40px}
  .brand .sub{font-size:9.5px;letter-spacing:.03em;margin-top:3px}
  .hnav{order:3;width:100%;margin:0;justify-content:space-between;gap:0}
  .hnav a{flex:1;justify-content:center;padding:7px}
}

/* Navigeringen i huvudet: orden när det finns bredd, första bokstaven
   när det inte gör det. */
.hnav{margin-left:auto;display:flex;gap:2px;align-items:center;min-width:0}
.hnav a{
  display:flex;align-items:center;gap:8px;padding:9px 10px;
  border-radius:var(--r-pill);color:var(--chrome-ink2);
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
/* Ingen bubbla. Den sida man star pa markeras med farg, inte med en
   fylld platta - en rad likadana knappar drar till sig mer uppmarksamhet
   an navigeringen behover. */
.hnav a:hover{color:var(--chrome-ink)}
.hnav a.on{color:var(--brand)}
/* Etiketten i navigeringen är ingen fältrubrik. `.lbl` bär annars
   `.field label`-regeln med sin marginal under, och den lyfte ordet tre
   pixlar i raden. */
.hnav a .lbl{margin:0;font-size:14px;font-weight:650;line-height:1}
/* Bara ord. Där orden inte ryms står första bokstaven — S, R, K, A — och
   Admin behåller sin ikon, eftersom A redan är Arb Bibliotek. */
.hnav a .navkort{display:none;font-style:normal;font-size:15px;font-weight:700;
  line-height:1;letter-spacing:0;min-width:20px;height:20px;
  place-items:center}
.hnav a .navkort svg{display:block}
@media(max-width:900px){
  .hnav a .lbl{position:absolute;left:-9999px}
  .hnav a .navkort{display:grid}
  .hnav a{padding:9px 11px}
}

/* Förstoringsglaset. Samma form som flikarna bredvid — det är en av dem,
   inte en knapp av annat slag. */
.hsok{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:var(--r-pill);color:var(--chrome-ink2);
  transition:color var(--dur) var(--ease);
}
.hsok:hover{color:var(--chrome-ink)}

/* Vad lagena betyder. Star hopfallt: det ar ett svar pa en fraga,
   inte nagot man behover se varje gang. */
.lagen{margin-top:var(--s3)}
.lagelista{margin:var(--s2) 0 0;padding-left:var(--s4);color:var(--ink2);
  font-size:14px;line-height:1.7}
.lagelista li.nu{color:var(--ink)}
.lagelista li.nu b{color:var(--brand2)}
.hsok[aria-expanded="true"]{color:var(--brand)}

/* Avataren är Profil-fliken. Ringen visar att man står på den, på samma
   sätt som bakgrunden gör i raden bredvid. */
/* Rutnatet har ett spar pa exakt 100 procent. Utan det storleks-
   anpassades sparet efter bildens egen storlek, procenten i bilden
   raknades mot den - och en bild pa 1024 pixlar blev ett ovalt agg som
   stack ut ur cirkeln. overflow klipper det som anda sticker ut. */
.me{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  grid-template:100%/100%;overflow:hidden;
  background:var(--brand);color:var(--on-brand);flex:none;margin-left:var(--s2);
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.06em;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.me:hover{transform:scale(1.06)}
.me.on{box-shadow:0 0 0 2px var(--chrome),0 0 0 3px var(--brand)}

/* Chatten flyter nere till höger. Den är inget man gör på vägen någon
   annanstans, så den ska nås från var sida utan att ta en plats i raden
   bland det man faktiskt arbetar i. */
.chattknapp{
  position:fixed;right:var(--s4);bottom:var(--s4);z-index:45;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:var(--on-brand);box-shadow:var(--e3);
  transition:transform var(--dur) var(--ease);
}
.chattknapp:hover{transform:scale(1.07)}
/* Brickan säger hur många olästa meddelanden som ligger och väntar. Över
   nio sager det exakta antalet ingenting - da racker 9+. */
.chattbricka{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;
  padding:0 6px;border-radius:var(--r-pill);background:var(--crit);
  color:var(--on-crit);display:grid;place-items:center;
  font:700 12px/1 var(--display);border:2px solid var(--bg)}


/* Admins ingangar. Fyra grupper bredvid varandra nar det finns
   bredd, under varandra pa en telefon. */
.admingrid{display:grid;gap:var(--s5);margin:var(--s4) 0 var(--s6)}
@media(min-width:760px){.admingrid{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.admingrid{grid-template-columns:repeat(4,1fr)}}
.admindel .eyebrow{display:flex;align-items:center;gap:7px;margin-top:0}
.admindel .rows{margin-top:var(--s2)}
@media(min-width:900px){.chattknapp{right:var(--s5);bottom:var(--s5)}}
@media print{.chattknapp{display:none}}
header a,header b{color:var(--chrome-ink)}
.searchbar{padding:0 var(--s4) var(--s3);max-width:var(--max);margin:0 auto;
  position:relative}
@media(min-width:600px){.searchbar{padding:0 var(--s5) var(--s3)}}
body.wide .searchbar{max-width:var(--wide)}
.searchbar input{
  width:100%;padding:12px 15px 12px 42px;border-radius:var(--r-pill);font-size:16px;
  background:var(--chrome2);color:var(--chrome-ink);border:1px solid transparent;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.searchbar input::placeholder{color:var(--chrome-ink2)}
.searchbar input:focus{outline:0;border-color:var(--brand);background:var(--field)}
.searchbar .si{position:absolute;left:calc(var(--s4) + 14px);top:50%;
  margin-top:-11px;color:var(--chrome-ink2);pointer-events:none}
@media(min-width:600px){.searchbar .si{left:calc(var(--s5) + 14px)}}

/* ---------- typografi ---------- */
/* Luft mellan sökrutans underkant och sidans första rad — bakåtlänken
   ska inte ligga klistrad under fältet. */
/* Luften nertill var till for bottenraden. Kvar behovs marginal sa att
   sidans sista rad gar att na - chattknappen ar 52 px plus sitt avstand
   fran kanten, och den ligger over innehallet. */
main{padding:var(--s6) 0 84px}
@media(min-width:900px){main{padding:var(--s7) 0 96px}}
h1,h2,h3{line-height:1.2;text-wrap:balance}
.page-h{
  font-family:var(--display);font-size:var(--t-h1);font-weight:700;line-height:1.04;
  letter-spacing:.005em;text-transform:uppercase;margin:2px 0 var(--s2);
}
.page-sub{color:var(--ink2);margin:0 0 var(--s5);font-size:15px;max-width:62ch;
  text-wrap:pretty}
.eyebrow{
  font-family:var(--display);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink2);font-weight:700;
  margin:var(--s6) 0 var(--s3);display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- ytor ---------- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--e1);padding:var(--s4)}
@media(min-width:600px){.card{padding:var(--s4) var(--s5)}}
.grid{display:grid;gap:10px}
@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
.flash,.err{border-radius:var(--r);padding:13px 16px;margin:0 0 var(--s5);
  font-size:14.5px;line-height:1.55;border-left:3px solid}
.flash{background:var(--brand-soft);color:var(--brand2);font-weight:600;
  border-left-color:var(--brand)}
.err{background:var(--crit-soft);color:var(--crit);border-left-color:var(--crit)}
.err ul{margin:6px 0 0;padding-left:18px}

/* ---------- snabbingångar ---------- */
.quick{display:grid;gap:11px}
@media(min-width:560px){.quick{grid-template-columns:1fr 1fr}}
.q{display:flex;align-items:center;gap:13px;padding:13px var(--s4);border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg2);box-shadow:var(--e1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
  transform var(--dur) var(--ease)}
.q:hover{border-color:var(--brand);box-shadow:var(--e2);transform:translateY(-1px)}
.q:active{transform:translateY(0)}
.q .mark{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  font-size:19px;flex:none;font-weight:700;background:var(--brand-soft);
  color:var(--brand2)}
.q.crit{border-color:color-mix(in srgb,var(--crit) 45%,var(--line))}
.q.crit .mark{background:var(--crit);color:var(--on-crit)}
.q.ok .mark{background:var(--brand);color:var(--on-brand)}
.q b{display:block;font-size:16px;font-weight:700;letter-spacing:-.005em}
.q small{color:var(--ink2);font-size:13px;line-height:1.45;display:block;margin-top:1px}

/* ---------- listor ---------- */
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--bg2);box-shadow:var(--e1)}
.row{display:flex;gap:12px;align-items:center;padding:11px var(--s4);
  border-bottom:1px solid var(--line2)}
.row:last-child{border-bottom:0}
a.row{transition:background var(--dur) var(--ease)}
a.row:hover{background:var(--brand-soft)}
a.row:hover .go{transform:translateX(3px);color:var(--brand2)}
.row .ic{width:32px;height:32px;border-radius:8px;background:var(--brand-soft);
  color:var(--brand2);display:grid;place-items:center;font-size:13px;flex:none;
  font-family:var(--display);font-weight:700;letter-spacing:.04em}
.row .tx{min-width:0;flex:1}
.row .tx b{display:block;font-size:15px;font-weight:650;letter-spacing:-.005em}
.row .tx small{display:block;color:var(--ink2);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .go{color:var(--ink2);flex:none;display:grid;place-items:center;
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.num{font:700 11px/1 var(--mono);color:var(--ink2);
  border:1px solid var(--line);padding:5px 7px;border-radius:var(--r-sm);flex:none;
  letter-spacing:.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);
  background:var(--brand-soft);color:var(--brand2);white-space:nowrap}
.tag.deep,.tag.todo{background:var(--warn-soft);color:var(--warn)}
.tag.done,.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.crit{background:var(--crit-soft);color:var(--crit)}
.tag.neutral,.tag.sign{background:transparent;border:1px solid var(--line);color:var(--ink2)}

/* ---------- läsläge ---------- */
.progress{height:8px;border-radius:var(--r-pill);background:var(--line);
  overflow:hidden;margin:var(--s3) 0 6px}
.progress i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#ffb27a));
  transition:width var(--dur2) var(--ease)}
.pstat{font-size:13.5px;color:var(--ink2)}
.pstat a{color:var(--brand2);font-weight:650}
.pstat a:hover{text-decoration:underline}
.kvittera{margin:var(--s6) 0 0;padding:var(--s5);border-radius:var(--r);
  border:1px solid var(--line);border-left:3px solid var(--brand);background:var(--bg2);
  box-shadow:var(--e1)}
.kvittera b{display:block;margin-bottom:6px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.kvittera p{margin:0 0 var(--s4);color:var(--ink2);font-size:14.5px;line-height:1.6}
.kvittera .pstat{margin:0}
/* Signaturraden: förnamn, efternamn och datum bredvid varandra när det får plats. */
.signrad{display:grid;gap:12px;margin:0 0 6px}
@media(min-width:620px){.signrad{grid-template-columns:1fr 1fr 170px}}
.signrad .field{margin:0}

/* ---------- dokument ---------- */
.doc{max-width:44rem}
.metaband{display:flex;flex-wrap:wrap;gap:7px;margin:var(--s3) 0 var(--s5)}
.chip{font-size:12px;padding:5px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--ink2);background:var(--bg2)}
.chip b{color:var(--ink);font-weight:650}
.pilot{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r);
  background:var(--warn-soft);color:var(--warn);font-size:13.5px;line-height:1.55;
  margin:0 0 var(--s5);border-left:3px solid var(--warn)}
.body{text-wrap:pretty}
.body h2{font-family:var(--display);font-size:var(--t-h2);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  margin:var(--s6) 0 10px;padding-top:var(--s4);border-top:1px solid var(--line)}
.body h3{font-size:15.5px;margin:var(--s5) 0 6px;color:var(--brand2);font-weight:700}
.body p{margin:0 0 13px}
.body ul{margin:0 0 var(--s4);padding-left:0;list-style:none}
.body ul li{position:relative;padding-left:20px;margin:0 0 var(--s2)}
.body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:2px;
  background:var(--brand)}
.note{background:var(--brand-soft);border-radius:var(--r);padding:15px 17px;
  margin:0 0 var(--s4);border-left:3px solid var(--brand)}
.note b{display:block;margin-bottom:6px}
/* Sprakbandet star mellan rubriken och texten och sager vad det ar
   man laser. Strecket gor det till ett forbehall, inte en faktaruta. */
.note.sprakband{border-left:3px solid var(--brand);margin:var(--s4) 0 var(--s5)}
.note.sprakband p{margin:0;font-size:14px;line-height:1.6;color:var(--ink2)}
.note ul{margin:0;padding-left:0;list-style:none}
.note ul li{padding-left:16px;position:relative;margin:0 0 5px}
.note ul li::before{content:"›";position:absolute;left:0;top:0;background:none;
  width:auto;height:auto;color:var(--brand2)}
.tw{overflow-x:auto;margin:0 0 var(--s5);border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2);box-shadow:var(--e1)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line2);
  vertical-align:top}
/* Rubrikraden ska synas som en rubrikrad. */
th{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--bg);
  border-bottom:2px solid var(--brand);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.fyll{color:var(--ink2);font-style:italic;font-size:13px}
.kv{margin:0 0 var(--s5);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--bg2);box-shadow:var(--e1)}
.kv div{display:flex;gap:14px;padding:11px 15px;border-bottom:1px solid var(--line2);
  font-size:14.5px}
.kv div:last-child{border-bottom:0}
.kv dt{flex:0 0 40%;font-weight:650;margin:0}
.kv dd{margin:0;color:var(--ink2)}
.body ul.check{margin:0 0 var(--s5);padding:0}
.body ul.check li{list-style:none;display:flex;gap:12px;align-items:flex-start;
  padding:11px 2px;margin:0;border-bottom:1px solid var(--line2)}
.body ul.check li::before{display:none}
.body ul.check li:last-child{border-bottom:0}
.check .box{width:18px;height:18px;border:2px solid var(--ink2);border-radius:4px;
  flex:none;margin-top:3px}
.crumb{font-family:var(--display);font-size:12px;color:var(--ink2);margin:0 0 6px;
  letter-spacing:.12em;text-transform:uppercase}
.crumb a{display:inline-flex;align-items:center;gap:6px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--brand2);font-weight:700;
  font-size:12px;margin-bottom:var(--s4);font-family:var(--display);letter-spacing:.12em;
  text-transform:uppercase;transition:gap var(--dur) var(--ease)}
.back:hover{gap:10px}




/* ---------- CV-utskrift ---------- */
/* Klätterapans CV-mall: svart blad, orange rubriker med linje under, apan
   och ordmärket i toppen. Bladet står i sin egen form och följer inte
   ljust/mörkt läge — ett CV ska se likadant ut hos alla som får det. */
/* Bladet är svart. Bakgrunden ligger på .cvwrap, inte på body: en
   webbläsare skriver aldrig ut sidans kanvasbakgrund, bara elementens.
   Ligger den på body blir utskriften ett vitt papper med ljus text — och
   då går CV:t inte att läsa. */
body.cv{background:#1e1e1e;color:#f2f0ed;padding:0;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.cvwrap{max-width:840px;margin:0 auto;background:#1e1e1e;color:#f2f0ed;
  padding:var(--s6) var(--s6) var(--s5);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

.cvhead{display:flex;align-items:center;gap:var(--s4);
  padding-bottom:var(--s4);margin-bottom:var(--s2)}
.cvhead img{height:74px;width:auto;filter:none;mix-blend-mode:screen}
.cvmark b{display:block;font-family:var(--wordmark);font-size:31px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;line-height:1}
.cvmark span{display:block;color:#b9b4ae;font-size:13px;margin-top:5px}
.cvtyp{margin-left:auto;font-family:var(--display);font-size:14px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand)}
.cvhead .btn{margin-left:var(--s4)}
/* Den orange linjen under ordmärket. */
.cvwrap > .cvhead{border-bottom:3px solid var(--brand)}

.cv h2{font-family:var(--display);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);margin:var(--s5) 0 var(--s3);
  padding-bottom:7px;border-bottom:1px solid #4a4744}
.cv section{margin:0}
.cv p{margin:0 0 10px;font-size:14px;line-height:1.65;color:#e6e3df}
.cv ul{margin:0;padding-left:0;list-style:none;font-size:14px}
.cv li{margin:0 0 7px;padding-left:16px;position:relative;line-height:1.55}
.cv li::before{content:"";position:absolute;left:0;top:.6em;width:5px;
  height:5px;border-radius:50%;background:var(--brand)}

/* Personuppgifter: foto till vänster, fälten i en ruta bredvid. */
.cvruta{display:flex;border:1px solid #4a4744}
.cvfoto{width:168px;flex:none;display:grid;place-items:center;
  background:#262422;border-right:1px solid #4a4744;padding:var(--s4)}
.cvfoto img{width:100%;max-width:132px;height:auto;display:block}
.cvfoto .tom{font-family:var(--display);font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:#8d8983}
.cvfakta{flex:1;border-collapse:collapse;font-size:14px}
.cvfakta th{width:42%;text-align:left;font-family:inherit;font-size:14px;
  font-weight:700;text-transform:none;letter-spacing:0;background:none;
  color:#fff;padding:13px var(--s4);border:0;
  border-bottom:1px solid #4a4744;border-right:1px solid #4a4744;
  white-space:normal;vertical-align:middle}
.cvfakta td{padding:13px var(--s4);border:0;border-bottom:1px solid #4a4744;
  color:#d8d4cf;vertical-align:middle}
.cvfakta tr:last-child th,.cvfakta tr:last-child td{border-bottom:0}

/* År i branschen: orange etikett, värdet i en ruta bredvid. Bredden följer
   innehållet — den globala table-regeln drar annars ut etiketten över halva
   bladet för ett tal som är två tecken långt. */
.cvar{width:auto;border-collapse:collapse;font-size:14px;margin-top:var(--s2)}
.cvar th{background:var(--brand);color:var(--on-brand);font-family:inherit;
  font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;
  padding:12px var(--s4);border:0;white-space:nowrap}
.cvar td{padding:12px var(--s5);border:1px solid #4a4744;border-left:0;
  color:#f2f0ed;min-width:90px}

.cvfot{color:#a8a39c;font-size:12px;margin-top:var(--s6);
  padding-top:var(--s3);border-top:1px solid #4a4744;text-align:center}

@media print{
  /* Utan marginal på sidan ritar Chrome varken datum, adress eller
     sidnummer i kanten — och det svarta bladet når ut till pappret. */
  @page{margin:0}
  .cvhead .btn{display:none}
  .cvwrap{max-width:none;min-height:297mm;padding:14mm 13mm}
  /* Logotypen blandas mot mörkt underlag på skärmen. I utskriften ska den
     stå för sig själv — blandningsläget ger annars en grå fyrkant. */
  .cvhead img{mix-blend-mode:normal}
  .cv h2{page-break-after:avoid;break-after:avoid}
  .cv section{page-break-inside:avoid;break-inside:avoid}
  .cvruta,.cvar,.cv li{break-inside:avoid}
}

/* ---------- utskriftsblad för ett KOSS-dokument ---------- */
/* Ett papper ur pärmen ska bära sitt nummer och sin version. Bladet är
   vitt: en styrande rutin läses på papper, och svart botten över hela
   A4 är varken läsbart eller rimligt att skriva ut. */
/* Bladet star i sin egen form och foljer inte lyst/morkt lage - ett
   utskrivet dokument ska se likadant ut hos alla som far det. Hela den
   ljusa paletten pinnas har, annars ritas tabellhuvuden och rutor i
   morkerlagets farger pa vitt papper och blir olasliga. */
body.utskrift{
--bg:#f4f1ec; --bg2:#ffffff; --ink:#161513; --ink2:#6a655e; --line:#e2ddd4;
  --line2:#efebe4;
  --chrome:#ffffff; --chrome2:#efebe4; --chrome-ink:#141414;
  --chrome-ink2:#6b6660; --chrome-line:#e0dbd2;
  --brand:#f95103; --brand2:#b8440a; --brand-soft:#fdeadf; --on-brand:#150c05;
  --crit:#8c0f22; --crit-soft:#fbe7ea; --on-crit:#ffffff;
  --warn:#7d5100; --warn-soft:#fdf1dc;
  --ok:#2f7a4f; --ok-soft:#e6efe7;
  --field:#ffffff;
  --leaf:#3c7a33; --bark:#6b5340;
  --sheet:rgba(255,255,255,.82);
  --e1:0 1px 2px rgba(20,16,12,.05);
  --e2:0 1px 2px rgba(20,16,12,.05),0 10px 26px -18px rgba(20,16,12,.35);
  --e3:0 2px 6px rgba(20,16,12,.07),0 18px 44px -22px rgba(20,16,12,.45);
  --shadow:var(--e2);
  background:#fff;color:#161513;padding:0}
.utskrwrap{max-width:820px;margin:0 auto;padding:var(--s6) var(--s6) var(--s5)}
.utskrhead{display:flex;align-items:center;gap:var(--s4);
  padding-bottom:var(--s3);border-bottom:3px solid var(--brand)}
.utskrhead img{height:52px;width:auto;filter:invert(1);mix-blend-mode:multiply}
.utskrmark b{display:block;font-family:var(--wordmark);font-size:22px;
  letter-spacing:.05em;text-transform:uppercase;line-height:1;color:#161513}
.utskrmark span{display:block;color:#6a655e;font-size:12px;margin-top:4px}
.utskrtyp{margin-left:auto;font-family:var(--display);font-size:13px;
  font-weight:700;letter-spacing:.1em;color:var(--brand)}
.utskrift h1{font-family:var(--display);font-size:26px;letter-spacing:.02em;
  margin:var(--s5) 0 var(--s2);color:#161513}
.utskr-sub{color:#6a655e;font-size:14px;margin:0 0 var(--s4)}
.utskrfakta{width:auto;border-collapse:collapse;font-size:13px;
  margin:0 0 var(--s5)}
.utskrfakta th{text-align:left;font-weight:700;padding:7px 18px 7px 0;
  color:#161513;white-space:nowrap;vertical-align:top}
.utskrfakta td{padding:7px 0;color:#3f3b36}
.utskrift .body{font-size:14px;line-height:1.65}
.utskrift .body h2{font-family:var(--display);font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  margin:var(--s5) 0 var(--s2)}
.utskr-sign{margin:var(--s5) 0 0;padding:11px 14px;border:1px solid #d9d4cb;
  border-radius:var(--r-sm);font-size:13px;color:#3f3b36}
.utskrfot{color:#6a655e;font-size:11.5px;margin-top:var(--s6);
  padding-top:var(--s3);border-top:1px solid #d9d4cb;text-align:center}
@media print{
  @page{margin:16mm 14mm}
  .utskrhead .btn{display:none}
  .utskrwrap{max-width:none;padding:0}
  .utskrift .body h2{break-after:avoid}
  .utskrift .body ul,.utskrift .body table{break-inside:avoid}
  .utskrfot{position:fixed;bottom:0;left:0;right:0}
}

/* ---------- kunskapsbibliotekets ingångar ---------- */
.kort-rad{display:grid;gap:11px}
@media(min-width:620px){.kort-rad{grid-template-columns:1fr 1fr}}
.kort{display:flex;align-items:center;gap:14px;padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
  box-shadow:var(--e1);transition:border-color var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.kort:hover{border-color:var(--brand);box-shadow:var(--e2);transform:translateY(-1px)}
.kort .mark{width:44px;height:44px;border-radius:12px;display:grid;
  place-items:center;background:var(--brand-soft);color:var(--brand2);flex:none}
.kort .tx{flex:1;min-width:0}
.kort .tx b{display:block;font-family:var(--display);font-size:17px;
  letter-spacing:.04em;text-transform:uppercase}
.kort .tx small{display:block;color:var(--ink2);font-size:13px;line-height:1.45;
  margin-top:2px}
.kort .n{font-family:var(--display);font-size:19px;font-weight:700;
  color:var(--ink2);font-variant-numeric:tabular-nums}

/* Stegen i en knop, sida vid sida. En knop är en rörelse — tre rutor i
   följd visar handgreppet, en enda ruta visar bara resultatet. */
.figrad{display:grid;gap:var(--s4);margin:0 0 var(--s5)}
@media(min-width:560px){.figrad{grid-template-columns:repeat(3,1fr)}}
/* En ensam figur laggs i rad med sin bildtext pa breda skarmar. Tre
   steg bredvid varandra har inte plats med det - dar star texten
   under teckningen oavsett skarmbredd. */
.figrad .fig{margin:0;position:relative;flex-direction:column;
  align-items:center;gap:var(--s3)}
.figrad .fig figcaption{text-align:center}
/* Stegen ar det man tittar pa nar man lar sig en knop. De far ta
   plats - 200 px pa en telefon ar tre frimarken bredvid varandra. */
.figrad .fig svg.fg{max-width:260px}
@media(max-width:559px){.figrad .fig svg.fg{max-width:330px}}
/* Bildtexten under en figur ar normalt 46ch bred. I en tredjedels
   kolumn ar det bredare an rutan, och texten spiller ut vid sidan
   av teckningen i stallet for att hamna under den. */
.figrad figcaption{font-size:12.5px;max-width:100%}
.steg{position:absolute;top:10px;left:10px;width:23px;height:23px;
  border-radius:50%;display:grid;place-items:center;background:var(--brand);
  color:var(--on-brand);font-family:var(--display);font-size:13px;
  font-weight:700;line-height:1}

/* ---------- figurer i kunskapsbanken ---------- */
.fig{margin:0 0 var(--s5);padding:var(--s4);border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2);box-shadow:var(--e1);
  display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.fig svg.fg{width:100%;max-width:230px;height:auto;color:var(--ink)}
.fig figcaption{color:var(--ink2);font-size:13px;line-height:1.5;
  text-align:center;max-width:46ch}
/* Blad och kronor i lövets färg, stammen i barkens — ett träd som ritas i
   accentfärgen ser ut som en ikon, inte som ett träd. Knopar och riggar
   står kvar i textens färg. */
.fig svg.blad,.fig svg.krona{color:var(--leaf)}
.fig svg.krona .bark{color:var(--bark)}
@media(min-width:640px){
  .fig{flex-direction:row;align-items:center;gap:var(--s5);
    padding:var(--s4) var(--s5)}
  .fig svg.fg{max-width:170px;flex:none}
  .fig figcaption{text-align:left}
}

/* Processkartorna i kapitel 14. En karta ska läsas, inte kännas igen —
   den får hela bredden och bildtexten under sig, också på stora skärmar.
   Klasserna bär prefixet pk-: `.steg` är redan stegnumret i knoparna,
   och en regel med bredd och höjd på en klass som också sitter på en
   <rect> ritar om rektangeln. */
.fig:has(svg.karta){flex-direction:column;align-items:center}
.fig svg.karta{max-width:640px;flex:none;color:var(--ink)}
.fig:has(svg.karta) figcaption{text-align:center;max-width:62ch}
.karta text{font-size:9.5px;fill:var(--ink)}
.karta .pk-lbl{font-size:7px;font-weight:700;letter-spacing:.14em;
  fill:var(--ink2)}
.karta .pk-sma{font-size:8px;fill:var(--ink2)}
.karta .pk-band{fill:var(--bg);stroke:var(--line)}
.karta .pk-ruta{fill:var(--bg2);stroke:var(--line)}
.karta .pk-steg{fill:var(--brand-soft);stroke:var(--brand)}
.karta .pk-nr{fill:var(--brand)}
.karta .pk-nrt{font-size:8.5px;font-weight:700;fill:var(--on-brand)}
.karta .pk-pil{fill:none;stroke:var(--ink2);stroke-width:1.2}
.karta .pk-ater{stroke-dasharray:3 3}
.karta .pk-spets{fill:var(--ink2)}

/* ---------- formulär ---------- */
form.f{margin:0}
.field{margin:0 0 var(--s4)}
.field label,.lbl{display:block;font-size:14px;font-weight:650;margin:0 0 6px}
.field .hint{display:block;color:var(--ink2);font-size:12.5px;font-weight:400;margin:-3px 0 7px}
/* Falten star kvar pa 16px - under det zoomar iOS in vid inmatning. */
/* Ett falt utan type ar ett textfalt i webblasaren, men inte i en
   selektor som raknar upp typerna - det ritades som webblasarens gra
   standardruta mitt i formularet. */
input:not([type]),input[type=text],input[type=email],input[type=tel],
input[type=date],input[type=month],input[type=number],
input[type=password],input[type=search],select,textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--field);border:1px solid var(--line);border-radius:10px;
  transition:border-color var(--dur) var(--ease)}
textarea{min-height:104px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),
  linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);
  outline-offset:0;border-color:var(--brand)}
.req{color:var(--crit)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:10px;background:var(--brand);color:var(--on-brand);
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border:0;cursor:pointer;
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),
  border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.985)}
.btn.wide{width:100%}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--ink);filter:none}
/* En sparrad knapp ska se sparrad ut. Stang pa en avvikelse utan utredd
   grundorsak stod forut som vilken knapp som helst och gjorde ingenting. */
.btn:disabled,.btn:disabled:hover{opacity:.45;cursor:not-allowed;
  border-color:var(--line);color:var(--ink2);filter:none}
/* Navigeringsraden under Admin: ingen av knapparna är vald, de leder
   vidare. Fylld orange i viloläge läses som "du står här redan" —
   därför fylls de först när muspekaren är på dem. */
.btnrow.nav .btn.ghost:hover,.btnrow.nav .btn.ghost:focus-visible{
  background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn.danger{background:transparent;border:1px solid var(--crit);color:var(--crit)}
/* Bilder på sakerna i registret. Miniatyren ska räcka för att känna igen
   sågen i listan; den stora visas på sakens egen sida. */
.mini{width:38px;height:38px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);display:block}
.bildkol{width:52px}
.sakbild{margin:0 0 var(--s4)}
.sakbild img{max-width:280px;width:100%;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--line)}
.kitbild{width:30px;height:30px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);flex:none}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:var(--s5) 0 0;align-items:center}
.checkline{display:flex;gap:13px;align-items:flex-start;padding:13px 2px;
  border-bottom:1px solid var(--line2)}
.checkline:last-child{border-bottom:0}
.checkline input[type=checkbox]{width:27px;height:27px;flex:none;margin:0;accent-color:var(--brand)}
.checkline .cl b label{display:block;padding:3px 0}
.checkline .cl{flex:1;min-width:0}
.checkline .cl b{display:block;font-size:14.5px;font-weight:650}
.checkline .cl input{margin-top:7px;font-size:14px;padding:9px 12px}
.actrow{display:grid;gap:9px;margin:0 0 12px;padding:13px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2)}
@media(min-width:700px){.actrow{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Radformularet: en rad per post. Pa en telefon ligger raden som ett kort
   med etiketten i varje cell; fran 760px blir den en rad i en tabell. */
.radrad{display:grid;gap:9px;margin:0 0 10px;padding:13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.radrad .c{min-width:0}
.radrad .lbl{display:block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 4px}
.radrad input,.radrad select{width:100%}
@media(min-width:760px){
  .radrad{grid-template-columns:1.4fr .9fr .9fr .6fr .8fr 1.6fr;
    align-items:end;padding:11px 13px}
  .radrad+.radrad .lbl{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .radrad+.radrad{padding-top:9px;padding-bottom:9px}
}
/* Radnumret i radformularet. Utan det ar fyra likadana rader bara fyra
   likadana rader - med det ar det rad 1, 2 och 3. */
.radrad{position:relative}
.radrad .radnr{position:absolute;top:-9px;left:12px;background:var(--bg);
  color:var(--ink2);font-size:11px;font-weight:700;line-height:1;
  padding:2px 7px;border:1px solid var(--line);border-radius:99px}
@media(min-width:760px){.radrad{padding-left:34px}
  .radrad .radnr{top:50%;left:10px;transform:translateY(-50%);border:0;
    background:none;font-size:13px}}

/* Ingressen ovanfor ett formular: vad det ar bra for, med egna ord. */
.formingress{margin:0 0 var(--s4);font-size:15px;line-height:1.65;
  color:var(--ink2);max-width:62ch}

/* ---------- SAM: modulkort, nivarader, verifiering ---------- */
.moduler{display:grid;gap:11px;margin:0 0 var(--s5)}
@media(min-width:720px){.moduler{grid-template-columns:1fr 1fr}}
.modul{display:flex;flex-direction:column;gap:8px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.modul:hover{border-color:var(--brand);transform:translateY(-1px)}
.modul.varn{border-left:3px solid var(--brand)}
.modul .tx b{display:block;font-size:15.5px;font-weight:700;margin:0 0 3px}
.modul .tx small{display:block;color:var(--ink2);font-size:13.5px;
  line-height:1.5}
.modul .rad{font-size:13px;color:var(--ink2);
  border-top:1px solid var(--line2);padding-top:8px;margin-top:2px}
.modul .rad b{color:var(--brand)}

.nivarader{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 var(--s5)}
.nivarad{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border:1px solid var(--line);border-radius:99px;background:var(--bg2);
  text-decoration:none;font-size:13px}
.nivarad:hover{border-color:var(--brand)}
.nivarad b{color:var(--ink);font-variant-numeric:tabular-nums}

.brickrad{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 var(--s4)}
.tag.varn{background:var(--brand-soft);color:var(--brand);
  border-color:var(--brand)}
small.under{display:block;color:var(--ink2);font-size:12px;margin-top:2px;
  font-variant-numeric:tabular-nums}

ul.verlista{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;
  gap:1px;background:var(--line2);border:1px solid var(--line2);
  border-radius:var(--r);overflow:hidden}
ul.verlista li{background:var(--bg2);padding:13px 15px;font-size:14px;
  line-height:1.6}
ul.verlista li b{margin-right:8px}
ul.verlista li .dim{margin-left:8px;font-size:12.5px}

/* Akutrutan: det man ska gora pa plats, och anmalningsplikten.
   Roda tonen ar reserverad for sakerhetskritiskt - den ska betyda nagot. */
.akut{border:1px solid var(--crit);border-left:3px solid var(--crit);
  background:var(--crit-soft);border-radius:var(--r);padding:14px 16px;
  margin:0 0 var(--s4)}
.akut>b{display:flex;align-items:center;gap:8px;font-size:14.5px;
  color:var(--crit);margin:0 0 6px}
.akut p{margin:0 0 6px;font-size:14px;line-height:1.6}
.akut p:last-child{margin-bottom:0}
.akut ul{margin:0;padding-left:20px;font-size:14px;line-height:1.7}
.akut .btn{margin-top:4px}
.akut.allvar{box-shadow:0 0 0 3px var(--crit-soft)}

/* ---------- Mina uppgifter ---------- */
.uppgifter{display:grid;gap:9px;margin:0 0 var(--s3)}
.uppg{display:flex;align-items:center;gap:13px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease)}
.uppg:hover{border-color:var(--brand)}
.uppg .mark{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:9px;background:var(--bg);color:var(--ink2)}
.uppg.akut{border-left:3px solid var(--crit)}
.uppg.akut .mark{background:var(--crit-soft);
  color:var(--crit)}
.uppg.snart{border-left:3px solid var(--brand)}
.uppg.snart .mark{background:var(--brand-soft);color:var(--brand)}
.uppg b{display:block;font-size:14.5px;font-weight:650}
.uppg small{display:block;color:var(--ink2);font-size:13px;margin-top:2px}
.uppg>span:nth-child(2){flex:1;min-width:0}
.uppg .go{color:var(--ink2);flex:none}
a.mer-lank{display:inline-block;font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--brand);
  text-decoration:none;margin:0 0 var(--s4)}
a.mer-lank:hover{text-decoration:underline}

/* Manadsflikarna i Admins rapportvy. */
.manadsrad{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--s3)}
.manadsflik{padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink2);text-decoration:none;background:var(--bg2)}
.manadsflik:hover{border-color:var(--brand);color:var(--ink)}
.manadsflik.vald{background:var(--brand);border-color:var(--brand);
  color:var(--on-brand)}
tr.total>td{border-top:2px solid var(--line);background:var(--bg2)}
tr.saknas>td:first-child{opacity:.7}
.noll{color:var(--ink2);opacity:.35}
a.lamnad{color:var(--ok);text-decoration:none;font-weight:650}
a.lamnad:hover{text-decoration:underline}

.boolline{display:flex;gap:12px;align-items:flex-start;margin:0 0 var(--s4);
  padding:14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg2)}
.boolline input[type=checkbox]{width:26px;height:26px;flex:none;margin:0;
  accent-color:var(--brand)}
.boolline label{display:block;font-size:14.5px;font-weight:650;padding:3px 0}
.boolline .hint{margin-top:0}

/* Kapitlets ingress. Nagra meningar om vad kapitlet handlar om - resten av
   mappguiden star efter dokumenten, hopfalld. */
.ingress p{font-size:15.5px;line-height:1.7;color:var(--ink2);margin:0 0 10px}
.ingress .note{margin:0 0 10px}
details.mer{margin:var(--s5) 0 0;border-top:1px solid var(--line2);
  padding-top:var(--s4)}
details.mer>summary{cursor:pointer;list-style:none;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
  font-weight:700;padding:6px 0;display:flex;align-items:center;gap:8px}
details.mer>summary::-webkit-details-marker{display:none}
details.mer>summary::after{content:'';width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
details.mer[open]>summary::after{transform:rotate(-135deg)}
details.mer>summary:hover{color:var(--brand)}

/* Summan overst i en manadsrapport - det ledningen laser forst. */
.summa{margin:0 0 var(--s4);font-size:15px;line-height:1.9;color:var(--ink2)}
.summa b{color:var(--ink)}

/* Vad vi har: en hog per kategori, sorterna hopfallda under.
   Fragan ar "hur manga motorsagar har vi", och den ska ga att svara pa
   utan att skrolla hundra rader. */
.hogar{display:grid;gap:10px;margin:0 0 var(--s4)}
@media(min-width:700px){.hogar{grid-template-columns:1fr 1fr}}
details.hog{border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg2);overflow:hidden}
details.hog>summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;gap:10px;padding:14px 16px;font-size:15px}
details.hog>summary::-webkit-details-marker{display:none}
details.hog>summary::after{content:'';width:7px;height:7px;flex:none;
  border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
  transform:rotate(45deg);margin-left:auto;
  transition:transform var(--dur) var(--ease)}
details.hog[open]>summary::after{transform:rotate(-135deg)}
details.hog>summary:hover{background:var(--bg)}
.hog .namn{font-weight:700;letter-spacing:.01em}
.hog .rakning{font-family:var(--display);font-size:19px;color:var(--brand);
  line-height:1}
.hog .sorter{border-top:1px solid var(--line2)}
.hog .sort{display:flex;align-items:baseline;gap:10px;padding:9px 16px;
  border-bottom:1px solid var(--line2);text-decoration:none;color:var(--ink2);
  font-size:14px}
.hog .sort:last-child{border-bottom:0}
.hog .sort:hover{background:var(--bg);color:var(--ink)}
.hog .sort span{flex:1;min-width:0}
.hog .sort b{color:var(--ink);font-variant-numeric:tabular-nums}

/* Vad som ligger i en bil. Hopfalld tills man fragar. */
details.lastlista>summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);
  padding:4px 0;font-weight:600}
details.lastlista>summary::-webkit-details-marker{display:none}
details.lastlista>summary::after{content:'';width:6px;height:6px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
details.lastlista[open]>summary::after{transform:rotate(-135deg)}
details.lastlista>summary:hover{color:var(--brand)}
details.lastlista .rakning{color:var(--brand);font-weight:700}
ul.last{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:1px;
  background:var(--line2);border:1px solid var(--line2);
  border-radius:var(--r-sm);overflow:hidden}
ul.last li{display:flex;align-items:baseline;gap:10px;padding:8px 12px;
  background:var(--bg2);font-size:13.5px}
ul.last li b{font-weight:650}
ul.last li span{color:var(--ink2);flex:1;min-width:0}
ul.last li em{font-style:normal;color:var(--brand);font-weight:700;
  font-variant-numeric:tabular-nums}
tr.last>td{padding-top:0;padding-bottom:0}

/* Admins rapportmatris: lamnad eller inte, en kolumn per manad. */
.jaruta{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--ok);
  color:#fff;text-decoration:none}
.jaruta.tom{background:transparent;color:var(--ok);
  border:1px solid var(--ok)}
.jaruta:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.neja{color:var(--ink2);opacity:.5}

/* ---------- inloggning ---------- */
body.plain{background:var(--bg);min-height:100vh;min-height:100dvh;display:grid;
  place-items:center;padding:var(--s5);border-top:3px solid var(--brand)}
.loginwrap{width:100%;max-width:400px;text-align:center;padding:0 0 40px}
.loginlogo{height:72px;margin:0 0 22px}
/* Spraket valjs innan man loggar in - den som inte laser svenska ska
   inte behova hitta Installningar pa svenska forst. */
.loginsprak{display:flex;gap:10px;justify-content:center;margin:0 0 18px}
.loginsprak .flaggval{padding:8px 14px 8px 10px;font-size:14px;text-decoration:none}
.loginwrap .card{text-align:left;padding:var(--s5);box-shadow:var(--e3)}
.loginwrap h1{font-family:var(--display);font-size:23px;margin:0 0 4px;
  text-transform:uppercase;letter-spacing:.06em}
.loginwrap p.sub{color:var(--ink2);font-size:14px;margin:0 0 22px}
.loginwrap .foot{color:var(--ink2);font-size:12.5px;margin:20px 0 0;line-height:1.65}

/* ---------- ledning ---------- */
.stats{display:grid;gap:11px;grid-template-columns:repeat(2,1fr);margin:0 0 var(--s2)}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4) 17px;border-top:3px solid var(--brand);box-shadow:var(--e1)}
/* Ett tal som leder vidare far samma markering som en rad man kan trycka
   pa - annars ser det ut som att siffran bara star dar. */
a.stat{display:block;transition:border-color var(--dur) var(--ease),
  background var(--dur) var(--ease)}
a.stat:hover{border-color:var(--brand);background:var(--bg2)}
a.stat span{text-decoration:underline;text-decoration-color:var(--line)}
a.stat:hover span{text-decoration-color:var(--brand)}
.stat b{display:block;font-family:var(--display);font-size:32px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink2);font-size:12.5px;display:block;margin-top:4px}
.matrix{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg2);box-shadow:var(--e1)}
.matrix table{font-size:13.5px;min-width:520px}
.matrix thead th{position:sticky;top:0;z-index:1}
.matrix tbody tr{transition:background var(--dur) var(--ease)}
.matrix tbody tr:hover{background:var(--line2)}
.matrix td{font-variant-numeric:tabular-nums}
.matrix td.nw{white-space:nowrap}
.matrix td.n{text-align:right;white-space:nowrap}
.matrix a{color:var(--brand2);font-weight:600}
.matrix a:hover{text-decoration:underline}
.pill{display:inline-block;min-width:56px;text-align:center;padding:4px 9px;
  border-radius:var(--r-sm);font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.mid{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--crit-soft);color:var(--crit)}
.pwbox{font:700 18px/1.5 var(--mono);
  background:var(--chrome);color:var(--brand);padding:14px 16px;border-radius:10px;
  margin:10px 0 0;word-break:break-all;user-select:all;letter-spacing:.02em}

/* ---------- inventarie ---------- */
/* Personnamnet upprepas pa varje rad i stallet for ett upprepningstecken -
   en tabellrad ska ga att lasa for sig sjalv. */
.rep{color:var(--ink2)}
.fynd{list-style:none;margin:0;padding:0}
.fynd li{padding:11px 0;border-bottom:1px solid var(--line2)}
.fynd li:last-child{border-bottom:0}
.fynd b{display:block;font-size:14.5px;font-weight:650}
.fynd span{display:block;color:var(--ink2);font-size:13px;margin-top:2px}
code{font:600 13px/1.4 var(--mono);background:var(--bg);padding:2px 6px;
  border-radius:var(--r-sm);border:1px solid var(--line)}

/* ---------- årshjul ---------- */
.wheel{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:520px){.wheel{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.wheel{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){body.wide .wheel{grid-template-columns:repeat(4,1fr)}}
.mon{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);box-shadow:var(--e1);position:relative}
.mon b{font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:block}
/* Ett spår per årshjul i KOSS — arbetsmiljöåret och kontrollåret under
   samma månad, åtskilda men på samma kort. */
.mon .sp{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line2)}
.mon .sp:first-of-type{border-top:0;padding-top:0;margin-top:var(--s2)}
.mon .sl{font-family:var(--display);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand2);display:block;margin-bottom:5px}
.mon p{margin:0 0 6px;font-size:14px;line-height:1.5}
.mon p:last-child{margin-bottom:0}
.mon p i{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:1px}
/* Den månad man står i ska synas utan att man behöver leta. */
.mon.now{border-color:var(--brand);box-shadow:var(--e2)}
.mon.now b{color:var(--brand2)}
.mon .tag{position:absolute;top:var(--s4);right:var(--s4)}


/* ---------- sökförslag ---------- */
.sugg{position:absolute;left:var(--s4);right:var(--s4);top:calc(100% - 6px);
  z-index:60;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--e3);overflow:hidden;max-height:62vh;
  overflow-y:auto}
@media(min-width:600px){.sugg{left:var(--s5);right:var(--s5)}}
.sg{display:flex;gap:12px;align-items:center;padding:9px 14px;
  border-bottom:1px solid var(--line2);cursor:pointer}
.sg:last-child{border-bottom:0}
.sg:hover,.sg.on{background:var(--brand-soft)}
.sg .tx{min-width:0}
.sg .tx b{display:block;font-size:14px;font-weight:650}
.sg .tx small{display:block;color:var(--ink2);font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sg mark{background:color-mix(in srgb,var(--brand) 34%,transparent)}
.sg.alla{font-family:var(--display);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand2);font-weight:700;
  justify-content:center;background:var(--bg)}

/* ---------- hjältekort ---------- */
.hero{margin:var(--s2) 0 var(--s5)}
.hero .page-h{margin-bottom:var(--s3)}
/* Dagens datum står över hälsningen. Det ska gå att läsa på håll utan att
   ta över — därför brödtextens färg och ett orange streck framför. */
.idag{font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:9px}
.idag::before{content:"";width:22px;height:3px;border-radius:2px;flex:none;
  background:var(--brand)}
/* Statusen ska stå där utan att ta plats. */
.rank{margin:-6px 0 var(--s3);font-family:var(--display);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:flex-end;
  padding:0 0 var(--s3);border-bottom:1px solid var(--line)}
.facts .f i{display:block;font-style:normal;font-family:var(--display);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.facts .f b{font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:.04em;display:inline-block;margin-top:2px}
.facts .f em{font-style:normal;color:var(--ink2);font-size:12.5px;margin-left:7px}
/* Regnumret ska läsas som en skylt. */
.facts .plate{border:2px solid var(--ink);border-radius:5px;padding:0 8px;
  letter-spacing:.1em}
/* Utrustningen på startsidan: märkningen, vad det är för sorts sak och
   vilken modell det faktiskt är. Märkningen står först — det är den man
   letar efter på grejen. */
.utrhead{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2);margin:var(--s3) 0 var(--s2)}
.utr{display:flex;flex-direction:column;gap:6px}
.utr .u{display:flex;align-items:baseline;gap:var(--s3);padding:9px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.utr .u b{font-family:var(--display);font-size:12.5px;letter-spacing:.08em;
  color:var(--brand2);flex:none;min-width:54px}
.utr .u i{font-style:normal;font-size:13.5px;flex:none;min-width:92px}
.utr .u em{font-style:normal;font-size:12.5px;color:var(--ink2);
  overflow-wrap:anywhere}
.utr .u .antal{margin-left:auto;flex:none;font-family:var(--display);
  font-size:11.5px;letter-spacing:.08em;color:var(--ink2)}
@media(max-width:479px){
  .utr .u{flex-wrap:wrap;gap:4px var(--s3)}
  .utr .u em{flex-basis:100%}
}
.kitlink{display:inline-block;margin-top:var(--s3);font-family:var(--display);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--brand2)}
.kitlink:hover{text-decoration:underline}
.quick.one{grid-template-columns:1fr}
@media(min-width:560px){.quick.one{grid-template-columns:1fr 1fr}}
.q.read{border-left:3px solid var(--brand)}
.q.read .pill{margin-left:auto}
.progress.slim{height:5px;margin:8px 0 0}

/* ---------- liten textknapp ---------- */
/* "Rensa filtret", "Ta bort" vid ett certifikat, "Ladda ner som CSV". */
.rensa{font-family:var(--display);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand2);font-weight:700;
  white-space:nowrap;padding:0}
.rensa:hover{text-decoration:underline}

/* ---------- profilbild ---------- */
.avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line);background:var(--bg2);flex:none;display:block}
/* Utan bild står initialerna i märkesfärg — samma plats, samma storlek. */
.avatar.tom{display:grid;place-items:center;border:0;background:var(--brand);
  color:var(--on-brand);font-family:var(--display);font-weight:700;
  font-size:24px;letter-spacing:.06em}
.hero .rad .avatar.tom{font-size:21px}
.hero .rad{display:flex;gap:var(--s4);align-items:center;margin:0 0 var(--s3)}
.hero .rad .avatar{width:64px;height:64px}
/* ---------- profilkortet ---------- */
/* Kortet är en person på en sida: bilden, namnet och det personen har
   med sig ut. **Inget band och ingen tapet.** Ett färgat fält med bilden
   hängande över kanten är en profilsida på en webbplats man umgås på;
   det här är ett arbetsverktyg, och samma ruta som resten av systemet
   duger. Samma kort för ens eget och en kollegas — det som skiljer är
   vad som står på det, inte hur det ser ut. */
.pkort{background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-lg);margin:var(--s2) 0 var(--s4)}
.pkort-topp{display:flex;gap:var(--s4);align-items:center;
  padding:var(--s4) var(--s5) 0}
.pkort-bild .avatar{width:80px;height:80px;border:0;box-shadow:none}
.pkort-bild .avatar.tom{font-size:26px}
.pkort-namn{min-width:0}
.pkort-namn .page-h{margin:0;overflow-wrap:anywhere}
.pkort-sub{margin:4px 0 0;font-family:var(--display);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.pkort-body{padding:var(--s4) var(--s5) var(--s5)}
.pkort-fakta{border-bottom:0;padding:0}
.pkort-luft{height:var(--s4)}
.pkort-om{padding:var(--s2) var(--s5) var(--s5)}
.pkort-om .pkort-del:first-child h3,.pkort-om>.pkort-text:first-child{margin-top:var(--s3)}
.pkort-text{margin:var(--s3) 0 0;font-size:15px;line-height:1.65}
.pkort-del h3{margin:var(--s5) 0 var(--s2);font-family:var(--display);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);font-weight:700}
.pkort-kontakt{margin:var(--s5) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.pkort-kontakt a{color:var(--ink)}
.pkort-kontakt a:hover{color:var(--brand2)}
.pkort-knappar{margin:0 0 var(--s5)}
@media(max-width:559px){
  .pkort-topp{gap:var(--s3);padding:var(--s4) var(--s4) 0}
  .pkort-body{padding:var(--s3) var(--s4) var(--s4)}
  .pkort-bild .avatar{width:64px;height:64px}
  .pkort-bild .avatar.tom{font-size:21px}
}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 13px;font-size:13.5px;background:var(--bg)}
.merit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media(min-width:700px){.merit{grid-template-columns:1fr 1fr}}
.merit li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.merit .mi{width:26px;height:26px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:var(--ok-soft);color:var(--ok)}
.merit b{display:block;font-size:14px}
.merit small{color:var(--ink2);font-size:12.5px}
.tidslinje{list-style:none;margin:0;padding:0}
.tidslinje li{display:flex;gap:var(--s4);padding:8px 0;
  border-bottom:1px solid var(--line2)}
.tidslinje li:last-child{border-bottom:0}
.tidslinje .tl-tid{flex:none;min-width:88px;font-family:var(--display);
  font-size:12.5px;letter-spacing:.06em;color:var(--brand2);padding-top:1px}
.tidslinje b{display:block;font-size:14.5px}
.tidslinje small{color:var(--ink2);font-size:13px}

/* Laget under det egna kortet: en rad ansikten, som laget i ett spel. */
.lagrad{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4)}
.lagm{display:flex;flex-direction:column;align-items:center;gap:5px;
  width:64px;text-align:center}
.lagm .avatar{width:52px;height:52px;transition:transform var(--dur) var(--ease)}
.lagm .avatar.tom{font-size:16px}
.lagm:hover .avatar{transform:scale(1.07)}
.lagm span:last-child{font-size:12px;color:var(--ink2);max-width:64px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lagm.fler .avatar{background:var(--bg2);color:var(--ink2);
  border:1px dashed var(--line)}
/* Hela laget: ett kort per person, i bokstavsordning. */
.laget{display:grid;gap:10px;margin:var(--s2) 0 var(--s5)}
@media(min-width:640px){.laget{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.laget{grid-template-columns:1fr 1fr 1fr}}
.lagkort{display:flex;gap:var(--s3);align-items:center;padding:12px 14px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.lagkort:hover{border-color:var(--brand);transform:translateY(-1px)}
.lagkort .avatar{width:48px;height:48px}
.lagkort .avatar.tom{font-size:15px}
.lagkort .tx{min-width:0}
.lagkort b{display:block;font-size:15px}
.lagkort small{display:block;color:var(--ink2);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lagkort.du{border-style:dashed}

/* ---------- redigera profil: bilden ---------- */
/* Bilden syns i samma stund som den valts. Knappen är en etikett för det
   dolda filfältet — ett filfält ritas olika i varje webbläsare och säger
   "No file chosen" på engelska mitt i en svensk sida. */
.fotokort{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.fotobild .avatar{width:112px;height:112px}
.fotobild .avatar.tom{font-size:30px;background:var(--bg);color:var(--ink2);
  border:2px dashed var(--line)}
.fotoval{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fotoform{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fotoform label.btn{cursor:pointer}
.dold{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fotoform.js .utanjs{display:none}
.fotoform:focus-within label.btn{outline:2px solid var(--brand);outline-offset:2px}
.hint.fel{color:var(--crit)}

/* ---------- inställningar ---------- */
.installrad{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap}
.installrad b{font-size:15px}
/* Vippan: på är mörkt, av är ljust. */
.vippa{position:relative;width:54px;height:30px;border-radius:var(--r-pill);
  border:0;padding:0;cursor:pointer;background:var(--line);flex:none;
  transition:background var(--dur2) var(--ease)}
.vippa i{position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform var(--dur2) var(--ease)}
.vippa[aria-checked="true"]{background:var(--brand)}
.vippa[aria-checked="true"] i{transform:translateX(24px)}
.vippa:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* Språket: två flaggor. Den valda har ramen. */
.flaggor{display:flex;gap:var(--s3);flex-wrap:wrap;margin:0}
.flaggval{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  color:var(--ink);font:inherit;font-size:15px;cursor:pointer;
  transition:border-color var(--dur) var(--ease)}
.flaggval:hover{border-color:var(--ink2)}
.flaggval.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.flagga{width:30px;height:20px;border-radius:3px;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.flaggval span{font-weight:600}

/* Avataren uppe till höger med bild. */
.me img{width:100%;height:100%;min-width:0;min-height:0;border-radius:50%;
  object-fit:cover;display:block}

/* ---------- registret som kalkylark ---------- */
/* Rubriken sorterar, rutan under filtrerar — autofiltret i Excel. Allt är
   ett vanligt GET-formulär: urvalet ligger i adressen, går att spara som
   bokmärke och fungerar utan JavaScript. */
.arkrad{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin:0 0 var(--s2)}
.arkrad .fsok{flex:1 1 220px;min-width:170px;position:relative;
  display:flex;align-items:center}
.arkrad .fsok svg{position:absolute;left:12px;color:var(--ink2);
  pointer-events:none}
.arkrad .fsok input{width:100%;padding:9px 12px 9px 37px;font-size:14px;
  border-radius:var(--r-pill)}
.arkrad .btn{padding:9px 16px;font-size:12.5px}
.arkrad .antal{margin-left:auto;color:var(--ink2);font-size:12.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.arkrad .antal b{color:var(--ink)}

.arkruta{overflow:auto;max-height:74vh;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2);box-shadow:var(--e1)}
.ark table{border-collapse:separate;border-spacing:0;width:100%;
  font-size:13px;min-width:880px}
/* Rutnät på varje cell — det är det som gör det till ett ark. */
.ark td,.ark th{border-right:1px solid var(--line2);
  border-bottom:1px solid var(--line2);padding:6px 11px;
  vertical-align:middle;white-space:nowrap;text-align:left}
.ark td:last-child,.ark th:last-child{border-right:0}
.ark tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--line2) 45%,transparent)}
.ark tbody tr:hover td{background:var(--brand-soft)}
/* Rubrik- och filterraden fryses, så att man ser vad kolumnerna heter även
   längst ner i en lång lista. */
.ark thead th{position:sticky;background:var(--bg);z-index:2}
.ark thead tr.rubrik th{top:0;border-bottom:1px solid var(--line);padding:0}
.ark thead tr.filter th{top:33px;border-bottom:2px solid var(--brand);
  padding:5px 6px}
.ark .sortera{display:flex;align-items:center;gap:5px;padding:9px 11px;
  font-family:var(--display);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--ink)}
.ark .sortera:hover{background:var(--brand-soft);color:var(--brand2)}
.ark .sortera i{font-style:normal;color:var(--brand2);font-size:10px}
.ark th.sorterad .sortera{color:var(--brand2)}
.ark thead select{width:100%;min-width:98px;padding:5px 26px 5px 8px;
  font-size:12px;border-radius:6px;
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%}
.ark thead tr.filter th:last-child{text-align:right}
.ark thead .btn{padding:6px 13px;font-size:11px}
/* Radnumret är arkets vänsterkant: smalt, grått, aldrig i vägen. */
.ark .nr{width:1%;text-align:right;color:var(--ink2);font-size:11.5px;
  font-variant-numeric:tabular-nums;background:var(--bg);
  border-right:1px solid var(--line)}
.ark tbody tr:hover .nr{color:var(--brand2)}
.ark td.act a{font-family:var(--display);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--brand2)}
.ark td.tom{color:var(--ink2);text-align:center;padding:var(--s6) var(--s4);
  white-space:normal}
.ark .tag{font-size:10.5px;padding:3px 7px}

/* ---------- botten ---------- */
/* Chatten är **en** ram: konversationerna till vänster, samtalet till
   höger och skrivfältet längst ner i samma ruta. Två lådor — en att läsa
   i och en att skriva i — var en låda för mycket, och tomrummet mellan
   dem sa ingenting. På en telefon visas en halva i taget. */
.hchatt{display:grid;place-items:center;width:34px;height:34px;
  border-radius:var(--r-pill);color:var(--chrome-ink2);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.hchatt:hover{color:var(--brand2);background:var(--brand-soft)}
.chattapp{display:flex;min-width:0;background:var(--bg2);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--e1);
  height:clamp(420px,calc(100dvh - 270px),820px)}

/* listan */
.klista{width:296px;flex:none;display:flex;flex-direction:column;min-width:0;
  border-right:1px solid var(--line);background:var(--bg)}
.ktopp{display:flex;align-items:center;gap:var(--s2);padding:10px 12px;
  border-bottom:1px solid var(--line)}
.ktopp b{flex:1;font-family:var(--display);font-size:15px;letter-spacing:.07em;
  text-transform:uppercase}
.btn.liten{padding:7px 12px;font-size:12.5px;gap:6px}
.krader{flex:1;overflow-y:auto;overflow-x:hidden}
.krad{display:flex;gap:10px;align-items:center;padding:10px 12px;min-width:0;
  border-bottom:1px solid var(--line2);
  transition:background var(--dur) var(--ease)}
.krad:hover{background:var(--bg2)}
.krad.pa{background:var(--bg2);box-shadow:inset 3px 0 0 var(--brand)}
.kav{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover}
.kav.tom{display:grid;place-items:center;background:var(--brand);
  color:var(--on-brand);font-family:var(--display);font-size:13px;
  font-weight:700}
.kav.tom.grupp{background:var(--line);color:var(--ink2)}
.ktx{flex:1;min-width:0}
.ktx b{display:block;font-size:14.5px;line-height:1.35;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ktx small{display:block;color:var(--ink2);font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kmeta{flex:none;display:flex;flex-direction:column;align-items:flex-end;
  gap:4px}
.kmeta time{font-size:11px;color:var(--ink2);white-space:nowrap}
/* En konversation med något oläst står ljusare, och bär sin siffra. */
.krad.ny .ktx small{color:var(--ink)}
.kny{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--brand);color:var(--on-brand);display:grid;
  place-items:center;font:700 11.5px/1 var(--display)}
.ktomlista{padding:var(--s5) var(--s4);color:var(--ink2);font-size:14px}

/* samtalet */
.krum{flex:1;display:flex;flex-direction:column;min-width:0}
.krtopp{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--bg2)}
.krtopp .kav{width:34px;height:34px}
.krnamn{min-width:0;flex:1}
.krnamn h1{margin:0;font-size:17px;font-family:var(--display);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.krnamn small{display:block;color:var(--ink2);font-size:12px}
.ktillbaka{display:none;place-items:center;width:34px;height:34px;flex:none;
  border-radius:var(--r-pill);color:var(--ink2)}
.krom{border-bottom:1px solid var(--line);background:var(--bg)}
.krom summary{padding:8px 14px;font-size:13px;color:var(--ink2);
  cursor:pointer}
.kromrad{padding:0 14px var(--s3)}
.krflode{flex:1;overflow-y:auto;padding:var(--s4);display:flex;
  flex-direction:column;gap:6px;background:var(--bg)}
.ktomprat{margin:auto;color:var(--ink2);font-size:14px;text-align:center}
.krskriv{display:flex;align-items:flex-end;gap:8px;padding:10px;
  border-top:1px solid var(--line);background:var(--bg2)}
.krskriv label{position:absolute;left:-9999px}
.krskriv textarea{flex:1;min-height:44px;max-height:160px;resize:none;
  padding:11px 14px;border-radius:var(--r-lg)}
.krskicka{flex:none;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--brand);color:var(--on-brand);display:grid;
  place-items:center;cursor:pointer;
  transition:filter var(--dur) var(--ease)}
.krskicka:hover{filter:brightness(1.07)}
.krum.ingen{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:var(--s2);padding:var(--s5);background:var(--bg)}
.krum.ingen h1{margin:0;font-size:var(--t-h2)}
.krum.ingen p{max-width:46ch;color:var(--ink2)}
.krinne{overflow-y:auto;padding:var(--s4) var(--s5) var(--s5)}

/* Bubblorna: mina till höger, andras till vänster. Namnet står bara när
   avsändaren byts — fyra rader med samma namn är brus, inte upplysning. */
.bubbla{align-self:flex-start;max-width:min(76%,40rem);
  background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-lg);border-bottom-left-radius:5px;padding:6px 11px 5px;
  display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:end}
.bubbla.min{align-self:flex-end;background:var(--brand-soft);
  border-color:transparent;border-bottom-left-radius:var(--r-lg);
  border-bottom-right-radius:5px}
.bubbla.ihop{margin-top:-3px}
.bubbla b{grid-column:1/-1;font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink2);font-family:var(--display)}
.bubbla p{grid-column:1;margin:1px 0 0;white-space:pre-wrap;
  overflow-wrap:anywhere}
/* Klockslaget står bredvid sista raden, inte under den — ett "Ja" ska
   inte bli tre rader högt. */
.bubbla time{grid-column:2;font-size:10.5px;color:var(--ink2);
  white-space:nowrap;padding-bottom:1px}

@media(max-width:760px){
  .chattapp{height:calc(100dvh - 230px)}
  .klista{width:100%}
  /* En halva i taget: listan är /chatt, samtalet är /chatt/<id>. */
  .chattapp.harum .klista{display:none}
  .chattapp:not(.harum) .krum{display:none}
  .ktillbaka{display:grid}
}

.empty{color:var(--ink2);padding:var(--s6) var(--s4);text-align:center;
  border:1px dashed var(--line);border-radius:var(--r);font-size:14.5px}
mark{background:color-mix(in srgb,var(--brand) 34%,transparent);color:inherit;
  border-radius:2px;padding:0 2px}
footer{color:var(--ink2);font-size:12.5px;padding:var(--s6) 0 6px;line-height:1.75;
  border-top:1px solid var(--line);margin-top:44px}
/* Sidfoten med länken till klatterapan.se ligger på varje sida. */
footer.site{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding:var(--s5) 0 var(--s2);margin-top:52px}
footer.site a{font-family:var(--display);text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;font-size:12px;color:var(--brand2)}
footer.site a:hover{text-decoration:underline}
footer.site span{font-size:12px}

/* Den som har bett systemet om lugnare rorelser ska fa det. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  header,.hnav,.chattknapp,.searchbar,.back,.btnrow,.kvittera,.crumb{display:none!important}
  body{background:#fff;color:#000}
  main{padding:0}
  .page-h{color:#000}
  .card,.rows,.tw,.matrix{box-shadow:none}
}

/* ---------- skyddsrond ----------
   Sidan används med telefonen i handen ute på en bas, inte vid ett
   skrivbord. Därför är varje punkt en egen liten form som sparar direkt:
   ingen stor spara-knapp längst ner som måste hittas igen efter
   trettiofem rader, och inget som går förlorat om nätet tappar mitt i.

   Klasserna heter rond* för att säga var de hör hemma. `.bedom` är
   rondens bedömningsknappar och inget annat — jämför `.pbricka`, som en
   gång betydde två saker och klämde ihop texten på ett hopfällt träd. */
.rondrubrik{font-size:16px;margin:var(--s6) 0 var(--s3);
  padding-bottom:var(--s2);border-bottom:2px solid var(--line)}

.rondpunkt{background:var(--bg2);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);
  transition:border-color var(--dur) var(--ease)}
.rondpunkt.ok{border-left-color:var(--ok)}
.rondpunkt.brist{border-left-color:var(--crit);background:var(--crit-soft)}

.rondtopp{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  justify-content:space-between}
.rondtext{flex:1;min-width:180px;font-weight:600;line-height:1.4}

/* Knapparna är stora för att träffas med en tumme i handske. */
.bedomrad{display:flex;gap:var(--s1);flex:none}
.bedom{min-height:40px;padding:0 var(--s3);border:1px solid var(--line);
  background:var(--bg2);color:var(--ink2);border-radius:var(--r-sm);
  font-size:13px;font-weight:700;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.bedom:hover{border-color:var(--ink2);color:var(--ink)}
.bedom.vald.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.bedom.vald.brist{background:var(--crit);border-color:var(--crit);
  color:var(--on-crit)}
.bedom.vald.ej{background:var(--ink2);border-color:var(--ink2);color:var(--bg2)}
.bedom[disabled]{opacity:.45;cursor:default}

.rondfot{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  margin-top:var(--s2)}
.field.smal{max-width:260px;margin-top:var(--s3)}

/* Rondsorten väljs som kort, inte som en rullgardin: de fem skiljer sig
   åt i vad de täcker, och det ska gå att läsa innan man väljer. */
.valrutor{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
@media(min-width:700px){.valrutor{grid-template-columns:1fr 1fr}}
.valruta{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.valruta input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--brand)}
.valruta b{display:block}
.valruta small{display:block;color:var(--ink2);line-height:1.4}
.valruta:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}

.kryssrad{margin-bottom:var(--s4)}
.checkline.kr{cursor:pointer}
.checkline.kr span{flex:1;min-width:0;padding-top:3px}

/* Formulär som ska stå inuti en tabellcell — ta bort-knappen i
   utrustningslistan. Utan den bryter formuläret raden. */
.informs{display:inline}