/* Documents: the account statement list, its sheet, and the exports.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. The sheet itself is fasset-ds's
   .doc-overlay / .doc-sheet / .doc-*. */

.docs-section + .docs-section { margin-top: var(--space-40); }
.docs-section .section-head h2 { margin: 0; }
.docs-intro { font-size: var(--text-13); margin: calc(var(--space-4) * -1) 0 var(--space-12); }
.docs-label { margin-top: var(--space-12); font-size: var(--text-12); color: var(--text-faint); }

/* ————— one row per finished month —————
   The month's name is a button whose ::after covers the row, so the whole row
   opens the sheet; the download icon sits above that layer. */
.docs-month {
  position: relative;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
  column-gap: var(--space-16);
  padding-inline: 0;
}
.docs-open {
  justify-self: start;
  font: inherit; font-size: var(--text-14); color: var(--text-strong);
  text-align: left; padding: 0; background: none; border: 0; cursor: pointer;
}
.docs-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.docs-open:focus-visible { outline: none; }
.docs-month:has(.docs-open:focus-visible) { box-shadow: 0 0 0 1.5px var(--focus-ring); }
.docs-month-desc { font-size: var(--text-13); color: var(--text-subtle); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-month-act { position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-8); }
/* Always visible: a row that opens a sheet and saves a PDF says so on its right. */
.docs-dl { transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.docs-month:hover .docs-dl { color: var(--text-default); }
.docs-dl[aria-busy="true"] { cursor: progress; }
.docs-dl[aria-busy="true"] .icon { animation: docs-busy 900ms var(--ease) infinite alternate; }
@keyframes docs-busy { from { opacity: 1; } to { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .docs-dl[aria-busy="true"] .icon { animation: none; opacity: 0.5; } }
.docs-month-status { grid-column: 1 / -1; position: relative; z-index: 1; margin: 0 0 var(--space-12); }
.docs-none { padding: var(--space-12) 0; }

@media (max-width: 640px) {
  .docs-month { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-block: var(--space-10); }
  .docs-month-desc { grid-column: 1; grid-row: 2; font-size: var(--text-12); }
  .docs-month-act { grid-column: 2; grid-row: 1 / span 2; }
}

/* ————— the statement sheet ————— */
.docs-sheet:focus { outline: none; }
.docs-sheet .doc-toolbar { flex-wrap: wrap; }
.docs-sheet .doc-scopes { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.doc-scope[aria-pressed="true"] { background: var(--bg-selected); color: var(--text-strong); }
.docs-sheet .doc-title { margin: 0; line-height: inherit; letter-spacing: normal; }
.docs-sheet .doc-period { font-variant-numeric: tabular-nums; }
.docs-sheet-status:not(:has(.form-error)):has(#docs-activity-csv-note:empty) { display: none; }
.docs-sheet-status { padding: var(--space-8) var(--space-16); }
.docs-sheet-status .form-error { margin: 0; }
.docs-sheet-status .form-error + .hint:empty { display: none; }
.docs-preview { padding-top: var(--space-20); }
.docs-preview:has(.doc-meta) { padding-top: 0; }

/* The statement drawn from the service's rows: fasset-ds's .doc-* anatomy,
   plus what a real ledger adds to the demo's (a second description line, a
   not-final marker, an empty month, a long table on a phone). */
.docs-in { color: var(--accent); }
/* The all-accounts statement carries a fifth figure, between your accounts, so the balances row takes five columns. */
.docs-balances-five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 700px) { .docs-balances-five { grid-template-columns: repeat(2, 1fr); } }
.docs-excluded { margin: calc(var(--space-6) * -1) 0 var(--space-16); font-size: var(--text-12); color: var(--text-subtle); }
.docs-table-wrap { overflow-x: auto; scrollbar-width: none; }
.docs-table-wrap::-webkit-scrollbar { display: none; }
.docs-date { white-space: nowrap; }
.docs-desc-main, .docs-desc-sub { display: block; }
.docs-desc-sub { margin-top: var(--space-2); font-size: var(--text-12); color: var(--text-faint); }
.docs-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--warning); margin-right: var(--space-6); vertical-align: middle; transform: translateY(-1px); }
.docs-empty-row td { color: var(--text-subtle); padding-block: var(--space-20); text-align: center; }
.docs-pending-note { margin: var(--space-12) 0 0; font-size: var(--text-12); line-height: 1.5; color: var(--text-faint); }
.docs-sheet-fallback { padding: var(--space-24) 0 var(--space-8); font-size: var(--text-13); color: var(--text-default); }
.docs-sheet-fallback .btn { margin-top: var(--space-12); }
@media (max-width: 640px) {
  .docs-sheet .doc-table { min-width: 640px; }
  .docs-sheet .doc-balances { gap: var(--space-16) var(--space-12); }
}
.docs-pdf { display: block; width: 100%; height: max(480px, calc(100vh - 300px)); border: 0; border-radius: var(--r-control); background: var(--surface-2); }
.docs-open-tab { padding: var(--space-24) 0 var(--space-8); font-size: var(--text-13); color: var(--text-subtle); }
.docs-open-tab .btn { margin-top: var(--space-12); }
.docs-sheet-error { padding: var(--space-24) 0 var(--space-8); }
.docs-sheet-error .btn { margin-top: var(--space-12); }
.docs-skel-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); padding-bottom: var(--space-20); }
.docs-skel-k { width: 72px; height: 10px; }
.docs-skel-v { width: 140px; max-width: 100%; height: 14px; margin-top: var(--space-8); }
.docs-skel-line { height: 14px; margin: var(--space-14) 0; }
.docs-skel-line:nth-child(3n) { width: 82%; }
@media (max-width: 640px) {
  .docs-sheet .doc-tools { width: 100%; }
  .docs-sheet .doc-tools .btn:not(.doc-close) { flex: 1; }
  .docs-overlay .doc-scroll { padding: var(--space-12) var(--space-8); }
  .docs-sheet { max-height: calc(100vh - 24px); }
  .docs-skel-meta { grid-template-columns: 1fr; }
  .docs-sheet .doc-head { flex-direction: column; gap: var(--space-8); }
  .docs-sheet .doc-head-right { text-align: left; }
}

/* ————— exports: one row per document ————— */
.docs-list { display: flex; flex-direction: column; }
.docs-row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-24);
  row-gap: var(--space-8);
  padding-block: var(--space-20);
}
.docs-row:first-child { padding-top: var(--space-4); }
.docs-main { align-self: center; min-width: 0; }
.docs-main h3 { font-size: var(--text-14); font-weight: var(--w-medium); color: var(--text-strong); margin: 0; }
.docs-main .muted { margin-top: var(--space-4); font-size: var(--text-13); }
.docs-controls { display: flex; align-items: flex-end; gap: var(--space-12); flex-wrap: wrap; }
.docs-field { margin-bottom: 0; }
.docs-field-currency { flex: none; width: auto; display: flex; flex-direction: column; align-self: stretch; }
.docs-field-currency .seg { flex: 1; align-items: center; }
.docs-field-period { width: 160px; }
.docs-field-date { width: 140px; }
.docs-custom { display: flex; gap: var(--space-12); }
.docs-custom[hidden] { display: none; }
.docs-actions { display: flex; gap: var(--space-8); justify-content: flex-end; }
.docs-status { grid-column: 1 / -1; margin: 0; }
.docs-status:empty { display: none; }
.docs .seg { margin: 0; }
@media (max-width: 640px) {
  .docs-row { grid-template-columns: minmax(0, 1fr); }
  .docs-controls { flex-direction: column; align-items: stretch; }
  .docs-controls .docs-field, .docs-custom .docs-field { width: 100%; }
  .docs-custom { flex-direction: column; }
}
.doc-downloads { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start; }
/* The Activity log's export range borrows this pair of fields. */
.docs-range { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.docs-range .field { flex: 1 1 160px; }