.clocks-page.section-inner { width: min(100% - 48px, 1180px); max-width: 1180px; }
body#page .clocks-page.site-main { padding-top: 2.5rem; }
.clocks-page [hidden] { display: none !important; }
.clocks-back { color: var(--color-text-secondary); font-size: .9rem; text-decoration: none; }
.clocks-back:hover { color: var(--color-accent); text-decoration: underline; }
.eyebrow { display: block; margin: 0 0 .45rem; color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.clocks-intro { margin: 1.1rem 0 1.7rem; }
.clocks-intro h1 { margin: 0 0 .6rem; font-size: clamp(2.7rem, 5vw, 3.9rem); font-weight: 500; line-height: 1.08; }
.clocks-intro p { max-width: 850px; margin: 0; color: var(--color-text-secondary); font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; }
.decision-head h2 { margin: 0 0 .55rem; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; }
.decision-head > p:last-child { max-width: 850px; margin: 0; color: var(--color-text-secondary); font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.55; }
.clock-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 1.6rem; }
.clock-summary > div { border-top: 2px solid var(--color-border); padding-top: .55rem; }
.clock-summary > div.allowance { border-top-color: #a96952; }
.clock-summary span { display: block; color: var(--color-text-secondary); font-size: .78rem; line-height: 1.35; }
.clock-summary strong { display: block; margin-top: .12rem; font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 500; font-variant-numeric: tabular-nums; }
.timeline { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1.2rem 0 1rem; }
.timeline-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; }
.timeline-head h3 { margin: 0; font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; }
.timeline-head span { color: var(--color-text-secondary); font-size: .79rem; }
.timeline-row-label { display: flex; justify-content: space-between; gap: .5rem; margin: 1.1rem 0 .35rem; font-weight: 700; font-size: .88rem; }
.timeline-row-label span { color: var(--color-text-secondary); font-weight: 400; }
.timeline-grid { display: grid; gap: 3px; }
.time-cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-width: 0; border-radius: 2px; background: #e7e5dd; }
.time-cell small { font-size: .67rem; font-weight: 700; line-height: 1.2; }
.timeline-evidence .time-cell { height: 3.25rem; padding: .3rem .1rem; color: var(--color-text-secondary); }
.timeline-evidence .time-cell b { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; }
.timeline-evidence .signal-positive { background: #dce8dc; color: var(--color-accent); }
.timeline-evidence .signal-negative { background: #f0e8dc; color: #8a6037; }
.timeline-opportunity .time-cell { height: 1.85rem; justify-content: center; color: var(--color-text-secondary); }
.timeline-opportunity .open { background: #dce8dc; }
.timeline-opportunity .closed { background: #e7e5dd; }
.timeline-grid .current { outline: 2px solid var(--color-accent); outline-offset: -2px; z-index: 1; }
.timeline-grid .last-start { box-shadow: inset 0 -4px 0 #a96952; }
.timeline-grid .deadline { border-right: 3px solid #8b4938; }
.timeline-build { margin-top: .3rem; }
.timeline-build .time-cell { height: .85rem; background: transparent; }
.timeline-build .build-required { background: #607661; }
.timeline-build .build-overrun { background: repeating-linear-gradient(135deg, #a96952, #a96952 3px, #f0d5c7 3px, #f0d5c7 6px); }
.timeline-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; margin-top: .75rem; color: var(--color-text-secondary); font-size: .73rem; }
.timeline-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.timeline-legend i { width: .75rem; height: .75rem; display: inline-block; border-radius: 2px; }
.legend-current { border: 2px solid var(--color-accent); }
.legend-last { border-bottom: 3px solid #a96952; }
.legend-deadline { border-right: 3px solid #8b4938; }
.legend-build { background: #607661; }
.timeline-meaning { margin: .8rem 0 0; color: var(--color-text-secondary); font-size: .85rem; font-weight: 600; }
.decision-controls { max-width: 1000px; margin: 1.5rem 0 0; }
.decision-controls h3 { margin: 0 0 .65rem; font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; }
.replay-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.replay-actions button { min-height: 5rem; border: 1px solid var(--color-control-border); border-radius: 5px; padding: .8rem 1rem; background: var(--color-surface); text-align: left; }
.replay-actions button:hover:not(:disabled), .replay-actions button:focus-visible { border-color: var(--color-accent); background: #e9efe7; }
.replay-actions button:disabled { opacity: .44; cursor: not-allowed; }
.replay-actions strong, .replay-actions span { display: block; }
.replay-actions span { margin-top: .2rem; color: var(--color-text-secondary); font-size: .81rem; }
.action-warning { margin: .7rem 0 0; color: #8b4938; font-size: .85rem; font-weight: 700; }
.action-consequence { margin: 1rem 0 .75rem; border-left: 4px solid var(--color-accent); padding: .85rem 1.05rem; background: #e9efe7; }
.action-consequence:has(.eyebrow:first-child) { min-height: 0; }
.action-consequence .eyebrow { margin-bottom: .2rem; }
.consequence-main { margin: 0; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.7vw, 1.6rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.consequence-delta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .65rem; }
.consequence-delta span { border-top: 1px solid #b6c8b4; padding-top: .3rem; color: var(--color-text); font-size: .8rem; font-weight: 700; }
.consequence-note { margin: .6rem 0 0; color: var(--color-text-secondary); font-size: .83rem; line-height: 1.4; }
.expected-details, .clocks-method, .clocks-explore { color: var(--color-text-secondary); font-size: .83rem; line-height: 1.5; }
.expected-details { margin: 1rem 0; }
.expected-details summary, .clocks-method summary, .clocks-explore > summary, .replay-controls summary { color: var(--color-accent); font-weight: 700; cursor: pointer; }
.expected-details p { margin: .4rem 0; }
.small-note { color: var(--color-text-secondary); font-size: .8rem; line-height: 1.45; }
.decision-after { margin: 1.5rem 0; }
.replay-reset { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.clocks-primary { border: 1px solid var(--color-accent); border-radius: 4px; padding: .65rem .95rem; background: var(--color-accent); color: #fff; font-size: .86rem; font-weight: 700; }
.clocks-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.text-action { border: 0; padding: .35rem 0; background: transparent; color: var(--color-accent); font-size: .86rem; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: .16em; }
.run-comparison { margin: 1rem 0; border-left: 3px solid #9f8161; padding: .7rem 1rem; background: #f0e8dc; font-size: .85rem; }
.clocks-conclusion { max-width: 850px; margin-top: 1.8rem; border-top: 2px solid var(--color-accent); padding-top: 1.1rem; }
.clocks-conclusion h3 { margin: 0 0 .6rem; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; }
.clocks-conclusion p { margin: .5rem 0; }
.clocks-conclusion a { display: inline-block; margin-top: .35rem; font-weight: 700; }
.clocks-explore, .clocks-method { border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 2rem; }
.clocks-explore > summary { font-size: 1rem; }
.clocks-explore > p { max-width: 800px; }
.future-sampling, .batch-comparison { max-width: 900px; margin: 1.5rem 0; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.future-sampling h3, .batch-comparison h3 { margin: 0 0 .4rem; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 500; }
.future-sampling > p, .batch-comparison > p { margin: .4rem 0 1rem; }
.future-fan { margin: 1.3rem 0 1rem; }
.future-decision { width: max-content; max-width: 100%; margin: auto; border: 1px solid var(--color-accent); border-radius: 4px; padding: .45rem 1.1rem; background: #e9efe7; color: var(--color-accent); font-weight: 700; text-align: center; }
.future-decision span { display: block; color: var(--color-text-secondary); font-size: .73rem; font-weight: 400; }
.future-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .8rem; }
.future-outcome { min-height: 5rem; border: 1px solid var(--color-border); border-radius: 5px; padding: .8rem; background: #f5f6f0; }
.future-outcome--loss { background: #f5ece3; }
.future-outcome strong, .future-outcome > span { display: block; }
.future-marks { display: flex; flex-wrap: wrap; gap: .25rem; min-height: .65rem; margin-top: .55rem; }
.future-marks > span:not(.mark-overflow) { width: .65rem; height: .65rem; border-radius: 50%; background: var(--color-accent); }
.future-outcome--loss .future-marks > span:not(.mark-overflow) { background: #a96952; }
.sample-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.sample-feedback { font-weight: 700; font-variant-numeric: tabular-nums; }
.batch-comparison [data-batch-results] { margin: 1rem 0; padding: .3rem 0; }
.batch-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--color-text-secondary); font-size: .7rem; }
.batch-key span::before { display: inline-block; width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 2px; background: var(--color-accent); content: ''; }
.batch-key span:nth-child(2)::before { background: #c9a968; }
.batch-key span:nth-child(3)::before { background: #a96952; }
.distribution-row + .distribution-row { margin-top: 1rem; }
.distribution-row > strong { display: block; margin-bottom: .3rem; }
.distribution-bar { display: flex; height: .8rem; overflow: hidden; border-radius: 2px; background: #e7e5dd; }
.distribution-gain { background: var(--color-accent); }
.distribution-small-loss { background: #c9a968; }
.distribution-large-loss { background: #a96952; }
.distribution-row p { margin: .3rem 0 0; color: var(--color-text-secondary); font-size: .74rem; }
.distribution-row p span { display: block; color: var(--color-text); font-weight: 700; }
.replay-controls { max-width: 900px; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.replay-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.replay-settings fieldset { border: 0; margin: .8rem 0 0; padding: 0; }
.replay-settings legend { margin-bottom: .4rem; font-weight: 700; }
.setting-pair { display: flex; flex-wrap: wrap; gap: .4rem; }
.setting-pair button { border: 1px solid var(--color-control-border); border-radius: 4px; padding: .5rem .65rem; background: var(--color-surface); font-size: .82rem; }
.setting-pair button[aria-pressed="true"] { border-color: var(--color-accent); background: #e9efe7; color: var(--color-accent); font-weight: 700; }
.clocks-method p { max-width: 850px; }
@media (max-width: 700px) {
  .clocks-page.section-inner { width: min(100% - 32px, 1180px); }
  .clock-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
  .timeline-row-label span { font-size: .72rem; }
  .timeline-grid { gap: 1px; }
  .timeline-evidence .time-cell { height: 2.8rem; }
  .timeline-evidence .time-cell b { font-size: 1.25rem; }
  .timeline-opportunity .time-cell { height: 1.35rem; }
  .timeline-opportunity small { font-size: .52rem; }
  .replay-actions { gap: .35rem; }
  .replay-actions button { min-height: 3.4rem; padding: .5rem; text-align: center; }
  .replay-actions span { display: none; }
  .replay-settings { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .timeline-evidence .time-cell { height: 2.5rem; }
  .timeline-evidence .time-cell small { font-size: .55rem; }
  .timeline-evidence .time-cell b { font-size: 1.1rem; }
  .timeline-legend { gap: .3rem .65rem; }
}