* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--page); }
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .45rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
h2 { margin-bottom: .25rem; font-size: 1.18rem; }
h3 { margin: .3rem 0 .7rem; font-size: 1.05rem; }

.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .75rem 1rem; background: var(--card); border-radius: .6rem; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 248px; flex-direction: column; gap: 1.15rem; overflow-y: auto; overscroll-behavior: contain; padding: 1.4rem 1rem; color: #fff; background: linear-gradient(155deg, var(--sky), var(--sky-elevated)); }
.brand { display: flex; align-items: center; gap: .75rem; padding: .25rem .5rem 1rem; color: #fff; font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 8px 20px rgb(0 0 0 / 20%); }
.nav-list { display: grid; gap: .3rem; }
.nav-link { display: flex; align-items: center; gap: .8rem; min-height: 45px; padding: .7rem .8rem; border-radius: .75rem; color: rgb(255 255 255 / 72%); font-weight: 600; }
.nav-link span { display: grid; width: 1.2rem; place-items: center; }
.nav-link:hover, .nav-link.active { color: #fff; background: rgb(255 255 255 / 11%); text-decoration: none; }
.sidebar-search input { width: 100%; border-color: transparent; background: rgb(255 255 255 / 10%); color: #fff; }
.sidebar-search input::placeholder { color: rgb(255 255 255 / 55%); }
.sidebar-capture-trigger { justify-content: flex-start; gap: .55rem; min-height: 45px; }
.sidebar-capture-trigger kbd { margin-left: auto; border: 1px solid rgb(255 255 255 / 22%); border-radius: .35rem; padding: .12rem .35rem; color: rgb(255 255 255 / 75%); background: rgb(0 0 0 / 10%); font-size: .68rem; font-weight: 650; }
.sidebar-footer { display: grid; gap: .65rem; margin-top: auto; padding: .8rem .45rem .2rem; }
.sidebar .account-settings-link { display: flex; min-height: 34px; align-items: center; gap: .55rem; border-radius: .6rem; padding: .35rem .45rem; color: rgb(255 255 255 / 72%); font-size: .82rem; font-weight: 700; }
.sidebar .account-settings-link:hover, .sidebar .account-settings-link.active { color: #fff; background: rgb(255 255 255 / 10%); text-decoration: none; }
.account-email { overflow: hidden; color: rgb(255 255 255 / 64%); font-size: .78rem; text-overflow: ellipsis; }

.main-content { width: min(1180px, calc(100% - 248px)); min-height: 100vh; margin-left: 248px; padding: 3rem clamp(1.25rem, 4vw, 4rem) 5rem; outline: none; }
.mobile-account-row { display: none; }
.mobile-nav { display: none; }
.page-header { margin-bottom: 2.2rem; }
.page-header > p:last-child { max-width: 700px; color: var(--muted); font-size: 1.04rem; }
.eyebrow, .status-label { margin-bottom: .4rem; color: var(--magenta); font-size: .74rem; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.back-link { display: inline-flex; margin-bottom: 1.15rem; color: var(--muted); font-size: .9rem; font-weight: 700; }

.card { border: 1px solid var(--stroke); border-radius: 1rem; background: var(--card); box-shadow: var(--shadow); }
.analysis-narrative { padding: clamp(1.25rem, 3vw, 2.25rem); }
.analysis-datestamp { padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--stroke); }
.analysis-datestamp .eyebrow { margin-bottom: .4rem; }
.analysis-prose { max-width: 72ch; font-size: 1.05rem; line-height: 1.8; }
.analysis-prose p { margin: 0 0 1.25rem; white-space: pre-line; }
.analysis-prose p:last-child { margin-bottom: 0; }
.analysis-section + .analysis-section { margin-top: 1.8rem; }
.analysis-section > h2 { margin-bottom: .75rem; font-size: 1.18rem; line-height: 1.4; }
.analysis-theme + .analysis-theme { margin-top: 1.35rem; }
.analysis-theme h3 { margin: 0 0 .4rem; font-size: 1.05rem; line-height: 1.5; }
.analysis-note { max-width: 80ch; margin-top: 1rem; }
.stack { display: grid; gap: 1rem; }
.stack.compact { gap: .75rem; }
.row { display: flex; align-items: center; gap: .65rem; }
.row.start { align-items: flex-start; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 2rem; align-items: start; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .8rem; }
.section-heading h2, .section-heading p { margin-bottom: .1rem; }
.section-heading p, .muted { color: var(--muted); }
.section-heading p { font-size: .9rem; }
.count-pill, .badge, .migration-label { display: inline-flex; align-items: center; border-radius: 999px; padding: .28rem .6rem; background: var(--quiet); color: var(--muted); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.slot { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--magenta) 10%, transparent); color: var(--magenta); font-weight: 800; }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .72rem; padding: .58rem .95rem; color: var(--text); background: var(--quiet); font-weight: 700; }
.button:hover { filter: brightness(.97); text-decoration: none; }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--magenta), var(--purple)); }
.button.positive { color: #fff; background: var(--positive); }
.button.danger { color: #fff; background: var(--danger); }
.button.quiet { border-color: var(--stroke); background: transparent; }
.sidebar .button.quiet { border-color: rgb(255 255 255 / 20%); color: #fff; }
.button.small { min-height: 34px; padding: .38rem .7rem; font-size: .82rem; }
.button.full { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .55; filter: none; }

label { display: grid; gap: .4rem; color: var(--text); font-size: .86rem; font-weight: 650; }
input, select, textarea { min-height: 44px; width: 100%; border: 1px solid var(--stroke); border-radius: .7rem; padding: .65rem .75rem; color: var(--text); background: var(--field); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--magenta) 35%, transparent); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.add-panel { margin-top: 1rem; padding: 1rem; }
summary { cursor: pointer; font-weight: 740; }

.list-card { padding: .35rem 1rem; }
.list-row { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--stroke); }
.list-row:last-child { border-bottom: 0; }
.list-row strong, .list-row small { display: block; }
.list-row small { margin-top: .2rem; color: var(--muted); }
.empty { padding: 1.4rem; color: var(--muted); text-align: center; }
.empty strong { color: var(--text); font-size: 1.05rem; }
.empty p { margin: .4rem auto 0; }

.focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.focus-column { padding: 1rem; }
.focus-column .section-heading { margin-top: 0; }
.important-slot { display: flex; min-height: 255px; flex-direction: column; }
.important-slot h2 { margin: 1rem 0; font-size: 1.2rem; line-height: 1.35; }
.important-actions { display: grid; gap: .75rem; margin-top: auto; }
.important-empty { margin: auto 0; padding: 1rem 0; }
.important-limit { margin-top: 1rem; }
.single-column { grid-template-columns: 1fr; }
.focus-item { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--stroke); }
.focus-item p { margin: .3rem 0; font-weight: 650; }
.focus-item form { grid-column: 2; }
.filter-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 .7rem; }
.badge.selected { box-shadow: inset 0 0 0 2px currentColor; }
.priority-leader { color: var(--purple); }
.priority-family { color: var(--magenta); }
.priority-learner { color: var(--blue); }
.priority-athlete { color: var(--orange); }

.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.person-card { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: 1rem; }
.avatar { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--magenta), var(--purple)); font-weight: 800; }
.person-copy h2 { margin: .1rem 0; }
.person-copy p, .person-copy small { margin: 0; color: var(--muted); }
.person-copy small { display: block; margin-top: .22rem; }
.action-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.action-tags .badge { font-size: .72rem; }
.feature-card { display: flex; gap: 1rem; padding: 1.1rem; }
.feature-link { color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.feature-link:hover { border-color: color-mix(in srgb, var(--magenta) 42%, var(--stroke)); box-shadow: 0 14px 40px rgb(20 32 52 / 11%); text-decoration: none; transform: translateY(-1px); }
.feature-link .feature-arrow { align-self: center; margin-left: auto; color: var(--muted); font-weight: 800; }
.feature-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--magenta); background: color-mix(in srgb, var(--magenta) 9%, transparent); font-size: 1.2rem; font-weight: 800; }
.feature-card p { margin: .25rem 0 .5rem; color: var(--muted); }
.search-page-form { display: grid; grid-template-columns: 1fr auto; gap: .7rem; padding: 1rem; margin-bottom: 1rem; }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.metric-card { display: grid; gap: .35rem; padding: 1.1rem; }
.metric-card span, .metric-card small { color: var(--muted); font-size: .8rem; font-weight: 700; }
.metric-card strong { font-size: clamp(1.35rem, 3vw, 2rem); }
.metric-card.accent { border-color: color-mix(in srgb, var(--purple) 32%, var(--stroke)); }
.wealth-private { display: grid; }
.account-source-section { margin-top: 1.2rem; }
.account-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.source-card { display: grid; align-content: start; gap: .8rem; min-height: 210px; padding: 1.1rem; margin: 0; }
.source-card h3, .source-card p { margin: 0; }
.source-card > .button { margin-top: auto; }
.source-recommended { border-color: color-mix(in srgb, var(--magenta) 38%, var(--stroke)); box-shadow: 0 12px 34px rgb(173 46 122 / 9%); }
.connected-preview { border-radius: .75rem; padding: .75rem; background: var(--quiet); }
.connected-preview small { color: var(--muted); font-weight: 700; }
.connected-preview ul { display: flex; flex-wrap: wrap; gap: .35rem .8rem; padding: 0; margin: .45rem 0 0; list-style: none; }
.connected-preview li { font-size: .86rem; font-weight: 700; }
.plaid-link-status:empty { display: none; }
.error-text { color: var(--danger); }
.privacy-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.privacy-toggle { width: fit-content; margin: -1.25rem 0 1rem auto; }
.private-value { position: relative; }
.privacy-toggle-input:not(:checked) ~ .wealth-content .private-value { visibility: hidden; user-select: none; }
.privacy-toggle-input:not(:checked) ~ .wealth-content .private-value::after { content: "••••"; position: absolute; left: 0; top: 0; visibility: visible; color: var(--muted); }
.privacy-toggle-input:focus-visible + .privacy-toggle { outline: 2px solid var(--magenta); outline-offset: 3px; }
.wealth-tracker .privacy-toggle { margin-top: 0; }
.wealth-tracker .wealth-content { min-width: 0; }
.progress-card { min-width: 0; padding: 1.25rem; }
.progress-total { display: grid; gap: .35rem; }
.progress-total small { color: var(--muted); }
.progress-total strong { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.progress-chart-frame { position: relative; margin-top: 1.5rem; }
.progress-chart-scroll, .progress-table-scroll { overflow-x: auto; }
.progress-chart { display: block; width: 100%; }
.progress-mask { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 2rem; border: 1px dashed var(--stroke); border-radius: .75rem; text-align: center; color: var(--muted); background: var(--quiet); }
.privacy-toggle-input:checked ~ .wealth-content .progress-mask { display: none; }
.privacy-toggle-input:not(:checked) ~ .wealth-content .private-chart { visibility: hidden; pointer-events: none; }
.progress-grid { stroke: var(--stroke); stroke-width: 1; }
.progress-zero { stroke: var(--muted); stroke-width: 1; }
.progress-axis { fill: var(--muted); font-size: 13px; }
.progress-cursor { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
.progress-scrubber { display: grid; gap: .4rem; margin-top: 1rem; font-size: .85rem; }
.progress-scrubber input { width: 100%; padding: 0; accent-color: var(--magenta); cursor: pointer; }
.progress-date { gap: .5rem; margin: .5rem 0 1rem; font-size: .85rem; }
.progress-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.progress-table th, .progress-table td { padding: .85rem .3rem; border-bottom: 1px solid var(--stroke); text-align: left; }
.progress-table thead th { color: var(--muted); font-size: .75rem; font-weight: 600; }
.progress-table td, .progress-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.progress-table td { white-space: nowrap; }
.progress-account-label { display: flex; align-items: center; gap: .6rem; overflow-wrap: anywhere; }
.progress-account-label small { display: block; margin-top: .2rem; font-size: .75rem; font-weight: 400; }
.progress-swatch { width: 12px; height: 12px; flex: 0 0 12px; }
.linked-institution-card { padding: 1.1rem; }
.institution-heading h3 { margin-top: 0; margin-bottom: .25rem; }
.plaid-status.active { color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, var(--quiet)); }
.plaid-status.login_required, .plaid-status.consent_expiring, .plaid-status.new_accounts_available { color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, var(--quiet)); }
.plaid-status.permission_revoked, .plaid-status.relink_required, .plaid-status.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--quiet)); }
.inline-notice { margin: .8rem 0; border-left: 3px solid var(--orange); border-radius: .25rem; padding: .6rem .75rem; color: var(--text); background: color-mix(in srgb, var(--orange) 7%, var(--quiet)); font-size: .86rem; }
.inline-notice.error { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--quiet)); }
.plaid-actions { margin: .9rem 0 .7rem; }
.plaid-actions form { margin: 0; }
.source-badges { justify-content: flex-end; }
.account-card { padding: 1.1rem; }
.account-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin: 1rem 0; }
.account-values > div { display: grid; gap: .25rem; padding: .85rem; border-radius: .75rem; background: var(--quiet); }
.account-values small { color: var(--muted); }
.account-values strong { font-size: 1.08rem; }
.edit-panel { margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--stroke); }
.danger-form { display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--stroke); }
.fine-print { font-size: .82rem; }

.compact-heading { align-items: start; margin-top: 0; }
.compact-heading a { flex: 0 0 auto; font-size: .82rem; font-weight: 700; }
.compact-empty { padding: 1rem .25rem .25rem; }
.private-summary { margin-top: .75rem; }
.private-summary summary { color: var(--magenta); }
.private-summary[open] summary { margin-bottom: .35rem; }

.reset-close { margin-top: 1rem; padding: 1.3rem; text-align: center; }
.reset-close p { color: var(--muted); }

.settings-layout { grid-template-columns: minmax(0, 1.45fr) minmax(250px, .65fr); }
.settings-card { padding: 1.2rem; }
.settings-card .form-grid { margin-top: 1.2rem; }
.data-summary { position: sticky; top: 1rem; }
.data-summary form { margin-top: 1rem; }
.flash-stack { position: relative; z-index: 10; display: grid; gap: .5rem; max-width: 760px; margin: 0 auto 1rem; }
.flash { border: 1px solid var(--stroke); border-radius: .75rem; padding: .75rem 1rem; background: var(--card); box-shadow: var(--shadow); }
.flash.success { border-color: color-mix(in srgb, var(--positive) 40%, var(--stroke)); color: var(--positive); }
.flash.error { border-color: color-mix(in srgb, var(--danger) 40%, var(--stroke)); color: var(--danger); }

.capture-dialog { width: min(620px, calc(100vw - 2rem)); max-height: min(820px, calc(100vh - 2rem)); padding: 0; overflow: auto; border: 0; border-radius: 1rem; color: var(--text); background: transparent; box-shadow: 0 28px 90px rgb(4 11 25 / 38%); }
.capture-dialog::backdrop { background: rgb(4 11 25 / 58%); backdrop-filter: blur(4px); }
.capture-dialog-card { padding: 1.2rem; border: 1px solid var(--stroke); border-radius: 1rem; background: var(--card); }
.capture-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.capture-dialog-header h2, .capture-dialog-header p { margin-bottom: 0; }
.capture-dialog-close { display: grid; flex: 0 0 auto; width: 38px; min-height: 38px; place-items: center; border: 1px solid var(--stroke); border-radius: 50%; padding: 0; color: var(--muted); background: var(--quiet); font-size: 1.4rem; line-height: 1; }
.quick-capture-form { display: grid; gap: .9rem; }
.capture-fields { display: grid; gap: .8rem; min-width: 0; padding: .9rem; margin: 0; border: 1px solid var(--stroke); border-radius: .8rem; }
.capture-fields[hidden] { display: none; }
.capture-fields legend { padding: 0 .35rem; color: var(--muted); font-size: .76rem; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.capture-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.capture-form-actions { display: flex; justify-content: flex-end; }
.capture-shortcut-hint { margin: .85rem 0 0; color: var(--muted); font-size: .75rem; text-align: right; }
.capture-shortcut-hint kbd { border: 1px solid var(--stroke); border-bottom-width: 2px; border-radius: .3rem; padding: .05rem .28rem; background: var(--quiet); font-size: .7rem; }
.capture-page-header, .capture-page-card { max-width: 680px; margin-right: auto; margin-left: auto; }
.capture-page-card { padding: 1.2rem; }

.auth-page { background: radial-gradient(circle at 15% 15%, rgb(173 46 122 / 18%), transparent 28%), radial-gradient(circle at 85% 5%, rgb(103 65 165 / 20%), transparent 30%), var(--page); }
.auth-wrap { display: grid; min-height: 100vh; place-content: center; gap: 1.2rem; padding: 2rem 1rem; }
.auth-heading { max-width: 460px; text-align: center; }
.auth-heading p, .privacy-note { color: var(--muted); }
.login-icon { width: 78px; height: 78px; border-radius: 23px; box-shadow: 0 15px 40px rgb(173 46 122 / 25%); }
.auth-card { width: min(430px, calc(100vw - 2rem)); padding: 1.3rem; }
.privacy-note { margin: 0; text-align: center; font-size: .82rem; }
.notice { border-radius: .7rem; padding: .75rem; color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.error-page { max-width: 520px; margin: 12vh auto; }
.error-page .button { margin-top: 1rem; }

.connectivity-banner { position: fixed; inset: 0 0 auto; z-index: 100; padding: .55rem 1rem; color: #fff; background: var(--orange); font-size: .82rem; font-weight: 750; text-align: center; }
.appearance-controls { display: grid; gap: .4rem; }
.appearance-controls .button { width: 100%; justify-content: flex-start; }
.mobile-utility-button { display: grid; flex: 0 0 38px; width: 38px; min-height: 38px; place-items: center; border: 1px solid var(--stroke); border-radius: .65rem; color: var(--muted); background: var(--card); font-weight: 800; }

.next-action-strip { position: sticky; z-index: 9; top: 1rem; display: flex; align-items: center; gap: .75rem; max-width: 900px; padding: .65rem .75rem; margin: -1.55rem auto 1.4rem; border: 1px solid color-mix(in srgb, var(--magenta) 22%, var(--stroke)); border-radius: .9rem; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.next-context { display: grid; min-width: 0; color: var(--text); }
.next-context:hover { text-decoration: none; }
.next-context span { color: var(--muted); font-size: .7rem; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.next-context strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.next-action-strip > .next-context:last-of-type:not(:first-child) { margin-left: auto; }

.filter-panel { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: end; padding: .2rem 0 .9rem; }
.filter-panel .filter-row { grid-column: 1; margin: .45rem 0; }
.sort-form { grid-column: 2; grid-row: 1 / span 3; min-width: 165px; }
.sort-form label { gap: .25rem; }
.sort-form select { min-height: 38px; padding: .45rem .65rem; }
.badge[href] { transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.badge[href]:hover { color: var(--magenta); background: color-mix(in srgb, var(--magenta) 10%, var(--quiet)); text-decoration: none; }
.badge.selected { color: var(--card); background: var(--text); }
.inline-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.list-row.has-actions > :first-child { min-width: 0; }
.list-row.has-actions > .inline-actions, .list-row.has-actions > .important-actions { flex: 0 0 auto; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }

.search-groups { display: grid; gap: 1rem; }
.search-group { padding: .45rem 1rem; }
.search-group .section-heading { margin-top: .5rem; }
.recent-searches { padding: .8rem 1rem; margin-bottom: 1rem; }
mark { border-radius: .2rem; padding: 0 .08em; color: inherit; background: color-mix(in srgb, #ffd45c 68%, var(--card)); }
kbd { border: 1px solid var(--stroke); border-bottom-width: 2px; border-radius: .35rem; padding: .08rem .34rem; color: var(--text); background: var(--quiet); font-family: inherit; font-size: .78em; font-weight: 750; }

.required-field { position: relative; }
.required-marker { position: absolute; top: 0; right: 0; color: var(--muted); font-size: .68rem; font-weight: 650; }
.field-error { color: var(--danger); font-size: .76rem; font-weight: 650; }
[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
form[aria-busy="true"] { cursor: progress; opacity: .82; }

.capture-context { margin: -.25rem 0 0; }
.capture-similar { border: 1px solid color-mix(in srgb, var(--orange) 32%, var(--stroke)); border-radius: .75rem; padding: .75rem; background: color-mix(in srgb, var(--orange) 6%, var(--quiet)); }
.capture-similar > strong { color: var(--orange); font-size: .8rem; }
.capture-similar ul { display: grid; gap: .5rem; padding: 0; margin: .55rem 0 0; list-style: none; }
.capture-similar li { display: grid; }
.capture-similar li a { font-weight: 700; }
.capture-similar li small { color: var(--muted); }

.undo-toast { position: fixed; z-index: 80; right: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: .65rem; max-width: min(560px, calc(100vw - 2rem)); border: 1px solid color-mix(in srgb, var(--positive) 38%, var(--stroke)); border-radius: .9rem; padding: .65rem .75rem .65rem 1rem; color: var(--text); background: var(--card); box-shadow: 0 18px 55px rgb(4 11 25 / 22%); }
.undo-toast form { margin-left: auto; }
.undo-dismiss { display: grid; width: 32px; min-height: 32px; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.25rem; }

.shortcuts-dialog { width: min(520px, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 1rem; color: var(--text); background: transparent; box-shadow: 0 28px 90px rgb(4 11 25 / 38%); }
.shortcuts-dialog::backdrop { background: rgb(4 11 25 / 58%); backdrop-filter: blur(4px); }
.shortcuts-card { padding: 1.2rem; border: 1px solid var(--stroke); border-radius: 1rem; background: var(--card); }
.shortcut-list { display: grid; gap: 0; margin: 0; }
.shortcut-list > div { display: grid; grid-template-columns: minmax(120px, .7fr) 1fr; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--stroke); }
.shortcut-list dt, .shortcut-list dd { margin: 0; }
.shortcut-list dd { color: var(--muted); }
.appearance-dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

.freshness-current { color: var(--positive); background: color-mix(in srgb, var(--positive) 10%, var(--quiet)); }
.freshness-aging { color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, var(--quiet)); }
.freshness-stale { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--quiet)); }
.wealth-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .85rem; }

:root[data-density="compact"] .main-content { padding-top: 2rem; }
:root[data-density="compact"] .page-header { margin-bottom: 1.35rem; }
:root[data-density="compact"] .stack { gap: .65rem; }
:root[data-density="compact"] .list-row { min-height: 48px; padding: .55rem 0; }
:root[data-density="compact"] .card:not(.capture-dialog-card, .shortcuts-card) { border-radius: .78rem; }
:root[data-density="compact"] .focus-column, :root[data-density="compact"] .source-card, :root[data-density="compact"] .account-card { padding: .8rem; }

@media (max-width: 820px) {
  .sidebar { display: none; }
  .main-content { width: 100%; margin-left: 0; padding: 1rem 1rem 6.5rem; }
  .mobile-account-row { position: sticky; z-index: 15; top: .5rem; display: flex; align-items: center; justify-content: flex-end; gap: .45rem; padding: .4rem; margin: -.4rem -.4rem .75rem; border: 1px solid color-mix(in srgb, var(--stroke) 72%, transparent); border-radius: .85rem; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
  .mobile-search { position: relative; flex: 1 1 auto; min-width: 90px; }
  .mobile-search input { min-height: 44px; padding: .45rem 2.75rem .45rem .65rem; }
  .mobile-search button { position: absolute; inset: 0 0 0 auto; width: 2.75rem; min-height: 44px; border: 0; color: var(--muted); background: transparent; font-size: 1.1rem; }
  .mobile-capture-trigger { flex: 0 0 auto; gap: .25rem; min-height: 44px; padding: .4rem .65rem; font-size: .78rem; }
  .mobile-utility-button { flex-basis: 44px; width: 44px; min-height: 44px; }
  .mobile-account-row .account-settings-link { display: inline-flex; min-height: 44px; align-items: center; gap: .4rem; border: 1px solid var(--stroke); border-radius: .65rem; padding: .35rem .65rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
  .mobile-account-row .account-settings-link:hover, .mobile-account-row .account-settings-link.active { color: var(--magenta); text-decoration: none; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: flex; overflow-x: auto; overscroll-behavior-x: contain; padding: 1rem .25rem max(.45rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--stroke); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(20px); scrollbar-width: thin; scroll-snap-type: x proximity; }
  .mobile-nav a { display: grid; flex: 0 0 82px; min-height: 44px; place-items: center; gap: .15rem; padding: .3rem .1rem; color: var(--muted); font-size: .66rem; font-weight: 650; scroll-snap-align: center; }
  .mobile-nav a span { font-size: 1rem; }
  .mobile-nav a.active { color: var(--magenta); }
  .mobile-nav a:hover { text-decoration: none; }
  .mobile-nav .mobile-nav-capture { align-self: start; margin-top: -.75rem; border: 4px solid var(--page); border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--magenta), var(--purple)); box-shadow: 0 8px 24px rgb(103 65 165 / 30%); }
  .mobile-nav .mobile-nav-capture span { font-size: 1.3rem; }
  .next-action-strip { top: 4.6rem; flex-wrap: wrap; margin: 0 0 1rem; }
  .next-context { flex: 1 1 180px; }
  .next-action-strip > .next-context:last-of-type:not(:first-child) { margin-left: 0; }
  .filter-panel { grid-template-columns: 1fr; }
  .sort-form { grid-column: 1; grid-row: auto; max-width: 240px; }
  .list-row.has-actions { align-items: flex-start; flex-direction: column; }
  .list-row.has-actions > .inline-actions, .list-row.has-actions > .important-actions { width: 100%; }
  .button.small, .undo-dismiss { min-height: 44px; }
  .undo-toast { right: .75rem; bottom: 5.4rem; left: .75rem; flex-wrap: wrap; max-width: none; }
  .two-column { grid-template-columns: 1fr; }
  .data-summary { position: static; }
}

@media (max-width: 600px) {
  .focus-grid, .people-grid, .form-grid, .metric-grid, .account-values, .account-source-grid, .capture-field-row { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .privacy-toggle { margin: 0 0 1rem; }
  h1 { font-size: 2rem; }
}

@media (max-width: 430px) {
  .mobile-account-row .account-settings-link { width: 38px; min-width: 38px; justify-content: center; padding: 0; font-size: 0; }
  .mobile-account-row .account-settings-link span { font-size: .9rem; }
  .mobile-capture-trigger span:last-child { display: none; }
  .mobile-capture-trigger { width: 38px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Essays: a calm personal-publication surface with a focused long-form editor. */
.essay-grid { display: grid; gap: 1rem; }
.essay-card { padding: 0; overflow: hidden; }
.essay-card-link { display: block; padding: clamp(1.2rem, 3vw, 2rem); color: var(--text); }
.essay-card-link:hover { text-decoration: none; background: color-mix(in srgb, var(--quiet) 52%, transparent); }
.essay-card h2 { max-width: 25ch; margin: .2rem 0 .45rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.15; }
.essay-subtitle { max-width: 58ch; margin: 0 0 1rem; color: var(--muted); font-size: 1.05rem; }
.essay-preview { max-width: 76ch; margin: 0; color: var(--text); line-height: 1.7; }
.essay-card-meta { margin: 1.1rem 0 0; color: var(--magenta); font-size: .82rem; font-weight: 700; }
.essay-empty { grid-column: 1 / -1; }

.essay-compose-shell, .essay-reader { width: min(780px, 100%); margin-inline: auto; }
.essay-compose-header { padding-bottom: 1rem; border-bottom: 1px solid var(--stroke); }
.essay-form { display: grid; }
.essay-title-input, .essay-subtitle-input { width: 100%; border: 0; border-radius: 0; padding-inline: 0; background: transparent; box-shadow: none; }
.essay-title-input { min-height: 1.35em; padding-block: .15rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 6vw, 3.65rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.08; }
.essay-subtitle-input { min-height: 1.5em; padding-block: .65rem 1.2rem; color: var(--muted); font-size: clamp(1.05rem, 2.5vw, 1.3rem); }
.essay-title-input:focus, .essay-subtitle-input:focus { outline-offset: 4px; }
.essay-toolbar { position: sticky; z-index: 10; top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .55rem; border: 1px solid var(--stroke); border-radius: .8rem; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.essay-toolbar button { display: grid; width: 38px; min-height: 38px; place-items: center; border: 0; border-radius: .45rem; color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.essay-toolbar button:hover, .essay-toolbar button[aria-pressed="true"] { color: var(--magenta); background: var(--quiet); }
.essay-toolbar-separator { width: 1px; height: 26px; margin-inline: .2rem; background: var(--stroke); }
.essay-color-control, .essay-size-control { display: flex; flex-direction: row; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: .75rem; }
.essay-color-control input { width: 36px; height: 36px; min-height: 36px; border: 0; padding: 2px; background: transparent; cursor: pointer; }
.essay-size-control select { min-height: 36px; padding: .3rem 1.8rem .3rem .5rem; font-size: .82rem; }
.essay-source-label { margin-top: 1rem; }
.essay-source { min-height: 30rem; line-height: 1.75; }
.essay-editor { display: none; min-height: 32rem; padding: 2rem .25rem; color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.85; caret-color: var(--magenta); }
.essay-editor-enhanced .essay-source, .essay-editor-enhanced .essay-source-label { display: none; }
.essay-editor-enhanced .essay-editor { display: block; }
.essay-editor:empty::before { color: var(--muted); content: attr(data-placeholder); pointer-events: none; }
.essay-editor:focus { outline: 0; }
.essay-editor.invalid { border-bottom: 2px solid var(--danger); }
.essay-editor p, .essay-editor div, .essay-prose p, .essay-prose div { margin: 0 0 1.25em; }
.essay-editor blockquote, .essay-prose blockquote { margin: 1.5em 0; border-left: 3px solid var(--magenta); padding-left: 1.25em; color: var(--muted); font-style: italic; }
.essay-compose-actions { display: flex; justify-content: flex-end; gap: .7rem; padding: 1rem 0 2rem; border-top: 1px solid var(--stroke); }

.essay-reader-nav { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: clamp(2rem, 6vw, 4rem); }
.essay-reader-header { margin-bottom: clamp(2.2rem, 6vw, 4rem); text-align: center; }
.essay-reader-header h1 { max-width: 18ch; margin: .4rem auto .75rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 7vw, 4.8rem); letter-spacing: -.05em; line-height: 1.02; }
.essay-reader-subtitle { max-width: 50ch; margin: 0 auto 1.35rem; color: var(--muted); font-size: clamp(1.1rem, 2.8vw, 1.4rem); line-height: 1.5; }
.essay-byline { color: var(--muted); font-size: .85rem; }
.essay-prose { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 2.2vw, 1.2rem); line-height: 1.9; overflow-wrap: anywhere; }
.essay-prose ul, .essay-prose ol { margin: 1.25em 0; padding-left: 1.7em; }
.essay-reader-footer { margin-top: 4rem; padding: 1.5rem 0 3rem; border-top: 1px solid var(--stroke); }
.essay-edit-history ol { display: grid; gap: .45rem; color: var(--muted); font-size: .85rem; }

@media (min-width: 720px) {
  .essay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .essay-card:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .essay-toolbar { top: .25rem; }
  .essay-color-control, .essay-size-control { font-size: 0; }
  .essay-editor { min-height: 26rem; padding-top: 1.4rem; }
  .essay-compose-actions { position: sticky; bottom: calc(var(--mobile-navigation-height, 6rem)); z-index: 9; padding: .65rem; margin-inline: -.65rem; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(18px); }
}

/* Task-first workspace: quiet surfaces, readable controls, progressive disclosure. */
.card { box-shadow: none; }
.button.primary { background: var(--primary); color: #fff; }
.button.positive { background: #20774a; color: #fff; }
.button.danger { background: #b3261e; color: #fff; }
input, select, textarea { font-size: 1rem; min-width: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.stack > * { min-width: 0; }
.section-heading { flex-wrap: wrap; }
.nav-group-label { margin: 1rem .7rem .35rem; color: #aebbd0; font-size: .75rem; font-weight: 650; }
.sidebar { gap: .7rem; }
.sidebar .sidebar-capture-trigger { margin: .5rem 0 .2rem; padding-inline: .65rem; font-size: .875rem; white-space: nowrap; }
.sidebar-capture-trigger kbd { font-size: .75rem; white-space: nowrap; }
.sidebar .nav-link { min-height: 44px; }
.page-header { margin-bottom: 1.6rem; }
.page-header h1 { font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.035em; }
.page-header p { max-width: 60ch; }
.page-header.with-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-header.with-action > .button { flex-shrink: 0; }
.main-content, .card, .list-row > div, .focus-column, .form-grid > *, .stack { min-width: 0; }
.list-row strong, .card h2, .card p, .account-email { overflow-wrap: anywhere; }
.button.small, label, summary, .filter-row .badge { font-size: .875rem; }
.eyebrow, .fine-print, .status-label, .capture-shortcut-hint, .required-marker { font-size: .75rem; }
summary { min-height: 44px; padding-block: .65rem; cursor: pointer; }
details > summary + * { margin-top: .8rem; }
.secondary-options { width: 100%; }
.secondary-options > summary { color: var(--muted); }
.secondary-options[open] > summary { color: var(--text); }
.history-panel { margin-top: 1.5rem; border-top: 1px solid var(--stroke); padding-top: .75rem; }
.inline-edit[open] { flex: 1 0 100%; }
.inline-edit[open] .compact-form { margin-block: .75rem; }
.list-row.has-actions:has(.inline-edit[open]) { flex-direction: column; align-items: stretch; }
.search-page-form { display: flex; flex-wrap: wrap; }
.search-page-form input[type="search"] { flex: 1 1 180px; min-width: 0; }
.danger-zone > summary { color: var(--danger); }
.optional-fields .form-grid { margin-top: .75rem; }
.optional-fields { border-top: 1px solid var(--stroke); margin-top: .3rem; }
.optional-fields label + label { margin-top: .7rem; }
.filter-panel { display: block; }
.filter-panel .sort-form { max-width: none; display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.filter-panel .sort-form label { min-width: 140px; }
.filter-panel .sort-form .button { margin-bottom: 0; }
.auth-card code { overflow-wrap: anywhere; white-space: normal; }
.mobile-brand { color: var(--text); font-weight: 750; padding: .5rem .65rem; }
.mobile-more-panel { display: none; }
.mobile-more-core-links { display: none; }
@media (max-width: 820px) {
  .main-content { padding-bottom: calc(var(--mobile-navigation-height, 6rem) + 2rem); }
  .mobile-account-row { position: static; box-shadow: none; background: var(--card); }
  .mobile-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(3.5rem, 100%), 1fr)); overflow: visible; padding: .35rem .25rem max(.45rem, env(safe-area-inset-bottom)); background: var(--card); }
  .mobile-nav > a, .mobile-more > summary { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .15rem; min-width: 0; min-height: 68px; margin: 0; padding: .25rem .1rem; color: var(--muted); font-size: .875rem; font-weight: 600; text-align: center; line-height: 1.15; }
  .mobile-nav > a > span, .mobile-more > summary > span { font-size: 1.25rem; }
  .mobile-nav > a, .mobile-more > summary { overflow-wrap: anywhere; }
  .two-column, .focus-grid, .people-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-nav .mobile-nav-capture { align-self: stretch; margin: 0; border: 0; border-radius: .75rem; box-shadow: none; background: #a32670; color: white; }
  .mobile-more > summary { list-style: none; }
  .mobile-more > summary::-webkit-details-marker { display: none; }
  .mobile-more > summary.active, .mobile-more[open] > summary { color: var(--magenta); }
  .mobile-more[open] .mobile-more-panel { display: grid; position: absolute; right: .5rem; bottom: calc(100% + .5rem); width: min(320px, calc(100vw - 1rem)); max-height: calc(100dvh - 7rem); overflow-y: auto; margin: 0; padding: .75rem; border: 1px solid var(--stroke); border-radius: 1rem; background: var(--card); box-shadow: var(--shadow); }
  .mobile-more-panel .nav-group-label { color: var(--muted); margin: .25rem .65rem; }
  .mobile-nav .mobile-more-panel a { display: flex; justify-content: flex-start; min-height: 44px; padding: .6rem .75rem; font-size: 1rem; border-radius: .5rem; }
  .mobile-more-panel a[aria-current="page"] { color: var(--magenta); background: var(--quiet); }
  .mobile-more-panel button { width: 100%; min-height: 44px; justify-content: flex-start; margin-top: .3rem; }
  .undo-toast { bottom: calc(var(--mobile-navigation-height, 6rem) + .75rem); }
  .large-navigation .mobile-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .large-navigation .mobile-nav > a:nth-child(2), .large-navigation .mobile-nav > a:nth-child(4) { display: none; }
  .large-navigation .mobile-more-core-links { display: grid; }
  .page-header.with-action { align-items: flex-start; flex-wrap: wrap; }
  .inline-actions { flex-wrap: wrap; }
  .action-row { flex-direction: column; align-items: stretch; }
}

/* House uses the app's page header and a wider workspace for the model. */
.house-page .main-content { width: calc(100% - 248px); padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.house-page-header p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.house-model-frame { display: block; width: 100%; height: max(680px, calc(100dvh - 220px)); border: 0; background: var(--page); }
@media (max-width: 820px) {
  .house-page .main-content { width: 100%; margin-left: 0; padding: 1rem 1rem calc(var(--mobile-navigation-height, 6rem) + 2rem); }
  .house-model-frame { height: max(760px, calc(100dvh - 220px)); }
}