/* The Labels door (/labels, /labels/service; SC-20260927-08, R2): Label Lab on the core.
   The page is built from the HAZCHEM builder's own classes in /styles.css (.hazchem-layout,
   .custom-form, .wiz-step-heading, .hz-layout-toggle/.hz-layout-opt/.hz-orient-opt, .hz-chip,
   .hz-check, .hazchem-disclaimer/.hz-ack-check, .hz-add-btn, .hazchem-stage, .hz-size-caption,
   .hz-picto-warning, .delivery-opt, .custom-price, .hazchem-hints-details) so the two doors read
   as one site. This file only adds what the label tools need on top (the step pills, tiles,
   canvas stage, drag handles, swatches) and ONLY with the Sign Central tokens: green #0e4423,
   deep #082d17, lime #70bc1f, paper #fbfaf6, tint #eef7e4, ink #1e2621. No brick, no teal. */

.labels-door .ll-head { align-items: center; }
.labels-door .ll-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.labels-door .ll-logo { width: 104px; height: auto; flex: none; filter: drop-shadow(0 4px 8px rgba(8,45,23,.18)); }
.labels-door .ll-head h2 { color: var(--brand); }
.labels-door .ll-indicative { font-size: 11px; }

/* Layout: the HAZCHEM two-column grid, a little wider on the left for the label tools. */
.ll-layout { grid-template-columns: 440px 1fr; }
@media (max-width: 900px) { .ll-layout { grid-template-columns: 1fr; } }

/* Step pills (the wizard's five steps), lime when current, ticked when done. */
.ll-steps { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ll-step-pill { width: 100%; font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.15; padding: 6px 4px; border-radius: 10px; border: 2px solid var(--hz-field-border); background: transparent; color: var(--hz-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ll-step-pill span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--hz-text); font-size: 11px; }
.ll-step-pill.done { color: var(--hz-text); border-color: var(--hz-accent-dark); }
.ll-step-pill.done span { background: var(--hz-accent-dark); color: var(--hz-accent-text); }
.ll-step-pill.current { background: var(--hz-accent); border-color: var(--hz-accent-dark); color: var(--hz-accent-text); }
.ll-step-pill.current span { background: var(--hz-accent-text); color: #fff; }
.ll-step-pill:focus-visible { outline: 3px solid var(--sc-lime-bright); outline-offset: 2px; }

.ll-wizard { display: flex; flex-direction: column; gap: 8px; }
.ll-step { display: flex; flex-direction: column; gap: 8px; }
.labels-door .hazchem-layout .custom-form .hint { margin-top: 2px; }

/* Wrapping rows of the HAZCHEM toggle buttons (quick sizes, finishes, cut modes, quantities). */
.ll-opt-row { flex-wrap: wrap; }
.ll-opt-row .hz-orient-opt { flex: 1 1 auto; min-width: 64px; padding: 7px 8px; }
.hz-orient-opt.ll-dim { opacity: .5; }
.hz-orient-opt:disabled { cursor: not-allowed; }
.ll-lock-row { display: flex; align-items: center; gap: 8px; }
.ll-lock-row .ll-lock { flex: 0 0 auto; padding: 7px 12px; }
.ll-lock[aria-pressed="true"] { background: var(--hz-accent); border-color: var(--hz-accent-dark); color: var(--hz-accent-text); }
.ll-range input[type=range] { width: 100%; accent-color: var(--hz-accent); }

/* Shape, material and size tiles: the HAZCHEM pictogram chips, sized for label swatches. */
.hz-picto-grid.ll-tiles { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.ll-tiles .hz-chip img { width: 100%; height: 50px; object-fit: contain; }
.ll-tiles .hz-chip span { font-size: 10.5px; font-weight: 600; }
.ll-size-tiles { grid-template-columns: 1fr 1fr; }
.ll-size-chip { padding: 12px 8px; gap: 4px; }
.ll-size-chip b { font-size: 14px; color: var(--ink); }

/* Material facts card, light on the dark panel. */
.ll-facts { background: rgba(255,255,255,.07); border: 1px solid var(--hz-panel-border); border-radius: 10px; padding: 10px 12px; }
.ll-facts-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--hz-text); }
.ll-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.ll-fact { display: flex; flex-direction: column; min-width: 0; }
.ll-fact-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hz-muted); }
.ll-fact-value { font-size: 12.5px; font-weight: 600; color: var(--hz-text); }

/* Artwork drop zones and upload progress. */
.ll-dropzone { border: 2px dashed var(--hz-field-border); border-radius: 10px; padding: 10px; background: rgba(255,255,255,.05); }
.ll-dropzone.drag-over { border-color: var(--hz-accent); background: rgba(112,188,31,.18); }
.ll-dropzone input[type=file] { width: 100%; color: var(--hz-text); }
.ll-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 6px; }
.ll-progress-bar { height: 100%; width: 0; background: var(--hz-accent); transition: width .2s; }

.ll-supply { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--hz-accent); }
.ll-reason { padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 2px solid #f59e0b; color: #92400e; font-size: 13px; font-weight: 600; }
.ll-reason-tbc { background: var(--sc-tint); border-color: var(--hz-accent); color: var(--brand); }
.labels-door .custom-price .price-tag { margin-left: 8px; vertical-align: middle; }

/* Proof list and turnaround cards. */
.ll-proof-list { margin: 0; padding: 10px 12px 10px 28px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--hz-panel-border); font-size: 13px; line-height: 1.55; color: var(--hz-text); }
.ll-proof-list .proof-warn { color: #fcd34d; font-weight: 600; }
.ll-turnaround.delivery-opts, .ll-mode.delivery-opts { grid-template-columns: 1fr; }
.ll-turnaround .delivery-opt b { font-size: 13.5px; }
.ll-turnaround .delivery-opt small { font-size: 12px; }
.ll-approve-box { margin: 4px 0; }
.ll-turnaround .delivery-opt input, .ll-mode .delivery-opt input { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.labels-door .ll-form { scroll-margin-top: 96px; }

/* Service labels: the side / orientation block, colours and write-on fields. */
.ll-editing { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hz-panel-border); }
.ll-editing-group { min-width: 0; }
.ll-side-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ll-side-thumb { font: inherit; font-size: 10px; font-weight: 700; color: var(--ink); background: #fff; border: 2px solid var(--hz-field-border); border-radius: 8px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: center; }
.ll-side-thumb.active { border-color: var(--hz-accent); box-shadow: 0 0 0 2px var(--hz-accent) inset; }
.ll-side-thumb canvas { width: 100%; display: block; border-radius: 3px; }
.ll-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ll-colour { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.ll-colour.active { box-shadow: 0 0 0 3px var(--hz-accent); border-color: #fff; }
.ll-checklist { display: flex; flex-direction: column; gap: 6px; }
.ll-check-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px; align-items: center; }
.ll-check-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--hz-accent); }
.hz-orient-opt.ll-mini { flex: none; padding: 4px 9px; font-size: 13px; }

/* The foot of the wizard: the reason box, the price strip and Back/Next stay in view. */
.ll-foot { position: sticky; bottom: -14px; margin: 6px -16px -14px; padding: 10px 16px 12px; background: var(--hz-panel-bg); border-top: 1px solid var(--hz-panel-border); display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.ll-price-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--hz-text); min-height: 20px; }
.ll-price-strip b { font-size: 16px; color: #fff; }
.ll-strip-muted { color: var(--hz-muted); }
.ll-price-strip .price-tag { margin-left: 0; }
.ll-nav { display: flex; gap: 8px; }
.ll-nav .btn { flex: 1 1 0; }
.labels-door .hazchem-layout .custom-form .ll-nav .btn-primary { background: var(--hz-accent); color: var(--hz-accent-text); }

/* The live preview: the HAZCHEM stage holding one canvas that fills it. */
.ll-preview { min-width: 0; }
.ll-viewer { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1 1 auto; }
.ll-viewer[hidden] { display: none !important; }
.hazchem-stage.ll-stage { padding: 0; position: relative; min-height: 320px; }
.ll-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 901px) {
  .ll-preview { display: flex; flex-direction: column; }
  .hazchem-stage.ll-stage { flex: 1 1 auto; min-height: 0; }
}
@media (max-width: 900px) {
  .hazchem-stage.ll-stage { height: 340px; min-height: 0; }
}
.ll-viewer-toggle { position: absolute; top: 10px; right: 10px; z-index: 3; }
.ll-viewer-toggle .hz-orient-opt { flex: none; padding: 5px 10px; font-size: 11.5px; }
.ll-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(8,45,23,.18); }
.ll-badge-ok { background: #e6f6ec; color: #16693a; }
.ll-badge-warn { background: #fff5dd; color: #7a5200; }
.ll-badge-bad { background: #fdecec; color: #9b1c1c; }
.ll-badge.ll-badge-note { top: auto; bottom: 10px; background: var(--sc-green-deep); color: var(--sc-on-dark-soft); }
.ll-back-note { left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }

/* Drag handles for the number box and the service logo. */
.num-handle, .logo-handle { position: absolute; z-index: 2; border: 2px dashed var(--accent); border-radius: 4px; background: rgba(112,188,31,.12); cursor: move; touch-action: none; }
.logo-handle { border-color: var(--brand); background: rgba(14,68,35,.06); }
.resize-grip { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 3px; background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* Guide legend under the stage: pink cut, grey bleed, green safe zone. */
.ll-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ll-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ll-swatch { display: inline-block; width: 22px; height: 0; border-top: 2px dashed #ff2d95; }
.ll-swatch-bleed { border-top: 2px dotted #52605a; }
.ll-swatch-safe { border-top: 2px dotted var(--accent); }

@media (max-width: 560px) {
  .labels-door .ll-logo { width: 78px; }
  .ll-steps { gap: 4px; }
  .ll-step-pill { font-size: 9.5px; padding: 5px 2px; }
  .ll-editing { grid-template-columns: 1fr; }
  .ll-facts-grid { grid-template-columns: 1fr 1fr; }
  .ll-foot { position: static; margin: 6px 0 0; padding: 10px 0 0; }
}
@media (max-width: 900px) {
  .ll-foot { position: static; margin: 6px 0 0; padding: 10px 0 0; }
}