/* Legacy aliases (PLAN 3.8): rules that draw markup the screens built by hand
   before the components existed, in the components' language, until each
   screen migrates (Phases 2-5). Every rule here names the class it keeps
   alive; when the last screen stops using a class, its rule is deleted in the
   same change, and the file is empty by Phase 6.

   All of it sits in the `legacy` cascade layer (tokens.css): after
   `components`, so an alias can restyle old markup that also carries a
   component class (the ghost back button of the old page head is a .btn),
   and before `utilities`, so `.note.mt` or `.card-foot.mt-0` get the
   utility's value whatever the specificity. An unlayered rule here would
   beat the utilities again - that was the `.note.mt` bug. */

@layer legacy {

/* ── headline figures: .tiles / .tile ───────────────────────────────────
   Twelve screens built their KPI blocks as .tiles > .tile with .tile-label,
   .tile-value and .tile-hint. They read as the stat strip's tiles: same
   card, same label, same tabular figure. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); min-width: 0; }
.tile {
  display: block; min-width: 0; padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: var(--text); text-align: start;
}
a.tile { text-decoration: none; }
a.tile:hover, button.tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.tile-label {
  display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.tile-value {
  display: block; margin-top: var(--s-1); font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; color: var(--text);
}
/* These said `tile-value mono`; a figure is not an identifier. */
.tile-value.mono { font-family: inherit; font-size: var(--fs-2xl); }
.tile-hint { display: block; margin-top: var(--s-half); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-subtle); }
@media (max-width: 600px) {
  /* Two to a row on a phone, as the stat strip goes (PLAN 3.16), the figure
     sized to its tile so "6,164,930.80" stays one figure on one line. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .tile { padding: var(--s-2) var(--s-3); container-type: inline-size; }
  /* dom.js mount() sets --len, the figure's characters; a tabular digit
     is about .6em wide. */
  .tile-value, .tile-value.mono {
    font-size: min(var(--fs-xl), calc(100cqi / (var(--len, 16) * .6))); line-height: 1.3; white-space: nowrap; overflow-wrap: normal;
  }
}

/* ── a note in a card head ──────────────────────────────────────────────
   Hand-built heads put a sentence beside the title ([h2] [spacer] [span.
   subtle]). On a phone it goes under the title, full width, rather than
   standing in a column one word wide. */
@media (max-width: 600px) {
  .card-head > .spacer + .subtle { flex: 1 1 100%; margin-top: calc(-1 * var(--s-2)); }
}

/* ── the footnote under a card ──────────────────────────────────────────
   What the figures mean and where they come from. Used on 37 screens; the
   component page puts this prose in the (i) popover instead. */
.card-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--border); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted);
}
.card-foot > .spacer { flex: 1; }

/* ── the danger badge's old name ────────────────────────────────────────
   Twelve screens call it `badge-bad`; with or without `.badge` beside it, it
   is statusBadge's danger tone. */
.badge-bad {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 20px; padding: 0 var(--s-2);
  border-radius: var(--r-pill); border: 1px solid var(--danger-border);
  background: var(--danger-subtle); color: var(--danger);
  font-size: var(--fs-sm); line-height: 18px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}

/* ── captions and help text ─────────────────────────────────────────────
   `div.field > label` is the caption of a field that holds a combobox or a
   date picker (a <label> wrapping one would forward clicks to its first
   control); `.lbl` is a caption on its own, in modals laid out by hand.
   Both read as field()'s caption. */
div.field > label, .lbl {
  display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500;
  color: var(--text-muted); margin-bottom: var(--s-1);
}
.lbl:not(:first-child) { margin-top: var(--s-2); }
/* Help under a control or a figure. The stat card's own .note is the
   component's (components.css), so it is left alone here. */
.note:not(.stat *) { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-subtle); margin-top: var(--s-1); }
.card-body > .note:first-child { margin-top: 0; }

/* ── buttons at the end of a row ────────────────────────────────────────
   In a table cell they stay on one line (the table scrolls in its wrapper);
   anywhere else - a page head on a phone - they wrap rather than push the
   page sideways. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-1h); }
td > .row-actions { flex-wrap: nowrap; }

/* ── a table opened inside a row (the payables ageing's documents) ──────
   Set in from the row that opened it, on the subtle fill, so it reads as
   that supplier's detail and not as more suppliers. */
table.tbl.tbl-inner { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
table.tbl.tbl-inner td { font-size: var(--fs-sm); }

/* ── a row that needs attention ─────────────────────────────────────────
   Per-screen red tints become the one --row-flag (PLAN 3.2), which keeps
   text-subtle at 4.8:1 / 5.7:1. A DataTable paints its cells, so the cells
   carry it too; hover still shows where the pointer is. */
tr.row-bad:not(:hover), tr.row-bad:not(:hover) > td { background: var(--row-flag); }

/* ── banners toned by an inline style ─────────────────────────────────
   Some screens say "all good" with a plain .banner and an inline
   style="background: var(--ok-2); color: var(--ok)" (and one each for
   warn and the neutral grey). The banner's default edge is the warning
   tone's, so the result was a green note in an amber frame. The edge
   follows the tint the style gives it. */
.banner[style*="var(--ok"] { border-color: var(--ok-border); border-inline-start-color: var(--ok); }
.banner[style*="var(--danger"] { border-color: var(--danger-border); border-inline-start-color: var(--danger); }
.banner[style*="var(--surface-2)"] { border-color: var(--border-strong); border-inline-start-color: var(--text-subtle); }

/* ── the old page head ──────────────────────────────────────────────────
   Detail screens built their head by hand: [← Back] [h1 + subtitle] [badge]
   [spacer] [actions]. In the component page head (pagehead.js) the way back
   is a breadcrumb over the title, so the ghost back button is drawn as one:
   small, quiet, on its own line above the h1. A zero-height ::before takes
   the rest of that line so everything else starts on the next. */
.page-head:not(.ph):has(> .btn-ghost:first-child > .ico) { flex-wrap: wrap; row-gap: var(--s-1h); }
.page-head:not(.ph):has(> .btn-ghost:first-child > .ico)::before { content: ""; order: -1; flex: 0 0 100%; height: 0; }
.page-head:not(.ph) > .btn-ghost:first-child:has(> .ico) {
  order: -2; height: auto; padding: 0; gap: var(--s-1); border: 0; background: none;
  font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 400; color: var(--text-muted);
}
.page-head:not(.ph) > .btn-ghost:first-child:has(> .ico):hover { background: none; color: var(--accent); text-decoration: underline; }
.page-head:not(.ph) > .btn-ghost:first-child:has(> .ico) > .ico { width: 13px; height: 13px; }
/* The title block takes the room the controls leave, from 320px (the basis
   is what decides where the row wraps: a basis of its whole subtitle put
   every control on a line of its own), and its subtitle wraps inside it. */
.page-head:not(.ph) > div:not([class]):has(> h1) { min-width: min(240px, 100%); flex: 1 1 320px; }
/* An h1 straight in the head (no title block) is never squeezed: next to a
   wide filter it broke as "Uni / ts". */
.page-head:not(.ph) > h1 { flex: none; max-width: 100%; }
/* A filter the old head holds straight (a select, a year): an input is
   width: 100%, which in the head's row made it as wide as it could get and
   pushed the primary button off the edge. A filter is filter-sized. */
/* A select is as wide as its longest option (it was cut to "Including a…"),
   a text or number input a filter's width. */
.page-head:not(.ph) > select.input, .page-head:not(.ph) > .select { width: auto; max-width: 100%; flex: 0 0 auto; }
.page-head:not(.ph) > input.input { width: auto; flex: 0 1 180px; min-width: 96px; }
.page-head:not(.ph) > input.input.num, .page-head:not(.ph) > input.input[type="number"] { flex: 0 0 96px; }
/* A button keeps its label: .btn may shrink (min-width: 0) where a toolbar
   needs it to, and in the old head's row it did, cutting "Lend somebody
   money" at the page's edge. The title block gives way instead. */
.page-head:not(.ph) > .btn, .page-head:not(.ph) > a.btn { flex-shrink: 0; }
/* A date or a date range in the head keeps its width: the long title block
   beside it shrank it until "to" and the second date fell onto a line of
   their own. (On a phone the head wraps and the range takes the row.) */
@media (min-width: 601px) {
  .page-head:not(.ph) > .dp-range, .page-head:not(.ph) > .dp { flex-shrink: 0; }
  .page-head:not(.ph) > .dp-range > .row { flex-wrap: nowrap; }
}
/* The caption before a filter ("As at", "For") stays one line: squeezed,
   it broke into "As / at" beside its date. */
.page-head:not(.ph) > span.subtle { white-space: nowrap; }

} /* @layer legacy */

/* ── headline figures built as .card.stat in a .grid-2 ─────────────────
   149 blocks are hand-built stat cards in .grid-2, the 240px auto-fit
   utility, which on a phone is one card a row: four figures took a screen
   and a half. Two to a row, as the stat strip does (PLAN 3.16), with the
   figure sized to its card so a thirteen-digit balance stays on one line.
   Only a grid of nothing but stat cards. In the utilities layer, because it
   has to beat .grid-2 itself; it goes with the other aliases. */
@layer utilities {
  @media (max-width: 600px) {
    .grid-2:has(> .card.stat):not(:has(> :not(.card.stat))) { grid-template-columns: repeat(auto-fit, minmax(max(140px, calc(50% - var(--s-1))), 1fr)); gap: var(--s-2); }
    .grid-2:has(> .card.stat):not(:has(> :not(.card.stat))) > .card.stat { container-type: inline-size; padding: var(--s-2) var(--s-3); }
    .grid-2:has(> .card.stat):not(:has(> :not(.card.stat))) > .card.stat .value {
      font-size: min(var(--fs-2xl), calc(100cqi / (var(--len, 16) * .6))); line-height: 1.3; white-space: nowrap; overflow-wrap: normal;
    }
  }
}