/* View-once links and QR codes (public/viewonce.js). Tokens only, so every theme dresses it;
   the one exception is the code itself, which is black on white in every theme — a reversed
   QR code is one many phone cameras refuse to read. */

/* ---- the QR dialog ---- */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.qr-box {
  width: min(320px, 100%); aspect-ratio: 1; padding: 0; line-height: 0; cursor: zoom-in;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.qr-box svg { display: block; width: 100%; height: 100%; }
.qr-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Full screen: the biggest square that fits, on white edge to edge, for showing across a room. */
.qr-box:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; display: grid; place-items: center; cursor: zoom-out; }
.qr-box:fullscreen svg { width: min(92vw, 92vh); height: min(92vw, 92vh); }
.qr-url { max-width: 100%; font-family: var(--font-meta); font-size: var(--fs-md); color: var(--mut); word-break: break-all; }
.qr-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---- the Shared view's pill ---- */
.sh-once { color: var(--accent); }
.sh-once-used { color: var(--faint); }
.share-row .s-qr { flex: none; }
/* The address and its end date stacked in one column beside the buttons, so the address gets the
   row's whole free width instead of a sliver (app.js shareModal rowHTML). */
.share-row .share-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.share-row .share-main .share-url { max-width: none; min-width: 0; }
.share-row .share-main .share-exp { white-space: normal; }