/* Android-first navigation; original palette and period ribbons remain shared. */
:root{--ovulation-fill:#f6edcc;--ovulation-ink:#a58c48;--egg-fill:#e5c778;--nav-height:68px;--action-height:76px}
:root[data-theme=dark]{--ovulation-fill:#453e2c;--ovulation-ink:#d4bc76;--egg-fill:#e0c373}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--ovulation-fill:#453e2c;--ovulation-ink:#d4bc76;--egg-fill:#e0c373}}
html,body{height:auto;min-height:100%;overflow:auto;overscroll-behavior-y:none}
body{font-size:15px}
.shell{display:block;width:100%;max-width:620px;height:auto;min-height:100dvh;overflow:visible;margin:auto;padding:calc(14px + var(--safe-top)) max(16px,var(--safe-area-inset-right,0px)) calc(var(--nav-height) + var(--action-height) + var(--safe-bottom) + 24px) max(16px,var(--safe-area-inset-left,0px))}
.top{display:flex;justify-content:space-between;min-height:46px;margin-bottom:12px;gap:14px}
.brand{font-size:21px}.brand-icon{font-size:32px}.today-heading{align-items:flex-end;gap:1px}.today-heading>time{font-size:21px}.today-heading>span{font-size:11px}
.page{min-width:0}.demo-banner{margin:8px 0 12px;min-height:40px;font-size:12px}.demo-banner button{min-height:44px}
.hero{display:flex;min-height:86px;margin:0 0 14px;padding:8px 3px;align-items:center}
.prediction-label{font-size:12px;margin:0 0 5px}.hero h1{font-size:clamp(27px,7.2vw,34px);line-height:1.25;letter-spacing:-1px}.hero .muted{font-size:11px;line-height:1.6;margin:6px 0 0;white-space:normal}
.workspace{display:flex;flex-direction:column;gap:14px;min-height:0}
.card{width:100%;border-radius:24px;padding:14px;min-height:0}
.calendar{display:block;overflow:hidden}.calendar .section-heading{display:flex;justify-content:space-between;align-items:center;min-height:64px;gap:4px;margin-bottom:4px}
.calendar-title{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.section-heading h2{font-size:19px;line-height:24px;white-space:nowrap}.history-link{display:flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--purple);font-size:11px;min-height:44px}.history-link svg{width:15px;height:15px}
.calendar-controls{gap:0}.calendar-controls .icon-button{width:44px;height:44px;font-size:30px}.today-button{min-width:44px;min-height:44px;font-size:11px;padding:5px 8px;border-radius:15px}
.weekdays{font-size:11px;min-height:22px;margin:0 0 4px}
.calendar-viewport{width:100%;overflow:hidden;touch-action:pan-y;user-select:none}
.calendar-track{display:flex;width:100%;transform:translateX(-100%);will-change:transform}
.calendar-grid.month-page{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,44px);row-gap:2px;flex:0 0 100%;min-height:0;align-content:stretch}
.month-page .day{height:44px;min-height:44px;font-size:15px;padding:0;isolation:isolate;border:0;border-radius:0;background:transparent}
.day::before{inset:2px 0}.day .day-number{align-self:auto;position:relative;top:-3px}.day .fertility-mark,.day .egg-mark{position:absolute;bottom:4px;width:10px;height:10px;left:calc(50% - 5px)}
.day .egg-mark{width:12px;height:12px;left:calc(50% - 6px);bottom:2px;stroke:var(--ovulation-ink);fill:var(--ovulation-fill);stroke-width:1.8}.egg-mark circle{fill:var(--ovulation-ink);stroke:none}
.day.ovulation::before{content:"";background:var(--ovulation-fill);border-radius:10px;inset:2px 1px}.day.ovulation{color:var(--ink)}
.day.selected::after{inset:1px 2px;border-radius:12px}.today-label{top:0;right:2px;font-size:8px;min-width:12px;height:12px}.day.outside{opacity:.48}
.legend{display:flex;min-height:22px;gap:14px;margin:9px 0 2px;font-size:10px}.legend .dot{width:9px;height:9px}
.overlay-options{display:flex;gap:7px;border-top:1px solid var(--line);padding-top:8px;margin-top:3px}.overlay-button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-height:44px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:13px;font-size:12px}.overlay-button svg{width:15px;height:15px}.overlay-button[aria-pressed=true]{background:var(--greenbg);color:var(--fertility-ink);border-color:var(--green)}.overlay-button[aria-pressed=true] svg{fill:var(--green)}#ovulationLegend[aria-pressed=true]{background:var(--ovulation-fill);border-color:var(--ovulation-ink);color:var(--ovulation-ink)}#ovulationLegend[aria-pressed=true] svg{fill:none}
.insights{display:block;padding:10px 16px 14px;overflow:visible;min-height:132px}.date-title{display:flex;justify-content:space-between;align-items:center;min-height:40px}.date-title h2{font-size:17px}.date-title h2 .metric-label{font-size:11px}.detail-trigger{min-height:44px;min-width:58px;font-size:12px}.combined-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-self:stretch}.combined-summary .metric-label{font-size:11px}.mini-number{font-size:29px;margin:3px 0}.mini-number small{font-size:13px}.mini-secondary{padding-left:16px;gap:3px;justify-content:center}.summary-value{font-size:21px;line-height:1.5}.summary-caption{font-size:10px;line-height:1.5}.summary-empty{min-height:64px}
.chance-summary{display:flex;flex-direction:column;gap:7px;text-align:left;min-height:70px;width:100%;background:transparent;border:0;padding:0;color:var(--fertility-ink);border-radius:8px}.chance-level{font-size:22px;font-weight:500;line-height:1.25;white-space:nowrap}.chance-summary .conception-label{font-size:10px;display:flex;align-items:center;gap:4px}.chance-summary .chance-key{width:12px;height:12px}.chance-meter{display:flex;gap:4px;width:80px}.chance-meter i{height:4px;flex:1;background:var(--greenbg);border-radius:4px}.chance-meter i.filled{background:var(--green)}
.action-area{display:grid;position:fixed;bottom:calc(var(--nav-height) + var(--safe-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:588px;height:var(--action-height);min-height:0;margin:0;padding:5px 0 9px;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr)) 70px;z-index:5;background:var(--bg)}
.daily-control,.backfill-button{height:62px;min-height:62px;border-radius:18px;font-size:12px;gap:5px}.backfill-button>span:first-child{font-size:22px}.toggle{width:38px;height:23px;min-height:23px;flex:none}.toggle::before{width:17px;height:17px}.toggle:checked::before{transform:translateX(15px)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:6;display:flex;justify-content:center;height:calc(var(--nav-height) + var(--safe-bottom));padding:6px 16px calc(6px + var(--safe-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 24px #51415b04}
.bottom-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:33.333%;max-width:196px;min-height:44px;background:none;border:0;color:var(--muted);font-size:11px;border-radius:15px}.bottom-nav button svg{width:23px;height:23px}.bottom-nav button[aria-current=page]{color:var(--purple);background:var(--soft)}
body:has(#calendarPage[hidden]) .shell{padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 24px)}
.page-heading{padding:14px 4px 20px}.page-heading h1{font-size:30px;line-height:1.3;margin:4px 0 8px;font-weight:500}.page-heading .muted{font-size:12px;line-height:1.7;margin:0}.page-heading .eyebrow{font-size:10px}
.stat-filters{display:flex;gap:7px;margin-bottom:16px}.stat-filters button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:12px;color:var(--muted)}.stat-filters button[aria-pressed=true]{background:var(--soft);color:var(--purple);border-color:var(--purple)}
#statisticsBody{display:flex;flex-direction:column;gap:14px}.stat-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-metric{display:flex;flex-direction:column;gap:9px;padding:18px 15px;background:var(--card);border:1px solid var(--line);border-radius:20px}.stat-metric>span{color:var(--muted);font-size:11px;line-height:1.5}.stat-metric strong{font-size:32px;font-weight:500;color:var(--purple);line-height:1.2}.stat-metric strong small{font-size:12px;padding-left:5px;color:var(--muted)}.stat-metric .range-value{font-size:27px}
.stat-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}.stat-heading h2{font-size:17px}.stat-bars{display:flex;align-items:flex-end;gap:5px;overflow-x:auto;min-height:148px;padding:10px 2px 4px;scrollbar-width:thin}.stat-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;flex:1 0 38px;min-width:44px;max-width:68px;height:140px;border:0;background:transparent;border-radius:10px;color:var(--ink);padding:4px}.bar-pillar{display:block;width:22px;height:var(--bar-height);min-height:8px;border-radius:7px 7px 3px 3px;background:var(--purple);opacity:.65}.stat-bar.duration .bar-pillar{background:var(--record-fill);opacity:1}.bar-value{font-size:12px;color:var(--purple)}.bar-date{font-size:10px;color:var(--muted);white-space:nowrap}.stat-chart .note{font-size:10px;margin-top:10px}
.stat-record{display:flex;align-items:center;gap:12px;width:100%;min-height:70px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:12px 0}.record-dot{width:9px;height:9px;border-radius:50%;background:var(--record-fill);flex-shrink:0}.stat-record>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:6px}.stat-record strong{font-size:14px;font-weight:500}.stat-record small{font-size:11px;line-height:1.5;color:var(--muted)}.stat-empty{text-align:center;padding:16px 8px}.stat-empty>span{font-size:38px;color:var(--purple)}.stat-empty p{font-size:13px}.record-detail{padding:5px 0 12px}.record-detail h3{font-size:25px;margin:14px 0}.record-detail .primary{width:100%;margin-top:18px}
.settings-group-title{font-size:14px;line-height:1.6;color:var(--purple);padding:15px 0 10px;margin-top:6px;border-top:1px solid var(--line)}#settingsBody>.note:first-child{margin-bottom:14px}#settingsBody .field{font-size:13px}#settingsBody input[type=number],#settingsBody select{min-height:48px;font-size:16px}#settingsBody .setting-row{min-height:60px}#settingsBody .note{font-size:11px;line-height:1.8}.setting-row small{max-width:220px}#saveSettings{position:static;min-height:48px}
dialog{max-width:560px;max-height:calc(100dvh - 30px - var(--safe-top));padding:22px 20px calc(22px + var(--safe-bottom));border-radius:26px;width:calc(100% - 16px);margin:auto auto 8px}.sheet-header h2{font-size:22px}.sheet-header .icon-button{min-width:44px;min-height:44px}.detail-tabs button,.lh-options button,.range-mode button,.range-day,.block-button{min-height:44px}.toast{bottom:calc(var(--nav-height) + var(--action-height) + var(--safe-bottom) + 10px);font-size:12px;z-index:20}
@media(min-width:760px){.shell{padding-top:28px}.calendar-grid.month-page{grid-template-rows:repeat(6,52px)}.month-page .day{height:52px}.hero{margin-top:14px}.action-area{max-width:540px}.bottom-nav button{max-width:190px}}
@media(max-width:359px){.shell{padding-left:12px;padding-right:12px}.card{padding-left:11px;padding-right:11px}.section-heading h2{font-size:17px}.calendar-controls .icon-button{width:44px}.chance-level{font-size:20px}.stat-metric{padding:16px 12px}.stat-metric .range-value{font-size:25px}.action-area{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep the selected-date summary in the document flow, clear of record actions. */
.shell{padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 20px)}
.top{margin-bottom:4px}.hero{min-height:64px;padding:4px 3px;margin-bottom:12px}.hero .muted{display:none}
.calendar .section-heading{min-height:44px}.calendar-title{flex-direction:row;align-items:center;gap:7px}.history-link{flex-direction:column;justify-content:center;gap:2px;min-width:40px;font-size:9px}.history-link svg{width:14px;height:14px}.section-heading h2{font-size:18px}
.action-area{position:static;transform:none;width:100%;max-width:none;height:auto;margin-top:12px;padding:0;background:transparent}
.day.selected{border-radius:12px}.toast{bottom:calc(var(--nav-height) + var(--safe-bottom) + 12px)}
@media(max-width:375px){.shell{padding-left:12px;padding-right:12px}.calendar.card{padding-left:12px;padding-right:12px}.section-heading h2{font-size:16px}.calendar-title{gap:3px}.history-link{min-width:44px}.today-button{margin-right:0}dialog{padding-left:16px;padding-right:16px}}
.history-link{min-width:44px}

/* Compact heading: reserve the opening line for today, without a brand row. */
.top{min-height:34px;margin-bottom:2px;justify-content:flex-start}.today-heading{flex-direction:row;align-items:baseline;gap:10px}.today-heading>time{font-size:20px}.today-heading>span{order:2;font-size:11px}
/* One-screen calendar: date left, forecast right, recording and navigation in view. */
.top{justify-content:space-between;gap:12px;min-height:48px;flex:0 0 auto;margin:0 0 12px}
.today-heading{flex-direction:column;align-items:flex-start;gap:3px}.today-heading>time{font-size:21px;line-height:1.2}.today-heading>span{font-size:10px;line-height:1.3}
.top .hero{display:flex;min-height:0;max-width:54%;padding:0;margin:0;text-align:right;align-items:center;justify-content:flex-end}.top .hero h1{font-size:clamp(18px,5.7vw,25px);line-height:1.2;letter-spacing:0;white-space:nowrap}.top .prediction-label{font-size:10px;margin:0 0 3px;line-height:1.4}.top .hero .muted{display:none}
html:not([data-page=calendar]) .top .hero{display:none}
.calendar-footer{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:6px;padding-top:5px;flex:0 0 auto;min-height:50px}
.calendar-footer .legend{flex:0 0 70px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:38px;margin:0;font-size:9px}.calendar-footer .legend>span{gap:5px}
.calendar-footer .overlay-options{flex:1;gap:3px;border:0;padding:0;margin:0;min-width:0}.calendar-footer .overlay-button{min-height:44px;gap:4px;padding:5px 4px;font-size:10px;white-space:nowrap}.calendar-footer .overlay-button svg{width:13px;height:13px}
html[data-page=calendar],html[data-page=calendar] body{height:100%;overflow:hidden}
html[data-page=calendar] .shell{height:100dvh;min-height:0;max-width:620px;display:flex;flex-direction:column;padding-top:calc(10px + var(--safe-top));padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 8px);gap:8px;overflow:hidden}
html[data-page=calendar] .top{margin:0;min-height:48px}
#calendarPage{min-height:0}
html[data-page=calendar] #calendarPage{display:flex;flex-direction:column;flex:1 1 0;gap:8px}
html[data-page=calendar] .workspace{display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:8px}
html[data-page=calendar] .calendar.card{display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding-top:10px;padding-bottom:10px;border-radius:22px}
html[data-page=calendar] .calendar .section-heading{flex:0 0 44px;min-height:44px;margin:0 0 3px}
html[data-page=calendar] .weekdays{flex:0 0 20px;min-height:20px;margin:0 0 3px}
html[data-page=calendar] .calendar-viewport{flex:1 1 0;min-height:0}
html[data-page=calendar] .calendar-track{height:100%}
html[data-page=calendar] .calendar-grid.month-page{height:100%;grid-template-rows:repeat(6,minmax(0,1fr));row-gap:2px}
html[data-page=calendar] .month-page .day{height:100%;min-height:0}
html[data-page=calendar] .insights{flex:0 0 auto;min-height:112px;padding:5px 14px 10px}
html[data-page=calendar] .date-title{min-height:38px}
html[data-page=calendar] .chance-summary{min-height:58px;gap:5px}
html[data-page=calendar] .chance-level{font-size:21px}
html[data-page=calendar] .action-area{flex:0 0 62px;min-height:62px;height:62px;position:static;left:auto;bottom:auto;transform:none;width:100%;max-width:none;margin:0;padding:0;gap:8px;background:transparent}
html[data-page=calendar] .daily-control,html[data-page=calendar] .backfill-button{min-height:62px;height:62px}
html[data-page=calendar] .demo-banner{margin:0;flex:0 0 auto;min-height:28px}
@media(max-height:740px){
 html[data-page=calendar] .shell{gap:6px;padding-top:calc(6px + var(--safe-top));padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 6px)}
 html[data-page=calendar] .top{min-height:42px}.top .hero h1{font-size:20px}.today-heading>time{font-size:19px}
 html[data-page=calendar] #calendarPage,html[data-page=calendar] .workspace{gap:6px}
 html[data-page=calendar] .insights{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:2px 10px}
 html[data-page=calendar] .insights .date-title{flex:1;min-width:0;gap:2px}.insights .date-title h2{font-size:14px}.insights .date-title h2 .metric-label{display:none}
 html[data-page=calendar] .insights .combined-summary{display:block;flex:0 0 auto}.insights .combined-summary>div:first-child{display:none}
 html[data-page=calendar] .insights .mini-secondary{padding-left:9px}.insights .chance-summary{min-height:40px;gap:2px;justify-content:center}.insights .chance-summary .conception-label,.insights .chance-meter{display:none}.insights .chance-level{font-size:17px}
 html[data-page=calendar] .insights .summary-empty{min-height:40px}.insights .summary-empty .summary-title{display:none}
 html[data-page=calendar] .action-area,html[data-page=calendar] .daily-control,html[data-page=calendar] .backfill-button{flex-basis:54px;min-height:54px;height:54px}
 html[data-page=calendar] .calendar.card{padding-top:7px;padding-bottom:7px}
}
/* Calendar controls share a horizontal center; all five keys stay visible. */
.calendar-title{flex-direction:row;align-items:center;gap:5px;min-width:0}.calendar-title h2{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;font-size:clamp(15px,4.3vw,18px)}
.history-link{flex-direction:row;align-items:center;justify-content:center;gap:3px;min-width:56px;min-height:44px;font-size:10px;line-height:1;padding:0}.history-link svg{width:13px;height:13px;flex-shrink:0}.history-link span{white-space:nowrap;line-height:1}
.calendar-controls{align-items:center}.calendar-controls .today-button,.calendar-controls .icon-button{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;margin:0}
.calendar-footer{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:0;padding-top:4px;margin-top:4px}
.calendar-footer .legend{flex:0 0 auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:6px;row-gap:4px;min-height:18px;font-size:9px;line-height:14px;margin:0}
.calendar-footer .legend>span{display:inline-flex;align-items:center;white-space:nowrap;gap:4px;min-height:16px}.legend .fertility-mark{width:10px;height:10px;opacity:.75}.legend .ovulation-dot{background:var(--ovulation-fill);border:1px solid var(--ovulation-ink);border-radius:3px}.legend .egg-key{width:10px;height:12px;stroke:var(--ovulation-ink);fill:var(--ovulation-fill);stroke-width:1.8}.legend .egg-key circle{fill:var(--ovulation-ink);stroke:none}
.calendar-footer .overlay-options{flex:0 0 auto;min-height:44px}.top .hero-copy{max-width:none}.top .prediction-label{white-space:nowrap}
/* Keep natural month rows and date geometry; only the top bar takes spare space. */
html[data-page=calendar] .shell{--day-height:clamp(32px,calc((100dvh - 504px - var(--safe-top) - var(--safe-bottom))/6),56px)}
html[data-page=calendar] .top{flex:1 1 auto;min-height:48px;align-items:center}
html[data-page=calendar] #calendarPage,html[data-page=calendar] .workspace,html[data-page=calendar] .calendar.card{flex:0 0 auto}
html[data-page=calendar] .calendar-viewport{flex:0 0 auto;height:calc(5*var(--day-height) + 8px)}
@media(max-height:740px){html[data-page=calendar] .shell{--day-height:clamp(28px,calc((100dvh - 416px - var(--safe-top) - var(--safe-bottom))/6),40px)}html[data-page=calendar] .top{min-height:42px}}
/* Header and the two tappable summaries use the space left by the natural calendar. */
html[data-page=calendar] .top{flex:0 1 64px;min-height:48px;align-items:center}
.today-heading>time{font-size:27px}.today-heading>span{font-size:11px}.top .prediction-label{font-size:11px}.top .hero h1{font-size:36px}.top .hero h1.long-value{font-size:clamp(18px,5.5vw,24px)}
html[data-page=calendar] #calendarPage,html[data-page=calendar] .workspace{flex:1 1 0}
html[data-page=calendar] #insights{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1 1 0;min-height:88px;padding:10px 14px}
html[data-page=calendar] #insights .combined-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:1;align-items:center;gap:12px}
html[data-page=calendar] #insights .combined-summary>div:first-child{display:block}
.period-summary{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;min-height:64px;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:0;border-radius:9px}
.period-summary>.metric-label{display:flex;align-items:center;gap:6px}.period-summary>.metric-label>span{font-size:15px;color:var(--purple)}.period-summary .summary-value{font-size:25px;line-height:1.3;margin:0}.period-summary .summary-caption{font-size:11px;line-height:1.4;margin:0}
html[data-page=calendar] #insights .chance-summary{display:flex;min-height:64px;gap:8px;justify-content:center}
html[data-page=calendar] #insights .chance-summary .conception-label{display:flex;font-size:11px}
html[data-page=calendar] #insights .chance-level{font-size:23px}
html[data-page=calendar] #insights .chance-meter{display:flex;width:95px;gap:4px}
.empty-expand{position:absolute;right:10px;top:6px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--purple);font-size:23px}
@media(max-height:740px){
 html[data-page=calendar] .shell{--day-height:clamp(28px,calc((100dvh - 460px - var(--safe-top) - var(--safe-bottom))/6),40px)}
 html[data-page=calendar] .top{flex-basis:56px;min-height:42px}.today-heading>time{font-size:23px}.top .hero h1{font-size:29px}
 html[data-page=calendar] #insights{min-height:48px;padding:5px 10px}
 html[data-page=calendar] #insights .period-summary,html[data-page=calendar] #insights .chance-summary{min-height:40px;gap:3px}
 html[data-page=calendar] #insights .period-summary .summary-value{font-size:20px}
 html[data-page=calendar] #insights .period-summary .summary-caption{display:none}
 html[data-page=calendar] #insights .chance-level{font-size:18px}
 html[data-page=calendar] #insights .chance-summary .conception-label{font-size:10px}
}
.day .egg-mark,.legend .egg-key{fill:var(--egg-fill);stroke:none}
#ovulationLegend svg,#ovulationLegend[aria-pressed=true] svg{fill:var(--egg-fill);stroke:none}
.history-link span{max-width:40px;white-space:normal;line-height:1.15}
/* A compact information card and a relaxed header, without an empty detail row. */
html[data-page=calendar] .top{flex:1 1 auto;min-height:72px}
html[data-page=calendar] #calendarPage,html[data-page=calendar] .workspace{flex:0 0 auto}
html[data-page=calendar] #insights{flex:0 0 112px;height:112px;min-height:112px;padding:10px 14px}
@media(max-height:740px){
 html[data-page=calendar] .top{min-height:48px}
 html[data-page=calendar] #insights{flex-basis:72px;height:72px;min-height:72px;padding:5px 10px}
}
/* Final summary rhythm: intrinsic height, two aligned values, no ornamental row. */
html[data-page=calendar] .top{max-height:120px}
html[data-page=calendar] #insights{flex:0 0 auto;height:auto;min-height:0;padding:12px 16px}
html[data-page=calendar] #insights .combined-summary{flex:0 0 auto;min-height:0;align-items:center}
html[data-page=calendar] #insights .period-summary,html[data-page=calendar] #insights .chance-summary{min-height:0;gap:6px;justify-content:center}
html[data-page=calendar] #insights .period-summary .summary-caption{display:none}
html[data-page=calendar] #insights .period-summary .summary-value{font-size:24px;line-height:1.2}
html[data-page=calendar] #insights .period-summary .mini-number{font-size:26px;line-height:1.2;margin:0}
html[data-page=calendar] #insights .chance-level{font-size:22px;line-height:1.25}
html[data-page=calendar] #insights .mini-secondary{padding-left:16px;align-self:stretch;justify-content:center}
.period-summary:active,.chance-summary:active{opacity:.72}
@media(max-height:740px){
 html[data-page=calendar] #insights{padding:8px 12px}
 html[data-page=calendar] #insights .period-summary,html[data-page=calendar] #insights .chance-summary{gap:3px}
 html[data-page=calendar] #insights .period-summary .summary-value{font-size:21px}
 html[data-page=calendar] #insights .chance-level{font-size:19px}
}
html[data-page=calendar] #insights .combined-summary{align-items:start}
html[data-page=calendar] #insights .period-summary,html[data-page=calendar] #insights .chance-summary,html[data-page=calendar] #insights .mini-secondary{justify-content:flex-start}
html[data-page=calendar] #insights .chance-level{font-size:24px;line-height:1.2}
@media(max-height:740px){html[data-page=calendar] #insights .chance-level{font-size:21px}}
/* Paired values share a baseline; secondary information sits quietly underneath. */
.top .today-heading,.top .hero-copy{display:flex;flex-direction:column;gap:5px}
.top .today-heading>time,.top .hero h1{font-size:26px;font-weight:500;line-height:1.25;letter-spacing:0;margin:0}
.top .hero h1{order:0}
.top .today-heading>span,.top .prediction-label{order:1;font-size:11px;font-weight:400;line-height:1.4;color:var(--muted);margin:0}
.top .hero h1.long-value{font-size:clamp(18px,5.5vw,24px)}
@media(max-height:740px){.top .today-heading>time,.top .hero h1{font-size:23px}.top .today-heading,.top .hero-copy{gap:3px}}
.top .today-heading>time,.top .hero h1.countdown-value{display:flex;align-items:baseline;gap:3px;height:1.25em}
.top .hero h1.countdown-value{justify-content:flex-end}
.top .header-number{font-size:1em;line-height:1.25;font-weight:500}
.top .header-unit{font-size:16px;font-weight:400;line-height:1;color:var(--muted)}
.top time .header-unit:nth-child(2){margin-right:4px}
@media(max-height:740px){.top .header-unit{font-size:14px}}
/* Only the calendar locks the viewport. Other pages use the document scroller. */
html:not([data-page=calendar]){height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto}
html:not([data-page=calendar]) body{height:auto;min-height:100dvh;overflow:visible;overscroll-behavior-y:auto}
html:not([data-page=calendar]) .shell{height:auto;min-height:100dvh;overflow:visible}
.calendar-viewport .day{touch-action:pan-y}
/* Date and year/week form two balanced lines without stretching the caption. */
.top .today-heading{display:grid;grid-template-columns:max-content;gap:5px}
.top .today-heading>time{grid-row:1}
.top .today-heading>span{grid-row:2;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;letter-spacing:0}
.top .today-heading>span i{font-style:normal;opacity:.65}
html[data-page=calendar] .top{min-height:max(54px,calc(72px - var(--safe-top) - var(--safe-bottom)))}
html[data-page=calendar] #insights .date-title{display:flex;flex:0 0 44px;align-self:stretch;align-items:center;justify-content:space-between;width:100%;min-height:44px;gap:8px;margin-bottom:2px}
html[data-page=calendar] #insights .date-title h2{font-size:17px;line-height:1.4;white-space:nowrap}
html[data-page=calendar] #insights .date-title .metric-label{display:inline;font-size:11px}
.exit-demo{display:inline-flex;align-items:center;justify-content:flex-end;flex-shrink:0;min-height:44px;min-width:64px;padding:0;border:0;background:transparent;color:var(--purple);font-size:11px;border-radius:8px}
.summary-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.expand-insights{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;border:0;background:transparent;color:var(--purple);border-radius:10px}
.expand-insights svg{width:17px;height:17px;stroke-width:1.5}
.expand-insights:active,.exit-demo:active{background:var(--soft)}
/* A separate top-layer decision window. Only the affected-record list scrolls. */
#recordConfirm{margin:auto;width:calc(100% - 32px);max-width:420px;max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));padding:22px;border-radius:22px;overflow:hidden}
#recordConfirm[open]{display:flex;flex-direction:column;gap:14px}
#recordConfirm h2{font-size:19px;line-height:1.4;margin:0;flex-shrink:0}
#recordConfirmMessage{font-size:13px;line-height:1.7;color:var(--muted);margin:0;flex-shrink:0}
#recordConfirmList{min-height:0;max-height:30dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;margin:0;padding:10px 10px 10px 28px;background:var(--bg);border-radius:12px;font-size:13px;line-height:1.8}
#recordConfirmError{margin:0;max-height:52px;overflow:auto;font-size:12px;flex-shrink:0}
#recordConfirmError:empty{display:none}
.record-confirm-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;flex-shrink:0}
.record-confirm-actions button{min-height:44px;white-space:normal;padding:10px;font-size:14px}
.next-estimate{margin:16px 0;padding:14px;background:var(--bg);border-radius:14px;font-size:13px;line-height:1.7}
.next-estimate h3{margin:0;font-size:14px}.next-estimate p{margin:6px 0 0;color:var(--muted)}
/* Quiet state surface: shared text baselines, modest corners, no button chrome. */
.top .hero-copy{flex:0 1 auto;min-width:128px;max-width:100%;padding:8px 13px;background:color-mix(in srgb,var(--purple) 11%,var(--card));border-radius:14px;box-shadow:none;border:0}
.top .hero h1{color:var(--purple)}
.top .hero h1.countdown-value{gap:3px}
.top .hero h1.long-value{font-size:19px;height:32.5px;display:flex;align-items:center;justify-content:flex-end}
.top .prediction-label{letter-spacing:0;font-size:11px}
html:not([data-page=calendar]) .top{display:none}
/* Selection is an independent inset ring, leaving the connected ribbon intact. */
.day.selected{outline:none}
.day.selected::after{content:"";position:absolute;z-index:3;inset:1px 2px;border:1.5px solid var(--purple);border-radius:12px;pointer-events:none}
.day.ovulation::before{inset:2px 0;border-radius:0}
.day.ovulation.ovulation-start::before{border-radius:10px 0 0 10px}.day.ovulation.ovulation-end::before{border-radius:0 10px 10px 0}
.day.ovulation.ovulation-start.ovulation-end::before{border-radius:10px}
/* Avoid the Android label tap flash; keep a visible purple keyboard focus. */
.daily-control,.daily-control *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.daily-control input:focus:not(:focus-visible){outline:none}
.daily-control:has(input:focus-visible){outline:2px solid var(--purple);outline-offset:2px}
.daily-control input:focus-visible{outline:none}
.ovulation-label{display:flex;align-items:center;gap:4px;color:var(--ovulation-ink)}
.ovulation-label svg{width:12px;height:14px;fill:var(--egg-fill);stroke:none;flex-shrink:0}
.ovulation-value{font-size:21px;line-height:1.2;font-weight:500;color:var(--ovulation-ink);white-space:nowrap}
.ovulation-range{font-size:10px;line-height:1.4;color:var(--muted);white-space:nowrap}
.ovulation-detail-date{font-size:32px;font-weight:400;line-height:1.3;margin:10px 0;color:var(--ovulation-ink)}
.detail-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The backfill rail has a fixed height for 4/5/6-week months. */
.range-viewport{height:284px;width:100%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.range-track{display:flex;height:100%;width:100%;transform:translateX(-100%);will-change:transform}
.range-track .range-grid{height:100%;flex:0 0 100%;min-width:0;gap:4px 0;align-content:stretch}
.range-day{isolation:isolate;border-radius:0;min-height:0;padding:0;background:transparent;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.range-day::before,.range-day::after{content:none;position:absolute;inset:0;pointer-events:none;border-radius:0}
.range-day::before{z-index:0}.range-day::after{z-index:1}
.range-number{position:relative;z-index:2}.range-day i{z-index:2}
.range-day.is-today{outline:none}
.range-day.is-today:not(.range-endpoint)::after{content:"";inset:2px;border:1px solid var(--purple);border-radius:11px;background:transparent}
.range-day.has-record::before{content:"";background:var(--record-fill)}
.range-day.record-start::before{border-radius:11px 0 0 11px}.range-day.record-end::before{border-radius:0 11px 11px 0}
.range-day.record-start.record-end::before{border-radius:11px}
.range-day.in-range{background:transparent;border-radius:0;color:var(--purple)}
.range-day.in-range::before{content:"";background:var(--soft);border-radius:0}
.range-day.in-range.range-start::before{border-radius:11px 0 0 11px}.range-day.in-range.range-end::before{border-radius:0 11px 11px 0}
.range-day.in-range.range-start.range-end::before{border-radius:11px}
.range-day.range-endpoint{background:transparent;border-radius:0;color:var(--purple)}
.range-day.range-endpoint::after{content:"";background:color-mix(in srgb,var(--purple) 12%,transparent);border:1px solid color-mix(in srgb,var(--purple) 60%,var(--card));border-radius:0;inset:3px;z-index:1}
.range-day.range-endpoint.range-start::after{border-radius:11px 0 0 11px}.range-day.range-endpoint.range-end::after{border-radius:0 11px 11px 0}
.range-day.range-endpoint.range-start.range-end::after{border-radius:11px}
.range-actions{grid-template-columns:.8fr 1fr 1.2fr;gap:10px}
.range-actions button{min-height:46px;padding:10px 8px;font-size:14px;border-radius:13px}
.range-remove{color:var(--danger);background:transparent;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line))}
@media(max-height:740px){.top .hero-copy{padding:6px 11px;min-width:120px}.top .hero h1.long-value{font-size:17px;height:28.75px}.ovulation-value{font-size:19px}}
@media(max-height:740px){
 html[data-page=calendar] .top{min-height:48px}
 html[data-page=calendar] #insights .date-title{margin-bottom:1px}
 html[data-page=calendar] #insights .date-title h2{font-size:15px}
 .top .today-heading{gap:3px}
}
/* Three balanced header columns. The middle date never follows nickname width. */
html{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans CJK SC","Microsoft YaHei",sans-serif}
.top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
html[data-page=calendar] .top{min-height:78px;max-height:120px}
.profile-button{display:flex;flex-direction:row;align-items:center;justify-content:center;justify-self:stretch;gap:6px;max-width:100%;width:100%;min-width:44px;min-height:64px;padding:0 2px;border:0;background:none;border-radius:14px;color:var(--purple)}
.profile-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--soft);overflow:hidden;flex-shrink:0}
.profile-avatar svg{width:30px;height:30px;stroke-width:1.6}.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{display:block;min-width:0;max-width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.4;color:var(--muted)}
.top .today-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;min-height:64px;gap:4px}
.top .today-heading>time{font-size:23px;line-height:1.35;white-space:nowrap;letter-spacing:0}
.top .today-heading>span{display:flex;justify-content:center;gap:4px;font-size:11px;line-height:1.5}
.top .hero{justify-self:stretch;justify-content:center;max-width:none;min-width:0;text-align:center}
.top .hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:56px;width:max-content;max-width:100%;padding:6px 8px;border-radius:14px}
.top .hero h1{font-size:24px;line-height:1.3;justify-content:center;font-weight:500}
.top .hero h1.long-value{font-size:17px;height:auto;min-height:30px;justify-content:center;white-space:normal}
.top .prediction-label{font-size:11px;line-height:1.4;white-space:normal;text-align:center;order:1}
.top .header-unit{font-size:13px}.top .hero h1.countdown-value{gap:2px}
.profile-preview{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--soft);color:var(--purple);margin:0 auto 18px}
.profile-preview svg{width:68px;height:68px}.profile-preview img{width:100%;height:100%;object-fit:cover}
.avatar-options{display:flex;gap:12px;justify-content:center;margin:12px 0 18px}
.avatar-options button{width:52px;height:52px;display:grid;place-items:center;padding:5px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--purple)}
.avatar-options button[aria-pressed=true]{border-color:var(--purple);background:var(--soft)}.avatar-options svg{width:38px;height:38px}
.photo-picker{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:12px;color:var(--purple);overflow:hidden;font-size:14px}
.photo-picker input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.photo-picker:focus-within{outline:2px solid var(--purple);outline-offset:2px}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-actions button{min-height:46px}
#profileForm .field small{font-size:12px;color:var(--muted);font-weight:400}
/* A shared, quieter type scale; dense calendar labels retain their footprint. */
.note,.empty-body{font-size:13px;line-height:1.75}
#settingsBody .note{font-size:13px;line-height:1.75}#settingsBody .field{font-size:14px}
.page-heading{padding:12px 4px 16px}.page-heading h1{font-size:26px;margin:0 0 6px}.page-heading .muted{font-size:13px}
.stat-filters button{font-size:14px}.stat-metric{padding:14px;gap:6px;border-radius:18px}
.stat-metric>span{font-size:12px}.stat-metric strong{font-size:28px}.stat-metric .range-value{font-size:26px}
.stat-heading .metric-label{font-size:12px}.stat-heading h2{font-size:18px}
.chart-shell{display:flex;gap:6px;min-width:0;margin-top:8px}
.chart-axis{width:24px;flex:0 0 24px;height:112px;display:flex;flex-direction:column;justify-content:space-between;padding-top:15px;color:var(--muted);font-size:11px;text-align:right}
.stat-scroll{flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:thin}
.chart-plot{height:154px;position:relative;min-width:100%}.chart-plot.duration{height:154px}
.trend-lines{position:absolute;left:0;top:0;width:100%;height:128px;overflow:visible}
.chart-grid{stroke:var(--line);stroke-width:1}.chart-average{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;opacity:.65}
.chart-line{stroke:var(--purple);stroke-width:2;fill:none}
.chart-point{position:absolute;top:0;width:54px;height:150px;min-height:44px;padding:0;border:0;background:none;color:var(--purple);border-radius:8px}
.chart-point .point-dot{position:absolute;top:calc(var(--point-y) - 4px);left:23px;width:8px;height:8px;border:2px solid var(--purple);background:var(--card);border-radius:50%}
.chart-point.latest .point-dot,.chart-point[aria-pressed=true] .point-dot{background:var(--purple)}
.point-value{position:absolute;left:0;width:100%;top:calc(var(--point-y) - 23px);font-size:12px;line-height:18px;font-weight:500}
.point-date{position:absolute;top:126px;left:0;width:100%;font-size:11px;color:var(--muted);white-space:nowrap}
.duration-pillar{position:absolute;bottom:38px;left:16px;width:22px;height:var(--bar-height);background:var(--record-fill);border-radius:6px 6px 2px 2px}
.chart-point.duration{height:150px;color:var(--ink)}.chart-point.duration[aria-pressed=true] .duration-pillar{outline:1px solid var(--purple)}
.chart-caption{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}
.chart-selection{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin-top:10px;border-top:1px solid var(--line);padding-top:4px}.chart-selection .text-button{min-height:44px;white-space:nowrap}
.stat-record{min-height:66px;padding:10px 0}.stat-record strong{font-size:15px}.stat-record small{font-size:12px;line-height:1.5}
.all-records-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;border:0;background:none;color:var(--purple);font-size:14px;border-radius:10px}
.stat-records .note{font-size:12px;margin-bottom:0}.records-page-heading{padding:0 4px 14px}.records-page-heading h1{font-size:25px;margin:12px 0 6px;font-weight:500}.records-page-heading .text-button{min-height:44px;padding-left:0}.records-page-heading p{font-size:13px;margin:0}
#allRecordsBody{display:flex;flex-direction:column;gap:14px}.record-year .stat-record:last-child{border-bottom:0}
.period-summary .summary-value{overflow-wrap:anywhere}
html[data-page=calendar] .calendar .section-heading.caption-tight{min-height:70px;flex-basis:70px}
.caption-tight .calendar-title{flex-direction:column;align-items:flex-start;gap:0}
.caption-tight .calendar-title h2{overflow:visible;flex-shrink:0}
.caption-tight .history-link span{max-width:none;white-space:nowrap}
.caption-tight .history-link{justify-content:flex-start}
@media(max-width:375px){.top{gap:5px}.top .today-heading>time{font-size:21px}.top .hero h1{font-size:22px}.top .hero h1.long-value{font-size:16px}.profile-name{max-width:70px}.top .hero-copy{padding:6px 8px}.top .prediction-label{font-size:10px}}
@media(max-height:740px){html[data-page=calendar] .top{min-height:64px}.top .hero-copy{min-width:0;padding:6px 8px}.top .hero h1.long-value{height:auto;font-size:16px}.profile-avatar{width:30px;height:30px}.profile-button{min-height:56px}}

/* Optical centers follow the month text; hit areas remain 44px. */
.calendar-controls .icon-button{padding:0;line-height:1}
.calendar-controls .icon-button svg,.range-month .icon-button svg{width:18px;height:18px;stroke-width:1.8;transform:translateY(-1px)}

/* Release 1.4: stable slots across every data state; only environment can resize. */
html[data-page=calendar] .top{flex:0 0 88px;min-height:88px;max-height:88px}
.top .hero{justify-content:flex-end}
.top .hero-copy{width:100px;max-width:100%;flex-shrink:0}
.top .empty-forecast .hero-copy{background:transparent}
.profile-button{width:100px;max-width:100%;justify-self:start;justify-content:flex-end;padding:0;gap:6px}
.profile-avatar{width:44px;height:44px}.profile-avatar svg{width:36px;height:36px}
.profile-name{flex:0 1 auto;max-width:calc(100% - 50px)}
html[data-page=calendar] #insights{--summary-label:calc(18px*var(--summary-scale,1));--summary-value:calc(32px*var(--summary-scale,1));--summary-foot:calc(18px*var(--summary-scale,1));height:calc(78px + var(--summary-label) + var(--summary-value) + var(--summary-foot));min-height:0;max-height:none;flex:0 0 auto;padding:10px 16px;justify-content:flex-start}
html[data-page=calendar] #insights .date-title{flex:0 0 44px;min-height:44px;height:44px;margin:0 0 4px}
html[data-page=calendar] #insights .combined-summary{height:calc(var(--summary-label) + var(--summary-value) + var(--summary-foot) + 8px);min-height:0;flex:0 0 auto;gap:12px;align-items:start}
.period-column{position:relative;min-width:0}
html[data-page=calendar] #insights .period-summary,html[data-page=calendar] #insights .chance-summary{display:grid;grid-template-rows:var(--summary-label) var(--summary-value) var(--summary-foot);gap:4px;align-items:center;justify-content:stretch;height:100%;min-height:0;padding:0;overflow:hidden}
html[data-page=calendar] #insights .mini-secondary{min-width:0;padding-left:12px;height:100%}
html[data-page=calendar] #insights .metric-label{font-size:11px;line-height:1.4;display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-page=calendar] #insights .summary-value{font-size:20px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
html[data-page=calendar] #insights .mini-number{font-size:26px;line-height:1.2;white-space:nowrap;margin:0}
html[data-page=calendar] #insights .chance-level{font-size:24px;line-height:1.2;white-space:nowrap}
html[data-page=calendar] #insights .summary-caption{display:block;visibility:hidden;height:var(--summary-foot);font-size:10px;line-height:1.4;overflow:hidden}
html[data-page=calendar] #insights .chance-meter{align-self:center;max-width:100%;width:80px;height:4px}
html[data-page=calendar] #insights .ovulation-value{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-page=calendar] #insights .ovulation-range{font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary-demo{position:absolute;left:0;bottom:0;display:flex;align-items:center;min-height:18px;height:var(--summary-foot);border:0;border-radius:6px;background:transparent;color:var(--purple);padding:0;font-size:11px;line-height:1.4;z-index:1}
#profileForm .profile-name-field{display:flex;flex-direction:column;gap:10px;line-height:1.5;margin:18px 0}
#profileForm .profile-name-field input{margin:0;line-height:1.5;min-height:50px}
#profileForm .profile-name-field small{display:block;margin:0;font-size:12px;line-height:1.6}
#sheet:has(#profileForm){display:flex;flex-direction:column;max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));overflow:hidden}
#sheet:has(#profileForm):not([open]){display:none}
#sheet:has(#profileForm) .sheet-header{flex-shrink:0;margin-bottom:10px}
#sheet:has(#profileForm) #sheetBody{min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px}
@media(max-height:740px){
 html[data-page=calendar] .top{flex-basis:72px;min-height:72px;max-height:72px}
 .profile-avatar{width:40px;height:40px}.profile-avatar svg{width:34px;height:34px}.profile-name{max-width:calc(100% - 46px)}
 html[data-page=calendar] #insights{padding:8px 12px;height:calc(74px + var(--summary-label) + var(--summary-value) + var(--summary-foot))}
}

html[data-page=calendar] #insights .demo-summary .summary-caption{visibility:visible;color:var(--purple)}
html[data-page=calendar] .calendar .section-heading.caption-tight{min-height:44px;flex-basis:44px}
.caption-tight .calendar-title{flex-direction:row;align-items:center;gap:3px}
.caption-tight .calendar-title h2{font-size:14px}
.caption-tight .history-link{min-width:44px;justify-content:center}
.caption-tight .history-link span{display:none}
/* On very small screens, enlarged text scrolls only the date pane, never the page. */
html[data-page=calendar] .calendar-viewport[data-scrollable=true]{overflow-y:auto;overscroll-behavior-y:contain}
html[data-page=calendar] .calendar-viewport[data-scrollable=true] .calendar-track{height:var(--accessible-track-height)}
html[data-page=calendar] .calendar-viewport[data-scrollable=true] .day{font-size:14px}
html[data-page=calendar] .calendar-viewport[data-scrollable=true] .day-number{top:-4px}
html[data-page=calendar] .calendar-viewport[data-scrollable=true] .day .fertility-mark,html[data-page=calendar] .calendar-viewport[data-scrollable=true] .day .egg-mark{width:8px;height:8px;bottom:2px;left:calc(50% - 4px)}

.top .hero-copy{width:max-content;min-width:74px;max-width:100%;flex-shrink:1}
.profile-button{width:var(--header-wing,74px)}
.profile-name{max-width:calc(100% - 50px)}
@media(max-height:740px){.profile-name{max-width:calc(100% - 46px)}}

html[data-page=calendar] #insights .period-summary .summary-caption{display:block;font-size:10px;line-height:1.4}
html[data-page=calendar] #insights .period-summary .summary-value{font-size:20px;line-height:1.2}
html[data-page=calendar] #insights .chance-summary .chance-level.is-unavailable{font-size:20px}
.day .today-label{top:0;right:1px;z-index:4;display:grid;place-items:center;min-width:12px;height:12px;padding:0;line-height:1;border-radius:4px;pointer-events:none}

/* 1.4.1: balanced number rows, meaningful fixed-height footnotes and avatars. */
.top .hero h1.countdown-value{justify-content:center;align-self:center;width:max-content;margin-inline:auto;gap:3px}
html[data-page=calendar] #insights .mini-number{display:flex;align-items:baseline;justify-content:flex-start;gap:3px}
html[data-page=calendar] #insights .period-summary .summary-caption{visibility:visible;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--muted)}
html[data-page=calendar] #insights .demo-summary .summary-caption{color:var(--purple)}
.avatar-options{display:grid;grid-template-columns:repeat(4,52px);gap:12px;justify-content:center}
.profile-avatar img.illustrated-avatar,.profile-preview img.illustrated-avatar,.avatar-options img.illustrated-avatar{width:84%;height:84%;object-fit:contain}
.avatar-options img.illustrated-avatar{width:100%;height:100%}

html[data-page=calendar] #insights .mini-number .number-prefix,html[data-page=calendar] #insights .mini-number small{margin:0}
html[data-page=calendar] #insights .period-summary .summary-value.status-long{font-size:clamp(14px,3.8vw,16px)}

/* Preview: give the profile its whole grid wing, never the countdown's width. */
.profile-button{width:100%;justify-content:flex-start;gap:4px}
.profile-avatar{width:52px;height:52px}
.profile-avatar svg{width:44px;height:44px}
.profile-name{font-size:12px;line-height:1.35;flex:0 1 auto;min-width:2em;max-width:calc(100% - 56px);white-space:normal;word-break:break-all;overflow:visible;text-overflow:clip}

/* Preview refinement: light selections, browsable summaries and continuous sheets. */
.range-day.range-endpoint i{background:var(--pink)}
.range-key .range-dot{background:var(--soft);border:1px solid var(--purple)}
#monthTitle{display:inline-flex;align-items:center;min-height:44px;border:0;padding:0;background:none;color:inherit;font:inherit;line-height:inherit;white-space:nowrap;cursor:pointer}
#monthTitle:focus-visible{outline:1px solid var(--purple);outline-offset:3px;border-radius:5px}
#monthPicker{margin:auto;max-width:440px;padding-bottom:22px;overflow:hidden}
#monthPicker .sheet-header{margin-bottom:10px}
.wheel-labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;color:var(--muted);font-size:12px;margin-bottom:8px}
.month-wheels{display:grid;grid-template-columns:1fr 1fr;position:relative;height:220px;isolation:isolate}
.wheel-highlight{position:absolute;inset:88px 0;z-index:-1;border-radius:13px;background:var(--soft);border-block:1px solid var(--line);pointer-events:none}
.date-wheel{height:220px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;padding-block:88px;mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);touch-action:pan-y}
.date-wheel::-webkit-scrollbar{display:none}.date-wheel:focus-visible{outline:1px solid var(--purple);outline-offset:-2px;border-radius:12px}
.wheel-item{height:44px;min-height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;color:var(--muted);font-size:18px;cursor:pointer;font-variant-numeric:tabular-nums}
.wheel-item[aria-selected=true]{color:var(--purple);font-weight:500}
.month-picker-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.month-picker-actions button{min-height:46px}
.record-years{position:sticky;top:0;z-index:3;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;background:var(--bg);padding:10px 0 14px;margin-bottom:4px;scrollbar-width:none}
.record-years button{flex:0 0 auto;min-width:80px;min-height:44px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--muted);padding:8px 14px}
.record-years button[aria-pressed=true]{background:var(--soft);border-color:var(--purple);color:var(--purple)}
.statistics-summary{margin:0;padding:12px 15px;border-radius:15px;background:var(--soft);color:var(--purple);font-size:13px;line-height:1.8}
.stat-variation .note,.stat-distribution .note,.stat-footprint .note{font-size:11px;line-height:1.7;margin:12px 0 0}
.variation-plot{height:140px;position:relative}.variation-plot svg{position:absolute;width:100%;height:128px;overflow:visible}
.variation-point{position:absolute;top:0;width:54px;height:140px;padding:0;background:none;border:0;color:var(--purple)}
.variation-point strong{position:absolute;top:calc(var(--variation-y) - 24px);left:0;right:0;font-size:12px;font-weight:500}
.variation-point i{position:absolute;top:calc(var(--variation-y) - 4px);left:23px;width:8px;height:8px;border-radius:50%;border:2px solid var(--purple);background:var(--card)}
.variation-point small{position:absolute;bottom:3px;left:0;right:0;font-size:10px;color:var(--muted)}
.duration-distribution{display:flex;flex-direction:column;gap:4px;margin-top:5px}.distribution-row{display:grid;grid-template-columns:38px 1fr 35px;gap:10px;align-items:center;width:100%;min-height:44px;background:none;border:0;font-size:12px;text-align:left;color:var(--muted);padding:3px 0}
.distribution-row>i{height:10px;border-radius:8px;background:var(--bg);overflow:hidden}.distribution-row b{display:block;height:100%;border-radius:8px;background:var(--record-fill)}.distribution-row strong{font-weight:400;text-align:right;color:var(--purple)}
.stat-footprint select{min-height:44px;max-width:110px;border:1px solid var(--line);background:var(--card);color:var(--purple);border-radius:10px;padding:5px 8px;font:inherit;font-size:12px}
.footprint-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.footprint-month{min-width:0;border:1px solid var(--line);border-radius:12px;background:transparent;padding:9px;color:var(--ink);text-align:left}
.footprint-month>span:first-child{display:flex;justify-content:space-between;gap:3px;font-size:12px;line-height:1.5;margin-bottom:7px}.footprint-month small{font-size:9px;color:var(--muted)}
.footprint-dots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,6px);gap:3px}.footprint-dots i{display:block;border-radius:2px;background:var(--line);min-width:0}.footprint-dots i.recorded{background:var(--pink)}.footprint-dots i.future{opacity:.35}.footprint-dots i.spacer{visibility:hidden}
#sheet[open]:not(:has(form)){display:flex;flex-direction:column;overflow:hidden}
#sheet:not(:has(form))>.sheet-header,#sheet>.sheet-grip{flex-shrink:0}
#sheet:not(:has(form))>.sheet-header{touch-action:none}
#sheet:not(:has(form))>#sheetBody{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
#sheet[data-dragging]{user-select:none;will-change:transform}
#sheet::backdrop{background:rgb(50 38 59 / calc(.22 * var(--sheet-backdrop,1)));backdrop-filter:blur(calc(5px * var(--sheet-backdrop,1)));transition:background .2s,backdrop-filter .2s}
@media(max-height:740px){
 .profile-avatar{width:48px;height:48px}
 .profile-avatar svg{width:40px;height:40px}
 .profile-name{max-width:calc(100% - 52px)}
}