/* Calendar-only geometry. Theme assets decorate these slots without resizing them. */
.calendar-theme-name{display:none}
.calendar-legend-help{display:none}
.calendar-legend-detail .legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;margin:0 0 16px}
:root[data-page=calendar][data-calendar-layout=fixed],
:root[data-page=calendar][data-calendar-layout=fixed] body{height:100%;min-height:0;overflow:hidden}
:root[data-page=calendar][data-calendar-layout=fixed] .shell{
 --nav-height:56px;--calendar-gap:8px;--summary-height:136px;
 display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;
 gap:var(--calendar-gap);padding:calc(16px + var(--safe-top)) 16px calc(8px + var(--nav-height) + var(--safe-bottom));
}
:root[data-page=calendar][data-calendar-layout=fixed] .top{
 display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);
 grid-template-rows:60px 44px;gap:6px 8px;flex:0 0 auto;height:110px;min-height:110px;max-height:110px;
 margin:0;align-items:center;position:relative;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top::after{display:none}
:root[data-page=calendar][data-calendar-layout=fixed] .profile-button{
 grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;min-width:0;width:100%;min-height:48px;gap:4px;padding:0;
}
:root[data-page=calendar][data-calendar-layout=fixed] .profile-avatar{width:48px;height:48px;flex:none}
:root[data-page=calendar][data-calendar-layout=fixed] .profile-avatar svg{width:38px;height:38px}
:root[data-page=calendar][data-calendar-layout=fixed] .profile-name{
 max-width:calc(100% - 52px);flex:0 1 auto;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.4;text-align:left;
}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-theme-name{
 display:block;grid-column:2;grid-row:1;justify-self:center;width:max-content;max-width:calc(100% - 16px);min-width:0;margin:0;text-align:center;
 font-family:'Noto Serif CJK SC','SimSun',serif;font-size:20px;font-weight:400;letter-spacing:3px;
 color:var(--purple);line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top .today-heading{
 grid-column:3;grid-row:1;position:static;transform:none;justify-self:end;align-items:flex-end;
 width:auto;min-width:0;min-height:0;gap:2px;margin-right:8px;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top .today-heading>time{font-size:22px;line-height:1.3;white-space:nowrap}
:root[data-page=calendar][data-calendar-layout=fixed] .top .today-heading>span{font-size:10px;line-height:1.4;gap:3px}
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero{
 grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-self:stretch;justify-content:center;
 width:100%;max-width:none;min-height:44px;height:44px;margin:0;padding:0 12px;
 border:1px solid var(--line);border-radius:999px;background:var(--card);text-align:center;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero-copy{
 display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:12px;transform:translateY(-1px);
 width:auto;max-width:100%;min-width:0;min-height:0;padding:0;background:none;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top .prediction-label{
 order:0;flex:none;margin:0;padding-right:12px;border-right:1px solid var(--line);
 font-size:12px;line-height:1.5;white-space:nowrap;text-align:center;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero h1,
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero h1.long-value,
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero h1.countdown-value{
 order:1;display:flex;align-items:baseline;align-self:baseline;justify-content:center;
 min-height:0;height:auto;margin:0;gap:4px;font-family:inherit;font-size:18px;line-height:1.3;
 letter-spacing:0;white-space:nowrap;
}
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero .header-number{font-family:inherit;font-size:20px;line-height:1.2;font-weight:400;transform:none}
:root[data-page=calendar][data-calendar-layout=fixed] .top .hero .header-unit{font-size:13px;line-height:1.4}
:root[data-page=calendar][data-calendar-layout=fixed] .top #subline{display:none}
:root[data-page=calendar][data-calendar-layout=fixed] #calendarPage,
:root[data-page=calendar][data-calendar-layout=fixed] .workspace{
 display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:var(--calendar-gap);
}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar.card{
 display:flex;flex-direction:column;flex:1 1 0;min-height:0;margin:0;padding:6px 12px 8px;
 border:1px solid var(--line);border-radius:22px;overflow:hidden;
}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar.card::after{display:none}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar .section-heading,
:root[data-page=calendar][data-calendar-layout=fixed] .calendar .section-heading.caption-tight{
 flex:0 0 44px;min-height:44px;margin:0 0 2px;gap:4px;padding-left:calc(100% / 14 - 8px);
}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-title{flex-direction:row;align-items:center;gap:6px;min-width:0}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-title h2{font-size:17px;line-height:1.4;overflow:visible}
:root[data-page=calendar][data-calendar-layout=fixed] .history-link{min-width:32px;min-height:44px;justify-content:center}
:root[data-page=calendar][data-calendar-layout=fixed] .history-link span{font-size:10px}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-controls{flex:none;gap:0;margin-right:calc(100% / 14 - 18px)}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-controls .icon-button{min-width:36px;width:36px;min-height:44px;height:44px}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-controls .today-button{min-width:40px;min-height:36px;height:36px;padding:0 6px}
:root[data-page=calendar][data-calendar-layout=fixed] .caption-tight .history-link span{display:none}
:root[data-page=calendar][data-calendar-layout=fixed] .weekdays{flex:0 0 20px;min-height:20px;margin:0 0 2px;font-size:11px}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-viewport{flex:1 1 0;height:auto;min-height:0;overflow:hidden;touch-action:pan-y}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-track{height:100%;min-height:0}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-grid.month-page{
 height:100%;min-height:0;grid-template-rows:repeat(var(--grid-rows,6),minmax(0,1fr));row-gap:2px;
}
:root[data-page=calendar][data-calendar-layout=fixed] .month-page .day{height:100%;min-height:0;font-size:15px}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-footer{flex:none;gap:4px;padding-top:5px;margin-top:4px;min-height:0}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-footer .legend{
 flex:0 0 auto;min-height:18px;gap:2px 7px;justify-content:center;font-size:9px;line-height:1.4;
}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-footer .overlay-options{flex:none;min-height:38px;margin:0;padding:0;border:0}
:root[data-page=calendar][data-calendar-layout=fixed] .calendar-footer .overlay-button{min-height:38px;font-size:12px;padding:2px 4px}
/* One date/status row and one selected prediction, shared across all themes. */
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]){
 --summary-number-size:42px;flex:0 0 var(--summary-height,142px);height:var(--summary-height,142px);min-height:0;margin:0;
 display:flex;flex-direction:column;justify-content:flex-start;gap:2px;padding:12px 20px 10px;border-radius:16px;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .date-title{
 display:grid;grid-template-columns:minmax(0,1fr) auto 44px;flex:none;min-height:32px;height:32px;margin:0;border:0;align-items:center;gap:12px;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .date-title h2{
 flex:none;min-width:0;font-size:20px;font-weight:500;line-height:1.25;white-space:nowrap;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-weekday{font-size:13.5px;color:var(--muted);font-weight:400}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-state{
 display:block;flex:0 1 auto;min-width:0;max-width:100%;justify-self:end;height:25px;min-height:25px;margin:0;transform:translateY(2px);
 padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 border:0;border-radius:999px;background:var(--soft);color:var(--ink);font-size:12px;font-weight:400;line-height:25px;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-actions{
 flex:none;display:flex;align-items:center;align-self:center;justify-content:flex-end;gap:2px;height:32px;width:44px;margin:0;transform:translateY(2px);
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .expand-insights{
 display:flex;align-items:center;justify-content:flex-end;gap:2px;min-height:32px;height:32px;min-width:44px;width:44px;
 font-size:14px;font-weight:400;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .expand-insights svg{display:block;width:10px;height:12px}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .combined-summary{
 display:block;flex:none;min-height:0;height:82px;margin:0;padding:0;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .combined-summary::after{display:none}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-metric{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:48px 20px;
 align-items:center;gap:6px 10px;width:100%;height:100%;min-height:0;
 padding:0;border:0;border-radius:10px;background:none;color:inherit;text-align:left;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .metric-label{
 grid-column:1;grid-row:1;display:block;align-self:baseline;min-width:0;font-size:21px;font-weight:500;line-height:1.2;
 color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .chance-level,
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-value{
 grid-column:2;grid-row:1;align-self:baseline;justify-self:end;margin:0;position:relative;top:2px;
 color:var(--ink);font-size:var(--summary-number-size,42px);font-weight:500;line-height:1.1;white-space:nowrap;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-value{color:color-mix(in srgb,var(--ovulation-ink) 75%,var(--ink));font-size:calc(var(--summary-number-size,42px)*.67);font-weight:500}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .chance-level small,
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-value small{font-size:20px;font-weight:400;position:relative;top:-2px}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-value small{font-size:.75em;font-weight:500}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .is-unavailable{font-size:19px}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-caption{
 grid-column:1;grid-row:2;display:block;visibility:visible;height:auto;margin:0;
 font-size:13px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-range{
 grid-column:2;grid-row:2;justify-self:end;display:block;min-width:0;max-width:100%;height:auto;margin:0;
 font-size:13px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .chance-meter{
 grid-column:2;grid-row:2;justify-self:end;align-self:center;display:flex;gap:4px;width:116px;max-width:100%;height:8px;
}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .chance-meter i{height:8px;border-radius:999px}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-metric:active{background:var(--soft)}
:root[data-page=calendar][data-calendar-layout=fixed] .action-area{
 display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr);gap:8px;
 flex:0 0 58px;min-height:58px;height:58px;position:static;width:100%;margin:0;padding:0;transform:none;background:transparent;
}
:root[data-page=calendar][data-calendar-layout=fixed] .daily-control,
:root[data-page=calendar][data-calendar-layout=fixed] .backfill-button{height:58px;min-height:58px;padding:4px;font-size:12px;gap:4px;border-radius:17px}
:root[data-page=calendar][data-calendar-layout=fixed] .backfill-button svg{width:23px;height:23px}
:root[data-page=calendar][data-calendar-layout=fixed] .bottom-nav{
 height:calc(56px + var(--safe-bottom));padding:3px 16px calc(3px + var(--safe-bottom));box-shadow:none;
}
:root[data-page=calendar][data-calendar-layout=fixed] .bottom-nav button{min-height:44px;gap:2px;font-size:11px;border-radius:15px}
:root[data-page=calendar][data-calendar-layout=fixed] .bottom-nav button svg{width:21px;height:21px}
:root[data-page=calendar][data-calendar-layout=fixed] .toast{bottom:calc(126px + var(--safe-bottom))}
@media(max-width:375px){
 :root[data-page=calendar][data-calendar-layout=fixed] .shell{padding-left:12px;padding-right:12px}
 :root[data-page=calendar][data-calendar-layout=fixed] .top{column-gap:5px}
 :root[data-page=calendar][data-calendar-layout=fixed] .top .today-heading>time{font-size:20px}
 :root[data-page=calendar][data-calendar-layout=fixed] .calendar-title h2{font-size:16px}
 :root[data-page=calendar][data-calendar-layout=fixed] .history-link span{display:none}
 :root[data-page=calendar][data-calendar-layout=fixed] .calendar-theme-name{font-size:18px;letter-spacing:2px}
 :root[data-page=calendar][data-calendar-layout=fixed] .calendar .section-heading,
 :root[data-page=calendar][data-calendar-layout=fixed] .calendar .section-heading.caption-tight{padding-left:calc(100% / 14 - 8px)}
 :root[data-page=calendar][data-calendar-layout=fixed] .calendar-controls .icon-button{min-width:32px;width:32px}
 :root[data-page=calendar][data-calendar-layout=fixed] .calendar-controls{margin-right:calc(100% / 14 - 16px)}
}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .shell{--calendar-gap:5px;--nav-height:50px;padding-top:calc(11px + var(--safe-top));padding-bottom:calc(5px + var(--nav-height) + var(--safe-bottom))}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .top{grid-template-rows:54px 36px;height:96px;min-height:96px;max-height:96px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .profile-name{line-height:1.2}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .top .hero{height:36px;min-height:36px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .top .hero .header-number{font-size:20px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .calendar.card{padding-top:3px;padding-bottom:5px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .calendar-footer{flex-direction:row;align-items:center;gap:4px;padding-top:3px;margin-top:3px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .calendar-footer .legend{display:none}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .calendar-legend-help{display:block;flex:0 0 36px;height:36px;padding:0;border:0;border-radius:10px;font-size:11px;background:var(--soft);color:var(--purple)}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .calendar-footer .overlay-options{flex:1;min-height:36px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .calendar-footer .overlay-button{font-size:11px;min-height:34px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights{padding-left:12px;padding-right:12px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .month-page .day{font-size:14px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .day .fertility-mark,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .day .egg-mark{width:8px;height:8px;left:calc(50% - 4px);bottom:1px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .action-area,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .daily-control,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .backfill-button{height:48px;min-height:48px;flex-basis:48px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] .bottom-nav{height:calc(50px + var(--safe-bottom));padding-top:2px;padding-bottom:calc(2px + var(--safe-bottom))}

:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights .chance-level,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights .ovulation-value{font-size:var(--summary-number-size,36px)}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights .is-unavailable{font-size:18px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights .metric-label{font-size:18px}
@media(max-width:375px){
 :root[data-page=calendar][data-calendar-layout=fixed] #insights .date-title{gap:4px}
 :root[data-page=calendar][data-calendar-layout=fixed] #insights .summary-state{padding:0 6px;margin-left:0}
 :root[data-page=calendar][data-calendar-layout=fixed] #insights .date-title h2{font-size:18px}
 :root[data-page=calendar][data-calendar-layout=fixed] #insights .summary-weekday{font-size:11px}
}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] .shell{--summary-height:144px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] .top{grid-template-rows:50px 36px;height:92px;min-height:92px;max-height:92px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .date-title h2{font-size:14px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .summary-weekday{font-size:10px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .summary-state{font-size:10.5px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .expand-insights{font-size:11px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .metric-label{font-size:17px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .chance-level,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .ovulation-value{font-size:var(--summary-number-size,28px)}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .chance-level small,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .ovulation-value small{font-size:14px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .summary-caption,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .ovulation-range{font-size:10px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .is-unavailable{font-size:18px}

.theme-preview-content [data-preview-id=insights] .date-title h2{font-size:14px}
.theme-preview-content [data-preview-id=insights] .summary-state{font-size:10.5px}

:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights .combined-summary{padding-left:0;padding-right:0}

:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .chance-level::before,
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-value::before{content:'0';display:inline-block;width:0;visibility:hidden;font-size:var(--summary-number-size,42px);line-height:1.1}
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .summary-caption,
:is(:root[data-page=calendar][data-calendar-layout=fixed] #insights,.theme-preview-content [data-preview-id=insights]) .ovulation-range{align-self:center}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights{--summary-number-size:36px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights{--summary-number-size:28px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .date-title h2{font-size:13px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .summary-weekday{font-size:8.5px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .combined-summary{height:90px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .summary-metric{grid-template-rows:62px 22px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights{padding-bottom:8px}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .chance-level small,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .ovulation-value small{font-size:12px}

/* Calendar thumbnail uses the same component at its narrower preview width. */
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights]{--summary-number-size:34px}
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .date-title h2{font-size:14px}
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .summary-weekday{font-size:10px}
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .summary-state{font-size:10.5px}
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .expand-insights{font-size:11px}
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .metric-label{font-size:16px}
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .summary-caption,
#themeScene[data-preview-page=calendar] .theme-preview-content [data-preview-id=insights] .ovulation-range{font-size:10px}

:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-density=compact] #insights .ovulation-value,
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .ovulation-value{font-size:calc(var(--summary-number-size)*.67)}
:root[data-page=calendar][data-calendar-layout=fixed][data-calendar-text=large] #insights .ovulation-value small{font-size:.75em}

/* Six logical paint layers. A/E retain the original live controls and month rail. */
.calendar-layer-plane{position:fixed;inset:0;pointer-events:none!important;overflow:hidden;user-select:none}
.calendar-layer-plane[data-calendar-plane=F]{z-index:0}
.calendar-layer-plane[data-calendar-plane=D]{z-index:10}
.calendar-layer-plane[data-calendar-plane=B]{z-index:20}
.calendar-layer-plane[data-calendar-plane=C]{z-index:30}
:root:not([data-page=calendar]) body>.calendar-layer-plane{display:none}
:root[data-page=calendar][data-calendar-layers=on] .shell{position:relative;z-index:60}
:root[data-page=calendar][data-calendar-layers=on] .shell [data-surface-cloned]{background:none!important;border-color:transparent!important;box-shadow:none!important}
:root[data-page=calendar][data-calendar-layers=on] .shell button[data-surface-cloned]:active{background:var(--soft)!important}
:root[data-page=calendar][data-calendar-layers=on] .day::before{z-index:50}
:root[data-page=calendar][data-calendar-layers=on] .day.actual::before{background:color-mix(in srgb,var(--record-fill) var(--theme-state-opacity),transparent)}
:root[data-page=calendar][data-calendar-layers=on] .day.predicted::before{background:color-mix(in srgb,var(--forecast-fill) var(--theme-state-opacity),transparent)}
:root[data-page=calendar][data-calendar-layers=on] .day.ovulation::before{background:color-mix(in srgb,var(--ovulation-fill) var(--theme-state-opacity),transparent)}
:root[data-page=calendar][data-calendar-layers=on] .day-number,
:root[data-page=calendar][data-calendar-layers=on] .today-label,
:root[data-page=calendar][data-calendar-layers=on] .day .fertility-mark,
:root[data-page=calendar][data-calendar-layers=on] .day .egg-mark,
:root[data-page=calendar][data-calendar-layers=on] .day.selected::after{z-index:60}
:root[data-page=calendar][data-calendar-layers=on] .toast{z-index:1000}
.calendar-surface-copy{position:absolute;box-sizing:border-box;overflow:hidden}
.calendar-page-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.calendar-panel-background{width:100%;height:100%;object-fit:cover}
.calendar-theme-decoration{position:absolute;height:auto;max-width:none;pointer-events:none!important}
.calendar-art-viewport{position:absolute;overflow:hidden}
.calendar-art-track{display:flex;width:100%;height:100%;transform:translateX(-100%)}
.calendar-art-page{position:relative;flex:0 0 100%;width:100%;height:100%}
.calendar-decoration-boundary{position:absolute;overflow:hidden}
.calendar-layer-host{position:relative;isolation:isolate}
.calendar-layer-host>.calendar-layer-plane{position:absolute}
.calendar-layer-host[data-calendar-layers=on]>:not(.calendar-layer-plane){position:relative;z-index:60}
.calendar-layer-host[data-calendar-layers=on] [data-surface-cloned]{background:none!important;border-color:transparent!important;box-shadow:none!important}
.calendar-layer-host[data-calendar-layers=on] .day::before{z-index:50}
.calendar-layer-host[data-calendar-layers=on] .day.actual::before{background:color-mix(in srgb,var(--record-fill) var(--theme-state-opacity),transparent)}
.calendar-layer-host[data-calendar-layers=on] .day.predicted::before{background:color-mix(in srgb,var(--forecast-fill) var(--theme-state-opacity),transparent)}
.calendar-layer-host[data-calendar-layers=on] .day.ovulation::before{background:color-mix(in srgb,var(--ovulation-fill) var(--theme-state-opacity),transparent)}
.calendar-layer-host[data-calendar-layers=on] :is(.day-number,.today-label,.fertility-mark,.egg-mark){z-index:60}