.cycle-detail { max-width: 1500px; margin: 0 auto; }
.cycle-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1rem 0; }
.cycle-detail-heading h1 { font-size: clamp(2rem, 3vw, 3rem); }
.cycle-detail-heading p, .cycle-detail-context, .cycle-version-note { color: var(--muted); font-size: .84rem; margin-top: .5rem; }
.cycle-detail-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cycle-detail-context { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; }
.cycle-version { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 1.5rem; }
.cycle-detail .protocol-calendar-heading { padding-top: 0; }
.cycle-detail .protocol-calendar-grid { grid-template-columns: 220px repeat(var(--calendar-days), minmax(100px, 1fr)); }
.cycle-detail .protocol-calendar-scroll { max-height: 65vh; }
.cycle-detail .calendar-row-label { position: sticky; left: 0; z-index: 2; background: var(--surface); padding-left: .5rem; }
.cycle-detail .calendar-date, .cycle-detail .calendar-axis-label { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.cycle-detail .calendar-date.is-today { background: var(--lilac-soft); }
.cycle-detail .calendar-row-label strong, .cycle-detail .calendar-dose-entry strong { font-size: .84rem; }
.cycle-detail .calendar-dose-entry small { font-family: var(--font-sans); font-size: .72rem; }
.cycle-instructions { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.cycle-instructions > summary, .cycle-published > summary { padding: 1rem 0; cursor: pointer; font-weight: 600; }
.cycle-published { margin-top: 1.5rem; }
.cycle-instruction { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.cycle-instruction h3 { font: inherit; font-weight: 700; margin: .35rem 0; }
.cycle-instruction p { font-size: .84rem; }
.cycle-instruction-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.cycle-detail summary:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 3px; }
@media (max-width: 1100px) { .cycle-detail-heading { align-items: flex-start; flex-direction: column; } }

/* Keep every label cell within the full-width grid when the dates scroll. */
.protocol-calendar { --calendar-label-width: 250px; --calendar-day-width: 94px; --calendar-month-height: 34px; }
.protocol-calendar-grid { width: max-content; min-width: 100%; grid-template-columns: var(--calendar-label-width) repeat(var(--calendar-days), var(--calendar-day-width)); }
.cycle-detail .protocol-calendar { --calendar-label-width: 220px; --calendar-day-width: 100px; }
.cycle-detail .protocol-calendar-grid { grid-template-columns: var(--calendar-label-width) repeat(var(--calendar-days), var(--calendar-day-width)); }
.protocol-calendar .calendar-row-label, .protocol-calendar .calendar-section-label, .protocol-calendar .calendar-axis-label, .protocol-calendar .calendar-month-corner { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line-strong); padding-left: .5rem; }
.calendar-month-corner, .calendar-month-group { min-height: var(--calendar-month-height); height: var(--calendar-month-height); border-bottom: 1px solid var(--line); }
.calendar-month-group { position: sticky; top: 0; z-index: 4; background: var(--surface); color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: capitalize; padding: .4rem .5rem; border-right: 1px solid var(--line-strong); }
.calendar-month-group > span { position: sticky; left: calc(var(--calendar-label-width) + .5rem); white-space: nowrap; }
.protocol-calendar .calendar-month-corner { top: 0; z-index: 6; }
.protocol-calendar .calendar-date { position: sticky; top: var(--calendar-month-height); z-index: 4; background: var(--surface); }
.protocol-calendar .calendar-date.is-today { background: var(--lilac-soft); }
.protocol-calendar .calendar-axis-label { top: var(--calendar-month-height); z-index: 6; }
@media (max-width: 650px) {
  .protocol-calendar, .cycle-detail .protocol-calendar { --calendar-label-width: 160px; --calendar-day-width: 94px; }
}

/* Keep the phase decision and start of its calendar visible on a clinic desktop. */
@media (min-width: 1101px) {
  .cycle-detail-heading { margin: .35rem 0; }
  .cycle-detail-context { margin-bottom: .5rem; }
  .cycle-detail .cycle-version { padding: .75rem 1.5rem; }
}