/* portal-actions.css — RECORD ACTIONS (docs/plans/2026-09-28-record-actions-design.md §8) and the
 * two small modals portal-actions.js opens (the confirm dialog, the "Save to folder…" chooser).
 * Loaded AFTER portal-browse.css (it reuses the --pt-* tokens, .br-btn and .br-icon-btn). REM-ONLY
 * (the lint gate fails on any px); every interactive element is >= 2.75rem in both axes. State is
 * carried by attributes (aria-pressed / aria-disabled / aria-busy) and never by colour alone: a
 * pressed toggle also gets a corner tick, a disabled one its reason in text / the title. */

/* ── the button run on a card (GRID / LIST / BRIEF) ── */
/* position: relative is load-bearing: a disabled button's sr-only reason (.br-sr, absolute) must
   have its containing block INSIDE the results scroller — .br-master is not positioned, so without
   it the span resolves against .br-workspace and, sitting far down the list, scrolls the DOCUMENT. */
.br-ra { position: relative; display: flex; align-items: center; gap: .25rem; }
.br-ra[hidden] { display: none; }
.br-ra-compact { flex-wrap: wrap; justify-content: flex-end; }
.br-ra-btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--pt-touch-min); min-height: var(--pt-touch-min); padding: 0; border-radius: var(--pt-radius-md);
  border: .0625rem solid var(--pt-line-2); background: var(--pt-surface-2); color: var(--pt-muted);
  font-size: .95rem; cursor: pointer; }
.br-ra-compact .br-ra-btn { width: var(--pt-touch-min); height: var(--pt-touch-min); }
.br-ra-btn:hover { color: var(--pt-text); border-color: var(--pt-accent-line); }
.br-ra-btn:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-ra-btn.is-primary { color: var(--pt-accent-ink); border-color: var(--pt-accent-line); }
/* a pressed toggle: tinted + a corner tick (not colour alone) */
.br-ra-btn[aria-pressed="true"] { background: var(--pt-accent-bg); color: var(--pt-tint-ink); border-color: var(--pt-accent-line); }
.br-ra-compact .br-ra-btn[aria-pressed="true"]::after { content: ""; position: absolute; top: .3rem; right: .3rem;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--pt-accent-strong);
  box-shadow: 0 0 0 .125rem var(--pt-surface); }
.br-ra-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.br-ra-btn.is-busy { opacity: .7; cursor: progress; }
.br-ra-mono { font-weight: 800; font-size: .85rem; }

/* GRID: the run sits under the card body; LIST: its own cell before Status; BRIEF: the row's end */
.gcard > .br-ra { padding: 0 .8rem .8rem; margin-top: auto; }
.lacts { display: flex; justify-content: flex-end; min-width: 0; }
.brow > .br-ra { flex: none; align-self: center; }

/* ── FULL mode: the labelled run inside the detail's Action Box card (portal-panels.css), in
   ZONES (owner, 2026-10-02: "one box, not loose rows"): the primary action full width on top, a
   grid of equal-width buttons, then the danger row (Report, Block) set apart and quieter. The
   grids drop to one column in a narrow card (the pp-actions container) and on a phone-width
   viewport. ── */
.br-ra-full { flex-direction: column; align-items: stretch; gap: .5rem; }
.br-ra-zone { display: grid; gap: .5rem; min-width: 0; }
.br-ra-zone-primary { grid-template-columns: minmax(0, 1fr); }
.br-ra-zone-main, .br-ra-zone-danger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-ra-zone-danger { margin-top: .25rem; padding-top: .75rem; border-top: .0625rem solid var(--pt-line); }
.br-ra-item { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.br-ra-full .br-ra-btn { width: 100%; justify-content: center; gap: .5rem; padding: .35rem .6rem; font-size: .85rem;
  font-weight: 600; line-height: 1.2; text-align: center; white-space: normal; color: var(--pt-text); background: var(--pt-surface); }
.br-ra-zone-primary .br-ra-btn { min-height: 3rem; font-size: .92rem; }
/* the danger row: quiet until hovered (its labels say what it does: never colour alone) */
.br-ra-zone-danger .br-ra-btn { background: transparent; color: var(--pt-muted); border-color: var(--pt-line); font-weight: 500; }
.br-ra-zone-danger .br-ra-btn:hover { color: var(--pt-bad); border-color: var(--pt-bad); }
@container pp-actions (max-width: 17.99rem) {
  .br-ra-zone-main, .br-ra-zone-danger { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .br-ra-zone-main, .br-ra-zone-danger { grid-template-columns: minmax(0, 1fr); }
}
.br-ra-full .br-ra-btn.is-primary { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
/* a pressed toggle keeps its tint in the overlay too (the rule above resets the background) */
.br-ra-full .br-ra-btn[aria-pressed="true"], .br-ra-full .br-ra-btn.is-primary[aria-pressed="true"] {
  background: var(--pt-accent-bg); color: var(--pt-tint-ink); border-color: var(--pt-accent-line); }
/* M3: "More" is drawn only inside a phone's bottom bar (portal-profile.css / portal-detail.css) */
.br-ra-zone-more { display: none; }
/* the "More actions" sheet: one column of full-width rows; Report / Block read as danger */
.br-ra-sheet-list { display: flex; flex-direction: column; gap: .5rem; }
.br-ra-sheet-item { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; width: 100%;
  min-height: var(--pt-touch-min); justify-content: flex-start; text-decoration: none; }
.br-ra-sheet-item.is-danger { color: var(--pt-bad); }
.br-ra-sheet-item .br-ra-reason { flex-basis: 100%; }
/* C1: an ON toggle with an undo label shows its state ("Interest sent") above the action */
.br-ra-state { display: inline-flex; align-items: center; gap: .35rem; color: var(--pt-good); font-size: .8rem; font-weight: 700; }
.br-ra-reason { font-size: .76rem; color: var(--pt-muted); line-height: 1.35; padding: 0 .15rem; }

/* ── modals: the confirm dialog + the folder chooser (fixed over the whole page, with a scrim) ── */
.br-ra-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: var(--pt-scrim); }
/* the box is tabindex=-1 only so a stray press keeps keys inside the dialog; it is never a visible stop */
.br-ra-modal:focus { outline: none; }
.br-ra-dialog { width: min(26rem, 100%); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; gap: .75rem;
  padding: 1.1rem 1.1rem 1rem; border-radius: var(--pt-radius-lg); background: var(--pt-surface); color: var(--pt-text);
  border: .0625rem solid var(--pt-line-2); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .3); }
.br-ra-dialog-head { display: flex; align-items: center; gap: .5rem; }
.br-ra-dialog-title { font-weight: 800; font-size: 1rem; flex: 1; min-width: 0; }
.br-ra-dialog-text { margin: 0; font-size: .88rem; line-height: 1.5; }
.br-ra-dialog-acts { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.br-ra-x { flex: none; }
.br-ra-input { width: 100%; min-height: var(--pt-touch-min); 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: .88rem; }
.br-ra-input:focus { outline: .125rem solid var(--pt-accent-strong); outline-offset: .0625rem; }
.br-ra-msg { font-size: .78rem; color: var(--pt-muted); min-height: 1rem; }
.br-ra-msg:empty { display: none; }
.br-ra-folders { display: flex; flex-direction: column; gap: .15rem; min-height: 0; overflow-y: auto; max-height: 16rem; }
.br-ra-folder { 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-md); background: transparent; color: var(--pt-text); font-size: .86rem;
  text-align: left; cursor: pointer; }
.br-ra-folder:hover { background: var(--pt-surface-2); }
.br-ra-folder:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: -.125rem; }
.br-ra-folder > i { width: 1.2rem; text-align: center; color: var(--pt-muted); }
.br-ra-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-ra-folder-n { font-size: .74rem; color: var(--pt-faint); font-variant-numeric: tabular-nums; }
.br-ra-empty { padding: .75rem; font-size: .8rem; color: var(--pt-muted); }
.br-ra-new { display: flex; gap: .5rem; align-items: center; padding-top: .5rem; border-top: .0625rem solid var(--pt-line); }
.br-ra-new .br-ra-input { flex: 1; min-width: 0; }
/* the input dialog (an action's `input`: a reason, its optional description, a text) */
.br-ra-inputs { overflow-y: auto; }
.br-ra-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; border: none; min-width: 0; }
.br-ra-legend, .br-ra-label { padding: 0; font-weight: 700; font-size: .88rem; }
.br-ra-req { font-weight: 400; color: var(--pt-muted); }
.br-ra-option { display: flex; align-items: center; gap: .6rem; min-height: var(--pt-touch-min); padding: 0 .5rem;
  border-radius: var(--pt-radius-md); font-size: .88rem; cursor: pointer; }
.br-ra-option:hover { background: var(--pt-surface-2); }
.br-ra-radio { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--pt-accent-strong); }
.br-ra-radio:focus-visible { outline: .125rem solid var(--pt-accent-strong); outline-offset: .125rem; }
.br-ra-textarea { min-height: 6rem; padding: .6rem .75rem; resize: vertical; line-height: 1.45; font-family: inherit; }
.br-ra-textarea[aria-invalid="true"] { border-color: var(--pt-bad); }
.br-ra-help, .br-ra-count { font-size: .76rem; color: var(--pt-muted); }
.br-ra-count { text-align: right; font-variant-numeric: tabular-nums; }
.br-ra-count.is-over { color: var(--pt-bad); font-weight: 700; }
.br-ra-err { font-size: .8rem; color: var(--pt-bad); font-weight: 600; }
.br-ra-err[hidden] { display: none; }
.br-ra-hint { color: var(--pt-muted); font-size: .8rem; }

@media (max-width: 47.99rem) {
  .br-ra-input { font-size: 1rem; }               /* 14px triggers iOS focus-zoom */
}
@media (prefers-reduced-motion: reduce) {
  .br-ra-btn, .br-ra-modal { transition: none; }
}