/* Shared controls for the registration and account journey. */
.header-home { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--journey-border, #ffffff30); border-radius: 999px; color: var(--journey-text, #fff5fc); text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 600; }
.header-home:hover { background: #ffffff12; border-color: var(--journey-accent, #f2b8d4); }
.header-home:focus-visible { outline: 3px solid var(--journey-accent, #f2b8d4); outline-offset: 3px; }
.working-status { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2000; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid #f2b8d466; border-radius: 999px; background: #203d53; color: #fff5fc; box-shadow: 0 8px 32px #08162388; font-size: 14px; pointer-events: none; }
.working-status[hidden] { display: none; }
.working-status::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid #ffffff40; border-top-color: #f2b8d4; border-radius: 50%; animation: journey-spin .8s linear infinite; }
@keyframes journey-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .working-status::before { animation: none; border-top-color: #fff; } }
.location-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin: 14px 0; }
.location-actions .btn { min-width: 0; min-height: 48px; padding: 10px 8px; font-size: 14px; line-height: 1.4; }
.location-actions [data-action="r3-map-save"] { order: 2; }
.location-actions [data-action="r3-map-center"] { order: 3; grid-column: 1 / -1; min-height: 40px; padding: 6px; background: transparent; border-color: transparent; font-size: 13px; }
#r3-map-status:empty { display: none; }
.location-picker [hidden] { display: none; }
body[data-page="register"] .public-quote-input { min-height: 168px; resize: vertical; }

/* Navigation stays legible at narrow widths, without capsule outlines. */
.header-home, .header-actions > .account-nav { border: 0; background: transparent; box-shadow: none; border-radius: 8px; }
.header-home:hover, .header-actions > .account-nav:hover { background: #ffffff0a; border-color: transparent; }
.header-home { min-height: 44px; font-size: 14px; padding: 6px 8px; }
.header-actions > .account-nav { max-width: none; padding: 4px 8px; gap: 7px; }
.header .account-nav-name { display: block; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; font-size: 13px; }
.header .account-nav-avatar { width: 25px; height: 25px; background: none; }
.header .locale { width: 98px; max-width: none; min-height: 44px; font-size: 13px; padding: 6px 2px; }
body:not([data-page="home"]) .header .nav { display: none; }
body:not([data-page="home"]) .header-actions { margin-left: auto; gap: 12px; }
#main:focus, .modal:focus { outline: none; }

/* A focused directory dialog leaves the underlying answer in place. */
.r3-field-menu { margin-bottom: 24px; background: #ffffff06; border-radius: 14px; }
.r3-field-menu > summary { font-size: 14px; padding: 12px 16px; }
.r3-menu-toggle { width: 20px; height: 20px; }
.r3-field-menu summary[aria-expanded="true"] .r3-menu-toggle { transform: rotate(180deg); }
body[data-page="flow"] #modal-root .r3-directory-dialog { max-width: 640px; padding: 28px; overscroll-behavior: contain; }
.r3-directory-dialog .r3-menu-content { padding: 0; border: 0; gap: 16px; }
.r3-directory-dialog .r3-menu-group h2 { margin: 6px 0 12px; font: 500 12px/1.6 var(--sans); }
.r3-directory-dialog .r3-menu-items { gap: 8px; }
.r3-directory-dialog .r3-menu-item { min-height: 48px; padding: 10px 12px; }
.r3-directory-dialog .r3-menu-item:focus-visible { outline: 2px solid var(--journey-accent); outline-offset: 2px; }
.r3-flow .r3-heading h1 { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; font-size: clamp(23px,4vw,30px); font-weight: 550; }
.r3-flow .r3-heading .lede { font-size: 13px; }
.r3-flow-body { gap: 24px; }
.r3-flow .date-demand h2 { font-size: 18px; }
.saved-time-windows { display: grid; gap: 14px; }
.saved-time-windows fieldset { min-width: 0; margin: 0; border: 1px solid var(--journey-line); border-radius: 14px; padding: 16px; }
.saved-time-windows legend { padding: 0 6px; color: var(--journey-muted); font-size: 13px; }

/* Related records use the same card, input and calendar surfaces as the account. */
body:is([data-page="match"],[data-page="schedule"],[data-page="date"],[data-page="feedback"]) .center-page { padding-top: 32px; padding-bottom: 56px; }
body:is([data-page="match"],[data-page="schedule"],[data-page="date"],[data-page="feedback"]) :is(.form-card,.date-banner,.poster-copy,.profile-poster,.success-panel) { background: var(--journey-panel); color: var(--journey-text); border-color: var(--journey-line); border-radius: 22px; }
body[data-page="match"] .poster-copy :is(.eyebrow,.tags span) { color: var(--journey-muted); }
body[data-page="schedule"] :is(.calendar-grid > div,.calendar-grid > button) { background: var(--journey-input); color: var(--journey-muted); }
body[data-page="schedule"] .calendar-grid button.selected { background: var(--journey-accent); color: #342432; }
body[data-page="schedule"] .schedule-header select { background: var(--journey-input); border-color: var(--journey-line); }

@media(max-width:600px) {
 body:not([data-page="home"]) .header { height: auto; min-height: 88px; padding: 10px 0; }
 body:not([data-page="home"]) .header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 12px; align-items: center; }
 body:not([data-page="home"]) .header .brand { grid-column: 1; grid-row: 1; }
 body:not([data-page="home"]) .header .brand-logo { width: 112px; }
 body:not([data-page="home"]) .header-actions { display: contents; }
 body:not([data-page="home"]) .header .locale { grid-column: 2; grid-row: 1; justify-self: end; }
 body:not([data-page="home"]) .header-home { grid-column: 1; grid-row: 2; justify-self: start; padding-left: 0; }
 body:not([data-page="home"]) .header .account-nav { grid-column: 2; grid-row: 2; justify-self: end; padding-right: 0; }
 body:not([data-page="home"]) .header .login-link { grid-column: 1; grid-row: 2; }
 .r3-page { padding-top: 16px; }
 .r3-flow { padding: 24px 20px; }
 body[data-page="flow"] #modal-root .r3-directory-dialog { padding: 24px 18px; max-height: 88svh; }
 .r3-directory-dialog .r3-menu-item { padding: 9px 8px; font-size: 12px; }
 .r3-directory-dialog .r3-menu-status { font-size: 10px; }
}

body[data-page="match"] .photo-unavailable { background: var(--journey-input); color: var(--journey-muted); }
body[data-page="schedule"] .timezone-label { display: grid; gap: 6px; min-width: 0; color: var(--journey-muted); font-size: 12px; }
body[data-page="schedule"] .schedule-header select.input { display: block; appearance: none; -webkit-appearance: none; min-height: 48px; width: 100%; max-width: none; margin: 0; padding: 12px 36px 12px 14px; font-size: 16px; background-color: var(--journey-input); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c2d0dc' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
body[data-page="date"] .plan-badge { background: #c2d0dc16; color: var(--journey-muted); border-color: var(--journey-line); }
/* A date purpose is a required single choice, distinct from relationship goals. */
.r3-flow .activity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.r3-flow .activity-choice { position: relative; display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: center; min-height: 88px; padding: 14px 12px; gap: 10px; border-radius: 16px; text-align: left; white-space: normal; }
.r3-flow .activity-choice > .icon { width: 23px; height: 23px; flex-shrink: 0; color: var(--journey-accent); }
.r3-flow .activity-choice > span:first-of-type { display: grid; gap: 3px; min-width: 0; flex: 1; }
.r3-flow .activity-choice strong { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: normal; word-break: normal; }
.r3-flow .activity-choice small { font-size: 11px; line-height: 1.5; color: var(--journey-muted); overflow-wrap: normal; word-break: normal; }
.r3-flow .activity-selected { display: flex; position: absolute; right: 9px; bottom: 9px; width: 14px; }
.r3-flow .activity-choice.selected :is(.icon,small) { color: inherit; }
@media(max-width:380px) {
 .r3-flow .activity-choice { grid-template-columns: 19px minmax(0,1fr); gap: 7px; padding: 12px 9px; }
 .r3-flow .activity-choice > .icon { width: 19px; height: 19px; }
 .r3-flow .activity-choice strong { font-size: 12px; }
 .r3-flow .activity-choice small { font-size: 10px; }
}
.r3-flow .activity-choice::after { display: none; }