/* COBALT Timer — gym screen timer. Self-contained, shares brand tokens. */

:root {
  --ink: #07090D;
  --surface: #0D1117;
  --cobalt: #1A5FD4;
  --electric: #2B7FFF;
  --paper: #F0F4FF;
  --steel: #8CA0B8;
  --line: rgba(140, 160, 184, 0.18);
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", monospace;
  /* phase colors */
  --c-prepare: #FFB224;
  --c-work: #2B7FFF;
  --c-rest: #FF4D4D;
  --c-done: #3DD68C;
  --phase: var(--c-work);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* the view switcher relies on the hidden attribute; it must always beat
   the display values set by .setup / .run below */
[hidden] { display: none !important; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

::selection { background: var(--cobalt); color: var(--paper); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* ---------- Setup ---------- */
.setup {
  max-width: 1080px;
  min-height: 100svh;
  margin-inline: auto;
  padding: clamp(14px, 3vh, 30px) clamp(20px, 4vw, 40px) clamp(14px, 2.5vh, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.3vh, 15px);
}
.t-head { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.t-logo { display: block; line-height: 0; transition: opacity 0.15s ease; }
.t-logo:hover { opacity: 0.8; }
.t-logo img { width: clamp(150px, 17vw, 210px); height: auto; }
.t-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--steel);
  border-left: 1px solid var(--line);
  padding-left: clamp(12px, 2vw, 20px);
}

.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modes button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line);
  padding: clamp(7px, 1.3vh, 11px) 16px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.modes button:hover { color: var(--paper); border-color: var(--steel); }
.modes button.is-active {
  color: var(--paper);
  background: var(--cobalt);
  border-color: var(--cobalt);
}

.mode-desc {
  color: var(--steel);
  font-size: 13.5px;
  min-height: 1.3em;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(8px, 1.2vh, 12px);
}
.field {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(9px, 1.5vh, 14px) 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.field-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: clamp(32px, 4.6vh, 40px);
  height: clamp(32px, 4.6vh, 40px);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: clamp(15px, 2.6vh, 18px);
  color: var(--steel);
  transition: color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.stepper button:hover { color: var(--paper); border-color: var(--electric); }
.stepper .val {
  font-family: var(--display);
  font-size: clamp(19px, 3.4vh, 26px);
  min-width: 62px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.preset-row { display: flex; gap: 8px; }
.preset-row button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px dashed var(--line);
  padding: 8px 14px;
}
.preset-row button:hover { color: var(--electric); border-color: var(--electric); }

.setup-extra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wod-name {
  flex: 1 1 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
}
.wod-name:focus { border-color: var(--electric); }
.wod-name::placeholder { color: rgba(140, 160, 184, 0.55); }
.total {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
.total strong { color: var(--paper); font-weight: 400; }

.volume-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vol-icon { width: 22px; height: 22px; color: var(--steel); flex-shrink: 0; }
.vol-icon .vol-wave { opacity: 1; transition: opacity 0.15s ease; }
.volume-row.is-low .vol-wave-2 { opacity: 0; }
.volume-row.is-muted .vol-wave { opacity: 0; }
.volume-row.is-muted .vol-icon { color: var(--c-rest); }
.volume-row .field-label { flex-shrink: 0; }
.vol-range {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
.vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--electric);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--electric);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.vol-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.vol-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--electric);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--electric);
  cursor: pointer;
}
.vol-val {
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.setup-actions { display: flex; gap: 12px; align-items: stretch; }
.start-btn {
  flex: 1 1 auto;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cobalt);
  color: var(--paper);
  padding: clamp(11px, 2.2vh, 18px) 24px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.start-btn:hover { background: var(--electric); transform: translateY(-2px); }
.back-btn {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line);
  padding: 0 28px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.back-btn:hover { color: var(--paper); border-color: var(--electric); }

.hints {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(140, 160, 184, 0.5);
  text-transform: uppercase;
}

/* ---------- Run screen ----------
   Everything is sized against viewport HEIGHT so the whole stack always fits
   one screen: big TV, laptop, or phone. Top padding clears the control bar,
   bottom padding clears the progress strip. */
.run {
  position: fixed;
  inset: 0;
  height: 100svh;
  padding: clamp(54px, 9vh, 78px) 16px clamp(18px, 3.5vh, 30px);
  background:
    radial-gradient(110% 90% at 50% 110%, color-mix(in srgb, var(--phase) 14%, transparent), transparent 60%),
    var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.8vh, 10px);
  text-align: center;
  overflow: hidden;
  cursor: default;
}
.run.phase-prepare { --phase: var(--c-prepare); }
.run.phase-work { --phase: var(--c-work); }
.run.phase-rest { --phase: var(--c-rest); }
.run.phase-done { --phase: var(--c-done); }

.run-title {
  font-family: var(--mono);
  font-size: clamp(12px, min(1.6vw, 2vh), 22px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
  min-height: 1.2em;
}
.run-phase {
  font-family: var(--mono);
  font-size: clamp(15px, min(2.6vw, 3vh), 34px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--phase);
}
.run-time {
  font-family: var(--display);
  font-weight: 400;
  font-size: min(30vw, 38vh);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  text-shadow: 0 0 120px color-mix(in srgb, var(--phase) 35%, transparent);
}
/* Clock / screensaver show full HH:MM:SS (8 chars) on one line — scale down from the
   workout-tuned size so the wider string never clips, while staying large on a 16:9 TV. */
.run.is-clock .run-time { font-size: min(22vw, 36vh); }
.run-round {
  font-family: var(--display);
  font-size: clamp(20px, min(4.5vw, 5vh), 56px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
  line-height: 1.05;
}
.run-sub {
  font-family: var(--mono);
  font-size: clamp(11px, min(1.6vw, 1.9vh), 20px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  min-height: 1.3em;
}

/* segmented whole-workout map: one block per interval, width = duration */
.run-map {
  display: flex;
  gap: 3px;
  width: min(86vw, 1180px);
  height: clamp(12px, 2.6vh, 28px);
  margin-top: clamp(6px, 1.4vh, 18px);
  flex-shrink: 0;
}
.map-seg {
  position: relative;
  flex-basis: 0;
  min-width: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--seg) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--seg) 35%, transparent);
}
.map-prepare { --seg: var(--c-prepare); }
.map-work, .map-amrap, .map-up { --seg: var(--c-work); }
.map-rest, .map-setrest { --seg: var(--c-rest); }
.map-cooldown { --seg: var(--c-done); }
.map-seg span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--seg);
}
.map-seg i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper);
  opacity: 0.85;
  pointer-events: none;
}

.run-toggle {
  margin-top: clamp(8px, 1.8vh, 26px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(14px, min(2vw, 2.4vh), 24px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper);
  border: 1px solid var(--phase);
  background: color-mix(in srgb, var(--phase) 16%, transparent);
  padding: clamp(8px, 1.4vh, 14px) clamp(28px, 4vw, 48px);
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

/* very short screens (landscape phones): drop the secondary line, compress */
@media (max-height: 520px) {
  .run-sub { display: none; }
  .run-time { font-size: min(26vw, 40vh); }
  .run { padding-top: clamp(44px, 8vh, 56px); }
}
.run-toggle:hover { background: color-mix(in srgb, var(--phase) 30%, transparent); transform: translateY(-2px); }

.run-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: rgba(140, 160, 184, 0.12);
}
.run-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--phase);
  transition: width 0.15s linear;
}

.run-controls {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.run.controls-hidden .run-controls { opacity: 0; pointer-events: none; }
.run-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(7, 9, 13, 0.6);
  border: 1px solid var(--line);
  padding: 8px 12px;
  color: var(--steel);
}
.run-vol .vol-icon { width: 18px; height: 18px; flex-shrink: 0; }
.run-vol .vol-range { flex: 0 0 92px; width: 92px; }
.run-controls button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line);
  background: rgba(7, 9, 13, 0.6);
  padding: 9px 14px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.run-controls button:hover { color: var(--paper); border-color: var(--electric); }

.run-logo {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  line-height: 0;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}
.run-logo img { width: clamp(118px, 12vw, 168px); height: auto; }
.run.controls-hidden .run-logo { opacity: 0; pointer-events: none; }

.run-paused {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-prepare);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 600px) {
  .run-time { font-size: min(32vw, 44vh); }
  .run-controls { flex-wrap: wrap; justify-content: flex-end; left: 18px; }
}

/* ================= v11 additions: texture, presets, builder, modal,
   urgency, flash, summary, screensaver ================= */

/* film grain + vignette, same texture language as the site */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-shift 0.9s steps(4) infinite; }
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.5%); }
  50% { transform: translate(1.5%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 100% at 50% 40%, transparent 58%, rgba(0, 0, 0, 0.4) 100%);
}

/* tap-to-type value */
.stepper button.val { border: none; cursor: text; }
.stepper button.val:hover { color: var(--electric); }
.stepper input.val-edit {
  background: var(--ink);
  border: 1px solid var(--electric);
  color: var(--paper);
  font-family: var(--display);
  font-size: 26px;
  min-width: 78px;
  width: 78px;
  text-align: center;
  outline: none;
  padding: 0;
}

/* saved workouts */
.setup-cols { display: flex; align-items: stretch; gap: clamp(16px, 1.8vw, 24px); }
.setup-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 15px); }
.presets-block { display: flex; flex-direction: column; gap: 12px; flex: 0 0 clamp(220px, 24vw, 280px); border: 1px solid var(--line); background: var(--surface); padding: clamp(14px, 2vh, 18px); }
.presets-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (max-width: 1024px) { .setup-cols { flex-direction: column; align-items: stretch; } .presets-block { flex: 1 1 auto; } }
.presets-actions { display: flex; gap: 8px; }
.presets-actions button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line);
  padding: 8px 14px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.presets-actions button:hover { color: var(--electric); border-color: var(--electric); }
.preset-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.presets-empty { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(140,160,184,0.5); text-transform: uppercase; }
.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 9px 12px 9px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.preset-chip:hover { border-color: var(--electric); background: color-mix(in srgb, var(--cobalt) 18%, var(--surface)); }
.preset-chip i {
  font-style: normal;
  color: var(--steel);
  padding: 0 2px;
  line-height: 1;
}
.preset-chip i:hover { color: var(--c-rest); }

/* custom interval builder */
.builder { display: flex; flex-direction: column; gap: 8px; }
.builder-list { display: flex; flex-direction: column; gap: 6px; }
.builder-row {
  display: grid;
  grid-template-columns: 72px 76px 1fr 36px 36px 36px;
  gap: 6px;
  align-items: stretch;
}
.builder-row button, .builder-row input {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 8px;
  text-align: center;
  outline: none;
}
.builder-row input:focus { border-color: var(--electric); }
.builder-row .b-kind { letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.builder-row.kind-work .b-kind { color: var(--electric); border-color: color-mix(in srgb, var(--c-work) 45%, transparent); }
.builder-row.kind-rest .b-kind { color: var(--c-rest); border-color: color-mix(in srgb, var(--c-rest) 45%, transparent); }
.builder-row .b-label { text-align: left; color: var(--steel); }
.builder-row .b-label::placeholder { color: rgba(140,160,184,0.4); }
.builder-row .b-move, .builder-row .b-del { color: var(--steel); cursor: pointer; }
.builder-row .b-move:hover:not(:disabled), .builder-row .b-del:hover:not(:disabled) { color: var(--paper); border-color: var(--electric); }
.builder-row .b-del:hover:not(:disabled) { color: var(--c-rest); border-color: var(--c-rest); }
.builder-row button:disabled { opacity: 0.3; cursor: default; }
.builder-add {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px dashed var(--line);
  padding: 9px 16px;
}
.builder-add:hover { color: var(--electric); border-color: var(--electric); }
@media (max-width: 560px) {
  .builder-row { grid-template-columns: 60px 64px 1fr 30px 30px 30px; }
}

/* modal: the only confirm/prompt this app uses */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 9, 13, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal-box h3 {
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  word-break: break-word;
}
.modal-box input {
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
}
.modal-box input:focus { border-color: var(--electric); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.modal-actions button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line);
  color: var(--steel);
}
.modal-actions button:hover { color: var(--paper); border-color: var(--electric); }
.modal-actions #modalOk { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.modal-actions #modalOk.danger { background: transparent; border-color: var(--c-rest); color: var(--c-rest); }
.modal-actions #modalOk.danger:hover { background: color-mix(in srgb, var(--c-rest) 18%, transparent); color: var(--paper); }

/* last-3-seconds urgency: digit pulse + screen edge glow */
.run { transition: box-shadow 0.3s ease; }
.run.is-urgent { box-shadow: inset 0 0 14vmin -4vmin color-mix(in srgb, var(--phase) 80%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .run.is-urgent .run-time { animation: urgent-pulse 1s ease-in-out infinite; }
}
@keyframes urgent-pulse {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.035); }
  40% { transform: scale(1); }
}

/* phase-change flash */
.run-flash {
  position: absolute;
  inset: 0;
  background: var(--phase);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.run-flash.go { animation: flash-fade 0.45s ease-out; }
@keyframes flash-fade {
  0% { opacity: 0.3; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .run-flash.go { animation: none; }
}


/* done summary card */
.run-summary {
  font-family: var(--mono);
  font-size: clamp(13px, min(1.8vw, 2.2vh), 22px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--c-done) 55%, transparent);
  background: color-mix(in srgb, var(--c-done) 12%, transparent);
  padding: clamp(10px, 1.6vh, 16px) clamp(18px, 3vw, 34px);
  margin-top: clamp(4px, 1vh, 10px);
}

/* idle screensaver: logo + wall clock */
.run.is-saver .run-logo {
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1 !important;
  pointer-events: none;
}
.run.is-saver .run-logo img { width: clamp(220px, 26vw, 380px); }
.run.is-saver .run-phase,
.run.is-saver .run-controls,
.run.is-saver .run-toggle,
.run.is-saver .run-paused { display: none; }