/* DE: „Wörterliste teilen" (/liste, ADR 0083). Ein Teilen-Block (scanbarer QR auf weißer Kachel + Link als Text
   + Druck) über einem Karten-Grid (die Karten stylt wortspeicher.css). Sichtbarer Fokus, kein Farb-nur-Zustand;
   im Druck bleibt nur das Karten-Grid (die „Wörter-Fahrkarte").
   EN: „Share a word list" (/liste, ADR 0083). A share block (scannable QR on a white tile + link as text +
   print) above a card grid (the cards are styled by wortspeicher.css). Visible focus, no colour-only state; in
   print only the card grid remains (the „word ticket"). */

.shared-list{margin-block-start:var(--sp-lg)}
.shared-list__head{margin-block-end:var(--sp-md)}

.shared-list__share{display:flex;flex-wrap:wrap;gap:var(--sp-lg);align-items:flex-start;
  margin-block-end:var(--sp-lg)}
/* The QR always scans: dark modules on a WHITE tile, regardless of the page theme. */
.shared-list__qr{background:#fff;padding:var(--sp-sm);border:1px solid var(--border);border-radius:var(--radius-md)}
.shared-list__qr svg{inline-size:9rem;block-size:9rem;display:block}
.shared-list__link{flex:1 1 16rem;min-inline-size:14rem}
.shared-list__count{font-weight:700;font-size:var(--step-1);margin:0}
.shared-list__note{color:var(--text-muted);font-size:var(--step--1);margin-block:var(--sp-2xs) var(--sp-sm)}
.shared-list__url-label{display:block;font-size:var(--step--1);color:var(--text-muted);margin-block-end:var(--sp-2xs)}
.shared-list__url{inline-size:100%;padding:var(--sp-xs);border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:var(--step--1)}
.shared-list__url:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.shared-list__keep{margin-block-start:var(--sp-sm)}
.shared-list__keep-status{margin-block-start:var(--sp-2xs);color:var(--text-muted);font-size:var(--step--1)}
/* A word already in „Meine Wörter" gets a quiet marker (not colour alone — a left accent + the aria-pressed
   state on any toggle). */
.shared-list .wortspeicher-card.is-kept{border-inline-start:3px solid var(--link)}

.shared-list__grid{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--sp-md)}
.shared-list__empty{margin-block-start:var(--sp-lg);color:var(--text-muted);font-size:var(--step-1)}

@media print{
  .shared-list__share{display:none}
}