/* Gemensam stilmall för Produktionshälsa (2026-10-04, Tavlan).
   Färgerna och de regler som ska se likadana ut i alla sidor bor här, så
   att kontrast, storlekar och sidhuvud inte glider isär mellan filerna.
   Sidornas egna stilar ligger kvar i varje fil och använder variablerna.

   Designfilosofin, Tavlan (Andreas 2026-10-04 efter Linneas granskning):
   1 Läget först, förklaringen sen.
   2 Samma sak på samma plats.
   3 Läsbart på en armlängds avstånd: minst 14 px, kontrast enligt WCAG AA.
   4 Ord bredvid varje färg och symbol.
   5 Inget utan ägare och datum.
   6 Vik ihop förklaringen, aldrig läget.

   Kontrast: den dämpade texten var #898781 (3,5:1 mot ytan) och är nu
   #6b6963 (5,3:1). Grönt är #0a8a0a i ljust läge så att vit text på grönt
   når 4,5:1. */
:root{color-scheme:light;
  --yta:#fcfcfb;--plan:#f9f9f7;--ink:#0b0b0b;--ink-2:#52514e;--ink-svag:#6b6963;--linje:#e1e0d9;--ring:rgba(11,11,11,.10);
  --gron:#0a8a0a;--rod:#d03b3b;--gul:#fab219;--orange:#e8891c;--bla:#1f4e8c;
  --gul-mjuk:#fdf3df;--rod-mjuk:#f8e6e6;--gron-mjuk:#e6f5e6;--bla-mjuk:#e8eef7;--gra:#ecebe6;--gra-kant:#d6d4cc;
  --aktiv:#e6f5e6;--aktiv-kant:#0a8f0a;--aktiv-stark:#c9eac9}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){color-scheme:dark;
  --yta:#1a1a19;--plan:#0d0d0d;--ink:#fff;--ink-2:#c3c2b7;--ink-svag:#9a9890;--linje:#2c2c2a;--ring:rgba(255,255,255,.10);
  --gron:#0ca30c;--bla:#8fb3e6;--gul-mjuk:#2e2617;--rod-mjuk:#2e1717;--gron-mjuk:#132913;--bla-mjuk:#15202e;--gra:#222221;--gra-kant:#3a3937;
  --aktiv:#132913;--aktiv-kant:#0ca30c;--aktiv-stark:#1f4a1f}}
:root[data-theme="dark"]{color-scheme:dark;
  --yta:#1a1a19;--plan:#0d0d0d;--ink:#fff;--ink-2:#c3c2b7;--ink-svag:#9a9890;--linje:#2c2c2a;--ring:rgba(255,255,255,.10);
  --gron:#0ca30c;--bla:#8fb3e6;--gul-mjuk:#2e2617;--rod-mjuk:#2e1717;--gron-mjuk:#132913;--bla-mjuk:#15202e;--gra:#222221;--gra-kant:#3a3937;
  --aktiv:#132913;--aktiv-kant:#0ca30c;--aktiv-stark:#1f4a1f}

/* Samma sidhuvud i alla verktyg: brödsmula och rubrik till vänster, Skriv
   ut och övriga knappar alltid uppe till höger, även när ingressen är lång. */
.topp:has(> div > .nav){flex-wrap:nowrap}
.topp:has(> div > .nav) > div:first-child{flex:1 1 auto;min-width:0}
.topp:has(> div > .nav) > .knapprad{flex:none;margin-top:0}
@media (max-width:760px){.topp:has(> div > .nav){flex-wrap:wrap}}

/* Introduktionen nås alltid via Om verktyget; första gången visas den av
   sig själv (tavla.js). */
.tillbaka{display:none !important}
.omlank{display:inline-block !important}
@media print{.omlank{display:none !important}}

/* Datum bryts aldrig över två rader (tavla.js märker cellerna). */
.datum{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Demoraden: en rad, samma på alla sidor, bara i demon. */
.demorad{background:var(--gul-mjuk);border-bottom:1px solid var(--gul);color:var(--ink);font:500 .875rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;padding:.45rem 1rem;text-align:center}
.har-demorad #demovarning,.har-demorad .demo-dubblett{display:none !important}
@media print{.demorad{display:none !important}}

/* Sökknappen (Linnea 2026-10-04): ser ut som ett fält, med ikon, ord och
   kortkommando. Kanten --ink-svag ger 5,3:1 mot ytan. */
.sokknapp{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;min-width:12rem;padding:0 .5rem 0 .75rem;border:1px solid var(--ink-svag);border-radius:.4rem;background:var(--yta);color:var(--ink-2);font:inherit;font-size:.875rem;cursor:pointer;text-align:left;flex:none}
.sokknapp span{flex:1}
.sokknapp svg{width:16px;height:16px;flex:none}
.sokknapp kbd{font:inherit;font-size:.875rem;padding:.05rem .35rem;border:1px solid var(--gra-kant);border-radius:.25rem;color:var(--ink-svag)}
.sokknapp:hover{color:var(--ink);border-color:var(--ink)}
.sokknapp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:760px),(pointer:coarse){.sokknapp{min-width:0}.sokknapp kbd{display:none}}
@media print{.sokknapp{display:none !important}}