/* Graceful load (owner, 5 Oct). Injected by server.mjs after base.css on every page.
   lean: product-only file so the four-repo tokens.css/base.css stay byte-identical;
   fold into them if another T-Blocks product wants the same fallbacks. */

/* Metric-matched fallbacks: until the webfont arrives (display=swap) text is set
   in a local face scaled to the webfont's width and line box, so the swap does
   not reflow lines. Values measured in Chromium (canvas width and font
   bounding box of a mixed sample; 4 Oct) against the Google Fonts files. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 107.04%; ascent-override: 90.62%; descent-override: 22.42%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Fallback"; font-weight: 500 700; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Times New Roman"); size-adjust: 95.18%; ascent-override: 109.27%; descent-override: 35.72%; line-gap-override: 0%; }
:root {
  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", "Source Serif Fallback", "Source Serif Pro", Georgia, "Times New Roman", serif;
}

/* While a page module mounts (html[data-ui=booting], set by ui/theme-boot.js and
   removed by the module) the static markup it rebuilds stays hidden and a
   skeleton at the final size holds the space. */
:root[data-ui="booting"] [data-boot="hide"] { display: none !important; }
:root:not([data-ui="booting"]) .boot-skel { display: none !important; }
/* Skeletons reuse the real component and element (an h3, a dt, .admin-stat)
   with a .skel bar inside, so each line is exactly as tall as the text it
   stands for (1lh) and the swap to content moves nothing. */
.boot-skel .skel, .skel.boot-skel { height: 1lh; min-width: min(6ch, 100%); max-width: 12ch; }
.boot-skel .skel.line, .skel.boot-skel.line { max-width: 32ch; }
.boot-skel .skel.short, .skel.boot-skel.short { max-width: 6ch; }
.boot-skel .skel.block { height: auto; max-width: none; min-height: var(--sp-24); border-radius: var(--r-md); }
.boot-skel .skel.tall { min-height: calc(var(--sp-30) * 2); }
/* A list that runs past the bottom of any screen: nothing below it is visible
   while it loads, so nothing visible can move when it arrives. */
.boot-skel .skel.fill { min-height: 100vh; }
/* A container whose children a module builds into the final view: only its
   skeleton shows. The children keep their layout (absolute, invisible) rather
   than display:none, so what the module measures while building (the chart's
   width) is already the final size. */
:root[data-ui="booting"] [data-boot="hide-children"] { position: relative; }
:root[data-ui="booting"] [data-boot="hide-children"] > :not(.boot-skel) { position: absolute !important; inset: 0 0 auto; visibility: hidden !important; pointer-events: none; }

/* Trade (marketplace.html). .retail-trading-layout on the skeleton supplies the
   final grid, shell width and phone stacking; these are the final panels'
   boxes (market card 24 px padding, ticket 20 px; phone: price, ticket, chart). */
.trade-skel .ts-market, .trade-skel .ts-ticket { display: grid; gap: var(--sp-6); align-content: start; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); padding: var(--sp-6); box-sizing: border-box; min-width: 0; }
.trade-skel .ts-ticket { gap: var(--sp-4); padding: var(--sp-5); min-height: calc(var(--sp-30) * 4 + var(--sp-12)); }
.trade-skel .ts-price { display: grid; gap: var(--sp-3); align-content: start; min-height: calc(var(--sp-30) * 2 + var(--sp-3)); }
.trade-skel .ts-chart { display: grid; gap: var(--sp-3); align-content: start; min-height: calc(var(--sp-24) * 3); }
.trade-skel .ts-chart .skel.block { min-height: calc(var(--sp-30) * 2); }
.trade-skel .ts-details { display: grid; gap: var(--sp-5); align-content: start; min-height: calc(var(--sp-30) * 4.5); }
.trade-skel .skel.price { height: var(--sp-12); max-width: 8em; }
.trade-skel .skel.seg { height: var(--sp-12); max-width: none; }
.trade-skel .ts-ticket .skel.block { min-height: calc(var(--sp-30) + var(--sp-4)); }
@media (max-width: 900px) {
  .trade-skel .ts-market { display: contents; }
  .trade-skel .ts-price, .trade-skel .ts-chart, .trade-skel .ts-details { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); padding: var(--sp-4); }
  .trade-skel .ts-price { order: 1; }
  .trade-skel .ts-ticket { order: 2; }
  .trade-skel .ts-chart { order: 3; }
  .trade-skel .ts-details { order: 4; }
}

/* Portfolio: the Connect card (one button) and the saved-holdings row. */
.boot-connect { margin: var(--sp-6) 0; display: grid; justify-items: center; }
.boot-connect .btn { min-width: calc(var(--sp-30) + var(--sp-20)); }
.boot-skel summary .skel { display: inline-block; width: min(32ch, 60%); vertical-align: top; }

/* A line that will hold a status chip, which is a little taller than text. */
.boot-skel .skel.pill, .skel.boot-skel.pill { height: calc(1lh + var(--sp-1) / 2); }
/* Home markets rows: a status chip under the name. */
.boot-skel .skel.chip { height: calc(1lh + var(--sp-1) * 1.25); }