/* ==================================================================
   Foundry Pricebook — the printed price sheet.

   The Folio kit (vendored alongside: tokens.css, base.css, ui.css,
   artifacts.css) ships tokens, primitives, forms and the print artifacts,
   but NOT the table or the empty/error states — those live only in the kit
   mockup's `src/styles/components.css`. This file ports those two blocks
   (Tables, Empty/error states) with the kit's `fl-` prefix, so the site can
   use the kit's documented `fl-table-wrap` + `table.fl-brut` markup.

   Consumes the tokens in `folio/tokens.css`. Site deviations from the
   mockup are marked "site:" inline.
   ================================================================== */

/* ------------------------------------------------------------------
   Tables  (mockup: `.table-wrap` + `table.brut`, lines 606-659)
   ------------------------------------------------------------------ */

.fl-table-wrap {
  border: var(--fo-border);
  box-shadow: var(--fo-shadow);
  background: var(--fo-paper);
  overflow: auto;
  /* site: the sheet is a fixture you scroll inside, so the yellow header band stays
     pinned to the top of the wrap (see the sticky th rule below) and the 10 columns
     scroll sideways on narrow screens. */
  max-height: min(78vh, 900px);
}

table.fl-brut {
  width: 100%;
  border-collapse: collapse;
  /* site: 10 columns, so wider than the mockup's 720px default. */
  min-width: 1080px;
}

table.fl-brut th {
  /* site: sticky head — the wrap above is the scroll container. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fo-yellow);
  color: var(--fo-ink);
  font-family: var(--fo-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--fo-tracking-wide);
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
  border: 2px solid var(--fo-ink);
  /* site: `border-collapse: collapse` makes a sticky cell shed its own border while
     scrolling, so the ink rule under the header is drawn as a hard shadow instead. */
  box-shadow: 0 3px 0 var(--fo-ink);
  white-space: nowrap;
}

table.fl-brut td {
  padding: 10px 12px;
  border: 2px solid var(--fo-ink);
  vertical-align: top;
  font-size: var(--fo-fs-300);
}

table.fl-brut tbody tr:nth-child(odd) {
  background: var(--fo-paper);
}
table.fl-brut tbody tr:nth-child(even) {
  background: var(--fo-paper-2);
}

table.fl-brut tbody tr:hover {
  background: var(--fo-sky);
}

table.fl-brut td.num {
  font-family: var(--fo-font-mono);
  white-space: nowrap;
}

/* site: price columns read better right-aligned with tabular figures than the
   mockup's left-aligned `.num`. */
table.fl-brut th.num,
table.fl-brut td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.fl-brut--compact td,
table.fl-brut--compact th {
  padding: 6px 8px;
}

/* ------------------------------------------------------------------
   Empty / error states  (mockup: `.state*`, lines 858-898)
   ------------------------------------------------------------------ */

.fl-state {
  border: var(--fo-border);
  box-shadow: var(--fo-shadow);
  background: var(--fo-paper-2);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}

.fl-state__mark {
  font-family: var(--fo-font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  margin-bottom: var(--sp-3);
}

.fl-state h3 {
  font-size: var(--fo-fs-700);
  margin-bottom: var(--sp-2);
}

.fl-state p {
  max-width: 52ch;
  margin: 0 auto var(--sp-4);
  color: var(--fo-ink-soft);
}

.fl-state--error {
  background: var(--fo-orange);
}

.fl-state--error .fl-state__mark {
  color: var(--fo-ink);
}

.fl-state--empty {
  background: var(--fo-paper-2);
}

.fl-state--empty .fl-state__mark {
  color: var(--fo-muted);
}

/* site: app.js writes a plain error string into #empty-state (textContent) — the
   block keeps this padding so a bare message still sits in a printed frame. */
.fl-state--error p,
.fl-state--error {
  font-family: var(--fo-font-mono);
}