:root {
  --bg: #f6f5f1; --ink: #1d1d1b; --mut: #6b6a64; --line: #d9d7cf; --field: #fff;
  --work: #1f7a5a; --rest: #2563b8; --btn: #1d1d1b; --btnink: #fff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413; --ink: #f0eee8; --mut: #a3a199; --line: #3a3936; --field: #1f1f1d;
    --work: #4cc79a; --rest: #6ea8ff; --btn: #f0eee8; --btnink: #141413;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.4 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; font-weight: 700; border: 0; border-radius: 14px; background: var(--btn); color: var(--btnink); cursor: pointer; }
button.sec { background: transparent; color: var(--ink); border: 2px solid var(--line); }
button:disabled { opacity: .35; cursor: default; }
[hidden] { display: none !important; }

/* Timer: fills the first screen */
.timer {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; user-select: none; -webkit-user-select: none;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  position: relative;
}
.phase { font-size: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
[data-phase="work"] .phase { color: var(--work); }
[data-phase="rest"] .phase { color: var(--rest); }
.time { font-size: min(38vw, 170px); font-weight: 800; line-height: 1; margin: 10px 0; font-variant-numeric: tabular-nums; }
.time.long { font-size: min(24vw, 150px); }
.name { font-size: 28px; font-weight: 700; min-height: 39px; overflow-wrap: anywhere; }
.next { font-size: 16px; color: var(--mut); min-height: 22px; margin-top: 6px; }
.meta { font-size: 15px; color: var(--mut); min-height: 21px; margin-top: 14px; }
.bar { width: min(320px, 80%); height: 10px; border-radius: 5px; background: var(--line); margin: 16px auto 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.btns { display: flex; gap: 8px; margin-top: 26px; align-items: stretch; }
.btns button { font-size: 20px; padding: 16px 20px; }
.btns .icon { padding: 0 10px; display: grid; place-items: center; }
.icon svg { width: 24px; height: 24px; fill: currentColor; }
.hint { margin-top: 18px; background: none; color: var(--mut); font-weight: 600; padding: 8px 12px; }
.editlink { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); color: var(--mut); text-decoration: none; padding: 8px; }
.panel { display: none; position: absolute; top: 16px; right: 16px; font-size: 15px; padding: 8px 14px; color: var(--mut); }

/* Which controls show in which state */
[data-state="ready"] #back, [data-state="ready"] #fwd, [data-state="ready"] #reset,
[data-state="done"] #back, [data-state="done"] #fwd { display: none; }
[data-state="running"] .editlink, [data-state="paused"] .editlink { display: none; }

/* Settings */
.settings {
  max-width: 520px; margin: 0 auto;
  padding: 8px 20px calc(40px + env(safe-area-inset-bottom));
}
[data-state="running"] .settings { display: none; }
[data-state="paused"] .settings { opacity: .45; }
.lock { display: none; margin: 0 0 12px; color: var(--mut); }
[data-state="paused"] .lock { display: block; }
.head { display: flex; align-items: baseline; justify-content: space-between; }
h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 24px 0 12px; }
.total { font-weight: 700; font-variant-numeric: tabular-nums; }
input {
  font: inherit; font-size: 18px; color: var(--ink); background: var(--field);
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0;
}
input:focus { outline: none; border-color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field small { display: block; color: var(--mut); margin-top: 4px; }
.num { display: flex; gap: 6px; }
.num input { flex: 1; width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.num button, .list button { width: 44px; flex: none; font-size: 20px; padding: 0; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; gap: 6px; }
.list input { flex: 1; width: 0; }
.list li:first-child [data-move="-1"], .list li:last-child [data-move="1"] { visibility: hidden; }
.add { width: 100%; margin-top: 10px; padding: 12px; }
.silent { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-weight: 600; }
.silent input { width: 24px; height: 24px; margin: 0; flex: none; }
.silent small { display: block; font-weight: 400; color: var(--mut); }

/* Phase-change flash and update bar */
.flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
.update {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); padding: 12px 20px; white-space: nowrap;
}

/* Laptop: timer and settings side by side */
@media (min-width: 900px) {
  body { display: grid; grid-template-columns: 1fr 420px; height: 100vh; }
  .timer { min-height: 0; }
  .settings { width: 100%; overflow-y: auto; border-left: 2px solid var(--line); }
  body[data-state="running"], body[data-panel="hidden"] { grid-template-columns: 1fr; }
  body[data-panel="hidden"] .settings { display: none; }
  .editlink { display: none; }
  .panel { display: block; }
  [data-state="running"] .panel { display: none; }
}