/* 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)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img,.loginlogo{filter:invert(1);mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){.brand img,.loginlogo{filter:none;mix-blend-mode:screen}}
:root[data-theme="dark"] .brand img,:root[data-theme="dark"] .loginlogo{
  filter:none;mix-blend-mode:screen}
:root[data-theme="light"] .brand img,:root[data-theme="light"] .loginlogo{
  filter:invert(1);mix-blend-mode:multiply}
.brand img{height:38px;width:auto;display:block;flex:none}
/* KOSS och KLÄTTERAPAN sätts i samma ordmärkessnitt som skylten och
   trycket — apan, KOSS, strecket, och företagsnamnet. */
.brand b{
  font-family:var(--wordmark);font-size:23px;font-weight:700;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;display:block;
}
.brand .line{display:flex;align-items:center;gap:12px;min-width:0}
.brand .sep{width:1px;height:19px;background:var(--chrome-line);flex:none}
.brand .wm{
  font-family:var(--wordmark);font-size:17px;font-weight:700;font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;color:var(--chrome-ink);
  white-space:nowrap;line-height:1;
}
.brand .sub{
  font-size:10.5px;color:var(--chrome-ink2);display:block;line-height:1.3;
  margin-top:4px;letter-spacing:.05em;text-transform:none;font-weight:400;
}
@media(max-width:520px){
  .brand .sep,.brand .wm{display:none}
  .brand .sub{font-size:9.5px;letter-spacing:.04em}
}
.hbtn{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.hbtn button{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  color:var(--chrome-ink2);transition:background var(--dur) var(--ease),
  color var(--dur) var(--ease);
}
.hbtn button:hover{background:var(--chrome2);color:var(--chrome-ink)}
.me{
  width:36px;height:36px;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;letter-spacing:.06em;
  transition:transform var(--dur) var(--ease);
}
.me:hover{transform:scale(1.06)}
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. */
main{padding:var(--s6) 0 100px}
@media(min-width:900px){main{padding:var(--s7) 0 116px}}
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{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}
.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}
}

/* ---------- 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}

/* ---------- 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}
}

/* ---------- 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. */
input[type=text],input[type=email],input[type=tel],input[type=date],
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}
.btn.danger{background:transparent;border:1px solid var(--crit);color:var(--crit)}
.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}}

/* ---------- 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 30px}
.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)}
.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.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}
.fotoform{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.fotoform .fyll{width:76px;height:76px;border-radius:50%;flex:none;
  border:2px dashed var(--line);display:grid;place-items:center;
  color:var(--ink2)}

/* ---------- 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 ---------- */
.tabbar.n5{grid-template-columns:repeat(5,1fr)}
.tabbar.n6{grid-template-columns:repeat(6,1fr)}
@media(max-width:420px){.tabbar.n6 a{font-size:9.5px;letter-spacing:.04em;padding:9px 1px 10px}}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;
  grid-template-columns:repeat(4,1fr);background:var(--chrome);
  border-top:1px solid var(--chrome-line);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 20px -14px rgba(0,0,0,.4);
}
@supports (backdrop-filter:blur(1px)){
  .tabbar{background:var(--sheet);backdrop-filter:saturate(1.6) blur(14px)}
}
.tabbar a{padding:9px 3px 10px;text-align:center;color:var(--chrome-ink2);
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;
  gap:3px;transition:color var(--dur) var(--ease)}
.tabbar a i{display:grid;place-items:center;font-size:17px;font-style:normal}
/* Ren orange text ar for ljus mot vitt krom - fargen tas ned ett steg och
   den skarpa orangen far markera fliken som en linje i stallet. */
.tabbar a.on{color:var(--brand2);position:relative}
.tabbar a.on::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--brand)}
/* Pa en dator ar en bred bottenlist mobilarv. Da samlas den i stallet till en
   flytande rad mitt pa skarmen. */
@media(min-width:900px){
  .tabbar{left:50%;right:auto;transform:translateX(-50%);bottom:22px;
    grid-auto-flow:column;grid-template-columns:none;border:1px solid var(--chrome-line);
    border-radius:var(--r-pill);padding:5px;box-shadow:var(--e3)}
  .tabbar a{flex-direction:row;gap:8px;padding:9px 18px;border-radius:var(--r-pill)}
  .tabbar a i{font-size:15px}
  .tabbar a.on{background:var(--brand-soft)}
  .tabbar a.on::before{display:none}
  .tabbar a:hover{color:var(--chrome-ink)}
  .tabbar a.on:hover{color:var(--brand2)}
}
.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,.tabbar,.hbtn,.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}
}