/* asset_floor.css — the ▣ Asset floor face on Markets (web/asset_floor.js), 2026-10-01, lane AF.
   Tokens only, no hex anywhere (styles.css / readable.css / skins.css define every token per mode and per
   skin), so the face reads in light, dark and all six data skins without a palette of its own — and the
   skins generator, which re-points hard-coded colours, has nothing here to re-point. Hues are REUSED on the
   meanings they already carry: --seg-eco (brown, "the real economy") for the face itself — a seventh
   face needs a seventh hue, and brown is the one no other face uses — and the band hues follow the
   other faces (purple = price vs value, teal = returns, amber = the read, red = risk, blue = the tape,
   grey = size and context). Nothing here fills a data cell: this face has no heat by design. */

/* ── the face button, a sibling of ◆ Capital / ◇ Valuation Models ── */
.face-floor { color: var(--seg-eco); border-color: color-mix(in srgb, var(--seg-eco) 42%, transparent); }
.face-floor:hover { background: color-mix(in srgb, var(--seg-eco) 10%, transparent); }
.face-floor.active-btn {
  background: color-mix(in srgb, var(--seg-eco) 14%, transparent);
  border-color: var(--seg-eco);
  color: var(--seg-eco);
}

/* ── column bands (border rule + header tag only) ── */
.gate-afread  { --gate-c: var(--seg-qua); }
.gate-afasset { --gate-c: var(--seg-val); }
.gate-afearn  { --gate-c: var(--seg-ret); }
.gate-afcheck { --gate-c: var(--seg-rate); }
.gate-aftape  { --gate-c: var(--seg-crv); }
.gate-afsize  { --gate-c: var(--seg-mkt); }

/* ── cells ── */
.af-tier { font-weight: 700; cursor: help; }
.af-t0 { opacity: 1; }
.af-mk { margin-left: 2px; font-size: 9px; letter-spacing: .02em; cursor: help; }
.af-warn { color: var(--amber-ink, var(--amber)); cursor: help; font-size: 11px; }

/* ── the chips: inside #qchips (display: contents), so they sit in the toolbar's own row ── */
.af-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.af-chips .af-lab { color: var(--seg-eco); font-weight: 700; font-size: 13px; margin: 0 1px 0 2px; cursor: help; }
.af-chips .af-sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.af-chips .af-hint { font-size: 11.5px; }
.af-chips .af-chip-sub { color: var(--ink-2, var(--muted)); font-weight: 400; }
.af-chips .af-chip.active .af-chip-sub { color: inherit; }
.af-chips .af-gate:not(.active) { border-style: dashed; }

/* ── the base-rate strip: one line under the toolbar, wraps on a narrow screen ── */
.af-strip {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  margin: 0 0 6px; padding: 5px 9px;
  border: 1px solid var(--border); border-left: 3px solid var(--seg-eco); border-radius: 6px;
  background: var(--panel); color: var(--text);
  font-size: 12px; line-height: 1.45;
}
.af-strip .af-strip-lab {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--seg-eco); cursor: help;
}
.af-strip .af-strip-txt { flex: 1 1 360px; min-width: 0; }
.af-strip .af-strip-go {
  flex: 0 0 auto; font: inherit; font-size: 11.5px; padding: 1px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--accent-ink, var(--accent));
}
.af-strip .af-strip-go:hover { border-color: var(--accent); }

/* ── the per-market board (reuses .rot-board / .rot-lead; rows are filters) ── */
/* 22 markets would push the table a screen down, so the board scrolls inside its own box (about eleven
   rows) with the header and the all-markets total pinned; ▤ Leaderboard still hides it outright. */
.af-board .af-scroll { max-height: 300px; overflow: auto; }
.af-board table.af-mkt thead th { position: sticky; top: 0; z-index: 7; background: var(--thead); }
.af-board table.af-mkt thead th:nth-child(-n+2) { z-index: 8; }
.af-board table.af-mkt tfoot td { position: sticky; bottom: 0; z-index: 5; background: var(--thead); }
.af-board table.af-mkt tfoot td:nth-child(-n+2) { z-index: 6; }
/* the shared sector-board rule clamps column 2 to 48px (a sector count); here it holds "15,550" */
.af-board table.sec-main.af-mkt tr:not(.seg-hdr):not(.sec-band) th:nth-child(2),
.af-board table.sec-main.af-mkt tr:not(.seg-hdr):not(.sec-band) td:nth-child(2) { width: 62px; min-width: 62px; max-width: 62px; }
.af-board tr.af-mrow { cursor: pointer; }
.af-board tr.af-mrow:hover td { background: var(--hover); }
.af-board table.sec-main.af-mkt tr.af-on:not(.seg-hdr):not(.sec-band) td { background: var(--accent-soft); }
.af-board table.sec-main.af-mkt tr.af-on:not(.seg-hdr):not(.sec-band) td.rot-sec { box-shadow: inset 3px 0 0 var(--accent); }
.af-board tr.af-total td { border-top: 1px solid var(--border); font-weight: 600; }
.af-board th[data-afsort] { cursor: pointer; white-space: nowrap; }

@media (max-width: 700px) {
  .af-chips .af-chip-sub { display: none; }
  .af-strip { font-size: 11.5px; }
}