/* SAWMBooks v0.3.13 white-first design system.
   UI-only. No financial arithmetic, permissions, auth or data requests.
   Source: reviewed existing v0.3.12 application and user-provided design references.
   Support browser system fonts; no third-party fonts/scripts or network assets. */
:root {
  color-scheme: light;
  --canvas:#fff; --surface:#fff; --surface-soft:#faf9f6; --surface-neutral:#f5f6f5;
  --text-strong:#18252f; --text-muted:#596571; --brand-navy:#17324d;
  --brand-orange:#f36b21; --orange-hover:#ce5315; --orange-soft:#fff1e7;
  --finance-green:#16734e; --finance-teal:#07817c; --finance-red:#b42318;
  --finance-plum:#714eaa; --stroke:#e2e6e8; --focus-color:#bd5012;
  --ink:var(--text-strong); --muted:var(--text-muted); --accent:var(--brand-navy);
  --accent-dark:#10283e; --nav:var(--surface-soft); --line:var(--stroke);
  --soft:var(--surface-neutral); --shadow:0 1px 2px rgba(18,30,38,.035);
  --workspace-text:var(--text-strong); --workspace-muted:var(--text-muted);
  --workspace-blue:var(--brand-navy); --workspace-blue-soft:#f4f5f4;
  --workspace-teal:var(--finance-green); --workspace-panel:#fff;
  --workspace-bg:#fff; --workspace-border:var(--stroke); --workspace-radius:12px;
  font-family:'Segoe UI Variable', 'Segoe UI', Arial, sans-serif;
  font-size:14px; background:#fff; color:var(--text-strong);
}
html,body,.app-layout,.app-main,.main-content { background:#fff; }
::selection { background:#ffe1cc; color:#402211; }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:3px solid var(--focus-color) !important; outline-offset:3px;
}
h1,h2,h3 { color:var(--text-strong); letter-spacing:-.035em; }
h1 { font-size:clamp(27px,2.3vw,34px); line-height:1.17; font-weight:750; }
h2 { font-size:18px; font-weight:710; }
small, .help-text, .loading-quiet, .analysis-caption { color:var(--text-muted); }
/* Navigation and top app shell: warm-white sidebar, white content canvas. */
.app-sidebar { width:250px; background:#faf9f6; color:var(--brand-navy); border-right:1px solid var(--stroke); padding:18px 10px 14px; }
.brand { padding:7px 12px 17px; min-height:65px; }
.brand-mark { width:40px; height:40px; flex-basis:40px; border-radius:11px;
  background:#17324d; color:#fff; box-shadow:none; }
.brand-dot { color:#ff9a61; }
.brand-copy strong { color:#142e43; font-size:19px; }
.brand-copy small { color:#6e7a83; font-weight:500; letter-spacing:0; font-size:10px; }
.sidebar-collapse { min-height:35px; background:#fff; color:#65716f; border:1px solid #e2e6e3; border-radius:9px; margin:0 6px 14px; width:calc(100% - 12px); padding:7px 12px; }
.sidebar-collapse:hover { border-color:#c2cbc8; background:#fff; }
.nav-overline { color:#6b7676; font-size:10px; padding-left:16px; padding-top:5px; letter-spacing:1px; }
.nav-overline.inner { padding-top:19px; }
.app-nav { gap:2px; }
.nav-item { position:relative; color:#45545f; min-height:41px; border-radius:8px; padding:9px 12px; font-size:13px; gap:11px; }
.nav-item:hover:not(:disabled) { color:#17324d; background:#f0f0ed; transform:none; }
.nav-item.is-active { color:#17324d; background:#ededeb; font-weight:740; }
.nav-item.is-active::before { content:''; position:absolute; width:3px; background:#f36b21; top:7px; bottom:7px; left:0; border-radius:5px; }
.nav-item .nav-icon { color:#5c6b73; }
.nav-item.is-active .nav-icon { color:#f36b21; }
.nav-count { color:#a64a11; background:#fff0e5; font-weight:700; }
.future-label { color:#65716f; }
.sidebar-bottom { border-top-color:var(--stroke); padding:14px 8px 0; }
.sidebar-avatar { background:#fff0e5; border:1px solid #f8d4ba; color:#a95421; }
.sidebar-bottom strong { color:#263a49; }
.sidebar-bottom small { color:#66747b; }
.topbar { background:#fff; backdrop-filter:none; height:65px; padding:0 clamp(15px,2.1vw,34px); gap:14px; border-bottom:1px solid var(--stroke); }
.topbar-left { min-width:130px; }
.breadcrumb { color:#73808a; font-size:12px; }
.breadcrumb-current { color:#243849; font-size:12px; }
.workspace-search { height:39px; max-width:510px; border:1px solid #e5e9e9; background:#f3f5f5; border-radius:9px; color:#6c797e; }
.workspace-search:hover { background:#fff; border-color:#b9c3c3; box-shadow:none; }
.workspace-search kbd { border-color:#dadfdd; background:#fff; color:#616c70; }
.environment { color:#6d756e; background:#f4f5f2; border-color:#e1e5df; font-size:9px; font-weight:750; }
.topbar label { color:#68747a; }
.topbar select { border-color:#d7dedf; color:#273d4f; background:#fff; border-radius:9px; font-weight:650; }
.text-button { color:#556672; }
.text-button:hover { color:#ce5315; }
.main-content { max-width:1750px; padding:27px clamp(18px,2.2vw,38px) 60px; }
.page-heading { margin-bottom:20px; gap:18px; }
.page-heading h1 { color:#172b3d; }
.eyebrow { color:#ab581f; font-size:10px; letter-spacing:1.05px; margin-bottom:8px; }
.subheading { color:#67757d; margin-top:8px; font-size:13.5px; line-height:1.5; }
/* Universal components: solid color, slim borders, strong readability. */
.surface, .metric { border-radius:12px; border:1px solid var(--stroke); box-shadow:none; background:#fff; }
.panel-head { padding:19px 21px 13px; gap:12px; }
.panel-head p { color:#65757c; }
.metrics { gap:13px; margin-bottom:18px; }
.metric { min-height:139px; padding:19px 18px 16px; }
.metric-link:hover { transform:none; border-color:#c5cccb; box-shadow:0 3px 10px rgba(30,45,48,.06); }
.metric p { color:#55646b; font-size:12.5px; margin-bottom:17px; font-weight:650; }
.metric strong { color:#1a2f42; font-size:clamp(24px,2.15vw,31px); font-weight:760; }
.metric small { color:#66747d; margin-top:10px; font-size:11px; }
.metric-icon { color:#17324d; }
.metric:nth-child(2) .metric-icon { color:#f36b21; }
.metric:nth-child(3) .metric-icon { color:#16734e; }
.metric:nth-child(4) .metric-icon { color:#714eaa; }
button.primary, button[type='submit'], form button:not(.quiet) { background:#f36b21; color:#fff; border:1px solid #f36b21; box-shadow:none; }
button.primary:hover:not(:disabled),button[type='submit']:hover:not(:disabled),form button:not(.quiet):hover:not(:disabled) { background:#ce5315; border-color:#ce5315; box-shadow:none; transform:none; }
button.secondary,button.quiet,.secondary-file { color:#17324d; border-color:#cbd4d5; background:#fff; border-radius:8px; }
button.secondary:hover:not(:disabled),button.quiet:hover:not(:disabled) { color:#17324d; border-color:#87989b; background:#faf9f6; }
.link-button, a, .row-open, .attention-action { color:#ad4c16; }
.link-button:hover, a:hover { color:#8b3b0e; }
input:not([type='checkbox']):not([type='radio']),select,textarea { border-color:#cbd4d5; border-radius:8px; color:#182b39; }
input:not([type='checkbox']):not([type='radio']):focus,select:focus,textarea:focus { border-color:#c45a18; }
input::placeholder,textarea::placeholder { color:#7c8c92; }
label { color:#455863; }
.workspace-explain { background:#faf9f6; border:1px solid #eeeae4; color:#657077; border-radius:8px; font-size:11.5px; margin-bottom:17px; padding:10px 13px; }
.explain-icon { color:#a45720; }
.status-pill { font-weight:680; }
/* Home experience: a real navigation control, not a decorative promo. */
.advisor-spotlight { display:grid; grid-template-columns:82px minmax(0,1fr) auto; align-items:center; gap:18px;
  margin-bottom:20px; padding:17px 20px; border:1px solid #f3d6c2; border-radius:13px;
  background:linear-gradient(110deg,#fff5ed 0%,#fffdfa 60%,#fff7ef 100%); }
.advisor-spotlight-portrait { height:78px; width:78px; border-radius:50%; overflow:hidden; border:3px solid #fff; box-shadow:0 0 0 2px #ffb37c; background:#fff; }
.advisor-spotlight-portrait img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 34%; }
.advisor-spotlight-copy { min-width:0; }
.advisor-spotlight-kicker { display:block; margin-bottom:5px; color:#b64c0d; font-size:10px; letter-spacing:.85px; font-weight:800; }
.advisor-spotlight h2 { font-size:clamp(18px,1.7vw,23px); line-height:1.18; color:#1b3044; font-weight:760; }
.advisor-spotlight p { margin-top:8px; font-size:12.5px; line-height:1.46; color:#596a72; max-width:660px; }
.advisor-spotlight-action { min-height:43px; white-space:nowrap; border:0; padding:11px 16px; border-radius:8px;
  background:#f36b21; color:#fff; font-weight:750; box-shadow:none; }
.advisor-spotlight-action:hover { background:#ce5315; }
.advisor-spotlight-action span { margin-left:7px; }
.dashboard-section-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin:0 1px 13px; }
.dashboard-section-heading h2 { font-size:18px; }
.dashboard-section-heading span { font-size:12px; color:#64727a; }
/* Real, sourced spending data uses colour-contrasted bars. Never assume bank cash flow/profit. */
.dashboard-intelligence { margin-bottom:18px; }
.analysis-grid, .dashboard-split { gap:17px; }
.analysis-grid { grid-template-columns:minmax(0,1.2fr) minmax(280px,.9fr); }
.dashboard-split { grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr); margin-bottom:18px; }
.dashboard-intelligence .analysis-bars,.dashboard-intelligence .dashboard-advisor { min-height:145px; }
.analysis-row { padding:7px 0; gap:8px; }
.analysis-row-name { color:#263e4e; font-size:12.5px; }
.analysis-row-amount { color:#182b3a; font-size:13px; font-variant-numeric:tabular-nums; }
.analysis-track { background:#f1f1ed; height:10px; border-radius:3px; }
.analysis-fill { background:#f36b21; border-radius:3px; }
.analysis-row:nth-child(2n) .analysis-fill { background:#17324d; }
.analysis-row:nth-child(3n) .analysis-fill { background:#07817c; }
.analysis-row:nth-child(4n) .analysis-fill { background:#714eaa; }
.attention-list { padding:0 20px 17px; }
.attention-row { padding:13px 0; border-top:1px solid #edf0ef; }
.attention-copy strong { color:#243a46; }
.attention-copy small { color:#607078; }
.attention-icon { background:#fff1e7; color:#ba5418; border-radius:9px; }
.quick-action { padding:12px 5px; }
.quick-action:hover strong { color:#ce5315; }
.action-symbol { background:#fff1e7; color:#b54e12; border-radius:9px; }
.dashboard-advisor { gap:0; padding:0 19px 14px; }
.dashboard-advisor-item { border:none; border-bottom:1px solid #edf0ef; border-radius:0; padding:11px 3px; }
.dashboard-advisor-item:hover { background:#faf9f6; border-color:#ddd; }
.dashboard-advisor-item span { color:#5b6b72; }
/* Compact tables and transaction registers. */
.data-table { border-collapse:collapse; }
.data-table th { background:#f6f7f5; color:#3b4e5a; border-color:#dfe4e3; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.data-table td { font-size:12.5px; line-height:1.5; color:#263946; border-color:#e8ebea; }
.data-table tr:hover td { background:#fff8f2; }
.data-table .numeric, .analysis-row-amount { font-variant-numeric:tabular-nums; }
.table-scroll { border-color:#e5e9e7; }
.search-control { border-radius:8px; }
/* Inbox and email bills: flat document manager, clear status and permissioned actions. */
#view-inbox .inbox-grid { gap:16px; }
#view-inbox .document-toolbar input { background:#fff; }
#view-inbox .doc-item { border-bottom:1px solid #e6eae9; border-radius:0; }
#view-inbox .doc-item:hover { background:#fff9f4; }
#view-inbox .document-file-icon { background:#fff1e7; color:#b14d12; }
#view-inbox .document-file-info strong { color:#263844; }
#view-inbox .document-file-info small { color:#64737b; }
#view-inbox .document-state { color:#5e6870; background:#f2f3f1; }
#view-inbox .document-state.state-clean { color:#11613e; background:#eaf5ed; }
#view-inbox .document-state.state-quarantined { color:#94531a; background:#fff2e3; }
#view-inbox .doc-item .document-row-actions button { color:#17324d; }
#view-inbox .doc-item .document-row-actions button:hover { background:#fff0e4; }
#view-inbox .document-empty { padding:34px 16px; }
/* Advisor and invoice review: neutral surfaces and strong, readable evidence links. */
#view-advisor .advisor-ask-panel { border-color:#dde3e1; box-shadow:none; }
#view-advisor .advisor-data-banner { background:#faf9f6; color:#485a64; border:1px solid #ecece7; }
#view-advisor .advisor-suggestions button { background:#fff; color:#344957; border-color:#d5dddc; }
#view-advisor .advisor-suggestions button:hover { color:#a84b17; border-color:#f3c8ac; background:#fff8f3; }
#view-advisor .advisor-welcome { border-left-color:#f36b21; background:#fff9f5; color:#53646b; }
#view-advisor .advisor-intro-icon { background:#fff1e7; color:#bd5315; }
#view-advisor .advisor-aside { border-color:#e0e5e3; box-shadow:none; }
#view-advisor .advisor-aside .metric strong { color:#17324d; }
#view-advisor .advisor-aside .metric:hover { background:#faf9f6; }
#view-advisor .advisor-answer-card { background:#fff; border-color:#dde3e1; }
#view-advisor .advisor-answer-text { color:#273946; }
#view-advisor .advisor-user-query { color:#b44c14; }
#view-advisor .advisor-source-link { border-color:#d5ddda; color:#174f66; }
#view-advisor .advisor-source-link:hover { background:#fff8f3; border-color:#eba876; }
.invoice-kpi,.document-detail,.bank-account-card,.bank-transaction-card { border-radius:9px; }
/* Banking controls must not visually imply live Plaid rather than sandbox. */
.bank-import, .plaid-box, .bank-account-card,.bank-transaction-card { border-color:#e2e6e5; }
.bank-account-card { box-shadow:none; }
.bank-layout .surface { box-shadow:none; }
.bank-context { color:#54636b; }
/* Login receives the same visual identity. */
.auth-layout { background:#faf9f6; }
.auth-layout .card { border-color:#e2e6e4; box-shadow:0 10px 32px rgba(24,38,48,.05); border-radius:13px; }
.auth-layout h1 { color:#17324d; }
.auth-layout p:not(.eyebrow) { color:#596a71; }
.auth-layout label { color:#354b57; }
/* Command palette matches white-first shell; keyboard shortcuts remain functional. */
.workspace-command { border:1px solid #dce3e0; color:#1e3544; border-radius:12px; box-shadow:0 20px 70px rgba(13,25,30,.20); }
.workspace-command::backdrop { background:rgba(15,29,34,.35); }
.command-input-wrap { color:#536c75; border-bottom-color:#e6e9e8; }
.command-close { color:#4d606c; border-color:#dfe5e3; background:#fff; }
.command-caption { color:#5c6b74; }
.command-result { color:#273f4c; border-radius:8px; }
.command-result:hover,.command-result.is-selected { background:#fff1e7; }
.command-icon { color:#a84d19; background:#fffaf5; border-color:#f3ded0; border-radius:9px; }
/* Permission statuses use semantics, not brand colors. */
.status-pill[data-status='posted'] { background:#eaf5ef; color:#166243; }
.status-pill[data-status='draft'] { background:#f2f3f2; color:#4e5a60; }
.status-pill[data-status='reviewed'] { background:#fff1df; color:#96531b; }
#notice:not(:empty) { top:78px; box-shadow:0 7px 25px #1e353b22; }
.app-footer { color:#74818a; }
/* Progressive responsive layout while preserving original auth/mobile drawer behavior. */
@media(max-width:1200px){
 .topbar { gap:9px; padding:0 16px; }
 .workspace-search { max-width:360px; }
 .environment { max-width:120px; }
 .advisor-spotlight { grid-template-columns:68px minmax(0,1fr) auto; gap:13px; }
 .advisor-spotlight-portrait { height:64px; width:64px; }
}
@media(max-width:1000px){
 .analysis-grid,.dashboard-split { grid-template-columns:1fr; }
 .advisor-spotlight { grid-template-columns:72px minmax(0,1fr); }
 .advisor-spotlight-action { grid-column:2; justify-self:start; }
 .main-content { padding:22px 20px 55px; }
}
@media(max-width:700px){
 .app-sidebar { box-shadow:12px 0 40px rgba(14,26,35,.15); }
 .main-content { padding:17px 14px 42px; }
 .topbar { height:60px; }
 .page-heading { align-items:flex-start; }
 .advisor-spotlight { padding:15px; gap:12px; }
 .advisor-spotlight h2 { font-size:18px; }
 .advisor-spotlight p { font-size:12px; }
 .dashboard-section-heading { align-items:flex-start; flex-direction:column; gap:4px; }
 .metric { min-height:122px; padding:15px 14px; }
 .metric p { margin-bottom:11px; }
}
@media(max-width:420px){
 .advisor-spotlight { grid-template-columns:56px 1fr; }
 .advisor-spotlight-portrait { width:54px; height:54px; }
 .advisor-spotlight-action { grid-column:1 / -1; width:100%; justify-self:stretch; }
 .advisor-spotlight h2 { font-size:17px; }
 .advisor-spotlight-kicker { font-size:9px; }
 .topbar-right { gap:6px; }
 .metrics { gap:10px; }
}
@media(prefers-reduced-motion:reduce){
 .app-layout *, .app-layout *::before,.app-layout *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Empty states should not consume the large placeholder blocks of the older prototype. */
#view-dashboard .dashboard-intelligence .surface:has(.analysis-empty) .analysis-bars,
#view-dashboard .dashboard-intelligence .surface:has(.analysis-empty) .dashboard-advisor {
  min-height:110px;
}
#view-dashboard .dashboard-split .surface:has(.attention-row:only-child) .attention-list { padding-bottom:14px; }
#view-dashboard .analysis-empty { padding:21px 14px; margin:0; color:#586970; font-size:12.5px; }
#view-dashboard .dashboard-intelligence .surface,
#view-dashboard .dashboard-split .surface { align-self:start; }