/* SpaceScene project styles. Built on FDS tokens; do not redefine FDS classes. */

/* FDS extension: a project-owned raster brand preview in the settings panel. */
.ss-project-logo-preview { display:block; max-width:min(100%, 350px); max-height:120px; width:auto; height:auto; object-fit:contain; object-position:left center; margin-block:var(--fds-space-2); }
.ss-project-logo-success { margin:0; color:var(--fds-green-700); font-size:13px; }
.ss-project-logo { display:grid; gap:var(--fds-space-2); min-width:0; }

.ss-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: var(--fds-topbar);
  padding: env(safe-area-inset-top, 0px) var(--fds-space-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fds-space-4);
  background: var(--fds-bg-panel);
  border-bottom: 1px solid var(--fds-border);
}

.ss-brand {
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.01em;
}

.ss-brand span {
  color: var(--fds-text-muted);
  font-weight: 500;
  margin-left: var(--fds-space-1);
}

.ss-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--fds-space-10) var(--fds-space-6) var(--fds-space-16);
  display: grid;
  gap: var(--fds-space-6);
}

.ss-intro {
  display: grid;
  gap: var(--fds-space-2);
}

.ss-intro .fds-display {
  margin: 0;
}

.ss-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--fds-text-secondary);
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fds-space-6);
}

.ss-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fds-space-3);
}

.ss-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.ss-facts {
  margin: 0;
  display: grid;
  gap: var(--fds-space-3);
}

.ss-facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--fds-space-4);
}

.ss-facts dt {
  color: var(--fds-text-secondary);
}

.ss-facts dd {
  margin: 0;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ss-unavailable-title {
  margin-bottom: var(--fds-space-1);
  color: var(--fds-text-primary);
  font-weight: 550;
}

.fds-unavailable .fds-meta {
  margin: 0;
}

.ss-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  /* One shared code column sized to the longest code, so codes such as
     "ProjectRules" never run under the name. */
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
}

.ss-roadmap li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  gap: var(--fds-space-3);
  padding: var(--fds-space-3) var(--fds-space-5);
  border-top: 1px solid var(--fds-border);
}

.ss-roadmap li:first-child {
  border-top: 0;
}

.ss-code {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ss-name {
  min-width: 0;
  color: var(--fds-text-secondary);
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .ss-topbar {
    padding-inline: var(--fds-space-4);
  }

  .ss-main {
    padding: var(--fds-space-6) var(--fds-space-4) var(--fds-space-12);
    gap: var(--fds-space-4);
  }

  .ss-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fds-space-4);
  }

  .ss-roadmap li {
    padding-inline: var(--fds-space-4);
  }
}

/* ---- Links in the top bar ---------------------------------------------- */

a.ss-brand {
  color: var(--fds-text-primary);
  text-decoration: none;
}

/* ---- Scene preview layout ---------------------------------------------- */

.ss-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--fds-space-6);
  align-items: start;
}

.ss-rail {
  display: grid;
  gap: var(--fds-space-4);
}

.ss-scene-size {
  margin: var(--fds-space-1) 0 0;
  font-variant-numeric: tabular-nums;
}

.ss-plan {
  padding: var(--fds-space-4);
  background: var(--fds-bg-page);
}

.ss-form {
  display: grid;
  gap: var(--fds-space-4);
}

.ss-field {
  display: grid;
  gap: var(--fds-space-2);
}

.ss-field > label,
.ss-field > span {
  font-size: .8125rem;
  font-weight: 550;
  color: var(--fds-text-secondary);
}

.ss-field .fds-meta {
  margin: 0;
}

.ss-file {
  height: auto;
  padding: var(--fds-space-2);
}

.ss-units button {
  min-width: 0;
  padding: 0 var(--fds-space-2);
  font-size: .8125rem;
  font-weight: 550;
  cursor: pointer;
}

.ss-diagnostics {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-diag,
.ss-diag-empty {
  padding: var(--fds-space-3) var(--fds-space-5);
  border-top: 1px solid var(--fds-border);
  display: grid;
  gap: var(--fds-space-1);
}

.ss-diag:first-child,
.ss-diag-empty:first-child {
  border-top: 0;
}

.ss-diag-empty {
  color: var(--fds-text-secondary);
}

.ss-diag.is-error {
  box-shadow: inset 3px 0 0 var(--fds-red-700);
}

.ss-diag.is-warning {
  box-shadow: inset 3px 0 0 var(--fds-amber-700);
}

.ss-diag p {
  margin: 0;
  overflow-wrap: anywhere;
}

.ss-diag-head {
  display: flex;
  align-items: center;
  gap: var(--fds-space-2);
}

.ss-diag-head code {
  font-size: .75rem;
  color: var(--fds-text-muted);
}

/* ---- 2D plan drawing language (plan §6.4) ------------------------------ */

.plan-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
}

.plan-floor { fill: var(--fds-white); }
.plan-grid-minor { fill: none; stroke: var(--fds-gray-100); stroke-width: 6; }
.plan-grid-major { fill: none; stroke: var(--fds-gray-200); stroke-width: 10; }
.plan-hatch-light { stroke: var(--fds-gray-300); stroke-width: 10; }
.plan-hatch-dark { stroke: var(--fds-gray-500); stroke-width: 10; }

.plan-wall { fill: var(--fds-gray-900); }
.plan-zone { stroke: var(--fds-gray-400); stroke-width: 14; stroke-dasharray: 60 40; }
.plan-obstacle { stroke: var(--fds-gray-700); stroke-width: 16; }
.plan-door { fill: none; stroke: var(--fds-gray-500); stroke-width: 12; }
/* Brand feature walls (FW1): the panel band and the logo line. */
.plan-feature-wall { fill: var(--fds-gray-700); stroke: var(--fds-gray-900); stroke-width: 6; }
.plan-feature-wall.is-error { fill: var(--fds-red-700); }
.plan-feature-logo { stroke: #b8a37a; stroke-width: 40; stroke-linecap: round; }
/* Door types D1: sliding panels and a rolling shutter line. */
.plan-door-slide { stroke: var(--fds-blue-600); stroke-width: 24; }
.plan-door-shutter { stroke: var(--fds-blue-600); stroke-width: 24; stroke-dasharray: 80 50; }
/* Shop windows: glass band in the wall and the display bay behind it. */
.plan-window { fill: var(--fds-white); stroke: var(--fds-gray-900); stroke-width: 10; }
.plan-window-glass { stroke: var(--fds-blue-600); stroke-width: 10; }
.plan-window-bay { stroke: var(--fds-amber-700); stroke-width: 12; fill-opacity: 1; }
.plan-window-panel { stroke: var(--fds-gray-900); stroke-width: 40; }
.plan-window-open { stroke: var(--fds-amber-700); stroke-width: 16; stroke-dasharray: 80 50; }
.plan-window.is-error, .plan-window-bay.is-error { stroke: var(--fds-red-700); stroke-width: 26; }
.plan-window.is-warning, .plan-window-bay.is-warning { stroke: var(--fds-amber-700); stroke-width: 22; }
.plan-keypoint { fill: var(--fds-white); stroke: var(--fds-gray-900); stroke-width: 16; }

.plan-dim { stroke: var(--fds-gray-500); stroke-width: 10; }
.plan-dim-usable { stroke: var(--fds-blue-600); }
.plan-dim-chain { stroke: var(--fds-gray-700); stroke-width: 8; }
.plan-axis { stroke: var(--fds-gray-500); stroke-width: 12; }

.plan-label {
  fill: var(--fds-gray-900);
  font-family: Inter, -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.plan-label-muted,
.plan-label-dim { fill: var(--fds-gray-600); font-weight: 500; }
.plan-usable .plan-label-dim { fill: var(--fds-blue-600); }

.plan-wall.is-error,
.plan-door.is-error { fill: var(--fds-red-700); }
.plan-door.is-error { fill: none; stroke: var(--fds-red-700); }
.plan-obstacle.is-error,
.plan-zone.is-error,
.plan-keypoint.is-error { stroke: var(--fds-red-700); stroke-width: 26; }
.plan-obstacle.is-warning,
.plan-zone.is-warning,
.plan-keypoint.is-warning { stroke: var(--fds-amber-700); stroke-width: 22; }
.plan-label.is-error { fill: var(--fds-red-700); }
.plan-label.is-warning { fill: var(--fds-amber-700); }

@media (max-width: 1023px) {
  .ss-preview {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .ss-plan {
    padding: var(--fds-space-2);
  }

  .ss-diag,
  .ss-diag-empty {
    padding-inline: var(--fds-space-4);
  }
}

.ss-card-actions {
  margin-top: var(--fds-space-4);
  display: grid;
  gap: var(--fds-space-2);
}

.ss-card-actions .fds-btn {
  text-decoration: none;
  color: var(--fds-text-primary);
}

/* Label halo keeps text legible over grid, hatching and walls. */
.plan-label {
  paint-order: stroke;
  stroke: var(--fds-white);
  stroke-linejoin: round;
}

.ss-card-head .fds-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- 3D stage and form controls (M2) ----------------------------------- */

.ss-stage3d {
  position: relative;
  height: 480px;
  background: var(--fds-bg-muted);
  touch-action: none;
}

.ss-stage3d canvas {
  display: block;
}

.ss-stage3d .fds-unavailable {
  position: absolute;
  inset: var(--fds-space-4);
  display: grid;
  place-items: center;
}

.ss-stage-hint {
  margin: 0;
  padding: var(--fds-space-3) var(--fds-space-5);
  border-top: 1px solid var(--fds-border);
}

.ss-input-unit {
  display: flex;
  align-items: center;
  gap: var(--fds-space-2);
}

.ss-input-unit .fds-input {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ss-input-unit .fds-input[aria-invalid="true"] {
  border-color: var(--fds-red-700);
}

.ss-unit-suffix {
  min-width: 2.5rem;
  color: var(--fds-text-muted);
  font-size: .8125rem;
}

.ss-field-error {
  margin: 0;
  color: var(--fds-red-700);
  font-size: .8125rem;
}

.ss-field > label .fds-meta {
  font-weight: 400;
  margin-left: var(--fds-space-1);
}

.ss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fds-space-2);
}

.ss-chip {
  min-height: 32px;
  padding: 0 var(--fds-space-3);
  border: 1px solid var(--fds-border-strong);
  border-radius: var(--fds-radius-md);
  background: var(--fds-bg-panel);
  color: var(--fds-text-primary);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--fds-fast);
}

.ss-chip:hover {
  border-color: var(--fds-gray-500);
}

.ss-chip[aria-pressed="true"] {
  border-color: var(--fds-black);
  box-shadow: inset 0 0 0 1px var(--fds-black);
  font-weight: 550;
}

@media (max-width: 760px) {
  .ss-stage3d {
    height: 320px;
  }

  .ss-stage-hint {
    padding-inline: var(--fds-space-4);
  }
}

/* ---- Layout showcases on the plan (M3) --------------------------------- */

/* The group (one case or one run) carries the opacity: zones inside a run do
   not darken each other, zones of different cases do where they meet. */
.plan-aisle-group { opacity: .06; }
.plan-aisle { fill: rgb(37, 99, 235); stroke: none; }
.plan-case { fill: var(--fds-white); stroke: var(--fds-gray-900); stroke-width: 18; }
.plan-case-front { stroke-width: 45; fill: none; }
/* Showcase run joint (R2): a dashed seam between joined modules. */
.plan-run-joint { stroke: var(--fds-text-secondary); stroke-width: 18; stroke-dasharray: 60 40; fill: none; }
/* Run outer contour (R3): drawn beneath the cases, so half its width shows as a heavier edge. */
.plan-run-outline { stroke: var(--fds-text-primary); stroke-width: 44; stroke-linecap: square; fill: none; pointer-events: none; }
/* Upper display above a wall case (wall display W2): dashed, behind nothing it would hide. */
.plan-wall-zone { stroke: var(--fds-blue-600); stroke-width: 40; stroke-dasharray: 120 60; stroke-opacity: 0.55; }
.plan-upper-outline { fill: none; stroke: var(--fds-blue-600); stroke-width: 12; stroke-dasharray: 60 40; pointer-events: none; }
.plan-display-area { fill: none; stroke: var(--fds-gray-500); stroke-width: 8; stroke-dasharray: 36 28; }
.plan-case.is-error { fill: var(--fds-red-50); stroke: var(--fds-red-700); stroke-width: 26; }
.plan-case-front.is-error { stroke: var(--fds-red-700); stroke-width: 45; }
.plan-case.is-warning { stroke: var(--fds-amber-700); }

.ss-plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fds-space-1);
  color: var(--fds-text-secondary);
  font-size: .875rem;
}

.ss-lab-summary {
  margin: 0;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.ss-diagnostics-inline .ss-diag,
.ss-diagnostics-inline .ss-diag-empty {
  padding-inline: var(--fds-space-3);
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
}

.ss-diagnostics-inline {
  display: grid;
  gap: var(--fds-space-2);
}

/* ---- Editor selection and FPA on the plan (M5) ------------------------- */

.plan-selection { fill: none; stroke: var(--fds-gray-900); stroke-width: 60; }
.plan-selection-ring { fill: none; stroke: var(--fds-white); stroke-width: 18; }
.plan-hit { fill: transparent; stroke: none; }
.plan-hit.is-selected-swing { fill: rgba(17, 24, 39, .08); }
.plan-fpa { fill: var(--fds-gray-500); stroke: none; }
.plan-fpa-focus { fill: var(--fds-gray-800); }
.plan-fpa-emotion { fill: var(--fds-gray-700); }
.plan-fpa.is-error { fill: var(--fds-red-700); }
.plan-object.is-locked .plan-case { stroke-dasharray: none; stroke: var(--fds-gray-700); }
.is-editable .plan-object[data-kind] { cursor: pointer; }
.is-editable .plan-object[data-kind="showcase"],
.is-editable .plan-object[data-kind="obstacle"],
.is-editable .plan-object[data-kind="zone"],
.is-editable .plan-object[data-kind="keyPoint"] { cursor: grab; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }
.plan-object.is-dragging-object { opacity: .75; }

/* ---- In-case display area view (M5) ------------------------------------ */

.da-case { fill: var(--fds-gray-100); stroke: var(--fds-gray-900); stroke-width: 6; }
.da-deck { fill: #efe8dc; stroke: var(--fds-blue-600); stroke-width: 3; stroke-dasharray: 12 8; }
.da-front { stroke: var(--fds-gray-900); stroke-width: 14; }
.da-margin { fill: none; stroke: var(--fds-gray-400); stroke-width: 1.5; stroke-dasharray: 6 5; }
.da-component { fill: var(--fds-gray-50); stroke: var(--fds-gray-700); stroke-width: 3; }
.da-focus { fill: var(--fds-gray-700); }
.da-emotion { fill: var(--fds-gray-900); }
.da-structure { fill: var(--fds-gray-300); }
.da-component.is-error { stroke: var(--fds-red-700); stroke-width: 6; }
.da-marker { fill: #d4af37; }
.da-selection { fill: none; stroke: var(--fds-blue-600); stroke-width: 4; }
.da-svg .plan-object.is-locked .da-component { stroke-dasharray: 6 4; }

/* ---- Editor shell (M5) ------------------------------------------------- */

.ss-link-primary { color: var(--fds-white) !important; }

.ss-editor-page { min-height: 100vh; }

.ss-editor-top {
  gap: var(--fds-space-3);
  justify-content: flex-start;
}

.ss-project {
  color: var(--fds-text-secondary);
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
  padding-left: var(--fds-space-3);
  border-left: 1px solid var(--fds-border);
}

.ss-variant-tabs { display: flex; gap: var(--fds-space-1); flex-wrap: wrap; }
.ss-grow { flex: 1; }
.ss-draft { white-space: nowrap; }

.ss-tab {
  min-height: 32px;
  padding: 0 var(--fds-space-3);
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-sm);
  background: var(--fds-bg-panel);
  color: var(--fds-text-secondary);
  font-size: .8125rem;
  cursor: pointer;
  white-space: nowrap;
}

.ss-tab[aria-pressed="true"] {
  border-color: var(--fds-black);
  box-shadow: inset 0 0 0 1px var(--fds-black);
  color: var(--fds-text-primary);
  font-weight: 550;
}

.ss-editor {
  display: grid;
  grid-template-columns: var(--fds-sidebar) minmax(0, 1fr) 320px;
  min-height: calc(100vh - var(--fds-topbar));
}

.ss-editor-left,
.ss-editor-right {
  background: var(--fds-bg-panel);
  padding: var(--fds-space-4);
  display: grid;
  gap: var(--fds-space-4);
  align-content: start;
  overflow-y: auto;
  max-height: calc(100vh - var(--fds-topbar));
  position: sticky;
  top: var(--fds-topbar);
}

.ss-editor-left { border-right: 1px solid var(--fds-border); }
.ss-editor-right { border-left: 1px solid var(--fds-border); }

.ss-steps { display: grid; gap: 2px; }

.ss-step {
  display: flex;
  align-items: center;
  gap: var(--fds-space-2);
  padding: var(--fds-space-2);
  border: 0;
  border-radius: var(--fds-radius-sm);
  background: transparent;
  color: var(--fds-text-secondary);
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}

.ss-step i {
  font-style: normal;
  font-size: .6875rem;
  font-weight: 600;
  width: 26px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fds-border-strong);
  border-radius: 4px;
}

.ss-step.is-active { background: var(--fds-bg-muted); color: var(--fds-text-primary); font-weight: 550; }
.ss-step.is-active i { border-color: var(--fds-black); box-shadow: inset 0 0 0 1px var(--fds-black); }
.ss-step:disabled { opacity: .42; cursor: not-allowed; }

.ss-step-panel,
.ss-step-panel > div { display: grid; gap: var(--fds-space-4); align-content: start; }
.ss-panel-section { display: grid; gap: var(--fds-space-2); }
.ss-section-title,
.ss-panel-title {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fds-text-muted);
}

.ss-panel { display: grid; gap: var(--fds-space-3); align-content: start; }
.ss-panel-head { display: flex; align-items: center; justify-content: space-between; }
.ss-inline { display: flex; gap: var(--fds-space-2); }
.ss-inline .fds-select { flex: 1; min-width: 0; }

.ss-object-list { gap: 2px; }

.ss-list-item {
  display: flex;
  justify-content: space-between;
  gap: var(--fds-space-2);
  padding: var(--fds-space-2);
  border: 1px solid transparent;
  border-radius: var(--fds-radius-sm);
  background: transparent;
  color: var(--fds-text-secondary);
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.ss-list-item:hover { background: var(--fds-bg-muted); }
.ss-list-item[aria-pressed="true"] { border-color: var(--fds-black); box-shadow: inset 0 0 0 1px var(--fds-black); color: var(--fds-text-primary); }
.ss-list-id { font-weight: 600; color: var(--fds-text-primary); }
.ss-project-item { flex-direction: column; gap: 2px; width: 100%; }
.ss-section-subtitle { margin: var(--fds-space-3) 0 var(--fds-space-1); font-size: 12px; font-weight: 600; color: var(--fds-text-secondary); }

.ss-variant-card {
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
  padding: var(--fds-space-3);
  display: grid;
  gap: var(--fds-space-2);
}

.ss-variant-card.is-active { border-color: var(--fds-black); box-shadow: inset 0 0 0 1px var(--fds-black); }
.ss-variant-card p { margin: 0; }
.ss-variant-head { display: flex; justify-content: space-between; gap: var(--fds-space-2); font-size: .875rem; }

.ss-editor-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }

.ss-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fds-space-3);
  padding: var(--fds-space-3) var(--fds-space-5);
}

.ss-stage-head .fds-eyebrow { font-size: .6875rem; }
.ss-editor-canvas { padding: 0 var(--fds-space-4) var(--fds-space-3); min-height: 420px; display: grid; place-items: center; }
.ss-editor-canvas .plan-svg { max-height: calc(100vh - var(--fds-topbar) - 140px); touch-action: none; user-select: none; }

/* M6 3D view: the canvas fills the stage; orbit and pan own touch gestures. */
.ss-3d-host {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--fds-topbar) - 170px);
  min-height: 360px;
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
  overflow: hidden;
  background: var(--fds-bg-muted);
}
.ss-3d-canvas { display: block; touch-action: none; }
/* FDS extension: bounded material feedback inside canvas/preview containers. */
.ss-material-texture-host { position: relative; }
.ss-material-texture-status {
  position: absolute;
  inset-inline: var(--fds-space-3);
  inset-block-end: var(--fds-space-3);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fds-space-2);
  width: fit-content;
  max-width: calc(100% - 2 * var(--fds-space-3));
  max-height: calc(100% - 2 * var(--fds-space-3));
  overflow: auto;
  padding: var(--fds-space-2);
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
  background: var(--fds-bg-panel);
  box-shadow: var(--fds-shadow-1);
  cursor: default;
  touch-action: auto;
}
.ss-material-texture-status[hidden] { display: none; }
.ss-material-texture-status > p { margin: 0; font-size: 12px; }
.ss-3d-host > .ss-material-texture-status { inset-block-start: 72px; inset-block-end: auto; max-height: calc(100% - 84px); }
.ss-3d-foot { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: var(--fds-space-2) var(--fds-space-4); margin-top: var(--fds-space-2); }
.ss-3d-material { display: inline-flex; align-items: center; gap: var(--fds-space-2); font-size: .8125rem; color: var(--fds-text-secondary); }
.ss-3d-material .fds-select { width: auto; min-width: 8rem; }
.ss-3d-hint { margin: 0; flex: 1 1 16rem; }

.ss-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fds-space-2);
  padding: var(--fds-space-2) var(--fds-space-4);
  border-top: 1px solid var(--fds-border);
  background: var(--fds-bg-panel);
  position: sticky;
  bottom: 0;
}

.ss-toolbar .fds-btn { height: 36px; }
.ss-toolbar .fds-segmented button { min-height: 36px; padding: 0 var(--fds-space-3); font-size: .8125rem; }
.ss-view-switch button:disabled { opacity: .42; cursor: not-allowed; }

.ss-check { display: inline-flex; align-items: center; gap: var(--fds-space-2); font-size: .8125rem; color: var(--fds-text-secondary); }

.ss-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fds-space-3); }
.ss-prop-title { margin: 0; font-size: .9375rem; }
.ss-editor-right .ss-diagnostics .ss-diag,
.ss-editor-right .ss-diagnostics .ss-diag-empty { padding-inline: var(--fds-space-3); }
.ss-diag.is-actionable { cursor: pointer; }
.ss-diag.is-actionable:hover { background: var(--fds-bg-muted); }

.ss-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fds-space-2);
  padding: var(--fds-space-2) var(--fds-space-3);
  border-radius: var(--fds-radius-md);
  background: var(--fds-blue-50);
  color: var(--fds-text-primary);
  font-size: .8125rem;
}

.ss-notice.is-error { background: var(--fds-red-50); }
.ss-notice p { margin: 0; }

.ss-dialog {
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-lg);
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  box-shadow: var(--fds-shadow-3);
}

.ss-dialog::backdrop { background: rgba(17, 24, 39, .4); }
.ss-dialog-body { padding: var(--fds-space-5); display: grid; gap: var(--fds-space-3); }
.ss-dialog-body p { margin: 0; color: var(--fds-text-secondary); }
.ss-confirm-items { max-height: 180px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-confirm-items li { border: 1px solid var(--fds-border); border-radius: var(--fds-radius-sm); padding: 2px 8px; }
.ss-dialog-actions { display: flex; justify-content: flex-end; gap: var(--fds-space-2); }
.ss-draft-actions { flex-wrap: wrap; }
/* FDS extension: scrollable master-data comparison within the existing dialog. */
.ss-catalog-dialog { width: min(760px, calc(100vw - 32px)); }
.ss-catalog-impact { max-height: 50vh; overflow-y: auto; padding-left: var(--fds-space-4); margin: 0; overflow-wrap: anywhere; }
.ss-catalog-impact li { margin-bottom: var(--fds-space-3); }

@media (max-width: 1279px) {
  .ss-editor { grid-template-columns: 220px minmax(0, 1fr) 288px; }
}

@media (max-width: 1023px) {
  .ss-editor { grid-template-columns: minmax(0, 1fr); }
  .ss-editor-left,
  .ss-editor-right { position: static; max-height: none; border: 0; border-top: 1px solid var(--fds-border); }
  .ss-editor-stage { order: -1; }
  .ss-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss-editor-canvas { min-height: 0; }
  .ss-editor-canvas .plan-svg { max-height: 70vh; }
  .ss-3d-host { height: 60vh; min-height: 280px; }
  .ss-toolbar { position: static; }
}

@media (max-width: 760px) {
  .ss-editor-top { flex-wrap: wrap; padding-block: var(--fds-space-2); }
  .ss-project { display: none; }
  .ss-draft { order: 5; width: 100%; }
  .ss-variant-tabs { order: 4; width: 100%; }
  .ss-stage-head { padding-inline: var(--fds-space-4); }
  .ss-editor-canvas { padding-inline: var(--fds-space-2); }
  .ss-field-grid { grid-template-columns: minmax(0, 1fr); }
}

.ss-brand,
.ss-editor-top .fds-btn { white-space: nowrap; }

@media (max-width: 1023px) {
  .ss-editor-top { flex-wrap: wrap; padding-block: var(--fds-space-2); }
  .ss-project { display: none; }
}
.ss-notice .fds-btn { white-space: nowrap; flex-shrink: 0; }

/* M8 output step: download buttons and BOM preview rows. */
.ss-export-actions { display: grid; gap: var(--fds-space-2); }
.ss-export-actions .fds-btn { justify-content: flex-start; }
.ss-bom-list { display: grid; gap: 2px; }
.ss-bom-list li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: var(--fds-space-2);
  align-items: baseline;
  padding: var(--fds-space-1) 0;
  border-bottom: 1px solid var(--fds-border);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

/* Editor start-up failure (C5): the editor is replaced by the reasons and a retry. */
.ss-start-failed { max-width: 720px; margin: var(--fds-space-6) auto; }
.ss-start-failed[hidden],
.is-start-failed .ss-editor,
.is-start-failed #save-button { display: none; }
.ss-start-failed ul { margin: var(--fds-space-3) 0 var(--fds-space-4); }

/* FDS extension: cancellable editor computation, no determinate percentage. */
.ss-generation-progress:not([hidden]) { display: flex; flex: 1 1 100%; align-items: center; flex-wrap: wrap; gap: var(--fds-space-3); font-size: .875rem; }
.ss-generation-progress span { flex: 1 1 16rem; }
.ss-generation-progress .fds-btn { min-height: 44px; }

/* FDS extension: shared help entry opens independently from an active editor. */
.ss-topbar-actions { display: flex; align-items: center; gap: var(--fds-space-3); flex-wrap: wrap; justify-content: flex-end; }
.ss-help-link { border-radius: var(--fds-radius-pill); text-decoration: none; flex-shrink: 0; }

/* FDS extension: structured showcase codes wrap within the property rail. */
.ss-prop-title { overflow-wrap: anywhere; }
.ss-object-list .ss-list-id, .ss-bom-list .ss-list-id { white-space: normal; overflow-wrap: anywhere; min-width: 0; }

/* FDS extension: one quiet scrollbar everywhere — thin, light grey thumb on a transparent track. */
* { scrollbar-width: thin; scrollbar-color: var(--fds-gray-300) transparent; }
*:hover { scrollbar-color: var(--fds-gray-400) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fds-gray-300); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--fds-gray-400); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* FDS extension: lighting section of the showcase properties (lighting products UI).
   Segmented choices and colour swatches replace long select lists in the narrow panel. */
.ss-lighting-property { display: grid; gap: var(--fds-space-3); min-width: 0; }
.ss-light-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fds-space-2); }
.ss-light-head h3 { margin: 0; }
.ss-light-placeholder > summary { list-style: none; cursor: pointer; font-size: .75rem; padding: 1px 8px; border-radius: var(--fds-radius-pill); background: var(--fds-amber-50); color: var(--fds-amber-700); }
.ss-light-placeholder > summary::-webkit-details-marker { display: none; }
.ss-light-placeholder[open] { grid-column: 1 / -1; }
.ss-light-placeholder > p { margin: var(--fds-space-2) 0 0; }
.ss-light-block { display: grid; gap: var(--fds-space-2); padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); min-width: 0; }
.ss-light-block-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--fds-space-2); margin: 0; font-weight: 600; font-size: .875rem; }
.ss-light-block-title .fds-meta { font-weight: 400; font-size: .75rem; }
.ss-light-row { display: flex; align-items: center; gap: var(--fds-space-2); min-width: 0; flex-wrap: wrap; }
.ss-light-grid { display: grid; gap: var(--fds-space-2); }
.ss-light-field { display: grid; gap: 4px; min-width: 0; }
.ss-light-label { font-size: .75rem; color: var(--fds-text-secondary); }
.ss-light-group { margin: var(--fds-space-1) 0 0; padding-top: var(--fds-space-2); border-top: 1px solid var(--fds-border); font-size: .8125rem; font-weight: 600; }
.ss-seg { display: flex; min-width: 0; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); overflow-x: auto; scrollbar-width: none; }
.ss-seg-schemes { flex: 1; }
.ss-seg-btn { flex: 1 0 auto; min-height: 36px; padding: 0 10px; border: 0; border-left: 1px solid var(--fds-border); background: transparent; color: var(--fds-text-primary); font: inherit; font-size: .8125rem; white-space: nowrap; cursor: pointer; }
.ss-seg-btn:first-child { border-left: 0; }
.ss-seg-btn[aria-pressed="true"] { background: var(--fds-blue-50); color: var(--fds-blue-600); font-weight: 600; }
.ss-seg-btn:focus-visible, .ss-swatch:focus-visible, .ss-light-package:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-seg-add { flex: 0 0 40px; font-size: 1rem; }
.ss-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 36px; }
.ss-swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--fds-border-strong); background: var(--ss-swatch, transparent); cursor: pointer; }
.ss-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fds-bg-panel), 0 0 0 4px var(--fds-blue-600); }
.ss-light-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.ss-light-package { display: grid; gap: 2px; padding: 8px 4px; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); background: transparent; font: inherit; text-align: center; cursor: pointer; min-height: 44px; }
.ss-light-package strong { font-size: .875rem; }
.ss-light-package span { font-size: .6875rem; color: var(--fds-text-secondary); }
.ss-light-package[aria-pressed="true"] { border: 2px solid var(--fds-blue-600); background: var(--fds-blue-50); color: var(--fds-blue-600); padding: 7px 3px; }
.ss-light-package[aria-pressed="true"] span { color: var(--fds-blue-600); }
.ss-light-menu { position: relative; }
.ss-light-menu > summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); cursor: pointer; }
.ss-light-menu > summary::-webkit-details-marker { display: none; }
.ss-light-menu[open] > .ss-light-menu-body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: min(240px, 80vw); display: grid; gap: var(--fds-space-2); padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.ss-light-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: var(--fds-space-1); }
.ss-light-stats > div { display: grid; gap: 2px; padding: 6px 4px; border-radius: var(--fds-radius-md); background: var(--fds-bg-muted); text-align: center; min-width: 0; }
.ss-light-stats strong { font-size: .8125rem; overflow-wrap: anywhere; }
.ss-light-stats span { font-size: .6875rem; color: var(--fds-text-secondary); }
.ss-light-apply { width: 100%; }
/* FDS extension: copy a case's colours to other cases (case colours). */
.ss-case-color-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ss-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px; border: 0; background: transparent; color: var(--fds-text-primary); font: inherit; font-size: .8125rem; cursor: pointer; }
.ss-switch-track { position: relative; width: 36px; height: 20px; border-radius: var(--fds-radius-pill); background: var(--fds-border-strong); transition: background-color .15s; flex: 0 0 auto; }
.ss-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fds-bg-panel); transition: transform .15s; }
.ss-switch[aria-checked="true"] .ss-switch-track { background: var(--fds-blue-600); }
.ss-switch[aria-checked="true"] .ss-switch-knob { transform: translateX(16px); }
.ss-switch:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; border-radius: var(--fds-radius-md); }
/* FDS extension: spotlight position and aim editor in the lighting section (spot placement). */
.ss-spot-summary { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); }
.ss-spot-open { width: 100%; }
/* The spot placement dialog: a large window laid out like the approved preview. */
.ss-dialog.ss-spot-dialog { width: min(1240px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: auto; background: var(--fds-bg-page); }
.ss-spot-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; background: var(--fds-bg-panel); border-bottom: 1px solid var(--fds-border); }
.ss-spot-dialog-head .ss-dialog-title { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.ss-spot-tag { font-size: .75rem; padding: 2px 8px; border-radius: var(--fds-radius-pill); background: var(--fds-amber-50); color: var(--fds-amber-700); }
.ss-spot-dialog-actions { display: flex; gap: 8px; margin-left: auto; }
.ss-spot-dialog-body { display: grid; gap: 12px; padding: 12px 16px 16px; }
.ss-spot-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ss-spot-toolbar .ss-light-field { display: flex; align-items: center; gap: 8px; }
.ss-spot-views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ss-spot-pane { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 12px; background: var(--fds-bg-panel); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); }
.ss-spot-pane h3 { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; font-size: .875rem; }
.ss-spot-pane h3 small { font-weight: 400; font-size: .75rem; color: var(--fds-text-muted); }
.ss-spot-plan.is-large { height: 420px; max-height: none; }
@media (max-width: 900px) { .ss-spot-plan.is-large { height: auto; } }
.ss-spot-3d { position: relative; height: 420px; border-radius: var(--fds-radius-md); overflow: hidden; background: var(--fds-gray-900); }
.ss-spot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ss-spot-cards .ss-spot-card { padding: 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); cursor: pointer; }
.ss-spot-cards .ss-spot-card.is-selected { border-color: var(--fds-blue-600); box-shadow: 0 0 0 2px var(--fds-blue-50); }
.ss-spot-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .75rem; color: var(--fds-white); background: var(--fds-gray-900); }
.ss-spot-card.is-selected .ss-spot-dot { background: var(--fds-blue-600); }
.ss-spot-checks { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ss-spot-ok { margin: 0; color: var(--fds-green-700); }
@media (max-width: 900px) {
  .ss-spot-views { grid-template-columns: minmax(0, 1fr); }
  .ss-spot-3d { height: 300px; }
  .ss-spot-dialog-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}
.ss-spot-head, .ss-spot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-spot-card-head strong { font-size: .8125rem; }
.ss-spot-card-head { justify-content: flex-start; }
.ss-spot-card-head .ss-spot-mode { margin-right: auto; }
.ss-link-btn { border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: .75rem; color: var(--fds-blue-600); cursor: pointer; }
.ss-link-btn:disabled { color: var(--fds-text-muted); cursor: default; }
.ss-spot-plan { display: block; width: 100%; height: auto; max-height: 260px; touch-action: none; user-select: none; background: var(--fds-gray-25); border-radius: var(--fds-radius-sm); }
.ss-spot-deck { fill: var(--fds-gray-50); stroke: var(--fds-border-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ss-spot-piece { fill: var(--fds-gray-200); stroke: var(--fds-gray-300); vector-effect: non-scaling-stroke; }
.ss-spot-rail { fill: none; stroke: var(--fds-gray-400); stroke-linecap: round; }
.ss-spot-front { fill: var(--fds-text-muted); }
.ss-spot-pool { fill: var(--fds-amber-50); fill-opacity: .9; stroke: var(--fds-amber-700); stroke-opacity: .45; vector-effect: non-scaling-stroke; }
.ss-spot-aimline { stroke: var(--fds-gray-400); }
.ss-spot-aimline.is-selected { stroke: var(--fds-blue-600); }
.ss-spot-aim { cursor: move; }
.ss-spot-aim circle:first-child { fill: var(--fds-white); fill-opacity: .8; stroke: var(--fds-gray-500); }
.ss-spot-aim-dot { fill: var(--fds-gray-500); }
.ss-spot-aim.is-selected circle:first-child { stroke: var(--fds-blue-600); }
.ss-spot-aim.is-selected .ss-spot-aim-dot { fill: var(--fds-blue-600); }
.ss-spot-handle { cursor: ew-resize; }
.ss-spot-handle circle { fill: var(--fds-gray-900); stroke: var(--fds-white); }
.ss-spot-handle text { fill: var(--fds-white); pointer-events: none; }
.ss-spot-handle.is-selected circle { fill: var(--fds-blue-600); }
.ss-spot-handle.is-over circle { stroke: var(--fds-amber-700); }
.ss-spot-handle:focus-visible circle, .ss-spot-aim:focus-visible circle:first-child { stroke: var(--fds-blue-600); stroke-dasharray: 3 2; }
.ss-spot-handle:focus, .ss-spot-aim:focus { outline: none; }
.ss-spot-card { display: grid; gap: 8px; }
.ss-spot-mode { font-size: .6875rem; padding: 1px 6px; border-radius: var(--fds-radius-pill); background: var(--fds-gray-100); color: var(--fds-text-secondary); }
.ss-spot-mode.is-manual { background: var(--fds-blue-50); color: var(--fds-blue-600); }

/* Session recovery uses the existing FDS card and button tokens. */
.ss-session-recovery { max-width: 760px; }
.ss-session-recovery-body { display: grid; gap: var(--fds-space-4); overflow-wrap: anywhere; }
.ss-session-recovery-body h1, .ss-session-recovery-body p { margin: 0; }
.ss-session-recovery-body h1 { font-size: 1.5rem; }
.ss-session-recovery-actions { display: flex; flex-wrap: wrap; gap: var(--fds-space-3); }
.ss-session-recovery-actions .fds-btn { min-height: 44px; white-space: normal; }

/* Store illuminance map (lighting S1): plan cells and the legend keys, shared by the editor and the share page. FDS extension. */
.plan-lux-cell { stroke: none; }
.plan-lux-cell.is-dark { fill: var(--fds-blue-600); }
.plan-lux-cell.is-ok { fill: #16a34a; }
.plan-lux-cell.is-bright { fill: var(--fds-red-700); }
.ss-store-lux-scale { display: flex; gap: 10px; }
.ss-store-lux-key { display: inline-flex; align-items: center; gap: 4px; }
.ss-store-lux-key::before { content: ''; width: 12px; height: 12px; border-radius: 2px; opacity: .6; }
.ss-store-lux-key.is-dark::before { background: var(--fds-blue-600); }
.ss-store-lux-key.is-ok::before { background: #16a34a; }
.ss-store-lux-key.is-bright::before { background: var(--fds-red-700); }

/* Light boxes (B1): a light frame with the lit face(s) in warm white. FDS extension. */
.plan-light-box { fill: var(--fds-gray-100); stroke: var(--fds-gray-700); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.plan-light-box-face { stroke: #f59e0b; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.is-editable .plan-object[data-kind="lightBox"] { cursor: grab; }
.plan-window-spot { fill: #fff3c4; stroke: #a16207; stroke-width: 1.2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.plan-plinth { fill: #f3efe8; stroke: var(--fds-gray-700); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.plan-plinth.is-warning { stroke: var(--fds-amber-700); }
.is-editable .plan-object[data-kind="plinth"] { cursor: grab; }

/* R1: street viewing points have a generous map hit area. */
.ss-walk-street-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.ss-walk-street-point { fill: var(--fds-color-primary, #2563eb); stroke: white; stroke-width: 50; pointer-events: none; }
[data-map-window]:focus .ss-walk-street-point { stroke: var(--fds-color-primary, #2563eb); stroke-width: 90; }
.ss-walk-map [data-street-return] { width: 100%; }
.ss-texture-size { display: grid; gap: var(--fds-space-2, 8px); }
/* FDS extension: tabletop fixture schematic and its live size controls. */
.ss-table-light-post { stroke: var(--fds-gray-700); stroke-width: 4; }
.ss-table-light-lamp { stroke: var(--fds-blue-600); stroke-width: 5; stroke-linecap: round; }
.ss-table-light-beam { stroke: var(--fds-blue-600); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ss-table-light-head { fill: var(--fds-gray-700); }
.ss-table-light-target { fill: var(--fds-gray-100); stroke: var(--fds-blue-600); stroke-width: 1.5; }
[data-table-light] .ss-rule-slider { min-height: 44px; }
.ss-case-library { display: grid; gap: var(--fds-space-2); min-width: 0; }
.ss-template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--fds-space-2); }
.ss-template-card { display: grid; gap: var(--fds-space-1); padding: var(--fds-space-2); border: 1px solid var(--fds-gray-300); border-radius: var(--fds-radius-md,8px); color: var(--fds-gray-700); background: var(--fds-gray-100); text-align: left; cursor: pointer; overflow-wrap: anywhere; min-width: 0; }
.ss-template-card.is-selected { border-color: var(--fds-blue-600); box-shadow: inset 0 0 0 1px var(--fds-blue-600); }
.ss-template-card:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-template-thumbnail { width: 100%; height: auto; }
.ss-template-glass { stroke: var(--fds-blue-600); stroke-width: 1.5; }
.ss-template-body { fill: var(--fds-gray-100); stroke: var(--fds-gray-700); }
.ss-template-frame { stroke: var(--ss-template-frame,var(--fds-gray-700)); stroke-width: 4; }
.ss-template-trim { stroke: var(--ss-template-frame,var(--fds-gray-700)); stroke-width: 1.5; }

/* FDS extension: shared image file drop target and light box preview crop dialog. */
.ss-image-drop { min-width: 0; border: 1px dashed var(--fds-border-strong); border-radius: var(--fds-radius-md, 8px); padding: var(--fds-space-3); }
.ss-image-drop.is-dragging { border-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-artwork-thumbnail { display: block; max-width: 100%; max-height: 140px; margin-bottom: var(--fds-space-2); }
.ss-artwork-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-lg, 12px); padding: 16px; }
.ss-artwork-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.ss-artwork-dialog canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; margin-bottom: 12px; }
.ss-artwork-dialog input[type=range] { min-height: 44px; width: 100%; }

.ss-image-drop input[type=file] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
/* FDS extension: artwork controls and the space stage fit the 320px viewport. */
.ss-editor-page[data-workspace-step=space] :is(.ss-editor-left, .ss-step-panel, .ss-space-workspace, .ss-editor-stage) { min-width: 0; }
.ss-editor-page[data-workspace-step=space] .ss-editor-stage { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 390px) {
  .ss-editor-page[data-workspace-step=space] .ss-toolbar { flex-wrap: wrap; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .ss-editor-page[data-workspace-step=space] .ss-editor-left .fds-btn { white-space: normal; min-width: 0; max-width: 100%; }
}

/* FDS extension: illustrated pole-head count and per-head parameter tabs. */
.ss-pole-count { display: grid; gap: var(--fds-space-2); }
.ss-pole-count-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--fds-space-2); }
.ss-pole-count-option { display: grid; justify-items: center; gap: var(--fds-space-1); padding: var(--fds-space-2); border: 1px solid var(--fds-gray-300); border-radius: var(--fds-radius-md, 8px); background: var(--fds-white, #fff); color: var(--fds-gray-700); font: inherit; cursor: pointer; }
.ss-pole-count-option[aria-pressed="true"] { border-color: var(--fds-blue-600); background: var(--fds-blue-50, #eff6ff); color: var(--fds-blue-600); box-shadow: inset 0 0 0 1px var(--fds-blue-600); }
.ss-pole-count-option:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-pole-count-diagram { width: 64px; height: 60px; }
.ss-pole-head-controls { display: grid; gap: var(--fds-space-3); }
.ss-pole-head-tabs { display: flex; overflow-x: auto; gap: var(--fds-space-1); padding: var(--fds-space-1); background: var(--fds-gray-100); border-radius: var(--fds-radius-md, 8px); }
.ss-pole-head-tabs .ss-seg-btn { flex: 1 0 auto; border: 1px solid transparent; border-radius: var(--fds-radius-md, 8px); }
.ss-pole-head-tabs .ss-seg-btn[aria-selected="true"] { background: var(--fds-blue-50); color: var(--fds-blue-600); border-color: var(--fds-blue-600); font-weight: 600; }
.ss-pole-head-controls [hidden] { display: none; }
/* FDS extension: template thumbnails inside the existing add-run panel. */
.ss-run-template-picker > svg { width:100%; height:160px; color:var(--fds-text-secondary); }
.ss-run-template-picker > .fds-btn { white-space:normal; }
.ss-run-template-picker .ss-case-disclosure .ss-add-dimensions { padding:var(--fds-space-2); }

/* FDS extension: retain the frozen editor beneath failed-draft recovery. */
.ss-session-recovery-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--fds-radius-lg); }
.ss-session-recovery-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.ss-session-recovery-dialog .ss-session-recovery { margin: 0; padding: 0; }

/* FDS extension: per-showcase brand artwork remains inside the inspector. */
.ss-upper-property .ss-image-drop { min-width: 0; }
.ss-upper-property .ss-image-drop input { max-width: 100%; }
.ss-upper-property .ss-project-logo-preview { max-width: 100%; object-fit: contain; }

.ss-upper-property > .ss-check { display: flex; align-items: center; min-height: 44px; }
.ss-upper-property > .ss-run-actions { display: flex; flex-wrap: wrap; gap: var(--fds-space-2, 8px); }

/* FDS extension: mint rotation controls shared by SVG and the WebGL overlay. */
:is(.fpa-rotation-control, .ss-single-case-host) {
  --ss-fpa-rotation-color: #36b88c;
  --ss-fpa-rotation-active: var(--fds-green-700);
}
/* Screen-sized case-plan rotation affordance. */
.fpa-rotation-control { pointer-events: none; }
.fpa-rotation-stem { stroke: var(--fds-green-700); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; stroke-opacity: .7; }
.fpa-rotation-control [data-fpa-rotate-handle] { pointer-events: all; cursor: grab; touch-action: none; outline: none; }
.fpa-rotation-hit { fill: transparent; }
.fpa-rotation-knob { fill: color-mix(in srgb, var(--ss-fpa-rotation-color) 18%, var(--fds-white) 82%); fill-opacity: .85; stroke: var(--ss-fpa-rotation-color); stroke-width: 2; }
.fpa-rotation-icon { fill: none; stroke: var(--fds-green-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.fpa-rotation-control [data-fpa-rotate-handle]:hover .fpa-rotation-knob,
.fpa-rotation-control [data-fpa-rotate-handle]:focus-visible .fpa-rotation-knob,
.fpa-rotation-control.is-rotating .fpa-rotation-knob { fill: var(--fds-green-50); fill-opacity: 1; stroke: var(--ss-fpa-rotation-active); stroke-width: 3; }
.fpa-rotation-control.is-rotating [data-fpa-rotate-handle] { cursor: grabbing; }
.fpa-rotation-badge rect { fill: var(--fds-green-50); fill-opacity: .85; stroke: var(--ss-fpa-rotation-color); }
.fpa-rotation-badge text { fill: var(--fds-green-700); font-size: 12px; font-weight: 600; }

.is-rotating-fpa, .is-rotating-fpa * { cursor: grabbing !important; }

/* FDS extension: live angle badge for the horizontal 3D rotation ring. */
.ss-fpa-rotation-3d { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--fds-green-50) 85%, transparent); color: var(--fds-green-700); border: 1px solid var(--ss-fpa-rotation-color); backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; box-shadow: 0 0 0 2px var(--fds-white); }
.ss-fpa-rotation-3d[hidden] { display: none; }
[data-fpa-rotation-hover="on"] canvas { cursor: grab; }
[data-fpa-rotating] canvas { cursor: grabbing !important; }

.fpa-rotation-control.is-rotating .fpa-rotation-badge rect { fill-opacity: 1; }
:is([data-fpa-rotation-hover="on"], [data-fpa-rotating]) .ss-fpa-rotation-3d { background: var(--fds-green-50); border-color: var(--ss-fpa-rotation-active); }