.session-clock-root { display: grid; gap: var(--s4); }
.session-clock-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }
.session-clock-root .session-clock-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s4); }
.session-clock-root .session-clock-time { flex: 1 1 14rem; }
.session-clock-root .session-clock-time .w-readout-note { font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
/* status: plain text (fixed height so the board does not jump while dragging); a red marker while markets overlap */
.session-clock-root .session-clock-status { margin: 0; min-height: 3em; font: 400 var(--fs-ui)/1.45 var(--font-ui); color: var(--ink-2); }
.session-clock-root .session-clock-status[data-overlap="1"] { color: var(--ink); font-weight: 700; }
.session-clock-root .session-clock-status[data-overlap="1"]::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--s2); background: var(--brand); vertical-align: 0.05em; }
.session-clock-root .session-clock-board { position: relative; display: grid; grid-template-columns: clamp(4.75rem, 20%, 9rem) minmax(0, 1fr); column-gap: var(--s2); row-gap: 6px; align-items: center; }
.session-clock-root .session-clock-rail { height: 44px; }
.session-clock-root .session-clock-name { display: grid; min-width: 0; line-height: 1.2; font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
.session-clock-root .session-clock-name b { font-weight: 700; color: var(--ink-2); }
.session-clock-root .session-clock-state { font-size: var(--fs-small); }
.session-clock-root .session-clock-name.is-open b, .session-clock-root .session-clock-name.is-open .session-clock-state { color: var(--ink); font-weight: 700; }
/* each market: a thin square bar on a recessed track; ink while open */
.session-clock-root .session-clock-track { position: relative; height: 24px; background: var(--mist); }
.session-clock-root .session-clock-bar { position: absolute; top: 8px; bottom: 8px; background: var(--line-strong); }
.session-clock-root .session-clock-track.is-open .session-clock-bar { top: 6px; bottom: 6px; background: var(--ink); }
.session-clock-root .session-clock-utc { font-size: var(--fs-small); color: var(--ink-3); }
.session-clock-root .session-clock-axis { position: relative; height: 1.4rem; font: 400 var(--fs-small)/1.4rem var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.session-clock-root .session-clock-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.session-clock-root .session-clock-lane { position: relative; align-self: stretch; cursor: pointer; }
.session-clock-root .session-clock-band { position: absolute; top: 44px; bottom: 0; border-inline: 1px dashed var(--brand); background: var(--brand-wash); mix-blend-mode: multiply; pointer-events: none; }
.session-clock-root .session-clock-line { position: absolute; top: 22px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.session-clock-root .session-clock-handle { position: absolute; top: 0; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: var(--brand); border: 2px solid var(--paper); outline: 1px solid var(--brand); cursor: grab; touch-action: none; }
.session-clock-root .session-clock-handle::after { content: ""; position: absolute; inset: 12px 15px; border-inline: 2px solid var(--on-ink); }
.session-clock-root .session-clock-handle.is-dragging { cursor: grabbing; transform: scale(1.1); }
.session-clock-root .session-clock-handle:focus-visible { outline: none; box-shadow: var(--focus); }