/* stil.css - Webbplatsens gemensamma stil (2026-10-16), i appens tema
   Laboratoriejournal (ägarens val efter mocken
   https://claude.ai/artifact/GwNThRvZtVpyg9ofhP7Fjv).

   Färgerna är avskrivna ur flutter_app/lib/core/tema.dart
   (_laboratoriejournalLjust/_laboratoriejournalMorkt) och formen ur
   _formLaboratoriejournal: hörnradie 4, kortrubriker i versaler med
   spärrning 0.6 i IBM Plex Mono, tunna staplar. Ändras temat i appen
   ska värdena här ändras för hand - de kontrolleras inte av appens
   tema_kontroll_test.dart.

   Regler från appen som gäller här också:
   - Näringsfärgerna (protein/fett/kolhydrat) används BARA för näring,
     aldrig som dekor. Accenten är den enda dekorfärgen.
   - Text som bär information har opak färg (sek/muted), aldrig alfa -
     muted ger minst 5:1 mot bakgrunden i båda lägena.
   - Webbplatsen följer besökarens system (ljust/mörkt), som appens förval
     "Följ systemet".

   Typsnitt: systemets (Segoe UI på Windows, Roboto på Android - samma som
   appen) för text, IBM Plex Mono för siffror och kortrubriker. Plex Mono
   är IBM:s egna, oförändrade Latin1-filer (licensen har Reserved Font
   Name "Plex" - konvertera eller delmängda dem aldrig själv), licensen i
   fonts/IBMPlexMono-LICENSE.txt. */

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/IBMPlexMono-SemiBold-Latin1.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }

:root {
  --bg: #FBFBFB;        /* bakgrund */
  --bg2: #F4F6F5;       /* varannan sektion (panel2) */
  --panel: #FFFFFF;
  --panel2: #F4F6F5;
  --border: #DFE3E0;
  --text: #16201B;
  --sek: #37423C;
  --muted: #5F6B65;
  --accent: #0067C0;
  --pa-accent: #FFFFFF;
  --lank: #0067C0;
  --fokus: #004D90;
  /* Näring: ytor (diagram) och legendprickar - bara för näring. */
  --protein-yta: #7D86B8; --fett-yta: #C37B49; --kolh-yta: #5C9974;
  --protein: #616BA8; --fett: #B9652B; --kolh: #3D8A5C;
  --nav-bg: rgba(251,251,251,0.9);
  --r: 4px;
  --sp: 0.6px;
  --sys: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1F1E; --bg2: #202423; --panel: #232826; --panel2: #2A302D; --border: #353B38;
    --text: #E4E8E5; --sek: #C3CAC6; --muted: #9BA59F;
    --accent: #60CDFF; --pa-accent: #000000; --lank: #60CDFF; --fokus: #90DCFF;
    --protein-yta: #748FBA; --fett-yta: #BE8156; --kolh-yta: #61A57B;
    --protein: #7DA0D7; --fett: #E09460; --kolh: #6FC08E;
    --nav-bg: rgba(28,31,30,0.9);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sys); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--lank); }
p a:not(.knapp), li a:not(.knapp) { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.inre { max-width: 1040px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.smal { max-width: 760px; }
.siffror, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Kortrubrik - som appens Kortrubrik (arbetsbord.dart): versaler, spärrning,
   siffertypsnittet, dämpad färg. */
.krub { font: 500 12px/1.4 var(--mono); letter-spacing: var(--sp); text-transform: uppercase; color: var(--muted); }

/* ---------- Meny ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nav .inre { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.lockup { color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.lockup span { color: var(--accent); }
.navlankar { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 14.5px; }
.navlankar a:not(.knapp) { color: var(--sek); text-decoration: none; }
.navlankar a:not(.knapp):hover { color: var(--text); }
.navlankar a[aria-current="page"]:not(.knapp) { color: var(--text); font-weight: 600; }
/* Mobilmeny - <details>, fungerar utan skript (granskningen 2026-10-16:
   på smal skärm fanns ingen meny alls). */
.mobilmeny { display: none; margin-left: auto; position: relative; }
.mobilmeny summary { list-style: none; cursor: pointer; }
.mobilmeny summary::-webkit-details-marker { display: none; }
.mobilmeny .lista { position: absolute; right: 0; top: calc(100% + 8px); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 8px; display: grid; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.mobilmeny .lista a { color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: var(--r); }
.mobilmeny .lista a:hover { background: var(--panel2); }
@media (max-width: 760px) { .navlankar { display: none; } .mobilmeny { display: block; } }

/* ---------- Knappar ---------- */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14.5px/1 var(--sys); padding: 11px 18px; border-radius: var(--r); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.knapp.fylld { background: var(--accent); color: var(--pa-accent); }
.knapp.fylld:hover { filter: brightness(1.08); }
.knapp.sek { background: transparent; color: var(--text); border-color: var(--border); }
.knapp.sek:hover { background: var(--panel2); }
.knapp.liten { padding: 8px 14px; font-size: 13.5px; }

/* ---------- Kort, nyckeltal, staplar ---------- */
.kort { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; min-width: 0; }
.kort .topp { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nyckeltal { display: flex; flex-wrap: wrap; gap: 8px; }
.nt { background: var(--panel2); border-radius: var(--r); padding: 7px 10px; display: grid; gap: 1px; }
.nt span { font-size: 11.5px; color: var(--muted); }
.nt b { font: 600 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.stapel { display: flex; gap: 2px; height: 6px; border-radius: 1px; overflow: hidden; background: var(--panel2); }
.stapel i { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 12.5px/1.4 var(--mono); color: var(--sek); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.matstapel { position: relative; height: 6px; border-radius: 1px; background: var(--panel2); }
.matstapel .f { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: inherit; }
.matstapel .m { position: absolute; top: -6px; width: 3px; height: 18px; background: var(--text); border-radius: 1px; }
.exempel { font: 500 10.5px/1 var(--mono); letter-spacing: var(--sp); text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r); padding: 4px 7px; }
.punkter { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.punkter li { display: flex; gap: 10px; color: var(--sek); }
.punkter li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); margin-top: 0.62em; }
.punkter b { color: var(--text); font-weight: 600; }
.notis { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; color: var(--sek); }
code.summa { display: block; font: 12.5px/1.5 var(--mono); color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; overflow-wrap: anywhere; margin: 8px 0 10px; }
code.kommando { font: 13px var(--mono); background: var(--panel2); border-radius: var(--r); padding: 1px 6px; }

/* ---------- Sidfot ---------- */
.sidfot { border-top: 1px solid var(--border); padding-block: 40px 56px; }
.sidfot .inre { display: grid; gap: 14px; }
.sidfot p { margin: 0; color: var(--muted); font-size: 14px; }
.sidfot .lankar { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.sidfot .lankar a { color: var(--sek); text-decoration: none; }
.sidfot .lankar a:hover { color: var(--text); text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) { .knapp { transition: background-color .15s, filter .15s; } }