/* ============================================================================
   25o-plany-miniatura.css — OKNO PLANY, zakładka „Konstrukcje”: miniatura prezentacji przy konstrukcji (wzór: Plany.html v155,
   okna_css.txt B47). Tokeny artefaktu → programu: --linia = --line, --pow-3 = --surface-3, --tusz-2/-3 = --text-muted/-faint,
   --ak = --accent, --r-s = --r-sm, --t-2 = --t-sm, --t-1 = --t-xs. Szerokość: komputer 96, tablet 80, telefon poziomo 64 (telefon pion: 9-telefon/2e).
   Skrypt: js/okna/plany-miniatura.js.
   ============================================================================ */
.pln-min { position: relative; flex: none; display: grid; place-items: center; width: 96px; aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-faint); font: inherit; font-size: var(--t-sm); font-weight: var(--w-strong); overflow: hidden; cursor: zoom-in; }
.pln-min > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pln-min:hover { border-color: var(--accent); }
.pln-min:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pln-min.brak { cursor: default; }
.pln-min.brak:hover { border-color: var(--line); }
.pln-min.brak > .icon { width: 16px; height: 16px; }
.pln-min-i { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text-muted); }
.pln-min-i > .icon { width: 12px; height: 12px; }
.pln-min-n { position: absolute; left: 4px; top: 4px; padding: 0 var(--s-1); border-radius: var(--r-sm); background: var(--miniatura-licznik-tlo); color: var(--miniatura-licznik-tekst); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 16px; }
:root[data-ui="tablet"] .pln-min { width: 80px; }