/* ============================================================
   Sweep — focus clock
   Warm, calm, one-thing-at-a-time. Dark by default; "paper" light.
   ============================================================ */

:root {
  --bg:        #17130f;   /* warm charcoal, not cold black */
  --bg-vignette: #0d0a07;
  --face-hi:   #221c16;
  --face-lo:   #18130e;
  --bezel:     #2c241b;
  --tick:      #6b5d4c;
  --tick-major:#b9a585;
  --numeral:   #cdbb9c;
  --hand:      #e9dcc4;   /* warm metal */
  --hand-hour: #d8c6a6;
  --second:    #e0913a;   /* warm amber — the hero in motion */
  --cap:       #e9dcc4;
  --cap-dot:   #17130f;

  --sand:      #d8a84a;
  --sand-warn: #e8932e;   /* amber = warning (running low) */
  --sand-urgent:#d8453a;  /* red = final stretch */
  --glass:     #b9c4cb;
  --frame:     #5a4630;
  --post:      #6b5436;

  --text:      #e9dcc4;
  --muted:     #9c8b72;
  --btn:       #261e16;
  --btn-hi:    #33291d;
  --btn-line:  #463a2a;
}

body[data-theme="light"] {
  --bg:        #efe7d8;   /* warm cream paper */
  --bg-vignette:#e3d8c4;
  --face-hi:   #fbf6ec;
  --face-lo:   #efe5d3;
  --bezel:     #d8c8ad;
  --tick:      #b3a283;
  --tick-major:#6f5d44;
  --numeral:   #4a3d2c;
  --hand:      #3a3122;
  --hand-hour: #4a3d2c;
  --second:    #c9692a;
  --cap:       #3a3122;
  --cap-dot:   #fbf6ec;

  --sand:      #c98a2c;
  --sand-warn: #d4791a;
  --sand-urgent:#c43a2f;
  --glass:     #7d8a93;
  --frame:     #8a6a44;
  --post:      #9c7a4e;

  --text:      #3a3122;
  --muted:     #897959;
  --btn:       #e6dac3;
  --btn-hi:    #ddcdaf;
  --btn-line:  #cbb892;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: radial-gradient(120% 120% at 50% 38%, var(--bg) 0%, var(--bg-vignette) 100%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Inter, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  transition: background .5s ease, color .5s ease;
}

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* keep content clear of the iOS status bar and bottom home indicator */
  padding: max(4vmin, env(safe-area-inset-top)) max(4vmin, env(safe-area-inset-right))
           max(4vmin, env(safe-area-inset-bottom)) max(4vmin, env(safe-area-inset-left));
}

.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vmin;
}
.view[hidden] { display: none; }

/* ---------------- clock ---------------- */

.dial {
  width: min(86vmin, 560px);
  height: auto;
  display: block;
}

.bezel { fill: var(--bezel); }
.face  { stroke: rgba(0,0,0,.25); stroke-width: 1; }

.tick       { stroke: var(--tick); stroke-width: 2; stroke-linecap: round; }
.tick.major { stroke: var(--tick-major); stroke-width: 4; }

.numeral {
  fill: var(--numeral);
  font-size: 26px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}

.hand rect { fill: var(--hand); }
.hand.hour rect { fill: var(--hand-hour); }
.hand.second rect { fill: var(--second); }
.hand.second .tail { fill: var(--second); }
.cap     { fill: var(--cap); }
.cap-dot { fill: var(--cap-dot); }

/* JS sets rotation via the transform attribute; keep the pivot centered */
.hand { transform-box: view-box; transform-origin: 200px 200px; }

/* ---------------- hourglass ---------------- */

.glass { width: min(74vmin, 460px); height: auto; display: block; }

.frame { fill: var(--frame); }
.post  { fill: var(--post); }
.shell {
  fill: rgba(255,255,255,.015);
  stroke: var(--glass);
  stroke-width: 3;
  stroke-opacity: .55;
}
.sheen { pointer-events: none; }
.sand   { fill: var(--sand); transition: fill .6s ease; }
.stream { stroke: var(--sand); stroke-width: 2.4; opacity: 0; }
#sand-fall circle { fill: var(--sand); }

body[data-phase="warn"]   .sand,
body[data-phase="warn"]   #sand-fall circle { fill: var(--sand-warn); }
body[data-phase="warn"]   .stream { stroke: var(--sand-warn); }
body[data-phase="urgent"] .sand,
body[data-phase="urgent"] #sand-fall circle { fill: var(--sand-urgent); }
body[data-phase="urgent"] .stream { stroke: var(--sand-urgent); }

body[data-phase="urgent"] .glass { animation: pulse 1s ease-in-out infinite; }
body[data-running="yes"] .stream { opacity: .9; }

@keyframes pulse {
  0%,100% { transform: scale(1);    filter: none; }
  50%     { transform: scale(1.015); filter: drop-shadow(0 0 14px var(--sand-urgent)); }
}

#readout {
  font-size: clamp(34px, 7vmin, 60px);
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
body[data-phase="urgent"] #readout { color: var(--sand-urgent); }
body[data-done="yes"] #readout { color: var(--sand); }

/* presets / controls */
#presets, #timer-controls, #custom-pad {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
#presets[hidden], #timer-controls[hidden], #custom-pad[hidden] { display: none; }

button {
  font: inherit;
  color: var(--text);
  background: var(--btn);
  border: 1px solid var(--btn-line);
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease, border-color .15s ease;
}
button:hover  { background: var(--btn-hi); }
button:active { transform: translateY(1px); }

.preset { min-width: 56px; font-weight: 600; font-variant-numeric: tabular-nums; }
.preset.custom { font-size: 20px; line-height: 1; padding: 8px 14px; }

.step { font-size: 22px; line-height: 1; min-width: 46px; }
#cust-val { font-size: 30px; font-weight: 600; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); margin-left: -2px; }
.start { font-weight: 600; }

#btn-playpause { min-width: 96px; font-weight: 600; }

/* ---------------- chrome ---------------- */

#chrome {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: flex;
  gap: 8px;
  opacity: 1;
  transition: opacity .6s ease;
  z-index: 6;
}
body.idle #chrome { opacity: 0; pointer-events: none; }

.chrome-btn {
  width: 44px; height: 44px;
  padding: 0;
  display: grid; place-items: center;
  font-size: 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--btn) 70%, transparent);
  backdrop-filter: blur(4px);
}
.ic-glass { display: none; }
body[data-mode="hourglass"] .ic-clock { display: none; }
body[data-mode="hourglass"] .ic-glass { display: inline; }

/* settings popover */
#settings {
  position: fixed;
  top: calc(66px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  background: var(--btn);
  border: 1px solid var(--btn-line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 210px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  z-index: 5;
}
#settings[hidden] { display: none; }
#settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
#settings select {
  font: inherit; color: var(--text);
  background: var(--btn-hi); border: 1px solid var(--btn-line);
  border-radius: 8px; padding: 5px 8px;
}
#settings .hint { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* done flash */
#flash {
  position: fixed; inset: 0;
  background: var(--sand);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
#flash.go { animation: flash 1.1s ease-out; }
@keyframes flash {
  0%   { opacity: 0; }
  12%  { opacity: .42; }
  100% { opacity: 0; }
}

/* floating PiP window: shrink chrome, fill the small window */
body.pip #chrome { display: none; }
body.pip #stage { padding: 2vmin; }
body.pip .dial  { width: min(92vmin, 92vh); }
body.pip .glass { width: min(64vmin, 64vh); }

@media (prefers-reduced-motion: reduce) {
  body[data-phase="urgent"] .glass { animation: none; }
  #flash.go { animation-duration: .01s; }
}