/* "Who can see this?" (public/reach.js): the Access row in the details panel and the panel itself.

   Its own sheet, like activity.css: one feature's rules kept out of the file every page shares.
   It declares no tokens — every colour, radius and size is one of styles.css's, so every theme
   dresses it without knowing it exists. The panel is an ordinary modal(); only the rows are new. */

/* ---- the details-panel row ---- */
.rch-sum {
  padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text);
  cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.rch-sum:hover { text-decoration: underline; }
.rch-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2xs); }

/* ---- the panel ---- */
.modal.rch-modal { width: 560px; }
.rch { container-type: inline-size; }
.rch-lead { margin: 0 0 12px; font-size: var(--fs-base); color: var(--text2); line-height: 1.5; }
.rch-sec { margin: 0 0 14px; }
.rch-sec h4 {
  margin: 0 0 2px; font-family: var(--font-meta); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  text-transform: var(--label-case); letter-spacing: .06em; color: var(--faint);
}
.rch-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.rch-row { display: flex; align-items: center; gap: 10px; padding: calc(8 * var(--sp)) 0; min-width: 0; transition: opacity .2s; }
.rch-row + .rch-row { border-top: 1px solid var(--line); }
.rch-row .avatar { --av: 28px; flex: none; }
.rch-ic {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip); color: var(--mut);
}
.rch-ic svg { width: 15px; height: 15px; }
/* A link with no lock is the one entry anybody at all can use; it is marked, quietly. */
.rch-ic.open { color: var(--sun); }
.rch-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rch-mid b {
  font-size: calc(var(--fs-base) + var(--fs-half)); font-weight: var(--fw-semi); color: var(--text);
  overflow-wrap: anywhere; line-height: 1.3;
}
.rch-mid .pp-sub { overflow-wrap: anywhere; line-height: 1.4; }
.rch-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.rch-acts .btn { height: 30px; padding: 0 12px; font-size: var(--fs-md); }
.rch-out:hover { color: var(--danger); border-color: var(--danger-ring); }
.rch-row.rch-gone { opacity: .35; pointer-events: none; }
.rch-more { margin: 6px 0 0; }
.rch-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Narrow (the phone's bottom sheet): the buttons go UNDER the words. Beside them, QR + Copy +
   Remove took half the width and squeezed each row's words to four or five lines. */
@container (max-width: 480px) {
  .rch-row { gap: 8px; flex-wrap: wrap; }
  .rch-mid { flex-basis: calc(100% - 38px); }
  .rch-acts { margin-left: 36px; }
  .rch-acts:empty { display: none; }
  .rch-acts .btn { padding: 0 10px; }
  .rch-acts .iconbtn { width: 30px; height: 30px; }
  .rch-list { max-height: none; }
  .rch-foot .btn { flex: 1 1 auto; }
}