/* Page layout for the web app. Components and their look come from the design
   system (bundle.css); this file only arranges them on full pages, using the
   design system's tokens. No inline styles anywhere: the CSP forbids them. */

/* The design system swaps the logo mark on [data-theme="dark"]; follow the OS
   theme too when no data-theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mf-logo__mark--light { display: none; }
  :root:not([data-theme="light"]) .mf-logo__mark--dark { display: block; }
}

body.mf-app { min-height: 100vh; }

body.app-shell-page { padding: 0; }

/* The shell fills the window instead of sitting in a framed preview. */
.app-shell-page .mf-shell { min-height: 100vh; border: 0; border-radius: 0; }
.app-shell-page .mf-shell__content { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-6); max-width: 1120px; width: 100%; min-width: 0; }

.app-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.app-page-head h1 { margin: 0; }
.app-page-head p { margin: var(--space-1) 0 0; color: var(--ink-muted); }

.app-top-end { display: inline-flex; align-items: center; gap: var(--space-4); }
.app-firm-name { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.app-inline-form { display: inline; margin: 0; }

.app-empty {
  display: grid; justify-items: start; gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.app-empty h2 { margin: 0; font: 600 24px/30px var(--font-display); }
.app-empty p { margin: 0; max-width: 60ch; color: var(--ink-muted); }

.app-form { display: grid; gap: var(--space-4); max-width: 420px; }
.app-form .mf-field { max-width: none; }
.app-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

/* Sign-in and sign-up: one centered card. */
.app-auth { display: grid; place-items: center; min-height: calc(100vh - 2 * var(--space-4)); }
.app-auth__card {
  display: grid; gap: var(--space-6); width: 100%; max-width: 440px;
  padding: var(--space-8);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.app-auth__card h1 { margin: 0; font: 600 32px/38px var(--font-display); text-wrap: balance; }
.app-auth__intro { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.app-auth__card .app-form { max-width: none; }
.app-auth__card .mf-btn--primary { width: 100%; }
.app-auth__switch { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.app-auth__switch a { color: var(--brand); font-weight: 600; }
.app-auth__switch a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Below 640px the design system stacks the sidebar above the content; give
   the extra height of a full-window shell to the content, not the nav row. */
@media (max-width: 640px) {
  .app-shell-page .mf-shell { grid-template-rows: auto 1fr; }
  .app-shell-page .mf-shell__top { padding-inline: var(--space-4); }
  .app-shell-page .mf-shell__content { padding: var(--space-4); }
  .app-top-end .mf-btn { white-space: nowrap; }
  .app-user-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

@media (max-width: 480px) {
  .app-auth__card { padding: var(--space-6); }
}

/* Client pages: cards that group a task, the upload and its result. */
.app-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.app-card h2 { margin: 0; font: 600 24px/30px var(--font-display); }
.app-card p { margin: 0; max-width: 70ch; color: var(--ink-muted); }
.app-card__head { display: grid; gap: var(--space-2); }
.app-card__head--row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.app-card .mf-table-wrap { margin-top: var(--space-1); }
.app-muted { color: var(--ink-muted); }

.app-crumb { margin: 0 0 var(--space-1); font: 600 13px/20px var(--font-sans); }
.app-crumb a { color: var(--brand); text-decoration: none; }
.app-crumb a:hover { text-decoration: underline; }
.app-crumb a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.app-row-link { color: inherit; text-decoration: none; }
.app-row-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.app-row-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

.app-import { display: grid; gap: var(--space-3); }
.app-import__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* The file input stays focusable for keyboards; its zone shows the focus. */
.app-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mf-drop { position: relative; }
.mf-drop:has(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* With JavaScript the form submits on file choice or drop; the button is the
   no-JavaScript path. */
.js .app-drop-submit { display: none; }
.app-import__progress { display: none; margin: 0; color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.app-import.htmx-request .app-import__progress { display: block; }
.app-import.htmx-request .mf-drop { opacity: 0.6; }
.app-import-result { display: grid; gap: var(--space-3); }
.app-import-result:empty { display: none; }

.app-notice-list { margin: var(--space-2) 0 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.app-notice-list li { font: 400 14px/20px var(--font-sans); }

/* Three short columns fit any screen; the design system's 640px table minimum
   is for wide lists. */
.app-months .mf-table { min-width: 0; }
@media (max-width: 480px) {
  .app-card { padding: var(--space-4); }
  .app-months .mf-table th, .app-months .mf-table td { padding-inline: var(--space-3); }
}

/* Reports */
.app-report-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); margin-bottom: var(--space-6); }
.app-report-form .mf-field { min-width: 220px; }
.app-report-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.app-report-actions p { margin: 0; }
.app-pdf-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; }
.app-pdf-status > .mf-notice { flex: 1; }
.app-pdf-status__progress { color: var(--ink-muted); }
.app-report-preview { margin-top: var(--space-6); }
/* The report is paper: a fixed light frame whatever the app's theme. */
.app-report-frame { display: block; width: 100%; height: 2200px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #F7F8F6; }
@media (max-width: 640px) { .app-report-frame { height: 2900px; } }

/* Brand color input: the native picker beside the hex field it fills. */
.app-color-input { display: flex; align-items: stretch; gap: var(--space-2); }
.app-color-input .mf-input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.app-color-input__picker {
  flex: none; width: 48px; min-height: 42px; padding: 3px;
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer;
}
.app-color-input__picker:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.app-color-input__picker:disabled { cursor: not-allowed; opacity: 0.5; }

/* Settings: the form beside a live preview of the report header. */
.app-settings__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.app-fieldset { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.app-fieldset__fields { display: grid; }
.app-brand-preview { display: grid; gap: var(--space-2); min-width: 0; }
.app-brand-preview .mf-field__label { margin: 0; }
/* Without the script the preview shows identity's neutral default. */
.app-brand-preview .mf-report-sheet { --firm-color: #334155; --on-firm-color: #FFFFFF; border: 1px solid var(--line); }
.app-brand-preview .mf-report-header__title { font-size: 24px; line-height: 30px; }
@media (max-width: 860px) {
  .app-settings__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Contacts, schedule and sending. Choices use the design system Checkbox. */
.app-contacts .mf-table, .app-sends .mf-table, .app-waiting .mf-table { min-width: 0; }
.app-contacts__action { text-align: right; width: 1%; white-space: nowrap; }
.app-contact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; gap: var(--space-4); }
.app-contact-form .mf-field { max-width: none; }
.app-contact-form .mf-btn { align-self: end; justify-self: start; margin-bottom: 1px; }
.app-schedule-form, .app-send-form { max-width: 560px; }
.app-schedule-form .mf-field { max-width: 240px; }
.app-subhead { margin: var(--space-2) 0 0; font: 600 18px/26px var(--font-sans); }
.app-recipients { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.app-recipients li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.app-recipients__name { font-weight: 500; }
.app-recipients__detail { flex-basis: 100%; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }

/* Messages: the thread list and the MessageThread layout around the design
   system's mf-thread, mf-msg and mf-composer. */
.app-thread-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.app-thread-list__item + .app-thread-list__item { border-top: 1px solid var(--line); }
.app-thread-list__link { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-6); color: var(--ink); text-decoration: none; }
.app-thread-list__link:hover { background: var(--surface-sunken); }
.app-thread-list__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.app-thread-list__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.app-thread-list__client { font: 600 15px/24px var(--font-sans); }
.app-thread-list__time { margin-left: auto; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.app-thread-list__snippet { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.app-thread-list__snippet strong { color: var(--ink); font-weight: 600; }
.app-back-link { display: inline-block; margin-bottom: var(--space-1); font: 600 13px/20px var(--font-sans); color: var(--brand); }
.app-thread { max-width: 760px; }
.app-thread__messages { display: grid; gap: var(--space-4); }
.app-thread__empty { margin: 0; color: var(--ink-muted); }
.app-thread__earlier { justify-self: center; font: 600 13px/20px var(--font-sans); color: var(--brand); }
.app-thread .mf-msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.app-composer__field { max-width: none; }
.app-composer__error:empty { display: none; }
.app-composer__error { grid-column: 1 / -1; }
.app-portal-address { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); overflow-wrap: anywhere; }
.app-portal-address strong { color: var(--ink); font-weight: 600; }
@media (max-width: 480px) {
  .mf-msg { max-width: 90%; }
  .app-thread-list__link { padding: var(--space-4); }
  .mf-composer { grid-template-columns: 1fr; }
}

/* Document requests. The checklist itself is the design system's
   RequestChecklist (mf-request); these only lay out what sits inside it. */
.app-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.app-request-item { display: grid; gap: var(--space-1); min-width: 0; }
.app-request-item__reason { font: 400 13px/20px var(--font-sans); color: var(--warning); overflow-wrap: anywhere; }
.app-request-files { margin: var(--space-1) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font: 400 13px/20px var(--font-sans); overflow-wrap: anywhere; }
.app-request-files a { color: var(--brand); }
.app-request-files__bad { text-decoration: line-through; color: var(--ink-muted); }
.app-request-changes { margin-top: var(--space-1); }
.app-request-changes summary { list-style: none; cursor: pointer; width: fit-content; }
.app-request-changes summary::-webkit-details-marker { display: none; }
.app-request-changes .app-form { margin-top: var(--space-2); }
.app-template-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.app-template-list__title { font-weight: 600; }
.app-template-list__desc { display: block; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.mf-checks__hint a { color: var(--brand); font-weight: 600; }
.mf-checks__hint a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.app-template-row { margin: 0; padding: 0 0 var(--space-4); border: 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--space-2); }

/* Monthly summary (the design system's CommentaryEditor). */
.app-commentary { margin-bottom: var(--space-6); }
.app-commentary__form { display: grid; gap: var(--space-2); min-width: 0; }
.app-commentary__form .mf-field__label { margin-top: var(--space-2); }
.app-commentary__form .mf-field__hint { margin: 0; }
.app-commentary__summary, .app-commentary__highlights { display: block; width: 100%; resize: vertical; }
.app-commentary__summary { min-height: 200px; }
.app-commentary__highlights { min-height: 88px; font: 400 15px/24px var(--font-sans); }
.app-commentary__form .mf-commentary__foot { margin-top: var(--space-2); }
.app-commentary__progress { margin: 0; color: var(--ink-muted); }
.app-commentary__approved { max-width: 65ch; }
.app-commentary__approved p { margin: 0 0 var(--space-3); }
.app-commentary__approved ul { margin: 0; padding-left: var(--space-6); }
.app-commentary > p { margin: 0; }

/* Advisory. Alerts are the design system's AlertItem (mf-alert), budget vs
   actual its BudgetVsActual on StatementTable, the forecast its CashForecast
   (mf-chart); these only lay out what surrounds them. */
.app-alert-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.app-alert-actions form { margin: 0; }
.app-link-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.app-link-list a { color: var(--brand); font-weight: 600; }
.app-link-list a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.app-bva { min-width: 560px; }
.app-bva th:not(:first-child), .app-bva td { width: 7.5rem; }
.app-forecast-chart { margin: 0 0 var(--space-4); }
.app-forecast-range { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.app-forecast-key-range { display: inline-block; width: 2px; height: 12px; background: var(--ink); }
.app-details { margin: 0 0 var(--space-4); max-width: 70ch; }
.app-details summary { cursor: pointer; color: var(--brand); font-weight: 600; width: fit-content; }
.app-details summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.app-details p { margin: var(--space-2) 0 0; color: var(--ink-muted); }
.app-advisory-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.app-advisory-forms h3 { margin: 0 0 var(--space-2); font: 600 16px/24px var(--font-sans); }
.app-known-list { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.app-known-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); overflow-wrap: anywhere; }
.app-known-list form { margin: 0; }

/* Budget editor: a spreadsheet of months across, accounts down; the account
   column stays put while the months scroll on narrow screens. */
.app-budget-wrap { overflow-x: auto; }
.app-year-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.app-year-switch__item { padding: var(--space-1) var(--space-3); font: 500 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.app-year-switch__item + .app-year-switch__item { border-left: 1px solid var(--line); }
.app-year-switch__item:hover { background: var(--surface-sunken); }
.app-year-switch__item[aria-current] { background: var(--brand); color: var(--on-brand); }
.app-budget { min-width: 1180px; }
.app-budget th, .app-budget td { padding: var(--space-1) var(--space-1); vertical-align: middle; }
.app-budget thead th { position: sticky; top: 0; background: var(--surface-raised); }
.app-budget__account { position: sticky; left: 0; z-index: 1; min-width: 12rem; background: var(--surface-raised); font-weight: 400; text-align: left; }
.app-budget__depth-1 { padding-left: var(--space-6); }
.app-budget__depth-2 { padding-left: var(--space-8); }
.app-budget__section th { padding-top: var(--space-4); font: 600 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); text-align: left; }
.app-budget__cell { width: 6rem; padding: var(--space-1) var(--space-2); text-align: right; font-variant-numeric: tabular-nums; }
.app-budget__cell--error { border-color: var(--negative); box-shadow: 0 0 0 1px var(--negative); }
.app-budget__total { font-weight: 600; white-space: nowrap; }