/* Fixed calendar geometry: badges, numerals and event marks never move each other. */
.visual .calendar-days{grid-auto-rows:84px;gap:8px 4px;align-items:stretch}
.visual .calendar-days button[data-date]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:16px 28px 24px;align-content:start;justify-content:stretch;align-items:center;align-self:stretch;justify-items:center;box-sizing:border-box;width:100%;height:84px;min-height:84px;aspect-ratio:auto;padding:4px 1px 6px;gap:0;border:1px solid transparent;border-radius:14px;color:var(--text-on-light);transform:none;box-shadow:none}
.visual .calendar-days button[data-date][aria-current=date]{border-width:1px;border-color:var(--active)}
.visual .calendar-days .calendar-day-number{grid-row:2;grid-column:1;display:block;margin:0;padding:0;height:28px;line-height:28px;font:500 20px/28px system-ui,"Segoe UI",sans-serif;font-variant-numeric:lining-nums tabular-nums}
.visual .calendar-days button[data-date] .calendar-event-markers,.visual .calendar-days button[data-date] .calendar-event-markers:empty{grid-row:3;grid-column:1;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;min-height:24px;gap:2px;margin:0;max-width:100%}
.visual .calendar-days .calendar-today-label{position:absolute;top:3px;right:3px;left:auto;transform:none;min-width:14px;height:14px;padding:0 2px;box-sizing:border-box;text-align:center;font:500 9px/14px TarolaSans,sans-serif;border-radius:4px;background:var(--active);color:var(--on-active)}
.visual .calendar-days button>.calendar-session-mark{left:3px;top:3px;height:14px;min-width:14px;padding:0 2px;font-size:9px;line-height:14px}
.visual .calendar-days .calendar-plan-count{left:3px;right:auto;top:3px;min-width:14px;height:14px;font-size:9px;line-height:14px}
.visual .calendar-days button:has(.calendar-session-mark) .calendar-plan-count{top:auto;bottom:2px;left:auto;right:2px;min-width:12px;height:12px;font-size:8px;line-height:12px}
.visual[data-theme=night] .calendar-days button[data-date]{color:var(--text-on-dark)}
.visual .calendar-days button[data-date][aria-pressed=true]{background:var(--active);color:var(--on-active);border-color:transparent;box-shadow:none;transform:none}
.visual .calendar-days button[data-date][aria-pressed=true] .calendar-today-label{background:var(--on-active);color:var(--active)}
.visual .calendar-days button[data-date]:focus-visible{outline:2px solid var(--active);outline-offset:2px}
.visual .calendar-days .calendar-event-symbol,.visual .calendar-days .calendar-event-markers .calendar-moon-marker{width:18px;min-width:18px;height:20px;flex-shrink:0}
.visual .calendar-days .calendar-event-symbol svg{width:17px;height:17px}
.visual .calendar-days .calendar-event-more{min-width:12px;font-size:10px}
/* Unavailable entries communicate their state without opening an empty dialog. */
.visual button.entry-unavailable{opacity:1;cursor:default;pointer-events:auto;color:var(--text-on-light);transform:none}
.visual button.entry-unavailable small,.visual .entry-unavailable .entry-state{color:var(--text-muted-on-light)}
.visual[data-theme=night] button.entry-unavailable{color:var(--text-on-dark)}
.visual[data-theme=night] button.entry-unavailable small,.visual[data-theme=night] .entry-unavailable .entry-state{color:var(--text-muted-on-dark)}
.visual .entry-state{font-size:11px;font-weight:400;line-height:1.5;white-space:normal;flex-shrink:0}
.visual .account-secondary .entry-unavailable{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.visual .entry-unavailable .action-arrow,.visual .entry-unavailable .featured-entry-button{display:none}
.visual .entry-service-state{display:block;font:400 11px/1.5 TarolaSans,sans-serif;margin-top:3px;flex-basis:100%;color:inherit}
.visual .welcome a.entry-unavailable{flex-wrap:wrap;cursor:default}
.visual a.entry-unavailable[aria-disabled=true]{cursor:default}
.visual[data-theme] button.primary.entry-unavailable,.visual[data-theme] button.primary.entry-unavailable .entry-service-state{color:var(--on-active)}
.visual .entry-unavailable[data-tool=homer]>small:not(.entry-service-state),.visual .entry-unavailable[data-tool=daily]>small:not(.entry-service-state){display:none}
.visual .list-row.entry-unavailable{flex-wrap:wrap}
.visual .list-row.entry-unavailable>span:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
.visual .list-row.entry-unavailable>.entry-service-state{margin-top:-8px;flex-basis:100%;white-space:normal}
.visual .tool-item button.primary.entry-unavailable{justify-content:center;min-height:44px}
.visual .personal-plan-dialog input,.visual .personal-plan-dialog select,.visual .personal-plan-dialog textarea{min-width:0;max-width:100%;box-sizing:border-box}
.visual .personal-plan-dialog,.visual .activity-detail{overflow-wrap:anywhere;overscroll-behavior:contain}
.visual .plan-item>div{min-width:0}.visual .plan-item strong,.visual .plan-notes p{overflow-wrap:anywhere}
@media(max-width:1000px){.visual .calendar-layout{grid-template-columns:minmax(0,1fr)}.visual .calendar-panel{grid-column:1;grid-row:1}.visual .calendar-detail{grid-column:1;grid-row:2}.visual .calendar-layout>.magic-live{grid-column:1;grid-row:3}}
@media(max-width:700px){
 .visual .calendar-days{grid-auto-rows:78px;gap:7px 2px}
 .visual .calendar-days button[data-date]{height:78px;min-height:78px;grid-template-rows:15px 26px 23px;padding:3px 0 5px;border-radius:11px}
 .visual .calendar-days .calendar-day-number{font-size:19px;height:26px;line-height:26px}
 .visual .calendar-days button[data-date] .calendar-event-markers{height:23px;min-height:23px;gap:1px}
 .visual .calendar-panel{padding-inline:12px}
 .visual .calendar-days .calendar-event-symbol,.visual .calendar-days .calendar-event-markers .calendar-moon-marker{width:16px;min-width:16px;height:18px;font-size:14px}
 .visual .calendar-days .calendar-event-symbol svg{width:15px;height:15px}
 .visual .calendar-days .calendar-event-more{min-width:11px;font-size:9px}
 .visual .ph-date-nav button{min-height:44px;height:44px}
 .visual .ph-date-picker:not([hidden]){flex-wrap:wrap;gap:6px}
 .visual .personal-plan-dialog input,.visual .personal-plan-dialog select,.visual .personal-plan-dialog textarea{font-size:16px}
}