/* FDS extension: approved editor capsule controls; vendor tokens stay unchanged. */
.ss-editor-page .fds-btn,
.ss-editor-page .ss-tab,
.ss-editor-page .ss-step {
  border-radius: var(--fds-radius-pill);
}
.ss-editor-page .ss-step { padding-inline: var(--fds-space-3); }
.ss-editor-page .ss-steps { gap: var(--fds-space-1); }
.ss-editor-page .fds-segmented {
  border-radius: var(--fds-radius-pill);
  padding: var(--fds-space-1);
  gap: var(--fds-space-1);
  background: var(--fds-bg-muted);
  border-color: transparent;
}
.ss-editor-page .fds-segmented button {
  border: 0;
  border-radius: var(--fds-radius-pill);
  background: transparent;
  color: var(--fds-text-secondary);
}
.ss-editor-page .fds-segmented .is-selected {
  color: var(--fds-text-primary);
  background: var(--fds-bg-panel);
  box-shadow: var(--fds-shadow-1);
  font-weight: 600;
}
.ss-editor-page .ss-toolbar .fds-segmented { gap: 2px; }
.ss-editor-page .ss-toolbar .fds-segmented button { padding-inline: var(--fds-space-2); }
.ss-view-actions {
  position: absolute;
  top: var(--fds-space-3);
  right: var(--fds-space-3);
  display: flex;
  gap: var(--fds-space-1);
  padding: var(--fds-space-1);
  background: var(--fds-bg-panel);
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-pill);
  box-shadow: var(--fds-shadow-1);
}
.ss-view-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fds-space-2);
  min-height: 30px;
  padding: 0 var(--fds-space-2);
  border: 0;
  border-radius: var(--fds-radius-pill);
  background: var(--fds-bg-panel);
  color: var(--fds-text-primary);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
}
.ss-view-action:hover { background: var(--fds-bg-muted); }
.ss-view-action:focus-visible { outline: 2px solid var(--fds-black); outline-offset: 2px; }
.ss-view-action svg { width: 15px; height: 15px; }
.ss-view-expanded { overflow: hidden; }
.ss-editor-page .ss-3d-host:fullscreen,
.ss-editor-page .ss-3d-host.is-expanded {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--fds-bg-muted);
}
.ss-editor-page .ss-3d-host.is-expanded { position: fixed; inset: 0; z-index: 100; }
.ss-3d-host:fullscreen .ss-view-actions,
.ss-3d-host.is-expanded .ss-view-actions {
  top: max(var(--fds-space-4), env(safe-area-inset-top));
  right: max(var(--fds-space-4), env(safe-area-inset-right));
}
@media (max-width: 760px) {
  .ss-view-actions { top: var(--fds-space-2); right: var(--fds-space-2); }
  .ss-view-action { padding-inline: var(--fds-space-2); }
  .ss-editor-page .ss-editor-top > .ss-grow { display: none; }
  .ss-editor-page .ss-save-group { margin-left: auto; }
}

/* FDS extension: compact editor workspaces and showcase directory. */
.ss-editor-page { --ss-workspace-height: 42px; }
.ss-workspace-bar {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 3px var(--fds-space-4); border-bottom: 1px solid var(--fds-border);
  background: var(--fds-bg-panel); z-index: 10;
}
.ss-workspace-bar #stage-status { margin-left: auto; flex-shrink: 0; font-size: 12px; }
.ss-editor-page .ss-workspaces {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  flex: 0 1 auto; padding: 0;
}
.ss-editor-page .ss-workspaces .ss-step { justify-content: center; min-height: 34px; padding: 0 20px; font-size: 13px; }
.ss-editor-page .ss-editor { min-height: calc(100dvh - var(--fds-topbar) - var(--ss-workspace-height)); }
.ss-editor-page .ss-editor-left, .ss-editor-page .ss-editor-right {
  top: calc(var(--fds-topbar) + var(--ss-workspace-height));
  max-height: calc(100dvh - var(--fds-topbar) - var(--ss-workspace-height));
}
.ss-step-panel > div > div:not(.ss-notice) { display: grid; gap: var(--fds-space-4); }
.ss-case-group { min-width: 0; }
.ss-case-group > summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; list-style: none;
}
.ss-case-group > summary::before { content: '›'; width: 10px; transform: rotate(0deg); }
.ss-case-group[open] > summary::before { transform: rotate(90deg); }
.ss-case-count { margin-left: auto; font-weight: 400; color: var(--fds-text-secondary); }
.ss-case-group + .ss-case-group { margin-top: 12px; border-top: 1px solid var(--fds-border); }
.ss-case-group .ss-object-list { display: grid; gap: 4px; }
.ss-editor-page .ss-case-item { width: 100%; align-items: center; min-height: 48px; padding: 8px; gap: 6px; }
.ss-case-copy { display: grid; gap: 3px; min-width: 0; }
.ss-case-code { font-size: 12px; font-weight: 500; white-space: nowrap; }
.ss-case-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-case-name + .ss-case-code, .ss-case-size { color: var(--fds-text-secondary); font-size: 12px; }
.ss-editor-page .ss-case-item[aria-pressed="true"] { background: var(--fds-blue-50); border-color: var(--fds-blue-600); box-shadow: inset 2px 0 var(--fds-blue-600); }
.ss-high-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; flex-shrink: 0; color: var(--fds-text-secondary); }
.ss-high-icon { width: 9px; height: 16px; display: inline-block; border: 1px solid currentColor; border-radius: 2px; background: linear-gradient(transparent 65%, currentColor 65%, currentColor 70%, transparent 70%); }
.ss-case-footer { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--fds-border); }
:is(.ss-add-case, .ss-add-run) > summary { border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-pill); padding: 10px 12px; text-align: center; font-size: 13px; cursor: pointer; }
.ss-add-options { display: grid; gap: 8px; padding-top: 12px; }
/* U-shaped run form (R3) sits right below the single showcase form. */
.ss-add-run { margin-top: 8px; }
.ss-run-dimensions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ss-run-dimensions .ss-field { display: grid; grid-template-columns: 5em minmax(0, 1fr); align-items: center; gap: 8px; }
.ss-snap-control { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); font-size: 12px; min-height: 36px; }
.ss-snap-control > label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ss-snap-control svg { width: 15px; height: 15px; }
.ss-snap-control input { appearance: none; width: 26px; height: 16px; border-radius: 12px; background: var(--fds-gray-400); margin: 0; position: relative; cursor: pointer; }
.ss-snap-control input::after { content: ''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; border-radius: 50%; background: var(--fds-white); }
.ss-snap-control input:checked { background: var(--fds-blue-600); }
.ss-snap-control input:checked::after { left: 12px; }
.ss-snap-extra { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; max-width: 180px; padding-left: 4px; overflow: hidden; white-space: nowrap; transition: max-width .22s ease, opacity .18s ease, visibility 0s linear 0s; }
.ss-snap-control { transition: padding .22s ease; }
.ss-snap-control.is-off .ss-snap-extra { max-width: 0; padding-left: 0; opacity: 0; visibility: hidden; transition: max-width .22s ease, opacity .12s ease, visibility 0s linear .22s; }
.ss-snap-value { border: 0; border-left: 1px solid var(--fds-border); background: none; color: inherit; font: inherit; padding: 2px 6px 2px 8px; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 0 var(--fds-radius-sm) var(--fds-radius-sm) 0; }
.ss-snap-value:hover { background: var(--fds-bg-muted); }
.ss-snap-value:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-snap-control { position: relative; }
.ss-snap-control.is-menu-open .ss-snap-value { background: var(--fds-bg-muted); }
.ss-snap-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; display: grid; gap: 2px; min-width: 150px; padding: 6px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-2); animation: ss-snap-rise .18s ease-out; }
.ss-snap-menu[hidden] { display: none; }
.ss-snap-menu-title { margin: 2px 6px 4px; font-size: 11px; color: var(--fds-text-secondary); white-space: nowrap; }
.ss-snap-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--fds-radius-sm); background: none; color: var(--fds-text-primary); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; white-space: nowrap; }
.ss-snap-menu button:hover { background: var(--fds-bg-muted); }
.ss-snap-menu button[aria-pressed="true"] { background: var(--fds-blue-50); color: var(--fds-blue-600); font-weight: 600; }
.ss-snap-menu button:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: -2px; }
.ss-snap-menu small { font-size: 11px; font-weight: 400; color: var(--fds-text-secondary); }
@keyframes ss-snap-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-snap-extra, .ss-snap-control.is-off .ss-snap-extra { transition: none; } .ss-snap-menu { animation: none; } }
.ss-snap-control[hidden], .ss-3d-material[hidden] { display: none; }
.ss-snap-help summary { display: grid; place-items: center; width: 24px; height: 24px; cursor: pointer; list-style: none; border-radius: 50%; }
.ss-snap-help summary::-webkit-details-marker { display: none; }
.ss-snap-help summary:hover { background: var(--fds-bg-muted); }
.ss-snap-help summary:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-snap-help p { position: absolute; bottom: calc(100% + 8px); left: 12px; width: min(300px, calc(100vw - 24px)); margin: 0; padding: 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); font-size: 13px; line-height: 1.65; z-index: 12; }
.ss-case-group summary:focus-visible, .ss-add-case summary:focus-visible, .ss-add-run summary:focus-visible, .ss-view-help summary:focus-visible, .ss-snap-control input:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 3px; }
.ss-view-help { position: relative; margin-left: auto; font-size: 12px; }
.ss-view-help summary { cursor: pointer; padding: 8px; }
.ss-view-help p { position: absolute; bottom: 100%; right: 0; width: min(280px, 70vw); padding: 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); z-index: 8; }
.ss-editor-page .ss-3d-foot { align-items: center; margin-top: 0; }
.plan-selection { stroke: var(--fds-blue-600); }
@media (min-width: 1024px) {
  .ss-editor-page .ss-editor-left:has(.ss-case-editor) { display: flex; flex-direction: column; height: calc(100dvh - var(--fds-topbar) - var(--ss-workspace-height)); overflow: hidden; }
  .ss-editor-left:has(.ss-case-editor) .ss-step-panel, .ss-editor-left:has(.ss-case-editor) .ss-step-panel > div { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .ss-step-panel > div > .ss-case-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .ss-case-editor .ss-case-directory { overflow-y: auto; min-height: 0; flex: 1; }
}
@media (max-width: 1023px) {
  .ss-workspace-bar { flex-wrap: wrap; gap: 0 8px; padding: 3px 8px; }
  .ss-editor-page .ss-workspaces { flex: 1; justify-content: space-between; }
  .ss-editor-page .ss-workspaces .ss-step { padding-inline: 8px; min-height: 36px; font-size: 12px; }
  .ss-editor-page .ss-editor-left, .ss-editor-page .ss-editor-right { position: static; max-height: none; }
  .ss-case-editor .ss-case-directory { max-height: 440px; overflow-y: auto; }
  .ss-case-item { min-height: 48px; }
}

.ss-case-code, .ss-case-name, .ss-case-size { line-height: 1.35; }

/* FDS extension: bounded stage with compact overlays; side panels scroll independently. */
.ss-editor-page .ss-editor-stage { grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ss-stage-viewport { position: relative; min-width: 0; min-height: 0; }
.ss-editor-page .ss-stage-head { position: absolute; top: 12px; left: 12px; right: 12px; padding: 0; z-index: 2; pointer-events: none; }
.ss-stage-head > div { min-width: 0; max-width: 100%; padding: 6px 10px; border-radius: var(--fds-radius-pill); background: var(--fds-bg-panel); }
.ss-stage-head #stage-eyebrow { display: none; }
.ss-stage-head #stage-title { font-size: 12px; line-height: 20px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-editor-page[data-view="2d"] .ss-stage-head { right: 12px; }
.ss-editor-page .ss-editor-canvas { position: absolute; inset: 0; display: block; padding: 0; min-height: 0; }
.ss-editor-page .ss-editor-canvas .plan-svg { width: 100%; height: 100%; max-height: none; padding: 48px 16px 16px; }
.ss-editor-page .ss-3d-host:not(:fullscreen):not(.is-expanded) { position: absolute; inset: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.ss-editor-page .ss-3d-foot { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; margin: 0; pointer-events: none; }
.ss-3d-foot > * { pointer-events: auto; }
.ss-editor-page .ss-3d-material { gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); font-size: 12px; }
.ss-editor-page .ss-3d-material { display: inline-flex; align-items: center; white-space: nowrap; }
.ss-editor-page .ss-3d-material > label { display: inline-flex; align-items: center; gap: 8px; }
/* Cabinet lighting (CLS-0) shares the material capsule: a toggle, and a colour-temperature select while it is on. */
.ss-editor-page .ss-3d-material .ss-3d-lighting { margin: 0; gap: 6px; font-size: 12px; white-space: nowrap; }
.ss-editor-page .ss-3d-material #cabinet-cct[hidden] { display: none; }
@media (max-width: 767px) {
  /* Phones: the toggle keeps its accessible name, but only the box shows, so the capsule stays one line high. */
  .ss-editor-page .ss-3d-material .ss-3d-lighting > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ss-editor-page .ss-3d-material .ss-3d-lighting { position: relative; }
}
.ss-editor-page .ss-3d-material .fds-select { min-width: 0; min-height: 28px; height: 28px; font-size: 12px; border: 0; border-radius: var(--fds-radius-pill); padding-block: 0; }
.ss-3d-foot .ss-view-help > summary { border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-bg-panel); padding: 6px 10px; }
.ss-editor-page .ss-toolbar { position: relative; bottom: auto; z-index: 3; }
@media (min-width: 1024px) {
  .ss-editor-page:not(.is-start-failed) { height: 100dvh; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
  .ss-editor-page .ss-editor { min-height: 0; overflow: hidden; }
  .ss-editor-page .ss-editor-left, .ss-editor-page .ss-editor-right,
  .ss-editor-page .ss-editor-left:has(.ss-case-editor) { position: static; min-height: 0; height: 100%; max-height: none; }
}
@media (max-width: 1023px) {
  .ss-editor-page .ss-stage-viewport { height: clamp(320px, 60dvh, 680px); }
  .ss-editor-page .ss-editor { min-height: 0; }
  .ss-editor-page .ss-stage-head { right: 156px; left: 8px; top: 8px; }
}
@media (max-width: 480px) {
  .ss-workspace-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; padding-inline: 6px; }
  .ss-editor-page .ss-workspaces { gap: 0; }
  .ss-editor-page .ss-workspaces .ss-step { padding-inline: 5px; }
  .ss-workspace-bar #stage-status { padding-inline: 4px; font-size: 11px; }
  .ss-view-action { gap: 4px; padding-inline: 6px; font-size: 12px; }
  .ss-view-actions { gap: 0; padding: 2px; }
  .ss-stage-head > div { padding-inline: 8px; }
}
@media (pointer: coarse) {
  .ss-view-action { min-height: 40px; }
  .ss-snap-help summary { width: 32px; height: 32px; }
}
.is-start-failed .ss-workspace-bar { display: none; }

/* FDS extension: settings icon, company brand, settings dialog with menu and content. */
.ss-project-menu .ss-project-gear { width: 16px; height: 16px; flex: 0 0 auto; color: var(--fds-text-secondary); }
.ss-project-menu:hover .ss-project-gear { color: var(--fds-text-primary); }
.ss-dialog.ss-settings-dialog { width: min(860px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
/* Fixed height, so switching sections never moves the dialog. */
.ss-settings { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); height: min(620px, calc(100dvh - 32px)); }
.ss-settings-nav { display: grid; align-content: start; gap: 2px; padding: 20px 12px; background: var(--fds-gray-50); border-right: 1px solid var(--fds-border); }
.ss-settings-nav h2 { margin: 0 10px 12px; font-size: 16px; }
.ss-settings-nav button { font: inherit; font-size: 13px; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fds-text-secondary); cursor: pointer; }
.ss-settings-nav button:hover { background: var(--fds-gray-100); color: var(--fds-text-primary); }
.ss-settings-nav button.is-selected { background: var(--fds-white); color: var(--fds-text-primary); font-weight: 600; box-shadow: 0 0 0 1px var(--fds-border); }
.ss-settings-nav button:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 1px; }
.ss-settings-body { padding: 24px 28px 64px; overflow-y: auto; min-width: 0; }
.ss-settings-body section { display: grid; gap: 14px; align-content: start; }
.ss-settings-body h3 { margin: 0; font-size: 18px; }
.ss-settings-body .ss-language label { display: grid; gap: 6px; }
.ss-settings-body .ss-help-link { justify-self: start; }
.ss-settings-close { position: absolute; top: 14px; right: 16px; z-index: 2; margin: 0; border-radius: var(--fds-radius-sm); background: var(--fds-bg-panel); }
@media (max-width: 599px) {
  .ss-settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ss-settings-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; align-items: center; padding: 12px; border-right: 0; border-bottom: 1px solid var(--fds-border); }
  .ss-settings-nav h2 { margin: 0 8px 0 0; }
  .ss-settings-body { padding: 18px 16px 20px; }
  .ss-settings { grid-template-rows: auto minmax(0, 1fr) auto; }
  .ss-settings-close { position: static; display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--fds-border); }
}

/* FDS extension: bottom-right current unit that slides out the unit choices. */
.ss-unit-picker { position: relative; display: inline-flex; align-items: center; }
/* Choices float to the left of the current unit, so the toolbar never reflows. */
.ss-unit-picker #unit-switch { position: absolute; right: calc(100% + 6px); top: 50%; translate: 0 -50%; z-index: 20; width: max-content; flex-wrap: nowrap; white-space: nowrap; background: var(--fds-white); box-shadow: var(--fds-shadow-2); }
.ss-unit-current { font: inherit; font-size: 12px; font-weight: 600; min-height: 36px; min-width: 52px; padding: 0 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-white); color: var(--fds-text-primary); cursor: pointer; font-variant-numeric: tabular-nums; }
.ss-unit-current { display: inline-flex; align-items: center; gap: 6px; }
.ss-unit-name { font-weight: 400; color: var(--fds-text-secondary); }
.ss-unit-current:hover, .ss-unit-picker.is-open .ss-unit-current { border-color: var(--fds-text-primary); }
.ss-unit-picker #unit-switch { animation: ss-unit-slide .16s ease-out; }
@keyframes ss-unit-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ss-unit-picker #unit-switch { animation: none; } }
.ss-settings-body .ss-language label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss-settings-body .ss-language { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ss-unit-picker.opens-right #unit-switch { right: auto; left: calc(100% + 6px); }

/* FDS extension: settings panes for display preferences, local data and shortcuts. */
.ss-settings-form { display: grid; gap: 12px; max-width: 460px; }
.ss-settings-form h4, .ss-settings-body h4 { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.ss-settings-form .ss-field { margin: 0; }
.ss-settings-form > .fds-btn { justify-self: start; }
.ss-settings-form .fds-segmented { width: max-content; max-width: 100%; }
.ss-settings-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--fds-text-secondary); }
.ss-settings-drafts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ss-settings-drafts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); }
.ss-settings-drafts li > div { display: grid; gap: 2px; min-width: 0; }
.ss-settings-drafts strong { font-size: 13px; overflow-wrap: anywhere; }
.ss-shortcuts { display: grid; gap: 6px; margin: 8px 0 0; }
.ss-shortcuts > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 13px; }
.ss-shortcuts dt, .ss-shortcuts dd { margin: 0; }
.ss-shortcuts kbd { font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; padding: 1px 6px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-sm); background: var(--fds-bg-muted); white-space: nowrap; }
@media (max-width: 480px) { .ss-shortcuts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* FDS extension: project name with its save button inside the field. */
.ss-name-field { display: flex; align-items: center; gap: 8px; }
.ss-name-field .fds-input { flex: 1 1 auto; min-width: 0; width: auto; }
.ss-name-field .ss-name-save { flex: none; position: static; translate: none; min-height: var(--ss-input-height, 34px); height: var(--ss-input-height, 34px); padding: 0 16px; font-size: 13px; }
.ss-name-field .ss-name-save:disabled { background: var(--fds-bg-muted); border-color: var(--fds-border); color: var(--fds-text-muted); opacity: 1; }

/* FDS extension: floating stage controls share one capsule — 34px tall, pill, hairline border,
   one shadow, 12px from the stage edge. Title top-left; material bottom-left; camera actions and
   help bottom-right; Display panel switches (with 2D zoom) top-right. */
.ss-editor-page { --ss-float-height: 34px; }
.ss-editor-page:not([data-workspace-step=fpa]) .ss-stage-head > div,
.ss-editor-page[data-workspace-step=fpa]:not([data-view="2d"]) .ss-stage-head > div,
.ss-editor-page .ss-3d-material, .ss-editor-page .ss-3d-corner {
  box-sizing: border-box; min-height: var(--ss-float-height); display: flex; align-items: center;
  border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1);
}
.ss-editor-page:not([data-workspace-step=fpa]) .ss-stage-head > div, .ss-editor-page[data-workspace-step=fpa]:not([data-view="2d"]) .ss-stage-head > div { width: fit-content; padding: 0 12px; }
.ss-editor-page .ss-3d-material { padding: 2px 4px 2px 12px; }
.ss-editor-page .ss-3d-corner { gap: 2px; margin-left: auto; padding: 3px; }
.ss-3d-corner .ss-view-actions { position: static; gap: 2px; padding: 0; border: 0; background: none; box-shadow: none; }
.ss-3d-corner .ss-view-action { min-height: 26px; padding: 0 10px; }
.ss-float-sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--fds-border); }
.ss-3d-corner .ss-view-help { margin: 0; }
.ss-3d-foot .ss-3d-corner .ss-view-help > summary { display: grid; place-items: center; width: 26px; height: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--fds-text-primary); list-style: none; }
.ss-3d-corner .ss-view-help > summary::-webkit-details-marker { display: none; }
.ss-3d-corner .ss-view-help > summary:hover { background: var(--fds-bg-muted); }
.ss-3d-corner .ss-view-help[open] > summary { background: var(--fds-blue-50); color: var(--fds-blue-600); }
.ss-3d-corner .ss-view-help svg { width: 16px; height: 16px; }
.ss-3d-corner .ss-view-help p { bottom: calc(100% + 10px); right: -3px; margin: 0; }
/* Touch: every capsule is 44px (36px targets inside), overriding the generic 44px control height. */
@media (pointer: coarse) {
  .ss-editor-page { --ss-float-height: 44px; }
  .ss-editor-page .ss-3d-corner .ss-view-action { min-height: 36px; }
  .ss-3d-foot .ss-3d-corner .ss-view-help > summary { width: 36px; height: 36px; min-height: 36px; }
  .ss-editor-page .ss-3d-foot .ss-3d-material { padding-block: 3px; }
  .ss-editor-page .ss-3d-foot .ss-3d-material .fds-select { min-height: 36px; height: 36px; }
}

/* FDS extension: editor header — SpaceScene logo (not a link), company over workspace, project name,
   scored variant tabs and a local-draft chip beside Save. */
.ss-brand-logo { display: inline-flex; align-items: center; flex: none; }
.ss-brand-logo img { display: block; height: 28px; width: auto; }
.ss-tenant-context { display: grid; min-width: 0; max-width: 200px; padding-left: 12px; border-left: 1px solid var(--fds-border); color: inherit; line-height: 1.3; text-decoration: none; }
.ss-tenant-context > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tenant-company { font-size: 11px; color: var(--fds-text-secondary); }
.ss-tenant-workspace { font-size: 13px; font-weight: 600; color: var(--fds-text-primary); }
.ss-tenant-workspace .fds-badge { min-height: 18px; padding: 0 6px; font-size: 11px; vertical-align: 1px; }
.ss-tenant-context:hover .ss-tenant-workspace { text-decoration: underline; }
.ss-tenant-context:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; border-radius: 4px; }
.ss-project-menu .ss-project { padding-left: 0; border-left: 0; }
.ss-project-menu.is-untitled .ss-project { color: var(--fds-text-muted); }
.ss-project-hint { flex: none; font-size: 12px; color: var(--fds-blue-600); white-space: nowrap; }
.ss-project-hint[hidden] { display: none; }
.ss-tab-best { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--fds-radius-pill); background: var(--fds-blue-50); color: var(--fds-blue-600); font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
.ss-draft-chip { position: relative; font-size: 12px; }
.ss-draft-chip[hidden] { display: none; }
.ss-draft-chip > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--fds-amber-700); border-radius: var(--fds-radius-pill); background: var(--fds-amber-50); color: var(--fds-amber-700); cursor: pointer; list-style: none; white-space: nowrap; }
.ss-draft-chip > summary::-webkit-details-marker { display: none; }
.ss-draft-chip > summary:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-draft-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ss-draft-chip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ss-danger-text { color: var(--fds-red-700); }
.ss-settings-tenant { display: none; }
/* Phones: two rows — logo, project and save; then the variant tabs. Company / workspace move into
   Project and settings. */
@media (max-width: 760px) {
  .ss-editor-page .ss-editor-top .ss-tenant-context { display: none; }
  .ss-editor-page .ss-brand-logo img { height: 20px; }
  .ss-editor-page .ss-editor-top { column-gap: 8px; }
  .ss-editor-page .ss-editor-top .ss-project-menu { flex: 1 1 0; min-width: 72px; max-width: none; }
  .ss-editor-page .ss-editor-top .ss-project-menu .ss-project { display: block; max-width: none; }
  .ss-editor-page .ss-save-group { flex: none; }
  .ss-draft-chip-time { display: none; }
  .ss-project-hint { display: none; }
  .ss-settings-tenant { display: block; margin: 0 10px 10px; font-size: 12px; color: var(--fds-text-secondary); overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .ss-editor-page .ss-save-details { display: none; }
}

/* Customer view (presentation design V0.1 §5.2): the store map marks the viewer
   and the stand-here arm reads as pressed. FDS extension. */
.ss-editor-page .ss-3d-material .ss-3d-finish { display: inline-flex; align-items: center; gap: 8px; }
.ss-3d-corner .ss-view-action.is-armed { background: var(--fds-blue-50); color: var(--fds-blue-600); }
.ss-3d-corner .ss-view-action[hidden] { display: none; }
.ss-walk-map .ss-walk-cone { fill: color-mix(in srgb, var(--fds-blue-600) 28%, transparent); stroke: none; }
.ss-walk-map .ss-walk-dot { fill: var(--fds-blue-600); stroke: var(--fds-white); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.ss-walk-map .plan-floor { cursor: crosshair; }
.ss-walk-map [data-map-case] { cursor: pointer; }
@media (max-width: 767px) {
  .ss-view-switch button[data-view="walk"] { padding-inline: 8px; }
}

/* Narrow stages: the corner capsule's extra actions (stand here, tour, snapshot)
   keep their icon only; their titles name them. Labels never wrap. */
.ss-3d-corner .ss-view-action > span { white-space: nowrap; }
@media (max-width: 767px) {
  .ss-3d-corner #stand-here > span, .ss-3d-corner #view-tour > span, .ss-3d-corner #view-snapshot > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ss-3d-corner #stand-here, .ss-3d-corner #view-tour, .ss-3d-corner #view-snapshot { position: relative; padding: 0 8px; }
  /* FDS extension: transient tour action sits above the compact phone capsule. */
  .ss-3d-corner #view-tour-next {
    position: absolute; right: 0; bottom: calc(var(--ss-capsule-height, 34px) + 8px); padding: 0 10px;
    height: var(--ss-capsule-height, 34px); border: 1px solid var(--fds-border);
    border-radius: var(--fds-radius-pill); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1);
  }
}

/* Customer view options (R5): evening light and reference figures in the left capsule. */
.ss-editor-page .ss-3d-material .ss-3d-walk-options { display: inline-flex; align-items: center; gap: 8px; }
.ss-editor-page .ss-3d-material .ss-3d-walk-options[hidden] { display: none; }

/* Customer view map sits above the bottom capsules at every width, never over
   them: the editor measures the capsule rows into --ss-foot-height. */
.ss-editor-page .ss-editor-canvas .ss-walk-map { bottom: calc(var(--ss-foot-height, 34px) + 20px); }
@media (max-width: 767px) {
  /* Narrow stages: the left capsule wraps its options instead of clipping them. */
  .ss-editor-page .ss-3d-material { flex-wrap: wrap; row-gap: 2px; border-radius: 14px; }
}

/* FDS extension: form details shared by the editor panels. */
/* File pickers: a real bordered field whose button and file name sit on one line. */
.ss-editor-page input[type=file], .ss-editor-page #space-outline-dialog input[type=file] { box-sizing: border-box; display: flex; align-items: center; width: 100%; height: auto; min-height: var(--ss-input-height, 34px); padding: 4px 8px; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); background: var(--fds-white); color: var(--fds-text-secondary); font: inherit; font-size: 12px; line-height: 1.4; }
.ss-editor-page input[type=file]::file-selector-button, .ss-editor-page #space-outline-dialog input[type=file]::file-selector-button { margin: 0 10px 0 0; padding: 4px 12px; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-pill); background: var(--fds-bg-muted); color: var(--fds-text-primary); font: inherit; font-size: 12px; cursor: pointer; }
/* Outline vertex fields: X and Z share a row; every number sits on one line with its unit. */
.ss-outline-vertex-panel .ss-field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ss-outline-vertex-panel .ss-input-unit { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.ss-outline-vertex-panel .ss-input-unit .fds-input { flex: 1 1 auto; min-width: 0; width: auto; }
.ss-outline-vertex-panel .ss-unit-suffix { flex: none; white-space: nowrap; }
/* Left panel: room for the scrollbar so content never touches the right border. */
.ss-editor-page aside.ss-editor-left { scrollbar-gutter: stable; padding-right: calc(var(--ss-panel-padding, 16px) + 4px); }
/* The Properties / Checks tabs carry no rule of their own. */
.ss-editor-page aside.ss-editor-right > .ss-inspector-tabs ~ .ss-panel { border-top: 0; padding-top: 0; }
.ss-editor-page .ss-inspector-tabs { border-bottom: 0; }

/* The bottom-left options capsule never outgrows the stage: long labels (English) wrap inside it. */
.ss-editor-page .ss-3d-foot .ss-3d-material { flex-wrap: wrap; max-width: 100%; row-gap: 2px; border-radius: 18px; }

/* FDS extension: one "Add" entry and its floating panel (Showcases step), with picture tiles. */
.ss-add-menu { display: grid; }
.ss-add-menu > [data-add-entry] { width: 100%; }
.ss-add-panel { position: fixed; z-index: 40; width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 16px); overflow: auto; padding: 14px; background: var(--fds-bg-panel); border: 1px solid var(--fds-border-strong); border-radius: 14px; box-shadow: var(--fds-shadow-2); font-size: 13px; }
.ss-add-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ss-add-tabs { flex: 1; }
.ss-add-tabs button { min-height: 30px; font-size: 13px; cursor: pointer; }
.ss-add-tabs [aria-selected=true] { color: var(--fds-text-primary); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); font-weight: 600; }
.ss-add-grabber, .ss-add-scrim { display: none; }
.ss-add-panel .ss-add-options { padding-top: 0; gap: 8px; }
.ss-add-hint { margin: 0; }
.ss-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ss-tiles.ss-case-footprints { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; min-width: 0; padding: 8px 2px 6px; border: 1px solid var(--fds-border); border-radius: 10px; background: var(--fds-white); color: var(--fds-text-secondary); font: inherit; font-size: 11px; line-height: 1.25; text-align: center; cursor: pointer; }
.ss-tile:hover:not(:disabled) { background: var(--fds-bg-muted); }
.ss-tile.is-selected { background: var(--fds-bg-muted); border-color: var(--fds-text-primary); color: var(--fds-text-primary); font-weight: 600; }
.ss-tile:disabled { opacity: .38; cursor: not-allowed; }
.ss-tile:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ci { width: 44px; height: 34px; display: block; }
.ci-body { fill: var(--fds-white); stroke: var(--fds-gray-600); stroke-width: 1.6; stroke-linejoin: round; }
.ci-glass { fill: #e9eef2; stroke: var(--fds-gray-600); stroke-width: 1.2; }
.ci-dim { fill: none; stroke: var(--fds-gray-400); stroke-width: 1; }
.ss-add-panel .ss-add-dimensions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ss-add-panel .ss-add-dimensions .ss-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.ss-add-panel .ss-add-dimensions select:disabled { background: var(--fds-gray-50); border-style: dashed; color: var(--fds-text-secondary); opacity: 1; }
@media (max-width: 1023px) {
  .ss-add-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(17, 24, 39, .28); }
  .ss-add-grabber { display: block; width: 100%; height: 22px; margin: -8px 0 4px; padding: 0; border: 0; background: none; cursor: pointer; }
  .ss-add-grabber::before { content: ""; display: block; width: 36px; height: 4px; margin: 9px auto 0; border-radius: 2px; background: var(--fds-gray-300); }
  .ss-add-panel { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 82dvh; border-radius: 16px 16px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .ss-tile { padding-block: 6px 4px; }
  .ci { height: 26px; }
}

/* Drag card in the Add panel: the chosen showcase, to be dropped on the plan. */
.ss-add-drag { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--fds-border-strong); border-radius: 10px; background: var(--fds-gray-50); cursor: grab; user-select: none; }
.ss-add-drag:active { cursor: grabbing; }
.ss-add-drag .ci { width: 34px; height: 26px; flex: none; }
.ss-add-drag-text { display: grid; min-width: 0; line-height: 1.3; }
.ss-add-drag-text strong { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-add-drag-text small { font-size: 11px; color: var(--fds-text-secondary); }
/* While dragging, the panel lets the plan underneath receive the drop. */
.is-add-dragging .ss-add-panel { opacity: 0; pointer-events: none; }

/* Floor and finish (floor F1/F2): a collapsible tool in the showcase step and
   faint floor zones on the editor plan. FDS extension. */
.ss-floor-tools > summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.ss-floor-tools > summary::-webkit-details-marker { display: none; }
/* Entry card (closed): the current style thumbnail, title and a chevron. */
.ss-floor-tools > .ss-floor-entry { list-style: none; gap: 8px; padding: 10px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); transition: border-color .15s, box-shadow .15s; }
.ss-floor-entry:hover { border-color: var(--fds-blue-600); box-shadow: 0 0 0 1px var(--fds-blue-600); }
.ss-floor-entry:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-floor-entry-image { flex: none; width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--fds-bg-muted); }
.ss-floor-entry-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ss-floor-entry-text strong { font-size: 14px; }
.ss-floor-entry-text small { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--fds-text-secondary); overflow-wrap: anywhere; }
.ss-floor-entry-arrow, .ss-floor-back-arrow { font-size: 20px; line-height: 1; color: var(--fds-text-secondary); }
/* Back (open): returns to the space panel. */
.ss-floor-tools > .ss-floor-back { list-style: none; gap: 6px; width: fit-content; padding: 4px 10px 4px 6px; border-radius: var(--fds-radius-md); font-weight: 500; color: var(--fds-text-secondary); }
.ss-floor-back:hover { background: var(--fds-bg-muted); color: var(--fds-text-primary); }
.ss-floor-back:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-floor-title { margin: 0; }
.ss-floor-zone-input { width: 100%; font-size: 13px; }
.ss-floor-body { display: grid; gap: 10px; padding: 8px 0 4px; }
/* Floor F3: project default or this variant only. */
.ss-floor-scope { display: flex; width: 100%; }
.ss-floor-scope > button { flex: 1 1 0; min-width: 0; white-space: normal; }
.ss-floor-override { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--fds-radius-sm); background: var(--fds-blue-50); font-size: 13px; }
.ss-floor-override p { margin: 0; }
.ss-floor-override .fds-btn { justify-self: start; }
.ss-floor-body .ss-field { display: grid; gap: 4px; font-size: 13px; }
.ss-floor-heading { margin: 4px 0 0; font-size: 13px; }
.ss-floor-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ss-floor-zone { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); }
.ss-floor-zone-name { font-size: 13px; font-weight: 550; }
.ss-floor-zone-actions, .ss-floor-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-floor-zone { fill: color-mix(in srgb, var(--fds-blue-600) 7%, transparent); stroke: color-mix(in srgb, var(--fds-blue-600) 45%, transparent); stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.plan-floor-zone-entrance { fill: color-mix(in srgb, #a16207 8%, transparent); }
.plan-floor-zone-service { fill: color-mix(in srgb, #0f766e 8%, transparent); }
.plan-floor-zone-vip { fill: color-mix(in srgb, #7c3aed 8%, transparent); }

/* Floor F1.1: style cards and floor material swatch pickers. FDS extension. */
.ss-style-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ss-style-card { display: grid; gap: 4px; padding: 4px 4px 6px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); cursor: pointer; text-align: center; font: inherit; font-size: 12px; color: var(--fds-text-primary); }
.ss-style-card:hover { border-color: var(--fds-gray-400); }
.ss-style-card[aria-pressed="true"] { border-color: var(--fds-blue-600); box-shadow: 0 0 0 1px var(--fds-blue-600); }
.ss-style-card:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-style-card-image { display: block; width: 100%; height: auto; aspect-ratio: 112 / 72; border-radius: 6px; background: var(--fds-bg-muted); }
.ss-style-card-name { line-height: 1.3; }
.ss-material-picker { border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); }
.ss-material-picker[open] { border-color: var(--fds-blue-600); box-shadow: 0 0 0 2px var(--fds-blue-50), var(--fds-shadow-1); }
.ss-material-picker > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; cursor: pointer; list-style: none; font-size: 13px; }
.ss-material-picker > summary::-webkit-details-marker { display: none; }
.ss-material-picker > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.ss-material-picker[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.ss-material-picker > summary:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-material-swatch { display: block; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); background: var(--fds-bg-muted); }
summary .ss-material-swatch { width: 28px; height: 28px; }
.ss-material-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-material-menu { display: grid; gap: 8px; padding: 8px; border-top: 1px solid var(--fds-border); }
.ss-material-group-title { margin: 0 0 4px; font-size: 12px; color: var(--fds-text-secondary); }
.ss-material-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
.ss-material-option { display: grid; justify-items: center; gap: 3px; padding: 4px 2px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; font: inherit; font-size: 11px; line-height: 1.25; color: var(--fds-text-primary); text-align: center; }
.ss-material-option .ss-material-swatch { width: 40px; height: 40px; object-fit: cover; }
/* Desktop: wide swatches show more of the pattern (a 1.2 m tall strip at real scale). */
@media (min-width: 1024px) {
  .ss-material-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .ss-material-option { justify-items: stretch; padding: 4px; }
  .ss-material-option .ss-material-swatch { width: 100%; height: auto; aspect-ratio: 104 / 56; }
}
.ss-material-option:hover { background: var(--fds-bg-muted); }
.ss-material-option[aria-pressed="true"] { border-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-material-option:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 1px; }

/* Door types D1: illustrated cards in the door properties and the add form. FDS extension. */
.ss-door-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ss-door-type { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); cursor: pointer; font: inherit; font-size: 12px; color: var(--fds-text-primary); text-align: center; }
.ss-door-type:hover { border-color: var(--fds-gray-400); }
.ss-door-type[aria-pressed="true"] { border-color: var(--fds-blue-600); background: var(--fds-blue-50); box-shadow: 0 0 0 1px var(--fds-blue-600); }
.ss-door-type:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-door-type-icon { width: 56px; height: 49px; }
.ss-door-type-icon .ss-dt-wall { fill: none; stroke: var(--fds-gray-500); stroke-width: 3; }
.ss-door-type-icon .ss-dt-frame { fill: var(--fds-bg-panel); stroke: var(--fds-gray-700); stroke-width: 2; }
.ss-door-type-icon .ss-dt-glass { fill: #d6e6ee; stroke: none; }
.ss-door-type-icon .ss-dt-panel { fill: var(--fds-gray-400); stroke: var(--fds-gray-700); stroke-width: 1.5; }
.ss-door-type-icon .ss-dt-handle { stroke: #b8a37a; stroke-width: 3; stroke-linecap: round; }
.ss-door-type-icon .ss-dt-slat { stroke: var(--fds-gray-400); stroke-width: 2; }
.ss-door-type-icon .ss-dt-wallplan { fill: none; stroke: var(--fds-gray-700); stroke-width: 5; }
.ss-door-type-icon .ss-dt-leafplan { fill: none; stroke: var(--fds-gray-700); stroke-width: 3; stroke-linecap: round; }
.ss-door-type-icon .ss-dt-arc { fill: none; stroke: var(--fds-blue-600); stroke-width: 1.5; stroke-dasharray: 3 2; }
.ss-door-type-icon .ss-dt-opening { fill: none; stroke: var(--fds-gray-400); stroke-width: 2; stroke-dasharray: 4 3; }
.ss-door-segmented { display: flex; width: 100%; }
.ss-door-segmented > button { flex: 1 1 0; }
.ss-door-type-icon .ss-dt-arrow { fill: none; stroke: var(--fds-blue-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Brand feature walls (FW1): logo effect cards, material chips and the panel finish swatches. FDS extension. */
.ss-logo-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ss-logo-effect { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); cursor: pointer; font: inherit; font-size: 12px; color: var(--fds-text-primary); }
.ss-logo-effect:hover { border-color: var(--fds-gray-400); }
.ss-logo-effect[aria-pressed="true"] { border-color: var(--fds-blue-600); background: var(--fds-blue-50); box-shadow: 0 0 0 1px var(--fds-blue-600); }
.ss-logo-effect:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-logo-effect-icon { width: 64px; height: 48px; }
.ss-logo-effect-icon .ss-le-panel { fill: #8f8a83; }
.ss-logo-effect-icon .ss-le-metal { fill: #d9bf86; }
.ss-logo-effect-icon .ss-le-shadow { fill: rgba(0, 0, 0, .35); }
.ss-logo-effect-icon .ss-le-dark { fill: #2a2c2f; }
.ss-logo-effect-icon .ss-le-glow { fill: #ffe7bd; filter: blur(3px); }
.ss-logo-effect-icon .ss-le-box { fill: #fbfaf7; stroke: #d7dadd; stroke-width: 2; }
.ss-logo-effect-icon .ss-le-print { fill: #f3efe7; }
.ss-logo-materials { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-logo-material { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 6px; border: 1px solid var(--fds-border); border-radius: 999px; background: var(--fds-bg-panel); cursor: pointer; font: inherit; font-size: 12px; color: var(--fds-text-primary); }
.ss-logo-material[aria-pressed="true"] { border-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-logo-material-chip { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ss-logo-material.is-gold .ss-logo-material-chip { background: linear-gradient(135deg, #e8d3a2, #b8935a); }
.ss-logo-material.is-steel .ss-logo-material-chip { background: linear-gradient(135deg, #f2f3f4, #a9adb2); }
.ss-logo-material.is-black .ss-logo-material-chip { background: linear-gradient(135deg, #4a4d52, #151618); }
.ss-logo-material.is-white .ss-logo-material-chip { background: #fbfaf7; }
.ss-logo-source.is-sample { color: var(--fds-text-secondary); padding: 6px 8px; border-radius: var(--fds-radius-sm); background: var(--fds-bg-muted); }
.ss-feature-finishes { padding: 0; border-top: 0; }

/* Appearance A1: colour chips and the custom colour input. FDS extension. */
.ss-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-color-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 6px; border: 1px solid var(--fds-border); border-radius: 999px; background: var(--fds-bg-panel); cursor: pointer; font: inherit; font-size: 12px; color: var(--fds-text-primary); }
.ss-color-chip:hover { border-color: var(--fds-gray-400); }
.ss-color-chip[aria-pressed="true"], .ss-color-chip.is-selected { border-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-color-chip:focus-visible, .ss-color-custom-label:focus-within { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-color-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ss-color-dot.is-default { background: repeating-linear-gradient(45deg, var(--fds-gray-200) 0 3px, var(--fds-bg-panel) 3px 6px); }
.ss-color-custom { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ss-field-grid > [data-obstacle-look] { grid-column: 1 / -1; }

/* Ceiling and lighting (ceiling lighting C1): the sidebar section reuses the
   floor section's entry and back styles; fixture cards and the plan layer.
   FDS extension. */
.ss-ceiling-entry-icon { padding: 2px; background: var(--fds-gray-50); }
.ss-ceiling-icon { width: 56px; height: 42px; flex: none; }
.ss-ci-ceiling { fill: none; stroke: var(--fds-gray-500); stroke-width: 2; }
.ss-ci-frame { fill: var(--fds-gray-100); stroke: var(--fds-gray-700); stroke-width: 1.5; }
.ss-ci-face { fill: #fff6d8; stroke: var(--fds-gray-500); stroke-width: 1; }
.ss-ci-core { fill: #ffe9a8; }
.ss-ci-beam { fill: #ffe9a8; opacity: .6; }
.ss-ceiling-products { display: grid; gap: 6px; }
.ss-ceiling-product { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); color: var(--fds-text-primary); font: inherit; text-align: left; cursor: pointer; }
.ss-ceiling-product:hover { border-color: var(--fds-blue-600); }
.ss-ceiling-product[aria-pressed="true"] { border-color: var(--fds-blue-600); box-shadow: 0 0 0 1px var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-ceiling-product:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-ceiling-product-text { display: grid; gap: 2px; min-width: 0; }
.ss-ceiling-product-text strong { font-size: 13px; font-weight: 600; }
.ss-ceiling-product-text small { font-size: 12px; color: var(--fds-text-secondary); overflow-wrap: anywhere; }
.ss-ceiling-product-text .ss-ceiling-price { color: var(--fds-text-primary); }
.ss-ceiling-placing { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--fds-radius-sm); background: var(--fds-blue-50); font-size: 13px; }
.ss-ceiling-placing p { margin: 0; flex: 1; }
.ss-ceiling-fill { display: grid; gap: 8px; }
.ss-ceiling-fill .fds-btn { justify-self: start; }
.ss-ceiling-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.ss-ceiling-row { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--fds-radius-sm); background: transparent; color: var(--fds-text-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ss-ceiling-row:hover { background: var(--fds-bg-muted); }
.ss-ceiling-row.is-selected { border-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-ceiling-row small { color: var(--fds-text-secondary); }
.ss-ceiling-summary { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-sm); font-size: 13px; }
.ss-ceiling-summary p { margin: 0; }
.ss-ceiling-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ss-ceiling-problem { width: 100%; padding: 6px 8px; border: 0; border-radius: var(--fds-radius-sm); background: var(--fds-amber-50); color: var(--fds-amber-700); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.ss-ceiling-prop-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
/* Plan: the ceiling layer on top, everything else dimmed and inert. */
.plan-svg.is-ceiling-mode .plan-object:not([data-kind="ceilingLight"]) { opacity: .35; pointer-events: none; }
.plan-ceiling-light { fill: #fff3c4; stroke: #a16207; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.plan-ceiling-light.is-warning { stroke: var(--fds-amber-700); fill: #fde68a; }
.plan-ceiling-light.is-error { stroke: var(--fds-red-700); fill: #fecaca; }
.plan-ceiling-cross { stroke: #a16207; stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.is-editable .plan-object[data-kind="ceilingLight"] { cursor: grab; }
svg.is-ceiling-placing { cursor: crosshair; }
/* Ceiling spot measuring guides: walls grey, spot spacing blue, alignment dashed, case front amber. */
.plan-guide { fill: none; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.plan-guide-wall { stroke: var(--fds-gray-700); }
.plan-guide-gap { stroke: var(--fds-blue-600); }
.plan-guide-front { stroke: #a16207; stroke-dasharray: 4 3; }
.plan-guide-align { stroke: #db2777; stroke-width: 1px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.plan-ceiling-guides .plan-label-dim { paint-order: stroke; stroke: var(--fds-white); }
.plan-guide-set.is-gap .plan-label-dim { fill: var(--fds-blue-600); }
.plan-guide-front-label { fill: #a16207; }
/* Store illuminance (lighting S1): the map stays unobstructed; its legend and
   complete statistics live in the ceiling-and-lighting panel. FDS extension. */
.ss-ceiling-lux { display: grid; gap: 6px; font-size: 13px; }
.ss-ceiling-lux p { margin: 0; }
.ss-ceiling-lux .ss-store-lux-scale { flex-wrap: wrap; }
.ss-ceiling-lux .fds-btn { justify-self: start; }

/* Light boxes (B1): the mount cards reuse the door type cards; the lit box in the icons. */
.ss-lb-box { fill: #fff6d8; stroke: var(--fds-gray-700); stroke-width: 1.5; }

/* Shop window S2: type and frame cards (door type card style), the side
   section to scale, and a slider under each size. FDS extension. */
.ss-wt-line { fill: none; stroke: var(--fds-gray-400); stroke-width: 1.5; }
.ss-wt-wall { fill: var(--fds-gray-700); }
.ss-wt-glass { fill: #8ec5e6; }
.ss-wt-platform { fill: var(--fds-gray-200); stroke: var(--fds-gray-500); stroke-width: 1; }
.ss-wt-case { fill: #fff6d8; stroke: var(--fds-gray-500); stroke-width: 1; }
.ss-wt-pane { fill: #dbeef8; stroke: none; }
.ss-wt-frame { fill: none; stroke: var(--fds-gray-800, #1f2937); stroke-width: 2; }
.ss-wt-frame.is-wide { stroke-width: 5; }
.ss-wt-joint { stroke: #9fb3c2; stroke-width: 1; }
.ss-window-visual { border-radius: var(--fds-radius-sm); background: var(--fds-bg-muted); padding: 4px; }
.ss-window-section { display: block; width: 100%; height: auto; }
.ss-ws-street { fill: color-mix(in srgb, var(--fds-gray-200) 60%, transparent); }
.ss-ws-floor { stroke: var(--fds-gray-500); stroke-width: 1.5; }
.ss-ws-wall { fill: var(--fds-gray-700); }
.ss-ws-glass { fill: #6fb0d8; }
.ss-ws-platform { fill: var(--fds-gray-200); stroke: var(--fds-gray-500); stroke-width: 1; }
.ss-ws-back { fill: var(--fds-gray-500); }
.ss-ws-dim { stroke: var(--fds-blue-600); stroke-width: 1.2; }
.ss-ws-value { font-size: 11px; font-weight: 600; fill: var(--fds-blue-600); }
.ss-ws-note { font-size: 10px; fill: var(--fds-text-secondary); }
.ss-window-size { display: grid; gap: 2px; }
.ss-window-size .ss-rule-slider { width: 100%; min-height: 24px; }
.ss-ws-guide { stroke: var(--fds-blue-600); stroke-width: 0.8; stroke-dasharray: 3 3; opacity: .6; }
.ss-ws-band { fill: color-mix(in srgb, #16a34a 14%, transparent); }
.ss-ws-band-label { font-size: 9px; fill: #15803d; }
.ss-wt-glass-case { fill: #dbeef8; stroke: var(--fds-gray-500); stroke-width: 1; }
.ss-window-display { display: grid; gap: 8px; }
.ss-window-hosts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ss-window-hosts li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-sm); font-size: 13px; }
.ss-window-hosts li > span { flex: 1 1 100%; min-width: 0; font-weight: 500; }
.ss-window-hosts small { color: var(--fds-text-secondary); }
/* FDS extension: wall elevations and bay plans with sliders (doors, feature walls,
   wall light boxes, window plinths), drawn like the shop window section. */
.ss-elevation-editor { display: grid; gap: 6px; }
.ss-el-wall { fill: var(--fds-gray-100); stroke: var(--fds-gray-400); stroke-width: 1; }
.ss-el-bay { fill: var(--fds-gray-100); stroke: var(--fds-gray-400); stroke-width: 1; }
.ss-el-glass { stroke: #6fb0d8; stroke-width: 3; }
.ss-el-other { fill: var(--fds-gray-200); stroke: var(--fds-gray-400); stroke-width: .8; stroke-dasharray: 3 2; }
.ss-el-item { fill: color-mix(in srgb, var(--fds-blue-600) 18%, transparent); stroke: var(--fds-blue-600); stroke-width: 1.4; }
.ss-el-item.is-door { fill: color-mix(in srgb, #6fb0d8 30%, transparent); }
.ss-el-item.is-lightBox { fill: color-mix(in srgb, #facc15 30%, transparent); }
.ss-lighting-popover { position: relative; }
.ss-lighting-popover > summary { display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; list-style: none; border-radius: var(--fds-radius-pill); }
.ss-lighting-popover > summary::-webkit-details-marker { display: none; }
.ss-lighting-popover > summary svg { width: 14px; height: 14px; }
.ss-lighting-popover[open] > summary { color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-lighting-popover > summary:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-lighting-popover-body { position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 20; display: grid; gap: 12px; width: max-content; max-width: calc(100vw - 96px); padding: 14px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); white-space: normal; }
.ss-lighting-popover-body > label { display: grid; gap: 6px; font-size: 12px; }
.ss-editor-page .ss-lighting-popover-body .fds-select { width: 100%; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); min-height: 36px; padding-inline: 10px; }
/* FDS extension: customer presentation overlays and touch direction pad. */
.ss-customer-actions { display: flex; gap: 8px; align-items: center; }
.ss-customer-actions .fds-btn { border: 0; background: transparent; min-height: 40px; padding: 6px 10px; }
.ss-customer-hint, .ss-customer-info, .ss-customer-status { position: absolute; z-index: 8; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: var(--fds-shadow-1); color: var(--fds-text-primary); }
.ss-customer-hint { left: 50%; top: 60px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 14px; width: max-content; max-width: calc(100% - 24px); }
.ss-customer-hint p { margin: 0; font-size: 12px; }
.ss-customer-hint .fds-btn { min-height: 32px; border-radius: var(--fds-radius-pill); white-space: nowrap; }
.ss-customer-info { right: 12px; top: 100px; padding: 14px; max-width: min(260px, calc(100% - 24px)); }
.ss-customer-info p { margin: 8px 0; font-size: 13px; color: var(--fds-text-secondary); }
.ss-customer-info .fds-btn { min-height: 32px; border-radius: var(--fds-radius-pill); }
.ss-customer-status { left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 14px; font-size: 12px; border-radius: var(--fds-radius-pill); }
.ss-customer-pad { display: none; position: absolute; bottom: calc(var(--ss-foot-height, 50px) + 24px); right: 12px; z-index: 8; gap: 6px; grid-template-columns: repeat(3, 44px); }
.ss-customer-pad button { width: 44px; height: 44px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); color: var(--fds-text-primary); touch-action: manipulation; }
.ss-customer-pad svg { width: 20px; height: 20px; }
.ss-customer-pad [data-direction=forward] { grid-column: 2; }
.ss-customer-pad [data-direction=left] { grid-column: 1; }
.ss-customer-pad [data-direction=back] { grid-column: 2; grid-row: 2; }
.ss-customer-pad [data-direction=right] { grid-column: 3; grid-row: 2; }
.ss-customer-pad button:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-editor-page .is-customer-view .ss-lighting-popover-body .ss-3d-lighting > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.ss-editor-page .is-customer-view .ss-lighting-popover-body > label:has(input) { display: flex; align-items: center; gap: 8px; }
.is-customer-view .ss-3d-walk-options .ss-float-sep, .is-customer-view .ss-3d-corner > .ss-float-sep { display: none; }
@media (max-width: 767px), (pointer: coarse) { .ss-customer-pad:not([hidden]) { display: grid; } }
.ss-customer-actions[hidden], .ss-customer-hint[hidden], .ss-customer-info[hidden], .ss-customer-status[hidden], .ss-customer-pad[hidden] { display: none; }
.is-customer-view #view-reset, .is-customer-view #view-snapshot, .is-customer-view .ss-view-help { display: none; }
.ss-lighting-popover-body > label[hidden], .ss-lighting-popover-body > span[hidden] { display: none; }
.ss-customer-zoom { display: flex; align-items: center; gap: 4px; }
.ss-customer-zoom[hidden] { display: none; }
.ss-customer-zoom button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--fds-radius-pill); background: transparent; color: var(--fds-text-primary); font-size: 22px; cursor: pointer; touch-action: manipulation; }
.ss-customer-zoom output { min-width: 40px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fds-text-secondary); }
.ss-customer-zoom button:disabled { opacity: .35; cursor: default; }
.ss-customer-zoom button:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: -2px; }
.ss-customer-components { margin-block: 10px; }
.ss-customer-components > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); color: var(--fds-text-primary); font-size: 13px; cursor: pointer; list-style: none; }
.ss-customer-components > summary::-webkit-details-marker { display: none; }
.ss-customer-components > summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.ss-customer-components[open] > summary { color: var(--fds-blue-600); background: var(--fds-blue-50); border-color: var(--fds-blue-600); }
.ss-customer-components[open] > summary svg { transform: rotate(90deg); }
.ss-customer-components > summary:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-customer-component-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: min(240px, 30dvh); overflow-y: auto; overscroll-behavior: contain; }
.ss-customer-component { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--fds-border); }
.ss-customer-component:last-child { border-bottom: 0; }
.ss-customer-component strong { display: block; font-size: 13px; font-weight: 500; }
.ss-customer-component div > span { display: block; margin-top: 4px; color: var(--fds-text-secondary); font-size: 11px; overflow-wrap: anywhere; }
.ss-customer-quantity { flex-shrink: 0; font-size: 12px; color: var(--fds-text-secondary); font-variant-numeric: tabular-nums; }

/* FDS extension: nonmodal resource update banner participates in editor layout. */
#resource-update-notice:not([hidden]) { padding: var(--fds-space-2) var(--fds-space-4); flex: 0 0 auto; }
#resource-update-notice .ss-notice-banner { margin: 0; }
@media (max-width: 480px) { #resource-update-notice:not([hidden]) { padding: var(--fds-space-2); } }

/* FDS extension: keep resource discovery compact so the editing stage retains its space. */
#resource-update-notice .ss-notice-banner { align-items: center; }
#resource-update-notice .ss-notice-actions .fds-btn { min-height: 28px; padding: 3px 12px; font-size: 12px; line-height: 20px; }
@media (pointer: coarse) { #resource-update-notice .ss-notice-actions .fds-btn { min-height: 44px; } }

@media (min-width: 1024px) {
  .ss-editor-page.has-operation-notice .ss-fpa-navigation-content .ss-fpa-map { height: 116px; }
}

/* FDS extension: derived mounted-case dimensions span the specification grid. */
.ss-add-panel .ss-add-dimensions .ss-mounted-summary { grid-column: 1 / -1; }

/* FDS extension: "submit to designer" in the editor of a customer's copy of a shared design. */
.ss-editor-page .ss-copy-submit-status { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-editor-page .ss-copy-submit-status:empty { display: none; }
.ss-copy-submit-dialog { max-width: min(30em, calc(100vw - 32px)); border: 0; border-radius: var(--fds-radius-lg, 12px); padding: 20px; background: var(--fds-surface, #fff); color: inherit; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
.ss-copy-submit-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.ss-copy-submit-dialog h3 { margin: 0 0 8px; }
.ss-copy-submit-dialog label { display: block; margin: 12px 0 4px; }
.ss-copy-submit-dialog textarea { box-sizing: border-box; width: 100%; resize: vertical; }
.ss-copy-submit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 720px) { .ss-editor-page .ss-copy-submit-status { display: none; } }