/*
 * The Clock's dial (src/web/same-time-clock.ts; Julien, 15 October 2026), drawn on the Stream's top and on the Clock page: the app
 * icon's dots language. Twenty-four waiting dots in the mid plum on a faint cream hairline, lit dots for your people's shots in their
 * own colours with a wet cream highlight, yours in cream, the Same Time window as an amber arc that glows while it is open, a cream
 * hand from the person in the centre. Nothing loops: the glow is still, the hand only moves when the time or the scrub moves it.
 * The Stream's top is the small dial and one line beside it; the whole of it opens the Clock.
 */
.pk-stk-svg { display: block; overflow: visible; }
.pk-stk-hour { opacity: .78; }
.pk-stk-window { opacity: .5; }
.pk-stk-window.is-open { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 180, 63, .75)) drop-shadow(0 0 10px rgba(255, 120, 40, .45)); }
.pk-stk-dot { transition: opacity 200ms ease; }
.pk-stk-dot-paint, .pk-stk-dot-wet { transform-box: fill-box; transform-origin: center; transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }
.pk-stk-dot--me .pk-stk-dot-paint { stroke: #1a1120; stroke-width: 1.4; }
.pk-stk-hand { transform-box: view-box; transform-origin: 0 0; }

/* The Stream's top: one row inside the 20 px gutter, the dial and the one line. */
.pk-st-top { margin: 4px 0 14px; color: var(--pk-ink, #f5f2f1); }
.pk-st-top-link { display: flex; align-items: center; gap: 14px; min-height: 64px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pk-st-top-dial { flex: none; width: 64px; height: 64px; }
.pk-st-top-dial .pk-stk-svg { width: 64px; height: 64px; }
.pk-st-top-line { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.pk-st-top-link.is-open .pk-st-top-line { font-weight: 700; }
.pk-st-top-link:focus-visible { outline: none; }
.pk-st-top-link:focus-visible .pk-st-top-line { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .pk-st-top-link:hover .pk-st-top-line { text-decoration: underline; text-underline-offset: 3px; }
}
html[data-look="matinee"] .pk-stk-centre, html[data-look="matinee"] .pk-stk-hand line { fill: #1a1418; stroke: #1a1418; }