/* Labels (app/labels.js): on-screen preview, and print layout for 2 × 5 label sheets.
   US Letter: 4 × 2 in labels (Avery 5163 / 8163 layout). A4: 99.1 × 57 mm labels (Avery L7173 layout).
   Print at 100% scale ("Actual size"), margins "None" or "Default" (the page sets its own). */

/* ---------- Screen preview ---------- */
.lbl-pick { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.lbl-pick legend { padding: 0; margin-bottom: 6px; }
.lbl-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin-top: 8px; }
.lbl-page { display: contents; }
.lbl {
  display: flex; gap: 10px; align-items: stretch; aspect-ratio: 2 / 1; min-width: 0; overflow: hidden;
  background: var(--surface); color: var(--ink); border: 1.5px dashed var(--line); border-radius: 10px; padding: 10px;
  box-sizing: border-box;
}
.lbl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lbl-name {
  font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; line-height: 1.1; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lbl-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .82rem; color: var(--muted); }
.lbl-sub .badge { font-size: .7rem; padding: 1px 7px; }
.lbl-gen { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lbl-rows { margin-top: auto; display: grid; gap: 2px; font-size: .8rem; }
.lbl-row { display: flex; gap: 6px; align-items: baseline; }
.lbl-k { color: var(--muted); min-width: 5.5em; }
.lbl-v { font-family: var(--f-mono); font-weight: 600; }
.lbl-blank { display: inline-block; width: 6em; height: .9em; border-bottom: 1px solid currentColor; opacity: .5; }
/* QR codes scan best dark-on-light, so the code always sits on white whatever the look. */
.lbl-qr { flex: none; height: 100%; aspect-ratio: 1; background: #fff; color: #000; border-radius: 6px; padding: 3px; box-sizing: border-box; }
.lbl-qr svg { display: block; width: 100%; height: 100%; }

/* ---------- Print ---------- */
/* Named pages (CSS `page`) give label sheets zero margins without changing how other pages print. */
@page lbl-letter { size: letter; margin: 0; }
@page lbl-a4 { size: A4; margin: 0; }

@media print {
  .topbar, .tabs, .fab, .no-print, .toast, #toast, dialog, .sheet, .sync-pill { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; }
  main, #view { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }

  .lbl-sheet { display: block; margin: 0; gap: 0; }
  .lbl-page {
    display: grid; box-sizing: border-box; overflow: hidden; break-after: page; page-break-after: always; break-inside: avoid;
  }
  .lbl-page:last-child { break-after: auto; page-break-after: auto; }
  .lbl-sheet[data-paper="letter"] .lbl-page {
    page: lbl-letter; width: 8.5in; height: 10.95in; padding: .5in .15625in 0;
    grid-template-columns: 4in 4in; grid-auto-rows: 2in; column-gap: .1875in;
  }
  .lbl-sheet[data-paper="a4"] .lbl-page {
    page: lbl-a4; width: 210mm; height: 296mm; padding: 6mm 4.65mm 0;
    grid-template-columns: 99.1mm 99.1mm; grid-auto-rows: 57mm; column-gap: 2.5mm;
  }

  .lbl {
    aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; margin: 0;
    background: #fff !important; color: #000 !important;
    border: 0; outline: .5pt dashed #888; outline-offset: -.5pt; /* cut lines */
    padding: .14in .16in; gap: .12in;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .lbl-name { font-size: 16pt; }
  .lbl-sub { font-size: 9.5pt; color: #333 !important; }
  .lbl-sub .badge { font-size: 7.5pt; }
  .lbl-gen { font-size: 7pt; }
  .lbl-rows { font-size: 9pt; }
  .lbl-k { color: #444 !important; }
  .lbl-qr { padding: 0; border-radius: 0; }
}