/* ============================================================================
   T348: the personal link. Layout only: every element is the standard's
   (cx-sec, cx-card, cx-field, cx-input, cx-btn, cx-pill, cx-note, cx-small on the
   consoles; the renderers' own checkbox on the member pages). What is here is
   the arrangement those elements do not carry: a link and its copy button on
   one line that folds on a phone, a long address that never widens the page,
   and the sharing block's spacing inside the gate and the signup form.
   ========================================================================== */

/* ---- the share block (the two clients pages) ---- */
.pl-stack { display: flex; flex-direction: column; gap: var(--cx-s-4, 16px); min-width: 0; }
/* the link and its copy button: the container's grid places them, so no property of
   the standard's field, input or button comes from this sheet */
.pl-row__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cx-s-2, 8px); align-items: stretch; }
.pl-card__foot { display: flex; flex-wrap: wrap; gap: var(--cx-s-3, 12px); align-items: center; justify-content: space-between; }
.pl-card__warn { margin: 0; }
/* the block is a section of the page, and what follows it is the next one: the
   slot is a wrapper, so the base's own pair rule (`.cx-sec + *`) never saw the
   table under it and the two touched (T348c, the operator's eye). The gap is the
   slot's own, so no standard element is restyled. */
.cx-page [data-pl-slot] { margin-bottom: var(--cx-s-6, 32px); }
.cx-page [data-pl-slot]:empty { margin-bottom: 0; }
/* on a phone the line folds and its button takes the full width through the
   layout (a column stretches its children); the button itself stays the
   standard's, whose phone height is already 44 px */
@media (max-width: 480px) {
  .pl-row__line { grid-template-columns: minmax(0, 1fr); }
  .pl-card__foot { flex-direction: column; align-items: stretch; }
  /* the count stays a pill: its own wrapper takes the column's stretch, not the pill (T348c) */
  .pl-card__count { display: block; }
}

/* ---- the sharing block (the scan's gate, both renderers, and the signup) ---- */
.pl-ref { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; min-width: 0; overflow-wrap: anywhere; }
.pl-ref__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.pl-ref__box { min-height: 44px; align-items: flex-start; }
.pl-ref__box input[type="checkbox"] { flex: 0 0 auto; }
.pl-ref__help { margin: 0; font-size: 0.875rem; line-height: 1.45; opacity: 0.85; }
.pl-ref--note { margin: 4px 0; font-size: 0.9375rem; line-height: 1.45; }
.pl-outcome { margin: 0 0 16px; overflow-wrap: anywhere; }

/* T348b: "try again" on a link that could not be checked or a choice that could
   not be saved, and the line that says what the claim did with a scan's tick */
.pl-ref__retry { min-height: 44px; align-self: flex-start; }
.pl-announce { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; overflow-wrap: anywhere; }
.pl-announce:empty { display: none; }
/* T348c: what the link did is the one thing the client came to this page to learn, and it was a
   bare line of text above the page's title. It is a notice: the system's wash, its radius, its small text. */
.pl-announce__line { margin: 0; padding: 12px 16px; border-radius: var(--r-md, 12px); background: var(--bp-teal-08, #eef3f3);
  color: var(--ink, #14302d); font-size: var(--t-sm, 0.9375rem); line-height: 1.5; }