/* Fargetokens (lys) og mørk modus. Alle farger i appen går via disse. Kontrast minst 4,5:1 for tekst i begge moduser. */
:root {
  color-scheme: light dark;
  --bg: #f2f2f7; --card: #fff; --fg: #000; --muted: #6c6c70; --sep: #c6c6c8; --seg-bg: #e3e3e8;
  --accent: #2f7d4f; --accent-text: #266a42; --on-accent: #fff; --header-bg: #2f7d4f; --green: var(--accent);
  --danger: #d70015; --danger-bg: #fbe9e7; --danger-fg: #8a2a1c;
  --warn: #a35a00; --warn-bg: #fff4d6; --warn-line: #b7791f; --warn-fg: #5f3b00;
  --info-bg: #e8f0fb; --info-line: #2b5a9e; --info-fg: #183863;
  --tabbar-h: 51px; --focus: #1a5fb4; --skygge: rgba(0, 0, 0, .18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000; --card: #1c1c1e; --fg: #fff; --muted: #98989f; --sep: #38383a; --seg-bg: #2c2c2e;
    --accent: #4cc27a; --accent-text: #4cc27a; --on-accent: #000; --header-bg: #1c3b2a;
    --danger: #ff6961; --danger-bg: #3a1512; --danger-fg: #ffb4ab;
    --warn: #ffb340; --warn-bg: #3a2c0b; --warn-line: #8a6a1d; --warn-fg: #ffd89a;
    --info-bg: #102640; --info-line: #4a7bc0; --info-fg: #b7d3ff;
    --focus: #64a8ff; --skygge: rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
html { scroll-padding-bottom: 80px; }  /* fokus/rulling skal ikke havne bak bunnmenyen */
body { margin: 0; font: 16px/1.5 -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--fg);
       padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
/* iOS-navigasjonslinje: tilbakeknapp til venstre, tittel midt, sticky øverst. */
.navbar { position: sticky; top: 0; z-index: 15; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px;
          padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
          background: var(--card); color: var(--fg); border-bottom: 1px solid var(--sep); }
.navtittel { font-size: 1.0625rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.navtilbake { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 6px 0 4px;
              color: var(--accent-text); text-decoration: none; font-size: 1.0625rem; }
h1 { margin: 0; font-size: 1.25rem; }
main { padding: 16px; max-width: 640px; margin: 0 auto; }
a { color: var(--accent-text); }
/* iOS tab bar: ikon over etikett, fem faner får plass ved 375 px, safe-area nederst. */
nav.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; display: flex; background: var(--card); border-top: 1px solid var(--sep);
             padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
nav.tabbar a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
               min-height: 50px; padding: 5px 0 4px; color: var(--muted); text-decoration: none; font-size: .6875rem; line-height: 1.15; }
nav.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.tabbar svg { flex: 0 0 auto; }
.vare { display: flex; justify-content: space-between; align-items: center; gap: 8px;
        border: 1px solid var(--sep); background: var(--card); border-radius: 8px; padding: 10px; margin: 6px 0; }
.vare small { display: block; color: var(--muted); }
.vare form { display: inline; }
.ny { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ny input[name=qty] { width: 6rem; }
main select, main input, main button { font-size: 1rem; padding: 8px; max-width: 100%; }
/* Knapper (iOS-stil): standard er «tinted» (dempet bakgrunn, aksentfarge), .primar er fylt, .fare er rød. a.knapp gir en lenke samme utseende. */
main button, a.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; background: var(--seg-bg);
                       color: var(--accent-text); font: inherit; font-weight: 600; padding: 0 16px; min-height: 44px; cursor: pointer; text-decoration: none; }
main button.primar, a.knapp.primar { background: var(--accent); color: var(--on-accent); }
main button.fare, a.knapp.fare { color: var(--danger); }
main button:active, a.knapp:active { opacity: .6; }
.knapp-rad { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; align-items: center; }
.knapp-rad form { margin: 0; display: inline-flex; }
/* Trykkflater minst 44x44 px på mobil (WCAG 2.5.5 / Apple HIG). Avkrysningsbokser får større boks; teksten i <label> er også trykkflate. */
main select, main input:not([type=checkbox]):not([type=radio]):not([type=hidden]), main button { min-height: 44px; }
main button { min-width: 44px; }
main input[type=checkbox], main input[type=radio] { width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: middle; }
main label:has(> input[type=checkbox]), main label:has(> input[type=radio]) { display: inline-flex; align-items: center; min-height: 44px; margin-right: 8px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--card); color: var(--accent-text); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 0; }
nav.tabbar a[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
nav.tabbar a[aria-current="page"] svg { stroke-width: 2.3; fill: var(--seg-bg); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
label:has(input:focus-visible), dialog:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lagret-kopi { background: var(--warn-bg); border: 2px solid var(--warn-line); color: var(--warn-fg); padding: 10px 12px; border-radius: 6px; }
.synk-status { background: var(--info-bg); border: 2px solid var(--info-line); color: var(--info-fg); padding: 8px 12px; border-radius: 6px; }
.vare.venter-synk { opacity: .6; }
.vare.venter-synk::after { content: "venter på synk"; font-size: .8em; color: var(--info-line); }

/* ---------- Kategorier, oppskriftsliste, sheet (iOS-aktig) ---------- */
.ios-titel { font-size: 1.75rem; line-height: 1.2; font-weight: 600; margin: 4px 0 12px; }
.ios-liten { color: var(--muted); font-size: .875rem; margin: 6px 16px 16px; }
.ios-liten-flush { margin-left: 0; }
.ios-seksjon { font-size: .8125rem; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
               margin: 20px 16px 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ios-seksjon a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.ios-liste { list-style: none; margin: 0 0 8px; padding: 0; background: var(--card); border-radius: 10px; overflow: hidden; }
.ios-liste > li { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; padding: 0 0 0 16px; }
.ios-liste > li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--sep); }
.ios-rad { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 16px 8px 0;
           color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.ios-rad .antall { color: var(--muted); }
a.ios-rad::after { content: "\203A"; color: var(--muted); font-size: 1.4em; line-height: 1; margin-left: 4px; }
a.ios-rad .antall { margin-left: auto; }
.ios-rad small, .ios-oppskrift small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.ios-oppskrift { padding-left: 0; }
.ios-oppskrift .ios-meta { display: flex; flex-wrap: wrap; gap: 0 10px; }
.ios-meta span + span::before { content: "\00b7"; margin-right: 10px; }
.felt-hjelp { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.3; margin: 2px 0 8px; }
.meta-linje { margin: 4px 0 12px; }
.ios-oppskrift .ios-tittel { flex: 1; min-width: 0; display: block; padding: 8px 0 8px 16px; min-height: 44px; color: var(--fg);
                             text-decoration: none; overflow-wrap: anywhere; }
.ios-oppskrift .endre { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px;
                        color: var(--accent-text); text-decoration: none; font-size: .9375rem; }
.foreslatt { display: inline-block; margin-top: 2px; padding: 0 6px; border: 1px solid var(--warn-line); color: var(--warn);
             border-radius: 6px; font-size: .75rem; line-height: 1.4; }
.ios-knapper { list-style: none; }
.ios-skjema { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px 8px 0; flex: 1; margin: 0; }
.ios-skjema label { flex-basis: 100%; font-size: .875rem; color: var(--muted); }
.ios-skjema input[type=text], .ios-skjema select, .ios-skjema textarea { flex: 1; min-width: 0; background: var(--bg); color: var(--fg);
        border: 1px solid var(--sep); border-radius: 8px; font: inherit; font-size: 1rem; padding: 8px 10px; }
.ios-skjema textarea { flex-basis: 100%; min-height: 4.5rem; }
.ios-skjema button, .ios-knapp { border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600;
                                 padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
                                 justify-content: center; min-height: 44px; }
.ios-skjema button.sekundar, .ios-knapp.sekundar, button.sekundar { background: transparent; color: var(--accent-text); font-weight: 400; }
button.fare, .ios-skjema button.fare { background: transparent; color: var(--danger); font-weight: 400; }
.ios-handlinger { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0 8px 4px 16px; width: 100%; }
.ios-handlinger form { margin: 0; display: inline-flex; }
.ios-handlinger button { background: transparent; color: var(--accent-text); border: 0; font: inherit; min-height: 44px; min-width: 44px; padding: 8px 10px; cursor: pointer; }
.ios-handlinger button.fare { color: var(--danger); }
.ios-feil { background: var(--danger-bg); color: var(--danger-fg); padding: 10px 12px; border-radius: 10px; margin: 8px 0 12px; }
.arkivert-valg { text-decoration: line-through; color: var(--muted); }
.visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .uten-js { display: none !important; }

/* Segmentkontroll: fieldset med radioknapper. Ekte inputs ligger skjult i label, så tastatur og skjermleser virker. */
fieldset.segment { display: flex; gap: 2px; margin: 0 0 12px; padding: 2px; border: 0; border-radius: 10px; background: var(--seg-bg); min-width: 0; }
.seg-tittel { font-size: .8125rem; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 16px; }
main fieldset.segment > label, fieldset.segment > label { flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
        min-height: 44px; margin: 0; padding: 4px 6px; border-radius: 8px; position: relative; font-size: .9375rem; line-height: 1.2; overflow-wrap: anywhere; }
fieldset.segment input[type=radio], main fieldset.segment input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
fieldset.segment > label:has(input:checked) { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px var(--skygge); }
fieldset.segment > label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
a.segment-lenke { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px;
                  color: var(--fg); text-decoration: none; font-size: .9375rem; }
a.segment-lenke[aria-current="true"] { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px var(--skygge); }
.segment-rad { display: flex; gap: 2px; margin: 0 0 12px; padding: 2px; border-radius: 10px; background: var(--seg-bg); }

/* Valg som liste med hake (mange valg). */
fieldset.valgliste { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.valgliste .innhold { background: var(--card); border-radius: 10px; overflow: hidden; }
main .valgliste label, .valgliste label { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 0; min-height: 44px;
        padding: 8px 16px; position: relative; overflow-wrap: anywhere; }
.valgliste label + label::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--sep); }
.valgliste input[type=radio], main .valgliste input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.valgliste label:has(input:checked)::after { content: "\2713"; color: var(--accent-text); font-weight: 700; }
.valgliste label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Stjerne (favoritt) */
.favoritt-skjema { margin: 0; display: inline-flex; }
button.favoritt { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
button.favoritt[aria-pressed="true"] { color: var(--warn); }

/* Sheet: <dialog> som glir opp fra bunnen. Uten JS åpnes ikke dialogen; lenken går til en vanlig side. */
dialog.sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 640px; max-height: 88vh; max-height: 88dvh; overflow: auto;
               border: 0; padding: 0; border-radius: 14px 14px 0 0; background: var(--bg); color: var(--fg); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .4); }
dialog.sheet[open] { animation: sheet-inn .22s ease-out; }
@keyframes sheet-inn { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet-innhold { padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-hake { width: 36px; height: 5px; border-radius: 3px; background: var(--sep); margin: 4px auto 8px; }
.sheet-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sheet-topp h2 { margin: 0; font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere; }
.sheet-topp button { border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: 600; min-width: 44px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.sheet-status, .live-status { min-height: 1.5em; color: var(--muted); font-size: .875rem; margin: 0 0 8px; }
.live-status { position: fixed; left: 16px; right: 16px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 20; margin: 0 auto; max-width: 608px; text-align: center;
               background: var(--card); border: 1px solid var(--sep); border-radius: 12px; padding: 10px 12px; box-shadow: 0 2px 10px var(--skygge); color: var(--fg); }
.live-status:empty, .sheet-status:empty { display: none; }
.status-feil { color: var(--danger-fg); background: var(--danger-bg); border-radius: 10px; padding: 8px 12px; }
.status-feil button, .status-feil a { margin-left: 8px; min-height: 44px; min-width: 44px; font: inherit; }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } * { scroll-behavior: auto !important; } }

/* ---------- Profil og oppstartsveiviser (bit 3) ---------- */
[hidden] { display: none !important; }
.advarsel { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-fg); padding: 10px 12px; border-radius: 10px; margin: 8px 0 12px; }
.profil-valg { display: flex; gap: 12px; margin: 8px 0 12px; }
.profil-knapp { flex: 1; min-height: 88px; font-size: 2rem; border-radius: 14px; }
.profil-valg:has(.profil-knapp:only-child) { display: block; }
.profil-valg .profil-knapp:only-child { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.profil-annen { padding: 8px 0; justify-content: center; }
.profil-annen::after { content: none !important; }

/* Veiviser: navigasjonslinje øverst, bunnmenyen er skjult */
body:has(.veiv-bar), body:has(.veiv-bunn) { padding-bottom: 0; }
/* Utskrift-valg har både tab bar og handlingsfelt: feltet løftes over tab bar, og innholdet får plass under */
body:has(> nav.tabbar):has(.veiv-bunn) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.utskrift-valg { display: contents; }  /* smal skjerm: handlingsfeltet er sticky mot hele skjemaet, ikke bare valgpanelet */
.utskrift-valg .veiv-bunn { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 12px; border-top: 1px solid var(--sep); }
body:has(> nav.tabbar):has(.veiv-bunn) .live-status { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 92px); }
body:has(.veiv-bunn) .live-status { bottom: 92px; }
.veiv-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; min-height: 48px; margin: -4px 0 8px; }
.veiv-tilbake, .veiv-senere button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--accent-text);
                                     font: inherit; text-decoration: none; background: transparent; border: 0; padding: 0 4px; cursor: pointer; }
.veiv-tilbake { justify-self: start; }
.veiv-senere { justify-self: end; margin: 0; }
.veiv-midt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.veiv-steg { font-size: .9375rem; font-weight: 600; }
.veiv-fav { font-size: .8125rem; color: var(--muted); }
.veiv-prikker { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.veiv-prikker li { width: 8px; height: 8px; border-radius: 50%; background: var(--sep); }
.veiv-prikker li[aria-current="step"] { background: var(--accent); }
.veiv-bunn { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px; margin: 16px -16px 0;
             padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
.veiv-bunn form { margin: 0; display: contents; }
.veiv-primar { width: 100%; min-height: 50px; font-size: 1.0625rem; }
.veiv-sekundar { width: 100%; min-height: 44px; }
.veiv-liste { margin: 0 0 8px; padding: 0 0 0 1.4em; }
.veiv-liste li { padding: 6px 0; }

/* Veiviser steg 1: rad med navn, antall og bryter */
.veiv-kat > li { flex-wrap: nowrap; padding-left: 16px; gap: 4px; }
.veiv-kat .ios-skjema { padding: 0; min-width: 0; flex-wrap: nowrap; }
.veiv-kat .ios-skjema input[type=text] { background: transparent; border: 0; padding: 0; min-height: 44px; font-size: 1rem; width: 100%; }
.veiv-kat .antall { color: var(--muted); min-width: 1.5em; text-align: right; }
.veiv-kat .bryter-skjema { margin: 0; flex: 0 0 auto; }
.veiv-kat li.kat-av input[type=text] { color: var(--muted); }
.veiv-ny { background: var(--card); border-radius: 10px; margin: 8px 0; overflow: hidden; }
.veiv-ny > summary { display: flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--accent-text); cursor: pointer; list-style: none; }
.veiv-ny > summary::-webkit-details-marker { display: none; }
.veiv-ny .ios-skjema { padding: 0 16px 12px; }
.veiv-ny .ios-skjema label { color: var(--muted); }

/* Bryter (iOS-switch, 51x31). Ekte <input type="checkbox" role="switch">; trykkflaten er hele label (min. 44 px). */
main label.bryter { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 64px; height: 44px; margin: 0; }
main label.bryter-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; width: 100%; min-height: 44px; margin: 0; }
main .bryter input[type=checkbox], main .bryter-rad input[type=checkbox] { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bryter-spor { flex: 0 0 auto; position: relative; width: 51px; height: 31px; border-radius: 16px; background: var(--seg-bg); border: 1px solid var(--sep); transition: background .15s; }
.bryter-spor::after { content: ""; position: absolute; top: 1px; left: 1px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px var(--skygge); transition: transform .15s; }
.bryter input:checked + .bryter-spor, .bryter-rad input:checked + .bryter-spor { background: var(--accent); border-color: var(--accent); }
.bryter input:checked + .bryter-spor::after, .bryter-rad input:checked + .bryter-spor::after { transform: translateX(20px); }
.bryter input:focus-visible + .bryter-spor, .bryter-rad input:focus-visible + .bryter-spor { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Veiviser steg 2: kort per gruppe */
.kort { background: var(--card); border-radius: 10px; padding: 4px 16px 12px; margin: 0 0 12px; }
.kort small { display: block; color: var(--muted); font-size: .8125rem; }
.kort-valg { margin: 0; color: var(--muted); font-size: .9375rem; }
.veiv-egen { padding-top: 0; }

/* Veiviser steg 3: allergi-chips */
fieldset.chips { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin: 12px 16px 6px; font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.chip-rad { display: flex; flex-wrap: wrap; gap: 8px; }
main label.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0; padding: 0 14px 0 10px; background: var(--card);
                  border: 1px solid var(--sep); border-radius: 22px; }
main label.chip:has(input:checked) { border-color: var(--accent); background: var(--seg-bg); font-weight: 600; }
main label.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.veiv-smak { background: var(--card); border-radius: 10px; padding: 8px 16px 12px; margin: 0 0 8px; }
.veiv-smak label { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .bryter-spor, .bryter-spor::after { transition: none; } }
.veiv-rad { margin: 0 0 8px; }
.veiv-hel { margin: 0; flex-basis: 100%; }
/* Steg 5: illustrasjon (inline-SVG, bare tokens) og ferdig-oppsummering */
.veiv-illu { display: block; width: 100%; max-width: 320px; height: auto; margin: 8px auto 16px; color: var(--fg); }
.veiv-illu .illu-kort { fill: var(--card); stroke: var(--sep); stroke-width: 1.5; }
.veiv-illu .illu-linje, .veiv-illu .illu-bar { fill: var(--seg-bg); }
.veiv-illu .illu-del, .veiv-illu .illu-blad { stroke: var(--accent); }
.veiv-illu .illu-ring { stroke: var(--accent); }
.veiv-illu .illu-valgt { fill: var(--seg-bg); stroke: var(--accent); stroke-width: 2; }
.veiv-illu .illu-pluss { fill: var(--accent); }
.veiv-illu .illu-tekst { fill: var(--muted); }
.veiv-illu .illu-app { fill: var(--accent); }
.veiv-illu .illu-blad { stroke: var(--on-accent); }
.veiv-illu .illu-nr { fill: var(--fg); font: 600 14px -apple-system, system-ui, sans-serif; }
.veiv-enheter { display: flex; flex-direction: column; gap: 8px; }
.veiv-enhet h3 { margin: 12px 0 0; font-size: 1.0625rem; text-align: center; }
.veiv-enhet .veiv-liste { max-width: 420px; margin-left: auto; margin-right: auto; }
.veiv-iphone { order: 1; }
.veiv-ipad { order: 2; }
@media (min-width: 768px) { .veiv-ipad { order: 1; } .veiv-iphone { order: 2; } }
.veiv-oppsum > li { justify-content: space-between; gap: 12px; padding: 10px 16px; min-height: 44px; }
.veiv-oppsum span { color: var(--muted); }
.veiv-oppsum strong { text-align: right; font-weight: 600; }
.veiv-note { color: var(--muted); font-size: .875rem; margin: 8px 0 16px; }

/* ---------- Designrunde: filvelger (skjult native input, tydelig knapp, viser filnavn) ---------- */
.filvelger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
main .filvelger input[type=file] { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; pointer-events: none; }
main label.filknapp { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--seg-bg);
                      color: var(--accent-text); font-weight: 600; cursor: pointer; margin: 0; }
.filvelger:has(input:focus-visible) .filknapp { outline: 3px solid var(--focus); outline-offset: 2px; }
.filnavn { flex: 1 1 8rem; min-width: 0; color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
.filvelger + button { width: 100%; }
a.knapp:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.uke-knapper { display: flex; gap: 8px; margin: 8px 0 12px; }
.uke-knapper a.knapp { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: .9375rem; text-align: center; }

/* Utskrift: valgside (/utskrift) */
main label.velg-rad { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 6px 16px 6px 0; cursor: pointer; }
main label.velg-rad > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
main label.velg-rad small { display: block; color: var(--muted); font-size: .8125rem; }
main label.velg-rad input[type=checkbox] { flex: 0 0 auto; margin: 0; }
.ios-seksjon .velg-kat { min-height: 44px; padding: 0 4px; background: transparent; text-transform: none; letter-spacing: 0; font-weight: 600; }
.kort .bryter-rad small { display: block; color: var(--muted); font-size: .8125rem; }
.porsjon-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.porsjon-rad label { flex: 1; min-width: 0; }
.porsjon-rad input { width: 9.5rem; max-width: 50%; text-align: right; }
.valgt-teller { margin: 0; text-align: center; }
main button:disabled { opacity: .45; cursor: default; }

/* ---------- iPad og bred skjerm ----------
   Under 768 px (iPhone, Safari Split View og Slide Over, 320-700 px) er layouten uendret: tab bar nederst.
   Fra 768 px erstattes tab bar av et sidepanel (som iPadOS sidebar); innholdet begrenses og sentreres. */
.ios-liste :focus-visible { outline-offset: -3px; }   /* listene har overflow:hidden, så ringen må ligge innenfor */
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
main label.velg-rad:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (min-width: 768px) {
  :root { --side: 220px; --tabbar-h: 0px; }  /* ingen tab bar nederst fra 768 px */
  body:has(> nav.tabbar) { padding-left: calc(var(--side) + env(safe-area-inset-left)); padding-bottom: env(safe-area-inset-bottom); }
  nav.tabbar { top: 0; right: auto; width: calc(var(--side) + env(safe-area-inset-left)); flex-direction: column; gap: 2px; overflow-y: auto;
               border-top: 0; border-right: 1px solid var(--sep);
               padding: calc(env(safe-area-inset-top) + 20px) 10px calc(env(safe-area-inset-bottom) + 12px) calc(10px + env(safe-area-inset-left)); }
  nav.tabbar::before { content: "Matplanlegger"; padding: 0 12px 14px; font-size: 1.375rem; font-weight: 700; color: var(--fg); }
  nav.tabbar a { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px;
                 border-radius: 10px; font-size: 1.0625rem; }
  nav.tabbar a span { overflow: visible; }
  nav.tabbar svg { width: 24px; height: 24px; }
  nav.tabbar a[aria-current="page"] { background: var(--seg-bg); }
  nav.tabbar a:focus-visible { outline-offset: -3px; }
  main { max-width: 720px; padding: 24px; }
  .ios-titel { font-size: 2rem; }
  .live-status { left: calc(var(--side) + 16px); right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 560px; }
  body:not(:has(nav.tabbar)) .live-status { left: 16px; }
  /* Sheets blir sentrerte dialoger med maks bredde */
  dialog.sheet { inset: 0; margin: auto; width: min(560px, calc(100% - 48px)); max-height: 80vh; max-height: 80dvh; border-radius: 14px;
                 box-shadow: 0 12px 40px var(--skygge); }
  .sheet-hake { display: none; }
  .sheet-innhold { padding: 20px 24px 24px; }
  /* Veiviser: smal, sentrert kolonne uten sidepanel */
  main:has(.veiv-bar), main:has(.veiv-bunn) { max-width: 560px; padding-top: 32px; }
  .veiv-bunn { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  main:has(.utskrift-rutenett) { max-width: 760px; }
}
@media (min-width: 820px) {
  :root { --side: 240px; }
  main { max-width: 760px; padding: 28px 32px; }
  .veiv-bunn { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  main:has(.utskrift-rutenett) { max-width: 800px; }
}
@media (min-width: 1024px) {
  main { max-width: 960px; }
  /* Oppskriftsliste: kategoriene i to kolonner. */
  .seksjoner { columns: 2; column-gap: 28px; }
  .seksjoner > .seksjon { break-inside: avoid; }
  .seksjon > .ios-seksjon:first-child { margin-top: 0; padding-top: 20px; }
  /* Utskrift: oppskriftene til venstre, valgene i et eget panel til høyre (fast ved rulling) */
  main:has(.utskrift-rutenett) { max-width: 1040px; }
  .utskrift-rutenett { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 0 28px; align-items: start; }
  .utskrift-valg { display: block; position: sticky; top: 64px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
  .utskrift-valg > .ios-seksjon:first-child { margin-top: 0; }
  .utskrift-valg .veiv-bunn { position: sticky; bottom: 0; margin: 12px 0 0; padding: 12px 0; border-top: 0; }
}
@media (min-width: 1280px) {
  main { max-width: 1080px; }
  main:has(.utskrift-rutenett) { max-width: 1160px; }
}
/* Hover for mus og styreflate: ingen nye farger, bare tekst- og knappetilstand (kontrasten holdes) */
@media (hover: hover) {
  a.ios-tittel:hover, a.ios-rad:hover, a.segment-lenke:hover, .ios-seksjon a:hover, .navtilbake:hover { text-decoration: underline; }
  nav.tabbar a:hover { color: var(--fg); }
  @media (min-width: 768px) { nav.tabbar a:hover { background: var(--seg-bg); } }
  main button:hover:not(:disabled), a.knapp:hover, main label.filknapp:hover { filter: brightness(.93); }
  main label.velg-rad:hover > span, main label.bryter-rad:hover > span:first-child { text-decoration: underline; }
}
@media (hover: hover) and (prefers-color-scheme: dark) {
  main button:hover:not(:disabled), a.knapp:hover, main label.filknapp:hover { filter: brightness(1.15); }
}
/* Pekeflater: frittstående lenkerader og <details>-sammendrag minst 44 px (lenker midt i løpende tekst er unntatt) */
.lenke-rad a { display: inline-flex; align-items: center; min-height: 44px; }
/* Lenker midt i tekst på Priser: 44 px trykkflate via padding som tas igjen med negativ margin (ingen endring i tekstflyt) */
.pris-tekst a { display: inline-block; padding: 12px 3px; margin: -12px -3px; }
main details:not(.veiv-ny) > summary { padding: 10px 0; cursor: pointer; }

/* ---------- Planlegger: én rad per dag, ark per rett/dag, tre primærhandlinger (CSP: ingen inline-stiler) ---------- */
.uke-topp { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; }
.uke-velger { display: flex; align-items: center; flex: 1; min-width: 0; }
.uke-tittel { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 1.125rem; font-weight: 600; }
.uke-pil { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
           color: var(--accent-text); text-decoration: none; font-size: 2rem; line-height: 1; }
.uke-pil:active { opacity: .6; }
.uke-i-dag { margin: 0 0 8px; text-align: center; }
main button.mer-knapp, main button.dag-mer { flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; padding: 0; background: transparent; color: var(--accent-text);
                                            border-radius: 22px; }
main button.dag-mer { color: var(--muted); }
.prikker { fill: currentColor; display: block; }
.primaer-rad { margin: 8px 0 12px; }
.primaer-rad button { width: 100%; }
main button.stor { min-height: 50px; font-size: 1.0625rem; }
.dager { list-style: none; margin: 12px 0; padding: 0; background: var(--card); border-radius: 12px; overflow: hidden; }
.dag { position: relative; padding: 0 4px 0 16px; min-width: 0; }
.dag + .dag::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--sep); }
.dag-hode { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.dag-navn { flex: 0 0 3.75rem; font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.dag-navn small { display: block; font-weight: 400; color: var(--muted); font-size: .75rem; }
.dag-innhold { flex: 1; min-width: 0; padding: 4px 0; }
.dag-tekst { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
main button.dag-rett, main button.velg-rett { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 48px; text-align: left; }
main button.dag-rett { background: transparent; color: var(--fg); padding: 4px 0; font-weight: 400; border-radius: 8px; }
main button.dag-rett::after { content: "\203A"; margin-left: auto; padding-left: 4px; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.rett-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rett-tittel { font-weight: 600; overflow-wrap: anywhere; }
main button.velg-rett { background: transparent; color: var(--accent-text); padding: 4px 0; border-radius: 8px; }
main button.velg-rett::before { content: "+"; font-size: 1.375rem; font-weight: 400; line-height: 1; }
.varer-merke { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 12px; background: var(--info-bg); color: var(--info-fg); font-size: .8125rem; line-height: 1.3; }
.dag .ios-feil, .dag .advarsel { margin: 0 12px 8px 0; font-size: .9375rem; }
.dag .advarsel { color: var(--warn-fg); }
.plan-info { color: var(--muted); font-size: .875rem; margin: 6px 0 12px; }
main input.tall { width: 5em; }
/* Ark (dialog) i planleggeren */
dialog.ark .sheet-innhold { display: flex; flex-direction: column; gap: 4px; }
dialog.ark .ark-under { margin: 0 0 4px; color: var(--muted); font-size: .9375rem; }
dialog.ark .ark-tekst { margin: 4px 0; }
dialog.ark .varer-merke { align-self: flex-start; margin: 4px 0; }
dialog.ark .ark-del { margin: 16px 0 4px; font-size: .8125rem; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
dialog.ark .ark-rad { margin: 8px 0; }
dialog.ark .ark-skjema { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
dialog.ark .ark-felt { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: var(--muted); }
dialog.ark .ark-felt select, dialog.ark .ark-felt input, dialog.ark .ark-felt textarea { width: 100%; color: var(--fg); background: var(--bg); border: 1px solid var(--sep); border-radius: 8px; font: inherit; font-size: 1rem; padding: 8px 10px; }  /* 16 px: ingen iOS-zoom ved fokus */
dialog.ark .ark-felt.ark-rad-felt { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
dialog.ark .ark-felt.ark-rad-felt select, dialog.ark .ark-felt.ark-rad-felt input { width: 11rem; max-width: 55%; }
dialog.ark .ark-skjema > button { width: 100%; }
dialog.ark .bekreft { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: var(--danger-bg); color: var(--danger-fg); }
dialog.ark .bekreft button.fare { background: var(--card); }
.segment-rad form { display: flex; flex: 1 1 0; margin: 0; }
.segment-rad .segment-knapp { flex: 1 1 auto; width: 100%; min-height: 44px; background: transparent; color: var(--fg); font-weight: 400; font-size: .9375rem; padding: 0 6px; border-radius: 8px; flex-direction: column; gap: 0; line-height: 1.2; }
.segment-rad > .segment-knapp { flex: 1 1 0; }
.segment-rad .segment-knapp[aria-pressed="true"] { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px var(--skygge); }
.segment-rad .segment-knapp small { color: var(--muted); font-size: .6875rem; font-weight: 400; }
.ios-ok { background: var(--info-bg); color: var(--info-fg); padding: 10px 12px; border-radius: 10px; margin: 8px 0 12px; }
.plan-skjema p { margin: 8px 0; }
.plan-skjema label { display: block; margin-bottom: 4px; }
.plan-skjema input, .plan-skjema select { width: 100%; max-width: 20rem; }
/* Handleliste: ukevelger og fare-farge (flyttet fra inline-stil) */
.uke-velger.liste { margin: 0 0 8px; }
.uvanlig-lavt { color: var(--danger); }

/* Handleliste: krydder uten mengde (Har det / Må kjøpes). Segmentkontroll med to skjemaer; kolonne på smal skjerm. */
.krydder-rad { flex-wrap: wrap; }
.krydder-rad .krydder-navn { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.krydder-rad .segment-rad { margin: 0; flex: 0 1 15rem; }
.krydder-rad .segment-rad form { display: flex; flex: 1 1 0; }
.krydder-rad .segment-knapp { flex: 1 1 auto; width: 100%; min-height: 44px; background: transparent; color: var(--fg); font-weight: 400; font-size: .9375rem; padding: 0 8px; border-radius: 8px; }
.krydder-rad .segment-knapp[aria-pressed="true"] { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px var(--skygge); }
@media (max-width: 480px) { .krydder-rad .segment-rad { flex: 1 1 100%; } }

/* Oppskriftsvisning skalert fra ukeplanen (P4) */
.skalering { margin: 8px 0 12px; }
.skalering .varer-merke { margin: 0 0 4px; }

/* Anbefalinger i ukeplanen: egen seksjon under dagene, ett kort per oppskrift (adskilt fra dagkortene) */
.anbefalinger { scroll-margin-top: 64px; margin: 28px 0 16px; padding-top: 16px; border-top: 1px solid var(--sep); }
.anbefalinger h2 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; }
.anb-under, .anb-note { margin: 0 0 12px; color: var(--muted); font-size: .9375rem; }
.anb-note { margin: 8px 0 0; font-size: .8125rem; }
.anb-tom { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--card); line-height: 1.4; }
.anb-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anb-kort { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--sep); min-width: 0; }
.anb-navn { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.anb-tilbud, .anb-spar, .anb-meta { margin: 0 0 6px; overflow-wrap: anywhere; }
.anb-spar { color: var(--info-fg); font-size: .9375rem; }
.anb-knapper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.anb-knapper > * { flex: 1 1 8rem; min-height: 44px; }
@media (min-width: 768px) { .anb-liste { display: grid; grid-template-columns: 1fr 1fr; } }

/* Varevalg: kandidatkort, oversikt og «Valgt vare»-linje (ark bruker dialog.ark fra planleggeren) */
.vv-bilde { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--sep); }
.vv-bilde.liten { width: 32px; height: 32px; border-radius: 6px; }
.vv-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; text-align: left; }
.vv-tekst small { display: block; color: var(--muted); font-size: .8125rem; font-weight: 400; line-height: 1.3; }
.vv-navn { font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.vv-form { margin: 6px 0; display: block; }
.vv-form button.fare { width: 100%; background: var(--card); }
.vv-kort, main button.vv-kort { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px;
                                border-radius: 12px; background: var(--card); color: var(--fg); border: 1px solid var(--sep); font-weight: 400; text-align: left; }
.vv-kort.valgt { border: 2px solid var(--accent); margin: 6px 0; }
.vv-velg { margin-left: auto; padding-left: 4px; color: var(--accent-text); font-weight: 600; flex: 0 0 auto; }
.vv-merke { flex: 0 0 auto; padding: 3px 10px; border-radius: 12px; background: var(--info-bg); color: var(--info-fg); font-size: .8125rem; font-weight: 600; }
.vv-merke.trenger { background: var(--warn-bg); color: var(--warn-fg); }
.vv-rad { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; margin: 6px 0; border-radius: 12px; background: var(--card);
          border: 1px solid var(--sep); color: var(--fg); text-decoration: none; }
.vv-rad:active { opacity: .6; }
.vv-rad .vv-velg { margin-left: auto; }
small.valgt-linje { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--fg); }
small.valgt-linje span { min-width: 0; overflow-wrap: anywhere; }
.vv-sok input[type=search] { flex: 1 1 12rem; min-width: 0; }
main button.vv-apne { min-width: 44px; white-space: nowrap; font-size: .9375rem; }
.vv-akt { display: block; margin-top: 6px; }
.vv-rad-knapp { flex: 1 1 100%; display: flex; justify-content: flex-end; }
.vare-valg > div:first-child { min-width: 0; overflow-wrap: anywhere; }
dialog.ark .vv-form { margin: 6px 0; }

/* P12: Endre dager (−/+) i rettarket */
dialog.ark .dager-steg { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
dialog.ark .dager-steg button { width: 48px; min-width: 48px; min-height: 44px; font-size: 1.25rem; }
dialog.ark .dager-steg output { flex: 1; text-align: center; font-weight: 600; }
dialog.ark .dager-steg input[name="porsjoner"] { flex: 1; width: auto; min-height: 44px; text-align: center; font-weight: 600; font-size: 1.0625rem; -moz-appearance: textfield; }
dialog.ark .ark-hjelp { margin: 0; font-size: .875rem; color: var(--muted); }
dialog.ark .porsjoner-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
dialog.ark .porsjoner-knapper button { flex: 1 1 8rem; min-height: 44px; }
dialog.ark .dager-lagre { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9375rem; color: var(--muted); }
dialog.ark .dager-lagre input { width: 22px; height: 22px; }

/* «Foreslå middager» (P2): ark/side med én rad per ledig dag, avkrysning, «Bytt forslag» og «Angre» etter innlegging. Farger via tokens. */
main a.knapp.stor { min-height: 50px; font-size: 1.0625rem; }
.primaer-rad a.knapp { width: 100%; }
.forslag-liste { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.forslag-rad { padding: 4px 12px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--sep); min-width: 0; }
.forslag-rad .forslag-valg { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; }
.forslag-valg { cursor: pointer; }
.forslag-tekst { display: flex; flex-direction: column; min-width: 0; }
.forslag-dag { color: var(--muted); font-size: .8125rem; }
.forslag-tittel { font-weight: 600; overflow-wrap: anywhere; }
.forslag-merker { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.lav-pris-merke { display: inline-block; padding: 3px 10px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-fg); font-size: .8125rem; line-height: 1.3; }
.forslag-hvorfor { margin: 0 0 6px; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
dialog.ark .forslag-bytt, .forslag-side .forslag-bytt { margin-top: 4px; }
.forslag-side .ark-felt { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; color: var(--muted); }
.forslag-side .ark-felt select { width: 100%; color: var(--fg); background: var(--bg); border: 1px solid var(--sep); border-radius: 8px; font: inherit; font-size: 1rem; padding: 8px 10px; }
.forslag-skjema > button { width: 100%; margin-top: 8px; }
.forslag-skjema > button:disabled { opacity: .5; }
.forslag-side .sheet-topp { margin-top: 4px; }
.forslag-side .sheet-topp a.knapp { background: transparent; }
.angre-rad { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 4px 8px 4px 14px; border-radius: 12px; background: var(--info-bg); color: var(--info-fg); }
.angre-rad p { margin: 0; font-weight: 600; }
.angre-rad button { background: transparent; color: var(--info-fg); }

/* ---------- Massevalg av dager (/oppskrifter?velg=1) ---------- */
.masse-merknad { margin: 0 0 8px; }
.masse-melding { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; padding: 4px 4px 4px 14px; background: var(--info-bg); color: var(--info-fg); border-radius: 10px; }
.masse-melding button { background: transparent; min-height: 44px; padding: 0 10px; }
.masse-rad { position: relative; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 56px; padding: 6px 16px; cursor: pointer; }
.masse-rad input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; left: 12px; top: 6px; }
.masse-rad .masse-hake { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sep); background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.masse-rad input:checked + .masse-hake { background: var(--accent); border-color: var(--accent); }
.masse-rad input:checked + .masse-hake::after { content: "\2713"; color: var(--on-accent); font-weight: 700; line-height: 1; }
.masse-rad input:focus-visible + .masse-hake { outline: 3px solid var(--focus); outline-offset: 2px; }
.masse-rad .masse-tittel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.masse-skjema { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.masse-bunn { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 14; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
              padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: var(--card); border-top: 1px solid var(--sep); box-shadow: 0 -2px 10px var(--skygge); }
.masse-antall { margin: 0; font-weight: 600; flex: 1 0 auto; }
.masse-dager { display: inline-flex; align-items: center; gap: 6px; }
.masse-dager label { color: var(--muted); font-size: .875rem; }
.masse-dager input { width: 3.2em; min-height: 44px; text-align: center; font: inherit; font-size: 1rem; background: var(--bg); color: var(--fg); border: 1px solid var(--sep); border-radius: 8px; }
.masse-dager input.masse-felt-js { -moz-appearance: textfield; appearance: textfield; }
.masse-dager input.masse-felt-js::-webkit-inner-spin-button, .masse-dager input.masse-felt-js::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.masse-bunn button { min-height: 44px; min-width: 44px; }
.masse-bunn button:disabled { opacity: .45; cursor: default; }
.masse-steg { font-size: 1.4rem; padding: 0; width: 44px; }
@media (min-width: 768px) { .masse-bunn { left: var(--side); right: 0; bottom: env(safe-area-inset-bottom); justify-content: center; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } .masse-antall { flex: 0 1 auto; margin-right: auto; } }

/* Porsjonsvelger på oppskriftssiden (−/+ er lenker, JS bytter innholdet uten ny sidelasting) */
.porsjonsvelger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 8px 12px; background: var(--card); border-radius: 12px; }
.porsjonsvelger .ps-etikett { font-weight: 600; margin-right: auto; }
.ps-steg { display: flex; align-items: center; gap: 4px; }
.ps-steg output { min-width: 3ch; text-align: center; font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
a.knapp.ps-knapp, span.ps-knapp { width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.4rem; }
span.ps-knapp { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--seg-bg); }
.ps-knapp[aria-disabled="true"] { opacity: .4; }
a.ps-nullstill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
#porsjon-omrade[aria-busy="true"] { opacity: .6; }

/* Oppskriftsside (2026-11-12): strukturert visning. To kolonner fra 1000 px. */
main:has(> .o-side) { max-width: 1000px; }
.o-hode h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; margin: 4px 0 6px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.o-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.o-meta li { font-size: .8125rem; color: var(--muted); background: var(--seg-bg); border-radius: 8px; padding: 3px 9px; }
.o-hode .knapp-rad { margin: 0 0 12px; }
.o-hode .knapp-rad .knapp { flex: 1 1 0; min-height: 44px; }
.o-seksjon { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 24px 4px 8px; }
.o-kort { background: var(--card); border-radius: 12px; padding: 4px 16px; }
.o-kort .porsjonsvelger { margin: 0; padding: 8px 0; background: none; border-bottom: 1px solid var(--sep); border-radius: 0; }
.o-kort .skalering { margin: 8px 0 4px; }
ul.o-ingr { list-style: none; margin: 0; padding: 0; }
ul.o-ingr li { display: grid; grid-template-columns: 5.25rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sep); line-height: 1.35; }
ul.o-ingr li:last-child { border-bottom: 0; }
.o-ingr .mengde { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.o-ingr .navn { min-width: 0; overflow-wrap: anywhere; }
.o-ingr .navn .merk { display: block; color: var(--muted); font-size: .875rem; }
.o-under { font-size: .8125rem; font-weight: 600; color: var(--muted); margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--sep); }
ol.o-steg { list-style: none; counter-reset: o-s; margin: 0; padding: 0; }
ol.o-steg li { counter-increment: o-s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sep); font-size: 1.0625rem; line-height: 1.55; overflow-wrap: anywhere; }
ol.o-steg li:last-child { border-bottom: 0; }
ol.o-steg li::before { content: counter(o-s); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
                       font-size: .875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.o-notat { font-size: .9375rem; color: var(--muted); padding: 8px 16px; }
.o-notat p { margin: 6px 0; overflow-wrap: anywhere; }
.o-kilde { font-size: .8125rem; color: var(--muted); margin: 16px 4px; overflow-wrap: anywhere; }
.o-mer { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; align-items: center; }
.o-mer .knapp, .o-mer form { flex: 1 1 0; }
.o-mer form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.o-mer form button { flex: 1 1 auto; }
.o-mer > .ios-liten { flex: 1 1 100%; margin: 0; }
@media (min-width: 1000px) {
  .o-kropp { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .o-ingredienser { position: sticky; top: 64px; }
  .o-hode .knapp-rad .knapp { flex: 0 0 auto; }
  .o-mer .knapp, .o-mer form { flex: 0 0 auto; }
}