/* Clocks scale with their container (cqi = 1% of the clock's width), so one component fits any size. */

.clock {
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--ink);
    text-shadow: var(--glow);
}

.clock svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(var(--glow, none));
}

/* ---------- Analog ---------- */

.clock--analog .face { fill: var(--face); stroke: var(--line); stroke-width: 1.5; }
.clock--analog .tick { stroke: var(--ink-muted); stroke-width: 1; stroke-linecap: round; }
.clock--analog .tick--hour { stroke: var(--ink); stroke-width: 2.5; }
.clock--analog .numeral {
    fill: var(--ink);
    font-family: var(--font-display);
    font-size: 13px;
    text-anchor: middle;
    dominant-baseline: central;
}
.clock--analog .pin { fill: var(--hand); }

.hand { transform-box: view-box; transform-origin: 0 0; }
.hand line { stroke: var(--hand); stroke-linecap: round; }
.hand polygon, .hand circle { fill: var(--hand); }
.hand--hour { transform: rotate(calc(var(--hour, 0) * 30deg)); }
.hand--minute { transform: rotate(calc(var(--min, 0) * 6deg)); }
.hand--second { transform: rotate(calc(var(--sec, 0) * 6deg)); }
.hand--second line { stroke: var(--second); }
.hand--second circle { fill: var(--second); }

.clock--classic .hand--hour line { stroke-width: 6; }
.clock--classic .hand--minute line { stroke-width: 4; }
.clock--classic .hand--second line { stroke-width: 1.5; }
.clock--classic .pin { fill: var(--second); }

.clock--station .face { stroke: var(--ink); stroke-width: 3; }
.clock--station .tick { stroke: var(--ink); stroke-width: 2; stroke-linecap: butt; }
.clock--station .bar { stroke: var(--ink); stroke-width: 6.5; }
.clock--station .hand--second line { stroke-width: 2.4; }

.clock--minimal .face { stroke: none; fill: var(--surface-2); }
.clock--minimal .dot { fill: var(--ink-muted); }
.clock--minimal .dot--major { fill: var(--ink); }
.clock--minimal .hand--hour line { stroke-width: 5; }
.clock--minimal .hand--minute line { stroke-width: 3; }
.clock--minimal .hand--second circle { fill: var(--accent); }
.clock--minimal .pin { fill: var(--surface-2); stroke: var(--hand); stroke-width: 2.5; }

/* ---------- Digital ---------- */

.clock--digital { font-variant-numeric: tabular-nums; }

.digital { display: flex; flex-direction: column; align-items: center; gap: 4cqi; }
.digital__time {
    display: flex;
    align-items: flex-start;
    font-family: var(--font-display);
    font-size: 25cqi;
    font-weight: 200;
    letter-spacing: -0.03em;
    line-height: 1;
}
.digital__side { display: flex; flex-direction: column; margin: 1.8cqi 0 0 1.8cqi; gap: 1cqi; }
.digital__seconds { font-size: 9cqi; font-weight: 400; color: var(--accent); letter-spacing: 0; }
.digital__ampm { font-size: 5.5cqi; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.05em; }
.digital__date { font-size: 5.5cqi; color: var(--ink-muted); letter-spacing: 0.02em; }

.stacked {
    display: grid;
    justify-items: start;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    line-height: 0.88;
    width: 64cqi;
}
.stacked__hours { font-size: 36cqi; font-weight: 700; letter-spacing: -0.04em; }
.stacked__minutes { font-size: 36cqi; font-weight: 200; letter-spacing: -0.04em; color: var(--accent); }
.stacked__day {
    margin-top: 5cqi;
    font-size: 5cqi;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.2;
    display: flex;
    gap: 2cqi;
}
.stacked__progress {
    margin-top: 3cqi;
    height: max(2px, 0.8cqi);
    width: calc(var(--sec, 0) / 60 * 100%);
    background: var(--accent);
    border-radius: 99px;
}

.terminal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3cqi;
    padding: 9cqi;
    font-family: var(--font-mono);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4cqi;
}
.terminal__line { font-size: 5.5cqi; color: var(--ink-muted); }
.terminal__time { font-size: 12.5cqi; display: flex; align-items: center; gap: 1.5cqi; white-space: nowrap; }
.terminal__ampm { font-size: 6cqi; color: var(--ink-muted); }
.terminal__cursor {
    width: 0.55em;
    height: 1em;
    background: var(--accent);
    box-shadow: var(--glow);
    animation: shani-blink 1.1s steps(1) infinite;
}

@keyframes shani-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .terminal__cursor { animation: none; }
}