/* portal-detail.css — the two containers of the result detail (phase P5; in-app integration design
 * §6, owner Q14). Loaded AFTER portal-browse.css, whose .br-detail rules it refines:
 *   .br-detail.mode-overlay           a modal dialog of at most 64rem over a scrim;
 *   .br-detail.mode-overlay.is-sheet  on phones: a bottom sheet with the action strip at its foot;
 *   .br-detail.mode-panel             a NON-modal 28rem panel docked beside the results (a third
 *                                     workspace track; the results stay operable).
 * The content is the same portal-panels.js node in both; its own layout is a container query, so it
 * reads as two columns in the dialog and one in the panel. rem only, --pt-* tokens.
 */
.br-detail-title { margin: 0; }                                  /* the dialog / panel heading (h2) */
.br-detail-title:focus:not(:focus-visible) { outline: none; }    /* focused by script on open only */
.br-detail-mode[aria-pressed="true"] { color: var(--pt-accent-strong); background: var(--pt-accent-bg); }

/* ── OVERLAY: a centred dialog over a scrim ── */
.br-detail-scrim { position: fixed; inset: 0; z-index: 29; background: var(--pt-scrim); }
.br-detail-scrim[hidden] { display: none; }
.br-detail.mode-overlay { position: fixed; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(64rem, calc(100vw - 2rem)); height: min(46rem, calc(100dvh - 2rem));
  border: .0625rem solid var(--pt-line); border-radius: var(--pt-radius-lg); overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .35); }

/* ── PHONE: the bottom sheet, its action strip fixed at the foot ── */
.br-detail.mode-overlay.is-sheet { top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%;
  height: calc(100dvh - 2.5rem); border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0; border-bottom: 0; }
.br-detail-foot { flex: none; display: flex; align-items: center; gap: .5rem; overflow-x: auto;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0rem));
  border-top: .0625rem solid var(--pt-line); background: var(--pt-surface); }
.br-detail-foot[hidden] { display: none; }
/* the Action Box card flattens back into ONE scrolling row here: no frame, no heading (the run is
   still the labelled group), every zone inline, the danger zone after a divider */
.br-detail-foot .pp-action-box { container-type: normal; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem;
  padding: 0; border: 0; border-radius: 0; background: none; }
.br-detail-foot .pp-action-box > * { flex: none; }
.br-detail-foot .pp-ab-title { display: none; }
.br-detail-foot .pp-ab-top, .br-detail-foot .br-ra-full, .br-detail-foot .br-ra-zone, .br-detail-foot .pp-ab-nav { display: flex; flex-direction: row;
  flex-wrap: nowrap; align-items: center; gap: .5rem; }
.br-detail-foot .br-ra-zone-danger { margin: 0; padding: 0 0 0 .5rem; border-top: 0; border-left: .0625rem solid var(--pt-line); }
.br-detail-foot .br-ra-item, .br-detail-foot .br-ra-zone > *, .br-detail-foot .pp-ab-top > * { flex: none; }
.br-detail-foot .br-ra-full .br-ra-btn { width: auto; white-space: nowrap; }
/* M3: the sheet's strip shows the bar actions only; the rest sit behind "More" (as .pf-foot) */
.br-detail-foot [data-ra-bar="0"], .br-detail-foot .pp-ab-note, .br-detail-foot .br-ra-state { display: none; }
.br-detail-foot .br-ra-zone:not(.br-ra-zone-more):not(:has([data-ra-bar="1"])) { display: none; }
.br-detail-foot .br-ra-zone-more { display: flex; position: sticky; right: 0; padding-left: .5rem; background: var(--pt-surface); }

/* ── PANEL: docked on the right of the results, non-modal ── */
.br-workspace.detail-docked { grid-template-columns: var(--br-rail-w, 0) minmax(0, 1fr) 28rem; }
.br-detail.mode-panel { position: relative; inset: auto; grid-column: 3; grid-row: 1; z-index: auto;
  border-left: .0625rem solid var(--pt-line); }
.br-detail.mode-panel .br-detail-scroll { padding: 1rem; }

/* "View full profile" (drawn only once the SHARED_PROFILE page is served, P6): a link-style button
   at the top of the Action Box card */
.br-detail-profile { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--pt-touch-min); text-decoration: none; color: var(--pt-accent-ink); }
.br-detail-profile:hover { text-decoration: underline; }

/* TV: the overlay only (never docked), a 70vw dialog */
html.ui-tv .br-detail.mode-overlay { width: 70vw; }

@media (prefers-reduced-motion: reduce) { .br-detail.mode-overlay, .br-detail-scrim { transition: none; } }