/* The market report board (N18, functions/views/_board.js): /reports/board and
   Admin → Market board. Tokens only, so both themes follow; tabular figures throughout;
   and a printable monthly summary (no print button: the browser's print gives it). */

.board { font-variant-numeric: tabular-nums; }
.board-block { margin-block-start: var(--space-6); }
.board-block > h2 { margin-block-end: var(--space-3); }
/* folds: how the figures are made, and the admin tab's filters (style.css, "folds") */
.board-filter-fold { margin-block-start: var(--space-5); }
.board-filter-fold .board-filters { margin-block-start: var(--space-2); }
.board-filter-fold > .fold-h { font-weight: 600; }

/* the filters: one row that wraps, compact controls (CONVENTIONS, "Form controls") */
.board-filters { margin-block-start: var(--space-5); }
.board-filter-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.board-filter-row .field { margin: 0; min-width: 150px; flex: 1 1 150px; }
.board-filter-row .btn { min-height: 42px; }
.board-csv { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; margin-block-start: var(--space-3); }

/* the headline tiles */
.board-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); margin-block-start: var(--space-5); }
.board-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-4); display: grid; gap: var(--space-1); align-content: start; }
.board-tile .bt-value { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.board-tile .bt-value.thin { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.board-tile .bt-sample { color: var(--ink-2); }

/* two tables side by side on a wide screen */
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--space-5); }
.board-scroll { overflow-x: auto; }
.board-scroll > .c-table { display: table; }   /* not account.css's scrolling table in the admin rows: the box scrolls */
.board-scroll:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.board .c-table th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
.board .c-table td, .board .c-table th { white-space: nowrap; }
.board .c-table td.wrap { white-space: normal; min-width: 10ch; }
.board .thin-cell { color: var(--ink-3); }

/* a figure with its bar: the width carries the data (style="inline-size:…") */
.bar-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 150px; }
.bar-cell .bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--jade); opacity: .7; flex: none; }

/* the columns chart (functions/_chart.js columnsChart) */
.chart .c-col-0 { fill: var(--jade); }
.chart .c-col-1 { fill: var(--ochre); }
.c-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.c-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-key { inline-size: 12px; block-size: 12px; border-radius: 3px; display: inline-block; }
.c-key.c-col-0 { background: var(--jade); }
.c-key.c-col-1 { background: var(--ochre); }

/* how the figures are made */
.board-method { max-width: 75ch; }
.board-method ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--space-2); }
.board-freeze .field { margin: 0; }

/* shown only on paper */
.board-print-head { display: none; }

@media print {
  body > :not(main) { display: none !important; }
  .board-filters, .board-csv, .board-freeze, .board-noprint, .chart details { display: none !important; }
  .board-print-head { display: block; font-size: 11px; color: var(--ink-2); margin: 0 0 8px; }
  .board { font-size: 11px; }
  .board .h2 { font-size: 20px; }
  .board .lede { font-size: 12px; }
  .board-block > h2 { font-size: 15px; margin-block-end: 6px; }
  .board .sec, .board.sec { padding: 0; }
  .board-tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .board-tile { padding: 8px; break-inside: avoid; }
  .board-tile .bt-value { font-size: 18px; }
  .board-block { margin-block-start: 14px; break-inside: avoid-page; }
  .board-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .chart { max-width: 420px; break-inside: avoid; }
  .board-scroll { overflow: visible; }
  .board .c-table td, .board .c-table th { padding: 2px 6px; }
  a { color: inherit; text-decoration: none; }
}