/* Filip – heimskjermen i appen (prøveversjon). Same fargar som heifilip.no: kol #2E2A2B, papir og rav #D07612 frå logoen.
   65+: tekst 18 px og oppover, trykkflater minst 56 px, synleg fokus. Heimskjermen (v1, 29.10): Snakk med Filip som
   stort kort øvst, Svindelsjekk og Øv og lær som to knappar under, berre ikon og namn, og «Du er sjefen. Filip viser vegen.» nedst (30.10).
   Påminninga (berre i appen, 29.10): brytar med heile rada som trykkflate, status i ord (ikkje berre farge), ro ved redusert rørsle. */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%}
body{margin:0;min-height:100dvh;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.125rem;line-height:1.5;color:#2E2A2B;background:#FBFBFA;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
main{max-width:480px;margin-inline:auto;padding:0 20px calc(28px + env(safe-area-inset-bottom))}
.hopp{position:absolute;left:-999px;top:8px;background:#2E2A2B;color:#fff;padding:12px 16px;z-index:50}
.hopp:focus{left:8px}
:focus-visible{outline:3px solid #D07612;outline-offset:3px;border-radius:6px}
.usynleg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1{font-size:1.75rem;line-height:1.2;margin:8px 0 12px;color:#2E2A2B}
p{margin:0}
.liten{font-size:1rem;color:#5B5456;margin-top:22px}
/* setninga nedst på heimskjermen («Du er sjefen. Filip viser vegen.», 30.10): brødtekststorleik og kol, ikkje liten grå tekst */
.heim-merk{font-size:1.125rem;line-height:1.5;color:#2E2A2B;margin-top:22px;text-wrap:balance}
.topp{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding-top:env(safe-area-inset-top)}
.merke{display:inline-flex;align-items:center}
.merke svg{display:block;height:36px;width:auto}
.ki{font-size:1rem;font-weight:600;color:#2E2A2B;border:2px solid #2E2A2B;border-radius:999px;padding:4px 10px;line-height:1}
.helsing{font-size:1.25rem;margin:10px 0 18px}
.val{display:grid;gap:14px}
.snakk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:236px;padding:24px 16px;border:3px solid #2E2A2B;border-radius:18px;background:#fff;color:#2E2A2B;text-decoration:none;text-align:center;touch-action:manipulation}
.snakk:active{background:#F1EEEC}
.snakk-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:5px solid #D07612}
.snakk b{font-size:1.75rem;line-height:1.2}
.to{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.liten-val{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:136px;padding:16px 8px;border:2px solid #2E2A2B;border-radius:14px;background:#fff;color:#2E2A2B;text-decoration:none;text-align:center;touch-action:manipulation}
.liten-val:active{background:#F1EEEC}
.liten-val b{font-size:clamp(1.125rem,5.2vw,1.3125rem);line-height:1.2;overflow-wrap:anywhere}
.liten-val .ikon{width:60px;height:60px}
.liten-val .ikon svg{width:32px;height:32px}
.ikon{width:52px;height:52px;border-radius:50%;background:#2E2A2B;color:#fff;display:grid;place-items:center}
.ikon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ikon.gron{background:#1E7B45}
.ikon.lilla{background:#5B3A8C}
.ring-rad{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;min-height:56px;margin-top:18px;padding:8px 4px;color:#2E2A2B;text-decoration:none;font-size:1.125rem}
.ring-rad b{color:#2E2A2B;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.tilbake{display:inline-flex;align-items:center;min-height:48px;padding:0 6px;color:#2E2A2B;font-weight:600;text-decoration:none;font-size:1.125rem}
.avatar{display:flex;justify-content:center;margin:6px 0 10px}
.avatar img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:5px solid #D07612}
.filip{font-size:1.25rem;line-height:1.45;margin-top:4px}
.du-sa{margin-top:16px;padding:12px 14px;border-radius:10px;background:#F1EEEC;font-size:1.0625rem}
.skriv{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:18px}
input{font:inherit;font-size:1.125rem;min-height:56px;padding:0 14px;border:2px solid #2E2A2B;border-radius:8px;background:#fff;color:#2E2A2B;min-width:0}
input::placeholder{color:#5B5456}
.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 22px;font:inherit;font-weight:600;font-size:1.125rem;border-radius:8px;border:2px solid #2E2A2B;background:#2E2A2B;color:#fff;text-decoration:none;cursor:pointer;touch-action:manipulation;width:100%}
.knapp:active{background:#1F1C1D}
.knapp.sekundar{background:#fff;color:#2E2A2B;margin-top:12px}
.knapp.sekundar:active{background:#F1EEEC}
.skriv .knapp{width:auto}
.kort{border:2px solid #2E2A2B;border-radius:12px;padding:20px 18px;background:#fff;display:grid;gap:10px;margin-top:8px}
.kort-tittel{font-size:1.5rem;font-weight:600;color:#2E2A2B}
.kort .knapp{margin-top:6px}

/* Påminning om dagens øving (berre i appen; skjult på nettet) */
.paaminning{margin-top:28px;padding-top:22px;border-top:2px solid #E6E2E0}
h2{font-size:1.375rem;line-height:1.2;margin:0 0 10px;color:#2E2A2B;text-wrap:balance}
.brytar-rad{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:10px 14px;border:2px solid #2E2A2B;border-radius:12px;background:#fff;cursor:pointer;touch-action:manipulation}
.brytar-rad:active{background:#F1EEEC}
.brytar-tekst{display:grid;gap:4px;min-width:0;font-size:1.125rem;line-height:1.3}
.brytar-status{color:#5B5456;font-size:1rem}
.brytar{appearance:none;-webkit-appearance:none;flex:none;width:76px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:999px;background:#6F6769;position:relative;cursor:pointer}
.brytar::before{content:"";position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.brytar:checked{background:#1E7B45}
.brytar:checked::before{transform:translateX(32px)}
@media (prefers-reduced-motion:no-preference){.brytar::before{transition:transform .15s ease-out}}
@media (hover:hover){.brytar-rad:hover{background:#F8F6F5}}
.tid-rad{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;min-height:72px;margin-top:12px;padding:8px 14px;border:2px solid #2E2A2B;border-radius:12px;background:#fff}
.tid-rad label{font-size:1.125rem;font-weight:600}
input[type=time]{min-width:128px;padding:0 10px;font-size:1.25rem;text-align:center}