/* The time pages' own dress (L-028), loaded by them alone: the other pages carry
   the shared sheet and nothing of this. Loaded after styles.css, so its rules win
   as appended rules do.

   The hero is one sentence and a second that carries the caveats (a skipped hour,
   a repeated one), so three lines are reserved for the h1 and three for the live
   line: on the pair pages both are rewritten when the hand lets go, and nothing
   under them may move when that happens. */
/* THE ARC KEEPS ITS AMPLITUDE. sky.js lays the sun's path so it never climbs into the answer
   block — right — but its fallback clamps the wave to `horizonY - 24`, and on a hero whose
   answer runs long that floor is what you get: a flat line pretending to be a day. Measured at
   1280 on 13 Sept, the arc stood at its 24px floor on four of eight heroes for a first-time
   visitor and two of eight for a returning one. The answer is absolutely positioned, so height
   given to the section goes to the arc and moves no type: 600px gave 24px of arc here, 800px
   gives 87px. The first-visit frame is a paragraph that goes away, so it buys its own room
   rather than leaving the figure flattened for the one visit that has to judge it. */
.sky-section.time { height: 58dvh; min-height: 645px; max-height: 720px; }
.sky-section.time:has(.first-frame:not([hidden])) { min-height: 750px; max-height: 800px; }
.sky-section.time .answer { max-width: 780px; }
.sky-section.time .answer h1 { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.18; min-height: 2.36em; font-variant-numeric: tabular-nums; }
.sky-section.time .answer-place { min-height: 4.4em; }
.sky-section.time #sky-chips { display: none; }
.sky-section.time .tm-share { min-width: 120px; justify-content: center; }
@media (max-width: 640px) { .sky-section.time .answer h1 { font-size: 20px; min-height: 3.54em; } .sky-section.time { min-height: 600px; } }
.tm-draw svg { display: block; width: 100%; height: auto; touch-action: pan-y; pointer-events: none; }
.tm-draw .tm-hit, .tm-draw .tm-handle { pointer-events: all; cursor: ew-resize; }
.tm-draw .tm-handle { touch-action: none; }
.tm-draw text { font-family: var(--round); font-size: 12.5px; font-weight: 700; fill: var(--ink-2); letter-spacing: 0.02em; paint-order: stroke; stroke: #05080f; stroke-width: 3px; stroke-linejoin: round; }
.tm-draw text.tm-bright { fill: var(--ink); }
.tm-draw text.tm-dim { fill: rgba(244,247,252,.62); }
.tm-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 10px; }
.tm-scrub { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; }
.tm-scrub input[type="range"] { flex: 1; min-width: 0; }
.tm-scrub .chip-dress { min-width: 178px; justify-content: space-between; font-variant-numeric: tabular-nums; cursor: pointer; }
.tm-scrub output { font-weight: 800; }
.tm-tools input[type="date"] { font: inherit; }
@media (max-width: 640px) { .tm-scrub .chip-dress { min-width: 156px; } }
/* the year's swings of a pair's difference, and the Pacific year's two changes */
.tm-table { margin-top: clamp(28px, 4vh, 44px); }
.tm-table table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-table th, .tm-table td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.tm-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tm-table th:first-child, .tm-table td:first-child { text-align: left; padding-left: 2px; color: var(--ink); }