/* TrayScene workspace (docs/TrayScene_Architecture_V1.md): full-screen dialog with
   areas, plan, elevation, 3D and properties, plus the arrangement and grid windows.
   FDS extension: a workspace-sized dialog layout FDS does not define. */
.ts-workspace { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--fds-gray-50, #f6f7f8); color: var(--fds-text, #1f2933); }
.ts-workspace::backdrop, .ts-sub::backdrop { background: rgb(15 23 42 / .45); }
.ts-workspace[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ts-head { display: flex; align-items: center; gap: var(--fds-space-3, 12px); padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--fds-border, #e5e7eb); flex-wrap: wrap; }
.ts-logo { height: 32px; width: auto; }
/* FDS extension: the title/settings capsule follows SpaceScene's project menu. */
.ts-title { display: flex; flex: 1; min-width: 0; }
.ts-title-button.fds-btn { display: inline-flex; align-items: center; box-sizing: border-box; gap: 8px; height: 30px; min-height: 30px; max-width: 100%; padding: 0 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-bg-panel); color: var(--fds-text-primary); font: inherit; font-size: 12px; font-weight: 400; cursor: pointer; }
.ts-title-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-title-button.fds-btn:hover { background: var(--fds-bg-muted); border-color: var(--fds-border-strong); }
.ts-title-button:focus-visible, .ts-settings-nav button:focus-visible { outline: 2px solid var(--fds-text-primary); outline-offset: 3px; }
.ts-gear { width: 16px; height: 16px; flex: none; color: var(--fds-text-secondary); }
.ts-title-button:hover .ts-gear { color: var(--fds-text-primary); }
.ts-settings { box-sizing: border-box; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-xl); padding: 0; width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: hidden; background: var(--fds-bg-panel); color: var(--fds-text-primary); box-shadow: var(--fds-shadow-3); }
.ts-settings::backdrop { background: rgb(15 23 42 / .45); }
.ts-settings-grid { display: grid; grid-template-columns: 184px minmax(0, 1fr); height: min(720px, calc(100dvh - 34px)); min-height: 0; }
.ts-settings-nav { display: grid; align-content: start; gap: 4px; padding: 24px 12px; background: var(--fds-gray-50); border-inline-end: 1px solid var(--fds-border); }
.ts-settings-nav h2 { margin: 0 10px 20px; font-size: 16px; font-weight: 600; }
.ts-settings-nav button { text-align: start; font: inherit; font-size: 13px; color: var(--fds-text-secondary); border: 1px solid transparent; background: none; padding: 10px 12px; border-radius: var(--fds-radius-md); cursor: pointer; }
.ts-settings-nav button:hover { background: var(--fds-gray-100); color: var(--fds-text-primary); }
.ts-settings-nav button.is-on { background: var(--fds-bg-panel); border-color: var(--fds-border); color: var(--fds-text-primary); font-weight: 600; box-shadow: var(--fds-shadow-1); }
.ts-settings-body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; min-height: 0; min-width: 0; overflow: auto; padding: 28px; }
.ts-settings-body:has(.ts-size) { grid-template-rows: auto minmax(0, 1fr); overflow: hidden; padding-bottom: 0; }
.ts-settings-body h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.ts-settings-body p { margin: 0; }
/* FDS extension: standalone project settings retain the shared field and action styles. */
.ts-project-settings { display: grid; gap: 16px; min-width: 0; }
.ts-settings-foot { display: flex; justify-content: flex-end; gap: 8px; padding-block: 16px; border-top: 1px solid var(--fds-border); background: var(--fds-bg-panel); }
.ts-settings-foot .fds-btn { min-height: 36px; padding-inline: 18px; border-radius: var(--fds-radius-pill); font-size: 13px; }
@media (pointer: coarse) { .ts-title-button.fds-btn, .ts-settings-foot .fds-btn { min-height: 44px; } }
@media (max-width: 640px) {
  .ts-settings { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .ts-settings-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: min(760px, calc(100dvh - 18px)); }
  .ts-settings-nav { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 12px; border-inline-end: 0; border-bottom: 1px solid var(--fds-border); }
  .ts-settings-nav h2 { margin: 0 8px 0 0; flex: none; }
  .ts-settings-nav button { flex: none; padding: 8px 10px; }
  .ts-settings-body { padding: 20px 16px; }
  .ts-settings input, .ts-settings select, .ts-settings textarea { scroll-margin-block: 140px; }
}
.ts-head-actions, .ts-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-tools-col { flex-direction: column; align-items: stretch; }
.ts-meta { color: var(--fds-text-secondary, #6b7280); font-size: var(--fds-font-size-sm, 13px); }
.ts-notice { color: var(--fds-blue-600, #2563eb); font-size: var(--fds-font-size-sm, 13px); min-height: 1.2em; }
.ts-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 300px; gap: 12px; padding: 12px; min-height: 0; }
.ts-panel { background: #fff; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 12px; padding: 12px; overflow: auto; display: grid; align-content: start; gap: 10px; }
.ts-areas { display: grid; gap: 8px; }
.ts-area { display: grid; gap: 2px; text-align: start; border: 1px solid var(--fds-border, #e5e7eb); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; font: inherit; }
.ts-area small { color: var(--fds-text-secondary, #6b7280); }
.ts-area.is-on { border-color: var(--fds-blue-600, #2563eb); background: #eff6ff; }
.ts-center { display: grid; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; min-height: 0; }
/* Left 3D view with the areas drawer; centre plan (with tools) over elevation. */
.ts-view.ts-view-plan { grid-template-rows: auto minmax(0, 1fr) auto; }
.ts-view.ts-view-3d { grid-template-rows: minmax(0, 1fr); }
.ts-view-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; flex-wrap: wrap; }
.ts-view-head h3 { padding: 0; flex: 1; }
.ts-view-foot { display: grid; gap: 2px; padding: 4px 10px 8px; }
.ts-view-foot p { margin: 0; }
.ts-area-toggle { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; max-width: max(96px, calc(100% - 250px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--fds-border, #e5e7eb); background: rgb(255 255 255 / .94); box-shadow: 0 2px 8px rgb(15 23 42 / .12); cursor: pointer; }
.ts-area-toggle[aria-expanded=true] { border-color: var(--fds-blue-600, #2563eb); color: var(--fds-blue-600, #2563eb); }
.ts-area-toggle-icon { font-size: 16px; line-height: 1; }
.ts-area-toggle > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-drawer { position: absolute; top: 50px; bottom: 10px; inset-inline-start: 10px; z-index: 2; width: min(300px, calc(100% - 20px)); display: grid; align-content: start; gap: 10px; padding: 12px; overflow: auto; background: #fff; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 12px; box-shadow: 0 10px 30px rgb(15 23 42 / .18); }
.ts-drawer[hidden] { display: none; }
.ts-shell-switch { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--fds-border, #e5e7eb); background: rgb(255 255 255 / .94); box-shadow: 0 2px 8px rgb(15 23 42 / .12); }
.ts-shell-switch[hidden] { display: none; }
.ts-shell-switch button { font: inherit; font-size: 13px; padding: 4px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--fds-text-secondary, #6b7280); }
.ts-shell-switch button[aria-pressed=true] { background: var(--fds-gray-900, #111827); color: #fff; }
.ts-view { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 12px; overflow: hidden; min-height: 0; }
/* FDS extension: fullscreen toggle for the container 3D pane. */
.ts-fullscreen { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 10px; background: rgb(255 255 255 / .94); box-shadow: 0 2px 8px rgb(15 23 42 / .12); color: var(--fds-text-secondary, #6b7280); cursor: pointer; }
.ts-fullscreen:hover { color: var(--fds-text-primary, #111827); }
.ts-fullscreen:focus-visible { outline: 2px solid var(--fds-accent, #2563eb); outline-offset: 2px; }
.ts-fullscreen svg { width: 17px; height: 17px; }
.ts-view:fullscreen { background: #f4f5f7; border: 0; border-radius: 0; }
.ts-view:fullscreen > canvas { width: 100%; height: 100%; }
.ts-view h3 { margin: 0; padding: 6px 10px 2px; font-size: 12px; color: var(--fds-text-secondary, #6b7280); pointer-events: none; }
.ts-plan, .ts-elev, .ts-3d { width: 100%; height: 100%; min-height: 0; display: block; touch-action: none; }
.ts-panel p { margin: 0; }
.ts-notice:empty { display: none; }
.ts-prop-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ts-tag { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #eef2ff; color: #3730a3; }
.ts-kind-icon { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.ts-btn .ts-kind-icon { margin-inline-end: 6px; }
.ts-tag-kind { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ts-tag-kind .ts-kind-icon { width: 12px; height: 12px; }
.ts-tag-kind-grid { background: #e5e7eb; color: #374151; }
.ts-tag-kind-big { background: #ede9fe; color: #5b21b6; }
.ts-tag-custom { background: #f1f5f9; color: #334155; }
.ts-tag-big { background: #ede9fe; color: #5b21b6; }
.ts-preview { background: #fafbfc; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 10px; padding: 6px; }
.ts-preview svg { width: 100%; height: auto; display: block; max-height: 220px; }
.ts-slide { display: grid; grid-template-columns: 2.5em 1fr; gap: 2px 8px; align-items: center; }
.ts-slide output { grid-column: 2; color: var(--fds-text-secondary, #6b7280); font-size: 12px; }
.ts-slide input[type=range] { width: 100%; accent-color: var(--fds-blue-600, #2563eb); }
.ts-check { display: flex; gap: 6px; align-items: center; }
/* Native checkboxes keep their own geometry inside any host application's form styles. */
.ts-check input[type=checkbox], .ts-material-follow input[type=checkbox] { width: 16px; height: 16px; min-height: 0; flex: 0 0 16px; padding: 0; margin: 0; appearance: auto; }
.ts-list { display: grid; gap: 2px; }
.ts-list-item { text-align: start; border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; font: inherit; }
.ts-list-item b { font-weight: 600; margin-inline-end: 4px; }
.ts-list-item.is-on { background: #eff6ff; color: var(--fds-blue-600, #2563eb); }
.ts-issues { margin: 0; padding-inline-start: 1.1em; font-size: 13px; }
.ts-issues .is-error { color: var(--fds-danger-600, #b91c1c); }
.ts-issues .is-warning { color: #b45309; }
.ts-issues .is-info { color: #92400e; }
.ts-summary { border-top: 1px solid var(--fds-border, #e5e7eb); padding-top: 8px; }
.ts-sub { border: 0; border-radius: 14px; padding: 0; width: min(1080px, 96vw); max-height: 94vh; box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
.ts-sub-body { padding: 14px; display: grid; gap: 10px; }
.ts-sub-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ts-sub-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 210px; gap: 12px; }
.ts-sub-stage { display: grid; place-items: center; align-content: center; background: #fafbfc; border-radius: 10px; min-height: 360px; padding: 8px; overflow: auto; }
.ts-legend { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; width: 100%; padding: 8px 4px 0; margin-top: 8px; border-top: 1px solid var(--fds-border, #e5e7eb); font-size: 12px; color: var(--fds-text-secondary, #6b7280); }
.ts-legend-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ts-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.ts-swatch { width: 12px; height: 12px; border-radius: 3px; border: 2px solid; }
.ts-swatch.is-free { border-color: #16a34a; background: rgb(22 163 74 / .18); }
.ts-swatch.is-tall { border-color: #d97706; background: rgb(217 119 6 / .15); }
.ts-swatch.is-conflict { border-color: #dc2626; background: rgb(220 38 38 / .15); }
.ts-legend kbd { font: inherit; font-size: 11px; padding: 0 5px; min-width: 18px; text-align: center; border: 1px solid var(--fds-border, #d1d5db); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--fds-text, #1f2933); }
.ts-sub-svg, .ts-grid { max-width: 100%; max-height: 66vh; touch-action: none; }
.ts-sub-svg { width: 100%; height: auto; }
.ts-lib { display: grid; gap: 8px; max-height: 62vh; overflow: auto; }
.ts-card { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 10px; padding: 6px; cursor: grab; background: #fff; user-select: none; touch-action: none; }
.ts-card.is-on { border-color: var(--fds-blue-600, #2563eb); background: #eff6ff; }
.ts-card-art svg { width: 64px; height: 48px; display: block; }
.ts-card b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.ts-card small { display: block; font-size: 12px; line-height: 1.4; color: var(--fds-text-secondary, #6b7280); }
.ts-card .is-warn { color: #b45309; }
.ts-card .is-error { color: var(--fds-danger-600, #b91c1c); }
.ts-ghost { position: fixed; pointer-events: none; z-index: 10; transform-origin: 0 0; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .25)); }
.ss-safe-entry { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .ts-body { grid-template-columns: 1fr; grid-auto-rows: max-content; overflow: auto; }
  .ts-panel { overflow: visible; }
  .ts-center { grid-template-rows: auto auto; }
  .ts-view { height: 320px; }
  .ts-view-plan, .ts-view-3d { height: 420px; }
  .ts-sub-grid { grid-template-columns: 1fr; }
}

/* SVG pointer affordances (classes, not inline styles: the page CSP is style-src 'self'). */
.ts-workspace .ts-pick { cursor: pointer; }
.ts-workspace .ts-drag { cursor: move; }
.ts-ghost-svg { overflow: visible; }
.ts-workspace .ts-guide, .ts-sub .ts-guide { stroke: #2563eb; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
/* FDS extension: measured container dimensions, grouped in four quiet cards.
   Only the field area scrolls; the apply/close controls remain visible. */
.ts-size-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ts-size-heading > div { display: grid; gap: 8px; }
.ts-size-heading .ts-meta { line-height: 1.65; max-width: 48em; }
.ts-size-unit { flex: none; margin-top: 2px; padding: 5px 10px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-bg-muted); color: var(--fds-text-secondary); font-size: 12px; white-space: nowrap; }
.ts-size { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; gap: 0; }
.ts-size-fields { display: grid; align-content: start; gap: 16px; overflow: auto; min-height: 0; padding: 4px 3px 20px; scrollbar-gutter: stable; }
.ts-size-group { border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); background: var(--fds-gray-50); padding: 12px 16px 16px; margin: 0; min-width: 0; }
.ts-size-group legend { color: var(--fds-text-primary); font-size: 13px; font-weight: 600; padding-inline: 6px; }
.ts-size-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ts-field { display: grid; gap: 7px; font-size: 12px; color: var(--fds-text-secondary); min-width: 0; }
.ts-field .fds-input, .ts-field .fds-select { box-sizing: border-box; width: 100%; min-width: 0; height: 40px; padding-inline: 12px; border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); color: var(--fds-text-primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.ts-field-wide { grid-column: span 2; }
.ts-field small { font-size: 11px; line-height: 1.5; }
.ts-size-issues { margin: 0; padding: 12px 16px 12px 32px; border: 1px solid var(--fds-border-strong); border-radius: var(--fds-radius-md); background: var(--fds-red-50); color: var(--fds-red-700); font-size: 13px; }
.ts-size-issues:empty { display: none; }
@media (max-width: 640px) {
  .ts-size-heading { flex-wrap: wrap; gap: 10px; }
  .ts-size-heading h3 { font-size: 18px; }
  .ts-size-fields { gap: 14px; }
  .ts-size-group { padding: 10px 12px 14px; }
  .ts-size-row { gap: 10px 8px; }
  .ts-field .fds-input, .ts-field .fds-select { height: 44px; padding-inline: 8px; font-size: 16px; }
}
@media (max-width: 380px) {
  .ts-size-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-field-wide { grid-column: 1 / -1; }
}

/* FDS extension: editor-wide units and language preferences, matching SpaceScene controls. */
.ts-unit-switch { display: inline-flex; align-items: center; justify-self: start; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-bg-muted); }
.ts-unit-switch button { min-width: 46px; min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--fds-radius-pill); background: transparent; color: var(--fds-text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.ts-unit-switch button[aria-pressed=true] { background: var(--fds-bg-panel); color: var(--fds-text-primary); box-shadow: var(--fds-shadow-1); font-weight: 600; }
.ts-unit-switch button:focus-visible { outline: 2px solid var(--fds-text-primary); outline-offset: 2px; }
.ts-preference-card { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px; margin-block: 8px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-lg); background: var(--fds-gray-50); font-size: 13px; }
.ts-settings-body .ss-language-choices { min-inline-size: 0; max-inline-size: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-settings-body .ss-language-choices button { min-inline-size: 0; }
@media (max-width: 640px) { .ts-settings-body .ss-language-choices { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { .ts-unit-switch button { min-height: 38px; } }

/* FDS extension: shelf sliders and a live front elevation inside size settings. */
.ts-shelf-board-field { width: calc((100% - 24px) / 3); margin-bottom: 16px; }
.ts-shelf-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .9fr); gap: 20px; align-items: start; }
.ts-shelf-controls { display: grid; gap: 14px; min-width: 0; }
.ts-shelf-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ts-shelf-count .fds-select { width: 80px; }
.ts-shelf-sliders { display: grid; gap: 10px; }
.ts-shelf-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); font-size: 12px; }
.ts-shelf-slider.is-active { border-color: var(--fds-text-primary); }
.ts-shelf-slider output { font-variant-numeric: tabular-nums; color: var(--fds-text-primary); font-weight: 600; white-space: nowrap; }
.ts-shelf-slider input[type=range] { grid-column: 1 / -1; width: 100%; margin: 0; min-height: 24px; accent-color: var(--fds-text-primary); cursor: ew-resize; }
.ts-shelf-controls > .ts-meta { margin: 0; font-size: 11px; line-height: 1.6; }
.ts-shelf-figure { display: grid; gap: 4px; position: sticky; top: 0; margin: 0; padding: 12px 4px 0; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); }
.ts-shelf-figure figcaption { color: var(--fds-text-secondary); font-size: 12px; text-align: center; }
.ts-shelf-svg { display: block; width: 100%; height: auto; }
.ts-shelf-cavity { fill: var(--fds-gray-50); stroke: var(--fds-border-strong); stroke-width: 2; }
.ts-shelf-board { fill: var(--fds-gray-500); }
.ts-shelf-board.is-active { fill: var(--fds-text-primary); }
.ts-shelf-board.is-invalid { fill: var(--fds-red-700); }
.ts-shelf-guide { stroke: var(--fds-border-strong); stroke-dasharray: 3 3; }
.ts-shelf-dimension { fill: var(--fds-text-primary); font-size: 12px; font-variant-numeric: tabular-nums; }
.ts-shelf-ruler { stroke: var(--fds-text-secondary); stroke-width: 1; }
.ts-shelf-ruler-label { fill: var(--fds-text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.ts-shelf-ruler-marker { fill: var(--fds-text-primary); }
.ts-shelf-clear { fill: var(--fds-text-secondary); font-size: 11px; }
.ts-shelf-warning { margin: 0; font-size: 12px; color: var(--fds-red-700); line-height: 1.6; }
.ts-shelf-warning:empty { display: none; }
@media (max-width: 640px) {
  .ts-shelf-board-field { width: 100%; }
  .ts-shelf-editor { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ts-shelf-figure { position: static; }
  .ts-shelf-svg { max-height: 300px; }
  .ts-shelf-slider input[type=range] { min-height: 36px; }
}

/* FDS extension: container tray arrangement — one canvas, a compact inspector,
   and persistent completion actions. Grid-insert editing keeps its own layout. */
.ts-sub:has(.ts-big-editor) { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: hidden; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-xl); background: var(--fds-gray-50); }
.ts-big-editor { box-sizing: border-box; height: min(800px, calc(100dvh - 34px)); min-height: 0; padding: 0; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.ts-arrange-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--fds-border); background: var(--fds-bg-panel); }
.ts-arrange-heading { min-width: 0; display: grid; gap: 8px; }
.ts-arrange-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ts-arrange-actions { display: flex; align-items: center; flex: none; gap: 8px; margin-inline-start: auto; }
.ts-arrange-head h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; }
.ts-arrange-head p { margin: 0; font-size: 12px; line-height: 1.6; }
.ts-arrange-badge { flex: none; padding: 3px 8px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill); background: var(--fds-gray-50); color: var(--fds-text-secondary); font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ts-arrange-layout { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 0; min-height: 0; padding: 0; }
.ts-arrange-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.ts-arrange-stage { display: grid; min-width: 0; min-height: 0; overflow: hidden; background: var(--fds-bg-panel); }
.ts-big-editor h3 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
.ts-arrange-canvas { display: grid; place-items: center; min-height: 0; min-width: 0; overflow: hidden; padding: 16px 0; background: var(--fds-gray-50); }
.ts-big-editor .ts-sub-svg { display: block; width: 100%; height: 100%; max-height: none; }
.ts-arrange-add { display: grid; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--fds-border); background: var(--fds-bg-panel); }
.ts-arrange-add p { margin: 0; font-size: 12px; line-height: 1.6; }
.ts-arrange-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ts-arrange-add-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-arrange-sidebar { display: grid; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--fds-border); background: var(--fds-bg-panel); }
.ts-arrange-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-height: 0; padding: 20px; }
.ts-arrange-dimension { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; }
.ts-arrange-dimension output { text-align: end; color: var(--fds-text-secondary); font-variant-numeric: tabular-nums; }
.ts-arrange-dimension input { grid-column: 1 / -1; width: 100%; min-height: 24px; margin: 0; accent-color: var(--fds-text-primary); }
.ts-big-editor .fds-btn { min-height: 36px; height: auto; padding: 8px 14px; border-radius: var(--fds-radius-pill); font-size: 12px; line-height: 1.4; }
.ts-arrange-auto { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-arrange-auto .fds-btn { border-color: var(--fds-border); background: var(--fds-bg-panel); color: var(--fds-text-secondary); }
.ts-arrange-list { display: grid; align-content: start; gap: 6px; min-height: 0; overflow: auto; }
.ts-arrange-item { display: grid; gap: 4px; width: 100%; padding: 10px 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); color: var(--fds-text-primary); text-align: start; font: inherit; cursor: pointer; }
.ts-arrange-item strong { font-size: 12px; font-weight: 600; }
.ts-arrange-item span { color: var(--fds-text-secondary); font-size: 11px; line-height: 1.5; }
.ts-arrange-item:hover { background: var(--fds-bg-muted); }
.ts-arrange-item.is-on { border-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ts-arrange-item:focus-visible { outline: 2px solid var(--fds-text-primary); outline-offset: 2px; }
.ts-arrange-selection { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fds-border); }
.ts-arrange-selection p { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ts-arrange-selection-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-arrange-add .ts-notice:empty { display: none; }
@media (max-width: 760px) {
  .ts-sub:has(.ts-big-editor) { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .ts-big-editor { height: calc(100dvh - 18px); }
  .ts-arrange-head { flex-wrap: wrap; gap: 12px; padding: 18px 16px; }
  .ts-arrange-head h2 { font-size: 16px; }
  .ts-arrange-layout { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow: auto; }
  .ts-arrange-main { grid-template-rows: 300px auto; }
  .ts-arrange-add { padding: 16px; }
  .ts-arrange-dimensions { gap: 16px; }
  .ts-arrange-sidebar { min-height: 260px; overflow: visible; border-left: 0; border-top: 1px solid var(--fds-border); }
  .ts-arrange-card { grid-template-rows: auto minmax(80px, 1fr) auto; padding: 16px; }
  .ts-arrange-list { max-height: 240px; }
}
@media (max-width: 540px) {
  .ts-arrange-sidebar { grid-template-columns: minmax(0, 1fr); }
  .ts-arrange-badge { font-size: 11px; }
}
@media (pointer: coarse) {
  .ts-big-editor .fds-btn, .ts-arrange-dimension input { min-height: 44px; }
}

/* FDS extension: compact typography and grouped controls for the tray inspector. */
.ts-props { min-width: 0; gap: 14px; padding: 16px; font-size: 12px; line-height: 1.5; color: var(--fds-text-primary); }
.ts-props strong { font-size: 12px; font-weight: 600; }
.ts-props .ts-prop-head { gap: 6px; }
.ts-props .ts-prop-head > strong { margin-inline-end: 2px; font-size: 14px; }
.ts-props .ts-meta, .ts-props .ts-issues { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ts-props .ts-tag { padding: 2px 6px; font-size: 11px; line-height: 1.4; }
.ts-props .ts-preview { padding: 10px; border-radius: var(--fds-radius-md); background: var(--fds-gray-50); }
.ts-props .ts-preview svg { max-height: 150px; }
.ts-prop-fields { display: grid; gap: 12px; padding-block: 2px; }
.ts-props .ts-slide { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
.ts-props .ts-slide label { font-size: 12px; color: var(--fds-text-secondary); }
.ts-props .ts-slide output { grid-column: 2; grid-row: 1; text-align: end; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fds-text-primary); }
.ts-props .ts-slide input[type=range] { grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 24px; margin: 0; accent-color: var(--fds-text-primary); }
.ts-props .ts-check { min-height: 28px; gap: 8px; font-size: 12px; }
.ts-props .ts-check input { margin: 0; accent-color: var(--fds-text-primary); }
.ts-props .ts-prop-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-block: 14px; border-block: 1px solid var(--fds-border); }
.ts-prop-actions .fds-btn { min-width: 0; min-height: 32px; height: auto; padding: 7px 8px; border-radius: var(--fds-radius-pill); font-size: 12px; font-weight: 500; line-height: 1.5; }
.ts-prop-actions .fds-btn:first-child { grid-column: 1 / -1; }
.ts-prop-section { display: grid; min-width: 0; gap: 8px; }
.ts-props .ts-list { gap: 4px; }
.ts-props .ts-list-item { min-width: 0; padding: 8px 10px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; color: var(--fds-text-secondary); border: 1px solid transparent; border-radius: var(--fds-radius-md); }
.ts-props .ts-list-item:hover { background: var(--fds-bg-muted); color: var(--fds-text-primary); }
.ts-props .ts-list-item.is-on { border-color: var(--fds-blue-600); background: var(--fds-blue-50); color: var(--fds-blue-600); }
.ts-props .ts-list-item:focus-visible { outline: 2px solid var(--fds-text-primary); outline-offset: 2px; }
.ts-props .ts-summary { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-gray-50); }
@media (pointer: coarse) {
  .ts-props .ts-slide input[type=range], .ts-props .ts-check, .ts-prop-actions .fds-btn, .ts-props .ts-list-item { min-height: 44px; }
}

/* Fixed suitcase drawers need only the plan, without a stacking elevation. */
.ts-workspace-suitcase .ts-center { grid-template-rows: minmax(0, 1fr); }
.ts-workspace-suitcase .ts-view-elev[hidden] { display: none; }

/* FDS extension: direct insert editing for fixed suitcase drawers. */
.ts-workspace-suitcase .ts-plan[hidden] { display: none; }
.ts-inline-editor { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; min-height: 0; padding: 10px; gap: 8px; }
.ts-inline-editor .ts-sub-stage { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; background: transparent; overflow: hidden; }
.ts-inline-editor .ts-grid { width: 100%; height: 100%; max-height: none; min-height: 0; }
.ts-inline-editor .ts-grid:focus-visible { outline: 2px solid var(--fds-blue-600, #2563eb); outline-offset: -2px; }
.ts-inline-actions { flex-wrap: wrap; }
.ts-inline-actions .ts-btn { font-size: 12px; padding: 6px 8px; }
.ts-inline-editor p { margin: 0; font-size: 12px; }
.ts-inline-summary { display: grid; gap: 6px; }
.ts-inline-library { display: grid; gap: 6px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--fds-border, #e5e7eb); }
.ts-inline-library > strong { font-size: 12px; color: var(--fds-text-secondary, #6b7280); }
/* FDS extension: category tags beside the insert-library title. */
.ts-library-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ts-library-head > strong { flex: 0 0 auto; font-size: 12px; color: var(--fds-text-secondary, #6b7280); }
.ts-lib-tags { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding: 1px 0; }
.ts-lib-tags.is-fade { mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
.ts-lib-tag { flex: 0 0 auto; padding: 1px 9px; border: 1px solid var(--fds-border, #e5e7eb); border-radius: 999px; background: #fff; font: inherit; font-size: 11px; line-height: 20px; color: var(--fds-text-secondary, #6b7280); cursor: pointer; }
.ts-lib-tag:hover { border-color: var(--fds-gray-400, #9ca3af); color: var(--fds-text-primary, #111827); }
.ts-lib-tag[aria-pressed=true] { background: var(--fds-gray-900, #111827); border-color: var(--fds-gray-900, #111827); color: #fff; }
.ts-lib-tag:focus-visible { outline: 2px solid var(--fds-accent, #2563eb); outline-offset: 2px; }
.ts-inline-library .ts-lib { grid-template-rows: repeat(2, max-content); grid-auto-flow: column; align-content: start; min-height: max-content; grid-auto-columns: minmax(128px, calc((100% - 18px) / 4)); max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; gap: 6px; }
.ts-inline-library .ts-card { min-width: 0; touch-action: pan-x pinch-zoom; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px; border-radius: 8px; align-content: start; }
.ts-inline-library .ts-card-art { display: grid; place-items: center; height: 36px; }
.ts-inline-library .ts-card-art svg { width: 64px; height: 36px; }
.ts-inline-library .ts-card b { overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
.ts-inline-library .ts-card small { overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
.ts-inline-library .ts-card:focus-visible { outline: 2px solid var(--fds-blue-600, #2563eb); }
@media (max-width: 1100px) {
  .ts-workspace-suitcase .ts-view-plan { height: 680px; }
}

/* FDS extension: suitcase controls and quieter insert cards. */
.ts-workspace-suitcase .ts-view-plan > .ts-view-head { display: none; }
.ts-workspace-suitcase .ts-view.ts-view-plan { grid-template-rows: minmax(0, 1fr) auto; }
.ts-workspace-suitcase .ts-head-actions .ts-btn,
.ts-workspace-suitcase .ts-inline-actions .ts-btn,
.ts-workspace-suitcase .ts-props .ts-btn,
.ts-workspace-suitcase .ts-props .ts-list-item,
.ts-workspace-suitcase .ts-props .fds-select { border-radius: var(--fds-radius-pill, 999px); }
.ts-workspace-suitcase .ts-head-actions .ts-btn,
.ts-workspace-suitcase .ts-inline-actions .ts-btn,
.ts-workspace-suitcase .ts-props .ts-btn { padding-inline: 14px; font-size: 12px; font-weight: 500; }
.ts-inline-library .ts-lib { gap: 8px; grid-auto-columns: minmax(128px, calc((100% - 24px) / 4)); padding: 3px 2px 24px; }
.ts-inline-library .ts-card { padding: 8px; gap: 7px; border-radius: 12px; border-color: var(--fds-border, #e5e7eb); background: var(--fds-bg-panel, #fff); }
.ts-inline-library .ts-card-art { height: 42px; border-radius: 7px; background: var(--fds-gray-50, #f8fafc); }
.ts-inline-library .ts-card-art svg { width: 76px; height: 36px; }
.ts-inline-library .ts-card b { font-weight: 500; color: var(--fds-text-primary, #111827); }
.ts-inline-library .ts-card small { margin-top: 2px; color: var(--fds-text-secondary, #6b7280); }
.ts-inline-library .ts-card:hover { border-color: var(--fds-gray-400, #9ca3af); background: var(--fds-gray-50, #f8fafc); }
.ts-inline-library .ts-card.is-on { border-color: var(--fds-blue-600, #2563eb); background: var(--fds-blue-50, #eff6ff); box-shadow: inset 0 0 0 1px var(--fds-blue-600, #2563eb); }
.ts-inline-library .ts-card.is-on .ts-card-art { background: var(--fds-bg-panel, #fff); }

/* Compact suitcase pills and horizontal insert cards. */
.ts-workspace-suitcase .ts-head-actions .ts-btn,
.ts-workspace-suitcase .ts-inline-actions .ts-btn,
.ts-workspace-suitcase .ts-props .ts-btn { min-height: 30px; height: 30px; padding: 3px 12px; line-height: 1.4; }
.ts-workspace-suitcase .ts-title-button.fds-btn { min-height: 28px; height: 28px; padding-block: 2px; }
.ts-workspace-suitcase .ts-props .ts-list-item { min-height: 30px; padding: 4px 12px; }
.ts-workspace-suitcase .ts-props .fds-select { min-height: 32px; height: 32px; padding-block: 3px; }
.ts-inline-library .ts-card { grid-template-columns: 38px minmax(0, 1fr); align-items: center; align-content: center; min-height: 66px; padding: 7px; gap: 7px; border-radius: 9px; border-color: transparent; background: var(--fds-gray-50, #f8fafc); }
.ts-inline-library .ts-card-art { height: 40px; background: transparent; }
.ts-inline-library .ts-card-art svg { width: 38px; height: 36px; }
.ts-inline-library .ts-card b { font-size: 11px; font-weight: 500; }
.ts-inline-library .ts-card small { font-size: 10px; line-height: 1.5; }
.ts-inline-library .ts-card.is-on { box-shadow: none; }
.ts-inline-library .ts-card.is-on .ts-card-art { background: transparent; }

/* Safe editor uses the same compact capsule controls as the suitcase. */
.ts-workspace-safe .ts-btn {
  border-radius: var(--fds-radius-pill, 999px);
  min-height: 30px; height: auto; padding: 3px 12px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
}
.ts-workspace-safe .ts-title-button.fds-btn { min-height: 28px; height: 28px; padding-block: 2px; }
.ts-workspace-safe .ts-props .ts-list-item { border-radius: var(--fds-radius-pill, 999px); min-height: 30px; padding: 4px 12px; }
.ts-workspace-safe .ts-props .fds-select { border-radius: var(--fds-radius-pill, 999px); min-height: 32px; height: 32px; padding-block: 3px; }

/* FDS extension: touch-tablet landscape inspector drawer. */
.ts-props-toggle.fds-btn { display: none; }
.ts-props-dialog { box-sizing: border-box; inset: 0 0 0 auto; margin: 0; width: min(340px, 90vw); max-width: none; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-inline-start: 1px solid var(--fds-border); background: var(--fds-bg-panel, #fff); color: var(--fds-text-primary); box-shadow: var(--fds-shadow-3); }
.ts-props-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ts-props-dialog::backdrop { background: rgb(15 23 42 / .28); }
.ts-props-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--fds-border); font-size: 14px; }
.ts-props-dialog-head .ts-btn { min-height: 44px; border-radius: 999px; }
.ts-props-dialog > .ts-props { overflow: auto; border: 0; border-radius: 0; }
@media (min-width: 768px) and (max-width: 1400px) and (orientation: landscape) and (any-pointer: coarse) {
  .ts-workspace-suitcase .ts-props-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .ts-workspace-suitcase .ts-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; overflow: hidden; }
  .ts-workspace-suitcase .ts-body > .ts-props { display: none; }
  .ts-workspace-suitcase .ts-view-3d, .ts-workspace-suitcase .ts-view-plan { height: auto; min-height: 0; }
}

/* Safari otherwise uses its native blue button text; keep primary/selected colors. */
.ts-workspace .fds-btn-secondary,
.ts-workspace .ts-area,
.ts-workspace .ts-card,
.ts-workspace .ts-area-toggle:not([aria-expanded="true"]) { color: var(--fds-text-primary, #1f2933); }
/* Both host editors follow Safari's visible viewport, including expanded toolbars. */
.ts-workspace { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ts-sub { max-height: 94dvh; }

.ts-inline-grid-viewport { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.ts-inline-grid-viewport > .ts-grid { position: absolute; inset: 0; display: block; }
/* Optional immutable product pictures; the schematic remains a fallback on read failure. */
.ts-card-art:has(> .ts-insert-picture) { position: relative; }
.ts-insert-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: var(--fds-bg-panel, #fff); pointer-events: none; }

/* FDS extension: an unselected fixed-container canvas. */
.ts-empty-selection { display: grid; place-items: center; min-height: 0; padding: 24px; color: var(--fds-text-secondary); text-align: center; }
.ts-empty-selection p { margin: 0; font-size: var(--fds-font-size-lg, 18px); }
.ts-empty-selection[hidden] { display: none; }

/* FDS extension: keep save feedback stable as its label changes. */
.ts-head-actions [data-tray-save], .ts-head-actions [data-guest-save] { min-width: 6em; }

/* FDS extension: fixed lid artwork controls inside the existing inspector. */
.ts-jewelry-logo { display: grid; gap: 10px; margin-block: 14px; padding-block: 14px; border-block: 1px solid var(--fds-border); }
.ts-jewelry-logo .ts-meta { margin: 0; }
.ts-jewelry-logo [hidden] { display: none; }
.ts-workspace .ts-jewelry-logo .ts-logo-drop { width: 100%; min-height: 60px; border: 1px dashed var(--fds-border-strong, #9ca3af); border-radius: var(--fds-radius-md, 8px); }
.ts-logo-preview { display: block; width: 100%; height: 72px; object-fit: contain; box-sizing: border-box; padding: 10px; background: var(--fds-gray-100, #f3f4f6); border-radius: var(--fds-radius-md, 8px); }
.ts-logo-finishes { display: flex; gap: 8px; }
.ts-logo-finishes button { flex: 1; min-height: 36px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-pill, 999px); background: var(--fds-bg-panel, #fff); color: var(--fds-text-primary); cursor: pointer; }
.ts-logo-finishes button[aria-pressed="true"] { border-color: var(--fds-text-primary); box-shadow: inset 0 0 0 1px var(--fds-text-primary); font-weight: 600; }
.ts-logo-finishes button::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 50%; background: linear-gradient(135deg, #f6e3b3, #a77c2c); }
.ts-logo-finishes button[data-logo-finish="silver"]::before { background: linear-gradient(135deg, #f5f7fa, #89939e); }
.ts-logo-size { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 12px; }
.ts-logo-size input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--fds-text-primary); }
.ts-jewelry-logo progress { width: 100%; }
.ts-jewelry-logo button:disabled { opacity: .55; cursor: default; }
.ts-jewelry-logo button:focus-visible, .ts-logo-size input:focus-visible { outline: 2px solid var(--fds-text-primary); outline-offset: 3px; }
@media (max-width: 600px) {
  .ts-workspace .ts-jewelry-logo .ts-btn, .ts-logo-finishes button { min-height: 44px; height: auto; }
  .ts-logo-size input { min-height: 32px; }
}

/* Standalone mobile actions keep concise visible labels; accessible status stays complete. */
@media (max-width: 600px) {
  .ts-head-actions .fds-btn[data-mobile-label] { font-size: 0; min-width: 48px; min-height: 44px; padding-inline: 12px; }
  .ts-head-actions .fds-btn[data-mobile-label]::after { content: attr(data-mobile-label); font-size: 13px; }
}

/* FDS extension: appearance controls inside the unchanged production inspector. */
.ap-editor [hidden]{display:none!important}
.ap-editor{min-width:0;margin-block:5px;font-size:12px}
.ap-main{display:grid;gap:0}
.ap-group{padding:16px 0;border-bottom:1px solid var(--fds-border)}
.ap-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.ap-heading strong{font-size:12px;font-weight:550}.ap-current{font-size:10px;color:var(--fds-text-secondary)}
.ap-swatches{display:grid;gap:4px}.ap-five{grid-template-columns:repeat(5,minmax(0,1fr))}.ap-three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:220px}
.ap-swatch{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;border:0;background:none;padding:3px 0;color:var(--fds-text-primary);font:inherit;cursor:pointer}
.ap-swatch i{display:block;width:27px;height:27px;border-radius:50%;border:1px solid #0002;background:var(--ap-color);position:relative}
.ap-three i{background:linear-gradient(135deg,#fff9,var(--ap-color) 48%,#0002),var(--ap-color)}
.ap-swatch[aria-pressed=true] i:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--fds-text-primary)}
.ap-swatch span{font-size:10px;white-space:normal;text-align:center;line-height:1.2;word-break:break-word;hyphens:auto}.ap-swatch small{font-size:9px;color:var(--fds-text-secondary);white-space:nowrap}
.ap-rows{padding:12px 0;border-bottom:1px solid var(--fds-border)}
.ap-row{display:flex;align-items:center;width:100%;gap:10px;min-height:66px;border:0;background:none;padding:7px 2px;border-radius:8px;text-align:start;font:inherit;cursor:pointer}
.ap-row:hover{background:var(--fds-bg-muted)}.ap-row img{width:54px;height:42px;object-fit:cover;border:1px solid var(--fds-border);border-radius:6px;background:#eae7e0}
.ap-row-name{flex:1}.ap-row-name strong{display:block;font-size:12px;font-weight:500}.ap-row-name small{display:block;margin-top:3px;font-size:10px;color:var(--fds-text-secondary)}
.ap-row-price{max-width:49px;text-align:end;font-size:9px;color:var(--fds-text-secondary)}.ap-row>span:last-child{color:var(--fds-text-secondary);font-size:18px}
.ap-note{margin:10px 0 0!important;font-size:10px;line-height:1.7;color:var(--fds-text-secondary)}
.ts-props.ap-picker-mode{display:flex;flex-direction:column;padding:0;overflow:hidden;gap:0;align-content:stretch}
.ts-props.ap-picker-mode>:not(.ap-editor){display:none!important}.ts-props.ap-picker-mode>.ap-editor{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.ap-picker{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.ap-picker-head{display:flex;align-items:center;gap:12px;padding:17px 14px;border-bottom:1px solid var(--fds-border)}.ap-picker-head strong{font-size:14px;font-weight:550}
.ap-back{width:32px;height:32px;border:1px solid var(--fds-border);border-radius:50%;background:white;font:inherit;font-size:17px;cursor:pointer}
.ap-hint{padding:12px 14px;border-bottom:1px solid var(--fds-border);font-size:11px;line-height:1.7;color:var(--fds-text-secondary)}
.ap-options-scroll{overflow:auto;min-height:0;padding:16px 12px;scrollbar-width:thin}.ap-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-content:start}
.ap-option{position:relative;min-width:0;overflow:hidden;border:1px solid var(--fds-border);border-radius:8px;padding:0;text-align:start;background:white;font:inherit;cursor:pointer}
.ap-option>img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;background:#eae7e0}.ap-option-label{display:grid;gap:4px;padding:9px}
.ap-option-label strong{font-size:11px;font-weight:550}.ap-option-label small{font-size:9px;color:var(--fds-text-secondary)}
.ap-option[aria-pressed=true]{border-color:#304b40;box-shadow:0 0 0 1px #304b40}.ap-option[aria-pressed=true]:after{content:"✓";position:absolute;right:5px;top:5px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#304b40;color:white;font-size:11px}
.ap-picker-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-top:1px solid var(--fds-border)}.ap-picker-foot small{display:block;font-size:9px;color:var(--fds-text-secondary)}.ap-picker-foot strong{font-size:12px;font-weight:500}
.ap-editor button:focus-visible{outline:2px solid var(--fds-text-primary);outline-offset:3px}
@media(max-width:900px){.ts-props.ap-picker-mode{min-height:700px}.ap-swatch{min-height:65px}.ap-swatch i{width:32px;height:32px}.ap-swatch span{font-size:11px}.ap-row{min-height:74px}.ap-back{width:44px;height:44px}.ap-picker-foot .ts-btn{height:auto;min-height:44px}}

/* Tablet: reserve an inspector column instead of opening a modal over the editor. */
.ts-props-inline-head{display:none}
@media (min-width:768px) and (max-width:1400px) and (orientation:landscape) and (any-pointer:coarse){
 .ts-workspace.ts-props-expanded .ts-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) clamp(260px,28vw,300px)}
 .ts-workspace.ts-props-expanded .ts-body>.ts-props{display:grid;min-width:0;min-height:0;overflow:auto;scrollbar-width:thin}
 .ts-workspace.ts-props-expanded .ts-body>.ts-props.ap-picker-mode{display:flex;min-height:0;overflow:hidden}
 .ts-props-inline-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-12px;z-index:3;margin:-12px -12px 0;padding:8px 12px;background:var(--fds-bg-panel);border-bottom:1px solid var(--fds-border)}
 .ts-props-inline-head strong{font-size:12px;font-weight:550}
 .ts-workspace .ts-props-inline-head .ts-btn{height:auto;min-height:44px}
 .ts-props.ap-picker-mode>.ts-props-inline-head{display:flex!important;flex:none;position:static;margin:0}
 .ts-props.ap-picker-mode>.ap-editor{flex:1;min-height:0}
 .ts-workspace .ts-props-toggle[aria-expanded=true]{background:var(--fds-gray-900);color:var(--fds-white,#fff);border-color:var(--fds-gray-900)}
 .ts-workspace.ts-props-expanded .ts-inline-editor{grid-template-rows:auto minmax(200px,1fr) auto auto auto;overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:768px) and (max-width:1100px) and (orientation:landscape) and (any-pointer:coarse){
 .ts-workspace.ts-props-expanded .ts-shell-switch{top:auto;bottom:10px}
 .ts-workspace.ts-props-expanded .ts-shell-switch button{font-size:11px;padding:4px 6px;min-height:44px}
 .ts-workspace.ts-props-expanded .ts-area-toggle{min-height:44px;font-size:12px}
}

/* FDS extension: phone layout. The 3D keeps the viewport, the tray editor is a
   bottom sheet and the inspector a right sheet; both are hidden above 640px. */
.ts-sheet-head, .ts-sheet-scrim, .ts-mobile-bar { display: none; }
@media (max-width: 640px) {
  .ts-workspace { --ts-sheet-height: 62dvh; overflow: hidden; }
  /* Relative, not static: the 3D pane must start below the header, not cover it. */
  .ts-body { position: relative; display: block; height: auto; min-height: 0; padding: 0; overflow: hidden; }
  .ts-body > .ts-view-3d { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; }
  .ts-body[data-sheet="edit"] > .ts-view-3d { inset: 0 0 var(--ts-sheet-height) 0; }
  .ts-center {
    position: absolute; inset: auto 0 0 0; z-index: 30; height: var(--ts-sheet-height);
    display: flex; flex-direction: column; padding: 0 10px 0;
    background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgb(15 23 42 / .22);
    transform: translateY(105%); transition: transform .22s ease; overflow: hidden;
  }
  .ts-body[data-sheet="edit"] .ts-center { transform: none; }
  .ts-center > .ts-sheet-head { flex: none; }
  .ts-center > .ts-view-elev { display: none; }
  .ts-center > .ts-view-plan { flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; }
  .ts-props {
    position: absolute; inset: 0 0 0 auto; z-index: 40; display: grid; width: min(86vw, 380px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transform: translateX(102%); transition: transform .22s ease; border: 0; border-inline-start: 1px solid var(--fds-border); border-radius: 0;
  }
  .ts-body[data-sheet="props"] .ts-props { transform: none; }
  .ts-sheet-scrim { position: absolute; inset: 0; z-index: 20; display: block; background: rgb(15 23 42 / .32); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .ts-body[data-sheet="props"] .ts-sheet-scrim { opacity: 1; pointer-events: auto; }
  /* The model stays clear while editing: no scrim over the 3D. */
  .ts-body[data-sheet="edit"] .ts-sheet-scrim { opacity: 0; pointer-events: none; }
  .ts-workspace.ts-head-hidden .ts-head { display: none; }
  .ts-workspace.ts-head-hidden { grid-template-rows: minmax(0, 1fr); }
  /* The close control floats on the library row; no grip, no drawer names. */
  .ts-sheet-head { position: absolute; top: 6px; inset-inline-end: 8px; z-index: 6; display: block; padding: 0; }
  .ts-sheet-grip { display: none; }
  .ts-sheet-close { min-height: 28px; padding: 0 12px; font-size: 12px; border-radius: 999px; }
  .ts-inline-library .ts-library-head { padding: 6px 84px 0 0; }
  .ts-inline-editor { padding: 8px 0 0; }
  .ts-center > .ts-view-plan > .ts-view-foot { display: none; }
  .ts-inline-editor .ts-notice { min-height: 0; }
  .ts-inline-editor .ts-notice:empty { display: none; }
  .ts-inline-summary { display: block; margin: 0; padding: 2px 0 calc(2px + env(safe-area-inset-bottom, 0px)); }
  .ts-body[data-sheet="props"] .ts-props-inline-head { display: flex; align-items: center; gap: 8px; position: sticky; top: -12px; z-index: 3; margin: -12px -12px 0; padding: 8px 12px; background: var(--fds-bg-panel); border-bottom: 1px solid var(--fds-border); }
  .ts-body[data-sheet="props"] .ts-props-inline-head .ts-btn { min-height: 40px; }
  .ts-body[data-sheet] .ts-mobile-bar { display: none; }
  /* One compact row of insert cards leaves the grid room inside the short sheet. */
  .ts-inline-library .ts-lib { grid-template-rows: max-content; grid-auto-columns: minmax(112px, 38%); }
  .ts-inline-library .ts-card { grid-template-columns: 40px minmax(0, 1fr); height: auto; min-height: 64px; padding: 4px 8px; gap: 6px; overflow: hidden; touch-action: pan-x; }
  .ts-inline-library .ts-card b, .ts-inline-library .ts-card small { white-space: normal; }
  .ts-inline-library .ts-lib { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .ts-inline-library .ts-card b { font-size: 12px; line-height: 1.2; }
  .ts-inline-library .ts-card small { font-size: 10px; line-height: 1.25; }
  .ts-inline-library .ts-card-art { height: 32px; }
  .ts-inline-library .ts-card-art svg { width: 40px; height: 32px; }
  .ts-inline-summary [data-jewelry-description] { display: none; }
  .ts-inline-editor .ts-legend { display: none; }
  .ts-inline-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ts-mobile-bar { position: absolute; inset-inline: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 25; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
  .ts-mobile-bar > * { pointer-events: auto; min-height: 44px; padding-inline: 24px; border-radius: 999px; box-shadow: 0 6px 18px rgb(15 23 42 / .18); }
  .ts-mobile-bar[hidden] { display: none; }
  .ts-workspace .ts-fullscreen { display: none; }
  .ts-area-toggle { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ts-workspace:not(.ts-workspace-safe) .ts-area-toggle { display: none; }
  /* The safe keeps its area chip, so the shell switch takes a second row. */
  .ts-workspace-safe .ts-shell-switch { top: 54px; }
  .ts-shell-switch button { padding-inline: 10px; }
}
/* Short phones give the sheet more room; otherwise the grid collapses. */
@media (max-width: 640px) and (max-height: 660px) {
  .ts-workspace { --ts-sheet-height: 76dvh; }
  .ts-inline-editor { gap: 6px; }
  .ts-inline-library { padding-bottom: 4px; }
}
@media (max-width: 380px) {
  .ts-shell-switch { top: 58px; }
}

/* Tool products reuse the workspace chrome; TTL-01 needs no insert editor. */
.ts-workspace-tool-kit .ts-body{grid-template-columns:minmax(0,1fr) 300px}
.ts-workspace-tool-kit .ts-center{display:none}
.ts-tool-product h2{margin:0;font-size:18px;line-height:1.45;font-weight:600}
.ts-tool-product small{display:block;margin-top:4px;font-size:12px;color:var(--fds-text-muted)}
.ts-tool-choices{display:flex;gap:6px;flex-wrap:wrap}
.ts-tool-choices button{padding:7px 14px;border:1px solid var(--fds-border);border-radius:999px;background:var(--fds-bg-panel);color:var(--fds-text)}
.ts-tool-choices button[aria-pressed=true]{background:var(--fds-gray-900);color:var(--fds-white,#fff)}
.ts-tool-logo-position{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:46px;padding:8px 0;border-bottom:1px solid var(--fds-border);font-size:13px;line-height:1.5;color:var(--fds-text-primary);cursor:pointer}
.ts-tool-logo-position:last-child{border-bottom:0}
.ts-tool-logo-position input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:38px;height:22px;margin:0;border:1px solid var(--fds-gray-300);border-radius:999px;background:var(--fds-gray-200);cursor:pointer;transition:background .16s,border-color .16s}
.ts-tool-logo-position input[role=switch]::before{content:"";position:absolute;inset-block-start:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--fds-white,#fff);box-shadow:0 1px 3px rgb(0 0 0 / .16);transition:transform .16s}
.ts-tool-logo-position input[role=switch]:checked{background:var(--fds-gray-900);border-color:var(--fds-gray-900)}
.ts-tool-logo-position input[role=switch]:checked::before{transform:translateX(16px)}
.ts-tool-logo-position input[role=switch]:dir(rtl):checked::before{transform:translateX(-16px)}
.ts-tool-logo-position input[role=switch]:focus-visible{outline:2px solid var(--fds-text-primary);outline-offset:3px}
.ts-tool-logo-position:has(input:disabled){opacity:.5;cursor:default}
.ts-tool-logo-position input[role=switch]:disabled{cursor:default}
@media(prefers-reduced-motion:reduce){.ts-tool-logo-position input[role=switch],.ts-tool-logo-position input[role=switch]::before{transition:none}}
.ts-shell-switch button[hidden]{display:none}
@media(max-width:640px){
 .ts-workspace-tool .ts-body{display:block}
 .ts-workspace-tool .ts-head{display:flex}
 .ts-workspace-tool .ts-shell-switch{top:auto;bottom:76px}
 .ts-workspace-tool .ts-view-3d{height:auto}
 .ts-workspace-tool-kit .ts-mobile-bar [data-tray-mobile-edit]{display:none}
}


/* FDS extension: instance controls in the SVG tray plan and its modal viewer. */
.ts-insert-action { cursor: pointer; color: var(--insert-action-ink, var(--fds-text-secondary)); opacity: .58; touch-action: manipulation; transition: opacity .15s ease; }
.ts-insert-action-hit { fill: transparent; stroke: none; pointer-events: all; }
.ts-insert-action-halo { fill: none; opacity: .65; stroke: currentColor; stroke-width: .65; pointer-events: none; transition: opacity .15s ease; }
.ts-insert-action:hover, .ts-insert-action:focus-visible { opacity: 1; }
.ts-insert-action:hover .ts-insert-action-halo { fill: currentColor; fill-opacity: .06; opacity: 1; }
.ts-insert-action:focus-visible { outline: none; }
.ts-insert-action:focus-visible .ts-insert-action-halo { fill: none; stroke: currentColor; stroke-width: 1; opacity: 1; }
.ts-insert-action[aria-disabled="true"] { opacity: .25; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ts-insert-action, .ts-insert-action-halo { transition: none; } }
.ts-insert-details { box-sizing: border-box; width: min(880px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-xl); background: var(--fds-bg-panel); color: var(--fds-text-primary); box-shadow: var(--fds-shadow-3); }
.ts-insert-details::backdrop { background: rgb(15 23 42 / .45); }
.ts-insert-details-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--fds-border); }
.ts-insert-details-head h2 { margin: 0; font-size: 18px; }
.ts-insert-details-head button { flex: none; min-height: 44px; }
.ts-insert-details-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); }
.ts-insert-viewer { min-width: 0; height: min(560px, 72dvh); overflow: hidden; background: var(--fds-bg-muted); }
.ts-insert-viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ts-insert-info { display: grid; align-content: start; gap: 16px; padding: 20px; }
.ts-insert-info dl, .ts-insert-info p { margin: 0; }
.ts-insert-info dt { color: var(--fds-text-secondary); font-size: 13px; }
.ts-insert-info dd { margin: 6px 0 20px; overflow-wrap: anywhere; font-size: 16px; }
.ts-insert-color-title { font-size: 13px; font-weight: 500; }
.ts-insert-palette .ap-swatches { gap: 12px 8px; }
.ts-insert-palette .ap-swatch { min-height: 48px; }
.ts-insert-lock { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ts-insert-lock[aria-pressed="true"] { border-color: var(--fds-text-primary); background: var(--fds-bg-muted); }
.ts-insert-info button { min-height: 44px; }
.ts-insert-heading { min-width: 0; }
.ts-insert-product { margin: 5px 0 0; color: var(--fds-text-secondary); font-size: 12px; letter-spacing: .04em; }
.ts-insert-dismiss { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
.ts-insert-color-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ts-insert-lock { padding: 6px 10px; font-size: 12px; }
.ts-insert-lock-mobile { display: none; }
@media (max-width: 600px) {
  .ts-insert-details { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-height: 96dvh; border-radius: var(--fds-radius-xl) var(--fds-radius-xl) 0 0; border-bottom: 0; overflow: hidden; }
  .ts-insert-details[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .ts-insert-details-head { gap: 12px; padding: 12px 12px 10px 16px; background: var(--fds-bg-panel); }
  .ts-insert-details-head h2 { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
  .ts-insert-product { margin-top: 3px; font-size: 11px; }
  .ts-insert-dismiss { background: transparent; border-color: transparent; border-radius: 50%; }
  .ts-insert-details-body { display: block; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
  .ts-insert-viewer { height: clamp(180px, 39dvh, 360px); }
  .ts-insert-info { gap: 12px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .ts-insert-info dl { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--fds-border); }
  .ts-insert-fact { min-width: 0; }
  .ts-insert-info dt { font-size: 11px; line-height: 1.4; }
  .ts-insert-info dd { margin: 5px 0 0; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
  .ts-insert-color-head { gap: 8px; }
  .ts-insert-lock { min-height: 44px; padding: 6px 10px; font-size: 11px; border-radius: var(--fds-radius-pill); }
  .ts-insert-lock svg { flex: none; }
  .ts-insert-lock-label, .ts-insert-lock-hint { display: none; }
  .ts-insert-lock-mobile { display: inline; }
  .ts-insert-palette { min-width: 0; margin: -4px -4px 0; padding: 5px 4px; overflow-x: auto; }
  .ts-insert-palette .ap-swatches { display: flex; gap: 10px; max-width: none; width: max-content; min-width: 100%; }
  .ts-insert-palette .ap-swatch { flex: 1 0 44px; min-width: 44px; max-width: 64px; min-height: 60px; gap: 8px; padding: 4px 0; }
  .ts-insert-palette .ap-swatch i { width: 28px; height: 28px; flex: none; }
  .ts-insert-palette .ap-swatch span { font-size: 11px; }
}

/* FDS extension: full-tray liner mode switch and compact controls (TrayScene liners V1). */
.ts-liner-chip { flex: 0 0 auto; }
.ts-lib-divider { flex: 0 0 auto; width: 1px; height: 18px; background: var(--fds-border, #e5e7eb); }
/* The category chips sit in one tinted capsule headed by its mode name. */
.ts-insert-group { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--fds-gray-100, #f3f4f6); transition: opacity .15s; }
.ts-insert-group-label { flex: 0 0 auto; padding-right: 8px; border-right: 1px solid var(--fds-border, #e5e7eb); font-size: 11px; font-weight: 600; line-height: 20px; color: var(--fds-text-primary, #111827); }
.ts-insert-group .ts-lib-tags { flex: 1 1 auto; }
.ts-insert-group.is-dim { opacity: .55; }
.ts-insert-group.is-dim:hover, .ts-insert-group.is-dim:focus-within { opacity: 1; }
.ts-inline-library .ts-lib.is-liner { grid-template-rows: max-content; }
.ts-liner-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; font-size: 12px; }
.ts-liner-panel[hidden] { display: none; }
.ts-liner-head { display: flex; align-items: center; gap: 10px; flex-basis: 100%; }
.ts-liner-head > strong { font-size: 12px; }
.ts-liner-panel .ts-meta { margin: 0; font-size: 12px; }
.ts-liner-step { display: inline-flex; align-items: center; gap: 6px; }
.ts-liner-step .ts-btn { min-width: 28px; height: 26px; padding: 0 8px; }
.ts-liner-step output { min-width: 22px; text-align: center; font-weight: 600; }
.ts-liner-step small { color: var(--fds-text-secondary, #6b7280); }
.ts-liner-dir { display: inline-flex; gap: 4px; }
.ts-liner-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-liner-colors .ap-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-liner-colors .ap-swatch span { display: none; }
.ts-liner-back { padding: 3px 14px; font-size: 12px; color: var(--fds-text-primary, #111827); }
.ts-liner-back:disabled { opacity: .5; cursor: not-allowed; }

/* FDS extension: per-product box options inside a single liner card. */
.ts-liner-box-select { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.ts-liner-box-select > span { white-space: nowrap; flex-shrink: 0; }
.ts-liner-box-select .fds-select { min-height: 40px; max-width: 100%; }
.ts-liner-box-finish { align-items: center; gap: 8px; }
.ts-liner-box-finish button { min-height: 0; min-width: 0; }
@media (max-width: 640px) {
  .ts-liner-box-select { flex-basis: 100%; flex-wrap: wrap; }
  .ts-liner-box-select .fds-select { flex: 1; min-height: 44px; }

}

/* FDS extension: TSB boards fit their available pane; the inspector stays independent. */
.ts-workspace-gem .ts-center{overflow:hidden}
.ts-gem-layout{overflow:hidden;min-height:0;min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:stretch;gap:10px}
.ts-gem-layout h3{grid-row:1;margin:0;font-size:13px}
.ts-gem-face-tabs{grid-row:2;display:none}
.ts-gem-layout>p{grid-row:4}
.ts-gem-faces{grid-row:3;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;min-height:0;min-width:0}
.ts-gem-face{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:0;min-width:0}
.ts-gem-face .fds-select{width:100%;min-width:0;font-size:12px;border-radius:var(--fds-radius-pill)}
.ts-gem-grid-slot{grid-column:1/-1;container-type:size;min-height:0;min-width:0;align-self:stretch;display:grid;place-items:center}
.ts-gem-grid{--ts-gem-cell:max(0px,min(calc((100cqw - 16px - (var(--ts-gem-cols) - 1)*6px)/var(--ts-gem-cols)),calc((100cqh - 16px - (var(--ts-gem-rows) - 1)*6px)/var(--ts-gem-rows))));display:grid;grid-template-columns:repeat(var(--ts-gem-cols),var(--ts-gem-cell));grid-template-rows:repeat(var(--ts-gem-rows),var(--ts-gem-cell));gap:6px;padding:8px;border-radius:var(--fds-radius-md)}
.ts-gem-grid button{min-width:0;min-height:0;padding:0;border:2px solid #c5c9cb;border-radius:4px;background:#f2f0eb;color:#666;cursor:pointer;font:inherit;font-size:11px}
.ts-gem-grid button.is-round{border-radius:50%}
.ts-gem-face>p{grid-column:1/-1;margin:0;font-size:11px}
.ts-gem-angle{width:100%;accent-color:var(--fds-text-primary)}
.ts-gem-logo-finish{display:grid;gap:8px}
@media(max-width:640px){
 .ts-workspace-gem .ts-center{overflow:hidden}
 .ts-gem-layout{flex:1;height:100%}
 .ts-gem-layout h3{padding-inline-end:44px}
 .ts-gem-face-tabs{display:flex;gap:8px}
 .ts-gem-face-tabs button{flex:1;min-height:44px;border:1px solid var(--fds-border);border-radius:var(--fds-radius-pill);background:var(--fds-bg-panel);font:inherit;font-size:12px;cursor:pointer}
 .ts-gem-face-tabs button[aria-pressed=true]{color:var(--fds-bg-panel);background:var(--fds-text-primary)}
 .ts-gem-faces{grid-template-rows:minmax(0,1fr)}
 .ts-gem-layout[data-active-face=a] [data-gem-face=b],.ts-gem-layout[data-active-face=b] [data-gem-face=a]{display:none}
 .ts-gem-face .fds-select{font-size:16px;min-height:44px}
}

@media(min-width:641px) and (max-width:1100px) and (pointer:fine){
 .ts-workspace-gem .ts-body{grid-template-columns:minmax(0,1fr) clamp(210px,29vw,300px) 260px;grid-template-rows:minmax(0,1fr);overflow:hidden}
 .ts-workspace-gem .ts-view-3d{height:auto}
 .ts-workspace-gem .ts-props{overflow:auto}
}

/* FDS extension: keep TSB face boards compact and give 3D the remaining width. */
@media(min-width:1101px){
 .ts-workspace-gem .ts-body{grid-template-columns:minmax(0,1fr) clamp(280px,26vw,360px) 300px}
}
@media(min-width:768px) and (max-width:1400px) and (orientation:landscape) and (any-pointer:coarse){
 .ts-workspace-gem .ts-body{grid-template-columns:minmax(0,1fr) clamp(240px,32vw,340px)}
 .ts-workspace-gem.ts-props-expanded .ts-body{grid-template-columns:minmax(0,1fr) clamp(240px,28vw,320px) clamp(260px,28vw,300px)}
}

/* FDS extension: constrain only SpaceScene's catalog-upgrade preview. */
.ss-tray-catalog-upgrade .ss-catalog-impact,
.ss-tray-catalog-upgrade .ss-field { min-width: 0; }
.ss-tray-catalog-upgrade .fds-select { min-width: 0; max-width: 100%; }
.ss-tray-catalog-upgrade .ss-dialog-actions { flex-wrap: wrap; }

/* FDS extension: the grid-tray modal only. Inline product editors keep their layout. */
.ts-sub:has(> .ts-grid-modal) { width: min(1360px, calc(100vw - 64px)); max-width: none; height: min(820px, calc(100dvh - 64px)); max-height: none; overflow: hidden; border: 1px solid var(--fds-border); border-radius: 18px; color: var(--fds-text-primary); background: var(--fds-bg-panel); box-shadow: 0 28px 90px rgb(15 23 42 / .24); }
.ts-grid-modal { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; gap: 0; font-size: 12px; line-height: 1.5; }
.ts-grid-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 23px 28px; border-bottom: 1px solid var(--fds-border); }
.ts-grid-modal h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }
.ts-grid-modal-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--fds-text-secondary); }
.ts-grid-spec { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid var(--fds-border); border-radius: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fds-text-primary); background: var(--fds-gray-50); }
.ts-grid-modal-body { min-height: 0; grid-template-columns: 290px minmax(0, 1fr) 216px; gap: 0; overflow: hidden; }
.ts-grid-modal .ts-sub-library { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; padding: 22px 18px; border-right: 1px solid var(--fds-border); background: var(--fds-bg-panel); }
.ts-grid-modal .ts-library-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 6px; padding: 0; }
.ts-grid-modal .ts-library-head > strong { flex: 0 0 100%; font-size: 14px; margin-bottom: 2px; }
.ts-grid-modal .ts-insert-group { min-width: 0; flex: 1 0 100%; }
.ts-grid-modal .ts-lib-tags { flex-wrap: wrap; overflow: visible; mask-image: none; gap: 6px; padding: 0; }
.ts-grid-modal .ts-lib-tag { min-height: 28px; padding: 3px 10px; font-size: 11px; line-height: 20px; border-radius: 6px; }
.ts-grid-modal .ts-lib-tag[aria-pressed=true] { color: var(--fds-bg-panel); background: var(--fds-gray-900); border-color: var(--fds-gray-900); }
.ts-grid-library-hint { margin: 14px 0 18px; font-size: 11px; line-height: 1.7; color: var(--fds-text-secondary); }
.ts-grid-modal .ts-lib { flex: 1 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: max-content; gap: 10px; max-height: none; overflow: visible; padding: 2px; align-content: start; }
.ts-grid-modal .ts-card { min-width: 0; grid-template-columns: minmax(0,1fr); align-content: start; gap: 10px; padding: 10px; border-radius: 10px; border-color: var(--fds-border); background: var(--fds-bg-panel); transition: border-color .15s,box-shadow .15s; }
.ts-grid-modal .ts-card:hover { border-color: var(--fds-gray-400); box-shadow: 0 3px 10px rgb(15 23 42 / .05); }
.ts-grid-modal .ts-card.is-on { border-color: var(--fds-blue-600); background: var(--fds-blue-50); box-shadow: 0 0 0 1px var(--fds-blue-600); }
.ts-grid-modal .ts-card-art { display: grid; place-items: center; min-height: 70px; padding: 6px; border-radius: 6px; background: var(--fds-gray-50); }
.ts-grid-modal .ts-card-art svg { width: 88px; max-width: 100%; height: 58px; }
.ts-grid-modal .ts-card-art img { max-width: 100%; max-height: 70px; object-fit: contain; }
.ts-grid-modal .ts-card b { font-size: 11px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; }
.ts-grid-modal .ts-card small { margin-top: 3px; font-size: 10px; color: var(--fds-text-secondary); }
.ts-grid-modal .ts-sub-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; align-content: stretch; justify-items: stretch; gap: 20px; padding: 22px 28px 18px; border-radius: 0; overflow: hidden; background: var(--fds-gray-50); background-image: radial-gradient(var(--fds-border) .7px,transparent .7px); background-size: 16px 16px; }
.ts-grid-canvas-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--fds-text-secondary); }
.ts-grid-canvas-head strong { font-size: 12px; font-weight: 500; }
.ts-grid-modal .ts-grid { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; align-self: stretch; filter: drop-shadow(0 12px 12px rgb(15 23 42 / .08)); }
.ts-grid-modal .ts-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 10px; color: var(--fds-text-secondary); }
.ts-grid-modal .ts-legend-group { gap: 12px; }
.ts-grid-modal .ts-swatch { width: 7px; height: 7px; border-radius: 50%; }
.ts-grid-inspector { min-width: 0; min-height: 0; padding: 24px 20px; border-left: 1px solid var(--fds-border); overflow: auto; background: var(--fds-bg-panel); }
.ts-grid-inspector h3 { margin: 0 0 16px; font-size: 12px; font-weight: 600; }
.ts-grid-capacity { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--fds-border); }
.ts-grid-capacity .ts-meta { margin: 0; line-height: 1.9; font-size: 12px; color: var(--fds-text-secondary); }
.ts-grid-edit-tools { display: grid; gap: 8px; }
.ts-grid-tool-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ts-grid-modal .ts-grid-edit-tools .fds-btn { min-width: 0; width: 100%; min-height: 32px; padding: 6px 8px; border-radius: 6px; font-size: 11px; background: var(--fds-bg-panel); }
.ts-grid-modal .ts-grid-edit-tools > .fds-btn:first-child { background: var(--fds-gray-50); border-color: var(--fds-gray-400); }
.ts-grid-modal .ts-card:focus-visible, .ts-grid-modal .fds-btn:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 3px; }
@media (max-width: 1000px) {
 .ts-sub:has(> .ts-grid-modal) { width: calc(100vw - 32px); height: calc(100dvh - 32px); }
 .ts-grid-modal-body { grid-template-columns: 236px minmax(0,1fr); }
 .ts-grid-inspector { display: flex; grid-column: 1 / -1; align-items: start; gap: 24px; max-height: 150px; padding: 14px 20px; border-left: 0; border-top: 1px solid var(--fds-border); }
 .ts-grid-capacity { flex: 1; border: 0; padding: 0; margin: 0; }
 .ts-grid-tool-section { flex: 2; }
 .ts-grid-edit-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .ts-grid-modal-body { grid-template-rows: minmax(0,1fr) auto; }
}
@media (max-width: 640px) {
 .ts-sub:has(> .ts-grid-modal) { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
 .ts-grid-modal-head { padding: 16px; gap: 8px; }
 .ts-grid-modal h2 { font-size: 18px; }
 .ts-grid-modal-meta { justify-content: end; font-size: 10px; max-width: 45%; }
 .ts-grid-modal-body { display: flex; flex-direction: column; overflow: auto; }
 .ts-grid-modal .ts-sub-stage { order: -1; flex: 0 0 340px; padding: 16px; gap: 12px; }
 .ts-grid-modal .ts-sub-library { flex: 0 0 auto; overflow: visible; padding: 18px 16px; border: 0; }
 .ts-grid-modal .ts-lib { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .ts-grid-modal .ts-lib-tag { min-height: 36px; }
 .ts-grid-modal .ts-card { padding: 8px; }
 .ts-grid-inspector { display: block; overflow: visible; flex: 0 0 auto; max-height: none; padding: 18px 16px; }
 .ts-grid-tool-section { margin-top: 18px; }
 .ts-grid-capacity { padding: 0; margin: 0; }
}
@media (pointer: coarse) { .ts-grid-modal .ts-grid-edit-tools .fds-btn, .ts-grid-modal .ts-lib-tag { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ts-grid-modal .ts-card { transition: none; } }
.ts-grid-modal .ts-insert-group { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; }
.ts-grid-modal .ts-insert-group-label { display: block; margin-bottom: 8px; color: var(--fds-text-secondary); font-size: 11px; font-weight: 500; }
.ts-grid-modal .ts-lib-divider { display: none; }
.ts-grid-modal .ts-grid > rect:first-child { fill: var(--fds-gray-300); stroke: var(--fds-gray-400); }
.ts-grid-modal .ts-grid > rect:nth-child(2) { fill: var(--fds-gray-200); }
.ts-grid-modal .ts-grid > line { stroke: var(--fds-bg-panel); stroke-opacity: .9; }

/* Grid modal review: compact header actions and mutually exclusive library modes. */
.ts-grid-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
.ts-grid-heading .ts-grid-modal-meta { gap: 10px; }
.ts-grid-head-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.ts-grid-head-actions .fds-btn { min-height: 36px; min-width: 84px; padding: 6px 14px; border-radius: 7px; font-size: 12px; }
.ts-grid-mode-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 3px; padding: 4px; border: 1px solid var(--fds-border); border-radius: 8px; background: var(--fds-gray-50); }
.ts-grid-modal .ts-grid-mode-switch .ts-lib-tag { margin: 0; min-height: 32px; border: 1px solid transparent; background: transparent; color: var(--fds-text-secondary); border-radius: 5px; font-size: 12px; }
.ts-grid-modal .ts-grid-mode-switch .ts-lib-tag[aria-pressed=true] { color: var(--fds-text-primary); background: var(--fds-bg-panel); border-color: var(--fds-border); box-shadow: 0 1px 3px rgb(15 23 42 / .06); }
.ts-grid-modal .ts-insert-group-label { display: none; }
.ts-grid-modal .ts-insert-group[hidden] { display: none; }
@media (max-width:640px) {
 .ts-grid-modal-head { align-items: flex-start; gap: 10px; }
 .ts-grid-heading { gap: 7px; }
 .ts-grid-heading .ts-grid-modal-meta { max-width: none; justify-content: start; font-size: 10px; }
 .ts-grid-head-actions { gap: 6px; }
 .ts-grid-head-actions .fds-btn { min-height: 44px; min-width: 62px; padding: 6px 8px; font-size: 11px; }
}
@media (pointer:coarse) { .ts-grid-modal .ts-grid-mode-switch .ts-lib-tag { min-height:44px; } }

.ts-grid-header-colors { min-width: 0; margin-inline-start: auto; }
.ts-grid-header-colors[hidden] { display: none; }
.ts-grid-header-colors .ts-liner-colors { flex-wrap: nowrap; gap: 12px; }
.ts-grid-header-colors .ts-meta { margin: 0; white-space: nowrap; color: var(--fds-text-secondary); font-size: 12px; }
.ts-grid-header-colors .ap-swatches { flex-wrap: nowrap; gap: 8px; }
.ts-grid-header-colors .ap-swatch { min-height: 32px; min-width: 28px; padding: 3px; }
.ts-grid-header-colors .ap-swatch i { width: 22px; height: 22px; }
@media (max-width:1000px) {
 .ts-grid-modal-head { flex-wrap: wrap; }
 .ts-grid-header-colors { flex: 1 0 100%; order: 3; margin-inline-start: 0; }
 .ts-grid-header-colors .ts-liner-colors { justify-content: flex-start; }
 .ts-grid-head-actions { margin-inline-start: auto; }
}
@media (pointer:coarse) { .ts-grid-header-colors .ap-swatch { min-height:44px; min-width:40px; } }

/* Liner parameters belong directly above the canvas; the library contains models only. */
.ts-grid-modal .ts-sub-stage:has(> .ts-liner-panel:not([hidden])) { grid-template-rows: auto auto minmax(0,1fr) auto; gap: 14px; }
.ts-grid-modal .ts-sub-stage > .ts-liner-panel { padding: 14px 16px; border: 1px solid var(--fds-border); border-radius: 9px; background: var(--fds-bg-panel); align-self: start; gap: 10px 18px; }
.ts-grid-modal .ts-sub-stage .ts-liner-head { justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--fds-border); }
.ts-grid-modal .ts-sub-stage .ts-liner-head > strong { font-size: 12px; }
.ts-grid-modal .ts-sub-stage .ts-liner-step { gap: 7px; }
.ts-grid-modal .ts-sub-stage .ts-liner-step .ts-btn { min-width: 28px; min-height: 28px; border-radius: 5px; }
.ts-grid-modal .ts-sub-stage .ts-liner-step small { font-size: 10px; }
.ts-grid-modal .ts-sub-stage .ts-liner-dir { align-items: center; flex-wrap: wrap; gap: 5px; }
.ts-grid-modal .ts-sub-stage .ts-liner-box-select { display: inline-flex; align-items: center; gap: 8px; }
.ts-grid-modal .ts-sub-stage .ts-liner-panel > .ts-meta { flex-basis: 100%; color: var(--fds-text-secondary); font-size: 11px; }
@media(max-width:640px) {
 .ts-grid-modal .ts-sub-stage:has(> .ts-liner-panel:not([hidden])) { flex: 0 0 auto; min-height: 500px; grid-template-rows: auto auto minmax(220px,1fr) auto; }
 .ts-grid-modal .ts-sub-stage > .ts-liner-panel { padding: 12px; gap: 10px 12px; }
 .ts-grid-modal .ts-sub-stage:has(> .ts-liner-panel:not([hidden])) > .ts-grid { min-height: 220px; height: 240px; }
}
@media(pointer:coarse) { .ts-grid-modal .ts-sub-stage .ts-liner-step .ts-btn { min-width:40px; min-height:44px; } }

.ts-grid-modal[data-grid-mode="liner"] .ts-grid-tool-section { display: none; }

/* Grid-tray modal: consistent FDS pill controls; colour swatches remain circular. */
.ts-grid-modal :is(button.fds-btn,button.ts-lib-tag),
.ts-grid-modal .ts-liner-step .ts-btn,
.ts-grid-modal .ts-grid-mode-switch .ts-lib-tag,
.ts-grid-modal .ts-grid-head-actions .fds-btn,
.ts-grid-modal .ts-grid-edit-tools .fds-btn { border-radius: var(--fds-radius-pill); }
.ts-grid-modal .ts-grid-mode-switch { border-radius: var(--fds-radius-pill); }
.ts-grid-modal .ts-sub-stage .ts-liner-step .ts-btn { border-radius: var(--fds-radius-pill); }

/* FDS extension: tray material property slots. The picker uses the FPA stylesheet. */
.ts-tray-materials{display:grid;gap:var(--fds-space-3,12px)}
.ts-material-row{display:grid;grid-template-columns:1fr;gap:var(--fds-space-1,4px)}
.ts-material-row .ts-btn{justify-content:flex-start;max-width:100%;white-space:normal;text-align:left}
.ts-material-dot{display:inline-block;flex:none;width:22px;height:22px;border:1px solid var(--fds-border,#ddd);border-radius:50%;margin-right:8px}
.ts-material-follow{display:flex;align-items:center;gap:8px;font-size:13px}
.ts-insert-materials[hidden]{display:none}
[data-counter-tray]{cursor:pointer}
[data-counter-tray]:focus-visible{stroke:#2563eb;stroke-width:4;outline:none}

@media (pointer: coarse) { .ts-fullscreen { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .ts-material-follow { min-height: 44px; } }