/* Jar label maker: form styling on top of safe.css, and the sheet preview.
   The sheet and label geometry (sizes, positions, @page, print rules) is
   print-accurate for Avery 5160/8160, 5163/8163 and L7160: style the labels'
   type and colour, never their boxes. */

.tool.labels { --method: var(--olive); --method-soft: rgba(111, 122, 79, .10); }
.tool fieldset + fieldset { border-top: 1px dashed var(--line); margin-top: 1.1rem; padding-top: 1rem; }
.tool fieldset > label { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tool legend { position: static; width: 100%; clip: auto; height: auto; overflow: visible; white-space: normal; }
.tool input[name="contents"] { min-width: 14rem; font-size: 1.15rem; flex: 1; }
.tool input[type="date"] { min-width: 10rem; }
.tool input[type="number"] { min-width: 6rem; width: 7rem; }
.tool .check { flex-direction: row; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); font-weight: 600; align-self: center; }
.tool .check input { min-width: 0; width: 1.2rem; height: 1.2rem; accent-color: var(--olive); }
.tool .actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; padding: 1.1rem 1.25rem 0; margin: 0; }
.tool .actions .btn { margin: 0; }
p#label-status.result { margin-top: 1rem; font-weight: 600; color: var(--ink); }

/* The preview: sheets of paper on the cream page. */
.label-sheets, #sheets { margin: 1.5rem 0; }
.sheet-wrap { width: 100%; overflow: hidden; margin: 0 0 1.25rem; }
.sheet { position: relative; background: #fff; box-shadow: 0 1px 2px rgba(36,59,58,.08), 0 14px 34px -14px rgba(36,59,58,.35); transform-origin: top left; outline: 1px solid var(--line); }
.label { position: absolute; display: flex; align-items: center; gap: 4%; padding: 0 4%; overflow: hidden; outline: 1px dashed #d8ccb4; color: #111; font-family: Georgia, 'Times New Roman', serif; }
.label.blank { background: transparent; }
.label-text { flex: 1; min-width: 0; line-height: 1.15; }
.label-text > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-text .l-contents { font-weight: 700; font-size: 1.15em; }
.label-text .l-canned, .label-text .l-bestBy, .label-text .l-batch, .label-text .l-method { font-size: .78em; color: #333; }
.label-qr { flex: none; }

@media (max-width: 480px) {
  .tool fieldset > label { width: 100%; }
  .tool input[name="contents"], .tool input[type="date"], .tool input[type="number"] { width: 100%; min-width: 0; }
  .tool .actions { padding-left: 1rem; padding-right: 1rem; }
}

@media print {
  body { background: #fff !important; }
  body > *:not(main), main > *:not(article), article > *:not(#sheets) { display: none !important; }
  .container { max-width: none; padding: 0; }
  #sheets { margin: 0; }
  .sheet-wrap { height: auto !important; margin: 0; overflow: visible; break-after: page; }
  .sheet { transform: none !important; box-shadow: none; outline: none; }
  .label { outline: none; }
}