/* Shared access improvements; preserve the four existing color palettes. */
html{scroll-padding-block:24px 130px}
body :is(button,a,input,select,textarea,summary,[tabindex]){scroll-margin-block:24px 130px}
body .skip-link,html[data-theme] body a.skip-link{background:#fff!important;color:#172b38!important;text-decoration:underline!important;z-index:2147483647}
body :is(button,summary,[role=button]){min-height:24px;min-width:24px}
body :is(input,select,textarea){font-size:max(1rem,16px)}
body :is(input[type=checkbox],input[type=radio]){min-width:24px;min-height:24px;flex-shrink:0}
body :is(p,label,.hint,.muted){overflow-wrap:anywhere}
body dialog{max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto}
html[data-theme] body .cal-quick-trigger{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important}
body #nav{padding-bottom:max(12px,env(safe-area-inset-bottom))}
body a:not(.skip-link){text-underline-offset:3px}
body :is(.privacy-footer,.accessibility-help) a{text-decoration:underline}
@media(max-width:400px){
 body main{padding-inline:12px}
 body .form-grid{grid-template-columns:minmax(0,1fr)}
 body .row{flex-wrap:wrap}
 body .row>*{min-width:0;max-width:100%}
 body .cal-month-heading{gap:4px}
 body .cal-header-actions{flex-wrap:wrap}
 body .privacy-actions button{min-width:0;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(forced-colors:active){
 body :is(button,input,select,textarea,summary){border:1px solid ButtonText!important}
 body :focus-visible{outline:3px solid Highlight!important;box-shadow:none!important}
 body button[aria-pressed=true],body #nav [aria-current=page]{border:3px solid Highlight!important}
}
/* Later illustration styles must not replace readable help/status text. */
html[data-theme] body :is(#coupleTitle,#accountStatus){color:var(--privacy-text)!important}
html[data-theme] body .couple-cover p{color:var(--privacy-muted)!important}
html[data-theme] body :is(.privacy-footer,.privacy-center,#safetyPanel) a{color:var(--privacy-accent)!important}
html[data-theme] body #sparkText{color:var(--privacy-muted)!important}
html[data-theme] body .calendar-redesign .cal-outside{opacity:1!important;color:var(--privacy-muted)!important}
/* Solid backing keeps the calendar action readable over every village image. */
html[data-theme][data-appearance] body #home .hero button{background:#172b38!important;color:#fff!important}
html[data-theme][data-appearance] body #home .hero h2{background:transparent;color:#fff!important;padding:0;border-radius:0;text-shadow:0 2px 5px #000,0 0 12px #000}
html[data-theme] body .theme-options button small{color:inherit!important;opacity:1!important}
/* Reflow the connection dock instead of letting long/enlarged text set its width. */
.cal-month-footer>*{min-width:0;max-width:100%}
.gcal-compact-summary{flex-wrap:wrap;white-space:normal;gap:8px}
.gcal-compact-summary>span{min-width:0;overflow-wrap:anywhere}
.calendar-redesign .cal-legend>span{min-width:0;white-space:normal;overflow-wrap:anywhere}
.cal-page-heading{flex-wrap:wrap}
@media(max-width:520px){
 .cal-month-footer{grid-template-columns:minmax(0,1fr)!important}
 .calendar-redesign .cal-legend{justify-content:flex-start}
 .cal-options-body{grid-template-columns:minmax(0,1fr)}
}
.plan-layout{grid-template-columns:minmax(0,1fr)}
.plan-layout>*{min-width:0}
.plan-heading,.plan-game-progress,.plan-game-actions{flex-wrap:wrap}
.plan-game-shell :is(progress,.swipe-stage,.swipe-activity){max-width:100%;min-width:0}
.plan-game-shell :is(strong,h3,h4,small,summary,button){overflow-wrap:anywhere}
/* Custom overlays must remain scrollable in landscape and with enlarged text. */
.theme-welcome{align-items:start}
.theme-dialog{min-width:0;margin-block:auto;max-height:calc(100dvh - 40px);overflow:auto}
.movie-dialog{min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
.table-scroll:focus-visible{outline:3px solid #78344f;outline-offset:4px}
