/* DEEP clock faces (see clocks.js). Colors come from the palette tokens. */
:root { --lit: var(--accent); }
:root[data-theme="light"] { --lit: var(--accent-ink); }

.clock-face { display: none; align-items: center; justify-content: center; max-width: 100%; margin-top: 6px; }
.clock-face[data-style] { display: flex; }
/* The real, accessible time stays in #timerDisplay; hide it visually when a face is drawn. */
html[data-clock="segment"] .timer-display, html[data-clock="flip"] .timer-display { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes colonBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.28; } }

/* LED segments */
.clock-face[data-style="segment"] { --ch: clamp(92px, 25vw, 140px); gap: calc(var(--ch) * 0.13); height: var(--ch); }
.seg-digit { height: var(--ch); aspect-ratio: 60 / 108; transform: skewX(-7deg); overflow: visible; }
.seg-colon { height: var(--ch); aspect-ratio: 20 / 108; transform: skewX(-7deg); overflow: visible; }
.seg { fill: var(--text); opacity: 0.07; transition: opacity 0.2s ease; }
.seg.on { fill: var(--lit); opacity: 1; filter: drop-shadow(0 0 5px var(--accent-glow)); }
.seg-colon circle { fill: var(--lit); filter: drop-shadow(0 0 5px var(--accent-glow)); }
.app.running .seg-colon circle { animation: colonBlink 1s steps(1) infinite; }

/* Flip clock */
.clock-face[data-style="flip"] { --ch: clamp(84px, 22vw, 150px); gap: calc(var(--ch) * 0.07); height: var(--ch); perspective: 900px; }
.flip-digit { position: relative; height: var(--ch); width: calc(var(--ch) * 0.7); font-family: 'DM Sans', system-ui, sans-serif; }
.fl { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background-color: var(--surface-3); backface-visibility: hidden; }
.fl-top, .fl-flap-top { top: 0; border-radius: 9px 9px 2px 2px; box-shadow: inset 0 -10px 14px -10px rgba(0,0,0,0.35); }
.fl-bottom, .fl-flap-bottom { bottom: 0; border-radius: 2px 2px 9px 9px; box-shadow: inset 0 10px 14px -10px rgba(0,0,0,0.3); }
.fl .g { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--ch) * 0.68); font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.fl-top .g, .fl-flap-top .g { top: 0; }
.fl-bottom .g, .fl-flap-bottom .g { top: -100%; }
.flip-digit::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--bg); z-index: 6; }
.fl-flap-top, .fl-flap-bottom { display: none; z-index: 4; }
.flipping .fl-flap-top, .flipping .fl-flap-bottom { display: block; }
.fl-flap-top { transform-origin: 50% 100%; }
.fl-flap-bottom { transform-origin: 50% 0; transform: rotateX(90deg); }
.flipping .fl-flap-top { animation: flapTop 0.3s ease-in forwards; }
.flipping .fl-flap-bottom { animation: flapBottom 0.3s 0.3s ease-out forwards; }
@keyframes flapTop { to { transform: rotateX(-90deg); } }
@keyframes flapBottom { to { transform: rotateX(0deg); } }
.flip-colon { display: flex; flex-direction: column; gap: calc(var(--ch) * 0.16); justify-content: center; padding: 0 calc(var(--ch) * 0.03); }
.flip-colon i { width: calc(var(--ch) * 0.07); height: calc(var(--ch) * 0.07); border-radius: 50%; background: var(--lit); }
.app.running .flip-colon i { animation: colonBlink 1s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) { .app.running .seg-colon circle, .app.running .flip-colon i { animation: none; } }

/* Big screens: the faces grow with the classic clock. */
@media (min-width: 1200px) {
  .clock-face[data-style="segment"] { --ch: clamp(140px, 11vw, 210px); }
  .clock-face[data-style="flip"] { --ch: clamp(140px, 10vw, 180px); }
}