/* Date ranges retain contrast on disabled future days and identify phases in text. */
#calendarGrid button{position:relative;color:#28232f;opacity:1;overflow:visible}
#calendarGrid button:disabled{opacity:1;color:#675d77;cursor:default}
#calendarGrid .phase-period{background:#e7c7ec;border-color:#cea2d5}
#calendarGrid .phase-after{background:#eee8fb;border-color:#d8c8ee}
#calendarGrid .phase-middle{background:#b58eea;border-color:#9766d5;color:#30213e}
#calendarGrid .phase-before{background:#d2d4ee;border-color:#b8b8da}
#calendarGrid .future-date{border-style:dashed}
#calendarGrid .next-period{background:#faf6ff;border:1px dashed #9b74c9}
#calendarGrid .start{color:#fff;background:#7547b9;border-color:#7547b9;font-weight:750}
#calendarGrid .today{box-shadow:inset 0 0 0 2px #30213e}
.cycle-record-dot{position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;background:currentColor;border-radius:50%}
.cycle-phase-overview{margin-bottom:28px}
.cycle-phase-overview[hidden]{display:none}
.cycle-phase-overview h3{margin:0;font-size:18px;line-height:1.3}
.cycle-phase-overview>p{margin:8px 0 14px;font-size:13px;line-height:1.5;color:#62556e}
.cycle-phase-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.cycle-phase-strip .cycle-phase-segment{min-width:0;min-height:64px;border:1px solid transparent;border-radius:13px;padding:9px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#30213e;cursor:pointer}
.cycle-phase-segment strong{font-size:17px;line-height:1.2}
.cycle-phase-segment span{font-size:11px;line-height:1.3}
.cycle-phase-strip .phase-period{background:#e7c7ec;border-color:#cea2d5}
.cycle-phase-strip .phase-after{background:#eee8fb;border-color:#d8c8ee}
.cycle-phase-strip .phase-middle{background:#b58eea;border-color:#9766d5}
.cycle-phase-strip .phase-before{background:#d2d4ee;border-color:#b8b8da}
.cycle-phase-segment:focus-visible{outline:3px solid #30213e;outline-offset:3px}
.cycle-phase-overview>.cycle-phase-strip-hint{margin:12px 0 0;font-size:12px}
.cycle-phase-legend{display:grid;gap:8px;margin-top:22px}
.cycle-phase-legend h3{font-size:17px;margin:0 0 3px}
.cycle-phase-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#f4effa;border-left:4px solid #cfbaeb}
.cycle-phase-row.phase-period{border-left-color:#cea2d5}
.cycle-phase-row.phase-after{border-left-color:#d8c8ee}
.cycle-phase-row.phase-middle{border-left-color:#9766d5}
.cycle-phase-row.phase-before{border-left-color:#b8b8da}
.cycle-phase-row strong{font-size:12px;line-height:1.4;font-weight:600}
.cycle-phase-row span{font-size:11px;line-height:1.4;color:#6c607a;text-align:right}
.cycle-phase-legend>p{font-size:12px;line-height:1.5;color:#766a83;margin:4px 0 0}
#calendar .legend-start{background:#7547b9}
#calendar .legend-estimate{background:#faf6ff;border:1px dashed #9b74c9}
#calendar .legend-today{border-color:#30213e}
@media(max-width:380px){.cycle-phase-row{grid-template-columns:minmax(0,1fr);gap:3px;padding:9px 10px}.cycle-phase-row span{text-align:left}#calendarGrid button{min-height:32px}}