:root{
  --bg:#eff2f5; --surface:#ffffff; --ink:#15202b; --ink2:#45566a;
  --line:#d3dce4; --accent:#1f5f8b;
  --on-accent:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1319; --surface:#151d25; --ink:#e4ebf1; --ink2:#a3b3c2;
    --line:#26313c; --accent:#6bb0dc;
    --on-accent:#0d1319;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* ---------- header / nav ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 16px; position:sticky; top:0; z-index:20;
}
.brand{
  font-size:1.05rem; font-weight:700; letter-spacing:.2px;
  color:var(--ink); text-decoration:none;
}
.burger{
  width:44px; height:44px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); display:flex; flex-direction:column;
  gap:5px; align-items:center; justify-content:center; cursor:pointer;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink)}
#nav{display:none; width:100%; margin-top:10px}
#nav.open{display:block}
#nav a{
  display:block; padding:16px 12px; font-size:1.05rem; text-decoration:none;
  color:var(--ink); border-radius:10px;
}
#nav a[aria-current="page"]{background:var(--accent); color:var(--on-accent); font-weight:600}

@media (min-width:720px){
  .burger{display:none}
  #nav{display:flex; width:auto; margin:0; gap:6px}
  #nav a{padding:10px 14px}
}

main{max-width:760px; margin:0 auto; padding:16px 16px 48px}

/* ---------- display ---------- */
.display{
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface); color:var(--ink);
  padding:22px 18px 18px; text-align:center;
  transition:background .18s linear, color .18s linear;
}
.phase{
  text-transform:uppercase; letter-spacing:.18em;
  font-weight:700; font-size:1rem;
}
.clock{
  font-variant-numeric:tabular-nums; font-weight:800;
  font-size:clamp(4.5rem,26vw,10rem); line-height:1; margin:6px 0 12px;
}
.bar{height:10px; border-radius:99px; background:var(--line); overflow:hidden}
.bar-fill{height:100%; width:0%; background:var(--accent)}
.meta{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  margin-top:12px; font-size:.95rem; color:var(--ink2);
  font-variant-numeric:tabular-nums;
}

.controls{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px}
.btn{
  flex:1 1 46%; min-height:52px; padding:12px 18px;
  font-size:1rem; font-weight:600; cursor:pointer;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink);
}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn:disabled{
  cursor:default;
  background:var(--line); color:var(--ink2); border-color:var(--line);
}
@media (min-width:520px){ .btn{flex:0 0 auto} }

/* phase colours */
body[data-phase="work"] .display{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
body[data-phase="work"] .meta{color:var(--on-accent)}
body[data-phase="work"] .bar{background:rgba(255,255,255,.35)}
body[data-phase="work"] .bar-fill{background:var(--on-accent)}
body[data-phase="work"] .btn{background:var(--on-accent); color:var(--accent); border-color:var(--on-accent)}

body[data-phase="rest"] .display,
body[data-phase="setrest"] .display{background:var(--ink); color:var(--bg); border-color:var(--ink)}
body[data-phase="rest"] .meta,
body[data-phase="setrest"] .meta{color:var(--bg)}
body[data-phase="rest"] .bar,
body[data-phase="setrest"] .bar{background:rgba(255,255,255,.25)}
body[data-phase="rest"] .bar-fill,
body[data-phase="setrest"] .bar-fill{background:var(--bg)}
body[data-phase="rest"] .btn,
body[data-phase="setrest"] .btn{background:var(--bg); color:var(--ink); border-color:var(--bg)}

body[data-phase="prepare"] .display{border-color:var(--accent)}
body[data-phase="done"] .display{border-color:var(--accent)}

/* ---------- cards / form ---------- */
.card{
  margin-top:18px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
}
.card h2{margin:0 0 14px; font-size:1.15rem}
.card h3{margin:22px 0 6px; font-size:1rem}
.quick{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{
  padding:10px 14px; min-height:44px; cursor:pointer;
  border:1px solid var(--line); border-radius:99px;
  background:var(--bg); color:var(--ink); font-size:.95rem; font-weight:600;
}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:420px){ .grid{grid-template-columns:1fr} }
label{display:block; font-size:.85rem; color:var(--ink2); font-weight:600}
input[type=number]{
  width:100%; margin-top:5px; padding:12px; min-height:48px;
  font-size:1.05rem; font-variant-numeric:tabular-nums;
  border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink);
}
input[type=number]:focus{outline:2px solid var(--accent); outline-offset:1px}
.toggles{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px}
.check{display:flex; align-items:center; gap:9px; font-size:1rem; color:var(--ink); min-height:44px}
.check input{width:22px; height:22px; accent-color:var(--accent)}
.note{margin:16px 0 0; color:var(--ink2); font-size:.92rem}
.prose p,.prose li{color:var(--ink2)}
.prose strong{color:var(--ink)}
.prose ul{padding-left:20px}