@layer components {
  .phase-workspace { margin: 1.1rem 0 1.25rem; min-width: 0; }
  .phase-heading h2 { font-size: 1.65rem; }
  .phase-heading p { margin-top: .4rem; color: var(--muted); font-size: .88rem; }
  .phase-path { --phase-symbol-size: 56px; --phase-control-inset: 0px; display: flex; position: relative; overflow-x: auto; list-style: none; padding: 1rem 0 .65rem; margin: 0 0 .6rem; overscroll-behavior-inline: contain; }
  .phase-stop { position: relative; flex: 1 0 112px; min-width: 0; text-align: center; }
  .phase-stop::before { content: ""; position: absolute; top: calc(var(--phase-control-inset) + var(--phase-symbol-size) / 2 - 1px); left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
  .phase-stop:first-child::before { display: none; }
  .phase-stop.is-complete::before { background: var(--success); }
  .phase-stop-control { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: var(--phase-control-inset) .45rem .5rem; color: var(--muted); border-radius: 10px; }
  .phase-stop-control strong { font-size: .81rem; font-weight: 600; }
  .phase-stop-control small { font-size: .7rem; }
  .phase-stop-symbol { display: grid; place-items: center; width: var(--phase-symbol-size); height: var(--phase-symbol-size); background: var(--paper); border: 2px solid var(--line-strong); border-radius: 50%; font-size: .82rem; }
  .phase-stop-symbol svg { width: 19px; height: 19px; }
  .phase-stop.is-complete .phase-stop-symbol { background: var(--success-soft); border-color: var(--success); color: var(--success); }
  .phase-stop.is-current .phase-stop-control { color: var(--navy); }
  .phase-stop.is-current .phase-stop-symbol { color: var(--navy); background: var(--lilac-soft); border-color: var(--navy); outline: 4px solid var(--lilac-soft); }
  .phase-stop.is-selected:not(.is-current) .phase-stop-symbol { border-color: var(--periwinkle); border-style: dashed; color: var(--periwinkle); }
  @media (hover: hover) and (pointer: fine) {
    a.phase-stop-control:hover { background: var(--lilac-soft); color: var(--navy); }
  }
  .phase-action-panel { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; padding: 1.25rem 1.5rem; }
  .phase-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; }
  .phase-label { color: var(--muted); font-size: .76rem; margin-bottom: .35rem; }
  .phase-pair h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-family: var(--font-serif); font-weight: 400; line-height: 1.2; }
  .phase-date { margin-top: .5rem; color: var(--muted); font-size: .75rem; }
  .phase-arrow { color: var(--periwinkle); padding: .5rem; }
  .phase-arrow svg { width: 24px; height: 24px; }
  .phase-effects { font-size: .85rem; margin: 1.2rem 0 .85rem; }
  .phase-action-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
  .phase-day-control { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; font-size: .83rem; }
  .phase-workspace summary { cursor: pointer; color: var(--periwinkle); font-size: .82rem; padding: .6rem 0; }
  .phase-day-control details[open] { flex-basis: 100%; }
  .phase-day-control input { max-width: 190px; margin: .5rem; padding: .45rem; }
  .phase-link { background: none; border: 0; color: var(--periwinkle); cursor: pointer; padding: .65rem; text-decoration: underline; }
  .phase-primary { min-height: 46px; white-space: normal; text-align: center; }
  .phase-note, .phase-reason { margin-top: .75rem; }
  .phase-note { width: 100%; }
  .phase-note label { display: block; }
  .phase-note label, .phase-reason { font-size: .8rem; }
  .phase-choose { margin-top: .75rem; }
  .phase-secondary, .phase-footnotes { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .phase-secondary:has(details[open]), .phase-footnotes:has(details[open]) { display: block; }
  .cycle-detail .back-link { margin-bottom: .75rem; }
  .phase-history, .phase-correction { min-width: 0; }
  .phase-workspace summary { min-height: 40px; }
  .phase-path { scrollbar-color: var(--periwinkle) var(--paper); scrollbar-width: thin; }
  .phase-workspace :is(input, textarea) { caret-color: var(--periwinkle); }
  .phase-workspace ::selection { background: var(--lilac-soft); color: var(--navy); }
  .phase-options { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; }
  .phase-options a { padding: .65rem .85rem; background: var(--lilac-soft); border-radius: 8px; font-size: .83rem; }
  .phase-history, .phase-correction { margin-top: .75rem; }
  .phase-history ol { list-style: none; padding: 0; margin: 0; }
  .phase-history li { padding: .85rem 0; display: grid; gap: .2rem; border-bottom: 1px solid var(--line-strong); font-size: .82rem; }
  .phase-history time, .phase-history li > span { color: var(--muted); }
  .phase-correction form { max-width: 520px; display: grid; gap: .75rem; margin-top: .75rem; }
  .phase-correction p { font-size: .85rem; color: var(--muted); }
  .phase-feedback { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid var(--success); background: var(--success-soft); font-size: .9rem; }
  .phase-feedback.is-error { border-color: var(--coral); background: var(--coral-soft); }
  .phase-empty { padding: 1rem 0; display: grid; gap: 1rem; }
  .phase-workspace[aria-busy="true"] .phase-primary { opacity: .65; }
  .protocol-calendar-grid { position: relative; }
  .calendar-phase-bar { position: absolute; pointer-events: none; top: 36px; bottom: 0; left: calc(var(--calendar-label-width) + var(--phase-day-index) * var(--calendar-day-width)); width: 2px; background: var(--periwinkle); opacity: .6; z-index: 1; }
  .calendar-key.phase { background: var(--periwinkle); width: 3px; border-radius: 0; }
  .calendar-date .calendar-phase-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; background: var(--lilac-soft); color: var(--periwinkle); border-radius: 6px; z-index: 2; }
  .calendar-date .calendar-phase-flag { margin: .2rem; padding: .35rem; max-width: calc(var(--calendar-day-width) - .4rem); }
  .calendar-date .calendar-phase-flag span { font-family: var(--font-sans); font-size: .72rem; letter-spacing: normal; text-transform: none; line-height: 1.25; }
  .phase-correction-preview { max-width: 520px; padding: .75rem 0; display: grid; gap: .4rem; font-size: .85rem; }
  .phase-correction-preview time { color: var(--muted); }
  .phase-correction-preview ul { margin: 0 0 .5rem; padding-left: 1.25rem; }
  .calendar-phase-flag svg { width: 16px; height: 16px; }
  .calendar-phase-notes { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; font-size: .75rem; color: var(--muted); }
  .calendar-phase-notes summary { cursor: pointer; padding: .5rem 0; color: var(--periwinkle); }
  .calendar-phase-notes details:target { outline: 2px solid var(--periwinkle); outline-offset: 4px; }
  .calendar-phase-notes p { padding: .3rem 0; }
  @media (min-width: 1101px) {
    .page-shell:has(.cycle-detail) { padding-top: 1.25rem; }
    .cycle-detail .back-link { margin-bottom: .4rem; }
    .phase-heading > div { display: flex; align-items: baseline; gap: 1rem; }
    .phase-heading p { margin: 0; }
    .phase-heading h2 { font-size: 1.45rem; }
    .phase-path { padding-top: .75rem; padding-bottom: .35rem; margin-bottom: .35rem; }
    .phase-action-panel { padding: 1rem 1.5rem; }
    .phase-effects { margin: .65rem 0 .5rem; }
    .phase-note, .phase-choose, .phase-history, .phase-correction { margin-top: .25rem; }
    .phase-workspace summary { padding: .35rem 0; min-height: 32px; }
    .phase-workspace { margin-bottom: .75rem; }
    .cycle-detail .protocol-calendar-heading { padding-bottom: .4rem; }
    .cycle-detail .protocol-calendar-legend { padding: .15rem 0 .4rem; }
  }
  @media (max-width: 700px) {
    .phase-action-panel { padding: 1.15rem; }
    .phase-pair { gap: .65rem; grid-template-columns: 1fr 20px 1fr; }
    .phase-arrow { padding: 0; }
    .phase-pair h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
    .phase-action-row { align-items: stretch; flex-direction: column; }
    .phase-primary { width: 100%; }
    .phase-day-control { align-self: start; }
    .phase-stop { flex-basis: 105px; }
  }
}