/* Account and support screens use the same presentation in every host. */
.auth-page { min-height: calc(100dvh - 82px); padding: 55px 20px 90px; display: grid; place-items: center; }
.auth-panel { width: min(100%, 470px); padding: 42px 45px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 22px 60px rgba(50, 42, 30, .08); }
.auth-panel-small { max-width: 440px; }
.auth-brand { margin-bottom: 42px; }
.auth-panel h1 { font-size: clamp(2.25rem, 7vw, 3.35rem); }
.auth-panel > p { margin-top: 12px; color: var(--ink-soft); }
.auth-account-panel { margin-inline: auto; text-align: center; }
.auth-account-panel .auth-form label { text-align: left; }
.auth-account-panel .form-row { justify-content: center; }
.auth-account-panel > h1 + .auth-form,
.auth-account-panel > p + .auth-form { margin-top: 24px; }
.auth-registration { display: grid; gap: 12px; margin-top: 27px; }
.auth-registration p { color: var(--ink-soft); font-size: .82rem; }
.auth-account-panel .auth-create-account { background: #e58768; color: #26201c; }
.auth-account-panel .auth-create-account:hover:where(:not([data-touch-input] *)) { background: #f2a286; }
.oauth-grid { margin-top: 29px; display: grid; gap: 10px; }
.oauth-button { min-height: 46px; border-color: var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: .9rem; }
.oauth-button:hover:where(:not([data-touch-input] *)) { border-color: var(--ink-soft); }
.oauth-button span { width: 26px; margin-right: 8px; color: var(--ink-soft); text-align: center; font-weight: 800; }
.form-divider { margin: 24px 0; display: flex; align-items: center; gap: 13px; color: var(--ink-soft); font-size: .76rem; }
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 6px; color: var(--ink); font-size: .82rem; font-weight: 660; }
.auth-form input { width: 100%; min-height: 47px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); }
.auth-form input:focus { border-color: var(--focus); outline: none; }
.form-row { display: flex; justify-content: flex-end; margin-top: -5px; font-size: .8rem; }
.field-help, .consent-copy { color: var(--ink-soft); font-size: .74rem; }
.auth-panel .consent-copy { line-height: 1.45; }
.form-message { margin: 20px 0; padding: 11px 13px; border-radius: 8px; font-size: .83rem; }
.form-message.error { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.auth-configuration-note { margin:22px 0; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--paper-deep); color:var(--ink-soft); font-size:.76rem; }
.auth-form button:disabled, .support-form button:disabled { opacity:.45; cursor:not-allowed; }
.magic-link-panel { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 17px; }
.magic-link-panel summary { cursor: pointer; color: var(--ink-soft); text-align: center; font-size: .82rem; }
.compact-form { margin-top: 15px; }
.auth-panel .auth-switch { margin-top: 27px; text-align: center; font-size: .82rem; }
.invitation-actions { margin-top:28px; display:grid; gap:11px; }
.invitation-actions .text-link { justify-content:center; margin-top:6px; font-size:.82rem; }
.auth-panel.centered-panel .button-full { margin-top:28px; }
.centered-panel { text-align: center; }
.mail-symbol, .status-symbol { width: 66px; height: 66px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-size: 1.55rem; }

.legal-page, .content-page { width:min(calc(100% - 48px),960px); margin:32px auto 64px; font-size:.9rem; line-height:1.65; }
.legal-page { max-width:880px; }
.legal-page header, .content-page > header { margin-bottom:24px; }
.legal-page header p, .content-page > header p { color:var(--ink-soft); font-size:.9rem; }
.legal-page section { padding:24px 0; border-top:1px solid var(--line); }
.legal-page section h2 { font:700 1.05rem/1.4 var(--yako-font); letter-spacing:-.015em; }
.legal-page section p, .legal-page section ol { margin: 13px 0 0; color: var(--ink-soft); }
.legal-page section ol { padding-left: 1.25rem; }
.legal-page section li + li { margin-top: 8px; }
.deletion-page .button { margin-top: 24px; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; border-top:1px solid var(--line); }
.help-grid article { padding:24px 0; border-bottom:1px solid var(--line); }
.help-grid h2, .content-callout h2 { font-size:1.05rem; font-weight:700; line-height:1.4; }
.help-grid p, .content-callout p { margin-top:11px; color:var(--ink-soft); }
.content-callout { margin-top:28px; padding:24px; border:1px solid var(--line); border-radius:14px; }
.content-callout .secondary-button { margin-top:18px; }
.content-page .button, .content-page .secondary-button, .legal-page .button { min-height:40px; padding-inline:18px; font-size:.82rem; }
.narrow-content { max-width: 760px; }
.support-page { display:grid; align-content:start; gap:14px; }
.support-card { min-width:0; border:1px solid var(--line); border-radius:14px; background:transparent; scroll-margin-top:calc(var(--planner-topbar,76px) + env(safe-area-inset-top) + 16px); transition:border-color 160ms ease; }
.support-card > summary { min-height:76px; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-radius:13px; list-style:none; cursor:pointer; transition:background-color 160ms ease; }
.support-card > summary::-webkit-details-marker { display:none; }
.support-card > summary::marker { content:""; }
.support-card > summary:hover:where(:not([data-touch-input] *)) { background:var(--surface); }
.support-card > summary h2 { min-width:0; margin:0; display:flex; align-items:center; gap:14px; font:700 1rem/1.45 var(--yako-font); letter-spacing:-.015em; }
.support-card > summary svg { flex:none; color:var(--ink-soft); }
.support-card > summary > svg { transition:transform 220ms cubic-bezier(.2,.8,.2,1),color 160ms ease; }
.support-card[open] > summary { border-bottom:1px solid var(--line); border-radius:13px 13px 0 0; }
.support-card[open] > summary > svg { transform:rotate(180deg); color:var(--accent); }
.support-card[open] > summary h2 svg { color:var(--accent); }
.support-card-body { padding:22px 24px 24px; }
.support-card-body p { color:var(--ink-soft); }
.support-card-body > .form-message:first-child { margin-top:0; }
.support-card-body .support-recovery-note { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:.82rem; }
.support-card .account-deletion-guide > header { margin-bottom:20px; }
.support-card .account-deletion-guide > section { padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
.support-card .account-deletion-guide h3 { font:700 .95rem/1.45 var(--yako-font); letter-spacing:-.01em; }
.support-card .account-deletion-guide p, .support-card .account-deletion-guide ol { margin-top:12px; color:var(--ink-soft); }
.support-card .account-deletion-guide header p { margin-top:0; }
.support-card .account-deletion-guide ol { padding-left:22px; }
.support-card .account-deletion-guide li + li { margin-top:8px; }
@media (prefers-reduced-motion:no-preference) {
    @supports (interpolate-size:allow-keywords) {
        .support-card { interpolate-size:allow-keywords; }
        .support-card::details-content { block-size:0; overflow:clip; transition:block-size 220ms cubic-bezier(.2,.8,.2,1),content-visibility 220ms; transition-behavior:allow-discrete; }
        .support-card[open]::details-content { block-size:auto; }
    }
}
.support-form { position: relative; display: grid; gap: 9px; margin-top: 27px; }
.support-form label { margin-top: 9px; color: var(--ink); font-size: .84rem; font-weight: 660; }
.support-form label span { color: var(--ink-soft); font-size: .72rem; font-weight: 500; }
.support-form input, .support-form select, .support-form textarea { width: 100%; min-height: 47px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; }
.support-form textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus { border-color: var(--focus); outline: none; }
.support-form .field-help { margin: -2px 0 2px; }
.support-form .support-privacy { margin: 9px 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.support-form .button { justify-self: start; margin-top: 5px; }
.support-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-message.success { display: grid; gap: 5px; margin-top: 22px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.form-message.success code { word-break: break-all; }
@media (max-width: 650px) {
    .auth-page { padding: 30px 14px 65px; }
    .auth-panel { padding: 31px 24px; border-radius: 17px; }
    .auth-brand { margin-bottom: 34px; }
    .legal-page, .content-page { width:calc(100% - 32px); margin-top:24px; margin-bottom:40px; }
    .content-callout { padding:20px 16px; }
    .support-card > summary { min-height:68px; padding:18px 16px; gap:12px; }
    .support-card > summary h2 { gap:10px; font-size:.94rem; }
    .support-card-body { padding:20px 16px; }
    .help-grid { grid-template-columns: 1fr; }
}