/* === Redesign preview additions (appended once, after the dark high-contrast block) ===
   Journey pages only: about-only home, separate login page, separate create-account page.
   No rule here hides an auth panel or form. Forms on login.html and register.html are
   visible by default; navigation between pages is by link, not by panel toggling. */
.journeyNav{max-width:40rem;margin:2rem auto;text-align:center}
.journeyNav .button{display:inline-block;padding:.75rem 1.5rem;border-radius:.5rem;text-decoration:none}
.journeyNav .button.primary{background:#0b5fff;color:#fff}
.authCard,main#main .journeyNav,main#main .displaySection{max-width:40rem;margin-left:auto;margin-right:auto}
.backLink{display:inline-block;margin:.5rem 1rem .5rem 0}
.registerPrompt,.loginPrompt{font-size:1.1rem;margin:1.5rem 0}
.displaySection{margin-top:2.5rem;padding-top:1rem;border-top:1px solid currentColor}
.displaySection label{display:block;margin-top:1rem}
.displaySection select{display:block;margin-top:.25rem}
/* Current-page journey state (replaces the old auth-tab selected/inactive states). */
.journeyNav a[aria-current="page"]{outline:3px solid currentColor;outline-offset:2px}
/* Dark high-contrast: narrow two-attribute rules carried from the 30 Oct integration report.
   Settings dialog and its Done buttons (dialog markup lives in the signed-in app, not in
   these preview pages, so this rule is carried for integration, not demonstrated here). */
html[data-mode=dark][data-contrast=high] #settingsDialog,
html[data-mode=dark][data-contrast=high] #settingsDialog dialog{border:2px solid #ffffff;background:#000000;color:#ffffff}
html[data-mode=dark][data-contrast=high] #closeSettingsTop,
html[data-mode=dark][data-contrast=high] #closeSettings{background:#ffffff;color:#000000;border:2px solid #ffffff}
html[data-mode=dark][data-contrast=high] .backLink{background:#000000;color:#ffffff;border:2px solid #ffffff}
html[data-mode=dark][data-contrast=high] .journeyNav .button.primary{background:#ffffff;color:#000000;border:2px solid #ffffff}
html[data-mode=dark][data-contrast=high] .journeyNav .button.secondary{background:#000000;color:#ffffff;border:2px solid #ffffff}

/* ===== v2 (31 Oct): Google-plain theme + centered auth card =====
   Appended after the revamp and dark high-contrast blocks. New classes
   only, except plain restyles of the journey buttons. No forced-priority
   declarations, no motion effects. Dark high-contrast is NOT restyled here:
   the earlier high-contrast block still governs it, and the explicit
   dark high-contrast rules at the end of this block keep the card
   black/white with a yellow focus ring. */
.homePage{background:#ffffff;color:#1f1f1f}
.homePage header{border-bottom:1px solid #dadce0}
.homeAuthNav{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
.homeAuthNav a{color:#0b57d0;text-decoration:none}
.homeAuthNav a:focus,.homeAuthNav a:hover{text-decoration:underline}
.pillSignin{background:#0b57d0;color:#ffffff;border-radius:999px;padding:.6rem 1.5rem;text-decoration:none}
.homeAuthNav a.pillSignin{color:#ffffff}
.homeAuthNav a.pillSignin:focus,.homeAuthNav a.pillSignin:hover{text-decoration:none}
.journeyNav .button.primary{background:#0b57d0;border:1px solid #0b57d0;color:#ffffff;border-radius:999px;padding:.7rem 1.5rem}
.journeyNav .button.secondary{background:#ffffff;border:1px solid #dadce0;color:#0b57d0;border-radius:999px;padding:.7rem 1.5rem}
.authPage{background:#f0f4f9;color:#1f1f1f}
.authCard{background:#ffffff;color:#1f1f1f;border:1px solid #dadce0;border-radius:24px;max-width:880px;margin:2rem auto;padding:2.5rem;display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;box-sizing:border-box}
.authCardHead h2{font-size:2rem;margin:0 0 .5rem 0}
.authCardHead p{color:#444746;margin:0}
.authCard label{display:block;margin-top:1rem}
.authCard input,.authCard select{width:100%;box-sizing:border-box;border:1px solid #dadce0;border-radius:4px;padding:.8rem;margin-top:.25rem;background:#ffffff;color:#1f1f1f}
.authCard input:focus,.authCard select:focus,.pillPrimary:focus,.pillSignin:focus,.textButton:focus,.cardActions a:focus{outline:2px solid #1a73e8;outline-offset:2px}
.textButton{background:none;border:none;color:#0b57d0;padding:.25rem 0;cursor:pointer;text-align:left}
.cardActions{display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;margin-top:1.5rem}
.cardActions a{color:#0b57d0;text-decoration:none}
.cardActions a:focus,.cardActions a:hover{text-decoration:underline}
.pillPrimary{background:#0b57d0;color:#ffffff;border:none;border-radius:999px;padding:.7rem 1.5rem;font-weight:600;cursor:pointer}
.authCardForm .button.secondary{background:#ffffff;border:1px solid #dadce0;color:#0b57d0;border-radius:999px}
@media (max-width:720px){.authCard{grid-template-columns:1fr;margin:1rem;padding:1.5rem;border-radius:16px}.cardActions{justify-content:space-between}}
/* Dark, standard contrast only: high contrast is governed elsewhere. */
html[data-mode=dark][data-contrast=standard] .authPage{background:#131314;color:#e3e3e3}
html[data-mode=dark][data-contrast=standard] .authCard{background:#1e1f20;color:#e3e3e3;border-color:#3c4043}
html[data-mode=dark][data-contrast=standard] .authCard input,html[data-mode=dark][data-contrast=standard] .authCard select{background:#131314;color:#e3e3e3;border-color:#5f6368}
html[data-mode=dark][data-contrast=standard] .authCardHead p{color:#9aa0a6}
html[data-mode=dark][data-contrast=standard] .cardActions a,html[data-mode=dark][data-contrast=standard] .textButton,html[data-mode=dark][data-contrast=standard] .homeAuthNav a{color:#8ab4f8}
@media (prefers-color-scheme: dark){html[data-mode=system]:not([data-contrast=high]) .authPage{background:#131314;color:#e3e3e3}html[data-mode=system]:not([data-contrast=high]) .authCard{background:#1e1f20;color:#e3e3e3;border-color:#3c4043}html[data-mode=system]:not([data-contrast=high]) .authCard input,html[data-mode=system]:not([data-contrast=high]) .authCard select{background:#131314;color:#e3e3e3;border-color:#5f6368}html[data-mode=system]:not([data-contrast=high]) .authCardHead p{color:#9aa0a6}html[data-mode=system]:not([data-contrast=high]) .cardActions a,html[data-mode=system]:not([data-contrast=high]) .textButton{color:#8ab4f8}}
/* Dark high contrast: card stays black/white, focus stays yellow. */
html[data-mode=dark][data-contrast=high] .authCard,html[data-mode=system][data-contrast=high] .authCard{background:#000000;color:#ffffff;border:2px solid #ffffff}
html[data-mode=dark][data-contrast=high] .authCard input,html[data-mode=system][data-contrast=high] .authCard input{background:#000000;color:#ffffff;border:2px solid #ffffff}
html[data-mode=dark][data-contrast=high] .authCardHead p,html[data-mode=system][data-contrast=high] .authCardHead p{color:#ffffff}
html[data-mode=dark][data-contrast=high] .cardActions a,html[data-mode=system][data-contrast=high] .cardActions a,html[data-mode=dark][data-contrast=high] .textButton,html[data-mode=system][data-contrast=high] .textButton{color:#ffffff}
html[data-mode=dark][data-contrast=high] .pillPrimary,html[data-mode=system][data-contrast=high] .pillPrimary{background:#ffffff;color:#000000}
html[data-mode=dark][data-contrast=high] .authCard :focus,html[data-mode=system][data-contrast=high] .authCard :focus{outline:4px solid #ffff00;outline-offset:2px}

/* v2 review fix (Sarthak, 31 Oct): Google mobile has no card boundary.
   At narrow widths the auth card goes flat: no border, square corners,
   transparent surface so the form sits directly on the page. Dark and
   high-contrast themes keep their own surfaces (their rules only set
   background/border colour, so border and radius still drop here). */
@media (max-width:720px){.authCard{border:none;border-radius:0;background:transparent;margin:1rem 0;padding:1.5rem}}

/* v2.1 (Sarthak, 31 Oct, user feedback): auth buttons stack vertically,
   never side by side; switch-account line sits below the primary action. */
.authCard .passwordToggle,.authCard .textButton{display:block}
.switchAuth{margin:1rem 0 0}

.authCard .fieldHelp{display:block;color:#52665f;margin:-8px 0 14px;font-size:.92rem}

.authCard .srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Integration layout: unstyled auth container, card owns its presentation. */
#auth.journeyAuth{max-width:960px;margin:0 auto;background:transparent;border:0;padding:0;border-radius:0}
#auth.journeyAuth .authCardForm{min-width:0}
#auth.journeyAuth .authCardForm form{margin:0}
#auth.journeyAuth #authProviders{display:flex;flex-direction:column;gap:.75rem}
#auth.journeyAuth #authProviders .button{margin:0;width:100%;text-align:center}
#auth.journeyAuth .authCardHead{margin-top:1rem}
.authPage #accessibilityToggle,.homePage #accessibilityToggle{display:block;margin:1.5rem auto}
.authPage header,.homePage header{background:#fff;color:#1f1f1f;border-bottom:1px solid #dadce0}
.authPage footer,.homePage footer{color:#444746}
.authPage footer a,.homePage footer a{color:#0b57d0}
html[data-mode=dark] .authPage header,html[data-mode=dark] .homePage header{background:#131314;color:#e3e3e3}
html[data-mode=dark][data-contrast=high] .authPage,html[data-mode=dark][data-contrast=high] .homePage{background:#000;color:#fff}
html[data-mode=dark][data-contrast=high] .authPage header,html[data-mode=dark][data-contrast=high] .homePage header{background:#000;color:#fff;border-color:#fff}
html[data-mode=dark][data-contrast=high] .authPage footer a,html[data-mode=dark][data-contrast=high] .homePage footer a{color:#fff}
@media(max-width:720px){#auth.journeyAuth .authCard{display:block;padding:1.5rem .5rem}#auth.journeyAuth .authCardHead{margin-bottom:1.5rem}.homeAuthNav{margin-left:0;flex-wrap:wrap}}

/* Current signed-out main used a two-column landing layout. Journey pages
   now have independent routing, so the auth card must span the main width. */
body.authPage main#main,body.homePage main#main{display:block;max-width:1120px;margin:auto;width:100%;padding:24px 20px}
body.authPage #auth.journeyAuth{width:100%;box-shadow:none}
body.authPage #auth.journeyAuth .authCard{width:100%;max-width:880px;box-shadow:none}
body.authPage #auth.journeyAuth input,body.authPage #auth.journeyAuth select{border-color:#dadce0;border-radius:4px}
body.authPage #auth.journeyAuth .pillPrimary{background:#0b57d0;color:#fff;border-color:#0b57d0;border-radius:999px}
body.authPage #auth.journeyAuth .textButton{color:#0b57d0;background:none;border:0}
body.authPage #auth.journeyAuth .adultCheck{display:flex;align-items:center;gap:12px}
body.authPage #auth.journeyAuth .adultCheck input{width:24px;flex:none;margin:0}
@media(max-width:720px){body.authPage main#main,body.homePage main#main{padding:16px}body.authPage #auth.journeyAuth .authCard{margin:0}}

body.authPage main#main>#auth.journeyAuth{background:transparent;box-shadow:none}
body.authPage main#main>#auth.journeyAuth #loginHelp{background:transparent;padding:0 20px}
body.authPage #auth.journeyAuth #forgotPassword{color:#0b57d0}
html[data-mode=dark][data-contrast=high] body.authPage #auth.journeyAuth .pillPrimary{background:#fff;color:#000;border:2px solid #fff}
html[data-mode=dark][data-contrast=high] body.authPage #auth.journeyAuth #forgotPassword{color:#fff}

/* Signed-in actions remain visible against the existing light/dark panel. */
body:not(.authPage):not(.homePage) header>#settings,body:not(.authPage):not(.homePage) header>#logout{background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-line)}

/* NEW isolated correction: checkbox row remains an aligned control/label pair. */
#auth.journeyAuth .adultCheck{display:flex;align-items:flex-start;gap:.65rem}
#auth.journeyAuth .adultCheck input{flex:0 0 auto;width:auto;margin-top:.2rem}
html[data-mode=dark][data-contrast=high] body.authPage #auth.journeyAuth .pillPrimary{background:#ffffff;color:#000000;border:2px solid #ffffff}

/* Settings categories are a list, with one detail page at a time. */
#settingsDialog .settingsNav{display:flex;flex-direction:column;gap:0;border:0;background:transparent;padding:0;margin:1rem 0;}
#settingsDialog .settingsNav[hidden]{display:none;}
#settingsDialog .settingsNav button{display:block;flex:none;width:100%;min-height:56px;margin:0;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:transparent;color:var(--ui-text);text-align:left;padding:1rem;}
#settingsDialog .settingsNav button:focus-visible{outline:3px solid currentColor;outline-offset:-3px;}
#settingsBack{min-height:44px;margin:.75rem 0;}

#settingsDialog .settingsNav button[hidden]{display:none;}
#settingsDialog .profileIdentityRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;}
#settingsDialog .profileIdentityRow input{max-width:100%;}
#settingsDialog #contactsComingSoon{padding:1rem;color:var(--ui-text);}
@media(max-width:480px){#settingsDialog .profileIdentityRow{grid-template-columns:1fr;}}

#settingsDialog .settingsComingSoon{padding:1rem;min-height:56px;border-bottom:1px solid var(--ui-line);color:var(--ui-text);box-sizing:border-box;}

#settingsDialog .settingsRowTitle{display:block;font-weight:600;}
#settingsDialog .settingsRowSubtitle{display:block;font-size:.875rem;line-height:1.4;margin-top:.25rem;}
#settingsDialog .settingsProfileEntry{font-size:1.05rem;}

.settingsProfileEntry{display:flex;align-items:center;gap:12px;width:100%;min-height:60px}.profileEditPencil{font-size:26px}.profileEntryHint{margin-left:auto;font-size:.85rem}.profileQuickEdits{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.profileQuickEdits button{overflow-wrap:anywhere;text-align:left;min-height:44px}

.profileIdentityColumn{display:flex;flex-direction:column;gap:16px}.settingsProfileEntry img{border-radius:50%;object-fit:cover}

#settingsDialog #settingsNavProfile{display:flex!important;align-items:center;gap:12px}#settingsDialog .profileEntryHint{margin-left:auto;padding-left:12px}#settingsDialog #settingsProfileName{font-size:1rem}