/* ============================================================================
   JSOOR Gaming · THE BROWSE SURFACE — layout only
   ----------------------------------------------------------------------------
   Colour, type, radius and every curve are the design system's tokens; nothing
   is redefined here. Shared vocabulary (kv, eyebrow, panel counts) is shell.css.

   THE ONE LOUD THING is the total. Everything else on this surface is a quiet
   list, because the list is read and the total is trusted — and the total says,
   in the same place and the same size, whether it was checked, summed once, or
   withheld. A withheld total is the word "Withheld" at the size the figure would
   have been, so its absence cannot be mistaken for a layout gap.

   MOTION, decided per the shell's doctrine:
     · the peek does not animate. It is the most-used surface in the product and
       must be there at the speed of the press.
     · grain, facet and search changes do not animate. They are keystrokes.
     · the record pane enters ONCE when it first tiles in — occasional, so a
       standard 200ms from 8px and transparent. Replacing one record with another
       does not animate again.
   ========================================================================= */

.br { flex: 1; min-block-size: 0; display: flex; flex-direction: column; gap: 12px; }

/* ── head: grain, search, the tab's set ───────────────────────────────────── */
.br-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; flex: none; }
.br-grains .br-grain { min-block-size: 38px; padding-inline: 16px; font-size: var(--t-body-lg); }
.br-count { margin-inline-start: 2px; font-variant-numeric: tabular-nums; }

.br-search { position: relative; flex: 0 1 380px; min-inline-size: 220px; }
.br-search .js-input { min-block-size: 40px; padding-inline-end: 40px; font-size: var(--t-body); }
.br-search kbd { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; }
.br-search .js-input:focus + kbd { opacity: 0; }

.br-scope { display: flex; align-items: baseline; gap: 8px; padding: 6px 12px;
            border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--raised); }
.br-scope b { font-size: var(--t-body); font-weight: 600; color: var(--ink); }

.br-flabel { font-size: var(--t-micro); font-weight: 500; color: var(--muted); white-space: nowrap; }
.br-gate { font-size: var(--t-micro); color: var(--faint); }
.br-gate.is-bad { color: var(--bad-fg); }

/* ── facets: every value on screen with its count, zeros included ─────────── */
.br-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; flex: none; }
.br-facet { display: inline-flex; align-items: center; gap: 8px; min-inline-size: 0; }
.br-opts { padding: 2px; }
.br-opt { min-block-size: 28px; padding-inline: 10px; font-size: var(--t-meta); }
.br-opt.is-zero:not(.is-on) { color: var(--faint); }
.br-opt[disabled] { opacity: .5; cursor: not-allowed; }
.br-select.js-input { inline-size: auto; min-block-size: 32px; padding-block: 0; padding-inline: 10px 32px;
                      font-size: var(--t-meta); background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; }
.br-time.js-input { inline-size: 112px; min-block-size: 32px; padding-inline: 8px; font-size: var(--t-meta);
                    font-family: var(--font-mono); color-scheme: dark; }

/* ── stage: the list, and the record tiled beside it ──────────────────────────
   Panes tile; they never float. The record takes a column and the list keeps
   the rest, so the query underneath stays readable and pressable. */
.br-stage { flex: 1; min-block-size: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.br-stage.has-record { grid-template-columns: minmax(0, 1fr) clamp(380px, 36%, 540px); }

.br-list, .br-record { display: flex; flex-direction: column; min-block-size: 0; overflow: hidden;
                       border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }

/* ── the total ───────────────────────────────────────────────────────────── */
.br-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 24px;
          padding: 16px 18px 14px; border-block-end: 1px solid var(--border); }
.br-sum-n { font-size: var(--t-body); color: var(--muted); }
.br-sum-n b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--ink); margin-inline-end: 4px; }
.br-sum-n span { color: var(--faint); }
.br-sum-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.br-sum-route { font-size: var(--t-micro); font-weight: 500; color: var(--muted); }
.br-sum--checked .br-sum-route { color: var(--ok-fg); }
.br-sum--withheld .br-sum-route, .br-sum--withheld .jg-num { color: var(--bad-fg); }
.br-sum-why { grid-column: 1 / -1; max-inline-size: 92ch; font-size: var(--t-meta); line-height: var(--lh-snug); color: var(--muted); }
.br-sum--withheld .br-sum-why { color: var(--bad-fg); }
.br-asof { color: var(--faint); }

/* ── columns: one template per grain, shared by the head and its rows ─────── */
.br-cols--movements, .br-row--movements { grid-template-columns: 52px minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 104px 104px; }
.br-cols--people, .br-row--people { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 64px 120px minmax(0, 1.2fr); }
.br-cols--nights, .br-row--nights { grid-template-columns: minmax(0, 2fr) 120px 100px 150px 140px; }
.br-cols, .br-row { gap: 16px; }
.br-cols .is-r { text-align: end; }

.br-rows { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
.br-row { inline-size: 100%; min-block-size: 50px; padding-block: 8px; font: inherit; font-size: var(--t-body); cursor: pointer; }
.br-row[aria-expanded="true"] { background: var(--sunken); }
.br-row.is-open { background: var(--sunken); }
.br-row.is-open::before { opacity: 1; }

.br-t { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); }
.br-what { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-inline-size: 0; }
.br-what b { min-inline-size: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-row--people .br-what, .br-row--nights .br-what { flex-direction: column; align-items: flex-start; gap: 2px; }
.br-what > span:not(.js-chip) { font-size: var(--t-meta); color: var(--muted); }
.br-dim { min-inline-size: 0; font-size: var(--t-meta); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-num { text-align: end; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.br-num small { color: var(--faint); font-size: var(--t-micro); }
.br-amt { text-align: end; font-family: var(--font-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.br-amt.is-out { color: var(--ink-2); }
.br-amt.is-owed { color: var(--warn-fg); }
.br-bal { text-align: end; font-family: var(--font-mono); font-size: var(--t-meta); color: var(--faint); white-space: nowrap; }
/* A void stays on screen, struck through, and counts for nothing. */
.br-row.is-dead .br-what b, .br-row.is-dead .br-amt { text-decoration: line-through; color: var(--muted); }

/* ── the peek: anchored, not animated ─────────────────────────────────────── */
.br-peek { position: fixed; z-index: 600; }

/* ── the record ──────────────────────────────────────────────────────────── */
.br-record { border-color: var(--border-strong); }
.br-record--enter { transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out); }
@starting-style { .br-record--enter { opacity: 0; transform: translateX(8px); } }

.br-rec-head { flex: none; padding: 14px 18px 16px; border-block-end: 1px solid var(--border); }
.br-rec-top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 2px; }
.br-rec-head h2 { font-size: var(--t-title); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.015em; color: var(--ink); }
.br-rec-head > p { margin-block-start: 4px; font-size: var(--t-meta); color: var(--muted); }
.br-pivots { margin-block-start: 14px; display: flex; flex-direction: column; gap: 6px; }
.br-pivot-row { display: flex; flex-wrap: wrap; gap: 6px; }

.br-rec-body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; }
.br-sec { margin-block-start: 18px; }
.br-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: 2px; }
.br-sec-head h3 { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.br-sec-head .count { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--faint); }
.br-rec-body .kv b { max-inline-size: 66%; text-align: end; overflow-wrap: anywhere; }
.br-rec-body .kv em { font-family: var(--font-sans); }
.br-rec-body .kv.is-gated b { font-family: var(--font-sans); font-weight: 400; color: var(--muted); }

.br-lead { display: flex; flex-direction: column; gap: 8px; padding-block: 18px 2px; }
.br-lead span { font-size: var(--t-meta); color: var(--muted); }
.br-lead.is-dead .jg-num { text-decoration: line-through; color: var(--muted); }

.br-card { margin-block-start: 6px; padding: 2px 12px 4px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--raised); }
.br-card-head { padding-block: 10px 4px; }
.br-card-head b { display: block; font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.br-card-head span { font-size: var(--t-micro); color: var(--muted); }

.br-lrow { display: flex; align-items: center; gap: 12px; inline-size: 100%; padding-block: 9px; border: 0;
           border-block-end: 1px solid var(--hairline); background: transparent; color: var(--ink);
           font: inherit; text-align: start; cursor: pointer; }
.br-lrow.is-static { cursor: default; }
.br-lrow-main { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.br-lrow-main b { font-size: var(--t-meta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-lrow-main span { font-size: var(--t-micro); color: var(--muted); }
.br-lrow-side { flex: none; margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-2); }
.br-link { padding: 0; border: 0; background: none; color: var(--accent-fg); font: inherit; cursor: pointer;
           text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  button.br-lrow:hover b { color: var(--accent-fg); }
  .br-link:hover { text-decoration-color: currentColor; }
}
.br-lrow:focus-visible, .br-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.br-tk { margin-block-start: 4px; }
.br-tk-row { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr 1fr 64px; gap: 8px; padding-block: 7px;
             border-block-end: 1px solid var(--hairline); font-size: var(--t-meta); color: var(--ink-2); }
.br-tk-row > span:nth-child(2), .br-tk-row > span:nth-child(3) { text-align: end; font-family: var(--font-mono); }
.br-tk-row > span:nth-child(4) { text-align: end; color: var(--ok-fg); }
.br-tk-row.is-bad > span:nth-child(4) { color: var(--bad-fg); }
.br-tk-head { font-size: var(--t-micro); color: var(--muted); }
.br-tk-head > span:nth-child(n) { font-family: var(--font-sans); color: var(--muted); }
.br-tk-total { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; border-block-end: 0; padding-block-start: 12px; }
.br-tk-total > span:first-child { font-weight: 600; color: var(--ink); }
.br-tk-fig { font-family: var(--font-display) !important; font-size: 1.5rem; font-weight: 800; color: var(--ink); text-align: end; }
.br-tk-total.is-bad .br-tk-fig { color: var(--bad-fg) !important; }
.br-why { margin-block-start: 6px; font-size: var(--t-meta); line-height: var(--lh-snug); color: var(--muted); }
.br-why.is-bad { color: var(--bad-fg); }
.br-quiet { padding-block: 8px; font-size: var(--t-meta); color: var(--muted); }
.br-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 8px; }

/* ── below the design size: the record stacks under the list, nothing drops ── */
@media (max-width: 1180px) {
  .br-stage.has-record { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .br-cols--movements, .br-row--movements { grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 92px 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-record--enter { transition-property: opacity; }
  @starting-style { .br-record--enter { transform: none; } }
}

/* Names and sentences read in the UI face; the shell's kv sets figures in mono,
   which turns a person's name into a code. Figures stay tabular. */
.br-rec-body .kv b { font-family: var(--font-sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.br-peek .jg-fact--lead.is-dead > .v { text-decoration: line-through; color: var(--muted); }
.br-amt .js-chip, .br-dim .js-chip { font-family: var(--font-sans); }