/**
 * Three looks, one app.
 *
 * Cornerman floods the whole screen with the phase colour — red means work,
 * green means rest, legible from the far end of a gym with gloves on. Ironside
 * keeps a gym-wall enamel plate and spends the colour on the dial. Ringside is
 * a broadcast display and is dark on purpose, in both themes.
 *
 * Every colour is a token defined on :root first, so the un-stamped "system"
 * state is always complete; the theme blocks only redefine.
 */

/* ---------- tokens: cornerman (default) ---------- */
:root, html[data-skin="cornerman"] {
  --bg:#E9ECE8; --panel:#FDFDFC; --fg:#101418; --muted:#6E7A76; --line:#D2D8D3;
  --work:#DC3F22; --rest:#0D6E62; --prep:#3E9AC6; --idle:#FDFDFC; --finish:#1A1F1D;
  --on-work:#FFF4F1; --on-rest:#EAF6F3; --on-prep:#04222F; --on-idle:#101418; --on-finish:#EDF1EE;
  --accent:#0D6E62; --radius:16px;
  --stage-bg:var(--live); --stage-fg:var(--on-live);
  --ring-track:color-mix(in srgb, currentColor 16%, transparent); --ring-arc:currentColor;
  --phase-fg:color-mix(in srgb, currentColor 85%, transparent);
  --dot:color-mix(in srgb, currentColor 25%, transparent);
  --dot-done:color-mix(in srgb, currentColor 60%, transparent); --dot-now:currentColor;
  --btn-bg:var(--fg); --btn-fg:var(--bg);
  --ink-idle:var(--fg); --ink-done:var(--fg);
  --face:"Oswald", ui-sans-serif, system-ui, sans-serif;
  --ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --digits:ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --digit-weight:600; --digit-track:-.03em;
}
@media (prefers-color-scheme: dark) {
  html[data-skin="cornerman"]:not([data-theme="light"]) {
    --bg:#0E1211; --panel:#171C1A; --fg:#E7ECE8; --muted:#8F9B96; --line:#262E2B;
    --work:#F05437; --rest:#18907F; --prep:#57AFD8; --idle:#171C1A; --finish:#05201B;
    --on-idle:#E7ECE8;
  }
}
html[data-skin="cornerman"][data-theme="dark"] {
  --bg:#0E1211; --panel:#171C1A; --fg:#E7ECE8; --muted:#8F9B96; --line:#262E2B;
  --work:#F05437; --rest:#18907F; --prep:#57AFD8; --idle:#171C1A; --finish:#05201B;
  --on-idle:#E7ECE8;
}

/* ---------- tokens: ironside ---------- */
html[data-skin="ironside"] {
  --bg:#E8E0D0; --panel:#F0EADC; --fg:#191714; --muted:#8A8175; --line:#C9BFAA;
  --work:#7A211C; --rest:#4A6B3F; --prep:#3E86AC; --idle:#F0EADC; --finish:#191714;
  --on-work:#191714; --on-rest:#191714; --on-prep:#191714; --on-idle:#191714; --on-finish:#191714;
  --accent:#B0862F; --radius:3px;
  --stage-bg:var(--panel); --stage-fg:var(--fg);
  --ring-track:var(--line); --ring-arc:var(--live-ink); --phase-fg:var(--live-ink);
  --dot:var(--muted); --dot-done:var(--accent); --dot-now:var(--live-ink);
  --btn-bg:var(--work); --btn-fg:var(--panel);
  --ink-idle:var(--muted); --ink-done:var(--work);
  --digits:var(--face); --digit-weight:600; --digit-track:0;
}
@media (prefers-color-scheme: dark) {
  html[data-skin="ironside"]:not([data-theme="light"]) {
    --bg:#14120F; --panel:#1E1B17; --fg:#EFE7D6; --muted:#8B8272; --line:#37322A;
    --work:#C9483C; --rest:#7FA36A; --prep:#78C2E4; --idle:#1E1B17; --finish:#EFE7D6;
    --on-work:#EFE7D6; --on-rest:#EFE7D6; --on-prep:#EFE7D6; --on-idle:#EFE7D6; --accent:#D9AC4E;
  }
}
html[data-skin="ironside"][data-theme="dark"] {
  --bg:#14120F; --panel:#1E1B17; --fg:#EFE7D6; --muted:#8B8272; --line:#37322A;
  --work:#C9483C; --rest:#7FA36A; --prep:#78C2E4; --idle:#1E1B17; --finish:#EFE7D6;
  --on-work:#EFE7D6; --on-rest:#EFE7D6; --on-prep:#EFE7D6; --on-idle:#EFE7D6; --accent:#D9AC4E;
}

/* ---------- tokens: ringside (dark by design, both themes) ---------- */
html[data-skin="ringside"] {
  --bg:#0A0C11; --panel:#12161F; --fg:#EEF1F6; --muted:#8A94A6; --line:#232B39;
  --work:#D42B2B; --rest:#2E6FD6; --prep:#7FC2E8; --idle:#12161F; --finish:#1B2333;
  --on-work:#EEF1F6; --on-rest:#EEF1F6; --on-prep:#EEF1F6; --on-idle:#EEF1F6; --on-finish:#EEF1F6;
  --accent:#7FC2E8; --radius:2px;
  --stage-bg:var(--bg); --stage-fg:var(--fg);
  --ring-track:var(--line); --ring-arc:var(--live-ink); --phase-fg:var(--live-ink);
  --dot:var(--muted); --dot-done:var(--accent); --dot-now:var(--live-ink);
  --btn-bg:var(--live); --btn-fg:#FFFFFF;
  --ink-idle:var(--muted); --ink-done:var(--accent);
  --digits:var(--face); --digit-weight:600; --digit-track:0;
}

/* ---------- phase → live colour ---------- */
/* --live is the phase colour used as a BACKGROUND (the flood, the primary
   button). --live-ink is the same phase read as a FOREGROUND (labels, dial arc,
   the active dot). They diverge at idle and at the final bell, where the
   background wants a panel tone and the text wants something you can read. */
body[data-phase="idle"]  { --live:var(--idle);   --on-live:var(--on-idle);   --live-ink:var(--ink-idle) }
body[data-phase="prep"]  { --live:var(--prep);   --on-live:var(--on-prep);   --live-ink:var(--prep) }
body[data-phase="work"]  { --live:var(--work);   --on-live:var(--on-work);   --live-ink:var(--work) }
body[data-phase="rest"]  { --live:var(--rest);   --on-live:var(--on-rest);   --live-ink:var(--rest) }
body[data-phase="done"]  { --live:var(--finish); --on-live:var(--on-finish); --live-ink:var(--ink-done) }

@font-face {
  font-family:"Oswald"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/oswald-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Oswald"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/oswald-600-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Oswald"; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/oswald-600-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

*{ box-sizing:border-box }

/* Buttons must not be native widgets. Beyond the obvious (UA chrome leaking
   into a designed control), a themed widget does not reliably re-resolve custom
   properties when the skin is switched at runtime — which left Ironside and
   Ringside painting Cornerman's colours on every button. */
button{ appearance:none; -webkit-appearance:none }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--ui); font-size:16px; line-height:1.4;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.app{ display:flex; flex-direction:column; height:100dvh; height:100vh }
@supports (height:100dvh){ .app{ height:100dvh } }

.view{ display:none; flex:1; min-height:0 }
.view.on{ display:flex; flex-direction:column }

/* ---------- timer ---------- */
.stage{
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(8px,2.4vh,18px); width:100%; border:0; cursor:pointer;
  padding:14px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  font-family:inherit; color:var(--stage-fg); background:var(--stage-bg);
  transition:background .4s ease, color .4s ease;
}
.stage:focus-visible{ outline:3px solid var(--accent); outline-offset:-6px }

.phase{
  font-family:var(--face); font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--phase-fg); text-align:center;
}

.ring{ position:relative; width:min(66vw, 40vh); aspect-ratio:1/1; display:grid; place-items:center }
.ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.ring-bg{ fill:none; stroke:var(--ring-track); stroke-width:2.6 }
.ring-fg{ fill:none; stroke:var(--ring-arc); stroke-width:2.6; stroke-linecap:round; transition:stroke-dashoffset .2s linear }

.digits{
  font-family:var(--digits); font-weight:var(--digit-weight); letter-spacing:var(--digit-track);
  font-variant-numeric:tabular-nums; font-size:min(19vw, 11.5vh); line-height:1;
}
.digits.warn{ animation:flash .9s steps(2,end) infinite }
@keyframes flash{ 50%{ opacity:.42 } }

.roundline{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; opacity:.82; text-align:center }
.dots{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:70vw }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--dot) }
.dots i.done{ background:var(--dot-done) }
.dots i.now{ background:var(--dot-now); transform:scale(1.5) }
.hint{ font-size:12px; opacity:.6; text-align:center; min-height:1.2em }

.ctl{ display:flex; gap:10px; padding:10px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right)) }
.btn{
  flex:1; padding:15px 16px; border-radius:var(--radius); cursor:pointer; font-family:var(--face);
  font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); background:transparent; color:var(--fg);
}
.btn.primary{ flex:2; background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn:active{ transform:translateY(1px) }

/* ---------- lists ---------- */
.scroll{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px max(14px, env(safe-area-inset-left)) 20px max(14px, env(safe-area-inset-right));
}
h2{
  font-family:var(--face); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:18px 4px 8px; font-weight:600;
}
h2:first-child{ margin-top:4px }
.list{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.row, .as-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:13px 15px; border-bottom:1px solid var(--line); font-size:15px; color:var(--fg);
  background:transparent; font-family:inherit; text-align:left;
}
.row:last-child, .as-row:last-child{ border-bottom:0 }
button.row, .as-row{ border-left:0; border-right:0; border-top:0; cursor:pointer }
.row .meta{ font-family:var(--digits); font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums }
.row[aria-pressed="true"]{ background:color-mix(in srgb, var(--accent) 14%, transparent) }
.row[aria-pressed="true"] .meta{ color:var(--accent) }
.row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

.pm{ display:flex; align-items:center; gap:2px; background:color-mix(in srgb, var(--fg) 8%, transparent); border-radius:9px; padding:3px }
.pm button{ width:36px; height:30px; border:0; background:transparent; color:var(--fg); font-size:17px; cursor:pointer; border-radius:7px; font-family:inherit }
.pm button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }
.pm b{ font-family:var(--digits); font-weight:600; min-width:58px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums }

select{
  font-family:inherit; font-size:15px; color:var(--fg); background:var(--panel);
  border:1px solid var(--line); border-radius:9px; padding:7px 9px; max-width:58%;
}
option{ background:var(--panel); color:var(--fg) }
input[type=range]{ accent-color:var(--accent); width:140px; max-width:58% }
input[type=checkbox]{ accent-color:var(--accent); width:21px; height:21px }
select:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

.note{ font-size:13px; color:var(--muted); line-height:1.55; margin:12px 4px 0 }
.note.dim{ opacity:.7; font-size:12px }

/* ---------- tabs ---------- */
/* Navigation rides at the top. The bottom belongs to the thumb, and the thumb
   is holding Start — the only control that matters mid-session.
   Each tab is a real control with an edge, not a glyph floating in a bar, and
   it borrows the skin's own border, radius and accent: the same markup reads as
   a rounded pill in Cornerman, an enamel button in Ironside and a hard-cornered
   broadcast key in Ringside, with no per-skin rules. */
.tabs{
  display:flex; gap:6px; justify-content:center;
  border-bottom:1px solid var(--line); background:var(--panel);
  padding:8px max(10px, env(safe-area-inset-left));
  padding-top:calc(env(safe-area-inset-top) + 8px);
  padding-right:max(10px, env(safe-area-inset-right));
}
.tab{
  flex:1 1 0; max-width:148px; min-height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--radius);
  background:transparent; color:var(--muted); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.tab svg{ width:18px; height:18px; display:block; stroke-width:1.6 }
.tab.on{
  color:var(--fg); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.tab:active{ transform:translateY(1px) }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Landscape phone: the dial and the digits are the only things that matter. */
@media (max-height:460px) and (orientation:landscape){
  .ring{ width:min(38vw, 78vh) }
  .digits{ font-size:min(11vw, 22vh) }
  .dots, .roundline{ display:none }
  .ctl{ padding-top:4px; padding-bottom:6px }
  .btn{ padding:10px 12px }
  .tabs{ padding-top:6px; padding-bottom:6px }
  .tab{ min-height:34px; max-width:120px }
  .tab svg{ width:17px; height:17px }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }