/* FDS extension: task-based showcase property tabs, persistent identity and actions.
   Scoped to the showcase inspector; other object and component panels keep their layout. */
.ss-editor-page #properties > .ss-showcase-inspector {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.ss-showcase-inspector :is(p, h3) { margin: 0; }
.ss-case-property-head {
  display: grid;
  gap: var(--fds-space-2);
  position: sticky;
  top: 0;
  z-index: 3;
  padding-top: var(--fds-space-2);
  background: var(--fds-bg-panel);
}
.ss-case-identity-row { display: flex; align-items: flex-start; gap: var(--fds-space-2); }
.ss-case-identity-row .ss-showcase-heading { flex: 1; min-width: 0; }
.ss-case-identity-row .ss-prop-title { display: flex; flex-wrap: wrap; column-gap: var(--fds-space-2); }
.ss-editor-page .ss-case-identity-row .ss-prop-title > span { font-size: var(--ss-type-note); }
.ss-editor-page .ss-case-lock { flex: none; padding-inline: var(--fds-space-2); }
.ss-case-lock[aria-pressed=true] { background: var(--fds-bg-muted); color: var(--fds-text-primary); }
.ss-case-identity-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-case-identity-meta:empty { display: none; }
.ss-editor-page .ss-case-identity-meta .fds-btn { padding: 0; min-height: 28px; font-size: var(--ss-type-note); }
.ss-case-placeholder { color: var(--fds-amber-700); font-size: var(--ss-type-note); }
.ss-case-property-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--fds-border);
  margin-top: var(--fds-space-1);
}
.ss-case-property-tab {
  min-width: 0;
  min-height: 38px;
  padding: var(--fds-space-2) var(--fds-space-1);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fds-text-secondary);
  font: inherit;
  font-size: var(--ss-type-body);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ss-case-property-tab[aria-selected=true] { border-bottom-color: var(--fds-action-primary); color: var(--fds-text-primary); font-weight: 600; }
.ss-case-property-tab:hover { background: var(--fds-bg-muted); }
.ss-case-property-tab:focus-visible, .ss-case-disclosure > summary:focus-visible, .ss-case-property-more > summary:focus-visible {
  outline: 2px solid var(--fds-blue-600);
  outline-offset: -2px;
}
.ss-case-property-content { min-width: 0; padding-block: var(--fds-space-4); }
.ss-case-tab-panel { display: grid; gap: var(--fds-space-5); align-content: start; min-width: 0; }
.ss-showcase-inspector [hidden] { display: none !important; }
.ss-case-property-group { gap: var(--fds-space-3); }
.ss-editor-page .ss-case-property-group > h3 { color: var(--fds-text-primary); font-size: var(--ss-type-body); letter-spacing: 0; text-transform: none; font-weight: 600; }
.ss-showcase-inspector .ss-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fds-space-3) var(--fds-space-2); }
.ss-showcase-inspector .ss-input-unit { flex-wrap: nowrap; min-width: 0; gap: var(--fds-space-1); }
.ss-showcase-inspector .ss-input-unit .fds-input { flex: 1; width: 0; min-width: 0; padding-inline: var(--fds-space-2); }
.ss-showcase-inspector .ss-unit-suffix { white-space: nowrap; font-size: var(--ss-type-note); }
.ss-case-property-group .ss-field > .fds-meta { font-size: var(--ss-type-note); margin: 0; }
.ss-editor-page .ss-case-rotate { align-self: end; min-height: var(--ss-input-height); }
.ss-case-property-overview { background: var(--fds-bg-muted); border-radius: var(--fds-radius-md); padding: var(--fds-space-3); }
.ss-editor-page .ss-case-property-overview .ss-facts { gap: var(--fds-space-2); }
.ss-editor-page .ss-case-property-overview .ss-facts > div { padding: 0; border: 0; font-size: var(--ss-type-note); }
.ss-case-disclosure { min-width: 0; border-bottom: 1px solid var(--fds-border); }
.ss-case-disclosure > summary {
  min-height: 38px;
  padding-block: var(--fds-space-2);
  color: var(--fds-text-primary);
  font-size: var(--ss-type-body);
  font-weight: 500;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ss-case-disclosure-summary { margin-inline-start: var(--fds-space-2); color: var(--fds-text-secondary); font-size: var(--ss-type-note); font-weight: 400; overflow-wrap: anywhere; }
.ss-case-disclosure-body { display: grid; gap: var(--fds-space-3); min-width: 0; padding-block: var(--fds-space-2) var(--fds-space-4); }
.ss-case-disclosure-body > :is(.ss-upper-property, .ss-light-block) { margin: 0; padding: 0; border: 0; }
.ss-case-disclosure-body > .ss-upper-property > h3 { display: none; }
.ss-showcase-inspector .ss-lighting-property { border: 0; padding: 0; margin: 0; gap: var(--fds-space-4); }
.ss-showcase-inspector .ss-lighting-property > .ss-light-head > h3 { display: none; }
.ss-showcase-inspector .ss-light-block { gap: var(--fds-space-3); }
.ss-showcase-inspector .ss-light-packages { grid-template-columns: 1fr; }
.ss-showcase-inspector .ss-light-package { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--fds-space-1) var(--fds-space-2); text-align: start; }
.ss-showcase-inspector .ss-light-package > span { color: var(--fds-text-secondary); }
.ss-showcase-inspector :is(.ss-run-property, .rw-property) { margin: 0; padding: 0; border: 0; }
.ss-case-property-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: var(--fds-space-2);
  border-top: 1px solid var(--fds-border);
  background: var(--fds-bg-panel);
  padding-block: var(--fds-space-3);
}
.ss-editor-page .ss-case-enter { flex: 1; min-width: 0; white-space: normal; }
.ss-case-property-more { flex: none; position: relative; }
.ss-case-property-more > summary { min-height: var(--ss-control-height); padding: var(--fds-space-1) var(--fds-space-2); font-size: var(--ss-type-body); cursor: pointer; }
.ss-case-property-more > .fds-btn { position: absolute; bottom: calc(100% + var(--fds-space-2)); inset-inline-end: 0; white-space: nowrap; background: var(--fds-bg-panel); border: 1px solid var(--fds-border); box-shadow: var(--fds-shadow-1); color: var(--fds-red-700); }
@media (max-width: 1023px) {
  .ss-case-property-head { position: static; }
  .ss-case-property-footer { position: static; }
}
@media (pointer: coarse) {
  .ss-case-property-tab, .ss-case-disclosure > summary, .ss-case-property-more > summary { min-height: 44px; }
  .ss-editor-page .ss-case-identity-meta .fds-btn { min-height: 44px; }
}

/* FDS extension: live dimension and position diagrams with precise slider rows. */
.ss-case-geometry-editor { display: grid; gap: var(--fds-space-3); min-width: 0; }
.ss-case-sketch { display: block; width: 100%; height: auto; overflow: visible; background: var(--fds-bg-muted); border-radius: var(--fds-radius-md); }
.ss-case-sketch-label { fill: var(--fds-text-secondary); font: 12px sans-serif; }
.ss-case-sketch-line { stroke: var(--fds-text-secondary); stroke-width: 1; }
.ss-case-sketch-accent { stroke: var(--fds-blue-600); stroke-width: 2; }
.ss-case-sketch-face { fill: var(--fds-blue-50); stroke: var(--fds-blue-600); stroke-width: 1.2; }
.ss-case-sketch-side { fill: var(--fds-gray-200); stroke: var(--fds-text-secondary); stroke-width: 1; }
.ss-case-sketch-top { fill: var(--fds-bg-panel); stroke: var(--fds-text-secondary); stroke-width: 1; }
.ss-case-sketch-room { fill: var(--fds-bg-panel); stroke: var(--fds-border-strong); stroke-width: 1.2; }
.ss-case-sketch-guide { stroke: var(--fds-blue-600); stroke-width: 1; stroke-dasharray: 3 3; }
.ss-case-sketch-point { fill: var(--fds-blue-600); }
.ss-case-slider-row { display: grid; gap: var(--fds-space-1); min-width: 0; }
.ss-case-slider-row .ss-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 48%); align-items: center; gap: var(--fds-space-2); }
.ss-case-slider-row .ss-field > :is(.fds-meta, .ss-field-error) { grid-column: 1 / -1; }
.ss-case-slider-row .ss-rule-slider { width: 100%; margin: 0; min-width: 0; accent-color: var(--fds-blue-600); }
.ss-case-slider-row .ss-rule-slider:disabled { opacity: .45; }
.ss-case-slider-row input[type=range]:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
@media (pointer: coarse) { .ss-case-slider-row .ss-rule-slider { min-height: 36px; } }

/* Compact showcase controls and one identity overview above the category tabs. */
.ss-editor-page #inspector-properties:has(.ss-showcase-inspector) > #properties-title { display: none; }
.ss-case-tab-panel { gap: var(--fds-space-4); }
.ss-case-geometry-editor { gap: var(--fds-space-2); }
.ss-case-slider-row { gap: 0; }
.ss-case-slider-row .ss-field { gap: var(--fds-space-1) var(--fds-space-2); }
.ss-editor-page .ss-case-slider-row .fds-input { height: 30px; }
.ss-case-slider-row .ss-rule-slider { height: 16px; }
.ss-case-angle-ticks { display: flex; justify-content: space-between; color: var(--fds-text-secondary); font-size: var(--ss-type-note); }
.ss-case-name-heading { min-width: 0; }
.ss-case-name-row { display: flex; align-items: center; gap: var(--fds-space-1); }
.ss-case-name-row .ss-prop-name { min-width: 0; flex: 1; }
.ss-editor-page .ss-case-edit-name { flex: none; min-height: 28px; padding: 2px 6px; font-size: var(--ss-type-note); }
.ss-case-name-editor { display: grid; gap: var(--fds-space-2); }
.ss-case-name-actions { display: flex; flex-wrap: wrap; gap: var(--fds-space-1); }
.ss-case-property-overview { padding: var(--fds-space-2) var(--fds-space-3); }
@media (pointer: coarse) {
  .ss-editor-page .ss-case-slider-row .fds-input { height: 44px; }
  .ss-case-slider-row .ss-rule-slider { height: 36px; }
  .ss-editor-page .ss-case-edit-name { min-height: 44px; }
}

/* FDS extension: fixture-type switching within the existing spotlight dialog. */
.ss-light-kind-tabs { margin: var(--fds-space-3) var(--fds-space-4) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.ss-light-kind-tabs .ss-seg-btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ss-light-kind-tabs [aria-selected=true] { background: var(--fds-blue-50); color: var(--fds-blue-600); font-weight: 600; }
.ss-light-kind-controls { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fds-space-3); }
.ss-spot-pane > .ss-light-kind-controls { grid-template-columns: minmax(0, 1fr); }
.ss-light-kind-controls > .ss-light-block { margin: 0; padding: 0; border: 0; }
.ss-light-kind-controls .ss-window-section { max-height: 280px; }
@media (max-width: 479px) { .ss-light-kind-controls { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { .ss-light-kind-tabs .ss-seg-btn { min-height: 44px; } }

/* FDS extension: stable editing column and persistent 3D preview. */
.ss-light-dialog-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fds-space-4); align-items: start; }
.ss-light-dialog-edit { display: grid; gap: var(--fds-space-3); min-width: 0; }
.ss-light-dialog-preview { position: sticky; top: 0; }
.ss-light-dialog-preview .ss-spot-3d { height: 480px; }
.ss-light-dialog-edit .ss-spot-cards { grid-template-columns: minmax(0, 1fr); }
.ss-light-fixture-picker { display: flex; gap: var(--fds-space-2); flex-wrap: wrap; }
.ss-light-fixture-picker [aria-pressed=true] { border-color: var(--fds-blue-600); background: var(--fds-blue-50); color: var(--fds-blue-600); }
.ss-light-kind-tabs .ss-seg-btn { padding-block: var(--fds-space-2); font-size: var(--ss-type-body); }
@media (max-width: 767px) {
  .ss-light-dialog-grid { grid-template-columns: minmax(0, 1fr); }
  .ss-light-dialog-preview { position: static; }
  .ss-light-dialog-preview .ss-spot-3d { height: 300px; }
}

/* FDS extension: one editing surface, compact fields and a shared fixture toolbar. */
.ss-light-dialog-edit { padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); background: var(--fds-bg-panel); gap: var(--fds-space-3); }
.ss-light-dialog-edit > .ss-spot-pane,
.ss-light-dialog-edit .ss-light-block,
.ss-light-dialog-edit .ss-spot-cards .ss-spot-card { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.ss-light-dialog-edit > .ss-spot-pane + .ss-spot-pane { padding-top: var(--fds-space-3); border-top: 1px solid var(--fds-border); }
.ss-light-dialog-edit .ss-spot-cards .ss-spot-card.is-selected { border: 0; box-shadow: none; cursor: default; }
.ss-light-edit-tools { display: flex; flex-wrap: wrap; gap: var(--fds-space-2); align-items: center; }
.ss-light-edit-tools:empty { display: none; }
.ss-light-edit-tools .ss-light-fixture-picker { flex: 1; }
.ss-light-edit-current { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fds-space-2); padding-bottom: var(--fds-space-2); border-bottom: 1px solid var(--fds-border); }
.ss-light-edit-current > strong { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: var(--ss-type-body); }
.ss-light-dialog-edit [data-table-lights] > h4 { display: none; }
.ss-light-dialog-edit [data-table-lights] > .fds-meta { margin: 0; font-size: var(--ss-type-note); }
.ss-light-dialog-edit .ss-light-kind-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fds-space-2) var(--fds-space-3); }
.ss-light-dialog-edit .ss-light-kind-controls:has(> [data-table-lights]) { grid-template-columns: minmax(0, 1fr); }
.ss-light-dialog-edit .ss-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 55%); gap: var(--fds-space-1) var(--fds-space-2); align-items: center; }
.ss-light-dialog-edit .ss-field > :is(.ss-field-error, .fds-meta) { grid-column: 1 / -1; }
.ss-light-dialog-edit .ss-field > label,
.ss-light-dialog-edit .ss-window-size > label { font-size: var(--ss-type-note); color: var(--fds-text-secondary); }
.ss-editor-page .ss-light-dialog-edit :is(.fds-input, .fds-select) { height: 32px; }
.ss-light-dialog-edit .ss-input-unit { min-width: 0; flex-wrap: nowrap; }
.ss-light-dialog-edit .ss-input-unit .fds-input { width: 0; flex: 1; min-width: 0; }
.ss-light-dialog-edit .ss-window-size { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fds-space-1); padding-block: 0; }
.ss-light-dialog-edit .ss-window-size:has(> label) { grid-template-columns: minmax(0, 1fr) minmax(100px, 55%); align-items: center; }
.ss-light-dialog-edit .ss-window-size > .ss-rule-slider { grid-column: 1 / -1; width: 100%; margin: 0; }
.ss-light-dialog-edit .ss-field-grid { gap: var(--fds-space-2); grid-template-columns: minmax(0, 1fr); }
.ss-light-dialog-edit .ss-spot-toolbar { gap: var(--fds-space-2); }
.ss-light-dialog-edit .ss-spot-toolbar .ss-light-field { flex: 1 1 160px; }
.ss-light-dialog-edit .ss-window-section { background: var(--fds-bg-muted); border-radius: var(--fds-radius-md); }
@media (max-width: 479px) {
  .ss-light-dialog-edit .ss-light-kind-controls { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .ss-editor-page .ss-light-dialog-edit :is(.fds-input, .fds-select) { height: 44px; }
}

/* FDS extension: compact showcase identity with secondary actions and facts. */
.ss-editor-page:has(.ss-showcase-inspector) .ss-inspector-tabs { border-radius: var(--fds-radius-md); padding: var(--fds-space-1); }
.ss-editor-page:has(.ss-showcase-inspector) .ss-inspector-tabs > button { min-height: 34px; padding-block: var(--fds-space-1); border-radius: var(--fds-radius-sm); font-size: var(--ss-type-body); }
.ss-editor-page:has(.ss-showcase-inspector) .ss-object-issues[data-object-issues="0"] { margin-block: var(--fds-space-2); font-size: var(--ss-type-note); color: var(--fds-text-secondary); }
.ss-case-property-head { gap: var(--fds-space-2); }
.ss-case-name-row { display: grid; gap: var(--fds-space-1); }
.ss-case-name-row .ss-prop-name { font-size: var(--ss-type-body); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ss-case-heading-tools { display: flex; gap: var(--fds-space-1); align-items: center; }
.ss-editor-page .ss-case-heading-tools .fds-btn { min-height: 28px; padding: 2px var(--fds-space-2); font-size: var(--ss-type-note); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-sm); }
.ss-case-identity-row .ss-prop-title { display: grid; gap: 2px; margin-top: var(--fds-space-2); }
.ss-editor-page .ss-case-identity-row .ss-prop-title b { font-size: var(--ss-type-note); font-weight: 500; color: var(--fds-text-secondary); overflow-wrap: anywhere; }
.ss-case-property-overview { padding: var(--fds-space-2) var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-muted); }
.ss-case-property-overview .ss-facts { margin: 0; gap: 0; }
.ss-case-property-overview .ss-facts > div { padding-block: var(--fds-space-1); gap: var(--fds-space-2); }
.ss-case-property-overview .ss-facts > div + div { border-top: 1px solid var(--fds-border); }
.ss-case-property-overview .ss-facts :is(dt, dd) { margin: 0; font-size: var(--ss-type-note); line-height: 1.5; }
.ss-case-property-overview .ss-facts dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.ss-case-placeholder { display: inline-flex; padding: 2px var(--fds-space-2); border-radius: var(--fds-radius-sm); background: var(--fds-amber-50); line-height: 1.5; }
@media (pointer: coarse) {
  .ss-editor-page .ss-case-heading-tools .fds-btn,
  .ss-editor-page:has(.ss-showcase-inspector) .ss-inspector-tabs > button { min-height: 44px; }
}
.ss-light-kind-controls .ss-strip-layout-field { grid-column: 1 / -1; }
.ss-strip-layout-field .ss-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-strip-layout-field .ss-seg-btn { padding-inline: var(--fds-space-1); white-space: normal; }
@media (max-width: 479px) {
  .ss-strip-layout-field .ss-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Keep every quantity available when the beam and rail controls appear. */
.ss-light-dialog-edit .ss-spot-toolbar .ss-spot-count-field { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fds-space-1); min-width: 0; }
.ss-spot-count-field .ss-seg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; overflow: visible; }
.ss-spot-count-field .ss-seg-btn { min-width: 0; padding-inline: 0; }
/* FDS extension: lighting sidebar overview and display-surface illuminance. */
.ss-light-sidebar-lux { display: grid; gap: var(--fds-space-2); padding: var(--fds-space-3); background: var(--fds-bg-muted); border-radius: var(--fds-radius-md); }
.ss-light-sidebar-lux h4 { margin: 0; font-size: var(--ss-type-body); }
.ss-light-sidebar-lux > svg { display: block; width: 100%; height: auto; max-height: 220px; }
.ss-light-sidebar-lux .ss-facts { gap: var(--fds-space-1); font-size: var(--ss-type-note); }
.ss-light-sidebar-lux .fds-meta { font-size: var(--ss-type-note); line-height: 1.6; }
.ss-light-sidebar-types { display: grid; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); overflow: hidden; }
.ss-light-sidebar-type { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; gap: var(--fds-space-2); align-items: center; padding: var(--fds-space-2) var(--fds-space-3); min-height: 44px; text-align: start; color: var(--fds-text-primary); background: var(--fds-bg-panel); border: 0; cursor: pointer; font: inherit; font-size: var(--ss-type-note); }
.ss-light-sidebar-type + .ss-light-sidebar-type { border-top: 1px solid var(--fds-border); }
.ss-light-sidebar-type > span { color: var(--fds-text-secondary); }
.ss-light-sidebar-type:hover { background: var(--fds-bg-muted); }
.ss-light-sidebar-type:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: -2px; }
.ss-case-property-footer { gap: var(--fds-space-4); }
.ss-editor-page .ss-case-delete { flex: none; color: var(--fds-text-secondary); font-size: var(--ss-type-note); }
.ss-editor-page .ss-case-delete:hover:not(:disabled) { color: var(--fds-red-700); }

/* FDS extension: compact capsule actions beside the showcase identity. */
.ss-case-heading-tools { gap: var(--fds-space-2); flex-wrap: wrap; }
.ss-editor-page .ss-case-heading-tools .fds-btn {
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--fds-border);
  background: var(--fds-bg-muted);
  color: var(--fds-text-secondary);
  font-size: var(--ss-type-note);
  line-height: 1.4;
}
.ss-editor-page .ss-case-heading-tools .fds-btn:hover { background: var(--fds-gray-200); color: var(--fds-text-primary); }
.ss-editor-page .ss-case-heading-tools .fds-btn:is([aria-pressed="true"], [aria-expanded="true"]) {
  background: var(--fds-blue-50);
  border-color: var(--fds-blue-600);
  color: var(--fds-blue-600);
}
.ss-case-heading-tools .fds-btn:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
@media (pointer: coarse) {
  .ss-editor-page .ss-case-heading-tools .fds-btn { min-height: 44px; }
}

/* FDS extension: transient editing feedback, with text in addition to color. */
.ss-operation-status { padding: var(--fds-space-3); border: 1px solid var(--fds-border); background: var(--fds-bg-muted); overflow-wrap: anywhere; }
.ss-operation-status[data-state=issues] { border-color: var(--fds-red-600); }
.ss-operation-origin { opacity: .35; stroke-dasharray: 30 20; }
.ss-operation-conflict { outline: 2px solid var(--fds-red-600); }
.ss-case-disclosure-body .ss-chips { flex-wrap: wrap; }
@media (pointer: coarse) { [data-operation-tools] button { min-height: 44px; } }

.ss-operation-guide { stroke: var(--fds-blue-600); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 4; }

/* FDS extension: shared batch-selection inspector. */
.ss-multi-selection { display: grid; gap: var(--fds-space-3); }
.ss-multi-selection h3, .ss-multi-selection p { margin: 0; }
.ss-multi-selection .ss-chips { flex-wrap: wrap; }
.ss-multi-selection [data-multi-remove] { max-width: 100%; overflow-wrap: anywhere; }
@media (pointer: coarse) { .ss-multi-selection button { min-height: 44px; } }

/* FDS extension: only the add entry stays at the top of the showcase rail. */
.ss-editor-page .ss-case-editor > .ss-case-tools {
  position: sticky; top: 0; z-index: 5; flex: 0 0 auto;
  background: var(--fds-bg-panel);
}
.ss-editor-page .ss-case-scroll { display: grid; gap: var(--ss-group-gap); min-width: 0; }
.ss-editor-page .ss-case-scroll .ss-case-directory { flex: none; max-height: none; overflow: visible; }
@media (min-width: 1024px) {
  .ss-editor-page .ss-step-panel > div > .ss-case-editor { overflow: hidden; }
  .ss-editor-page .ss-case-editor > .ss-case-scroll { display: block; flex: 1 1 0; min-height: 0; overflow-y: auto; }
  .ss-editor-page .ss-case-scroll > * + * { margin-top: var(--ss-group-gap); }
}

/* Put the showcase rail's scroll track at the sidebar edge, with spacing inside. */
@media (min-width: 1024px) {
  .ss-editor-page aside.ss-editor-left:has(.ss-case-editor) { padding-inline-end: 0; scrollbar-gutter: auto; }
  .ss-editor-page .ss-case-editor > .ss-case-tools { padding-inline-end: var(--ss-panel-padding); }
  .ss-editor-page .ss-case-editor > .ss-case-scroll { padding-inline-end: var(--ss-panel-padding); }
}

.ss-editor-page .ss-case-editor > .ss-case-tools { border-bottom: 1px solid var(--fds-border); }

/* FDS extension: compact catalog picker with stationary tabs and placement actions. */
.ss-add-panel { display: flex; flex-direction: column; overflow: hidden; gap: var(--fds-space-3); }
.ss-add-panel-head { flex: none; margin-bottom: 0; }
.ss-add-panel > .ss-add-options { min-height: 0; overflow-y: auto; flex: 1 1 auto; padding-inline-end: var(--fds-space-1); }
.ss-add-panel .ss-add-classification { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: var(--fds-space-2); }
.ss-add-panel .ss-add-classification .ss-add-label { margin: 0; font-size: 12px; }
.ss-add-panel .ss-case-choice button { min-height: 32px; padding: var(--fds-space-1) var(--fds-space-2); }
.ss-add-panel .ss-tile { flex-direction: row; justify-content: center; min-height: 36px; padding: var(--fds-space-1); border-radius: var(--fds-radius-md); font-size: 12px; }
.ss-add-panel .ss-tile .ci { width: 22px; height: 20px; flex: none; }
.ss-add-panel .ss-tile.is-selected { border-color: var(--fds-blue-600); background: var(--fds-blue-50); color: var(--fds-blue-700); }
.ss-add-panel .ss-tile:disabled { opacity: .6; }
.ss-add-panel .ss-tiles.ss-case-footprints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-add-panel .ss-template-grid { grid-template-columns: 1fr; }
.ss-add-panel .ss-template-card { grid-template-columns: 88px minmax(0, 1fr); align-items: center; padding: var(--fds-space-2); background: var(--fds-bg-panel); }
.ss-add-panel .ss-template-card.is-selected { background: var(--fds-blue-50); box-shadow: none; }
.ss-add-panel .ss-template-copy { display: grid; gap: var(--fds-space-1); }
.ss-add-panel .ss-template-copy strong { font-size: 13px; }
.ss-add-panel .ss-template-copy .fds-meta { font-size: 11px; }
.ss-add-panel .ss-template-card:focus-visible, .ss-add-panel input:focus-visible { outline: 1px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-add-panel .ss-add-fixed-size strong { min-height: 32px; display: flex; align-items: center; font-size: 13px; font-weight: 500; }
.ss-add-panel-actions { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--fds-space-2); padding-block: var(--fds-space-3) var(--fds-space-1); background: var(--fds-bg-panel); border-top: 1px solid var(--fds-border); }
.ss-add-panel-actions .ss-check { grid-column: 1 / -1; }
.ss-add-direct { font-size: 12px; }
.ss-add-direct summary { cursor: pointer; color: var(--fds-text-secondary); }
.ss-add-direct > button { margin-top: var(--fds-space-2); }
@media (pointer: coarse) {
  .ss-add-panel .ss-tile, .ss-add-panel .ss-case-choice button, .ss-add-panel-actions button { min-height: 44px; }
}

.ss-add-panel .ss-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-add-panel .ss-template-card { grid-template-columns: 1fr; align-content: start; }
.ss-add-panel .ss-template-thumbnail { width: 100%; max-height: 74px; }

/* Separate elevation and plan choices without changing their terminology. */
.ss-add-panel :is(.ss-add-form-group, .ss-add-footprint-group) { grid-template-columns: 1fr; padding: var(--fds-space-2); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); gap: var(--fds-space-2); }
.ss-add-panel .ss-add-form-group { background: var(--fds-bg-muted); }
.ss-add-panel .ss-add-footprint-group { background: var(--fds-bg-panel); }
.ss-add-panel :is(.ss-add-form-group, .ss-add-footprint-group) > .ss-add-label { font-weight: 600; color: var(--fds-text-primary); }
.ss-add-panel .ss-add-footprint-group .ss-case-footprints { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-add-panel .ss-add-footprint-group .ss-tile { flex-direction: column; gap: var(--fds-space-1); }
.ss-add-panel .ss-add-footprint-group .ss-tile .ci { width: 30px; height: 22px; }

.ss-add-panel :is(.ss-add-form-group, .ss-add-footprint-group, .ss-add-spec-group) { display: grid; background: var(--fds-bg-panel); padding: var(--fds-space-2); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); gap: var(--fds-space-2); }
.ss-add-panel :is(.ss-add-classification > .ss-add-label, .ss-add-spec-group > .ss-add-label, .ss-case-library > strong) { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--fds-text-primary); margin: 0; }
.ss-add-panel .ss-template-card[draggable="true"] { cursor: grab; }
.ss-add-panel .ss-template-card[draggable="true"]:active { cursor: grabbing; }
/* Touch drag: a vertical swipe scrolls the list, a hold or sideways move lifts the card (case-drag.js). */
.ss-add-panel .ss-template-card[data-add-touch-drag] { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.is-add-dragging .ss-add-scrim { display: none; }
/* The label that follows a finger while a card is dragged (ui/touch-drag.js). */
.ss-touch-drag-chip { position: fixed; left: 0; top: 0; z-index: 60; margin: -56px 0 0 -24px; padding: var(--fds-space-1) var(--fds-space-3); border: 1px solid var(--fds-blue-600); border-radius: var(--fds-radius-md); background: var(--fds-blue-50); color: var(--fds-blue-700); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--fds-shadow-2); }

.ss-editor-page .ss-case-scroll > .ss-showcase-generation { border-top: 0; padding-top: 0; }
.ss-case-notice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--fds-space-2); padding: var(--fds-space-2); }
.ss-case-notice details { min-width: 0; }
.ss-case-notice summary { cursor: pointer; overflow-wrap: anywhere; font-size: var(--ss-type-note); }
.ss-case-notice details p { margin-top: var(--fds-space-2); max-height: 220px; overflow: auto; overflow-wrap: anywhere; font-size: var(--ss-type-note); }
.ss-case-notice .fds-btn { padding-inline: var(--fds-space-2); }

@media (min-width: 1024px) {
  .ss-editor-page .ss-step-panel > div > .ss-case-editor { margin-inline-start: calc(-1 * var(--ss-panel-padding)); }
  .ss-editor-page .ss-case-editor > :is(.ss-case-tools, .ss-case-scroll) { padding-inline-start: var(--ss-panel-padding); }
}

/* Expand the plan while adding; the right inspector returns afterwards. */
.ss-editor-page.is-showcase-adding .ss-editor-right { display: none; }
@media (min-width: 1024px) {
  .ss-editor-page.is-showcase-adding .ss-editor { grid-template-columns: var(--ss-rail-width, 64px) 240px minmax(0, 1fr); }
  .ss-editor-page.is-showcase-adding.is-panel-collapsed .ss-editor { grid-template-columns: var(--ss-rail-width, 64px) minmax(0, 1fr); }
  .ss-editor-page.is-showcase-adding #stage > .plan-svg { width: 100%; height: 100%; max-height: 100%; }
  .ss-editor-page.is-showcase-adding:has(.ss-add-panel):not(.is-add-dragging) #stage { padding-inline-start: min(404px, 42%); box-sizing: border-box; }
}

.ss-window-directory-group { padding-inline-start: var(--fds-space-2); }
.ss-window-directory-group > summary { cursor: pointer; padding-block: var(--fds-space-2); }
.ss-window-directory-name { font: inherit; color: var(--fds-text-primary); background: transparent; border: 0; padding: var(--fds-space-1); cursor: pointer; text-align: start; }
.ss-window-directory-name:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-window-directory-group .ss-object-list { border-inline-start: 1px solid var(--fds-border); padding-inline-start: var(--fds-space-2); }

.ss-current-wall-finish { display: flex; align-items: center; gap: var(--fds-space-2); }
.ss-current-wall-finish img { width: 72px; height: 44px; object-fit: cover; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-sm); }
.ss-current-wall-finish > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.ss-feature-wall-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ss-feature-wall-parameters > * { min-width: 0; }
.ss-feature-wall-parameters .ss-input-unit .fds-input { width: 0; min-width: 0; flex: 1; }

.ss-inline-wall-finishes { margin-top: var(--fds-space-3); }
@media (max-width: 1023px) {
  .ss-editor-page .ss-case-editor > .ss-case-scroll { max-height: 440px; overflow-y: auto; }
}
.ss-window-finish-section { padding-block: var(--fds-space-3); }
.ss-window-finish-section + .ss-window-finish-section { border-top: 1px solid var(--fds-border); margin-top: var(--fds-space-3); padding-top: var(--fds-space-4); }
.ss-field > .ss-window-finish-title { display: block; color: var(--fds-text-primary); font-weight: 700; margin-bottom: var(--fds-space-2); }

/* FDS extension: grouped upper-display controls and a live brand-panel sample. */
.ss-upper-property[data-upper-property] { display: grid; gap: var(--fds-space-3); min-width: 0; }
.ss-upper-property .ss-upper-block { display: grid; gap: var(--fds-space-3); padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-primary, var(--fds-white)); min-width: 0; }
.ss-upper-block h4, .ss-upper-block p, .ss-upper-brand-preview { margin: 0; }
.ss-upper-block h4 { font-size: 13px; font-weight: 600; color: var(--fds-text-primary); }
.ss-upper-block > .ss-check { display: flex; align-items: center; min-height: 44px; }
.ss-upper-block .ss-run-actions { display: flex; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-upper-brand-preview { padding: var(--fds-space-3); border-radius: var(--fds-radius-md); background: var(--fds-gray-50); }
.ss-upper-brand-face { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 8px; overflow: hidden; box-sizing: border-box; color: var(--fds-white); border-radius: 3px 3px 0 0; }
.ss-upper-brand-face img { width: auto; height: auto; object-fit: contain; }
.ss-upper-preview-shelves { height: 52px; border-inline: 4px solid var(--fds-gray-300); display: grid; align-content: space-evenly; background: var(--fds-white); }
.ss-upper-preview-shelves span { border-top: 3px solid var(--fds-gray-300); }
.ss-upper-brand-preview figcaption { margin-top: var(--fds-space-2); }
.ss-upper-slider-track { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--fds-space-2); }
.ss-upper-slider-track .ss-rule-slider { min-height: 36px; }
.ss-upper-slider-value { color: var(--fds-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 52px; text-align: end; }
.ss-upper-brand .ss-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)); }
.ss-upper-brand .ss-color-chip { min-width: 0; min-height: 44px; }
.ss-upper-color-field { display: grid; gap: var(--fds-space-2); }
.ss-upper-logo-title { padding-top: var(--fds-space-3); border-top: 1px solid var(--fds-border); }

/* FDS extension: transactional upper-cabinet configurator. */
.ss-upper-dialog { width: min(1200px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); color: var(--fds-text-primary); background: var(--fds-white); overflow: hidden; }
.ss-upper-dialog[open] { display: flex; flex-direction: column; }
.ss-upper-dialog::backdrop { background: rgb(15 23 42 / 48%); }
.ss-upper-dialog-head, .ss-upper-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fds-space-3); padding: var(--fds-space-3) var(--fds-space-4); flex: 0 0 auto; }
.ss-upper-dialog-head { border-bottom: 1px solid var(--fds-border); }
.ss-upper-dialog-head h2 { font-size: 18px; margin: 0 0 4px; }
.ss-upper-dialog-head p { margin: 0; }
.ss-upper-dialog-foot { border-top: 1px solid var(--fds-border); }
.ss-upper-dialog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); min-height: 0; flex: 1; }
.ss-upper-dialog-scene { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fds-gray-50); }
.ss-upper-dialog-scene > p { padding-inline: var(--fds-space-4); }
.ss-upper-dialog-view { position: relative; min-height: 240px; flex: 1; overflow: hidden; }
.ss-upper-dialog-controls { padding: var(--fds-space-4); overflow-y: auto; overscroll-behavior: contain; min-width: 0; border-inline-start: 1px solid var(--fds-border); }
.ss-upper-dialog-controls .ss-upper-block { padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); display: grid; gap: var(--fds-space-3); min-width: 0; margin-block: var(--fds-space-3); }
.ss-upper-dialog-controls h3 { font-size: 15px; margin: 0; }
.ss-upper-dialog-controls .ss-upper-property > h3 { display: none; }
.ss-upper-dialog-controls .ss-colors { display: grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); }
.ss-upper-dialog-controls .ss-color-chip { min-width: 0; min-height: 44px; }
.ss-upper-mode, .ss-upper-column-tabs { display: flex; gap: var(--fds-space-2); flex-wrap: wrap; }
.ss-upper-mode button[aria-pressed=true], .ss-upper-column-tabs button[aria-pressed=true] { border-color: var(--fds-blue-600); background: var(--fds-blue-50); color: var(--fds-blue-600); }
.ss-upper-dialog-errors { font-size: 12px; max-height: 70px; overflow: auto; color: var(--fds-red-700); }
.ss-upper-dialog-errors p { margin: 0; }
.ss-upper-entry { display: grid; gap: var(--fds-space-2); }
@media (max-width: 700px) {
 .ss-upper-dialog { width: 100vw; height: 100dvh; border-radius: 0; max-height: 100dvh; margin: 0; }
 .ss-upper-dialog-layout { display: flex; flex-direction: column; }
 .ss-upper-dialog-scene { height: 30dvh; flex: 0 0 auto; }
 .ss-upper-dialog-view { min-height: 0; }
 .ss-upper-dialog-scene > p { font-size: 11px; margin: 4px 0; }
 .ss-upper-dialog-controls { border-inline-start: 0; border-top: 1px solid var(--fds-border); }
 .ss-upper-dialog-head { padding: 12px; }
 .ss-upper-dialog-head h2 { font-size: 16px; }
 .ss-upper-dialog-head p { max-width: 240px; font-size: 11px; }
}

/* FDS extension: touch-sized numeric sliders in the wall-cabinet dialog. */
.ss-upper-grid-slider .ss-rule-slider { width: 100%; min-width: 0; min-height: 36px; margin: 0; accent-color: var(--fds-blue-600); }
.ss-upper-grid-slider .ss-rule-slider:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-upper-grid-slider .ss-rule-slider:disabled { opacity: .45; }
@media (pointer: coarse) { .ss-upper-grid-slider .ss-rule-slider { min-height: 44px; } }

/* FDS extension: model-picked cabinet-part properties. */
.ss-upper-part-select { margin: 8px 16px 0; width: calc(100% - 32px); min-height: 44px; flex: 0 0 auto; }
.ss-upper-part-properties { display: grid; gap: var(--fds-space-3); min-width: 0; }
.ss-upper-part-properties:focus { outline: none; }
.ss-upper-part-heading { display: flex; justify-content: space-between; gap: var(--fds-space-2); align-items: center; padding-bottom: var(--fds-space-3); border-bottom: 1px solid var(--fds-border); }
.ss-upper-part-heading h3 { color: var(--fds-blue-600); }
.ss-upper-part-properties .ss-color-chip { min-height: 44px; }