/* Shared reading and navigation styles. Existing feature IDs and handlers stay intact. */
:root {
  --bb-bg: #10181d;
  --bb-panel: #19252d;
  --bb-raised: #22323c;
  --bb-text: #edf2f6;
  --bb-muted: #bac7d1;
  --bb-border: #455b69;
  --bb-accent: #a0e3b7;
  --bb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body.budget-app, body.page-home { font-family: var(--bb-font); font-size: 16px; font-weight: 400; line-height: 1.6; }
body.budget-app { background: var(--bb-bg); color: var(--bb-text); color-scheme: dark; }
.budget-app *, .page-home .readable-field, .page-home .readable-field * { box-sizing: border-box; }
.budget-app :is(button, input, select, textarea), .page-home :is(button, input, select, textarea) { font: inherit; }
.budget-app :is(button, a, input, select, textarea):focus-visible, .page-home :is(button, a, input, select, textarea):focus-visible { outline: 3px solid #96d8ff; outline-offset: 4px; }
.budget-app :is(h1, h2, h3, .panel-title, .page-title, .workspace-title, .summary-title, .question-title) { line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--bb-accent); }
.budget-app h1, .budget-app .page-title, .budget-app .workspace-title { font-size: clamp(26px, 3vw, 36px); }
.budget-app :is(h2, .panel-title, .summary-title, .question-title) { font-size: 23px; }
.budget-app :is(.muted, .row-sub, .summary-help, .summary-label, .file-meta, .template-sub, .milestone-sub, .insight-text, .question-subtext, .question-hint, .hint-text, .preview-label, .setup-subtitle, .goal-stats, .goal-notes, .welcome-text) { color: var(--bb-muted); font-size: 15px; line-height: 1.6; }
.budget-app :is(.checklist-item span, .flexible-field small, .quiz-gate p, .quiz-picker legend, .setup-option p) { color: var(--bb-muted); font-size: 15px; line-height: 1.6; }
.budget-app :is(.row-main, .goal-name, .file-name, .folder-name, .checklist-item strong, .template-name) { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.budget-app :is(.pill, .status-pill, .setup-chip) { font-size: 14px; line-height: 1.5; white-space: normal; }
.budget-app :is(.panel, .setup-view, .summary-container, .question-container, .workspace-header, .summary-card) { background: var(--bb-panel); border: 1px solid var(--bb-border); box-shadow: none; border-radius: 16px; padding: 24px; }
.budget-app :is(.panel, .main-content, .workspace, .layout-grid > *, .feature-grid > *, .chart-grid > *, .inline-form > *, .inline-form-4 > *, .goal-form > *) { min-width: 0; }
.budget-app :is(.panel-title, .question-title) { margin-bottom: 12px; }
.budget-app :is(.goal-card, .row-line, .checklist-item, .file-row, .template-card, .milestone-item, .insight-item, .folder-card) { background: var(--bb-raised); border-color: var(--bb-border); padding: 16px; }
.budget-app :is(.row-line, .file-row, .goal-top, .goal-stats) { flex-wrap: wrap; gap: 12px; }
.budget-app .row-line > div:first-child { flex: 1 1 180px; min-width: 0; }
.budget-app .checklist-item { flex-wrap: wrap; }
.budget-app .checklist-item > div { flex: 1 1 200px; }
.budget-app :is(.file-name, .goal-name) { white-space: normal; max-width: none; }
.budget-app :is(.stack, .goal-list, .checklist) { gap: 14px; }
.budget-app :is(.btn, .form-btn, .next-btn, .idea-btn, .edit-btn, .refine-btn) { min-height: 46px; font-size: 16px; line-height: 1.4; font-weight: 600; padding: 12px 18px; background: var(--bb-accent); color: #10271b; border-radius: 10px; }
.budget-app :is(.btn.secondary, .btn.template, .form-btn.alt, .edit-btn, .refine-btn, .skip-btn, .not-sure-btn) { background: #2a424f; color: #edf6ff; border: 1px solid #7396a9; }
.budget-app :is(.logout-btn, .btn.danger, .btn.warn, .form-btn.warn) { background: #652c34; color: #ffe5e8; border: 1px solid #bd6c79; min-height: 44px; font-size: 15px; }
.budget-app :is(.filter-chip, .quick-btn, .choice-chip) { min-height: 44px; font-size: 15px; }
.budget-app .goal-action { font-size: 15px; min-height: 44px; padding: 10px 14px; font-weight: 600; }
.budget-app .goal-action.add { background: var(--bb-accent); color: #10271b; }
.budget-app .goal-action.custom { background: #b2dffa; color: #142833; }
.budget-app .goal-action.toggle { background: #f5cf8e; color: #302212; }
.budget-app .goal-action.delete { background: #652c34; color: #ffe5e8; border: 1px solid #bd6c79; }
.budget-app button:hover { filter: brightness(1.12); }
.budget-app button:disabled { cursor: wait; opacity: .65; }
.budget-app :is(input:not([type=radio]):not([type=checkbox]):not([type=file]), select, textarea) { background: #101c24; color: var(--bb-text); border: 1px solid #79909f; font-size: 16px; line-height: 1.5; min-height: 46px; min-width: 0; max-width: 100%; padding: 11px 12px; border-radius: 9px; }
.budget-app input::placeholder, .budget-app textarea::placeholder { color: #acbcc8; opacity: 1; }
.budget-app :is(input[type=checkbox], input[type=radio]) { accent-color: #97dfae; }
.readable-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.readable-field > label { font-size: 15px; font-weight: 600; line-height: 1.5; color: inherit; }
.readable-field.full-width { grid-column: 1 / -1; }
.budget-app .inline-form, .budget-app .inline-form-4, .budget-app .goal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 16px; margin-top: 22px; }
.budget-app .inline-form > button, .budget-app .inline-form-4 > button { align-self: end; }
.budget-app .form-actions { margin-top: 4px; }
.budget-app .header { background: #142029; border-bottom: 1px solid var(--bb-border); padding: 18px 28px; gap: 20px; flex-wrap: wrap; border-radius: 0; }
.budget-app .logo { color: var(--bb-accent); font-size: 24px; }
.budget-app .nav { display: flex; gap: 8px; flex-wrap: wrap; }
.budget-app .nav-item { font-size: 16px; font-weight: 600; min-height: 44px; line-height: 1.5; padding: 11px 16px; color: var(--bb-text); border-radius: 8px; }
.budget-app .nav-item.active { color: #11291b; background: var(--bb-accent); }
.budget-app .profile { flex-wrap: wrap; gap: 12px; }
.budget-app .profile-email { max-width: min(260px, 70vw); font-size: 14px; color: var(--bb-muted); overflow-wrap: anywhere; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10010; padding: 12px 20px; background: #e5f6ec; color: #14251d; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.budget-app .section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 16px; background: #19252d; border: 1px solid var(--bb-border); border-radius: 12px; }
.section-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; color: #c4e4f8; text-decoration: underline; text-underline-offset: 4px; font-size: 15px; border-radius: 6px; }
.section-nav a:hover { background: #29404e; }
.budget-app [id] { scroll-margin-top: 24px; }
.budget-app .app-sidebar { flex: 0 0 180px; width: 180px; padding: 24px 14px; height: 100dvh; background: #142029; gap: 24px; }
.budget-app .brand-pill { box-shadow: none; color: #10271b; background: var(--bb-accent); }
.budget-app .nav-rail { gap: 10px; }
.budget-app .rail-btn { width: 100%; height: auto; min-height: 48px; padding: 12px; border-radius: 10px; justify-content: flex-start; gap: 12px; font-size: 16px; text-align: left; }
.rail-btn i { width: 20px; text-align: center; }
.budget-app .rail-btn.active { color: #c5f4d5; box-shadow: none; background: #244338; border-color: #92cba6; }
.budget-app .workspace { padding: 28px; }
.budget-app .workspace-header { gap: 20px; flex-wrap: wrap; }
.budget-app .workspace-tools { gap: 12px; }
.budget-app .content-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.budget-app .main-content { grid-row: 1; padding: 0; background: none; box-shadow: none; }
.budget-app .ad-sidebar { width: 100%; min-height: 0; }
.budget-app .feature-grid, .budget-app .checklist-grid, .budget-app .chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.budget-app .feature-grid, .budget-app .checklist-grid { align-items: start; }
.budget-app #summaryCards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
.budget-app #summaryCards > div:not(.empty-state) { background: var(--bb-panel) !important; border: 1px solid var(--bb-border); border-top: 4px solid var(--bb-accent); }
.budget-app #summaryCards > div:nth-child(2) { border-top-color: #f7aaaa; }
.budget-app #summaryCards > div:nth-child(3) { border-top-color: #9ed6fb; }
.budget-app #summaryCards > div > div { opacity: 1 !important; }
.budget-app :is(.summary-value, .preview-value, #summaryCards) { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.budget-app :is(#incomeLegend, #expenseLegend) > div { flex-wrap: wrap; line-height: 1.5; gap: 10px; }
.budget-app :is(#incomeLegend, #expenseLegend) > div > div:nth-child(2) { flex: 1 1 110px !important; }
.budget-app #sankeyChart { overflow-x: auto; }
.budget-app #sankeyChart svg { min-width: 760px; }
.budget-app .chart-tooltip { font-family: var(--bb-font); font-size: 15px !important; line-height: 1.6; }
.budget-app :is(.empty-state, .status-banner) { font-size: 16px; line-height: 1.6; color: var(--bb-text); }
.budget-app .documents-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.budget-app.page-goals > .container, .budget-app.page-bank > .container { width: 100%; max-width: 1240px; padding: 32px 24px 56px; }
.budget-app .layout-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
.budget-app .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.budget-app .quiz-actions { background: var(--bb-panel); padding: 16px 0; }
.budget-app .quiz-gate legend { font-size: 18px; font-weight: 600; }
.budget-app .quiz-section h2 { font-size: 23px; }
.budget-app .quiz-section { padding: 26px 0; }
.budget-app .quiz-picker { border-color: #6f8895; }
.budget-app .quiz-branch-note { color: #bfdef6; font-size: 15px; }
.budget-app .flexible-field { gap: 9px; }
.budget-app .flexible-field > label { font-size: 16px; font-weight: 600; }
.budget-app .quiz-retained { line-height: 1.6; }
.budget-app #summaryContent > div { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important; }
.budget-app #summaryContent { line-height: 1.7; }
.budget-app.page-auth { min-height: 100dvh; height: auto; padding: 32px 16px; }
.budget-app.page-auth .container { width: 100%; max-width: 460px; min-width: 0; padding: 32px; background: var(--bb-panel); border: 1px solid var(--bb-border); }
.budget-app.page-auth form { display: grid; gap: 18px; margin-top: 26px; }
.budget-app.page-auth input { width: 100% !important; margin: 0; }
.budget-app.page-auth form button { background: var(--bb-accent); color: #10271b; font-weight: 600; min-height: 48px; }
.budget-app.page-auth .link { color: #b1e8f9; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
.budget-app.page-auth .error { color: #ffb9be; }
/* The public landing page keeps its sections and links; only presentation changes. */
.page-home .home-hero { background: radial-gradient(ellipse at top right, #2f854d 0%, #175a35 45%, #0c3423 100%) !important; min-height: 760px !important; }
.page-home .home-nav { background: rgba(8, 42, 25, .84) !important; border-bottom: 1px solid #569467; position: relative !important; gap: 16px; padding: 22px 32px !important; flex-wrap: wrap; }
.page-home #authButtonsContainer { position: static !important; flex-wrap: wrap; gap: 10px !important; }
.page-home .home-hero { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; }
.page-home .home-hero-content { align-self: center; padding: 64px 24px 110px !important; }
.page-home .home-hero h1 { font-family: var(--bb-font) !important; font-weight: 750 !important; font-size: clamp(34px, 5.5vw, 64px) !important; text-shadow: none !important; }
.page-home .home-hero p { font-weight: 400 !important; font-size: clamp(18px, 2vw, 23px) !important; max-width: 65ch; }
.page-home #features h2, .page-home .home-cta h2 { font-family: var(--bb-font) !important; font-size: clamp(28px, 4vw, 42px) !important; line-height: 1.25 !important; }
.page-home #features p { color: #355641 !important; font-size: 18px !important; }
.page-home .home-feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; gap: 24px !important; }
.page-home .home-cta { background: linear-gradient(135deg, #14532d, #247442) !important; }
.page-home #features { background: #e7f3e7 !important; }
.page-home #features :is(h2, h3) { color: #154b2b !important; }
.page-home .home-feature-grid > div { background: #f5fbf3 !important; border: 1px solid #a6cda7; box-shadow: 0 10px 30px rgba(25, 83, 44, .10) !important; }
.page-home .home-feature-grid > div > div:first-child { background: linear-gradient(135deg, #b7e59b, #47a765) !important; }
.page-home .home-hero a[href="#features"] { background: #286641 !important; border-color: #96d49c !important; }
.page-home > footer { background: #0b3020 !important; color: #e2f3e5 !important; }
.page-home :is(a, button, input):focus-visible { outline-color: #b8ee92; }
.page-home #features a:focus-visible { outline-color: #247442; }
.page-home a[href="signup.html"] { background: #b4ed8d !important; color: #173b20 !important; box-shadow: none !important; font-weight: 650; }
.page-home .modal-content { box-sizing: border-box; color: #17242c; line-height: 1.6; }
.page-home .modal-content .readable-field { margin: 16px 0; }
.page-home .modal-content input { width: 100% !important; box-sizing: border-box; }
@media (max-width: 1100px) {
  .budget-app .app-shell { flex-direction: column; }
  .budget-app .app-sidebar { position: static; flex: none; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; padding: 16px; gap: 14px; }
  .budget-app .nav-rail { flex: 1 1 500px; flex-direction: row; flex-wrap: wrap; width: auto; }
  .budget-app .rail-btn { flex: 1 1 115px; width: auto; justify-content: center; }
  .budget-app .sidebar-bottom { margin: 0; width: auto; }
  .budget-app .layout-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .budget-app .summary-grid, .budget-app #summaryCards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .budget-app .feature-grid, .budget-app .checklist-grid, .budget-app .chart-grid, .budget-app .documents-layout { grid-template-columns: minmax(0, 1fr); }
  .budget-app .workspace { padding: 20px 16px; }
  .budget-app .header { padding: 16px; }
}
@media (max-width: 520px) {
  .budget-app :is(.panel, .setup-view, .summary-container, .question-container, .workspace-header) { padding: 20px 16px; }
  .budget-app .inline-form, .budget-app .inline-form-4, .budget-app .goal-form, .budget-app .summary-grid, .budget-app #summaryCards { grid-template-columns: minmax(0, 1fr) !important; }
  .budget-app.page-goals > .container, .budget-app.page-bank > .container { padding: 24px 12px 40px; }
  .budget-app .goal-stats { align-items: flex-start; flex-direction: column; }
  .budget-app .profile { width: 100%; }
  .budget-app .app-sidebar { display: grid; grid-template-columns: 1fr auto; }
  .budget-app .sidebar-bottom { grid-column: 2; grid-row: 1; }
  .budget-app .nav-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .budget-app .nav-rail .rail-btn { flex-direction: column; gap: 4px; padding: 9px 4px; font-size: 14px; }
  .budget-app .nav-rail .rail-btn i { font-size: 16px; }
  .budget-app .quiz-actions p { font-size: 14px; }
  .budget-app.page-auth .container { padding: 26px 20px; }
  .page-home .home-nav { padding: 20px !important; }
  .page-home #features, .page-home .home-cta { padding: 56px 20px !important; }
  .page-home .home-feature-grid > div { padding: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .budget-app *, .page-home * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  .budget-app { background: #fff; color: #111; }
  .budget-app .panel { break-inside: avoid; background: #fff; color: #111; }
}