/*
 * Platform treatment for shells that intentionally do not use base.html:
 * calculator window (`tools`), share links (`shared`), and public marketing
 * (`public`). It is loaded only when the server rollout flag renders a
 * `data-platform-surface` value. There is no authenticated navigation here:
 * these pages retain their own truthful audience and entry points.
 */

body[data-platform-surface] {
    --platform-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    min-height: 100dvh;
    font-family: var(--platform-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body[data-platform-surface] :is(button, input, select, textarea) { font-family: inherit; }
body[data-platform-surface] :is(a, button, input, select, textarea):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Account pages intentionally use the small app_shell=false fallback rather
 * than private navigation. Make that narrow, form-first surface feel coherent
 * without adding a header, tabs, or account capabilities that it does not own. */
body[data-platform-surface="account"] .wrap {
    width: min(100%, 44rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding: max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}
body[data-platform-surface="account"] .brand {
    font-family: var(--platform-font);
    letter-spacing: -0.035em;
}
body[data-platform-surface="account"] :is(.claim, .setup) {
    padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
body[data-platform-surface="account"] .claim-card { background: #fff; }
/* Checkout, legal acknowledgements, and HTML errors use the lightweight shell
 * without the `.wrap`/`.claim` helpers.  The opt-in hook gives those pages the
 * same notch-safe readable column without changing authenticated app layouts. */
body[data-platform-surface="account"] .platform-account-page {
    box-sizing: border-box;
    width: min(100%, 48rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding: max(2rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}
body[data-platform-surface="account"] .platform-account-page.error-page { min-height: 100dvh; }
body[data-platform-surface="account"] :is(.claim-action, .claim-secondary, .setup a) {
    display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
}
body[data-platform-surface="shared"] .nf-btn:not([hidden]) { display: inline-flex; align-items: center; }
@media (prefers-color-scheme: dark) {
    body[data-platform-surface="account"] .claim-card { background: #111827; }
}
body[data-platform-surface="account"] :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select, textarea, button) { min-height: 2.75rem; border-radius: 0.75rem; }

/* A tools window is an instrument, not a miniature app dashboard. Preserve the
 * full calculator deck; only give its surrounding fallback screen safe space. */
body[data-platform-surface="tools"] .mt-window-page {
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
body[data-platform-surface="tools"] .mt-page { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
body[data-platform-surface="tools"] :is(.btn, button) { min-height: 2.75rem; border-radius: 0.75rem; }

/* Shared records are reading surfaces. Their content deliberately stays opaque
 * even on iOS: a portfolio or journey must retain its contrast when printed,
 * zoomed, or displayed over a photo in a mail client. */
body[data-platform-surface="shared"] {
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
body[data-platform-surface="shared"] :where(.hero, .card, .error-card, .sc, .n-item, .nf):not([class*="bg-"]) {
    background-color: #fff;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body[data-platform-surface="shared"] :where(.hero, .card):not([class*="border-"]) { border-color: rgb(15 18 28 / 0.1); }
body[data-platform-surface="shared"] :is(.nf-btn, #pin-btn) { min-height: 2.75rem; border-radius: 0.75rem; }

/* Public pages keep their real public navigation and CTA links. These rules
 * make the fixed header more app-like without pretending a visitor is signed
 * in or putting a private tab bar on a marketing page. */
body[data-platform-surface="public"] .site-header {
    border-bottom: 1px solid var(--line);
    padding-top: env(safe-area-inset-top);
}
body[data-platform-surface="public"] .shell {
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
body[data-platform-surface="public"] { padding-bottom: env(safe-area-inset-bottom); }
body[data-platform-surface="public"] :is(.site-nav, .nav-menu-panel) { font-family: var(--platform-font); }
body[data-platform-surface="public"] :is(.button, .sign-in-link, .nav-menu summary) { min-height: 2.75rem; }
body[data-platform-surface="public"] .ask-fab { bottom: max(1rem, env(safe-area-inset-bottom)); right: max(1rem, env(safe-area-inset-right)); }

/* These anonymous forms are still native browser controls.  Keep their text at
 * 16px on phones so Safari does not zoom a calculator or sign-in field, and
 * let the public auth card use the changing visual viewport and both safe
 * areas.  This is presentation only: the forms retain their normal POST/GET
 * fallback and the guide disclosures stay native <details> elements. */
@media (max-width: 767px) {
    body[data-platform-surface="public"] .auth-main {
        min-height: calc(100dvh - 76px);
        padding-top: max(clamp(40px, 8vh, 96px), env(safe-area-inset-top));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(4.5rem, env(safe-area-inset-bottom));
        padding-left: max(1rem, env(safe-area-inset-left));
    }
    body[data-platform-surface="public"] :is(.auth-form, .guide-form, .ask-form)
        :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea) {
        min-height: 2.75rem;
        font-size: 1rem;
    }
    body[data-platform-surface="public"] .guide-more > summary {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding-block: 0.375rem;
    }
}

/* Liquid Glass is an iOS chrome treatment. Content cards above are purposely
 * solid, including public/share reading cards and form inputs. */
html[data-ui-platform="ios"] body[data-platform-surface] {
    --platform-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
}
html[data-ui-platform="ios"] body[data-platform-surface="public"] .site-header,
html[data-ui-platform="ios"] body[data-platform-surface="shared"] .header {
    background-color: rgb(255 255 255 / 0.78);
    backdrop-filter: saturate(180%) blur(22px) brightness(1.04);
    -webkit-backdrop-filter: saturate(180%) blur(22px) brightness(1.04);
}
/* The dropdown hangs BELOW the glass header, over page content. WebKit does
 * not composite a backdrop-filter inside an ancestor that already has one, so
 * glass here painted as a 78% white sheet with the hero showing through
 * (owner, iPhone, 2026-09-15). A menu is content chrome: it stays solid. */
html[data-ui-platform="ios"] body[data-platform-surface="public"] .nav-menu-panel {
    background: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-ui-platform="ios"] body[data-platform-surface="public"] .ask-fab {
    border: 1px solid rgb(255 255 255 / 0.44);
    backdrop-filter: saturate(175%) blur(18px);
    -webkit-backdrop-filter: saturate(175%) blur(18px);
}
html[data-ui-platform="ios"] body[data-platform-surface] :is(.btn, .button, .nf-btn, #pin-btn) { border-radius: 0.75rem; }

/* Material 3 Expressive uses tonal containment and clearly selected pills,
 * not glass. 48px targets are applied to operational controls on phones. */
html[data-ui-platform="android"] body[data-platform-surface] {
    --platform-font: Roboto, "Roboto Flex", "Noto Sans", system-ui, sans-serif;
}
html[data-ui-platform="android"] body[data-platform-surface="shared"] :where(.hero, .card, .error-card, .sc, .n-item, .nf):not([class*="border-"]) {
    border-color: transparent;
}
html[data-ui-platform="android"] body[data-platform-surface="shared"] :where(.hero, .card, .error-card, .sc, .n-item, .nf):not([class*="bg-"]) {
    background-color: #f8f4ff;
}
html[data-ui-platform="android"] body[data-platform-surface="public"] :is(.site-header, .nav-menu-panel) {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-ui-platform="android"] body[data-platform-surface] :is(.btn, .button, .nf-btn, #pin-btn) {
    border-radius: 999px;
    padding-inline: 1.25rem;
}
html[data-ui-platform="android"] body[data-platform-surface="account"] .wrap { max-width: 40rem; }

@media (max-width: 767px) {
    html[data-ui-platform="android"] body[data-platform-surface] :is(button, input[type="button"], input[type="submit"], input[type="reset"], .button, .sign-in-link, .nav-menu summary) {
        min-height: 3rem;
    }
    html[data-ui-platform="android"] body[data-platform-surface="account"] :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select, textarea) { min-height: 3rem; }
    html[data-ui-platform="android"] body[data-platform-surface="public"] :is(.auth-form, .guide-form, .ask-form)
        :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea),
    html[data-ui-platform="android"] body[data-platform-surface="public"] .guide-more > summary { min-height: 3rem; }
    html[data-ui-platform="android"] body[data-platform-surface] :is(button[aria-label], button[title], .nav-menu summary) { min-width: 3rem; }
    body[data-platform-surface="shared"] .container { padding-inline: max(1rem, env(safe-area-inset-left)); padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
    body[data-platform-surface="shared"] .nf :is(input, textarea) { font-size: 1rem; min-height: 2.75rem; }
    html[data-ui-platform="android"] body[data-platform-surface="shared"] .nf :is(input, textarea) { min-height: 3rem; }
    html[data-ui-platform="android"] body[data-platform-surface="account"] :is(.claim-action, .claim-secondary, .setup a) { min-height: 3rem; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html[data-ui-platform="ios"] body[data-platform-surface] :is(.site-header, .nav-menu-panel, .header, .ask-fab) {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-ui-platform="ios"] body[data-platform-surface] :is(.site-header, .nav-menu-panel, .header, .ask-fab) {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-platform-surface] *,
    body[data-platform-surface] *::before,
    body[data-platform-surface] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    body[data-platform-surface] :is(.hero, .card, .error-card, .sc, .n-item, .nf, .site-header, .nav-menu-panel) {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
        box-shadow: none;
    }
    body[data-platform-surface] :is(a, button, input, select, textarea):focus-visible { outline-color: Highlight; }
}