/* Base: the reset, type, links, the focus ring, figures and the small
   utilities every screen leans on (PLAN 3.3, 3.8). Dense by intent: finance
   users compare rows, they do not scroll through cards.

   Every rule is in a cascade layer declared in tokens.css: reset and base
   first, utilities LAST, so a utility beats a component class on the same
   element whatever the file order or specificity (see tokens.css). */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; }
  h1, h2, h3, h4, dl, dd, figure { margin: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  img { max-width: 100%; }
  table { border-collapse: collapse; }
}

/* `hidden` is how a screen says "this field does not apply". Any class that
   sets display (label.field is display:block) outranked the browser's own
   [hidden] rule, so conditional fields showed anyway - and their values were
   posted. The attribute has to win over every class: !important in the
   FIRST layer outranks !important anywhere later, layered or not. */
@layer reset {
  [hidden] { display: none !important; }
}

@layer base {
  body {
    background: var(--bg); color: var(--text);
    font-family: var(--sans); font-size: var(--fs-md); line-height: var(--lh-md);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* One h1 per page (the page head), h2 for cards and sections. Only
     weights 400-700 in hundreds: 550 and 650 fall back unpredictably on
     Segoe UI, which is what most finance desks here run. */
  h1 { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600; letter-spacing: -.01em; }
  h2 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 600; }
  h3 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; }
  b, strong { font-weight: 600; }
  small { font-size: var(--fs-sm); }

  /* The one focus ring, for keyboard users only. A mouse click on a button
     draws nothing; Tab always shows where you are. */
  :focus { outline: none; }
  :focus-visible { outline: none; box-shadow: var(--focus); }

  /* An inline SVG with only a viewBox fills its container. Size every icon
     once, here, rather than discovering a 300px lock in the sidebar. */
  .ico { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: -2px; }

  ::selection { background: var(--accent-subtle); color: var(--text); }

  /* ── figures ──────────────────────────────────────────────────────────
     Amounts are the UI face with tabular, lining figures: columns line up
     digit for digit, and they do not read as code. Mono amounts ran about
     15% wider for nothing. Mono is for identifiers only: document numbers,
     account codes, IBAN, TRN. */
  .num, .amt { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .num { text-align: end; }
  .mono { font-family: var(--mono); font-size: .94em; }
  .neg { color: var(--neg); }
  /* "Not applicable": a dash, quieter than a figure, so 0.00 and blank
     never look alike. */
  .amt.blank, .blank { color: var(--text-subtle); }

  pre.code {
    margin: 0; padding: var(--s-3) var(--s-4); font: var(--fs-sm)/1.5 var(--mono); overflow-x: auto;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  }
  kbd {
    font: var(--fs-xs)/1.4 var(--mono); background: var(--surface-2); border: 1px solid var(--border-strong);
    border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 var(--s-1); color: var(--text-muted);
  }
}

/* ── utilities ─────────────────────────────────────────────────────────
   Last layer, so they win: `.note.mt` is 14px above, not the 3px .note
   gives itself. Use them for spacing between blocks and simple rows;
   anything with a name of its own belongs in components.css. */
@layer utilities {
  .subtle { color: var(--text-muted); font-size: var(--fs-sm); }
  .muted { color: var(--text-muted); }
  /* De-emphasised: a leaver, a disposed asset, a held line, a closed
     period, a reversed amount. Muted text, never opacity: opacity fades the
     badges and the muted notes inside with the row, below 4.5:1 in both
     themes, where --text-muted is 7:1. */
  .is-muted, .is-muted > td, .is-muted :is(b, strong) { color: var(--text-muted); }
  .is-struck { color: var(--text-muted); text-decoration: line-through; }
  .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
  .row { display: flex; align-items: center; gap: var(--s-2); }
  .wrap { flex-wrap: wrap; }
  .spacer { flex: 1; }
  .grow { flex: 1; min-width: 0; }
  .nowrap { white-space: nowrap; }
  .right { text-align: end; }
  /* Stacked blocks inside a page are 16px apart (PLAN 3.4): one rule for
     every touching card. */
  .stack > * + * { margin-top: var(--s-4); }
  .stack-sm > * + * { margin-top: var(--s-2); }

  /* The old names keep their 14px so no screen moves; the scale is new. */
  .mt { margin-top: 14px; }
  .mb { margin-bottom: 14px; }
  .mt-0 { margin-top: 0; }   .mb-0 { margin-bottom: 0; }
  .mt-1 { margin-top: var(--s-1); }  .mb-1 { margin-bottom: var(--s-1); }
  .mt-2 { margin-top: var(--s-2); }  .mb-2 { margin-bottom: var(--s-2); }
  .mt-3 { margin-top: var(--s-3); }  .mb-3 { margin-bottom: var(--s-3); }
  .mt-4 { margin-top: var(--s-4); }  .mb-4 { margin-bottom: var(--s-4); }
  .mt-6 { margin-top: var(--s-6); }  .mb-6 { margin-bottom: var(--s-6); }
  .gap-1 { gap: var(--s-1); }  .gap-2 { gap: var(--s-2); }  .gap-3 { gap: var(--s-3); }  .gap-4 { gap: var(--s-4); }

  /* Only on paper (print.css shows it): the print header, a signature line. */
  .print-only { display: none; }
  /* For a screen reader only: a label a sighted user reads from context. */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}