/*
  Barcode generator: the parts app.css cannot cover.

  Two things are special here. First, a barcode is always black on white, in
  every theme - a scanner reads reflectance, not your colour scheme, so the
  preview sits on real paper white even in dark mode. Second, the sticker sheet
  is laid out in millimetres and must come out of the printer at exactly that
  size, so nothing between the mm value and the paper is allowed to scale it.
*/

/* ---------- controls ---------- */

.setting-row .hint {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

.bc-btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bc-histempty { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }

/* ---------- single preview ---------- */

.bc-paper {
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 26px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  margin-bottom: 22px;
}
.bc-paper svg { display: block; max-width: 100%; height: auto; }

/* The encoded value can be long; it must not blow the stat cell apart. */
#bc-stats .stat:last-child b { font-size: 13px; line-height: 1.35; word-break: break-all; }

/* ---------- sticker sheet ---------- */

.bc-sheetwrap { margin-top: 26px; }

.bc-sheetnote { font-size: 13px; color: var(--ink-2); margin: 0 0 14px; }

/* The sheet is drawn at true size and only shrunk on screen, never in print. */
.bc-sheets {
  transform: scale(var(--bc-scale, 1));
  transform-origin: top left;
  overflow: hidden;
}

.bc-sheet {
  position: relative;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(13, 27, 42, 0.16);
  margin-bottom: 14px;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.bc-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6mm;
  overflow: hidden;
  /* a hairline so the grid is visible against the backing sheet on screen */
  outline: 0.2mm dashed rgba(13, 27, 42, 0.22);
  outline-offset: -0.2mm;
}
.bc-label.is-tight { outline-color: rgba(214, 34, 70, 0.55); }

.bc-cap {
  font-family: var(--mono);
  color: #000000;
  line-height: 1.1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bc-art { line-height: 0; }
.bc-art svg { display: block; }

/* ---------- print ---------- */
/*
  @page carries the sheet size; it is written by the JS into #bc-pagestyle
  whenever the sticker sheet changes, because the size is data, not styling.
*/

@media print {
  html, body { background: #ffffff; }

  #site-nav, #site-promise, .controls, #bc-empty, #bc-stats,
  .bc-screenonly { display: none !important; }

  .layout { display: block; min-height: 0; }
  .stage { padding: 0; }

  /*
    Ctrl-P should print something sensible whatever the user has done: the one
    barcode if that is all there is, the sticker sheet once they have built one.
  */
  body.bc-has-sheet #bc-single { display: none !important; }
  body:not(.bc-has-sheet) .bc-sheetwrap { display: none !important; }

  .bc-paper { border: 0; padding: 0; justify-content: flex-start; overflow: visible; }
  .bc-paper::before, .bc-paper::after,
  .bc-paper > .tick-b::before, .bc-paper > .tick-b::after { display: none; }

  .bc-sheetwrap { margin: 0; }
  .bc-sheets { transform: none !important; height: auto !important; overflow: visible; }

  .bc-sheet {
    box-shadow: none;
    margin: 0;
    break-after: page;
    page-break-after: always;
  }
  .bc-sheet:last-child { break-after: auto; page-break-after: auto; }

  /* Cut guides are for the screen. On paper they land on the sticker. */
  .bc-label { outline: 0; }
}