/* Focus Buddy · samme rolige palet som Kinlies design C "Ro". Tekstfarver ≥ 4,5:1. */
:root{
  --bg:#f2eee7; --card:#fbf9f5; --card2:#ece6dc; --text:#1f2d26; --muted:#5c625c;
  --accent:#004225; --accent-ink:#f6f1e7; --work:#9b4933; --rest:#3b6680;
  --ctrl-ink:var(--accent); --ctrl-bg:#00422512;
  --sheet:#fbf9f5; --switch-off:#c9c1b4; --scrim:#2e3a3355;
  --tint:#2e3a330d; --tint-strong:#2e3a3314; --run-work:#f6d9cf; --run-rest:#d8e6ef;
  --soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --danger-bg:#f6ded6; --danger-fg:#9b4933;
  --radius:26px; --shadow:0 6px 20px #6b5a3f14;
  --font:"Nunito","Quicksand","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px}
body{min-height:100dvh;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible,input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.ic{display:block;flex:none}
.tnum{font-variant-numeric:tabular-nums}

/* knapper */
.iconbtn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none}
.iconbtn:active{background:var(--tint-strong)}
.iconbtn .ic{width:1em;height:1em}
.pill{background:var(--accent);color:var(--accent-ink);font-weight:600;border-radius:999px;padding:13px 22px;font-size:16px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.pill:active{filter:brightness(.9)}
.pill.ghost{background:var(--card2);color:var(--text)}
.pill.danger{background:var(--danger-bg);color:var(--danger-fg)}
.pill .ic{width:.95em;height:.95em}

/* skærm 1 · opsætning */
.setup{min-height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}
.setup h1{font-size:17px;font-weight:600;color:var(--muted);margin:2px 4px 6px;text-align:center;letter-spacing:.02em}
.card{background:var(--card);border-radius:var(--radius);padding:14px 16px 16px;box-shadow:var(--shadow)}
.stepper .label{font-size:15px;color:var(--muted);font-weight:600}
.stepper .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.stepper .val{font-size:48px;font-weight:500;line-height:1.1;text-align:center;flex:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stepper .val small{font-size:18px;color:var(--muted);font-weight:500;margin-left:4px;letter-spacing:0}
.stepbtn{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--ctrl-bg);color:var(--ctrl-ink);font-size:28px;flex:none}
.stepbtn:active{background:#00422526}
.stepbtn:disabled{opacity:.35;cursor:default}
.stepbtn .ic{width:1em;height:1em}
.summary{text-align:center;color:var(--text);font-size:17px;line-height:1.4;margin:6px 8px 2px;font-variant-numeric:tabular-nums}
.summary b{font-weight:700;color:var(--accent)}
.bigstart{width:100%;font-size:20px;padding:18px 22px;min-height:64px;box-shadow:0 8px 20px #0042253d;margin-top:4px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px;font-size:16px;color:var(--text);cursor:pointer;min-height:56px}
.switch{position:relative;width:52px;height:30px;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;background:var(--switch-off);border-radius:999px;transition:.2s;pointer-events:none}
.switch span:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(22px)}

/* installér-knap: tydelig, men rolig. Skjules, når appen er installeret */
.installbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:2px solid var(--accent);border-radius:var(--radius);padding:12px 16px;min-height:64px;box-shadow:var(--shadow)}
.installbtn:active{background:var(--soft)}
.installbtn .ii{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:22px;flex:none}
.installbtn .ii .ic{width:1em;height:1em}
.installbtn .it{display:flex;flex-direction:column;gap:2px}
.installbtn b{font-size:17px;color:var(--accent)}
.installbtn small{font-size:14px;color:var(--muted)}
.inststeps{margin:0 14px 8px;padding-left:22px;line-height:1.5;font-size:16px}
.inststeps li{margin:6px 0}
.inststeps .inl{display:inline-block;vertical-align:-3px;color:var(--accent)}
.inststeps .inl .ic{width:1.1em;height:1.1em}
.instnote{margin:0 14px 10px;color:var(--muted);font-size:15px;line-height:1.4}

/* skærm 2 · kørsel: hele fasen er én rolig farveflade */
.run{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));transition:background .3s;--ph:var(--work)}
.run.work{--ph:var(--work);background:var(--run-work)}
.run.rest{--ph:var(--rest);background:var(--run-rest)}
.run .topline{width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px;padding-left:4px}
.run .phase{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ph);padding:8px 26px;border-radius:999px;min-width:60%;text-align:center;transition:background .3s}
.run .phase .ps{text-transform:none;letter-spacing:.02em;font-weight:600;opacity:.9}
.ringwrap{position:relative;width:min(78vw,340px);cursor:pointer;aspect-ratio:1;margin:18px 0 10px}
.ringwrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringwrap .bgc{stroke:var(--tint-strong)}
.ringwrap .fgc{stroke:var(--ph);stroke-linecap:round;transition:stroke .3s}
.ringwrap .count{position:absolute;inset:0;display:grid;place-items:center;font-size:max(96px,min(28vw,128px));font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.run.paused .ringwrap .count{opacity:.55}
.run .next{color:var(--text);font-size:20px;text-align:center;min-height:1.3em;font-variant-numeric:tabular-nums}
.run .next b{font-weight:600}
.chips{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--tint);border-radius:999px;padding:7px 12px;font-size:15px;font-variant-numeric:tabular-nums}
.chip b{font-weight:600}
.controls{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:22px;padding-top:16px}
.controls .play{width:88px;height:88px;font-size:36px;background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px #0042253d}
.controls .play:active{filter:brightness(.9);background:var(--accent)}
.stopbtn{margin-top:18px;min-width:140px;min-height:48px}

/* skærm 3 · færdig */
.endview{background:var(--bg)}
.done{text-align:center;margin:auto 0;display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:420px}
.done .big{width:96px;height:96px;color:var(--accent)}
.done .big svg{width:100%;height:100%}
.done h2{font-size:30px;font-weight:600;margin:4px 0 0}
.done .meta{color:var(--muted);font-size:17px;font-variant-numeric:tabular-nums}
.done .btns{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:18px}
.done .btns .pill{width:100%;min-height:56px;font-size:18px}

/* ark */
.sheet{position:fixed;inset:0;z-index:20;background:var(--scrim);display:flex;align-items:flex-end}
.sheet-panel{width:100%;max-width:520px;margin:0 auto;background:var(--sheet);border-radius:18px 18px 0 0;padding:8px 8px calc(12px + env(safe-area-inset-bottom))}
.sheet-panel .title{padding:14px 14px 10px;color:var(--text);font-size:18px;font-weight:600}
.sheet-panel button{display:flex;align-items:center;width:100%;padding:15px 14px;font-size:17px;border-radius:12px;gap:14px;min-height:56px}
.sheet-panel button:active{background:var(--tint)}
.sheet-panel button.primary{background:var(--soft);font-weight:600}
.sheet-panel button.danger{color:var(--danger-fg)}
.sheet-panel .si{width:26px;display:grid;place-items:center}
.sheet-panel .si .ic{width:1em;height:1em}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}