/* ══ BRAKE QR LABELS — print picker (.bl-*) ══════════════════════════════════
 * Chrome only. The LABEL styles (.bl-l*) live in brake-labels.js so the preview
 * and the print window are guaranteed to render from one source — don't add
 * label rules here, they wouldn't reach the print window.
 *
 * z-index sits above the part drawer (1320) because the picker opens from it.
 */

/* The panel never outgrows the viewport — it caps and the regions inside scroll.
   Sheet-preview scale steps down on short/narrow screens so the common case
   still needs no scrolling at all. */
:root { --bl-sc: 0.38; }
@media (max-height: 880px) { :root { --bl-sc: 0.30; } }
@media (max-width: 940px)  { :root { --bl-sc: 0.30; } }

.bl-back {
  position: fixed; inset: 0; z-index: 1340;
  background: rgba(4, 6, 9, 0.74);
  display: flex; align-items: center; justify-content: center;
  padding: 2vh 12px; overflow: hidden;
}
.bl-panel {
  background: #101318; border: 1px solid #2a3545; border-radius: 14px;
  width: 1120px; max-width: 100%; max-height: 96vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

/* ── Head / foot ── */
.bl-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid #1f2530; background: #141820; border-radius: 14px 14px 0 0;
}
.bl-head h4 { font-size: 15px; font-weight: 600; color: #dce3ed; margin: 0; }
.bl-count {
  margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: #8695a6; background: #182030; border: 1px solid #232a36;
  border-radius: 999px; padding: 3px 11px;
}
.bl-x {
  background: none; border: 0; color: #7a8a9b; cursor: pointer; padding: 4px;
  border-radius: 6px; display: flex;
}
.bl-x:hover { background: #1a2030; color: #dce3ed; }
.bl-x .material-symbols-outlined { font-size: 19px; }

.bl-foot {
  flex: 0 0 auto;
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid #1f2530; background: #141820; border-radius: 0 0 14px 14px;
}
.bl-btn {
  font-family: inherit; font-size: 13px; padding: 8px 16px; border-radius: 8px;
  background: #182030; border: 1px solid #2a3545; color: #dce3ed; cursor: pointer;
  transition: 0.14s;
}
.bl-btn:hover { border-color: #3a4658; }
.bl-btn.primary { background: var(--accent, #d4f542); border-color: var(--accent, #d4f542); color: #101318; font-weight: 600; }
.bl-btn.primary:hover { filter: brightness(1.06); }
.bl-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* ── Panes ── */
.bl-body {
  display: grid; grid-template-columns: 330px 1fr;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.bl-pane {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 13px;
  min-width: 0; min-height: 0; overflow: hidden;
}
/* Flex-column panes: every fixed row holds its height and exactly ONE child
   flexes and scrolls. Without flex:0 0 auto the fixed rows get squeezed into
   slivers instead of the scroller taking the hit — same trap as the .bt-* drawers. */
.bl-pane > * { flex: 0 0 auto; }
.bl-left { border-right: 1px solid #1f2530; background: #141820; }
.bl-lbl {
  font-family: ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #56636f; display: flex; align-items: center; gap: 8px;
}
.bl-lbl::after { content: ''; flex: 1; height: 1px; background: #232a36; }
.bl-lbl em {
  font-style: normal; text-transform: none; letter-spacing: 0.02em;
  font-size: 10.5px; color: #56636f;
}

/* ── Controls ── */
.bl-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-k { font-size: 12px; color: #56636f; }
.bl-seg { display: inline-flex; border: 1px solid #232a36; border-radius: 6px; overflow: hidden; }
.bl-seg button {
  font-size: 12px; padding: 5px 11px; background: #141820; border: 0; color: #8695a6;
  cursor: pointer; font-family: inherit; border-right: 1px solid #232a36; transition: 0.13s;
}
.bl-seg button:last-child { border-right: 0; }
.bl-seg button[aria-pressed="true"] { background: var(--accent, #d4f542); color: #101318; font-weight: 600; }
.bl-viewseg { margin-left: auto; }
.bl-nudgek { margin-left: auto; }
.bl-nudge {
  width: 56px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: #0f1318; border: 1px solid #232a36; border-radius: 6px;
  color: #dce3ed; padding: 5px 7px;
}
.bl-nudge:focus { outline: 2px solid var(--accent, #d4f542); outline-offset: -1px; }

.bl-chip, .bl-opt, .bl-row, .bl-kit, .bl-stock, .bl-seg button, .bl-btn, .bl-x {
  -webkit-tap-highlight-color: transparent;
}
.bl-chip:focus-visible, .bl-opt:focus-visible, .bl-row:focus-visible, .bl-kit:focus-visible,
.bl-gtoggle:focus-visible, .bl-stock:focus-visible, .bl-seg button:focus-visible,
.bl-btn:focus-visible, .bl-x:focus-visible {
  outline: 2px solid var(--accent, #d4f542); outline-offset: 2px;
}

.bl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid #232a36; color: #8695a6;
  font-family: inherit; transition: 0.14s;
}
.bl-chip:hover { border-color: #56636f; color: #dce3ed; }
.bl-chip[aria-pressed="true"] {
  background: var(--accent, #d4f542); border-color: var(--accent, #d4f542);
  color: #101318; font-weight: 600;
}

/* ── Selection list ── */
/* The list is the left pane's scroller. */
.bl-list {
  display: flex; flex-direction: column; gap: 4px; padding-right: 4px;
  flex: 1 1 auto; min-height: 90px; overflow-y: auto;
}
.bl-grp {
  font-family: ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #56636f; padding: 9px 2px 3px;
}
.bl-none {
  font-size: 12px; color: #56636f; line-height: 1.5; padding: 10px 2px 2px;
}
.bl-none b { color: #8695a6; font-weight: 600; }

/* Collapsible axle × kind groups (Discs & pads mode) */
.bl-gtoggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; margin-top: 4px; border-radius: 6px;
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; color: #dce3ed; text-align: left; transition: 0.12s;
}
.bl-gtoggle:hover { background: #161c26; border-color: #232a36; }
.bl-caret { display: flex; color: #56636f; transition: transform 0.15s ease; }
.bl-caret svg { width: 12px; height: 12px; }
.bl-gtoggle[aria-expanded="true"] .bl-caret { transform: rotate(90deg); }
.bl-gname { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.bl-gmeta {
  margin-left: auto; font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px; color: #56636f;
}
.bl-gbody { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; }
.bl-row, .bl-kit {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  background: #182030; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; color: #dce3ed; transition: 0.12s; border: 1px solid transparent;
}
.bl-row:hover, .bl-kit:hover { border-color: #2a3545; }
.bl-row[aria-pressed="true"] { border-color: rgba(212, 245, 66, 0.45); }
/* A kit reads as one thing you tick — dashed until selected, so it's visibly a
   grouping rather than another set row. */
.bl-kit { border: 1px dashed #232a36; padding: 9px 10px; }
.bl-kit[aria-pressed="true"] { border-style: solid; border-color: rgba(212, 245, 66, 0.55); }
.bl-tick {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #56636f;
  flex: 0 0 auto; display: grid; place-items: center; color: #101318;
}
.bl-row[aria-pressed="true"] .bl-tick, .bl-kit[aria-pressed="true"] .bl-tick {
  background: var(--accent, #d4f542); border-color: var(--accent, #d4f542);
}
.bl-tick svg { width: 10px; height: 10px; opacity: 0; }
.bl-row[aria-pressed="true"] .bl-tick svg, .bl-kit[aria-pressed="true"] .bl-tick svg { opacity: 1; }
.bl-rmain { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bl-rname { font-size: 13.5px; font-weight: 560; display: flex; align-items: center; gap: 6px; }
.bl-rsub {
  font-size: 11.5px; color: #56636f; font-family: ui-monospace, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; background: #38bdf8; }
.bl-dot.rear { background: #f59e0b; }
.bl-kitmark {
  font-size: 10px; font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.06em;
  color: #8695a6; border: 1px solid #232a36; border-radius: 4px; padding: 0 5px;
}
.bl-rn { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #8695a6; flex: 0 0 auto; }

.bl-granbox { border-top: 1px solid #232a36; padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.bl-hint { font-size: 12px; color: #56636f; line-height: 1.45; margin: 0; }
.bl-hint b { color: #8695a6; font-weight: 600; }

/* ── Stock picker ── */
.bl-stocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bl-stock {
  position: relative; background: #141820; border: 1px solid #232a36; border-radius: 6px;
  padding: 11px 9px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  align-items: center; font-family: inherit; color: #dce3ed; transition: 0.14s; text-align: center;
}
.bl-stock:hover { border-color: #56636f; }
.bl-stock[aria-pressed="true"] { border-color: var(--accent, #d4f542); background: #182030; }
.bl-sthumb { width: 100%; height: 38px; display: grid; place-items: center; color: #8695a6; }
.bl-stname { font-size: 11.5px; font-weight: 560; line-height: 1.25; }
.bl-stock[aria-pressed="true"] .bl-stname { color: var(--accent, #d4f542); }
.bl-stdim { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: #56636f; }
.bl-rec {
  position: absolute; top: -7px; right: -5px;
  font-family: ui-monospace, Consolas, monospace; font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--accent, #d4f542); color: #101318;
  border-radius: 3px; padding: 1px 5px; font-weight: 700;
}

/* ── Options ── */
.bl-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-opt {
  font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  background: #141820; border: 1px solid #232a36; color: #8695a6; font-family: inherit;
  transition: 0.13s; display: inline-flex; align-items: center; gap: 6px;
}
.bl-opt:hover { color: #dce3ed; border-color: #56636f; }
.bl-opt[aria-pressed="true"] { color: #dce3ed; border-color: var(--accent, #d4f542); background: #182030; }
.bl-opt.locked { cursor: default; }
.bl-od { width: 6px; height: 6px; border-radius: 50%; background: #56636f; }
.bl-opt[aria-pressed="true"] .bl-od, .bl-opt.locked .bl-od { background: var(--accent, #d4f542); }

/* ── Preview stage ── */
/* The stage is the right pane's scroller — the sheet scrolls inside it rather
   than stretching the modal past the viewport. */
.bl-stage {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(134, 149, 166, 0.055) 7px 14px);
  border: 1px solid #232a36; border-radius: 10px;
  padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  flex: 1 1 auto; min-height: 130px; overflow: auto;
}
.bl-empty-msg { color: #56636f; font-size: 13px; padding: 40px 0; }
.bl-hintline {
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: #56636f;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Full-sheet preview: a real A4 scaled down, so placement and waste are visible.
   transform doesn't shrink the layout box, so the wrapper is sized to the SCALED
   dimensions and the sheet is scaled from top-left — otherwise a 210mm-wide box
   sits inside a narrower pane and pushes the preview sideways. */
.bl-a4wrap {
  width: calc(210mm * var(--bl-sc)); height: calc(297mm * var(--bl-sc));
  flex: 0 0 auto;
}
.bl-a4 { width: 210mm; transform: scale(var(--bl-sc)); transform-origin: top left; }
.bl-a4 .bl-page {
  position: relative; width: 210mm; height: 297mm; background: #fff;
  border-radius: 0.6mm; box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.7);
}
.bl-a4 .bl-cell { position: absolute; }
.bl-a4 .bl-empty { border: 0.35mm dashed #d6d9e0; border-radius: 1.2mm; }
.bl-a4 .bl-page.plain .bl-cell:not(.bl-empty) { outline: 0.3mm dashed #b9bec8; outline-offset: 1.2mm; }

/* Actual-size preview */
.bl-real { display: flex; flex-direction: column; gap: 3mm; align-items: center; }
.bl-realrow { display: flex; gap: 3mm; }
.bl-ruler { display: flex; flex-direction: column; gap: 1px; align-self: flex-start; color: #56636f; }
.bl-ticks {
  height: 2.5mm; width: var(--rw);
  background-image: repeating-linear-gradient(90deg, currentColor 0 0.25mm, transparent 0.25mm 10mm);
  opacity: 0.5;
}
.bl-tnums { display: flex; font-family: ui-monospace, Consolas, monospace; font-size: 8px; opacity: 0.75; }
.bl-tnums span { width: 10mm; flex: 0 0 auto; }

/* ── Narrow screens ──
   Stacked panes mean two scrollers fighting each other, so the body becomes the
   single scroll region and the panes size to their content. */
@media (max-width: 940px) {
  .bl-body { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }
  /* min-height MUST go back to auto here: a pane that no longer scrolls has to
     size to its content, or the grid row stays short and the next pane draws
     straight over it. */
  .bl-pane { overflow: visible; min-height: auto; }
  .bl-left { border-right: 0; border-bottom: 1px solid #1f2530; }
  .bl-list { flex: 0 0 auto; max-height: 240px; }
  .bl-stage { flex: 0 0 auto; }
  .bl-stocks { grid-template-columns: repeat(2, 1fr); }
  .bl-viewseg, .bl-nudgek { margin-left: 0; }
}