/* =========================================================================
   Clockadashi — the whole wall is the Ekadashi reminder:
   black most days, a slow purple drift as one approaches, red (#830300)
   the day before, saffron (#ed6d19) on the day itself.
   The clock is the one bold thing; everything else stays quiet.
   Kitchen timers use a cool blue, so they never read as a calendar alert.
   ========================================================================= */

/* Google Sans Flex (SIL Open Font License, fonts/OFL.txt), cut down to Latin and
   the axes used here: weight 300-800, width 74-100%, roundness 0-30. */
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/GoogleSansFlex-clockadashi.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 74% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.45);
  --bar-track: rgba(255, 255, 255, 0.18);
  --bar-fill: #ffffff;
  --surface: rgba(255, 255, 255, 0.09);
  --surface-press: rgba(255, 255, 255, 0.18);
  --timer: #1a6dff;
  --timer-deep: #0a2f78;
  --edge: max(14px, 2.4vw);
  --font: "Google Sans Flex", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Big numbers (clock, timers): full width at the heaviest weight, square-cornered,
   with digits of equal width so nothing shifts as the time changes. */
#time, .num {
  font-weight: 800;
  font-stretch: 100%;
  font-variation-settings: "ROND" 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  background: #000;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Alert states (set by app.js). The purple approach gradient is applied inline. */
body.s-tomorrow {
  background-color: #830300;
  --surface: rgba(0, 0, 0, 0.2);
  --surface-press: rgba(0, 0, 0, 0.32);
  --bar-track: rgba(0, 0, 0, 0.3);
}
body.s-today {
  background-color: #ed6d19;
  --ink-2: rgba(255, 255, 255, 0.94);  /* saffron is light: dimmed white would wash out */
  --surface: rgba(0, 0, 0, 0.16);
  --surface-press: rgba(0, 0, 0, 0.28);
  --bar-track: rgba(0, 0, 0, 0.2);
}

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ibtn {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.ibtn svg { width: 28px; height: 28px; fill: currentColor; }
.ibtn:active { background: var(--surface-press); }

/* A ring around play/pause while a song is still loading. */
.ibtn.is-buffering::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px; bottom: -3px; left: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--ink);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.noscript {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

/* =========================================================================
   Clock screen: music + timers / events / clock / countdowns, as four grid
   rows. app.js sizes the clock to fill whatever the clock row is given.
   ========================================================================= */
#screen {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);  /* never wider than the screen */
  padding: max(10px, 1.8vh) var(--edge) max(12px, 2.6vh);
}

/* Top row: the kitchen timers and calendar top-left, the music player top-right,
   any status (offline, previewing, saving songs) between them. */
#head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);  /* music gives way to running timers */
  grid-template-areas: "tools status dock";
  grid-column-gap: max(12px, 1.4vw);
  align-items: start;
  margin-bottom: max(6px, 1vh);
}
#dock { grid-area: dock; }
#status { grid-area: status; }
#tools { grid-area: tools; display: flex; align-items: flex-start; gap: max(10px, 1vw); }

#top {
  text-align: center;
  font-weight: 800;
  font-variation-settings: "ROND" 30;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.ev + .ev { margin-top: 0.1em; }
.ev-minor { font-size: 0.56em; font-weight: 600; color: var(--ink-2); }
body.s-today .ev-minor { color: var(--ink); }

#clockArea {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#clockBlock { text-align: center; font-size: 200px; }
#time {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.2em 0.08em;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The minute ring round HH:MM (shaped and filled by app.js): a faint full
   track, and the elapsed part as a light grey line with a soft glow made of
   three wide, fading strokes (cheaper than a blur on the panel). Kept quieter
   than the countdown bars, which matter more. */
#minuteRing { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
#minuteRing path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mr-track { stroke: rgba(255, 255, 255, 0.06); stroke-width: var(--mr-w, 8px); }
.mr-line, .mr-glow {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.mr-line { stroke: rgba(255, 255, 255, 0.4); stroke-width: var(--mr-w, 8px); }
.mr-glow-1 { stroke: rgba(255, 255, 255, 0.09); stroke-width: calc(var(--mr-w, 8px) * 1.9); }
.mr-glow-2 { stroke: rgba(255, 255, 255, 0.045); stroke-width: calc(var(--mr-w, 8px) * 3.3); }
.mr-glow-3 { stroke: rgba(255, 255, 255, 0.02); stroke-width: calc(var(--mr-w, 8px) * 5.2); }
#minuteRing.mr-snap .mr-line, #minuteRing.mr-snap .mr-glow { transition: none; }
#date {
  font-size: 0.17em;
  font-weight: 460;
  line-height: 1.25;
  color: var(--ink-2);
  margin-top: 0.12em;
  white-space: nowrap;
}

/* ---- Countdown bars, full width: the big one first, any later ones smaller -- */
#bars { min-width: 0; }
#bars:not(:empty) { padding-top: max(6px, 1vh); }
.cd + .cd { margin-top: max(10px, 1.8vh); }
.cd-label {
  font-size: clamp(16px, 2.6vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.s-tomorrow .cd:first-child .cd-label { font-weight: 700; }
.cd-track {
  height: clamp(12px, 2.6vh, 30px);
  border-radius: 999px;
  background: var(--bar-track);
  overflow: hidden;
}
.cd-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--bar-fill);
  transition: width 0.6s ease-out;
}
.cd-more .cd-label { font-size: clamp(13px, 1.8vw, 30px); color: var(--ink-2); }
.cd-more .cd-track { height: clamp(8px, 1.4vh, 16px); }

/* ---- Mini player, top-right: always visible, tap to open the full player - */
#mini {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 clamp(270px, 30vw, 440px);  /* narrower when running timers need the top row */
  min-width: 210px;
  height: clamp(64px, 9vh, 84px);
  padding-right: 6px;
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
#miniOpen {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0 0 clamp(8px, 1.1vh, 12px);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
#miniOpen:active { background: var(--surface-press); }
.mini-art {
  position: relative;
  flex: none;
  width: clamp(44px, 6.4vh, 60px);
  height: clamp(44px, 6.4vh, 60px);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.mini-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-ph {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-ph svg { width: 50%; height: 50%; fill: var(--ink-3); }
.mini-meta { flex: 1; min-width: 0; padding: 0 8px 0 12px; }
.mini-title, .mini-sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-title { font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; }
.mini-sub { font-size: clamp(12px, 1.15vw, 15px); color: var(--ink-2); margin-top: 2px; }
.mini-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.mini-progress i { display: block; height: 100%; width: 0; background: var(--ink); }

/* ---- Intercom: a round mic to the right of the mini player -------------- */
#dock { display: flex; align-items: center; }
#miniTalk {
  width: clamp(52px, 7.5vh, 68px);
  height: clamp(52px, 7.5vh, 68px);
  margin-left: max(8px, 1vw);
  background: var(--surface);
  touch-action: none;
  -webkit-touch-callout: none;
}
#miniTalk svg { width: 55%; height: 55%; }
#miniTalk.is-recording {
  background: #d93025;
  animation: talk-pulse 1.2s ease-in-out infinite;
}
#miniTalk.is-playing { background: var(--surface-press); }

/* ---- Kitchen timers, top-left -----------------------------------------------
   Idle: a "Timer" pill. Running: the next timer to finish in digits readable
   across the room (with its progress ring), plus a card to its right with the
   two after it. The top row grows and the clock shrinks to make room.
   Ringing turns the corner blue. */
#timerDock { display: flex; align-items: flex-start; gap: max(10px, 1vw); }
#timerFab, #timerNext {
  flex: none;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
#timerFab:active, #timerNext:active { background: var(--surface-press); }
#timerFab {
  display: flex;
  align-items: center;
  height: clamp(64px, 9vh, 84px);
  padding: 0 clamp(18px, 2.6vh, 26px) 0 clamp(14px, 2.2vh, 20px);
  border-radius: 999px;
}
.tf-head { display: flex; align-items: center; }
.tf-icon { display: flex; }
.tf-icon svg { width: clamp(30px, 4.4vh, 38px); height: clamp(30px, 4.4vh, 38px); fill: currentColor; }
.tf-label { margin-left: 10px; font-size: clamp(20px, 3.3vh, 28px); font-weight: 700; white-space: nowrap; }
body.timers-on #timerFab {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  padding: clamp(10px, 1.6vh, 16px) clamp(18px, 2.2vw, 30px) clamp(12px, 1.8vh, 18px);
  border-radius: 26px;
}
body.timers-on .tf-label { margin-left: 8px; font-size: clamp(16px, 2.7vh, 22px); color: var(--ink-2); }
.tf-ring, .tt-ring { flex: none; transform: rotate(-90deg); }
.tf-ring { width: clamp(24px, 3.6vh, 32px); height: clamp(24px, 3.6vh, 32px); }
.tf-track { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 4; }
.tf-arc, .tt-arc {
  fill: none;
  stroke: #8fb6ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  transition: stroke-dashoffset 0.9s linear;
}
.tf-time { font-size: clamp(64px, 16vh, 150px); line-height: 0.95; white-space: nowrap; }
#timerFab.is-paused .tf-time { color: var(--ink-2); }
#timerFab.is-ringing { background: var(--timer); }
#timerFab.is-ringing .tf-label, #timerFab.is-ringing .tf-arc { color: #fff; stroke: #fff; }

#timerNext {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 12px);
  padding: clamp(10px, 1.6vh, 16px) clamp(16px, 1.8vw, 24px);
  border-radius: 22px;
}
.tn-row { display: flex; flex-direction: column; }
.tn-name { font-size: clamp(14px, 2.2vh, 18px); color: var(--ink-2); font-weight: 600; }
.tn-time { font-size: clamp(34px, 7.5vh, 68px); line-height: 1; }
.tn-more .tn-name { display: none; }
.tn-more .tn-time { font-size: clamp(15px, 2.4vh, 20px); font-weight: 700; color: var(--ink-2); }

/* "Let's BAKE!": the first tap on the timer each session */
.bake-fx { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.bake-title {
  position: absolute;
  top: 42%;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(56px, 15vh, 150px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 0 #f48fb1, 0 8px 30px rgba(0, 0, 0, 0.55);
  animation: bake-pop 2.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes bake-pop {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  18% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  30% { transform: scale(1) rotate(0); }
  78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
.bake-item {
  position: absolute;
  top: -120px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  animation-name: bake-fall;
  animation-timing-function: cubic-bezier(0.35, 0, 0.75, 1);
  animation-fill-mode: both;
}
@keyframes bake-fall {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(calc(100vh + 160px)) rotate(var(--spin)); opacity: 0; }
}

@keyframes talk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(217, 48, 37, 0); }
}

/* ---- Top row: status in the middle, full-screen toggle, calendar --------- */
#status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: clamp(64px, 9vh, 84px);  /* level with the music player */
  font-size: clamp(14px, 2.2vh, 18px);
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}
#statusText { overflow: hidden; text-overflow: ellipsis; }
#statusIcon { display: flex; flex: none; margin-right: 8px; }
#statusIcon svg { width: 20px; height: 20px; fill: currentColor; }
#fsBtn { margin-top: calc((clamp(64px, 9vh, 84px) - 48px) / 2); opacity: 0.35; }
#calBtn {
  width: clamp(64px, 9vh, 84px);
  height: clamp(64px, 9vh, 84px);
  background: var(--surface);
}
#calBtn svg { width: 46%; height: 46%; }
#calBtn:active { background: var(--surface-press); }
#calBtn.is-on { background: #fff; color: #000; }

/* Previewing a date: a day back and a day forward, at the screen's sides. */
.day-arrow {
  position: fixed;
  top: 50%;
  z-index: 5;
  width: clamp(56px, 9vh, 76px);
  height: clamp(56px, 9vh, 76px);
  margin-top: calc(clamp(56px, 9vh, 76px) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.day-arrow:active { background: rgba(255, 255, 255, 0.3); }
.day-arrow svg { width: 60%; height: 60%; fill: currentColor; }
#dayPrev { left: max(6px, 0.8vw); }
#dayNext { right: max(6px, 0.8vw); }

@media (orientation: portrait) {
  #head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tools dock" "status status"; grid-row-gap: 1vh; }
  #dock { min-width: 0; }
  #status { height: 28px; }
  #mini { width: auto; flex: 1; min-width: 0; }
  .cd-label { font-size: clamp(16px, 4vw, 40px); }
}

/* =========================================================================
   Full player, modelled on YouTube Music's now-playing screen: artwork-tinted
   background, big artwork, seek bar, transport, volume, and the queue.
   ========================================================================= */
#fp {
  --tint: hsl(28, 40%, 24%);
  --ink-2: rgba(255, 255, 255, 0.72);  /* always dark, whatever the day's colour */
  --ink-3: rgba(255, 255, 255, 0.45);
  --surface-press: rgba(255, 255, 255, 0.18);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s linear 0.3s;
}
#fp.open {
  visibility: visible;
  transform: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s;
}
.fp-tint {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, var(--tint) 0%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
}

.fp-head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 max(8px, 1.6vw);
}
.fp-headline {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 16px;
  color: var(--ink-2);
}
#fpHeadline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.fp-time {
  flex: none;
  min-width: 48px;
  padding-right: 6px;
  text-align: right;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fp-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-column-gap: 4vw;
  padding: 0 4vw max(14px, 3vh);
}
.fp-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fp-art-box {
  flex: 1;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.4vh;
}
.fp-art {
  display: block;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.fp-art-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.fp-art-ph svg { width: 36%; height: 36%; fill: var(--ink-3); }

.fp-meta { flex: none; }
.fp-title, .fp-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-title { font-size: clamp(20px, 2.3vw, 30px); font-weight: 700; line-height: 1.25; }
.fp-sub { font-size: clamp(15px, 1.5vw, 19px); color: var(--ink-2); margin-top: 2px; }

.fp-seek { flex: none; margin-top: 1.4vh; }
.fp-times {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.fp-controls {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 460px;
  margin: 0.8vh auto 0;
}
.fp-controls .ibtn { width: 56px; height: 56px; }
.fp-controls .ibtn svg { width: 32px; height: 32px; }
.fp-controls .ibtn.is-off { color: var(--ink-3); }
.fp-controls .fp-play { width: 72px; height: 72px; background: #fff; color: #000; }
.fp-controls .fp-play svg { width: 40px; height: 40px; }
.fp-controls .fp-play:active { background: rgba(255, 255, 255, 0.82); }
.fp-play.is-buffering::after { border-top-color: #fff; }

.fp-vol {
  flex: none;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 460px;
  margin: 1.2vh auto 0;
  color: var(--ink-2);
}
.fp-vol-icon { display: flex; flex: none; }
.fp-vol-icon svg { width: 22px; height: 22px; fill: currentColor; }
.fp-vol .range { flex: 1; margin: 0 12px; }

/* Seek and volume sliders: white fill up to --p, like YouTube Music. */
.range {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff 0, #fff var(--p), rgba(255, 255, 255, 0.24) var(--p), rgba(255, 255, 255, 0.24) 100%);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }

/* ---- Queue ---------------------------------------------------------------- */
.fp-side {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fp-tabs {
  flex: none;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fp-tab {
  position: relative;
  height: 48px;
  margin: 0 22px 0 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.fp-tab.is-active { color: #fff; }
.fp-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: #fff;
}
#fpSaved { margin-left: auto; padding-left: 12px; font-size: 13px; color: var(--ink-2); text-align: right; }
.fp-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Search ---------------------------------------------------------------- */
.search-bar {
  flex: none;
  display: flex;
  align-items: center;
  height: 48px;
  margin: 12px 0 10px;
  padding: 0 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
}
.search-bar:focus-within { background: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.search-icon { display: flex; flex: none; margin-right: 10px; color: var(--ink-2); }
.search-icon svg { width: 22px; height: 22px; fill: currentColor; }
#searchInput {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 17px;
  -webkit-user-select: text;
  user-select: text;
}
#searchInput::placeholder { color: var(--ink-3); }
.search-kinds { flex: none; display: flex; margin-bottom: 6px; }
.chip {
  height: 36px;
  margin-right: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.chip.is-active { background: #fff; color: #000; }
.search-note {
  flex: none;
  padding: 8px 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

.fp-queue {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 6px;
}
.q-row {
  display: flex;
  align-items: center;
  border-radius: 8px;
}
.q-row.is-current { background: rgba(255, 255, 255, 0.1); }
.q-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 68px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.q-main:active { background: rgba(255, 255, 255, 0.1); }
.q-row.is-unavailable .q-main { opacity: 0.42; }
.q-remove { margin-right: 4px; color: var(--ink-2); }
.q-remove svg { width: 22px; height: 22px; }
.q-remove.is-confirm {
  width: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.q-art {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.q-art > svg { width: 50%; height: 50%; fill: var(--ink-3); }
.q-eq {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.q-eq svg { width: 26px; height: 26px; fill: #fff; }
.q-row.is-current .q-eq { display: flex; }
#fp:not(.is-playing) .q-eq svg { opacity: 0.6; }
.q-meta { flex: 1; min-width: 0; padding: 0 12px 0 14px; }
.q-title, .q-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-title { font-size: 16px; font-weight: 600; }
.q-sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.q-state {
  flex: none;
  display: flex;
  align-items: center;
  margin-right: 12px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.q-state svg { width: 18px; height: 18px; fill: currentColor; margin-right: 3px; }
.q-dur {
  flex: none;
  min-width: 44px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

@media (orientation: portrait) {
  .fp-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-row-gap: 2vh;
  }
  .fp-art-box { flex: none; height: 34vh; }
}

/* =========================================================================
   Kitchen timers: big targets for floury hands, readable across the kitchen.
   ========================================================================= */
#tp {
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.45);
  --surface-press: rgba(255, 255, 255, 0.18);
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0b2550 0%, #000 72%);
  color: #fff;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s linear 0.3s;
}
#tp.open {
  visibility: visible;
  transform: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s;
}
#tp .fp-headline { color: #fff; font-size: 18px; font-weight: 600; }
.tp-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-column-gap: 4vw;
  padding: 0 4vw max(14px, 3vh);
}
.tp-new {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tp-stepper { display: flex; align-items: center; }
.tp-step {
  flex: none;
  width: clamp(72px, 12vh, 108px);
  height: clamp(72px, 12vh, 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  touch-action: none;
}
.tp-step svg { width: 46%; height: 46%; fill: #fff; }
.tp-step:active { background: rgba(255, 255, 255, 0.26); }
.tp-step:disabled { opacity: 0.3; }
.tp-set {
  min-width: 2.5em;
  margin: 0 clamp(8px, 1.6vw, 28px);
  text-align: center;
  font-size: clamp(72px, min(10vw, 19vh), 168px);
  line-height: 1;
}
.tp-set.is-long { font-size: clamp(56px, min(7.4vw, 14vh), 124px); }  /* 1:30:00 needs more room */
.tp-start {
  margin-top: clamp(24px, 6vh, 56px);
  height: clamp(64px, 10vh, 84px);
  padding: 0 52px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 700;
  cursor: pointer;
}
.tp-start:active { background: rgba(255, 255, 255, 0.82); }
.tp-side { min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.tp-heading { flex: none; margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.tp-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tp-empty { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

.tt-row {
  display: flex;
  align-items: center;
  padding: 12px 10px 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}
.tt-row + .tt-row { margin-top: 10px; }
.tt-row.is-ringing { background: var(--timer); }
.tt-row.is-ringing .tt-arc { stroke: #fff; }
.tt-badge { position: relative; flex: none; width: 56px; height: 56px; }
.tt-ring { width: 100%; height: 100%; }
.tt-n {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
}
.tt-text { flex: 1; min-width: 0; padding: 0 12px 0 16px; }
.tt-left { display: block; font-size: clamp(34px, 4.2vw, 48px); line-height: 1.05; }
.tt-row.is-paused .tt-left { color: var(--ink-2); }
.tt-sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-row.is-ringing .tt-sub { color: rgba(255, 255, 255, 0.9); }
.tt-actions { flex: none; display: flex; align-items: center; }
.tt-btn { margin-left: 6px; }
.tt-pill {
  height: 48px;
  min-width: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tt-pill:active { background: rgba(255, 255, 255, 0.26); }
.tt-pill:disabled { opacity: 0.3; }
.tt-row.is-ringing .tt-pill { background: #fff; color: var(--timer-deep); }
.tt-btn.is-confirm {
  width: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* ---- Timer finished: the whole screen pulses blue until Stop ---------------- */
#alarm {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--timer-deep);
  color: #fff;
  text-align: center;
}
.alarm-pulse {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--timer);
  animation: alarm-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes alarm-pulse { from { opacity: 0.15; } to { opacity: 1; } }
.alarm-body { position: relative; padding: 24px; }
.alarm-icon { display: inline-flex; }
.alarm-icon svg {
  width: clamp(64px, 12vh, 112px);
  height: clamp(64px, 12vh, 112px);
  fill: #fff;
  animation: alarm-shake 0.45s ease-in-out infinite;
}
@keyframes alarm-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}
#alarmTitle {
  margin: 14px 0 8px;
  font-size: clamp(44px, 8vw, 108px);
  font-weight: 800;
  font-variation-settings: "ROND" 30;
  line-height: 1.05;
}
#alarmSub { margin: 0 0 clamp(28px, 7vh, 64px); font-size: clamp(18px, 2.5vw, 30px); color: rgba(255, 255, 255, 0.9); }
.alarm-actions { display: flex; align-items: center; justify-content: center; }
#alarmAdd {
  height: clamp(64px, 10vh, 88px);
  margin-right: 20px;
  padding: 0 34px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  cursor: pointer;
}
#alarmStop {
  height: clamp(84px, 14vh, 116px);
  min-width: clamp(220px, 30vw, 380px);
  padding: 0 52px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--timer-deep);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 800;
  cursor: pointer;
}

@media (orientation: portrait) {
  .tp-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-row-gap: 4vh;
  }
  .tp-side { justify-content: flex-start; }
}

/* =========================================================================
   The month (calendar button): Gujarati month names and Vikram Samvat above,
   Ekadashis marked with a fruit (a fasting day), countdown days in saffron,
   other events as a dot. Tapping a day previews it on the clock screen.
   ========================================================================= */
#cs {
  --ink-2: rgba(255, 255, 255, 0.72);
  --surface-press: rgba(255, 255, 255, 0.18);
  --saffron: #ed6d19;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #3a1a06 0%, #000 70%);
  color: #fff;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s linear 0.3s;
}
#cs.open {
  visibility: visible;
  transform: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0s;
}
.cs-nav { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.cs-title { min-width: 0; padding: 0 14px; text-align: center; }
#csMonth { font-size: 22px; font-weight: 700; white-space: nowrap; }
#csLunar { margin-top: 2px; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-today {
  flex: none;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cs-today:active { background: rgba(255, 255, 255, 0.82); }

.cs-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-column-gap: 3vw;
  padding: 4px 3vw max(14px, 2.6vh);
}
.cs-month { min-height: 0; display: flex; flex-direction: column; }
.cs-week, .cs-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-column-gap: 6px; }
.cs-week { flex: none; padding-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: center; }
.cs-grid { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); grid-row-gap: 6px; }
.cs-day {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  overflow: hidden;
}
.cs-day:active { background: var(--surface-press); }
.cs-day.is-blank { visibility: hidden; }
.cs-day.is-past { opacity: 0.45; }
.cs-n { position: absolute; top: 6px; left: 9px; font-size: clamp(16px, 2.6vh, 22px); font-weight: 700; line-height: 1; }
.cs-fruit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -42%);
  font-size: clamp(26px, 5.4vh, 44px);
  line-height: 1;
}
.cs-moon { position: absolute; top: 5px; right: 7px; font-size: clamp(12px, 2vh, 16px); line-height: 1; }
.cs-lm {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  font-size: clamp(10px, 1.6vh, 13px);
  font-weight: 700;
  color: #ffb27a;
  text-align: center;
  white-space: nowrap;
}
.cs-dot { position: absolute; left: 50%; bottom: 9px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; }
.cs-lm + .cs-dot { display: none; }
.cs-day.is-bar { background: rgba(237, 109, 25, 0.3); border-color: var(--saffron); }
.cs-day.is-today { box-shadow: inset 0 0 0 2px #fff; }
.cs-day.is-preview { background: #fff; color: #000; border-color: #fff; }
.cs-day.is-preview .cs-lm { color: #a3480b; }
.cs-day.is-preview .cs-dot { background: #000; }

.cs-side { min-height: 0; display: flex; flex-direction: column; }
.cs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cl-row {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.cl-row:active { background: var(--surface-press); }
.cl-row.is-preview { background: rgba(255, 255, 255, 0.14); }
.cl-date { flex: none; width: 4.6em; font-size: 15px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cl-icon { flex: none; width: 1.7em; font-size: 17px; }
.cl-names { flex: 1; min-width: 0; font-size: 17px; line-height: 1.35; }
.cl-names b { font-weight: 700; color: #ffb27a; }
.cs-note, .cs-legend { flex: none; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cs-note:empty { display: none; }
.cs-key { display: inline-block; margin: 0 6px 0 14px; vertical-align: middle; }
.cs-key-fruit { margin-left: 0; font-size: 16px; }
.cs-key-bar { width: 16px; height: 16px; border: 2px solid var(--saffron); border-radius: 5px; background: rgba(237, 109, 25, 0.3); }
.cs-key-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }

@media (orientation: portrait) {
  .cs-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); grid-row-gap: 2vh; }
}

/* ---- Diagnostics (long-press the clock) ------------------------------------ */
#diag {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 16px var(--edge);
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
}
.diag-head { display: flex; align-items: center; }
.diag-head h2 { flex: 1; margin: 0; font-size: 20px; }
.diag-head button {
  margin-left: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
#diagText {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 12px 0 0;
  font: 13px/1.45 ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

@media (prefers-reduced-motion: reduce) {
  #fp, #fp.open, #tp, #tp.open, #cs, #cs.open { transition: none; }
  .mr-line, .mr-glow { transition: none; }
  .alarm-pulse { animation: none; opacity: 0.7; }
  .alarm-icon svg { animation: none; }
  .tf-arc, .tt-arc { transition: none; }
  .cd-fill { transition: none; }
  .ibtn.is-buffering::after { animation: none; border-color: var(--ink-3); }
  #miniTalk.is-recording { animation: none; }
  .bake-title { animation-duration: 1.4s; }
}