/* barcode.css — /generators/barcode/ */

.bc-stage {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Clears the sticky header, which would otherwise cover the top of the result
   when a phone scrolls to it after Generate. */
#result { scroll-margin-top: 4.5rem; }

.bc-terms {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: .5rem;
}

.bc-hint { font-weight: 400; color: var(--text-muted); }

.bc-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 1.5rem 1rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.bc-preview img { max-width: 100%; height: auto; display: block; }
.bc-empty { color: var(--text-muted); font-size: .875rem; }

#fix-row { margin-bottom: 1rem; }

/* The status line wraps to two rows on a phone; keep the verdict on its own
   line so it stays the thing the eye lands on. */
#status .status-flag { margin-left: auto; }

/* ===== PRINT =====
   Everything but the barcode is furniture. The SVG is written into #print-area
   with its size in millimeters, so the sheet carries the real physical code. */
#print-area { display: none; }

/* Fixed margins make the printable width known in advance — 190 mm on A4
   portrait — so barcode.js can warn before a code outgrows it. */
@page { margin: 10mm; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area {
    display: block;
    margin: 0;
    background: #fff;
  }
  /* Scaled down rather than clipped: a code cut at the page edge does not
     scan at all, a smaller one usually still does. */
  #print-area svg { display: block; max-width: 100%; height: auto; }
}

/* STACKED_QUERY in barcode.js must match this breakpoint. */
@media (max-width: 860px) {
  .bc-stage { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  #status .status-flag { margin-left: 0; }
}