.time-options-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; margin:0 0 16px; scroll-margin-top:24px; }
.time-options-nav a { color:var(--paper); font-size:13px; line-height:1.4; padding:12px 0; border-bottom:2px solid transparent; }
.time-options-nav a[aria-current] { color:var(--lime); border-color:var(--lime); }
.time-replay { display:grid; place-items:center; width:44px; height:44px; margin-left:auto; background:none; border:1px solid #617059; border-radius:4px; color:var(--paper); cursor:pointer; }
.time-replay svg { width:18px; height:18px; }
.time-options-nav :focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.time-option { height:328px; display:flex; flex-direction:column; color:#334e67; }
.time-option h3 { font:500 24px/1.25 Manrope,sans-serif; color:#243f5a; }
.time-option .story-note { margin-top:8px; }
.time-takeaway { border-left:3px solid #d1b778; padding-left:10px; font-size:12px; line-height:1.5; }
.time-graph { margin-block:auto; }
.graph-label { font-size:13px; color:#38532b; font-weight:500; margin-bottom:5px; }
.time-option .time-graph svg { display:block; width:100%; height:168px; overflow:visible; }
.graph-grid { fill:none; stroke:#c9d8e4; stroke-width:1; }
.graph-baseline { fill:none; stroke:#6e91b7; stroke-width:2; }
.graph-gain { fill:none; stroke:#809f69; stroke-width:5; stroke-linecap:butt; stroke-linejoin:miter; stroke-dasharray:1; stroke-dashoffset:0; }
.graph-start { fill:#6e91b7; }
.graph-end { fill:#809f69; stroke:#e8f0f7; stroke-width:2; }
.graph-axis { display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:11px; }
.graph-axis span:last-child { text-align:right; }
.open-day { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-block:auto; }
.day-column > p,.repeat-comparison > p { font-size:12px; margin-bottom:7px; font-weight:500; }
.calendar-day { display:grid; height:165px; gap:4px; }
.calendar-before { grid-template-rows:1fr 1fr 1fr 1fr; }
.calendar-after { grid-template-rows:1fr 1fr 2fr; }
.calendar-day > span { display:flex; justify-content:center; align-items:center; border-radius:3px; padding:3px; font-size:12px; text-align:center; overflow:hidden; }
.calendar-routine,.calendar-repeat { background:#6e91b7; color:#102637; }
.calendar-review { background:#d1b778; color:#564821; }
.calendar-priority { background:#809f69; color:#172a10; }
.calendar-priority > span { display:flex; align-items:center; gap:7px; }
.repeat-comparison { margin-block:auto; }
.manual-steps { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr; align-items:center; margin-bottom:20px; }
.manual-steps > span { display:flex; align-items:center; justify-content:center; gap:8px; background:#6e91b7; color:#102637; padding:14px 4px; border-radius:3px; font-size:12px; }
.manual-steps i { border-top:1px dashed #416892; }
.manual-steps svg { width:17px; height:17px; }
.connected-steps { display:grid; grid-template-columns:1fr 1.8fr 1fr; align-items:center; }
.flow-start,.flow-review { padding:14px 4px; font-size:12px; text-align:center; border-radius:3px; }
.flow-start { background:#809f69; color:#172a10; }
.flow-review { background:#d1b778; color:#564821; }
.flow-link { text-align:center; font-size:11px; color:#38532b; }
.time-option .flow-link svg { display:block; width:100%; height:20px; }
.flow-link path { fill:none; stroke:#809f69; stroke-width:3; stroke-dasharray:1; stroke-dashoffset:0; }
@media (min-width:641px) and (max-width:1100px) {
  .time-option h3 { font-size:21px; }
  .open-day { gap:12px; }
  .calendar-day > span { font-size:11px; }
  .manual-steps { grid-template-columns:1fr 12px 1fr 12px 1fr; }
  .manual-steps > span { flex-direction:column; gap:4px; padding:9px 2px; }
}
@media (max-width:640px) {
  .time-options-nav { gap:2px 14px; }
  .time-options-nav a { font-size:11px; }
  .time-replay { width:36px; height:36px; }
  .time-option { height:237px; }
  .time-option h3 { font-size:19px; }
  .time-option .story-note { margin-top:6px; font-size:9px; }
  .time-takeaway { font-size:10px; }
  .graph-label { font-size:11px; margin-bottom:3px; }
  .time-option .time-graph svg { height:108px; }
  .graph-axis { font-size:9px; margin-top:4px; }
  .open-day { gap:12px; }
  .calendar-day { height:116px; gap:3px; }
  .calendar-day > span { font-size:10px; padding:2px; }
  .calendar-priority > span { gap:4px; }
  .calendar-priority svg { width:14px; height:14px; }
  .day-column > p,.repeat-comparison > p { font-size:11px; margin-bottom:4px; }
  .manual-steps { grid-template-columns:1fr 12px 1fr 12px 1fr; margin-bottom:12px; }
  .manual-steps > span { font-size:10px; gap:4px; padding:11px 2px; }
  .manual-steps svg { width:14px; height:14px; }
  .flow-start,.flow-review { padding:12px 2px; font-size:10px; }
  .flow-link { font-size:9px; }
}
@media (max-width:360px) {
  .time-option { height:271px; }
  .calendar-day { height:138px; }
  .time-options-nav { gap:0 12px; }
  .time-options-nav a { font-size:10px; }
}