/* ═══ Label printer ══════════════════════════════════════════════
   One DOM, two jobs: the preview you see on screen IS what prints. Everything on
   a label is sized in millimetres (js/labelsheet.js), so it prints at the size it
   says whatever the screen is doing.

   Labels are paper: always black on white, whatever the app's theme.
   ═══════════════════════════════════════════════════════════════ */

.label-opts{display:grid;gap:0 12px}
@media (min-width:720px){.label-opts{grid-template-columns:1fr 1fr}}

.preview-wrap{display:flex;flex-direction:column;gap:20px;align-items:center;
  padding:16px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden}
/* The pages are real millimetres, wider than a phone. The wrapper takes the room
   they will occupy once scaled; the page inside scales from its top-left corner. */
.page-box{position:relative;width:calc(var(--pw) * var(--k,1));height:calc(var(--ph) * var(--k,1));flex:none}
.label-page{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k,1));
  width:var(--pw);height:var(--ph);background:#fff;color:#000;box-shadow:var(--shadow-3);
  overflow:hidden}
.label-grid{display:grid;width:100%;height:100%;align-content:start}

.label{position:relative;overflow:hidden;background:#fff;color:#000;box-sizing:border-box;
  display:flex;align-items:center}
.label .qr{flex:none}
.label .qr svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.label .txt{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.4mm;overflow:hidden}
.label .tg{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:800;
  letter-spacing:.02em;line-height:1.05;white-space:nowrap}
.label .nm{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:600;
  line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.label .co{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.15;color:#333;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.label.blank .nm{color:#555;font-weight:500}
.guides .label{outline:.2mm dashed #b8b8b8;outline-offset:-.2mm}

.url-warn{margin-top:-6px}

/* ── print: only the pages ── */
@media print{
  html,body{height:auto;background:#fff !important}
  .sidebar,.topbar,nav.tabs,#toasts,.no-print,.sheet-bg{display:none !important}
  /* Everything on this screen except the pages: the summary, the paper and cut-guide
     options, the address banner, the print button. Listing them by class missed three
     of them once, and a single stray inch above the first label pushes every row of
     labels off its sticker and each page onto a second sheet. */
  #view > :not(.preview-wrap){display:none !important}
  .app,.app-main{display:block !important}
  main{padding:0 !important;max-width:none !important;margin:0 !important}
  .preview-wrap{padding:0 !important;gap:0 !important;border:0 !important;background:none !important;display:block}
  .page-box{width:var(--pw) !important;height:var(--ph) !important;break-after:page;page-break-after:always}
  .page-box:last-child{break-after:auto;page-break-after:auto}
  .label-page{transform:none !important;box-shadow:none !important;position:relative}
  .guides .label{outline:none}
}