/* /css/chapters/events-and-clocks.css: Ch 3 (package C03): prose bits, plate clocks, and the see-vs-reckon widget
   (.ec-*). Everything is nested under [data-chapter="events-and-clocks"]; colors come only from tokens. */
[data-chapter="events-and-clocks"] {
  /* prose; the shared :where() rhythm loses to base.css `p { margin: 0 }` (docs/requests/events-and-clocks.md #3) */
  & :where(.beat, .callout, .reconcile, .recap, .deep-dive, .ex-prompt, .ex-model, details, .code-task) > :is(p, ul, ol, aside, pre) + :is(p, ul, ol, pre) { margin-top: var(--flow, 1em); }
  & .ec-from { display: inline-block; margin-left: .35em; font: .72rem var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
  & .ec-tagline { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-block: 1px solid var(--rule); font: italic 1.3rem/1.35 var(--font-serif); text-align: center; color: var(--c-lab); }
  & .ec-steps { margin: var(--s-2) 0 0; padding-left: 1.4em; }
  & .ec-steps li + li { margin-top: var(--s-2); }
  /* orientation card, Try-it numbers, Done pills: the Ch 0 patterns (S8 asks to share them) */
  & .ec-orient { margin: var(--s-6) 0 0; max-width: 40rem; }
  & .ec-orient ol { margin: var(--s-3) 0 0; padding-left: 1.5em; }
  & .ec-orient li + li { margin-top: var(--s-2); }
  & .ec-orient > :is(p, ol) + :is(p, ol) { margin-top: var(--s-3); }
  & .ec-step-no { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
  & [data-goal] .try-done { margin-left: auto; font-size: .72rem; }
  & [data-goal].is-done { border-left-color: var(--c-ok); }
  & .ec-free { color: var(--ink-muted); font-size: .95rem; }
  & .ec-tier { font: 600 1rem var(--font-sans); margin-top: var(--s-6); }
  /* Sagredo's one-way-light objection sits in the main column, right before the echo check (as Ch 0's .pl-inline) */
  & .sagredo.ec-inline { float: none; width: auto; margin: var(--s-4) 0; padding: var(--s-1) 0 var(--s-1) var(--s-3); font-size: 1rem; }
  /* "What just happened?" waits for the town lab's verdict (js/chapters/events-and-clocks.js) */
  & .ec-gated > :not(h2, .ec-gate) { display: none; }
  & .ec-gate { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--rule); border-radius: var(--r-m); color: var(--ink-muted); }
  & .ec-gate .btn { margin-top: var(--s-2); }
  & .ec-p-big { font-size: 16px; }

  /* lab 1: the clock card under W4's drawing (W4's own read line is hidden by the wrapper) */
  & .ec-card { margin: var(--s-3) 0; padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-m); font: .85rem/1.4 var(--font-sans); }
  & .ec-card.is-pulse { outline: 2px solid var(--c-light); }
  & .ec-card-legend { margin: 0 0 var(--s-2); font-size: .78rem; color: var(--ink-muted); }
  & .ec-card-main { display: flex; flex-direction: column; gap: var(--s-3); }
  & .ec-card-text p { margin: 0; }
  & .ec-card-place { font-weight: 600; }
  & .ec-card-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .5em; margin: 2px 0 4px !important; }
  & .ec-card-num { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
  & .ec-card-num.is-run { color: var(--c-lab); }
  & .ec-card-unit { color: var(--ink-muted); }
  & .ec-chip { padding: 1px .6em; border: 1px solid var(--rule); border-radius: 99px; font-size: .75rem; color: var(--ink-muted); }
  & .ec-chip.is-run { border-color: var(--c-lab); color: var(--c-lab); }
  & .ec-card-preset { color: var(--ink-muted); }
  & .ec-steps-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  & .ec-step { display: inline-flex; align-items: center; gap: 4px; }
  & .ec-step-ax { min-width: 1.2em; font-weight: 600; text-align: right; }
  & .ec-step .btn { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; font-size: 1.1rem; }
  & .ec-fallback-table { font: .8rem var(--font-sans); margin-top: var(--s-3); }
  & .ec-fallback-table :is(th, td) { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--rule); }

  /* plates and map: a lattice clock face */
  & :is(.ec-p-clock, .ec-lface) { fill: var(--surface); stroke: var(--c-lab); stroke-width: 1.4; }
  & .ec-p-glow { fill: var(--tint-light); stroke: none; }
  & .ec-p-earth { fill: var(--surface); stroke: none; }

  /* clock-lattice lab (W4 + the clock card): reserve its mounted stage height (no shift on mount). Measured live
     (2026-10-06): 929 at 320, 877 at 330, 796-856 at 360-480, 802-830 at 520-699, 846 at 700, 881 at 760, 894 at >=840. */
  & #lab-events-and-clocks-1 { --lab-reserve: 790px; }
  @media (max-width: 329px) { & #lab-events-and-clocks-1 { --lab-reserve: 920px; } }
  @media (min-width: 481px) { & #lab-events-and-clocks-1 { --lab-reserve: 800px; } }
  @media (min-width: 700px) { & #lab-events-and-clocks-1 { --lab-reserve: 840px; } }
  @media (min-width: 760px) { & #lab-events-and-clocks-1 { --lab-reserve: 875px; } }
  @media (min-width: 840px) { & #lab-events-and-clocks-1 { --lab-reserve: 890px; } }

  /* see-vs-reckon widget */
  & #lab-events-and-clocks-2 .lab-stage { min-height: 520px; }
  @media (min-width: 900px) { & #lab-events-and-clocks-2 .lab-stage { min-height: 600px; } }
  & .ec-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  @container (min-width: 760px) { & .ec-main { grid-template-columns: minmax(0, 1.45fr) minmax(15.5rem, 1fr); } }
  & :is(.ec-left, .ec-side) { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
  & .ec-map { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; font-family: var(--font-sans); }
  & .ec-paper { fill: var(--surface); stroke: var(--rule); }
  & .ec-water { fill: var(--surface-2); stroke: var(--rule); }
  & :is(.ec-river-bank, .ec-river, .ec-road) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  & .ec-river-bank { stroke: var(--rule); stroke-width: 10; }
  & .ec-river { stroke: var(--surface-2); stroke-width: 7; }
  & .ec-road { stroke: var(--grid-minor); stroke-width: 7; }
  & .ec-place { fill: var(--ink-muted); font: italic calc(14px * var(--ec-u, 1)) var(--font-serif); opacity: .8; }
  & .ec-rod { fill: none; stroke: var(--rule); stroke-width: .75; }
  & .ec-lface { stroke-width: 1; vector-effect: non-scaling-stroke; }
  & .ec-lhand { fill: none; stroke: var(--c-lab); stroke-linecap: round; vector-effect: non-scaling-stroke; }
  & .ec-lclock { transition: opacity var(--t-ui) var(--ease); }
  & .is-see .ec-lclock { opacity: .35; }
  & .ec-tick { fill: var(--ink-muted); font-size: calc(11.5px * var(--ec-u, 1)); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
  & .is-narrow .ec-fw-name { display: none; }
  & .ec-axis-short { display: none; }
  @container (max-width: 560px) { & .ec-axis-long { display: none; } & .ec-axis-short { display: inline; } }
  & :is(.ec-ring, .ec-ring-wake, .ec-leader) { fill: none; stroke: var(--c-light); vector-effect: non-scaling-stroke; }
  & .ec-ring { stroke-width: 1.75; }
  & .ec-ring-wake { opacity: .3; }
  & .ec-leader { stroke-width: 1.25; stroke-dasharray: 3 3; }
  & :is(.ec-leader-text, .ec-obs-log, .ec-fw-label, .ec-fw-name, .ec-obs-name) { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
  & :is(.ec-leader-text, .ec-obs-log) { fill: var(--c-light-text); font-size: 12px; font-weight: 600; }
  & .ec-leader-text { text-anchor: middle; }
  & .ec-hit { fill: transparent; }
  & .ec-fw { cursor: pointer; outline: none; }
  & .ec-pad { fill: var(--surface); stroke: var(--ink-muted); stroke-width: 1.5; }
  & .ec-spark { color: var(--c-light); visibility: hidden; transform-box: fill-box; transform-origin: center; }
  & .is-burst .ec-spark { visibility: visible; }
  & .is-burst .ec-pad { visibility: hidden; }
  & .is-fresh .ec-spark { animation: ec-burst 380ms var(--ease) both; }
  & .ec-fw-label { fill: var(--ink); font-size: 14px; font-weight: 700; }
  & .ec-fw-name { fill: var(--ink-muted); font-size: 12px; }
  & .is-see .ec-spark { opacity: .55; }
  & .is-see .ec-fw:not(.was-picked) .ec-hit { stroke: var(--c-light); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
  & .ec-dart { fill: none; stroke: var(--c-light); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  & .ec-fw:is(.is-selected, :hover) .ec-hit { fill: var(--tint-light); stroke: var(--c-light); }
  & :is(.ec-fw, .ec-obs):focus-visible .ec-hit { stroke: var(--focus); stroke-width: 3px; vector-effect: non-scaling-stroke; }
  & .ec-stamp-box { fill: var(--surface); stroke: var(--c-lab); stroke-width: 1.25; }
  & .ec-stamp-text { fill: var(--c-lab); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
  & .ec-obs { cursor: grab; touch-action: none; outline: none; }
  & .ec-obs.is-dragging { cursor: grabbing; }
  & .ec-obs.is-dragging .ec-hit { fill: var(--tint-lab); }
  & :is(.ec-body, .ec-cap, .ec-hand) { fill: none; stroke: var(--c-lab); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  & .ec-hand { stroke-width: 1.6; }
  & .ec-head { fill: var(--surface); stroke: var(--c-lab); stroke-width: 2; transition: fill var(--t-ui) var(--ease); }
  & .ec-foot { fill: var(--c-lab); }
  & .is-flash .ec-head { fill: var(--c-light); }
  & .ec-obs-name { fill: var(--c-lab); font-size: 13px; font-weight: 700; }

  /* side panel, controls, task */
  & .ec-viewt { display: flex; width: 100%; }
  & .ec-viewt .ui-toggle { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
  & .ec-viewt .ui-toggle-option { justify-content: center; text-align: center; line-height: 1.2; padding: 4px .6em; }
  & .ec-locknote { margin-top: calc(-1 * var(--s-2)); font-size: .78rem; }
  & .ec-clockrow .readout { font-size: .95rem; }
  & .ec-watchnote { margin-top: calc(-1 * var(--s-2)); }
  & .ec-table { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
  & .ec-table caption { caption-side: top; text-align: left; font-size: .72rem; color: var(--ink-muted); padding-bottom: 4px; }
  & .ec-table :is(th, td) { padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
  & .ec-table thead th { font-size: .7rem; color: var(--ink-muted); }
  & .ec-table thead :is(.ec-c-lin, .ec-c-sam) { color: var(--c-lab); }
  & .ec-table tbody th { white-space: nowrap; }
  & .ec-table tr.is-selected { background: var(--tint-light); }
  & .ec-seen { color: var(--c-light-text); font-weight: 600; }
  & .ec-reck { color: var(--c-lab); font-weight: 600; }
  & .ec-wait { color: var(--ink-muted); font-style: italic; }
  & .ec-orders { display: flex; flex-direction: column; gap: 4px; }
  & .ec-order { margin: 0; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5em; align-items: baseline; }
  & .ec-order-who { font-weight: 600; min-width: 6.5em; }
  & .ec-order-ids { font-family: var(--font-mono); font-weight: 700; }
  & .is-see .ec-order-ids { color: var(--c-light-text); }
  & .is-reckon .ec-order-ids { color: var(--c-lab); }
  & .ec-order .ec-wait { color: var(--ink-muted); }
  & .ec-order-extra { font-size: .75rem; color: var(--ink-muted); }
  & .ec-live { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-2); font-size: .82rem; }
  & .ec-live > p { margin: 0; }
  & .ec-hint { color: var(--ink-muted); }
  & .ec-away { display: block; font-size: .7rem; font-weight: 400; color: var(--ink-muted); }
  & .ec-controls .ui-slider { flex: 1 1 100%; }
  & .ec-task { border-top: 1px dashed var(--rule); padding-top: var(--s-3); }
  & .ec-task-q { margin: 0 0 var(--s-2); font-weight: 600; font-size: .85rem; }
  & .ec-picks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: flex-end; }
  & .ec-pick { display: inline-flex; flex-direction: column; gap: 2px; font-size: .72rem; color: var(--ink-muted); }
  & .ec-burst-in { min-height: 36px; width: 6.5rem; padding: 4px 8px; font: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-s); }
  & .ec-select { min-height: 36px; min-width: 8.5rem; padding: 4px 8px; font: inherit; font-size: .85rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-s); }
  @media (prefers-reduced-motion: reduce) { & .is-fresh .ec-spark { animation: none; } & :is(.ec-head, .ec-lclock) { transition: none; } }
}
@keyframes ec-burst { from { transform: scale(.2); opacity: .2; } 60% { transform: scale(1.25); opacity: 1; } to { transform: scale(1); } }