/* portal-browse.css — the GENERIC premium 5-view browse experience (W2), chrome-compacted (2026-09-28).
 *
 * The reusable browse cockpit styles: ONE 3.25rem command bar + a chip row that exists only when it
 * has content + a dense MASTER (GRID/LIST/BRIEF/MINI) beside a FILTER RAIL that docks open (14rem) or
 * minimizes to a 4rem icon strip, and a DETAILED_PROFILE that is a MODAL OVERLAY over the whole
 * workspace once the user selects a record (docs/plans/2026-09-28-browse-chrome-compaction-design.md,
 * plus the owner's 2026-09-28 decisions: overlay-only detail, rail open by default where it fits,
 * icon strip instead of 0 width). Match-free — no score/mutual/rank styling. Reuses the portal-match
 * palette tokens verbatim so light/dark theme cleanly. REM-ONLY (DEV_GUIDE HARD RULE 2): 1rem=16px;
 * .0625rem=1px borders; 2.75rem=44px touch floor. ZERO real px anywhere (the lint gate fails on any
 * px). External stylesheet only (style-src 'self'); JS sets dynamic grid tracks via the el() style
 * property (CSSOM) and every layout STATE via a class (.rail-docked / .rail-strip / .peek / .drawer /
 * .collapsed), never an inline style.
 *
 * LAYOUT IS FLEX, NOT ARITHMETIC (design §2.5 / §3.6): the body is a 100dvh flex column with overflow
 * hidden, .br-shell fills it, .br-workspace is a grid with ONE definite row (minmax(0,1fr)) and every
 * pane carries min-height:0, so #brMaster — and only #brMaster — scrolls. No calc(100vh − Σ layers),
 * no min-height floor: both made the document scroll instead of the results (measured, design §1.1).
 *
 * TOKENS are --pt-* namespaced (2026-07-24): they used to be bare generics (--accent, --bg,
 * --surface*, --text) declared at :root, which a consuming site's own :root could clobber — and
 * which clobbered the site right back. The ACCENT family reads the per-site brand from
 * /auth/api/branding/theme.css with the previous literal as the var() fallback, so a site that
 * does not serve branding (the stub defines nothing) computes byte-identically to before.
 *
 * ROLE MAP (2026-07-25 remediation — each branded token is used ONLY where its generator
 * guarantee actually applies; see SHARED_AUTH branding/tokens.py):
 *   --pt-accent        = --site-accent-fill: a FILL that carries --pt-on-accent text (proven
 *                        contrast(on-accent, fill) >= 4.5). Never used as ink or indicator.
 *   --pt-accent-ink    = --site-accent-ink: the brand AS TEXT on a plain SURFACE only (proven
 *                        >= 4.5 vs #ffffff / #111827; our --pt-surface is #ffffff / #0f1623 —
 *                        measured >= 4.63 dark / >= 4.51 light across all 25 fleet brands).
 *   --pt-accent-strong = --site-accent-strong: focus rings / selection borders / non-text
 *                        indicators (generator floor >= 3.0 vs theme bg).
 *   --pt-accent-wash   = --site-accent-tint: translucent decorative washes that carry NO text
 *                        (focus halos).
 *   --pt-accent-bg / --pt-accent-line / --pt-tint-ink are FIXED literals, NOT site-branded:
 *   the generator emits no ink proven against its own tint (ink-on-tint composited over our
 *   surfaces measured as low as 4.01 dark / 3.82 light across the fleet — 2026-07 verifier
 *   finding), so every text-carrying tint chip keeps the portal's known-good fixed pair.
 */

:root {
  --pt-dash-accent: var(--site-accent-fill, #3b82f6);
  --pt-header-height: 3.75rem;
  --pt-touch-min: 2.75rem;
  --pt-radius-sm: .375rem; --pt-radius-md: .5rem; --pt-radius-lg: .75rem;
  --pt-transition-fast: .15s; --pt-transition-normal: .25s;
  --pt-bg: #f4f6fb; --pt-surface: #ffffff; --pt-surface-2: #f8fafc; --pt-surface-3: #eef2f7;
  --pt-line: #e3e8ef; --pt-line-2: #cbd5e1;
  --pt-text: #0f172a; --pt-muted: #64748b; --pt-faint: #94a3b8;
  --pt-good: #15803d; --pt-good-bg: #dcfce7; --pt-warn: #b45309; --pt-warn-bg: #fef3c7;
  --pt-neutral: #475569; --pt-neutral-bg: #f1f5f9;
  --pt-bad: #b91c1c; --pt-bad-bg: #fee2e2;
  --pt-accent: var(--site-accent-fill, #2563eb);
  --pt-accent-ink: var(--site-accent-ink, #2563eb);
  --pt-on-accent: var(--site-on-accent, #fff);
  --pt-accent-strong: var(--site-accent-strong, #2563eb);
  --pt-accent-wash: var(--site-accent-tint, #e0edff);
  --pt-tint-ink: #2563eb;
  --pt-accent-bg: #e0edff; --pt-accent-line: #bfdbfe;
  --pt-ai: #8b5cf6; --pt-ai-bg: #f3e8ff; --pt-ai-line: #8b5cf644;
  --pt-price: #0f766e; --pt-price-bg: #ccfbf1;
  --pt-scrim: rgba(15, 23, 42, .38);
}
html.dark {
  --pt-bg: #0a0e17; --pt-surface: #0f1623; --pt-surface-2: #131c2b; --pt-surface-3: #1b2638;
  --pt-line: #1f2c40; --pt-line-2: #2c3b54;
  --pt-text: #e8eef7; --pt-muted: #94a3b8; --pt-faint: #64748b;
  --pt-good: #4ade80; --pt-good-bg: #0c2a18; --pt-warn: #fbbf24; --pt-warn-bg: #2a1f06;
  --pt-neutral: #cbd5e1; --pt-neutral-bg: #1a2536;
  --pt-bad: #f87171; --pt-bad-bg: #2a0d0d;
  --pt-accent: var(--site-accent-fill, #60a5fa);
  --pt-accent-ink: var(--site-accent-ink, #60a5fa);
  --pt-on-accent: var(--site-on-accent, #071120);
  --pt-accent-strong: var(--site-accent-strong, #60a5fa);
  --pt-accent-wash: var(--site-accent-tint, #10243f);
  --pt-tint-ink: #60a5fa;
  --pt-accent-bg: #10243f; --pt-accent-line: #1d4674;
  --pt-ai: #a78bfa; --pt-ai-bg: #1e1635; --pt-ai-line: #7c3aed55;
  --pt-price: #5eead4; --pt-price-bg: #06231f;
  --pt-scrim: rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
/* [hidden] must win over every display:flex/grid below — the JS toggles visibility with the
   attribute (chip row, ⋯ panel, pager buttons, badges, slots), never with an inline style. */
.browse-body [hidden] { display: none !important; }

/* ══ the layer stack (design §3.6) ══ */
body.browse-body {
  margin: 0; padding-top: var(--pt-header-height);
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pt-bg); color: var(--pt-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .875rem; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
.br-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.br-skip { position: fixed; left: 1rem; top: .5rem; z-index: 1000; transform: translateY(-150%);
  min-height: var(--pt-touch-min); display: inline-flex; align-items: center; padding: 0 1rem;
  border-radius: var(--pt-radius-md); background: var(--pt-accent); color: var(--pt-on-accent); font-weight: 700; }
.br-skip:focus { transform: translateY(0); }
.spin { animation: br-spin 1s linear infinite; display: inline-block; }
@keyframes br-spin { to { transform: rotate(360deg); } }
/* visually hidden, still read: the count's stable sr-only sentence. */
.br-sr { position: absolute; width: .0625rem; height: .0625rem; margin: -.0625rem; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ══ COMMAND BAR (design §3.2) — 3.25rem = 1px border + 2 × .1875rem padding + 2.75rem controls ══ */
.br-cmdbar { flex: none; height: 3.25rem; display: flex; align-items: center; gap: .5rem; padding: .1875rem 1rem;
  background: var(--pt-surface); border-bottom: .0625rem solid var(--pt-line); white-space: nowrap; }
.br-cmdbar > * { flex: none; }
.br-cmd-search { flex: 1 1 16rem; min-width: 10rem; }
.br-cmd-div { width: .0625rem; height: 1.5rem; background: var(--pt-line-2); }
.br-select { height: var(--pt-touch-min); max-width: 12rem; padding: 0 .75rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-text); font-size: .85rem; }
.br-icon-btn { position: relative; width: var(--pt-touch-min); height: var(--pt-touch-min); display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--pt-radius-md); border: .0625rem solid var(--pt-line-2);
  background: var(--pt-surface-2); color: var(--pt-muted); cursor: pointer; font-size: .95rem; }
.br-icon-btn:hover { color: var(--pt-text); border-color: var(--pt-accent-line); }
.br-icon-btn:disabled { opacity: .4; cursor: default; }
.br-icon-btn:focus-visible, .br-btn:focus-visible, .br-field-btn:focus-visible, .br-strip-btn:focus-visible,
.br-more-act:focus-visible, .br-crumb-x:focus-visible, .br-crumb-clear:focus-visible, .facet-more:focus-visible,
.br-pill:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
/* the active-filter count badge (aria-hidden; the count is in the control's accessible name). */
.br-badge { min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999rem; background: var(--pt-accent);
  color: var(--pt-on-accent); font-size: .66rem; font-weight: 800; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; }
.br-icon-btn .br-badge, .br-strip-btn .br-badge { position: absolute; top: -.35rem; right: -.35rem; }
/* the Filters DRAWER opener: phones only — wider frames carry the rail's own strip toggle. */
.br-cmd-filters { display: none; }

/* the ONE search field: the outline is an INSET shadow so the 2.75rem buttons inside stay 2.75rem. */
.br-field { position: relative; display: flex; align-items: center; height: var(--pt-touch-min); border-radius: var(--pt-radius-md);
  background: var(--pt-surface-2); box-shadow: inset 0 0 0 .0625rem var(--pt-line-2); }
.br-field-ic { position: absolute; left: .75rem; color: var(--pt-faint); font-size: .85rem; pointer-events: none; }
.br-field input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 .5rem 0 2.2rem; border: none; background: transparent;
  color: var(--pt-text); font-size: .875rem; text-overflow: ellipsis; }
.br-field input::placeholder { color: var(--pt-faint); }
.br-field input:focus { outline: none; }
.br-field:focus-within { box-shadow: inset 0 0 0 .0625rem var(--pt-accent-strong), 0 0 0 .1875rem var(--pt-accent-wash); }
.br-field-btn { flex: none; width: var(--pt-touch-min); height: var(--pt-touch-min); display: inline-flex; align-items: center;
  justify-content: center; border: none; border-radius: var(--pt-radius-md); background: transparent; color: var(--pt-muted);
  cursor: pointer; font-size: .95rem; }
.br-field-btn:hover { color: var(--pt-text); }
.br-ai-toggle { color: var(--pt-ai); font-size: 1.05rem; }
.br-ai-toggle[aria-pressed="true"] { background: var(--pt-ai); color: #fff; }
.br-ai-run { color: var(--pt-ai); }
.br-field.ai-on { background: var(--pt-ai-bg); box-shadow: inset 0 0 0 .0625rem var(--pt-ai); }
.br-field.ai-on:focus-within { box-shadow: inset 0 0 0 .0625rem var(--pt-ai), 0 0 0 .1875rem var(--pt-ai-line); }
.br-field.ai-on .br-field-ic { color: var(--pt-ai); }

/* count + pager: tabular digits so "…" / "1–24 of 412" do not shift the bar. */
.br-count { display: inline-flex; align-items: center; min-height: var(--pt-touch-min); font-size: .82rem; color: var(--pt-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; position: relative; }
.br-count b { color: var(--pt-text); font-weight: 700; }
.br-count.is-short .br-count-of, .br-count.is-short b { display: none; }
.br-count.is-loading .br-count-noun { display: none; }

/* sort (slot 3): a MENU BUTTON naming the current sort (a direction glyph + its name, >= 9rem) at
   >= 72rem, icon-only 2.75rem below; it opens .br-sort-pop under itself. The popover is anchored
   LEFT (the bar always has the count / pager / view / ⋯ to its right) and capped to the frame, so
   it never leaves the viewport; its list scrolls when the frame is short. */
.br-cmd-sort { position: relative; display: inline-flex; align-items: center; }
.br-cmd-sort[hidden] { display: none; }
.br-sort-btn { display: inline-flex; align-items: center; gap: .5rem; height: var(--pt-touch-min); min-width: 9rem; max-width: 14rem;
  padding: 0 .75rem; border-radius: var(--pt-radius-md); border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2);
  color: var(--pt-text); font-size: .85rem; cursor: pointer; }
.br-sort-btn:hover { border-color: var(--pt-accent-line); }
.br-sort-btn[aria-expanded="true"] { border-color: var(--pt-accent-strong); }
.br-sort-btn:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-sort-ic { flex: none; color: var(--pt-muted); font-size: .85rem; }
.br-sort-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.br-sort-caret { flex: none; color: var(--pt-faint); font-size: .7rem; }
.br-sort-pop { position: absolute; top: calc(100% + .375rem); left: 0; z-index: 46; width: 19rem; max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 8rem); overflow-y: auto; padding: .35rem; border-radius: var(--pt-radius-md); background: var(--pt-surface);
  border: .0625rem solid var(--pt-line-2); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18); }
/* the rows (the popover's AND ⋯'s): [✓ name][↑][↓] — each field ONCE; a preset is [✓ name] alone */
.br-sort-list { display: flex; flex-direction: column; gap: .125rem; }
.br-sort-row { display: flex; align-items: center; gap: .125rem; border-radius: var(--pt-radius-sm); }
.br-sort-row.on { background: var(--pt-accent-wash); }
.br-sort-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; min-height: var(--pt-touch-min); padding: 0 .75rem;
  border: none; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-text); font-size: .85rem; text-align: left;
  cursor: pointer; }
span.br-sort-pick { cursor: default; }
.br-sort-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.br-sort-mark { flex: none; width: 1.2rem; text-align: center; color: var(--pt-accent-ink); }
.br-sort-row.on .br-sort-pick { font-weight: 700; color: var(--pt-accent-ink); }
.br-sort-dir { flex: none; width: var(--pt-touch-min); height: var(--pt-touch-min); display: inline-flex; align-items: center;
  justify-content: center; border: none; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-muted);
  font-size: .9rem; cursor: pointer; }
button.br-sort-pick:hover, .br-sort-dir:hover { background: var(--pt-surface-2); color: var(--pt-text); }
/* the active direction: filled, not by colour alone — aria-pressed + the row's ✓ and weight */
.br-sort-dir[aria-pressed="true"], .br-sort-dir[aria-pressed="true"]:hover { background: var(--pt-accent); color: var(--pt-on-accent); }
.br-sort-pick:focus-visible, .br-sort-dir:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: -.125rem; }

/* view radiogroup: NO wrapper padding — the four 2.75rem segments ARE the control (design §3.2). */
.br-switcher { display: inline-flex; border-radius: var(--pt-radius-md); overflow: hidden; background: var(--pt-surface-2);
  box-shadow: inset 0 0 0 .0625rem var(--pt-line-2); }
.br-seg { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: var(--pt-touch-min);
  height: var(--pt-touch-min); padding: 0 .6rem; border: none; background: transparent; color: var(--pt-muted); font-size: .78rem;
  font-weight: 600; cursor: pointer; }
.br-seg:hover { color: var(--pt-text); }
.br-seg.on { background: var(--pt-surface); color: var(--pt-accent-ink); box-shadow: inset 0 0 0 .0625rem var(--pt-accent-line); }
.br-seg:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: -.125rem; }
.br-seg-lbl { display: none; }
@media (min-width: 100rem) { .br-seg-lbl { display: inline; } }

/* ⋯ overflow panel — absolutely positioned under the bar's right edge (a sibling of the bar, so the
   bar itself never needs overflow:visible tricks). */
.br-more { position: absolute; top: 3.25rem; right: .75rem; z-index: 45; min-width: 14rem; padding: .35rem;
  display: flex; flex-direction: column; gap: .15rem; border-radius: var(--pt-radius-md); background: var(--pt-surface);
  border: .0625rem solid var(--pt-line-2); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18); }
.br-more-act { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: var(--pt-touch-min); padding: 0 .75rem;
  border: none; border-radius: var(--pt-radius-sm); background: transparent; color: var(--pt-text); font-size: .85rem;
  font-weight: 500; text-align: left; cursor: pointer; }
.br-more-act:hover { background: var(--pt-surface-2); }
a.br-more-act { text-decoration: none; }          /* the ⋯ "My Saved Items" link reads as an item */
.br-more-act i { width: 1.2rem; text-align: center; color: var(--pt-muted); }
.br-more-act kbd { margin-left: auto; font: inherit; font-size: .7rem; color: var(--pt-faint); }
.br-more-item { display: flex; flex-direction: column; gap: .3rem; padding: .3rem .5rem .5rem; }
.br-more-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-faint); }
.br-more .br-select { max-width: none; width: 100%; }
.br-more .br-switcher { flex-direction: column; background: transparent; box-shadow: none; }
.br-more .br-seg { justify-content: flex-start; width: 100%; padding: 0 .75rem; }
.br-more .br-seg-lbl { display: inline; }

/* ══ CHIP ROW (design §3.2) — 3rem, rendered only when non-empty ([hidden] otherwise) ══
   ONE 3rem line while the chips and a status fit side by side; when they do not, the status WRAPS
   onto its own line under the chips instead of painting over them (PR #54 re-QA: at phone/tablet
   widths the pill squeezed #brCrumbs below its content and covered the chips' ✕ and "Clear all").
   #brCrumbs never shrinks below its chips (flex-shrink 0, min-width auto): a chip line wider than
   the row scrolls the row sideways, which keeps every control reachable. */
.br-chiprow { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 3rem;
  padding: .125rem 1rem; background: var(--pt-surface); border-bottom: .0625rem solid var(--pt-line);
  overflow-x: auto; overflow-y: hidden; }
.br-crumbs { display: flex; align-items: center; gap: .3rem; flex: 1 0 auto; white-space: nowrap; }
.br-crumbs:empty { display: none; }             /* status only: no empty first line */
/* chip = 2.75rem, NO vertical padding, outline as an inset shadow so the 2.75rem ✕ fits inside. */
.br-crumb { display: inline-flex; align-items: center; gap: .1rem; height: var(--pt-touch-min); padding: 0 0 0 .75rem;
  border-radius: 999rem; background: var(--pt-accent-bg); color: var(--pt-tint-ink);
  box-shadow: inset 0 0 0 .0625rem var(--pt-accent-line); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.br-crumb.ai { background: var(--pt-ai-bg); color: var(--pt-ai); box-shadow: inset 0 0 0 .0625rem var(--pt-ai-line); }
.br-crumb-tx { overflow: hidden; text-overflow: ellipsis; max-width: 18rem; }
.br-crumb-x { width: var(--pt-touch-min); height: var(--pt-touch-min); display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999rem; border: none; background: transparent; color: inherit; cursor: pointer; font-size: .75rem; opacity: .8; }
.br-crumb-x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.br-crumb-clear { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--pt-touch-min); padding: 0 .75rem;
  border-radius: 999rem; border: .0625rem dashed var(--pt-line-2); background: transparent; color: var(--pt-muted);
  font-size: .74rem; cursor: pointer; white-space: nowrap; }
.br-crumb-clear:hover { color: var(--pt-bad); border-color: var(--pt-bad); }
/* the AI status item (Parsing… / No filters emitted / dropped: … / error copy): a role=status node
   that stays in the DOM; the row is un-hidden BEFORE its text lands. */
/* like the search status it wraps to its own line (and its text wraps) rather than cover a chip. */
.br-ai-status { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; min-width: 0;
  min-height: var(--pt-touch-min); font-size: .74rem; font-weight: 600; color: var(--pt-ai); line-height: 1.25; }
.br-ai-status:empty { display: none; }
.br-ai-status.bad { color: var(--pt-bad); }
/* the SEARCH status item (PR #54 QA-fix; replaces the retired master bar's #brStatus): a source
   outage beside partial results (tone-warn) or a failed search over the previous results (tone-bad,
   + Retry). Tone = tinted pill + a distinct glyph + an sr-only "Warning:"/"Error:" prefix, never
   colour alone. The text WRAPS (the row grows) instead of clipping or scrolling on phones, and the
   whole item wraps under the chips when both do not fit on one line (see .br-chiprow). */
.br-search-status { display: inline-flex; align-items: center; gap: .35rem; flex: 0 1 auto; min-width: 0;
  min-height: var(--pt-touch-min); padding: 0 0 0 .75rem; border-radius: var(--pt-radius-md);
  font-size: .74rem; font-weight: 600; }
.br-search-status:empty { display: none; }
.br-search-status.tone-warn { background: var(--pt-warn-bg); color: var(--pt-warn); }
.br-search-status.tone-bad { background: var(--pt-bad-bg); color: var(--pt-bad); }
.br-search-status-tx { min-width: 0; padding: .3rem 0; line-height: 1.25; white-space: normal; }
.br-status-act { display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: var(--pt-touch-min);
  min-width: var(--pt-touch-min); padding: 0 .6rem; border: none; border-radius: var(--pt-radius-md);
  background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.br-status-act:hover { box-shadow: inset 0 0 0 .0625rem currentColor; }
.br-status-act:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: -.125rem; }
.br-search-status .br-crumb-x { flex: none; }
/* the AI status text wraps too (min-width: 0): its dismiss must not flex-shrink below 2.75rem beside it. */
.br-ai-status .br-crumb-x { flex: none; }

/* ══ buttons ══ */
.br-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--pt-touch-min); min-width: var(--pt-touch-min);
  padding: 0 .9rem; border-radius: var(--pt-radius-md); border: .0625rem solid var(--pt-line-2);
  background: var(--pt-surface); color: var(--pt-text); font-size: .82rem; font-weight: 600; cursor: pointer;
  text-decoration: none; }
.br-btn:hover { border-color: var(--pt-accent-line); background: var(--pt-surface-2); }
.br-btn:disabled { opacity: .4; cursor: default; }
/* accent FILL that carries text -> its ink MUST come from a token (a site brand can be any
   luminance; #fff on e.g. amber is 2.15:1). --pt-on-accent is theme-scoped below, so the old
   `html.dark ... { color: #071120 }` override is folded into the token. */
.br-btn-primary { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.br-btn-primary:hover { filter: brightness(1.06); background: var(--pt-accent); }

/* ══ WORKSPACE (design §3.6) — ONE definite row; the rail track is a class-set variable ══ */
.br-workspace { flex: 1; min-height: 0; position: relative; display: grid;
  grid-template-rows: minmax(0, 1fr);            /* REQUIRED: without a definite row the pane grows to its content */
  grid-template-columns: var(--br-rail-w, 0) minmax(0, 1fr);
  --br-rail-w: 0; }
.br-workspace.rail-docked { --br-rail-w: 14rem; }
.br-workspace.rail-strip { --br-rail-w: 4rem; }
.br-rail-pane { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column;
  background: var(--pt-surface); border-right: .0625rem solid var(--pt-line); }
.br-master-pane { grid-column: 2; grid-row: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column;
  background: var(--pt-bg); }
.br-master { flex: 1; min-height: 0; overflow: auto; padding: 1rem; }   /* the ONLY scroll region */

/* ── the rail's two docked states: OPEN (text + icons) / MINIMIZED (icon strip) ── */
.br-strip { display: none; }
.br-rail { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.br-rail-top { flex: none; display: flex; align-items: center; gap: .4rem; min-height: var(--pt-touch-min);
  padding: 0 .25rem 0 .9rem; border-bottom: .0625rem solid var(--pt-line); }
.br-rail-title { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-muted); }
.br-rail-min { margin-left: auto; border-color: transparent; background: transparent; }
.br-rail-close { display: none; margin-left: auto; }
.br-rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: .35rem .5rem 1.5rem; }
.br-rail-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem;
  color: var(--pt-faint); font-size: .8rem; text-align: center; }
/* MINIMIZED: the 4rem strip is the pane; the full rail is gone unless it PEEKS (below). */
.rail-strip .br-strip { display: flex; flex-direction: column; align-items: center; gap: .2rem; flex: 1; min-height: 0;
  padding: .375rem 0 1rem; overflow-y: auto; overflow-x: hidden; }
.rail-strip .br-rail { display: none; }
.br-strip-btn { position: relative; flex: none; width: var(--pt-touch-min); height: var(--pt-touch-min); display: inline-flex;
  align-items: center; justify-content: center; border: none; border-radius: var(--pt-radius-md); background: transparent;
  color: var(--pt-muted); font-size: .95rem; cursor: pointer; }
.br-strip-btn:hover, .br-strip-btn:focus-visible { background: var(--pt-surface-2); color: var(--pt-text); }
.br-strip-btn[aria-pressed="true"] { background: var(--pt-accent-bg); color: var(--pt-tint-ink); }
.br-strip-btn.has-active::after { content: ""; position: absolute; top: .45rem; right: .45rem; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--pt-accent-strong); box-shadow: 0 0 0 .125rem var(--pt-surface); }
.br-strip-mono { font-weight: 800; font-size: .85rem; letter-spacing: .02em; }
.br-strip-quick:not(:empty), .br-strip-groups:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding-top: .35rem; margin-top: .25rem; border-top: .0625rem solid var(--pt-line); width: 2.75rem; }
/* PEEK: hover/focus on the strip shows the full 14rem rail as a NON-MODAL overlay over the results
   (no reflow — the grid track stays 4rem). Positioned against .br-workspace (the pane is static). */
.rail-strip .br-rail-pane.peek .br-rail { display: flex; position: absolute; left: 0; top: 0; bottom: 0; width: 14rem; z-index: 20;
  background: var(--pt-surface); border-right: .0625rem solid var(--pt-line); box-shadow: .5rem 0 2rem rgba(0, 0, 0, .2); }

/* ── quick (instant) filters as wrapping 2.75rem pills at the top of the rail (design §3.3) ── */
.br-quick { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem .25rem .6rem; border-bottom: .0625rem solid var(--pt-line); }
.br-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--pt-touch-min); padding: 0 .8rem;
  border-radius: 999rem; border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-text);
  font-size: .76rem; font-weight: 600; cursor: pointer; }
.br-pill[aria-pressed="true"] { background: var(--pt-accent-bg); color: var(--pt-tint-ink); border-color: var(--pt-accent-line); }

/* ── facet group: a <details> with a 2.75rem <summary> (keyboard native) ── */
.facet-grp { border-bottom: .0625rem solid var(--pt-line); }
.facet-h { display: flex; align-items: center; gap: .5rem; min-height: var(--pt-touch-min); padding: 0 .5rem 0 .5rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-faint);
  cursor: pointer; list-style: none; }
.facet-h::-webkit-details-marker { display: none; }
.facet-h > i, .facet-h > .br-strip-mono { width: 1.1rem; text-align: center; color: var(--pt-muted); font-size: .8rem; flex: none; }
.facet-h-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-h-n { min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999rem; background: var(--pt-accent-bg);
  color: var(--pt-tint-ink); font-size: .66rem; display: inline-flex; align-items: center; justify-content: center; }
.facet-h::after { content: ""; flex: none; width: .45rem; height: .45rem; margin: 0 .4rem 0 .2rem;
  border: solid var(--pt-faint); border-width: 0 .125rem .125rem 0; transform: rotate(45deg) translateY(-.1rem);
  transition: transform var(--pt-transition-fast); }
.facet-grp[open] > .facet-h::after { transform: rotate(-135deg) translateY(-.1rem); }
.facet-body { padding: 0 0 .4rem; }
.facet-opt { display: flex; align-items: center; gap: .5rem; min-height: var(--pt-touch-min); padding: .3rem .55rem;
  border-radius: var(--pt-radius-md); cursor: pointer; }
.facet-opt:hover { background: var(--pt-surface-2); }
.facet-opt.on { background: var(--pt-accent-bg); }
.facet-check { width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: .3rem; border: .0625rem solid var(--pt-line-2); color: var(--pt-accent-ink); font-size: .7rem; flex: none; }
/* the tick glyph sits ON the accent fill -> tokenised ink (was #fff / html.dark #071120). */
.facet-opt.on .facet-check { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
.facet-label { flex: 1; font-size: .82rem; color: var(--pt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-opt.on .facet-label { color: var(--pt-tint-ink); font-weight: 600; }
.facet-count { font-size: .72rem; color: var(--pt-faint); font-variant-numeric: tabular-nums; }
.facet-more { min-height: var(--pt-touch-min); padding: 0 .55rem; border: none; background: transparent;
  color: var(--pt-accent-ink); font-size: .78rem; font-weight: 600; cursor: pointer; }

/* ══ WP3 browse controls (library API 1.6; docs/plans/2026-10-03-portal-parity-ui-design.md §2-§4) ══ */
/* a declared filter GROUP: its fields under small headings inside one <details> */
.br-fgroup-body { display: flex; flex-direction: column; gap: .35rem; padding: 0 0 .6rem; }
.facet-sub { padding: .15rem 0 0; }
.facet-sub-h { display: flex; align-items: center; gap: .45rem; padding: .25rem .55rem; font-size: .72rem; font-weight: 700;
  color: var(--pt-muted); text-transform: uppercase; letter-spacing: .04em; }
.facet-sub-h > i, .facet-sub-h > .br-strip-mono { width: 1.1rem; text-align: center; font-size: .75rem; color: var(--pt-faint); }
.facet-sub .facet-body { padding: 0; }
/* the RANGE control: a fieldset, two inputs on one row (each ~45% on phones), its error and ✕ */
.br-range { margin: 0; padding: .35rem .55rem .5rem; border: none; min-width: 0; }
.br-range-lg { padding: 0; margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; color: var(--pt-text); }
.br-range-unit { font-weight: 500; color: var(--pt-faint); }
.br-range-row { display: flex; align-items: center; gap: .35rem; }
.br-range-in { flex: 1 1 45%; min-width: 0; width: 45%; height: var(--pt-touch-min); padding: 0 .5rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface); color: var(--pt-text); font: inherit; font-size: .85rem; }
.br-range-in:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-range-in[aria-invalid="true"] { border-color: var(--pt-bad); box-shadow: inset 0 0 0 .0625rem var(--pt-bad); }
.br-range-in:disabled { opacity: .55; cursor: not-allowed; }
.br-range-to { flex: none; color: var(--pt-faint); }
.br-range-err { margin: .3rem 0 0; font-size: .75rem; font-weight: 600; color: var(--pt-bad); }
.br-range-clear { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--pt-touch-min); margin-top: .15rem;
  padding: 0 .4rem; border: none; background: transparent; color: var(--pt-accent-ink); font: inherit; font-size: .76rem;
  font-weight: 600; cursor: pointer; }
.br-range-clear:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-field-note { display: flex; align-items: flex-start; gap: .35rem; margin: .1rem .55rem .4rem; font-size: .76rem; color: var(--pt-muted); }
.br-field-note > i { margin-top: .15rem; color: var(--pt-faint); }
.br-field-note a { color: var(--pt-accent-ink); }
/* the viewer's DEFAULT chip (§2.3): outlined, never colour alone ("default filter" is read out) */
.br-crumb.default { background: transparent; box-shadow: inset 0 0 0 .0625rem var(--pt-accent-line); border-style: dashed; }
/* a ?pin= chip (EDUNET portal architecture §13): no remove control, so the chip closes its own
   right edge; the lock says it is fixed (the text " (fixed filter)" says it to a screen reader) */
.br-crumb.pinned { gap: .35rem; padding: 0 .75rem; }
.br-crumb.pinned .fa-lock { font-size: .7rem; opacity: .8; }
.br-crumb-save { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--pt-touch-min); padding: 0 .75rem;
  border: none; background: transparent; color: var(--pt-accent-ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.br-crumb-save:hover { text-decoration: underline; }
.br-crumb-save:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-copy-field { width: 100%; min-height: var(--pt-touch-min); padding: 0 .5rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-text); font: inherit; font-size: .8rem; }
/* the phone drawer's sticky "Show N profiles" (owner Q7); hidden outside the drawer */
.br-rail-foot { display: none; }
#brSavedBtn { flex: none; }
#brMoreSaved { display: none; }
/* the SAVED SEARCHES sheet (§3): modal, 24rem from the right; full screen on phones */
.br-ss-wrap { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.br-ss-scrim { position: absolute; inset: 0; background: var(--pt-scrim); }
.br-ss { position: relative; display: flex; flex-direction: column; width: 24rem; max-width: 100%; height: 100%;
  background: var(--pt-surface); color: var(--pt-text); box-shadow: -.5rem 0 2rem rgba(0, 0, 0, .25);
  border-left: .0625rem solid var(--pt-line-2); }
.br-ss-head { flex: none; display: flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: 0 .5rem 0 1.25rem;
  border-bottom: .0625rem solid var(--pt-line); }
.br-ss-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 700; }
.br-ss-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem 2rem; }
.br-ss-form { display: flex; flex-direction: column; gap: .4rem; padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: .0625rem solid var(--pt-line); }
.br-ss-h { margin: 0 0 .35rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-muted); }
.br-ss-label { font-size: .78rem; font-weight: 600; }
.br-ss-input { width: 100%; min-height: var(--pt-touch-min); padding: 0 .65rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface); color: var(--pt-text); font: inherit; font-size: .9rem; }
.br-ss-input:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-ss-input:disabled { opacity: .55; }
.br-ss-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.br-ss-sub { min-width: 0; font-size: .78rem; color: var(--pt-muted); overflow-wrap: anywhere; }
.br-ss-hint { margin: 0; font-size: .78rem; color: var(--pt-muted); }
.br-ss-err { margin: 0; font-size: .78rem; font-weight: 600; color: var(--pt-bad); }
.br-ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.br-ss-item { display: flex; flex-direction: column; gap: .45rem; padding: .65rem .75rem; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line); background: var(--pt-surface-2); }
.br-ss-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.br-ss-name { font-weight: 700; font-size: .88rem; overflow-wrap: anywhere; }
.br-ss-date { font-size: .72rem; color: var(--pt-faint); }
.br-ss-acts { display: flex; align-items: center; gap: .35rem; }
.br-ss-acts .br-ss-run { margin-right: auto; }
.br-ss-rename { display: flex; flex-direction: column; gap: .35rem; }
.br-ss-state { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 0; color: var(--pt-muted); font-size: .82rem; }
.br-ss-state p { margin: 0; }
.br-ss-ph { min-height: 4.5rem; }
.br-ss-ph-line { display: block; height: .8rem; width: 70%; border-radius: var(--pt-radius-sm); background: var(--pt-surface-3); }
.br-ss-ph-line.short { width: 40%; }
@media (max-width: 47.99rem) {
  #brSavedBtn { display: none; }
  #brMoreSaved { display: flex; }
  .br-ss { width: 100%; border-left: none; box-shadow: none; }
  /* the drawer: quick chips in ONE horizontally scrolling row, the sticky "Show N profiles" foot */
  .br-rail-pane.drawer .br-quick { flex-wrap: nowrap; overflow-x: auto; }
  .br-rail-pane.drawer .br-pill { flex: none; }
  .br-rail-pane.drawer .br-rail-foot { flex: none; display: flex; padding: .5rem .75rem;
    border-top: .0625rem solid var(--pt-line); background: var(--pt-surface); }
  .br-rail-pane.drawer .br-rail-show { flex: 1; justify-content: center; }
}

/* ── master content ── */
.br-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 3rem; color: var(--pt-muted); }
.br-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 3rem 1rem; color: var(--pt-muted); text-align: center; }
.br-empty > i { font-size: 1.6rem; color: var(--pt-faint); }
.br-empty-hint { font-size: .8rem; color: var(--pt-faint); }
.br-dim { color: var(--pt-faint); }
/* the count line inside the scroll content — phones only (the bar drops the count below 48rem). */
.br-count-line { display: none; padding: 0 0 .6rem; color: var(--pt-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
/* the in-flow pager at the END of the scroll content (both directions, design §3.2). */
.br-endpager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; padding: 1.25rem 0 .25rem; }
.br-endpager-hint { font-size: .78rem; color: var(--pt-muted); font-variant-numeric: tabular-nums; }

/* ── shared card primitives ── */
.br-img { object-fit: cover; background: var(--pt-surface-3); flex: none; display: block; }
.br-img.cover { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.br-img.sq { width: 3.25rem; height: 3.25rem; border-radius: var(--pt-radius-md); }
.br-img.sq-s { width: 2.5rem; height: 2.5rem; border-radius: var(--pt-radius-sm); }
.br-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--pt-faint); font-size: 1.4rem; }
.br-status { display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: 999rem; font-size: .68rem;
  font-weight: 700; letter-spacing: .01em; background: var(--pt-neutral-bg); color: var(--pt-neutral); }
.br-status.tone-good { background: var(--pt-good-bg); color: var(--pt-good); }
.br-status.tone-warn { background: var(--pt-warn-bg); color: var(--pt-warn); }
.br-status.tone-bad { background: var(--pt-bad-bg); color: var(--pt-bad); }
.br-badge-tag { font-size: .68rem; padding: .15rem .5rem; border-radius: 999rem; background: var(--pt-surface-3); color: var(--pt-muted); }
.br-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.br-price { color: var(--pt-price); font-weight: 800; font-variant-numeric: tabular-nums; }
.br-price.lg { font-size: 1.05rem; } .br-price.sm { font-size: .85rem; }
.br-rating { display: inline-flex; align-items: center; gap: .15rem; font-size: .78rem; font-weight: 700; color: var(--pt-warn);
  background: var(--pt-warn-bg); padding: .12rem .45rem; border-radius: 999rem; }
.br-metric { display: inline-flex; flex-direction: column; }

/* ══ GRID — image-forward hero cards (columns per row: portal-views.css) ══ */
.gcard { display: flex; flex-direction: column; border-radius: var(--pt-radius-lg); overflow: hidden; background: var(--pt-surface);
  border: .0625rem solid var(--pt-line); cursor: pointer; transition: transform var(--pt-transition-fast), box-shadow var(--pt-transition-fast); }
.gcard:hover { transform: translateY(-.15rem); box-shadow: 0 .5rem 1.5rem rgba(15,23,42,.14); }
.gcard.sel { border-color: var(--pt-accent-strong); box-shadow: 0 0 0 .125rem var(--pt-accent-strong); }
.gcard-band { position: relative; }
.gcard-tr { position: absolute; top: .55rem; right: .55rem; display: flex; gap: .3rem; }
.gcard-bl { position: absolute; bottom: .55rem; left: .55rem; }
.gcard-body { padding: .75rem .8rem .85rem; display: flex; flex-direction: column; gap: .3rem; }
.gcard-title { font-weight: 700; font-size: .92rem; line-height: 1.25; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gcard-sub { font-size: .75rem; color: var(--pt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }

/* ══ LIST — the real <table> (views design §4.3, P3) is styled in portal-views.css ══ */

/* ══ BRIEF (16) — badge-forward triage ══ */
.brow { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .75rem; border-radius: var(--pt-radius-md);
  cursor: pointer; border: .0625rem solid transparent; margin-bottom: .4rem; background: var(--pt-surface); }
.brow:hover { border-color: var(--pt-line-2); }
.brow.sel { border-color: var(--pt-accent-strong); box-shadow: 0 0 0 .0625rem var(--pt-accent-strong); }
.brow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.brow-l1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.brow-t { font-weight: 700; font-size: .92rem; }
.brow-l2 { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.br-tick { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; padding: .18rem .5rem;
  border-radius: 999rem; background: var(--pt-surface-2); color: var(--pt-muted); border: .0625rem solid var(--pt-line); }
.br-tick i { font-size: .7rem; color: var(--pt-faint); }

/* ══ MINI — thumbnail contact-sheet (columns per row: portal-views.css) ══ */
.mtile { position: relative; border-radius: var(--pt-radius-md); overflow: hidden; cursor: pointer; background: var(--pt-surface);
  border: .0625rem solid var(--pt-line); }
.mtile:hover { border-color: var(--pt-line-2); }
.mtile.sel { border-color: var(--pt-accent-strong); box-shadow: 0 0 0 .125rem var(--pt-accent-strong); }
.mtile .br-img.cover { aspect-ratio: 1 / 1; }
.mtile-cap { display: block; padding: .35rem .45rem; font-size: .72rem; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mtile.t-warn { border-left: .1875rem solid var(--pt-warn); }
.mtile.t-bad { border-left: .1875rem solid var(--pt-bad); }
.mtile.t-good { border-left: .1875rem solid var(--pt-good); }

/* ══ an "unavailable" scoped row (My Saved Items decision 2): a neutral placeholder in every view,
   no record data — only the reason and (in a folder) a Remove ══ */
.br-phrow { display: flex; align-items: center; gap: .6rem; min-height: 3.5rem; padding: .4rem .6rem; border-radius: var(--pt-radius-md);
  border: .0625rem dashed var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-muted); font-size: .82rem; }
.br-phrow.sel { border-style: solid; border-color: var(--pt-accent-strong); }
.br-phrow:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-phrow-ic { color: var(--pt-faint); }
.br-phrow-tx { flex: 1; min-width: 0; font-weight: 600; }
.br-phrow-brief { margin-bottom: .4rem; }
.br-phrow-grid { flex-direction: column; justify-content: center; text-align: center; min-height: 12rem; }
.br-phrow-grid .br-phrow-tx { flex: none; }
.br-phrow-mini { flex-direction: column; justify-content: center; text-align: center; min-height: 7rem; padding: .3rem; }
.br-phrow-mini .br-phrow-tx { flex: none; font-size: .72rem; }
.br-phrow-mini .br-btn { padding: 0 .5rem; font-size: .72rem; }

/* ══ DETAILED_PROFILE — the MODAL OVERLAY over the whole workspace (owner decision 2026-09-28) ══ */
.br-scrim { position: absolute; inset: 0; z-index: 15; background: var(--pt-scrim); }
.br-detail { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--pt-surface); }
.br-detail.collapsed { display: none; }
.br-detail-head { flex: none; display: flex; align-items: center; gap: .4rem; min-height: 3rem; padding: 0 .5rem 0 1.25rem;
  border-bottom: .0625rem solid var(--pt-line); }
.br-detail-title { font-weight: 700; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-detail-pos { font-size: .76rem; color: var(--pt-faint); font-variant-numeric: tabular-nums; margin-right: auto; white-space: nowrap; }
.br-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem 1.25rem 2rem; }
/* laid out for WIDTH: media + actions in a sticky aside, facts/sections beside it, 2 section columns on wide frames. */
.br-detail-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2rem; width: 100%; max-width: 96rem; margin: 0 auto; }
.d-aside { min-width: 0; }
.d-main { min-width: 0; }
@media (min-width: 64rem) {
  .br-detail-body { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
  .d-aside { position: sticky; top: 0; align-self: start; }
}
@media (min-width: 100rem) {
  .d-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-items: start; }
}
.d-hero { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.d-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pt-radius-lg); background: var(--pt-surface-3); }
span.d-img { display: inline-flex; align-items: center; justify-content: center; }
.d-hero-main { display: flex; flex-direction: column; gap: .4rem; }
.d-title { font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.d-sub { color: var(--pt-muted); font-size: .85rem; }
.d-badges { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.d-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.d-sect { border-top: .0625rem solid var(--pt-line); }
.d-sect-head { display: flex; align-items: center; gap: .5rem; min-height: var(--pt-touch-min); padding: .5rem 0; font-weight: 700;
  font-size: .88rem; cursor: pointer; }
.d-sect-head.static { cursor: default; }
.d-chev { margin-left: auto; color: var(--pt-faint); transition: transform var(--pt-transition-fast); }
.d-sect.closed .d-chev { transform: rotate(-90deg); }
.d-sect.closed .d-sect-body { display: none; }
.d-sect-body { padding: 0 0 .9rem; }
.d-kv { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: .4rem .9rem; margin: 0; }
.d-kv dt { color: var(--pt-faint); font-size: .78rem; }
.d-kv dd { margin: 0; font-size: .85rem; }
.d-prose { margin: 0; line-height: 1.55; font-size: .85rem; color: var(--pt-text); }
.d-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .65rem; }
.d-gallery-item { min-width: 0; margin: 0; }
.d-gallery-link { display: block; border-radius: var(--pt-radius-md); }
.d-gallery-link:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }
.d-gallery-image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--pt-radius-md); background: var(--pt-surface-3); }
.d-gallery-caption { padding-top: .25rem; color: var(--pt-muted); font-size: .74rem; }
.d-related-h { font-weight: 700; font-size: .82rem; margin: .5rem 0; text-transform: uppercase; letter-spacing: .04em; color: var(--pt-faint); }
.d-related-item { min-height: var(--pt-touch-min); padding: .4rem 0; font-size: .82rem;
  border-top: .0625rem solid var(--pt-line); display: flex; align-items: center; }
.d-links { display: flex; flex-direction: column; gap: .5rem; }
.d-link { min-height: var(--pt-touch-min); display: inline-flex; align-items: center; gap: .5rem; }
.br-recovery { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.br-error-hint { max-width: 34rem; color: var(--pt-faint); font-size: .82rem; }

/* ══ responsive tiers (design §3.2, re-derived: 72rem / 48rem; evaluated on the FRAME width) ══ */
@media (max-width: 71.99rem) {
  .br-count-noun { display: none; }               /* "1–24 of 412": the noun returns at >= 72rem */
  /* sort goes icon-only: the button keeps its glyph (the direction) and its accessible name */
  .br-sort-btn { justify-content: center; width: var(--pt-touch-min); min-width: 0; padding: 0; }
  .br-sort-cur, .br-sort-caret { display: none; }
}
@media (max-width: 47.99rem) {
  /* phones: the row is [Filters][Search][⋯]; count moves into the scroll content, view into ⋯,
     the in-flow Previous/Next carry pagination; the rail is a modal DRAWER (no strip). */
  .br-cmdbar { padding: .1875rem .75rem; }
  .br-cmd-filters { display: inline-flex; }
  .br-cmdbar .br-count, .br-cmdbar .br-pg, .br-cmdbar .br-cmd-div, .br-cmdbar .br-cmd-view, .br-cmdbar .br-cmd-source,
  .br-cmdbar .br-cmd-sort { display: none; }      /* sort: its rows in ⋯ instead */
  .br-field input { font-size: 1rem; }            /* 14px triggers iOS focus-zoom */
  .br-count-line { display: block; }
  .br-workspace.rail-docked, .br-workspace.rail-strip { --br-rail-w: 0; }
  .br-rail-pane.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: min(20rem, 88vw); z-index: 20;
    box-shadow: .5rem 0 2rem rgba(0, 0, 0, .25); border-right: .0625rem solid var(--pt-line-2); }
  .br-rail-pane.drawer .br-strip { display: none; }
  .br-rail-pane.drawer .br-rail { display: flex; position: static; width: auto; box-shadow: none; }
  .br-rail-pane.drawer .br-rail-min { display: none; }
  .br-rail-pane.drawer .br-rail-close { display: inline-flex; }
  .br-rail-pane.collapsed { display: none; }
  .br-crumbs { flex-wrap: nowrap; }
  .br-detail-scroll { padding: 1rem .75rem 1.5rem; }
}

/* ══ reduced motion (design §3.7): no slide, no fade, no hover lift, no spinner ══ */
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  .gcard, .d-chev, .facet-h::after, .br-rail, .br-rail-pane, .br-detail, .br-scrim { transition: none; }
  .gcard:hover { transform: none; }
}

/* ══ ?frame=embed (EDUNET portal architecture §13) ══ html.br-embed is set by portal-browse.js only
   when the page is framed by its own origin. The host chrome (header-embed's header, context bar
   and sidebar) never shows inside the frame: header-embed already hides it in ANY frame
   (html.he-framed); this rule keeps that true whatever header-embed version a site serves. */
html.br-embed .he-header, html.br-embed .he-context-bar, html.br-embed .he-sidebar { display: none !important; }
html.br-embed body.browse-body { padding-top: 0; }