@layer components {
  /* Finance > Reports (Stage 4 journal reports): the shared shell every
     report renders — selector pills, the filter card, the heading with its
     export action, notices, figure strips, and the statement table. Report
     bodies add their own rows here as each screen ships. Nothing may scroll
     the page sideways at 420px: every grid child can shrink (min-width: 0)
     and long names wrap anywhere. */
  .app-content:has(.ws-tabs--reports) { max-width: 1120px; /* report reading width, same as Trust */ }

  .ws-report-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); }
  .ws-report-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px; /* selector pill height */
    padding: 0 var(--spacing-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
  }
  .ws-report-nav a:hover { background: var(--hover-wash); }
  .ws-report-nav a[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--text-on-dark); font-weight: 600; }
  .ws-report-nav a:focus-visible,
  .ws-report-errors a:focus-visible,
  .ws-report-head a:focus-visible,
  .ws-report-filters button:focus-visible,
  .ws-report-filters select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .ws-report-errors { display: grid; gap: var(--spacing-xxs); }
  .ws-report-errors:focus-visible { outline: 2px solid var(--semantic-danger); outline-offset: 2px; }
  .ws-report-errors ul { margin: 0; padding-left: var(--spacing-md); }
  .ws-report-errors a { color: inherit; }

  .ws-report-filters {
    display: grid;
    grid-template-columns: var(--report-filter-cols, minmax(0, 1fr) auto);
    gap: var(--spacing-sm);
    align-items: start;
    padding: var(--spacing-sm);
  }
  .ws-report-filters--point { --report-filter-cols: minmax(0, 240px) auto; /* one date field */ }
  .ws-report-filters--range { --report-filter-cols: minmax(0, 220px) minmax(0, 220px) auto; /* two date fields */ }
  .ws-report-filters--ledger { --report-filter-cols: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ws-report-filters .ws-field { margin: 0; min-width: 0; }
  .ws-report-filters .ws-select { min-width: 0; }
  .ws-report-hint { font-size: var(--text-xs); color: var(--text-secondary); }
  .ws-input--invalid { border-color: var(--semantic-danger); }
  .ws-report-apply { padding-top: 22px; /* label line + gap, so Apply lines up with the inputs */ }
  .ws-report-apply .btn-sm { min-height: 42px; /* matches the 42px control height */ }

  .ws-report-head {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: flex-start;
    margin: var(--spacing-lg) 0 var(--spacing-sm);
  }
  .ws-report-head-text { flex: 1 1 300px; /* the export column wraps below this width */ min-width: 0; --title-size: var(--text-xl); }
  .ws-report-head-text .app-title { margin-top: var(--spacing-xxs); }
  .ws-report-dates { font-size: var(--text-md); margin-top: var(--spacing-xxs); }
  .ws-report-note { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--spacing-xxs); max-width: 64ch; }
  .ws-report-export { display: flex; flex-direction: column; gap: var(--spacing-xxs); align-items: flex-start; }
  .ws-report-export .ws-report-note { margin: 0; }
  .ws-report-export-disabled { opacity: 0.55; cursor: not-allowed; }

  .ws-report-notices { display: grid; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); }
  .ws-report-notice { display: flex; gap: var(--spacing-xs); margin: 0; font-size: var(--text-sm); }
  .ws-report-notice strong { flex: none; }
  .ws-report-notice span { color: var(--text-primary); }

  .ws-report-empty p { color: var(--text-secondary); max-width: 48ch; }

  /* Totals and equation strips; .ws-trust-figure supplies the tiles. */
  .ws-report-figures { display: grid; grid-template-columns: repeat(var(--figure-cols, 3), minmax(0, 1fr)); gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); }
  .ws-report-figures--4 { --figure-cols: 4; }

  /* Statement tables: real <table> markup inside an .app-panel. Money
     columns take a fixed width so amounts align down the page; the name
     column absorbs the rest and wraps. */
  .ws-report-table { min-width: 0; }
  .ws-report-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
  .ws-report-table th,
  .ws-report-table td { padding: var(--spacing-xs) var(--spacing-sm); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; overflow-wrap: anywhere; font-weight: 400; }
  .ws-report-table thead th { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); border-bottom-color: var(--border-default); }
  .ws-report-table .ws-money { width: var(--report-money-col, 180px); /* statement money column */ white-space: nowrap; overflow-wrap: normal; text-align: right; }
  .ws-report-table thead th.ws-money { white-space: normal; /* the date-range header wraps; amounts never do */ }
  .ws-report-table .ws-report-indent { padding-inline-start: calc(var(--spacing-sm) + var(--depth, 0) * 20px); /* one hierarchy level */ }
  .ws-report-table th a { color: var(--text-primary); text-decoration-color: var(--text-tertiary); text-underline-offset: 2px; /* thin drill-down underline */ }
  .ws-report-table th a:hover { color: var(--accent); text-decoration-color: currentColor; }
  .ws-report-row--section th { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding-top: var(--spacing-sm); }
  .ws-report-row--group th { font-weight: 600; }
  .ws-report-row--subtotal th,
  .ws-report-row--subtotal td { color: var(--text-secondary); font-weight: 600; }
  .ws-report-row--total th,
  .ws-report-row--total td { background: var(--surface-cream-dark); font-weight: 600; }
  .ws-report-row--grand th,
  .ws-report-row--grand td { font-size: var(--text-md); font-weight: 600; border-top: 1px solid var(--border-default); }
  /* Collapsed borders let a solid rule beat a dashed one, so the row above
     a derived row dashes its bottom edge as well. */
  .ws-report-row--derived th,
  .ws-report-row--derived td,
  tr:has(+ .ws-report-row--derived) th,
  tr:has(+ .ws-report-row--derived) td { border-bottom-style: dashed; border-bottom-color: var(--semantic-warning); }
  .ws-report-row--derived th,
  .ws-report-row--derived td { background: var(--semantic-warning-wash); }
  .ws-report-row--derived th a { font-weight: 600; }
  .ws-report-row--derived .pill { margin-left: var(--spacing-xxs); vertical-align: middle; }
  .ws-report-row--note td { color: var(--text-secondary); font-size: var(--text-xs); }

  /* Captions name each table for assistive technology; the heading above
     already shows the same report and dates. */
  .ws-report-table { position: relative; }
  .ws-report-table caption { position: absolute; width: 1px; height: 1px; /* visually hidden */ overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ws-report-table a:focus-visible,
  .ws-report-pages a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* General ledger: the account card's full-range figures, then one table
     of dated lines between an opening (or brought-forward) row and an
     ending (or carried-forward) row. */
  .ws-gl-card { padding: var(--spacing-md); margin-bottom: var(--spacing-sm); }
  .ws-gl-card-head { display: flex; justify-content: space-between; gap: var(--spacing-sm); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--spacing-sm); }
  .ws-gl-card-head .app-title { min-width: 0; overflow-wrap: anywhere; }
  .ws-gl-card-tags { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; align-items: center; }
  .ws-gl-card .ws-report-note { margin-top: var(--spacing-xs); max-width: none; }
  .ws-gl-card .ws-report-figures { margin-bottom: 0; }
  .ws-report-figures .ws-trust-figure { min-width: 0; --label-color: var(--text-secondary); }
  .ws-report-figures .ws-trust-figure-value { font-size: var(--text-lg); }
  .ws-report-figure--end,
  .ws-report-figure--plain { background: var(--surface-card); }
  .ws-report-figure--end { border-color: var(--border-default); }
  .ws-report-figure--difference { border-color: var(--border-default); }
  .ws-report-footnote { margin-top: var(--spacing-sm); }

  /* Trial balance: three columns at every width; the code sits inline with
     the name so long names wrap under it, and a parent's subtotal is a
     reference line across the row, never an amount in the money columns. */
  .ws-tb-table { --report-money-col: 160px; /* trial balance money column */ }
  .ws-report-row-note { display: block; font-size: var(--text-xs); color: var(--text-secondary); font-weight: 400; }
  .ws-report-row--group th { padding-bottom: var(--spacing-xxs); }
  .ws-report-row--account th .pill { margin-left: var(--spacing-xxs); vertical-align: middle; }
  .ws-tb-subtotal td { font-size: var(--text-xs); color: var(--text-secondary); font-weight: 400; }

  /* Statements: two columns; a parent's subtotal amount sits under a short
     rule, and a loss carries its sign, its word, and its pill. */
  .ws-statement-table .ws-report-row--subtotal td.ws-money { box-shadow: inset 0 1px 0 var(--border-default); /* subtotal rule above the amount */ }
  .ws-statement-table .ws-report-row--total th { font-weight: 600; }
  .ws-report-row--loss td.ws-money, .ws-report-loss { color: var(--semantic-danger); }
  .ws-report-row--note td { padding-block: var(--spacing-sm); }
  .ws-tb-subtotal strong { color: var(--text-primary); }

  /* Columns size to their content rather than to fixed widths: dates,
     entry numbers, and amounts never wrap, so they take exactly what they
     need at any width above the breakpoint, and the description column
     absorbs the rest. Cells share a tighter inner gutter for the same reason. */
  .ws-gl-table table { table-layout: auto; }
  .ws-gl-table th, .ws-gl-table td { padding-inline: var(--spacing-xs); }
  .ws-gl-table tr > :first-child { padding-inline-start: var(--spacing-sm); }
  .ws-gl-table tr > :last-child { padding-inline-end: var(--spacing-sm); }
  .ws-gl-table .ws-gl-date { color: var(--text-secondary); white-space: nowrap; }
  .ws-gl-table .ws-money { width: auto; }
  .ws-gl-entry a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .ws-gl-text, .ws-gl-ref, .ws-gl-sub { display: block; }
  .ws-gl-text { white-space: pre-line; }
  .ws-gl-ref { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--spacing-xxs); }
  .ws-gl-sub { font-size: var(--text-xs); color: var(--text-secondary); }
  .ws-gl-edge .ws-gl-balance { font-weight: 600; }
  .ws-gl-chip {
    display: inline-block;
    margin-top: var(--spacing-xxs);
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: var(--semantic-info-wash);
    color: var(--semantic-info);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
  }
  .ws-gl-date-long, .ws-gl-money-label, .ws-gl-blank { display: none; }
  .ws-gl-none { text-align: center; color: var(--text-secondary); padding: var(--spacing-md); }
  .ws-gl-footnote { margin-top: var(--spacing-sm); }

  .ws-report-pages { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-sm); }
  .ws-report-pages .ws-report-note { margin: 0; }
  .ws-report-page-links { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; align-items: center; }
  .ws-report-page-links .btn-sm,
  .ws-report-page { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* tap target */ }
  .ws-report-page {
    min-width: 44px; /* tap target */
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-decoration: none;
  }
  .ws-report-page[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--text-on-dark); font-weight: 600; }
  .ws-report-page-links [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
  .ws-report-page-gap { color: var(--text-secondary); }

  /* Statement of cash flows: a status banner, the cash-by-account table,
     the direct-method statement, the transfers table, and, when the
     classification is incomplete, the named exceptions. There is no
     balancing, approval, or review control anywhere on the screen. */
  .ws-cf-status { display: grid; gap: var(--spacing-xxs); padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-sm); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); font-size: var(--text-sm); }
  .ws-cf-status--incomplete { border-color: var(--semantic-warning); background: var(--semantic-warning-wash); }
  .ws-cf-status--incomplete strong { color: var(--semantic-warning); }
  .ws-cf-panel-head { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-subtle); }
  .ws-cf-panel-head .app-title { --title-size: var(--text-lg); }
  .ws-cf-panel-head .ws-report-note { max-width: none; }
  .ws-cf-accounts, .ws-cf-transfers, .ws-cf-exceptions { margin-bottom: var(--spacing-sm); }
  .ws-cf-accounts .ws-money { --report-money-col: 150px; /* cash by account money columns */ }
  .ws-cf-account-label { font-weight: 600; }
  .ws-cf-account th .pill { margin-left: var(--spacing-xxs); vertical-align: middle; }
  .ws-cf-money-label { display: none; }
  .ws-cf-hidden-head { position: absolute; width: 1px; height: 1px; /* visually hidden */ overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ws-cf-exceptions { border-color: var(--semantic-warning); }
  .ws-cf-exception-list { list-style: none; margin: 0; padding: 0; }
  .ws-cf-exception { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
  .ws-cf-exception:last-child { border-bottom: 0; }
  .ws-cf-exception-head { display: flex; gap: var(--spacing-xs); align-items: center; flex-wrap: wrap; }
  .ws-cf-exception-head strong { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .ws-cf-exception-amount { margin-left: auto; font-weight: 600; }
  .ws-cf-exception-note, .ws-cf-exception .ws-report-note { overflow-wrap: anywhere; }
  .ws-cf-exception-note { margin: var(--spacing-xxs) 0; }

  @media (max-width: 860px) {
    .ws-report-filters { --report-filter-cols: minmax(0, 1fr); }
    .ws-report-apply { padding-top: 0; }
    .ws-report-apply .btn-sm { width: 100%; min-height: 44px; /* tap target */ }
    .ws-report-figures { --figure-cols: 1; }
    .ws-report-figures--4 { --figure-cols: 2; }
    .ws-report-table { --report-money-col: 112px; /* statement money column at 420px */ }
    .ws-tb-table { --report-money-col: 92px; /* trial balance money column at 420px */ }

    /* Ledger lines become stacked cards: date and entry, the description,
       then a labelled Debit / Credit / Balance three-up. */
    .ws-gl-table table, .ws-gl-table tbody { display: block; }
    .ws-gl-table thead { display: none; }
    .ws-gl-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xxs) var(--spacing-xs); padding: var(--spacing-sm); border-bottom: 1px solid var(--border-subtle); }
    .ws-gl-table tr.ws-gl-edge { background: var(--surface-cream-dark); }
    /* :is() carries the column classes, so the desktop column widths yield. */
    .ws-gl-table :is(th, td, tr > :first-child, tr > :last-child) { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
    .ws-gl-line .ws-gl-date { grid-column: 1 / 3; }
    .ws-gl-line .ws-gl-entry { grid-column: 3; text-align: right; }
    .ws-gl-line .ws-gl-desc { grid-column: 1 / -1; }
    .ws-gl-line .ws-gl-line-money { margin-top: var(--spacing-xs); text-align: left; }
    .ws-gl-date-short { display: none; }
    .ws-gl-date-long, .ws-gl-blank { display: inline; }
    .ws-gl-money-label { display: block; }
    .ws-gl-edge td:not(.ws-gl-balance) { display: none; }
    .ws-gl-edge th { grid-column: 1 / 3; }
    .ws-gl-edge .ws-gl-balance { grid-column: 3; }
    .ws-gl-none-row td { grid-column: 1 / -1; padding: var(--spacing-xs) 0; }
    .ws-gl-desc, .ws-gl-ref, .ws-gl-card-head .app-title { overflow-wrap: anywhere; }

    /* Cash by account becomes stacked cards with a labelled three-up. */
    .ws-cf-accounts table, .ws-cf-accounts tbody, .ws-cf-accounts tfoot { display: block; }
    .ws-cf-accounts thead { display: none; }
    .ws-cf-accounts tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xxs) var(--spacing-xs); padding: var(--spacing-sm); border-bottom: 1px solid var(--border-subtle); }
    .ws-cf-accounts tr.ws-report-row--total { background: var(--surface-cream-dark); }
    .ws-cf-accounts :is(th, td, .ws-money) { display: block; width: auto; min-width: 0; padding: 0; border: 0; background: none; }
    .ws-cf-accounts th { grid-column: 1 / -1; }
    .ws-cf-accounts .ws-cf-money { text-align: left; margin-top: var(--spacing-xs); }
    .ws-cf-money-label { display: block; }
    .ws-cf-exception-amount { margin-left: 0; flex-basis: 100%; }
  }
}