:root {
  color-scheme: light;
  --ink: #17252d;
  --muted: #66757d;
  --line: #d9e1e4;
  --line-dark: #b7c4c9;
  --paper: #f5f7f7;
  --panel: #ffffff;
  --teal: #146c70;
  --teal-dark: #0d5356;
  --teal-soft: #dcefee;
  --blue: #287ea0;
  --danger: #a8443d;
  --shadow: 0 18px 50px rgba(30, 51, 61, .11);
  --sidebar-width: 40vw;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { color: inherit; }

.app-header {
  min-height: 76px; padding: 14px 24px; background: #14303a; color: white;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 3px solid #69aca8;
}
.brand-group { display: flex; align-items: center; gap: 14px; }
.app-header h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; display: flex; align-items: baseline; gap: 8px; }
.brand-author { font-size: 13px; font-weight: 500; color: #96c8c5; letter-spacing: normal; }
.eyebrow { margin: 0; color: #96c8c5; font-size: 10px; font-weight: 800; letter-spacing: .18em; }



.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.designer-settings-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; }
.designer-settings-button svg { flex: none; }
.designer-settings-button { anchor-name: --designer-settings; }
.connection { font-size: 12px; color: #b6d2d0; margin-right: 8px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.connection:hover { color: white; }
.connection.ready { display: none; }
.connection.ready::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #63d391; border-radius: 50%; margin-right: 6px; }
.connection.stale::before { background: #e5b84d; }

.button {
  border: 1px solid transparent; border-radius: 7px; padding: 9px 13px; cursor: pointer;
  font-weight: 650; font-size: 13px; transition: background .15s, border .15s, transform .05s;
}
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: var(--teal); color: white; }
.button.primary:hover { background: var(--teal-dark); }
.button.secondary { border-color: var(--line-dark); background: white; }
.app-header .button.secondary { color: white; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.button.danger { color: var(--danger); border-color: #dfc0bd; background: #fff8f7; }
.button.wide { width: 100%; padding: 12px; }
.button.auto-expand {
  width: 100%; display: block; text-align: left; margin: 0 0 12px;
  border-color: #e6c98c; background: #fff8ea; color: var(--ink, #3a2f1a);
}
.button.auto-expand:hover { background: #fdefd0; }
.button.auto-expand small { display: block; font-weight: 500; font-size: 11px; opacity: .75; margin-top: 2px; }
.file-button input { display: none; }
.photo-upload { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfb; }
.photo-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-upload .photo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; cursor: pointer; }
.photo-upload strong { font-size: 12px; }
.photo-upload ul { margin: 5px 0 0; padding-left: 18px; color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.45; }
.photo-upload details { grid-column: 1 / -1; }
.photo-upload summary { font-size: 11px; font-weight: 650; color: var(--teal-dark); cursor: pointer; }
.photo-measurement { grid-column: 1 / -1; margin: 0; color: var(--teal-dark); font-size: 11px; font-weight: 650; }
.photo-upload .field-hint { grid-column: 1 / -1; margin: -4px 0 0; color: var(--muted); font-size: 10px; font-weight: 500; }
.photo-upload .field-warning { grid-column: 1 / -1; margin: 0; color: #a3453e; font-size: 11px; font-weight: 650; }
.photo-upload > label { grid-column: 1 / -1; }
.photo-upload .nest-cavity-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.photo-upload fieldset.wide { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.photo-upload fieldset.wide legend { font-size: 11px; font-weight: 650; color: var(--teal-dark); padding: 0; margin-bottom: 3px; }
.photo-upload .nest-requirements-note {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
}
.nest-editor .editor-title {
  min-height: 0;
  margin-bottom: 4px;
}

.nest-cavity-column {
  min-width: 0;
}

.nest-cavity-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}

.nest-cavity-status .button {
  padding: 4px 7px;
  font-size: 10px;
}

.nest-fit-row {
  margin-top: 8px;
}

.nest-scan-controls {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 3;
  box-sizing: border-box;
  width: 40%;
  padding: 12px;
  overflow-y: auto;
  border: 0;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, .98);
  box-shadow: -3px 0 12px rgba(20, 48, 58, .10);
}

.canvas-wrap.nest-scan-active #preview-2d {
  width: 60%;
}

.nest-scan-controls-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 760;
}

.nest-scan-range {
  display: block;
  margin: 0 0 9px;
}

.nest-scan-range > span,
.nest-scan-range small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nest-scan-range output {
  color: var(--teal-dark);
  font-weight: 760;
}

.nest-scan-range input[type="range"] {
  width: 100%;
  height: 26px;
  margin: 2px 0 0;
  accent-color: var(--teal);
  cursor: pointer;
}

.nest-scan-range small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.nest-scan-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 4px;
}

.nest-scan-actions .button {
  padding: 8px 10px;
  font-size: 12px;
}

.nest-scan-number {
  display: block;
  margin: 12px 0 9px;
}

.nest-scan-number > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nest-scan-number-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nest-scan-number-input input {
  width: 56px;
}

.nest-scan-number small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

#nest-outline-tools,
#nest-viewport-tools {
  margin: 12px 0;
}

#nest-outline-tools small,
#nest-viewport-tools small {
  display: block;
  margin: 4px 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

#nest-outline-tools .button {
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
}

.nest-zoom-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.nest-zoom-controls .button {
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 760;
}

.nest-scan-status {
  margin-top: 9px;
  min-height: 1.3em;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.nest-corner-recovery {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18px;
  overflow: auto;
  background: #eef2f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nest-corner-recovery-header {
  width: min(900px, 100%);
  text-align: center;
}

.nest-corner-recovery-header strong {
  display: block;
  font-size: 17px;
}

.nest-corner-recovery-header p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 13px;
}

#nest-corner-count {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 760;
}

.nest-corner-image-wrap {
  position: relative;
  display: inline-block;
  max-width: min(1100px, 100%);
  max-height: calc(100% - 150px);
  line-height: 0;
  cursor: pointer;
  touch-action: none;
}

#nest-corner-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 260px);
  object-fit: contain;
  user-select: none;
}

#nest-corner-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#nest-paper-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

#nest-paper-outline line,
#nest-paper-outline polyline,
#nest-paper-outline polygon {
  fill: none;
  stroke: #08764a;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px white) drop-shadow(0 0 2px white);
}

.nest-corner-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 3px solid #21875b;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  box-shadow:
    0 0 0 2px white,
    0 1px 5px rgba(0,0,0,.5);
  z-index: 2;
  pointer-events: auto;
  cursor: grab;
}

.nest-corner-marker:active {
  cursor: grabbing;
}

#nest-corner-magnifier {
  position: absolute;
  box-sizing: border-box;
  width: 144px;
  height: 144px;
  border: 3px solid #21875b;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,.42), 0 0 0 2px white;
  background-color: white;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}

#nest-corner-magnifier::before,
#nest-corner-magnifier::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #21875b;
  box-shadow: 0 0 0 1px white;
}

#nest-corner-magnifier::before {
  width: 2px;
  height: 30px;
  transform: translate(-1px, -15px);
}

#nest-corner-magnifier::after {
  width: 30px;
  height: 2px;
  transform: translate(-15px, -1px);
}

.nest-corner-tip {
  position: absolute;
  top: 10px;
  left: 10px;
  width: min(310px, calc(100% - 20px));
  padding: 9px 30px 9px 10px;
  border: 1px solid #21875b;
  border-radius: 7px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  color: #14553a;
  font-size: 12px;
  line-height: 1.35;
  z-index: 3;
}

.nest-corner-tip button {
  position: absolute;
  top: 3px;
  right: 5px;
  border: 0;
  background: transparent;
  color: #14553a;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.nest-corner-marker::before,
.nest-corner-marker::after {
  content: "";
  position: absolute;
  background: #21875b;
  box-shadow: 0 0 0 1px white;
}

.nest-corner-marker::before {
  left: -6px;
  right: -6px;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
}

.nest-corner-marker::after {
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
}

.nest-corner-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 760px) {
  .nest-scan-controls {
    inset: 0 0 0 auto;
    width: 40%;
  }
}

.app-shell { display: grid; grid-template-columns: minmax(420px, min(var(--sidebar-width), calc(100vw - 448px))) 8px minmax(420px, 1fr); height: calc(100vh - 79px); }
.controls { background: #eef2f3; overflow: auto; min-width: 0; min-height: 0; padding-bottom: 24px; }
/* Focus and scrollIntoView stop short of the pinned bin save bar below. */
.controls, html { scroll-padding-bottom: 120px; }
.sidebar-resizer { position: relative; z-index: 4; cursor: col-resize; background: transparent; touch-action: none; }
.sidebar-resizer::after { content: ""; position: absolute; inset: 0 3px; background: var(--line); transition: background .15s, inset .15s; }
.sidebar-resizer:hover::after, .sidebar-resizer:focus::after, .sidebar-resizer.dragging::after { inset: 0 2px; background: var(--blue); }
.control-section { margin: 10px 12px 0; background: var(--panel); border: 1px solid #e2e8ea; border-radius: 11px; box-shadow: 0 2px 10px rgba(30,51,61,.035); overflow: hidden; }
.control-section:last-of-type { border-bottom: 0; }
.section-heading-wrap { position: relative; background: white; }
.section-heading-wrap .section-heading { padding-right: 20px; }
.section-heading {
  width: 100%; border: 0; background: white; padding: 17px 20px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; font-weight: 760; font-size: 16px;
}
.section-heading.no-toggle { cursor: default; }
.section-heading .unit-note { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.chevron { color: var(--muted); transition: transform .15s; }
.control-section:not(.open) .chevron { transform: rotate(-90deg); }
.control-section:not(.open) .section-body { display: none; }
.section-body { padding: 2px 20px 22px; }
/* Connectors has no collapse toggle, so with both height fields hidden (Same
   height, the common case) it should read as roughly half its old height. */
.control-section[data-section="connector"] .section-heading { padding: 10px 20px; }
.control-section[data-section="connector"] .section-body { padding: 2px 20px 10px; }
#label-auto { display: inline-block; margin-top: 2px; }

label, fieldset { font-size: 12px; font-weight: 650; }
fieldset { border: 0; padding: 0; margin: 14px 0; }
legend { margin-bottom: 7px; }
input[type="text"], input[type="number"], select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 10px;
  border: 1px solid var(--line-dark); border-radius: 6px; background: white; color: var(--ink);
}
/* Fix 096 F2: standalone numeric values are compact by default. Numeric
   fields inside a deliberate field-grid fill that cell. */
input[type="number"] { width: min(100%, 9rem); }
.field-grid input[type="number"] { width: 100%; }
input:focus, select:focus { outline: 2px solid rgba(40,126,160,.24); border-color: var(--blue); }
input[readonly] { background: #eef2f2; color: var(--muted); cursor: default; }
input[readonly]:focus { outline: none; border-color: var(--line-dark); }
[hidden] { display: none !important; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}
input[type="number"]::-webkit-inner-spin-button {
  transform: scale(1.5);
  transform-origin: right center;
  margin-left: 6px;
  cursor: pointer;
}
.draft-fields .field-label {
  display: block;
  min-height: 1.4em;
  line-height: 1.4;
}
.unit { float: right; color: var(--muted); font-weight: 450; }
.letter-height-field .unit { float: none; margin-left: 4px; }
.scoop-height-field .unit { float: none; margin-left: 4px; }
.slot-rack-fields .unit { float: none; margin-left: 4px; }
.post-unit-fields .unit { float: none; margin-left: 4px; }
.field-grid { display: grid; gap: 10px; }
.field-grid.three { grid-template-columns: repeat(3, 1fr); }
.bin-name-mode-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr); gap: 10px; align-items: end; }
#ordinary-size-row.bin-dimensions-row { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
.bin-dimensions-row label { min-width: 0; }
.bin-dimensions-row .thickness-pair { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.bin-dimensions-row input, .bin-dimensions-row select { min-width: 0; width: 100%; }
.field-grid.two { grid-template-columns: repeat(2, 1fr); }
.surface-bin-help { grid-column: 1 / -1; }
.field-grid.four { grid-template-columns: repeat(4, 1fr); }
.mode-and-bin-options { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mode-and-bin-options > label:first-child { min-width: 140px; flex: 0 1 180px; }
.mode-and-bin-options .inline-option { margin: 0 0 3px; white-space: nowrap; }
.mode-and-bin-options .inline-number { margin: 0 0 1px; min-width: 116px; white-space: nowrap; }
.mode-and-bin-options .inline-number input { margin-top: 3px; }
.mode-and-bin-options .wall-warning { max-width: 220px; margin-bottom: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.mode-and-bin-options .inline-select { margin: 0 0 1px; min-width: 90px; }
.mode-and-bin-options .inline-select select { margin-top: 3px; }
.lid-specification { flex: 1 0 100%; }
.lid-specification #lid-option-panel { margin-top: 10px; }
.compact-select { display: grid; grid-template-rows: 1.4em auto; align-content: end; line-height: 1.4; }
.section-heading .heading-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.section-heading .heading-select select { width: auto; min-width: 92px; margin: 0; padding-top: 6px; padding-bottom: 6px; }
.mode-and-bin-options .compact-select { flex: 1 1 120px; min-width: 110px; }
.mode-and-bin-options .compact-select select { height: 38px; }
.pegboard-mount-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(100px, 1fr);
  gap: 6px 10px;
  align-items: end;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.pegboard-mount-row[hidden] { display: none; }
.pegboard-mount-row > strong, .pegboard-mount-row > .muted, .pegboard-mount-row > .ink { grid-column: 1 / -1; }
.pegboard-mount-row label { font-size: 12px; font-weight: 650; color: var(--muted); }
.pegboard-mount-row select { margin-top: 4px; }
/* Fix 061 F1: a labelled cluster of related settings outside .draft-fields. */
.setting-group {
  display: grid; gap: 8px; margin: 0 0 8px; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fbfcfc;
}
.setting-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.surface-bin-controls { flex: 1 1 100%; min-width: 0; }
.setting-group .surface-bin-help { margin: 0; font-size: 11px; }
.measurement { color: var(--teal); margin: 4px 0 15px; font-size: 15px; font-weight: 600; }
#x-size, #y-size { font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
.size-help { margin-top: 6px !important; }

.segmented { display: grid; border: 1px solid var(--line-dark); border-radius: 7px; overflow: hidden; background: #f6f8f8; }
.segmented.two { grid-template-columns: repeat(2, 1fr); }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented.four { grid-template-columns: repeat(4, 1fr); }
.segmented label { position: relative; text-align: center; font-weight: 600; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 7px 6px; cursor: pointer; border-right: 1px solid var(--line); }
.segmented label:last-child span { border-right: 0; }
.segmented input:checked + span { background: var(--teal); color: white; }
.segmented button { border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 7px 6px; background: white; color: var(--ink); cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--teal); color: white; }
.segmented button:disabled { opacity: .45; cursor: not-allowed; }

.subheading-row { display: flex; align-items: end; justify-content: space-between; margin-top: 18px; }
.subheading-row h2 { margin: 0; font-size: 15px; }
.subheading-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
/* Fix 082 L2: the option currently open for editing - one identity, one
   Done action - sits once above its own settings, not mixed into the list
   of everything already added to the bin. */
.active-option-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding: 8px 10px; border-radius: 8px;
  background: var(--teal-soft); border: 1px solid var(--line);
}
.active-option-row strong { font-size: 14px; }
.active-option-actions { display: flex; gap: 6px; }
.count-badge { border-radius: 999px; background: var(--teal-soft); color: var(--teal-dark); padding: 4px 8px; font-size: 11px; font-weight: 700; }
.support-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.support-choice {
  --support-color: var(--teal); min-height: 58px; padding: 0; background: white; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; text-align: left; display: flex; align-items: stretch; gap: 0;
  overflow: hidden;
}
.support-choice:hover { border-color: var(--support-color); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30,51,61,.08); }
.support-choice-icon {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; align-self: stretch;
  overflow: hidden;
  border-radius: 7px 0 0 7px; color: var(--support-color);
  background: color-mix(in srgb, var(--support-color) 14%, white);
}
.support-choice-icon svg {
  display: block; width: 34px; height: 34px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
}
.support-choice-copy {
  flex: 1; min-width: 0; padding: 2px 6px; display: flex; flex-direction: column; justify-content: center; gap: 0;
  overflow: hidden;
}
.support-choice-copy strong {
  font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.support-choice-desc {
  color: #465a60; font-size: 12px; font-weight: 450; line-height: 1.2;
  white-space: normal;
}
.support-choice-state { display: block; color: #1f6b45; font-size: 10px; font-weight: 800; line-height: 1.1; }
.support-choice.has-state .support-choice-desc { display: none; }
.support-choice.added { border-width: 2px; border-color: #7aa98d; background: #f3faf6; cursor: pointer; opacity: .95; }
/* The part being edited always reads green - it's "the one you're working on",
   not a warning. Problems surface as red status text and in the preview panel,
   never by turning this chip or the editor red. */
.support-choice.active { color: var(--ink); border-color: #1f6b45; background: #edf7f1; box-shadow: 0 0 0 2px rgba(31,107,69,.32); }
.support-choice.active .support-choice-icon { color: #1f6b45; background: #d5eddf; }
/* Fix 111: a disallowed tile (non-Divider parts on a Storage Box design)
   reads unavailable, matching the .button:disabled convention. */
.support-choice:disabled { opacity: .45; cursor: not-allowed; }

/* Edit state hides the whole palette; the selected Added row owns Save / Delete. */
.support-palette[hidden] { display: none; }
/* A full-width structural break, like the one between Bin settings and Parts &
   options: things you can add above it, things already in this bin below. */
.added-parts-block { margin: 16px -20px 12px; padding: 14px 20px 0; border-top: 1px solid #e2e8ea; }
.added-parts-block h3 { margin: 0 0 5px; font-size: 12px; }
.added-parts-block .placed-empty { padding: 8px; }

.support-editor { border: 1px solid var(--line); border-radius: 9px; padding: 13px; background: #fbfcfc; }
.support-editor:not([hidden]) { border-color: #1f6b45; box-shadow: 0 0 0 2px rgba(31,107,69,.16); }
.editor-title { display: flex; justify-content: space-between; align-items: center; }
.quiet-status { color: var(--muted); font-size: 11px; }
.quiet-status.error { color: var(--danger); font-weight: 650; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ink { color: var(--ink); font-size: 12px; line-height: 1.4; }
.draft-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.draft-fields .wide { grid-column: 1 / -1; }
.draft-fields .draft-triple { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: start; }
.draft-fields .draft-triple.draft-triple-two { grid-template-columns: repeat(2, 1fr); }
/* Compact inline toggle - the space-saving replacement for the full-width
   check-card. The former description rides in a title tooltip. */
.draft-fields .editor-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink); user-select: none;
  margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: #fbfcfc; line-height: 1.25;
}
.draft-fields .editor-toggle input { margin: 0; flex: none; accent-color: var(--teal); }
.draft-fields .editor-toggle.wide { grid-column: 1 / -1; }
/* Two toggles (or a toggle + its revealed field) sharing one row. */
.draft-fields .toggle-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: center; }
.draft-fields .toggle-grid fieldset { margin: 0; }
/* A labelled cluster of related controls (Repeats, Slope base...). */
.draft-fields .editor-group {
  grid-column: 1 / -1; display: grid; gap: 8px; margin: 2px 0;
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfc;
}
.draft-fields .editor-group > .editor-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.draft-fields .pair,
.draft-fields .editor-group .pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-items: start; }
.draft-fields > .pair { grid-column: 1 / -1; gap: 9px; }
.draft-fields .editor-group .pair.triple { grid-template-columns: repeat(3, 1fr); }
.draft-fields .editor-group .pair.divider-xy-pair { gap: 4px; }
/* Fix 096 F3: shared pair/triple rows collapse to one column on narrow screens. */
@media (max-width: 620px) {
  .draft-fields .pair,
  .draft-fields .draft-triple,
  .draft-fields .draft-triple.draft-triple-two,
  .draft-fields .editor-group .pair.triple {
    grid-template-columns: 1fr;
  }
}
.draft-fields .divider-slope-fields,
.draft-fields .divider-slope-toggles { display: grid; gap: 8px; align-items: start; }
.draft-fields .divider-slope-toggles { padding-top: 18px; }
.draft-fields .divider-bottom-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: end; }
.draft-fields .divider-bottom-row > label { min-width: 0; }
.draft-fields .divider-bottom-empty { min-height: 1px; }
.draft-fields .divider-bottom-group { gap: 8px; }
.draft-fields .editor-group fieldset { margin: 0; }
/* A toggle sitting straight in a group is a heading row - drop its own box so
   it doesn't read as a border inside a border. */
.draft-fields .editor-group > .editor-toggle { border: 0; background: none; padding: 2px 0; }
.draft-fields .inline-help { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
#bore-ceiling-warning { margin: 0; padding: 8px; color: #8a5200; background: #fff3d6; border-left: 3px solid #dc9700; }
.draft-fields .checkbox-row { margin: 4px 0 2px; }
.draft-fields .division-table { grid-column: 1 / -1; width: 100%; border-collapse: collapse; }
.draft-fields .division-table td { padding: 3px 6px 3px 0; vertical-align: middle; }
.draft-fields .division-table td:first-child { width: 1.6em; font-weight: 600; font-size: 12px; color: var(--muted); text-align: right; padding-right: 8px; }
.draft-fields .division-table input { width: 100%; margin: 0; }
/* Grid dividers: one text cell per compartment, laid out to mirror the bin. */
.draft-fields .division-grid { table-layout: fixed; }
.draft-fields .division-grid td { width: auto; font-weight: 400; font-size: inherit; color: inherit; text-align: left; padding: 3px 3px 3px 0; }
.draft-fields .division-grid td:first-child { width: auto; text-align: left; padding-right: 3px; }
.draft-fields div.division-grid { display: grid; grid-template-columns: repeat(var(--division-columns), minmax(0, 1fr)); grid-template-rows: repeat(var(--division-rows), minmax(36px, auto)); gap: 3px; }
.draft-fields div.division-grid input { min-width: 0; height: 100%; }
/* Red warning laid over a division label that is cut short to fit. */
.draft-fields .division-fit-warning {
  align-self: start; justify-self: stretch; z-index: 2; pointer-events: none;
  margin: 1px 2px; padding: 0 4px; border-radius: 3px;
  font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center;
  color: #fff; background: #c62828;
}
.draft-fields input.text-no-fit { border-color: #c62828; color: #c62828; }
/* Click into the field to edit its text: the warning steps aside, the red stays. */
.draft-fields input.text-no-fit:focus + .division-fit-warning { display: none; }
/* Bore editor: a bold heading on the left, its fields wrapping on the right.
   The heading shares the field-label font metrics so its text top sits level
   with the top of the first field's label ("Width" / "Diameter"). */
.draft-fields .bore-group { grid-column: 1 / -1; display: grid; grid-template-columns: 3em 1fr; gap: 12px; align-items: start; margin: 2px 0; }
/* The middle Bore group has no left label (Fix 078: its controls are not
   always a "Base"), so it uses the freed label column cleanly. */
.draft-fields .bore-group.bore-group-nolabel { grid-template-columns: 1fr; }
.bore-group-label { font-size: 13px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .03em; }
.bore-group-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: start; }
.bore-group-fields.bore-hole-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bore-group-fields > label { min-width: 0; }
.bore-auto-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: end; grid-column: 1 / -1; }
.bore-group-fields > .bore-auto-row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bore-auto-row > label { min-width: 0; }
/* Fix 096 F3: Bore Width/Length share one deliberate two-column row - no dead third column. */
.bore-auto-row.bore-auto-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bore-auto-row .unit { float: none; margin-left: 4px; }
/* Fix 1000 Item 4: bore lower-field geometry — scoped deltas only. */
.bore-group-fields.bore-hole-fields .unit { float: none; margin-left: 4px; }
.bore-group-fields.bore-hole-fields input[type="number"] { width: 100%; }
.bore-group-fields.bore-hole-fields input, .bore-group-fields.bore-hole-fields select { min-width: 0; }
@media (max-width: 460px) {
  .draft-fields .bore-group { grid-template-columns: 1fr; gap: 4px; }
  .bore-group-fields, .bore-group-fields.bore-hole-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bore-auto-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes field-flash-anim {
  0% { background: var(--teal-soft); box-shadow: 0 0 0 2px var(--teal); }
  100% { background: none; box-shadow: none; }
}
.field-flash { animation: field-flash-anim 900ms ease; }
.input-with-button { display: flex; gap: 6px; margin-top: 5px; }
.input-with-button input { margin-top: 0; flex: 1; }
.input-with-button .button { flex: none; padding: 8px 12px; }
/* Fix 1126: in the Cradle Quantity/Spacing/From-ends row the unit label sits
   with its label text directly above its field. Floating it right would strand
   it at the cell's far edge, detached from the 9rem-capped input. */
.draft-fields .editor-group .pair.triple.cradle-qty-row .unit { float: none; margin-left: 4px; }
/* Fix 1126 (panel/Breaker): grid-minimum guard. The Quantity cell holds an
   input plus an Auto button (flex:none), whose intrinsic width exceeds 1fr and
   would force its track wider than a third. minmax(0,1fr) lets the three tracks
   shrink to a true third; min-width:0 on the items lets them shrink inside
   their tracks instead of overflowing. The min-width media guard keeps the
   existing <=620px single-column collapse working. */
@media (min-width: 621px) {
  .draft-fields .editor-group .pair.triple.cradle-qty-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.draft-fields .editor-group .pair.triple.cradle-qty-row > * { min-width: 0; }
/* Fix 1126 (panel/UI-UX): "Offset from center" can wrap to two lines in the
   narrower third column while "Quantity"/"Spacing" stay on one, which would
   push its input down out of alignment. Reserve two lines (line-height 1.4)
   for all three labels so the inputs stay aligned whether or not wrapping
   occurs. Scoped to this row only. */
.draft-fields .editor-group .pair.triple.cradle-qty-row .field-label { min-height: 2.8em; }
.fit-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.fit-actions:not(:has(> *:not([hidden]))) { margin: 0; }
.fit-actions .button {
  flex: 1 1 0; min-width: 8em; text-align: center; font-size: 12px;
  border-color: #e2bd82; background: #fdf1de; color: #6b4d1c;
}
.fit-actions .button:hover { background: #fbe6c4; border-color: #d7ab63; }
.button-row { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.button-row.equal > * { flex: 1; }
/* Fix 096 F5: one shared dialog button-row convention. Inside a dialog, the
   button row is right-aligned with an 8px gap; the Cancel (or least
   destructive) button comes first in the DOM, the affirmative/action button
   second, so the action always lands rightmost. */
dialog .button-row { justify-content: flex-end; gap: 8px; }
.placed-supports { display: grid; gap: 5px; }
.placed-empty { border: 1px dashed var(--line-dark); border-radius: 7px; padding: 12px; color: var(--muted); text-align: center; font-size: 12px; }
.placed-item {
  border: 1px solid var(--line); border-radius: 8px; background: white;
  display: flex; justify-content: space-between; align-items: stretch; gap: 0;
  min-height: 34px; max-height: 34px; overflow: hidden; cursor: pointer;
}
.placed-item.selected { border-color: #d58d21; box-shadow: 0 0 0 2px rgba(240,169,60,.35); background: #fffaf0; }
.placed-item.selected.status-valid { border-color: #1f6b45; box-shadow: 0 0 0 2px rgba(31,107,69,.18); background: #f3faf6; }
.placed-item.status-error { border-color: var(--danger); background: #fff4f2; }
/* Fix 078: New Bin / Duplicate Bin / AI Design are major Designer actions,
   not a cramped Bin Name row - they share the same rendered size as the
   Space header's Open Space / Edit Space buttons. */
.designer-major-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.bin-actions-spacer { flex: 1 1 auto; }
.major-action { flex: 0 0 auto; white-space: nowrap; }
.placed-item-content {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left;
  display: flex; align-items: center; gap: 0; overflow: hidden; cursor: default;
}
.placed-item-icon {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; align-self: stretch;
  border-radius: 7px 0 0 7px; color: var(--support-color);
  background: color-mix(in srgb, var(--support-color) 14%, white);
  overflow: hidden;
}
.placed-item-icon svg {
  display: block; width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.8;
}
.placed-item-copy {
  display: flex; flex-direction: row; align-items: baseline; min-width: 0; flex: 1;
  padding: 0 8px; gap: 6px; overflow: hidden;
}
.placed-item-copy strong {
  color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.placed-item-copy .placed-item-detail, .placed-item-copy span {
  color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.placed-editing-status {
  margin-left: auto;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.added-parts-block .placed-item { min-height: 42px; max-height: none; }
.placed-item-actions { display: flex; gap: 5px; align-items: center; padding: 4px 6px; flex: none; }
.placed-item-actions .button { width: auto; min-width: 48px; padding: 4px 7px; font-size: 12px; }

.check-card { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfc; cursor: pointer; }
.check-card input { margin-top: 2px; accent-color: var(--teal); }
.check-card strong, .check-card small { display: block; }
.check-card small { color: var(--muted); margin-top: 3px; font-weight: 450; line-height: 1.4; }
.checkbox-row { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink); user-select: none; margin: 4px 0 10px; }
.checkbox-row input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--teal); }
/* A checkbox riding in a section heading row, not on its own line. */
.section-heading .heading-check { margin: 0; font-weight: 600; }
/* Fix 1047: the output panel must stay in normal flow at the end of the scroll
   area — never sticky/fixed — so it cannot float over the option cards. */
.derived-readout { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 6px; background: #fbfcfc; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; }
.derived-readout dt { color: var(--muted); font-weight: 500; }
.derived-readout dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.derived-readout .readout-caption { grid-column: 1 / -1; color: var(--muted); font-weight: 450; font-size: 11px; line-height: 1.4; margin-top: 2px; }
.derived-readout .readout-adjust { color: var(--teal); }
/* Fix 060 C: wraps the Residual border dt/dd pair so it can be hidden as one
   unit in Hole-count mode without breaking the dt/dd grid layout. */
.pegboard-border-row { display: contents; }
.pegboard-border-row[hidden] { display: none; }
.field-help { margin: 8px 0 13px; font-size: 11px; color: var(--muted); line-height: 1.45; }
.bin-dimensions-row .field-help, .space-field > .field-help { display: block; margin: 4px 0 0; }
.field-help.status-error, .sd-help.status-error { color: var(--danger, #b3261e); }
.field-error { margin: 6px 0 0; font-size: 11px; color: var(--danger); line-height: 1.4; }
.portable-fit-warning { margin: 6px 0 0; font-size: 12px; color: var(--danger, #b3261e); line-height: 1.4; }
.output-panel { position: static; margin-top: 6px; padding: 10px 12px 12px; background: rgba(235,241,242,.97); border-top: 1px solid var(--line-dark); box-shadow: 0 -10px 24px rgba(30,51,61,.09); backdrop-filter: blur(8px); }
.save-location-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.save-location-group { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 3px 6px; flex: 1; min-width: 0; }
.save-location-group > label { white-space: nowrap; font-size: 11px; font-weight: 650; margin: 0; flex-shrink: 0; cursor: pointer; }
.save-location-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 4px;
  align-items: center;
  min-width: 0;
}
.save-location-group input[type="text"] {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  direction: ltr;
  text-align: left;
  cursor: pointer;
  background-color: #fff;
  font-size: 11.5px;
}
.save-location-group input[type="text"]:hover,
.save-location-input-wrap:hover input[type="text"] {
  border-color: var(--teal);
}
.folder-picker-button {
  position: static;
  transform: none;
  width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  color: var(--teal);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.folder-picker-button svg { width: 20px; height: 20px; }
.folder-picker-button:hover {
  background: var(--teal-soft);
  color: var(--teal-dark);
}
.folder-picker-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.inventory-select-row { grid-column: 1 / -1; margin: 0; }
.inventory-select-row select {
  margin-top: 0;
  width: auto;
  min-width: 150px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 600;
}

.workspace { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: #f8faf9; }
.workspace-toolbar { min-height: 54px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: white; }
.drawer-mode .workspace-toolbar { display: none; }
.workspace-tools { display: flex; align-items: center; gap: 12px; }
.icon-button { border: 1px solid var(--line); border-radius: 7px; background: white; padding: 7px 9px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 650; }
.icon-button:hover { color: var(--teal-dark); border-color: var(--teal); }
.view-tabs { display: flex; gap: 4px; }
.view-tab { border: 0; border-radius: 6px; background: transparent; padding: 8px 12px; cursor: pointer; font-weight: 700; font-size: 13px; }
.view-tab.active { background: var(--teal-soft); color: var(--teal-dark); }
/* Fix 078: plain Top of bin / Base of bin cues replace the visible percent
   readout; the exact percentages stay available via aria-valuetext only.
   Fix 081 G: the control is now a compact wall cross-section (the actual cut
   drawn on it) with its two drag handles moved off to the side, connected to
   their edge of the opening by a small dotted arrow, plus the wall checkboxes
   beside the whole visual instead of a full-width row underneath. */
.side-opening-height-group { margin-top: 4px; }
.side-opening-compact { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.side-opening-visual { display: flex; flex-direction: column; align-items: center; }
.side-opening-range-cue { display: block; text-align: center; font-size: 11px; color: var(--muted); margin: 2px auto; }
.side-opening-visual-row { display: flex; align-items: stretch; gap: 2px; }

/* The wall: a small rectangle standing in for the bin wall in cross-section,
   with the actual cut opening drawn on it at its real vertical span. */
.side-opening-wall {
  position: relative; width: 30px; height: 128px; margin: 8px 0;
  border: 1px solid var(--line-dark); border-radius: 4px;
  background: repeating-linear-gradient(135deg, #dbe4e3 0 4px, #eef3f2 4px 8px);
}
.side-opening-wall-cut {
  position: absolute; left: 2px; right: 2px; background: white; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--teal);
}

/* A dotted line from each handle to the opening edge it controls. */
.side-opening-connectors { position: relative; width: 20px; height: 128px; margin: 8px 0; }
.side-opening-connector {
  position: absolute; left: 0; right: 0; height: 0; border-top: 2px dotted var(--teal-dark);
}
.side-opening-connector::after {
  content: "\25B8"; position: absolute; right: -1px; top: -7px; color: var(--teal-dark);
  font-size: 11px; line-height: 1;
}

.side-opening-range { position: relative; width: 40px; height: 128px; margin: 8px 0; }
.side-opening-range input[type="range"] { position: absolute; inset: 0;
  width: 40px; height: 128px; margin: 0; writing-mode: vertical-lr; direction: rtl;
  appearance: none; background: transparent; pointer-events: none; }
.side-opening-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.side-opening-range input[type="range"]::-webkit-slider-thumb { appearance: none;
  width: 20px; height: 13px; border: 2px solid white; border-radius: 6px;
  background: var(--teal-dark); box-shadow: 0 0 0 1px var(--teal-dark);
  pointer-events: auto; cursor: grab; }
#side-opening-lower::-webkit-slider-thumb { transform: translateX(-10px); }
#side-opening-upper::-webkit-slider-thumb { transform: translateX(10px); }
.side-opening-range input[type="range"]::-moz-range-track { background: transparent; }
.side-opening-range input[type="range"]::-moz-range-thumb { width: 18px; height: 11px;
  border: 2px solid white; border-radius: 6px; background: var(--teal-dark);
  pointer-events: auto; cursor: grab; }
#side-opening-lower::-moz-range-thumb { transform: translateX(-10px); }
#side-opening-upper::-moz-range-thumb { transform: translateX(10px); }

/* Fix 1016: the mm readout spans had no positioning and stacked at the top of
   the 40px strip, painting under the slider thumbs. They now live in their
   own in-flow flex column (Change 1) that participates in layout with real
   reserved width - upper value at the top, lower value at the bottom of the
   128px strip - in ink (live values, not placeholders). In-flow means the
   column can never paint into the 14px flex gap or the wall-checkbox block,
   at any panel width. */
.side-opening-readout-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 128px;
  margin: 8px 0;
  padding: 2px 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Fix 082 L3: four literal wall checkboxes sit beside the visual, a compact
   2x2 block rather than a full-width row. */
.side-opening-wall-checks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px;
  align-self: center; width: auto; min-width: 128px;
}
.side-opening-wall-checks .checkbox-row { margin: 0; font-weight: 500; }
.preview-hint { text-align: right; color: var(--muted); font-size: 11px; }
.preview-hint span { display: block; }
#preview-state { color: var(--teal-dark); font-size: 32px; font-weight: 700; margin-bottom: 2px; }
#preview-state.status-ok { color: #1f6b45; }
#preview-state.status-error { color: var(--danger); }
.canvas-wrap { position: relative; min-height: 0; display: none; overflow: hidden; background: radial-gradient(circle at 52% 42%, #fff 0, #f7f9f8 55%, #edf2f1 100%); }
.canvas-wrap.active { display: block; }
/* Every view (3D, 2D, drawer) sits in the .workspace 1fr row. Without this, a
   visible height warning above the view takes that row and the view is
   auto-placed into a content-sized row, drawing only the top part of the pane. */
.workspace > .canvas-wrap { grid-row: 2; }
.canvas-wrap.view-enter { animation: preview-view-enter .3s cubic-bezier(.2,.75,.25,1) both; }
@keyframes preview-view-enter {
  from { opacity: 0; transform: scale(.975); filter: blur(3px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.canvas-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; }
/* The solid-geometry WebGL pass sits under the 2D overlay canvas (dimension
   guides, bore axes, the usable-floor rectangle, the contact shadow, and the
   invisible hit-test polygons for placed parts). #preview-3d stays the
   pointer/drag target and the transparent top layer; when WebGL is
   unavailable it falls back to painting everything itself instead. */
#preview-3d-solid { position: absolute; inset: 0; pointer-events: none; }
#preview-3d { position: relative; background: transparent; }
/* Sits in the preview toolbar, directly below the Bin/Interior buttons. The
   selector is doubled so it outranks the shared .camera-controls button rules. */
.camera-controls button.divider-edit-breadcrumb, .camera-controls button.divider-edit-breadcrumb:last-child { align-self: flex-start; flex: none; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; background: rgba(255,255,255,.94); color: var(--teal-dark); box-shadow: 0 1px 5px rgba(20,48,58,.12); cursor: pointer; font-size: 11px; font-weight: 700; white-space: normal; }
.divider-edit-breadcrumb:hover, .divider-edit-breadcrumb:focus-visible { border-color: var(--teal); background: var(--teal-soft); }
.divider-edit-breadcrumb[hidden] { display: none; }
.divider-edit-breadcrumb.divider-edit-note-static { cursor: default; }
.canvas-wrap.preview-recalculating #preview-3d,
.canvas-wrap.preview-recalculating #preview-3d-solid { opacity: .88; }
.preview-wait {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(183,196,201,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 12px rgba(30,51,61,.12);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.preview-wait[hidden] { display: none; }
.preview-wait-spinner {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 3px solid rgba(20,108,112,.25);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: preview-wait-spin .8s linear infinite;
}
@keyframes preview-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .preview-wait-spinner {
    border-color: var(--teal);
    animation: none;
  }
}
.camera-controls { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.camera-controls-row { display: flex; gap: 8px; }
.camera-views, .zoom-controls, .rotate-controls, .mode-controls, .canvas-select { display: flex; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 9px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(30,51,61,.08); backdrop-filter: blur(6px); align-self: flex-start; }
.camera-views { flex-direction: column; }
.camera-views-row { display: flex; }
.camera-views-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.camera-controls button { min-width: 53px; border: 0; border-right: 1px solid var(--line); padding: 10px 13px; background: transparent; cursor: pointer; color: var(--muted); font-size: var(--type-camera-button); font-weight: 700; flex: 1; text-align: center; white-space: nowrap; }
.camera-controls button:last-child { border-right: 0; }
.camera-controls button:hover, .camera-controls button.active { background: var(--teal-soft); color: var(--teal-dark); }
/* Bin/Interior default to visible, so turning either off is the exception -
   flag it with the same light-red treatment already used for error-panel. */
.mode-controls button.mode-toggle-off { background: #fff4f2; color: #7e302b; }
.mode-controls button.mode-toggle-off:hover { background: #ffe5e1; color: #7e302b; }
/* A setting that lives over the canvas: same floating chrome as the view
   buttons beside it, but a select, because it picks one of several states
   rather than firing an action. */
.canvas-select { align-items: center; gap: 8px; padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.canvas-select select { margin: 0; border: 0; background: transparent; padding: 9px 4px 9px 0; font-size: 13px; font-weight: 700; color: var(--teal-dark); cursor: pointer; }
.canvas-select select:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.zoom-controls button { font-size: 22px; line-height: 1; padding: 10px 14px; min-width: 44px; }
.rotate-controls button { font-size: 18px; line-height: 1; padding: 10px 12px; min-width: 40px; }
.mode-controls button { min-width: 108px; flex: none; }
.dimension-guides { display: none; }
.dimension-guides span { position: absolute; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 2px white; }
.dimension-guides span::before, .dimension-guides span::after { content: ""; display: block; border-color: currentColor; }
.dimension-width { left: 18%; right: 18%; bottom: 18px; justify-content: center; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.dimension-width::before, .dimension-width::after { position: absolute; bottom: -4px; width: 7px; height: 7px; border-bottom: 1px solid; }
.dimension-width::before { left: 0; border-left: 1px solid; transform: rotate(45deg); }
.dimension-width::after { right: 0; border-right: 1px solid; transform: rotate(-45deg); }
.dimension-height { left: 20px; top: 22%; bottom: 22%; writing-mode: vertical-rl; transform: rotate(180deg); justify-content: center; border-left: 1px solid currentColor; padding-left: 5px; }
.dimension-height::before, .dimension-height::after { display: none !important; }
.dimension-depth { right: 22px; bottom: 68px; transform: rotate(-28deg); padding: 4px 12px; border-bottom: 1px solid currentColor; }
.dimension-depth::before, .dimension-depth::after { position: absolute; bottom: -4px; width: 7px; height: 7px; border-bottom: 1px solid; }
.dimension-depth::before { left: 0; border-left: 1px solid; transform: rotate(45deg); }
.dimension-depth::after { right: 0; border-right: 1px solid; transform: rotate(-45deg); }
.layout-hint { position: absolute; left: 18px; bottom: 16px; color: var(--muted); background: rgba(255,255,255,.94); padding: 7px 10px; border-radius: 6px; font-size: 11px; box-shadow: 0 1px 4px rgba(0,0,0,.08); pointer-events: none; }
.layout-hint strong { color: var(--ink); font-weight: 600; }
/* Fix 078: the primary "invalid settings" location is this overlay on the
   active Design canvas itself - #error-panel below is secondary and only
   shown for additional actionable/multi-error detail. */
.design-invalid-overlay {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  padding: 10px 14px; border-radius: 8px; pointer-events: none;
  background: rgba(255, 244, 242, .94); border: 1px solid #e0aaa5;
  box-shadow: 0 4px 14px rgba(126, 48, 43, .18);
}
.design-invalid-heading { display: block; font-size: 24px; line-height: 1.25; font-weight: 800; color: var(--danger); }
.design-invalid-overlay .design-invalid-message { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #7e302b; }
.error-panel { margin: 0 18px 14px; padding: 9px; border: 1px solid #e0aaa5; border-radius: 7px; background: #fff4f2; color: #7e302b; font-size: 12px; }
.error-link { display: block; width: 100%; border: 0; border-radius: 5px; padding: 6px 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.error-link:hover, .error-link:focus { background: #ffe5e1; outline: none; }
.error-link::before { content: "→"; margin-right: 7px; font-weight: 800; }
.workspace-footer { display: flex; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--line); background: white; color: var(--muted); font-size: 11px; }
.workspace-footer p { margin: 0; }

.toast { position: fixed; left: 50%; top: 92px; margin-left: calc(min(440px, calc(100vw - 44px)) / -2); max-width: min(440px, calc(100vw - 44px)); padding: 12px 15px; border: 2px solid #b07a12; border-radius: 8px; background: #fff1c2; color: #2a1f05; box-shadow: 0 6px 18px rgba(20, 24, 28, .28); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: .2s; z-index: 40; white-space: pre-line; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.at-point { left: 0; top: 0; margin-left: 0; transform: translateY(0); }
.toast.error { background: #fde2de; border-color: #a8443d; color: #5c1d19; }

dialog:not([open]) { display: none; }

.support-layout-dialog { width: min(360px, calc(100vw - 32px)); border: 0; border-radius: 12px; padding: 20px; color: var(--ink); box-shadow: 0 18px 48px rgba(20,36,42,.25); }
.support-layout-dialog::backdrop { background: rgba(14, 28, 34, .55); backdrop-filter: blur(2px); }
.support-layout-dialog h2 { margin: 0 0 7px; font-size: var(--type-dialog-title); }
.support-layout-dialog p { margin: 0 0 16px; color: var(--muted); }
#draft-switch-dialog { width: min(440px, calc(100vw - 32px)); }
.suggestions-dialog { width: min(520px, calc(100vw - 32px)); }
.suggestions-dialog label { display: grid; gap: 5px; margin: 12px 0; font-weight: 600; }
.suggestions-dialog input, .suggestions-dialog select, .suggestions-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; }
.suggestions-dialog textarea { resize: vertical; }
.suggestions-dialog #suggestions-status { color: var(--danger); }
.ai-help-dialog { width: min(840px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto; }
.ai-help-dialog .ai-help-field { display: grid; gap: 5px; margin: 0 0 10px; color: var(--ink); font-weight: 600; }
.ai-help-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; resize: vertical; }
.ai-help-dialog .ai-help-row { margin: 0 0 12px; }
.ai-help-dialog .ai-help-status { margin: 0 0 12px; line-height: 1.4; color: var(--ink); }
.ai-help-dialog .ai-help-status.error { color: var(--danger); }
.ai-help-guide {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0 0 14px; padding: 8px 10px; border-radius: 7px;
  background: var(--teal-soft); color: var(--teal-dark);
  font-size: 12px; font-weight: 650;
}
.ai-help-guide-arrow { color: var(--muted); font-weight: 400; }
.ai-help-recent-block { margin: 0 0 12px; }
.ai-help-recent-list {
  display: grid; gap: 4px; margin-top: 6px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 7px; padding: 4px; background: #fbfcfc;
}
.ai-help-recent-item {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 5px;
  padding: 6px 8px; background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; font-weight: 400; font-size: 12px; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ai-help-recent-item:hover, .ai-help-recent-item:focus { background: var(--teal-soft); outline: none; }
#draft-switch-dialog p { line-height: 1.45; }
#draft-switch-dialog .field-error { color: var(--danger); margin: 0 0 16px; }

.generation-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 30, 36, .35);
  overflow: hidden;
}
.generation-dialog:not([open]) {
  display: none;
}
/* Docked, non-modal while files are made: the screen behind stays usable. */
.generation-dialog.is-docked[open] {
  position: fixed;
  inset: auto 16px 16px auto;
  margin: 0;
  z-index: 60;
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.generation-dialog::backdrop {
  background: rgba(14, 28, 34, .55);
  backdrop-filter: blur(2px);
}
.generation-dialog-card {
  padding: 24px 28px;
}
.generation-dialog-header h2 {
  margin: 0 0 6px;
  font-size: var(--type-dialog-title);
  color: #14303a;
}
.generation-dialog-subtitle {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.generation-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.generation-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: background .2s, border-color .2s;
}
.generation-item.status-generating {
  background: #f0f8fa;
  border-color: #79b5c2;
}
.generation-item.status-done {
  background: #f4faf6;
  border-color: #92d4ab;
}
.generation-item.status-error {
  background: #fef5f5;
  border-color: #e5a4a0;
}
.gen-item-indicator {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.gen-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(36, 117, 134, 0.25);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: gen-spin 0.8s linear infinite;
}
@keyframes gen-spin {
  to { transform: rotate(360deg); }
}
.gen-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
}
.gen-status-icon.waiting {
  background: #e4ecee;
  color: #7a8b90;
  font-size: 16px;
}
.gen-status-icon.done {
  background: #1f6b45;
  color: white;
}
.gen-status-icon.error {
  background: #cf222e;
  color: white;
}
.gen-item-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.gen-item-title {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.gen-item-status {
  font-size: 12px;
  color: var(--muted);
}
.status-generating .gen-item-status {
  color: var(--teal);
  font-weight: 600;
}
.status-done .gen-item-status {
  color: #1f6b45;
  font-weight: 600;
}
.status-error .gen-item-status {
  color: #cf222e;
  font-weight: 600;
}
.generation-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 7px;
  background: #fff0ef;
  border: 1px solid #f2bcba;
  color: #8c1d18;
  font-size: 12.5px;
  line-height: 1.4;
}

.about-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  border: 0;
  border-radius: 12px;
  padding: 24px;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 30, 36, .35);
  display: flex;
  flex-direction: column;
}
.about-dialog:not([open]) { display: none; }
.about-dialog::backdrop { background: rgba(14, 28, 34, .55); backdrop-filter: blur(2px); }
.about-dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.about-dialog-header h2 { margin: 0; font-size: var(--type-dialog-title); color: #14303a; }
.about-runtime { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.about-runtime h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink); }
.about-runtime p { margin: 3px 0; }

/* Startup cover: visible from the first rendered HTML, dismissed only once
   Space startup has decided what the person should see. */
.startup-cover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(14, 28, 34, .55);
  backdrop-filter: blur(2px);
}

.startup-cover[hidden] {
  display: none;
}

.startup-cover-card {
  width: min(420px, calc(100vw - 32px));
  border-radius: 12px;
  padding: 24px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 30, 36, .35);
  text-align: center;
}

.startup-logo { display: block; width: 100%; max-height: min(42vh, 250px); object-fit: contain; margin: 0 auto 12px; border-radius: 8px; }

.startup-cover-card h2 {
  margin: 0 0 8px;
  font-size: var(--type-dialog-title);
  color: #14303a;
}

.startup-cover-card p {
  margin: 0;
  color: var(--muted);
}

/* Welcome screen: spaces */
.welcome-dialog {
  width: min(700px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  border: 0; border-radius: 12px; padding: 24px; color: var(--ink); background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 30, 36, .35);
}
.welcome-dialog::backdrop { background: rgba(14, 28, 34, .55); backdrop-filter: blur(2px); }
.welcome-dialog.busy { cursor: progress; }
.welcome-dialog.busy button { pointer-events: none; }
.welcome-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.welcome-header h2 { margin: 0; font-size: var(--type-dialog-title); color: #14303a; }
.welcome-lead { margin: 0 0 14px; color: var(--muted); }
.welcome-notice { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line-dark); border-left: 4px solid var(--teal); background: var(--teal-soft); border-radius: 8px; color: var(--ink); font-size: 13px; line-height: 1.45; }
.welcome-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: step; }
.welcome-steps li { counter-increment: step; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.welcome-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 6px;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 11px; font-weight: 700;
}
.welcome-steps strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 13px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.welcome-other-container { margin-bottom: 20px; }
.welcome-other-container .welcome-recent { max-height: 176px; overflow-y: auto; }
.welcome-other-space-open { min-height: 36px; gap: 8px; padding: 5px 8px; }
.welcome-other-space-open .welcome-recent-icon { flex: 0 0 20px; font-size: 18px; }
.welcome-other-space-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.welcome-other-space-meta { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* Fix 058 K: the compact, non-blocking first-run Space storage card. */
.welcome-storage {
  margin: 18px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}
.welcome-storage-lead { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.welcome-storage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.welcome-storage-row code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0;
  background: none;
  font-size: 12px;
}
.welcome-storage-row .button { margin: 0; flex: 0 0 auto; }
.welcome-storage-leftover { margin: 8px 0 0; }
.welcome-printer-profile { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; }
.welcome-storage[data-folder-hidden] .welcome-printer-profile { margin-top: 0; padding-top: 0; border-top: 0; }
body.relocating > :not(dialog) { pointer-events: none; }
.storage-choice { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; cursor: pointer; }
.storage-choice input { margin-top: 4px; }
.storage-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
#space-storage-change .welcome-actions { margin-top: 16px; }
.welcome-secondary { margin: 6px 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.welcome-secondary h3 { margin: 0 0 5px; font-size: 14px; }
.welcome-secondary p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.welcome-secondary .button { margin: 0; }
.welcome-section-title { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.welcome-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.welcome-recent-item { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.welcome-recent-item:hover { border-color: var(--line-dark); }
.welcome-recent-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.welcome-recent-open:hover { background: var(--teal-soft); }
.welcome-recent-open:disabled { cursor: not-allowed; opacity: .55; background: #fff; }
.welcome-recent-icon { font-size: 20px; }
.space-kind-compact-icon {
  display: block;
  width: 70%;
  height: 70%;
  margin: 15%;
  object-fit: contain;
}
.welcome-recent-text { min-width: 0; display: flex; flex-direction: column; }
.welcome-recent-text em { font-style: normal; font-size: 11px; font-weight: 650; color: var(--teal); margin-left: 6px; }
.welcome-recent-text small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-recent-forget { border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--muted); padding: 0 12px; cursor: pointer; }
.welcome-recent-forget:hover { color: var(--danger); background: #fbefee; }
.welcome-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
.welcome-resume-card {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  width: 100%; font: inherit; text-align: left; cursor: pointer;
}
.welcome-resume-card:hover, .welcome-resume-card:focus-visible { border-color: var(--teal); background: var(--teal-soft); }
.welcome-resume-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.welcome-resume-card .welcome-recent-text > strong { color: var(--ink); font-size: 18pt; line-height: 1.1; }
.welcome-resume-card .welcome-recent-text > span { color: var(--muted); font-size: 12px; }
.space-folder { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.space-folder > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.link-button { border: 0; background: none; padding: 0; color: var(--teal); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.space-field { display: grid; gap: 4px; }
.space-kinds { border: 0; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.space-kinds legend { padding: 0; margin-bottom: 6px; }
.space-kind {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  font-weight: 450; font-size: 12px; line-height: 1.4; color: var(--muted); cursor: pointer;
}
.space-kind:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.space-kind input { margin-top: 2px; accent-color: var(--teal); }
.space-kind strong { display: block; font-size: 13.5px; color: var(--ink); }
.space-dimension-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 150px));
  gap: 10px;
  align-items: end;
  justify-content: start;
}

.space-dimension-row input,
.space-dimension-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.space-size { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.space-size[hidden] { display: none; }
.space-note { margin: 8px 0 0; min-height: 1.4em; font-size: 12px; color: var(--muted); }
#space-form .space-field > small[id*="-setup-"] { display: block; height: 3em; overflow-y: auto; margin: 0; }
#space-form .setup-readout-slot { height: 130px; }
#space-form .setup-readout-slot .derived-readout { box-sizing: border-box; max-height: 110px; overflow: auto; }
#space-form .portable-fit-warning { min-height: 3em; max-height: 3em; overflow: auto; }
#space-form .portable-fit-warning[hidden] { display: block; visibility: hidden; }
.dl-inv-tools[hidden], .dl-batch-tools[hidden] { display: none; }
.space-buttons { justify-content: flex-end; margin-top: 16px; }
.space-tutorial-launch {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

.space-tutorial-content {
  display: grid;
  gap: 12px;
}

.space-tutorial-section {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
}

.space-tutorial-section h3 {
  margin: 0 0 7px;
  font-size: 15px;
  color: var(--ink);
}

.space-tutorial-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.space-tutorial-section p + p {
  margin-top: 8px;
}

.space-tutorial-flow ol {
  margin: 8px 0 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.space-tutorial-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.type-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 4px;
}
.type-cards > .type-card { grid-column: span 2; }
.type-cards > .type-card:nth-child(4) { grid-column: 2 / span 2; }
.type-cards > .type-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 700px) {
  .type-cards { grid-template-columns: 1fr; }
  .type-cards > .type-card, .type-cards > .type-card:nth-child(4), .type-cards > .type-card:nth-child(5) { grid-column: auto; }
}
.type-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.type-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(30, 51, 61, .10);
}
.type-card:active {
  transform: translateY(1px);
}
.type-card:focus-visible {
  outline: 3px solid rgba(20, 108, 112, .28);
  outline-offset: 2px;
}
.type-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.type-card h3 {
  margin: 12px 14px 4px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
}
.type-card p {
  flex: 1;
  margin: 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
@media (max-width: 620px) {
  .welcome-steps, .space-kinds, .space-size { grid-template-columns: 1fr; }
  .space-dimension-row { grid-template-columns: 1fr; }
  .type-cards {
    grid-template-columns: 1fr;
  }
  .type-card {
    display: grid;
    grid-template-columns: minmax(116px, 36%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    padding: 0;
  }
  .type-card-image {
    grid-row: 1 / span 2;
    width: 100%;
    height: 100%;
    min-height: 110px;
    aspect-ratio: auto;
    object-fit: contain;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .type-card h3 {
    margin: 12px 12px 3px;
  }
  .type-card p {
    margin: 0 12px 12px;
  }
}
.about-dialog-content {
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: #2c3e50;
  padding-right: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
}
.about-dialog-content h1 { font-size: 22px; margin-top: 4px; margin-bottom: 8px; color: #14303a; }
.about-dialog-content h2 { font-size: 17px; margin-top: 20px; margin-bottom: 8px; color: var(--teal); }
#space-form-title { font-size: calc(var(--type-dialog-title) * 1.5); }
.about-dialog-content h3 { font-size: 15px; margin-top: 14px; margin-bottom: 6px; }
.about-dialog-content p { margin: 8px 0; }
.about-dialog-content ul { margin: 8px 0 12px; padding-left: 22px; }
.about-dialog-content li { margin-bottom: 4px; }
.about-dialog-content blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  background: #fff8ea;
  border-left: 4px solid #e5b84d;
  border-radius: 4px;
  color: #4a3b1a;
}
.about-dialog-content a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.about-dialog-content a:hover { color: var(--teal-dark); }

.update-banner {
  position: fixed; left: 50%; top: 92px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px; border-radius: 9px; background: #16333d; color: white;
  box-shadow: var(--shadow); font-size: 13px; z-index: 20;
}
.update-banner[hidden] { display: none; }

/* Fix 116 / Story 2985: modal launch dialog when no writable folder is available.
   A <dialog> opened with showModal() so it sits above the welcome dialog (also top layer). */
.folder-access-notice {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: rgba(10, 20, 26, 0.6); color: white;
  align-items: center; justify-content: center; font-size: 14px; z-index: 1000;
}
.folder-access-notice[open] { display: flex; }
.folder-access-notice::backdrop { background: transparent; }
.folder-access-notice[hidden] { display: none; }
.folder-access-panel {
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 480px;
  padding: 18px 20px; border-radius: 9px; background: #16333d; color: white; box-shadow: var(--shadow);
}
.folder-access-copy { display: flex; flex-direction: column; gap: 6px; }
.folder-access-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.folder-access-bins-note { margin: -4px 0 0; font-size: 12px; opacity: 0.85; text-align: center; }
.folder-access-notice #folder-access-dismiss {
  background: white;
  color: #16333d;
  border: 1px solid #16333d;
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; height: auto; }
  .controls { overflow: visible; border-right: 0; }
  .sidebar-resizer { display: none; }
  /* Fix 019 Item 9A: a hard 720px made the preview needlessly tall (and
     forced scrolling) on short phones/tablets. Keep a useful minimum, cap
     around the former desktop-like target, and shrink on short viewports;
     svh (falls back to vh where unsupported) avoids the preview jumping
     around as mobile browser chrome shows/hides. */
  .workspace { height: 720px; height: min(720px, max(360px, 78vh)); height: min(720px, max(360px, 78svh)); }
}
@media (max-width: 620px) {
  .app-header { align-items: flex-start; padding: 12px; flex-wrap: wrap; row-gap: 10px; }
  .brand-group { flex-wrap: wrap; }
  .header-actions { gap: 5px; }
  .connection { width: 100%; text-align: right; }
  .section-body, .output-panel { padding-left: 13px; padding-right: 13px; }
  .added-parts-block { margin-left: -13px; margin-right: -13px; padding-left: 13px; padding-right: 13px; }
  .support-palette { grid-template-columns: 1fr; }
  .field-grid.three { grid-template-columns: repeat(2, 1fr); }
  .field-grid.four { grid-template-columns: repeat(2, 1fr); }
  .workspace-toolbar { align-items: flex-start; }
  .icon-button span { display: none; }
  .camera-controls { top: 10px; left: 10px; }
  .camera-controls button { padding: 6px; }
  .preview-hint span:last-child { display: none; }
  .workspace-footer { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-wrap.view-enter { animation: none; }
}

/* Bordered cards (Edge Mount reuses them). */
.b4b-card {
  padding: 10px 12px;
  border: 1px solid var(--border, #d5dcdf);
  border-radius: 8px;
  background: rgba(127, 169, 182, 0.08);
}
.b4b-card-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.grid-span-all { grid-column: 1 / -1; }
.grid-span-two { grid-column: 1 / span 2; }
.space-untyped-actions {
  justify-content: center;
  margin-top: 24px;
}
/* Edge Mount reuses the card look; only its two always-visible sections
   (Label, Screw Mounting) and their help text need anything of their own.
   Audit 006 J2: the live element is #edge-mount-editor - the
   #edge-mount-panel id this used to target does not exist, so none of this
   ever applied. */
#edge-mount-editor .b4b-card-title { margin-top: 6px; }
#edge-mount-editor h4.b4b-card-title { margin-top: 10px; }
#edge-mount-editor .inline-help {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
#edge-mount-editor .field-grid.three { align-items: end; }
#edge-mount-access-auto-note { grid-column: span 1; align-self: center; }
/* Each section reads as its own physical concept, not a continuation of the
   one above it. */
#edge-mount-label-panel.b4b-card,
#edge-mount-holes-panel.b4b-card {
  margin-top: 14px;
}

/* Fix 058 Correction 1, C1.4D/E/F: Label reads Text -> Plate -> Standoff
   support (Separate only); Screw Mounting reads Pattern -> Hole/access ->
   Position. Each group gets a light divider and small gap from the one
   before it, and dense scalar controls stay compact instead of stretching
   like long text fields - scoped to Edge Mount only. */
#edge-mount-editor .edge-mount-section-header {
  display: flex;
  align-items: center;
  margin: 0 0 4px;
}
#edge-mount-editor .edge-mount-section-header .checkbox-row { margin: 0; }
#edge-mount-editor .edge-mount-group-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
#edge-mount-editor .edge-mount-field-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #d5dcdf);
}
#edge-mount-editor .edge-mount-field-group:first-child {
  padding-top: 0;
  border-top: none;
}
#edge-mount-editor .edge-mount-group-full { flex-basis: 100%; margin: 2px 0 0; }
/* Text input: compact but comfortably editable - roughly a short-label
   width, not a full-width text field. */
#edge-mount-editor .edge-mount-text-field { flex: 0 1 180px; min-width: 130px; }
#edge-mount-editor .edge-mount-text-field input[type="text"] { width: 100%; }
/* Numeric inputs: ~80-100px effective width. */
#edge-mount-editor .edge-mount-compact-number { flex: 0 0 auto; }
/* Small selects: ~110-150px as content requires. */
#edge-mount-editor .edge-mount-compact-select { flex: 0 0 auto; }
#edge-mount-editor .edge-mount-compact-select select { width: 130px; }
@media (max-width: 620px) {
  /* Groups may wrap on narrow screens and become full-width when necessary. */
  #edge-mount-editor .edge-mount-text-field,
  #edge-mount-editor .edge-mount-compact-number,
  #edge-mount-editor .edge-mount-compact-select {
    flex: 1 1 100%;
  }
  #edge-mount-editor .edge-mount-compact-number input[type="number"],
  #edge-mount-editor .edge-mount-compact-select select {
    width: 100%;
  }
}
/* H9: the five bin controls (switch bin, New Bin, Duplicate Bin, AI Design,
   Delete Bin) read as one grouped box; Bin Name sits with the size fields
   below as part of the bin design, not the controls. */
.part-name-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 3px 0 14px;
  padding: 0;
}
@media (max-width: 480px) {
  .part-name-block { grid-template-columns: 1fr; }
  .designer-major-actions { justify-content: flex-start; }
}
/* Fix 1122: Bin Name used an inline label + input row while every other
   designer field (Width / Depth / Height, mode selects) is label-above-input,
   so its label baseline and input alignment never matched the header. Use the
   same label-over-input geometry as the other fields. */
.part-name-row {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.part-name-row input { width: 100%; margin: 5px 0 0; padding: 9px 10px; font-size: 13px; font-weight: 650; color: var(--ink); }

@media (max-width: 420px) {
  .support-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lid-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#lid-option-panel { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 10px; }
#lid-option-panel > label { flex: 1 1 120px; min-width: 110px; }
#lid-label-details { flex: 1 1 100%; }
#lid-label-text-row { flex: 1 1 180px; }
#lid-label-text-row #lid-label-text { width: 100%; min-width: 0; }
.lid-label-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.lid-label-fields > label { flex: 1 1 120px; }
#lid-option-panel > p { flex: 1 1 100%; }
#lid-division-labels { display: grid; gap: 6px; }
#lid-division-labels .division-table { margin-top: 0; }

.required-cue { color: var(--muted); font-size: 11px; font-weight: 450; margin-left: 4px; }
.space-help { margin: 4px 0 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Storage Box case settings on the Space setup / Edit form. */
.storage-box-case { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
/* Fix 060 B: Lid / Case options / Label / Material each read as their own
   physical-concept group instead of generic three-column rows. */
.storage-box-group { display: grid; gap: 6px; margin-top: 6px; }
.storage-box-group:first-of-type { margin-top: 0; }
/* Fix 117: the Design form is one column of bordered areas (same rhythm as the
   Storage Drawers editor). Setup's #portable-case is not inside .storage-box-form. */
.storage-box-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.storage-box-form .storage-box-case { margin-top: 0; padding-top: 0; border-top: 0; }
.storage-box-form .storage-box-group { margin-top: 0; padding: 9px; border: 1px solid var(--line); border-radius: 8px; }
.storage-box-form .storage-box-capacity { margin: 0; }

/* Fix 103 (Section C): structural Design. When a Storage Drawers cabinet or
   Storage Box case is the Design target, the ordinary bin editor sections hide
   and the structural editor shows. The bin navigator and New Bin stay so the
   user can always switch to (or start) an ordinary bin. */
body.structural-design-active .control-section[data-section="parts-options"],
body.structural-design-active .control-section[data-section="connector"],
body.structural-design-active .bin-name-mode-row,
body.structural-design-active #ordinary-size-row,
body.structural-design-active #design-first-size-help,
body.structural-design-active #pegboard-mount-row,
body.structural-design-active .mode-and-bin-options,
body.structural-design-active #designer-duplicate,
body.structural-design-active #ai-help-open,

body.structural-design-active .output-panel,
body.structural-design-active #space-head-edit { display: none !important; }
/* Fix 2834: in structural Design the whole Build section (frame, margin and Bin actions
   row) renders as an empty box when none of its bin action buttons
   is showing. New Bin, Make full interior bin, etc. keep the body when visible. */
body.structural-design-active .control-section[data-section="build"]:not(:has(#bin-actions button:not([hidden]):not(#designer-duplicate):not(#ai-help-open))) { display: none !important; }
/* The 2D view of a structural target is the Space canvas, view only. */
body.structural-design-active #sd-workspace-host,
body.structural-design-active .canvas-wrap[data-canvas="drawer"] .dl-hint { display: none !important; }
#structural-editor-host[hidden] { display: none; }
.structural-editor { display: grid; gap: 10px; padding: 10px 12px 14px; }
.structural-editor-title { margin: 0; font-size: 14px; }
.structural-status { margin: 0; font-size: 12px; color: var(--muted); }
.structural-status.field-error { color: var(--danger, #b3261e); }
.structural-2d-badge { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(18, 38, 46, 0.86); color: #fff; font-size: 12px; }
.structural-2d-go { margin-left: 6px; padding: 2px 8px; border: 1px solid #fff; border-radius: 4px; background: transparent; color: #fff; font-size: 12px; cursor: pointer; }
body:not(.structural-design-active) .structural-2d-badge { display: none; }

/* Fix 1010: the primary with/without Connectors actions own bin output;
   duplicate generate buttons stay in the DOM for JS references but are not shown. */

.structural-saving { display: inline-flex; align-items: center; gap: 8px; }
.structural-saving[hidden] { display: none; }
.structural-saving-spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid rgba(20,108,112,.25); border-top-color: var(--teal); border-radius: 50%; animation: preview-wait-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .structural-saving-spinner { animation: none; border-color: var(--teal); } }