@page { size: 8.5in 11in; margin: 0; }
html, body { margin: 0; padding: 0; }
body { font-family: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; color: #000; background: #ddd; }
.controls { background: #fff; padding: 0.6rem 1rem; border-bottom: 1px solid #aaa; font-size: 14px; }
.controls h1 { font-size: 1.1rem; margin: 0.3rem 0; }
.instructions { border: 1px solid #c90; background: #fff8e0; padding: 0.4rem 0.6rem; margin: 0.4rem 0; }
.row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin: 0.4rem 0; }
.muted { color: #666; } .error { color: #b00; } .error:empty { display: none; }
#start { width: 4rem; }
.sheet-map { display: inline-grid; gap: 2px; background: #999; padding: 2px; }
.sheet-map button { font-size: 10px; min-width: 2.4rem; height: 1.2rem; padding: 0; border: 0; background: #fff; cursor: pointer; }
.sheet-map button.used { background: #bbb; color: #666; text-decoration: line-through; }
.sheet-map button.start { background: #2b6; color: #fff; font-weight: bold; }
#pages { padding: 0.5in 0; }
.page { position: relative; background: #fff; margin: 0 auto 0.4in; overflow: hidden; box-shadow: 0 0 6px rgba(0,0,0,.4); break-after: page; page-break-after: always; }
.page:last-child { break-after: auto; page-break-after: auto; }
.lbl { position: absolute; box-sizing: border-box; overflow: hidden; background: #fff; }
.lbl .inner { position: absolute; left: 0.08in; right: 0.08in; top: 0.05in; bottom: 0.04in; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.lbl .top { width: 100%; display: flex; gap: 0.06in; align-items: baseline; font-size: 7.5pt; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.lbl .kind { font-weight: 700; letter-spacing: 0.04em; font-size: 6pt; border: 0.5pt solid #000; padding: 0 0.03in; flex: none; }
.lbl .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lbl .id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 11pt; line-height: 1; letter-spacing: 0.06em; }
.lbl svg.bc { display: block; flex: none; }
.lbl.big .inner { left: 0.25in; right: 0.25in; top: 0.2in; bottom: 0.2in; }
.lbl.big .head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.2in; }
.lbl.big .kind { font-size: 12pt; padding: 0.02in 0.08in; border-width: 1pt; }
.lbl.big .id { font-size: 54pt; letter-spacing: 0.02em; margin-top: 0.08in; }
.lbl.big .bigtext { width: 100%; font-size: 18pt; line-height: 1.2; max-height: 3.6em; overflow: hidden; overflow-wrap: anywhere; }
.lbl.big .alias { font-size: 10pt; color: #333; }
.lbl.big .qrnote { font-size: 7pt; text-align: center; }
.outline { outline: 0.5pt dashed #bbb; outline-offset: -0.5pt; }
/* alignment test */
.cell { position: absolute; box-sizing: border-box; border: 0.5pt solid #000; }
.cell::before { content: ""; position: absolute; left: 50%; top: 15%; bottom: 15%; border-left: 0.5pt solid #000; }
.cell::after { content: ""; position: absolute; top: 50%; left: 30%; right: 30%; border-top: 0.5pt solid #000; }
.cell .num { position: absolute; left: 0.08in; top: 0.04in; font: 700 14pt ui-monospace, Menlo, monospace; }
.cell .dims { position: absolute; right: 0.06in; bottom: 0.03in; font-size: 6pt; color: #333; }
.ruler { position: absolute; height: 0.16in; border-bottom: 0.75pt solid #000; }
.ruler .tick { position: absolute; bottom: 0; border-left: 0.75pt solid #000; height: 0.16in; }
.ruler .tick.minor { height: 0.08in; }
.ruler .cap { position: absolute; left: 0; top: -0.13in; font-size: 6.5pt; white-space: nowrap; }
.testnote { position: absolute; font-size: 7pt; color: #333; }
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  #pages { padding: 0; }
  .page { margin: 0; box-shadow: none; }
  .outline { outline: none; }
}