/* label.css — shared label styling.
   Source of truth for both the interactive app (index.html) and the
   Node render-check (render.cjs). Dimensions are driven by CSS variables
   (--label-w / --label-h / --label-scale) so the size is selectable, and
   physical units keep print exact. Defaults: 4x1in. */

.label {
  --label-w: 4in;
  --label-h: 1in;
  --label-scale: 1;       /* multiplies font sizes; app sets it from height */
  /* Square code / thumb edge: bounded by height AND a fraction of width so the
     text column survives on short, narrow labels. */
  --code-size: min(calc(var(--label-h) - 0.14in), calc(var(--label-w) * 0.26));

  box-sizing: border-box;
  width: var(--label-w);
  height: var(--label-h);
  display: flex;
  align-items: stretch;
  gap: 0.09in;
  padding: 0.06in 0.08in;
  background: #ffffff;
  color: #111111;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

/* Code slot: square for 2D (QR / Data Matrix), wider for 1D barcodes. */
.label__code {
  flex: 0 0 auto;
  align-self: center;
  height: var(--code-size);
}
.label__code--square { width: var(--code-size); }
/* 1D: barcode spans the full width of the meta column and fills the height left
   after the title/brand lines. preserveAspectRatio="meet" keeps it scannable. */
.label__code--wide {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
}
.label__code svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

.label__code-error {
  font-size: calc(6pt * var(--label-scale));
  color: #b00020;
  line-height: 1.1;
  width: 100%;
  align-self: center;
  overflow: hidden;
}

.label__thumb {
  flex: 0 0 auto;
  width: var(--code-size);
  height: var(--code-size);
  align-self: center;
  object-fit: cover;
  border: 0.5pt solid #d0d0d0;
  border-radius: 0.03in;
  background: #f4f4f4;
}

.label__meta {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.03in;
}
/* 1D layout: title pinned to top, barcode grows to fill, brand at bottom. */
.label__meta--1d { justify-content: stretch; }
.label__meta--1d .label__title { flex: 0 0 auto; -webkit-line-clamp: 1; }
.label__meta--1d .label__brand { flex: 0 0 auto; }
.label__meta--1d .label__code--wide { align-self: stretch; }

/* Stacked layout: tall/portrait labels (e.g. 4×6). Centered column that fills
   the vertical space — code on top, image, then title / SKU / brand. */
.label--stacked {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--label-h) * 0.025);
  padding: calc(var(--label-h) * 0.045) calc(var(--label-w) * 0.05);
  --stack-code: min(calc(var(--label-w) * 0.62), calc(var(--label-h) * 0.4));
  --stack-img:  min(calc(var(--label-w) * 0.5),  calc(var(--label-h) * 0.28));
}
.label--stacked .label__code { flex: 0 0 auto; height: auto; align-self: center; }
.label--stacked .label__code--square { width: var(--stack-code); height: var(--stack-code); }
.label--stacked .label__code--wide { width: 92%; height: auto; }
.label--stacked .label__thumb { width: var(--stack-img); height: var(--stack-img); object-fit: contain; }
.label--stacked .label__meta {
  flex: 0 0 auto; width: 100%;
  align-items: center; justify-content: flex-start;
  gap: calc(var(--label-h) * 0.012);
}
.label--stacked .label__title {
  font-size: calc(11pt * var(--label-scale));
  -webkit-line-clamp: 4; text-align: center;
}
.label--stacked .label__sku { white-space: normal; overflow: visible; text-align: center; }
.label--stacked .label__brand { white-space: normal; overflow: visible; text-align: center; }

.label__title {
  font-size: calc(9pt * var(--label-scale));
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.label__sku {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  /* --sku-fs is computed to fit the SKU on one line; falls back to the scale. */
  font-size: var(--sku-fs, calc(11pt * var(--label-scale)));
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label__brand {
  /* Floor at 6pt: below that, thin strokes (the I's in INITIATIVE) drop out on
     thermal/laser printers. Solid dark + medium weight — gray dithers in print. */
  font-size: max(6pt, calc(5.5pt * var(--label-scale)));
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #222222;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.label__brand-name { text-transform: uppercase; }
.label__brand-url { text-transform: none; font-weight: 500; color: #333333; }

/* Text template: code-free centered block. Sizes come from --headline-fs /
   --body-fs (computed to fit); brand line reuses --label-scale like everywhere. */
.label--text {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--label-h) * 0.04);
  padding: 0.06in 0.14in;
}
.label--text .label__meta--text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--label-h) * 0.05);
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.label__headline {
  font-size: var(--headline-fs, calc(15pt * var(--label-scale)));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.2px;
  margin: 0;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.label__body {
  font-size: var(--body-fs, calc(8.5pt * var(--label-scale)));
  font-weight: 400;
  line-height: 1.25;
  color: #333333;
  margin: 0;
  width: 100%;           /* so text-align (left/center/right) is meaningful */
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.label--text .label__brand {
  white-space: normal;
  overflow: visible;
  text-align: center;
  margin-top: calc(var(--label-h) * 0.02);
}