/* FDS extension: the FPA component page (docs/prototypes/fpa-components-v1). The status, publish,
   top view and slot editor parts reuse layout-library.css and carrier-library.css. */
.ss-component-toolbar { flex-wrap: wrap; }
.ss-component-review { margin-left: auto; white-space: nowrap; font-weight: 550; }
.ss-component-review-bar { display: flex; align-items: center; flex-wrap: wrap; 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); font-size: .875rem; }
.ss-component-review-bar span { flex: 1 1 260px; }
.ss-component-count { margin: 0; }
#components-root > .fds-card + .ssa-callout[data-tone="info"] { margin-top: var(--fds-space-8); }
.ss-component-table tbody tr { cursor: pointer; }
.ss-component-table td { vertical-align: middle; }
/* FDS extension: use the shared FAUS table typography and cell spacing.
   Keep specialist information in a locally scrolling table on narrow screens. */
.ss-component-table-wrap { max-inline-size: 100%; overflow-x: auto; }
.ss-component-table-wrap:focus-visible { outline: 2px solid var(--fds-action-primary); outline-offset: 2px; }
.ss-component-table { min-inline-size: 1080px; }
.ss-component-table :is(a, strong) { font-size: inherit; font-family: inherit; }
.ss-component-table th:first-child { inline-size: 72px; }
.ss-component-table td:nth-child(2) { inline-size: 240px; }
.ss-component-table td:is(:nth-child(3), :nth-child(4), :nth-child(7), :nth-child(8)) { white-space: nowrap; }
.ss-component-table td:nth-child(4) { font-variant-numeric: tabular-nums; }
.ss-component-table td:nth-child(6) { min-inline-size: 160px; max-inline-size: 240px; line-height: 1.5; }
.ss-component-table .ss-component-sub { margin-block-start: var(--fds-space-1); font-size: .75rem; line-height: 1.5; }
.ss-component-table .ss-component-photo.is-small { inline-size: 44px; block-size: 44px; }
.ss-component-table .ss-component-photo.is-small .ss-carrier-top { block-size: 38px; }

.ss-component-table td:nth-child(2) { min-width: 180px; }
.ss-component-sub { display: block; }
.ss-component-role-cell { white-space: nowrap; }
.ss-component-role-cell > * { vertical-align: middle; }
.ss-component-role-cell .fds-select { width: auto; min-width: 96px; margin-right: var(--fds-space-1); }
.ss-component-photo { display: grid; place-items: center; overflow: hidden; border-radius: var(--fds-radius-md); background: var(--fds-gray-25); border: 1px solid var(--fds-border); }
.ss-component-photo.is-small { width: 56px; height: 56px; }
.ss-component-photo.is-small .ss-carrier-top { height: 48px; }
.ss-component-photo.is-large { width: 100%; min-height: 200px; padding: var(--fds-space-4); box-sizing: border-box; border: 0; }
.ss-component-photo img { width: 100%; height: 100%; object-fit: contain; }
/* The photo loads over the drawing in the same grid cell, so the box never changes size. */
.ss-component-photo > img { grid-area: 1 / 1; }
.ss-component-photo.is-large img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.ss-component-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--fds-space-4); align-items: start; }
.ss-component-hero { overflow: hidden; }
.ss-component-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fds-space-2); }
.ss-component-section-head h2 { margin: 0; }
.ss-component-source { display: flex; align-items: flex-start; gap: var(--fds-space-2); margin: 0; }
.ss-component-rotations { display: flex; flex-wrap: wrap; gap: var(--fds-space-4); }
.ss-component-carry { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--fds-space-3); align-items: center; }
.ss-component-carry .ss-carrier-top { height: 100px; }
@media (max-width: 1100px) { .ss-component-detail { grid-template-columns: minmax(0, 1fr); } }
/* FDS extension: the model works beside the material slots (owner decision 2026-10-12,
   docs/FPA_Component_3D_Panel_Visual_Plan_V1.md section 9). The model pane sticks while the slot
   list scrolls, inside this workspace only, so the surfaces being bound stay on screen. */
.ss-model-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--fds-space-4); align-items: start; margin-bottom: var(--fds-space-4); }
/* Without a registered model there is no preview to watch: the slots take the full width. */
.ss-model-workspace[data-has-model="false"] { grid-template-columns: minmax(0, 1fr); }
.ss-model-pane { position: sticky; top: calc(var(--ssa-header) + var(--fds-space-4)); z-index: 1; min-width: 0; }
/* A 16/10 stage is 400 px tall beside the slots and, with the status and comparison rows, taller
   than a laptop viewport; a sticky card that does not fit cannot stay in view. */
.ss-model-workspace .ss-model-stage { aspect-ratio: auto; height: clamp(220px, 38vh, 420px); }
.ss-model-card-actions { display: flex; flex-wrap: wrap; gap: var(--fds-space-2); }
/* FDS extension: long calibration controls scroll inside the viewport-bound sticky card. */
@media (min-width: 1101px) { .ss-model-pane > [data-section-model] { max-height: calc(100dvh - var(--ssa-header) - var(--fds-space-8)); overflow-y: auto; } }
@media (max-width: 1100px) {
  .ss-model-workspace { grid-template-columns: minmax(0, 1fr); }
  .ss-model-pane { position: static; }
}
@media (max-width: 767px) { .ss-model-workspace .ss-model-stage { height: 260px; } }
@media (max-width: 480px) { .ss-component-carry { grid-template-columns: minmax(0, 1fr); } .ss-component-review { margin-left: 0; } }
/* Fields the classic import owns, and fields without edit rights, read as read only. */
.ss-component-detail .fds-input:disabled, .ss-component-detail .fds-select:disabled { background: var(--fds-gray-50); color: var(--fds-text-secondary); cursor: not-allowed; }

/* FDS extension: component task filters, change comparison and responsive list controls. */
.ss-component-quick { display: flex; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-component-pagination { justify-content: flex-end; align-items: center; }
.ss-component-diff { padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); margin-block: var(--fds-space-2); overflow-wrap: anywhere; }
.ss-component-diff summary { cursor: pointer; font-weight: 600; }
.ss-component-diff dl > div { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 3fr); gap: var(--fds-space-3); padding-block: var(--fds-space-2); border-bottom: 1px solid var(--fds-border); }
.ss-component-diff dd { margin: 0; }
.ss-component-diff del { color: var(--fds-text-secondary); }
.ss-component-diff ins { text-decoration: none; font-weight: 600; }
.ss-component-detail section { scroll-margin-top: var(--fds-space-6); }
@media (max-width: 768px) {
  .ss-component-role-cell { white-space: normal; }
  .ss-component-toolbar .ssa-search { flex-basis: 100%; }
  .ss-component-review { margin-left: 0; }
}

/* FDS extension: registered model viewer inside component details. */
.ss-component-model-preview { min-width: 0; }
/* FDS extension: the stage gives the model a surface, a floor grid and tools
   (docs/FPA_Component_3D_Panel_Visual_Plan_V1.md). */
.ss-model-stage { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md);
  overflow: hidden; background: linear-gradient(180deg, #fbfbfd 0%, #f2f3f7 62%, #e9ebf0 100%); }
.ss-model-stage:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border: 0; border-radius: 0; background: linear-gradient(180deg, #fbfbfd 0%, #eef0f4 70%, #e6e9ef 100%); }
.ss-model-viewport { position: absolute; inset: 0; touch-action: none; }
.ss-model-canvas, .ss-component-model-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ss-model-toolbar { position: absolute; z-index: 2; inset-block-start: var(--fds-space-2); inset-inline-start: var(--fds-space-2);
  display: flex; gap: 2px; padding: 3px; border-radius: var(--fds-radius-pill); background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 4px rgba(17, 17, 17, .12); backdrop-filter: blur(6px); }
.ss-model-tool { width: var(--ssa-compact-control, 32px); height: var(--ssa-compact-control, 32px); display: grid; place-items: center; border: 0; border-radius: var(--fds-radius-sm);
  background: transparent; color: var(--fds-gray-700); cursor: pointer; }
.ss-model-tool:hover { background: var(--fds-gray-100); color: var(--fds-gray-900); }
.ss-model-tool:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 1px; }
.ss-model-tool[aria-pressed="true"] { background: var(--fds-blue-50); color: var(--fds-blue-600); }
.ss-model-gizmo { position: absolute; z-index: 2; inset-block-end: 6px; inset-inline-end: 8px; width: 56px; height: 56px; pointer-events: none; }
.ss-model-gizmo line { stroke-width: 2; stroke-linecap: round; }
.ss-model-gizmo .ax-x { stroke: #d64545; }
.ss-model-gizmo .ax-y { stroke: #2f8f4e; }
.ss-model-gizmo .ax-z { stroke: #2f6fd0; }
.ss-model-gizmo text { font-size: 9px; font-weight: 600; fill: var(--fds-gray-600); }
.ss-model-hint { position: absolute; z-index: 2; inset-block-end: var(--fds-space-2); inset-inline-start: var(--fds-space-3);
  margin: 0; padding: 3px 10px; border-radius: var(--fds-radius-pill); background: rgba(255, 255, 255, .82);
  color: var(--fds-text-secondary); font-size: 12px; }
.ss-model-skeleton { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; gap: var(--fds-space-2); padding: var(--fds-space-6); }
.ss-model-skeleton .fds-skeleton { height: 12px; }
.ss-model-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--fds-gray-300); }
.ss-model-empty svg { width: 44px; height: 44px; }
.ss-model-stage[data-has-model="false"] .ss-model-toolbar,
.ss-model-stage[data-has-model="false"] .ss-model-gizmo,
.ss-model-stage[data-has-model="false"] .ss-model-hint { display: none; }
@media (max-width: 1100px) { .ss-model-stage { aspect-ratio: 4 / 3; } }
@media (max-width: 767px) { .ss-model-stage { aspect-ratio: auto; height: 260px; } }
@media (prefers-reduced-motion: reduce) { .ss-model-tool, .ss-model-stage { transition: none; } }
/* FDS extension: model status bar and grouped check result (phase 2). */
.ss-model-status { display: grid; gap: var(--fds-space-2); }
.ss-model-status > .fds-badge, .ss-model-status > .fds-btn { justify-self: start; }
.ss-model-status-note { margin: 0; }
.ss-model-status-actions { display: flex; align-items: center; gap: var(--fds-space-2); flex-wrap: wrap; }
.ss-model-hash { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--fds-radius-sm);
  background: var(--fds-gray-50); color: var(--fds-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.ss-model-result { display: grid; gap: 6px; }
.ss-model-result:empty { display: none; }
.ss-result-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: var(--fds-space-2);
  padding: var(--fds-space-2) var(--fds-space-3); border: 1px solid var(--fds-border); border-inline-start-width: 3px; border-radius: var(--fds-radius-sm); }
.ss-result-row[data-severity="error"] { border-inline-start-color: var(--fds-red-700); background: var(--fds-red-50); }
.ss-result-row[data-severity="warning"] { border-inline-start-color: var(--fds-amber-700); background: var(--fds-amber-50); }
.ss-result-row[data-severity="ok"] { border-inline-start-color: var(--fds-green-700); background: var(--fds-green-50); }
.ss-result-row[data-severity="info"] { border-inline-start-color: var(--fds-blue-600); background: var(--fds-blue-50); }
.ss-result-icon { font-size: 13px; line-height: 1.5; }
.ss-result-text { margin: 0; overflow-wrap: anywhere; }
.ss-result-row .fds-btn { align-self: center; }
.ss-copy-fallback { position: fixed; inset-block-start: -1000px; inset-inline-start: -1000px; }
/* FDS extension: the field a diagnostic points at, flashed after "go to that size". */
.ssa-field-flash { animation: ssa-field-flash 1.4s ease-out; }
@keyframes ssa-field-flash { 0%, 100% { box-shadow: none; } 15% { box-shadow: 0 0 0 3px var(--fds-blue-50); } }
@media (prefers-reduced-motion: reduce) { .ssa-field-flash { animation: none; box-shadow: 0 0 0 3px var(--fds-blue-50); } }
@media (max-width: 520px) {
  .ss-result-row { grid-template-columns: 18px minmax(0, 1fr); }
  .ss-result-row .fds-btn { grid-column: 2; justify-self: start; }
}
/* FDS extension: measured size against the data card (phase 4). */
.ss-model-compare { display: grid; gap: 6px; }
.ss-model-compare:empty { display: none; }
.ss-model-axis { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--fds-space-2); font-size: 12px; }
.ss-model-axis-name { color: var(--fds-text-secondary); }
.ss-model-axis-track { position: relative; height: 18px; border-radius: var(--fds-radius-xs); background: var(--fds-gray-50); }
.ss-model-axis-band { position: absolute; inset-block: 0; border-radius: var(--fds-radius-xs); background: var(--fds-green-50); border-inline: 1px dashed var(--fds-green-700); }
.ss-model-axis-card { position: absolute; inset-block: 3px; width: 2px; background: var(--fds-gray-500); }
.ss-model-axis-measured { position: absolute; inset-block: 1px; width: 4px; border-radius: 2px; background: var(--fds-green-700); }
.ss-model-axis-value { color: var(--fds-text-secondary); font-variant-numeric: tabular-nums; }
.ss-model-axis[data-over="true"] .ss-model-axis-track { background: var(--fds-red-50); }
.ss-model-axis[data-over="true"] .ss-model-axis-measured { background: var(--fds-red-700); }
.ss-model-axis[data-over="true"] .ss-model-axis-value { color: var(--fds-red-700); font-weight: 600; }
.ss-model-compare .ssa-callout { display: grid; gap: var(--fds-space-2); justify-items: start; }
@media (max-width: 520px) { .ss-model-axis { grid-template-columns: 38px minmax(0, 1fr); } .ss-model-axis-value { grid-column: 2; } }

/* FDS extension: material slot rows that mirror the viewport (phase 3). */
.ss-slot-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fds-space-3); min-width: 0; }
.ss-slot { display: grid; min-width: 0; gap: var(--fds-space-3); padding: var(--fds-space-4);
  border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-bg-panel); }
.ss-slot:hover { border-color: var(--fds-border-strong); }
.ss-slot:focus-visible, .ss-slot:focus-within { border-color: var(--fds-blue-600); box-shadow: 0 0 0 2px var(--fds-blue-50); }
.ss-slot-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(90px,.65fr) minmax(0,1.4fr); align-items: start; gap: var(--fds-space-3); min-width: 0; }
.ss-slot-head .ss-slot-name { display: grid; gap: var(--fds-space-1); flex: 1; }
.ss-slot-name strong { font-size: .875rem; line-height: 1.5; }
.ss-slot-control { display: grid; align-content: start; gap: var(--fds-space-2); min-width: 0; font-size: .75rem; color: var(--fds-text-secondary); }
.ss-slot-control>.ss-material-choice { width: 100%; box-sizing: border-box; }
.ss-slot-calibration { padding-block-start: var(--fds-space-3); border-block-start: 1px solid var(--fds-border); }
.ss-slot-calibration>summary { cursor: pointer; font-size: .8125rem; font-weight: 600; }
.ss-slot-calibration[open]>div { margin-block-start: var(--fds-space-3); }
.ss-slot-uv-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-uv-state { display: inline-flex; align-items: center; padding: 2px var(--fds-space-2); border-radius: var(--fds-radius-sm); background: var(--fds-bg-muted); color: var(--fds-text-secondary); font-size: .75rem; font-weight: 500; }
.ss-uv-state[hidden] { display: none; }
@media (max-width: 480px) { .ss-slot-head { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); } .ss-slot-head>.ss-slot-name { grid-column: 1/-1; } }
.ss-slot-name { display: flex; flex-wrap: wrap; overflow-wrap: anywhere; align-items: baseline; gap: 6px; flex: 1 1 150px; min-width: 0; }
.ss-slot-parts { color: var(--fds-text-secondary); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.ss-slot select { flex: 0 1 140px; min-width: 0; max-width: 100%; }
.ss-slot-note { flex: 1 1 100%; margin: 0; }
.ss-slot-actions { display: flex; gap: var(--fds-space-2); flex-wrap: wrap; }

.ss-component-override { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--fds-space-2); }

/* FDS extension: align detail form labels, controls and help text independently. */
.ss-component-detail .ss-carrier-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ss-component-detail .ss-carrier-field { align-content: start; grid-auto-rows: max-content; }
.ss-component-detail .ssa-field-label { min-height: 1.5rem; line-height: 1.5rem; margin: 0; }
.ss-component-detail .fds-input, .ss-component-detail .fds-select { box-sizing: border-box; height: var(--ssa-compact-control, 40px); min-height: var(--ssa-compact-control, 40px); margin: 0; font: inherit; font-size: var(--ssa-compact-input-font, inherit); }
@media (max-width: 480px) { .ss-component-detail .ss-carrier-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* FDS extension: pair related detail fields and align category action with its control. */
.ss-component-category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fds-space-3); align-items: start; }
.ss-component-category-row > .fds-btn { margin-top: calc(1.5rem + var(--fds-space-1)); height: var(--ssa-compact-control, 40px); }
.ss-component-role-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(130px, 1fr); gap: var(--fds-space-3); align-items: start; }
.ss-component-role-row fieldset { min-width: 0; margin: 0; }
.ss-component-role-row .ss-component-rotations { gap: var(--fds-space-2) var(--fds-space-3); }
@media (max-width: 480px) { .ss-component-role-row { grid-template-columns: minmax(0, 1fr); } }

/* FDS extension: jewellery display settings remain separate from component stacking. */
.ss-jewellery-display { padding: var(--fds-space-6, 24px); display: grid; gap: 16px; min-width: 0; }
.ss-jewellery-display h2 { font-size: 18px; margin: 0; }
.ss-jewellery-display .ssa-field { min-width: 0; }
.ss-jewellery-display input, .ss-jewellery-display select { width: 100%; }

.ss-jewellery-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ss-jewellery-choices .ssa-check { min-height: var(--ssa-compact-control, 44px); }
.ss-jewellery-profile { min-width: 0; }

/* FDS extension (2026-10-14): component admin visual refresh — carrier mark, compact status row, list cells,
   sub-page heads, More menus, detail todos, section navigation, read-only fields and the size sketch. */
.ss-carrier-mark { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; line-height: 1.3; color: var(--fds-text-secondary, var(--fds-gray-600)); white-space: nowrap; }
.ss-carrier-mark svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ss-component-photo { position: relative; }
.ss-component-photo > .ss-carrier-mark.is-icon { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; padding: 2px; border-radius: 4px; background: color-mix(in srgb, var(--fds-white, #fff) 85%, transparent); }
.ss-component-photo.is-large > .ss-carrier-mark.is-icon { inset-block-start: var(--fds-space-3); inset-inline-end: var(--fds-space-3); }
.ss-component-photo.is-large > .ss-carrier-mark.is-icon svg { width: 20px; height: 20px; }
.ss-component-art { display: grid; place-items: center; width: 100%; height: 100%; }
.ss-component-art svg { width: 100%; height: 100%; max-height: 100%; }
.ss-component-photo.is-large .ss-component-art svg { max-height: 220px; }
.ss-library-status.is-compact { padding-block: var(--fds-space-3); }
.ss-library-status.is-compact .ss-library-status-title { font-size: .9375rem; }
.ss-library-status.is-compact .ssa-stat-label { font-weight: 400; color: var(--fds-text-secondary, var(--fds-gray-600)); }
.ss-more-menu > button { display: inline-flex; align-items: center; gap: var(--fds-space-2); }
.ss-more-menu-items { box-sizing: border-box; min-width: min(180px, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; overflow-wrap: anywhere; }
.ss-more-menu-items:popover-open { gap: var(--fds-space-1); }
.ss-library-technical { padding: var(--fds-space-2); font-size: .8125rem; }
.ss-quick-filter { display: inline-flex; align-items: center; gap: 6px; }
.ss-quick-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: .75rem; line-height: 18px; text-align: center; }
.ss-quick-filter:disabled { opacity: .5; }
.ss-component-role-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-component-table tbody tr.is-clickable:hover { background: var(--fds-gray-25); }
.ss-component-code { color: inherit; text-decoration: none; }
.ss-component-code:hover strong, .ss-component-code:focus-visible strong { text-decoration: underline; }
.ss-source-note > summary { display: flex; align-items: center; gap: var(--fds-space-2); cursor: pointer; list-style: none; }
.ss-source-note > summary::-webkit-details-marker { display: none; }
.ss-source-note > summary::after { content: "▾"; margin-inline-start: auto; color: var(--fds-text-secondary, var(--fds-gray-600)); }
.ss-source-note[open] > summary::after { content: "▴"; }
.ss-source-note > p { margin: var(--fds-space-2) 0 0; }
.ss-sub-head-main { display: flex; align-items: flex-start; gap: var(--fds-space-3); min-width: 0; }
.ss-sub-head-main > div { min-width: 0; }
.ss-back-link { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-block-start: 4px; white-space: nowrap; }
.ss-component-todos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fds-space-2); margin-block-start: var(--fds-space-2); }
.ss-todo-chip { min-height: var(--ssa-compact-control, 0px); font-family: inherit; font-size: var(--ssa-compact-font, inherit); padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--ssa-control-radius, 999px); }
.ss-todo-chip:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: 2px; }
.ss-section-nav { position: sticky; inset-block-start: calc(var(--ssa-header, 64px) + var(--fds-space-2)); z-index: 2; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-white, #fff); box-shadow: 0 2px 8px color-mix(in srgb, var(--fds-gray-900) 6%, transparent); }
.ss-section-nav-item { flex: 1; min-height: var(--ssa-compact-control, 36px); padding: 0 var(--fds-space-2); border: 0; border-radius: var(--ssa-control-radius, calc(var(--fds-radius-md) - 2px)); background: none; font: inherit; font-size: var(--ssa-compact-font, .875rem); color: var(--fds-gray-700); cursor: pointer; white-space: nowrap; }
.ss-section-nav-item:hover { background: var(--fds-gray-100); color: var(--fds-gray-900); }
[id^="component-section-"] { scroll-margin-top: calc(var(--ssa-header, 64px) + 64px); }
.ss-carrier-field.is-readonly .fds-input, .ss-carrier-field.is-readonly .fds-select { background: var(--fds-gray-50); color: var(--fds-gray-700); }
.ss-readonly-tag { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border: 1px solid var(--fds-border); border-radius: 999px; font-size: .6875rem; font-weight: 400; line-height: 16px; color: var(--fds-text-secondary, var(--fds-gray-600)); vertical-align: middle; }
.ss-model-slots-later { margin-block-start: var(--fds-space-2); padding-block-start: var(--fds-space-3); border-block-start: 1px solid var(--fds-border); }
.ss-model-slots-later > summary { cursor: pointer; font-weight: 600; }
.ss-size-sketch-wrap { display: grid; place-items: center; padding: var(--fds-space-2); border-radius: var(--fds-radius-md); background: var(--fds-gray-25); }
.ss-size-sketch { width: 100%; max-width: 260px; height: 160px; }
.ss-size-face { fill: var(--fds-gray-200); stroke: var(--fds-gray-600); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.ss-size-margin { fill: none; stroke: var(--fds-gray-400); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.ss-size-label { fill: var(--fds-gray-700); }
.ss-size-label.is-front { fill: var(--fds-blue-600); }
@media (max-width: 767px) { .ss-sub-head-main { flex-direction: column; gap: var(--fds-space-1); } .ss-section-nav { position: static; overflow-x: auto; } }
.ss-size-sketch-wrap { gap: var(--fds-space-1); }
.ss-size-legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .75rem; color: var(--fds-text-secondary, var(--fds-gray-600)); }
.ss-size-legend-dash { width: 18px; border-top: 1.5px dashed var(--fds-gray-400); }
/* Jewellery display (2026-10-14): categories on as few rows as fit, the chosen ones edited one tab at a time. */
.ss-jewellery-choices { display: flex; flex-wrap: wrap; gap: var(--fds-space-2); }
.ss-jewellery-choices .ss-jewellery-choice { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ssa-compact-control, 36px); padding: 0 var(--fds-space-3) 0 var(--fds-space-2); border: 1px solid var(--fds-border); border-radius: 999px; background: var(--fds-white, #fff); white-space: nowrap; cursor: pointer; }
.ss-jewellery-choices .ss-jewellery-choice:has(input:checked) { border-color: var(--fds-blue-600); background: color-mix(in srgb, var(--fds-blue-600) 8%, var(--fds-white, #fff)); }
.ss-jewellery-choices .ss-jewellery-choice:has(input:disabled) { cursor: default; }
.ss-jewellery-display .ss-jewellery-choice input { width: auto; }
.ss-jewellery-profiles { border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); overflow: hidden; }
.ss-jewellery-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--fds-border); background: var(--fds-gray-25); }
.ss-jewellery-tab { min-height: var(--ssa-compact-control, 40px); padding: 0 var(--fds-space-4); border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--ssa-compact-font, inherit); color: var(--fds-gray-700); white-space: nowrap; cursor: pointer; }
.ss-jewellery-tab[aria-selected="true"] { border-bottom-color: var(--fds-blue-600); background: var(--fds-white, #fff); color: var(--fds-gray-900); font-weight: 600; }
.ss-jewellery-tab:focus-visible { outline: 2px solid var(--fds-blue-600); outline-offset: -2px; }
.ss-jewellery-profiles .ss-jewellery-profile { padding: var(--fds-space-4); }
.ss-jewellery-profile[hidden] { display: none; }
.ss-jewellery-choices .ss-jewellery-choice input { margin: 0; }
/* Code and category on one row, on the same two columns as the names below; the adjust button sits
   inside the category column so its right edge meets the English name field. */
.ss-component-code-row .ss-component-category-row { min-width: 0; }

body[data-ssa-controls="compact-v1"] .ss-model-tool { border-radius: var(--ssa-control-radius); font-size: var(--ssa-control-font); }

body[data-ssa-controls="compact-v1"] .ss-jewellery-display h2 { font-size:1rem; line-height:1.4; }

/* FDS extension: component status and pending actions share the title row. */
.ss-component-title-line,.ss-component-title-state{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fds-space-2)}
.ss-component-title-line>h1{margin:0}
.ss-component-title-state .ss-component-todos{margin-block-start:0}
.ss-component-title-state .ss-component-todos>.ssa-field-help{font-size:.75rem}
.ss-model-source-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fds-space-3)}

/* FDS extension: slot naming advice belongs to its section heading. */
[data-section-slots]>.fds-card-body>.ss-component-section-head{align-items:baseline}
[data-section-slots]>.fds-card-body>.ss-component-section-head>h2{flex:none}
.ss-slot-naming-note{margin:0;text-align:end;font-size:.75rem;line-height:1.5;overflow-wrap:anywhere}

/* FDS extension: the model's selected material slot remains visible in the inspector. */
.ss-slot.is-model-selected{border-color:var(--fds-blue-600);background:var(--fds-blue-50);box-shadow:0 0 0 1px var(--fds-blue-600)}

/* FDS extension: reset stays within the calibration heading rather than adding a row. */
.ss-slot-calibration>summary{position:relative;padding-inline-end:calc(var(--ssa-control,30px) + var(--fds-space-2))}
.ss-slot-uv-title{min-block-size:var(--ssa-control,30px)}
.ss-uv-reset{position:absolute;inset-inline-end:0;inset-block-start:0;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--ssa-control,30px);block-size:var(--ssa-control,30px);padding:0;border:0;border-radius:var(--fds-radius-sm);background:transparent;color:var(--fds-text-secondary);cursor:pointer}
.ss-uv-reset:hover:enabled{background:var(--fds-bg-muted);color:var(--fds-text-primary)}
.ss-uv-reset:focus-visible{outline:2px solid var(--fds-action-primary);outline-offset:2px}
.ss-uv-reset:disabled{opacity:.4;cursor:default}

/* FDS extension: compact model registration summary and measurement comparison. */
.ss-model-status{padding:var(--fds-space-3);border:1px solid var(--fds-border);border-radius:var(--fds-radius-md);gap:var(--fds-space-3);font-size:.75rem}
.ss-model-status-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--fds-space-2)}
.ss-model-file-size{color:var(--fds-text-secondary);font-variant-numeric:tabular-nums}
.ss-model-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fds-space-2);margin:0}
.ss-model-dimensions>div{padding:var(--fds-space-2) var(--fds-space-3);border-radius:var(--fds-radius-sm);background:var(--fds-bg-muted);min-width:0}
.ss-model-dimensions dt{font-size:.75rem;color:var(--fds-text-secondary);margin-block-end:var(--fds-space-1)}
.ss-model-dimensions dd{margin:0;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ss-model-status-actions{gap:var(--fds-space-1)}
.ss-model-status-note,.ss-component-model-preview>.ssa-field-help{font-size:.75rem;line-height:1.5}
.ss-model-compare{padding-block-start:var(--fds-space-3);border-block-start:1px solid var(--fds-border);gap:var(--fds-space-2)}
.ss-model-compare>.ssa-field-label{margin:0 0 var(--fds-space-1);font-size:.8125rem;font-weight:600}
.ss-model-axis-track{height:12px;border-radius:var(--fds-radius-pill)}
.ss-model-axis-card{inset-block:2px}
.ss-model-axis-measured{inset-block:0;width:3px}
.ss-model-axis-value{font-size:.75rem;line-height:1.5;min-width:0;overflow-wrap:anywhere}
/* FDS extension: pending-change details stay compact and can scroll independently. */
.ss-library-status>.ssa-publication-changes{flex-basis:100%;min-width:0;border-block-start:1px solid var(--fds-border);padding-block-start:var(--fds-space-3)}
.ss-library-status .ssa-publication-changes>summary{font-size:.8125rem;font-weight:600;line-height:1.5;cursor:pointer}
.ss-library-status .ssa-publication-changes>.ssa-table-scroll{margin-block-start:var(--fds-space-3);max-block-size:360px;overflow:auto}
.ss-library-status .ssa-publication-changes table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.75rem;line-height:1.5}
.ss-library-status .ssa-publication-changes th,.ss-library-status .ssa-publication-changes td{padding:var(--fds-space-2) var(--fds-space-3);text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--fds-border)}
.ss-library-status .ssa-publication-changes th{font-size:.75rem;font-weight:500;color:var(--fds-text-secondary);background:var(--fds-bg-muted)}
.ss-library-status .ssa-publication-changes th:first-child{width:50%}
.ss-library-status .ssa-publication-changes th:nth-child(2){width:25%}
.ssa-publication-field{display:block;font-weight:600}.ssa-publication-location{display:block;color:var(--fds-text-secondary);font-size:.6875rem;margin-block-start:2px}
.ss-library-status .ssa-publication-value summary{font-size:.75rem;cursor:pointer}
.ss-library-status .ssa-publication-value pre{font-size:.6875rem;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:180px;overflow:auto}

/* Authoring publication feedback extends FDS; checks never obscure the workspace. */
.fpa-publication-status { margin-block: var(--fds-space-3); padding: var(--fds-space-3); border: 1px solid var(--fds-border); border-radius: var(--fds-radius-md); background: var(--fds-white, #fff); overflow-wrap: anywhere; }
.fpa-publication-status > p { margin-block: 0 var(--fds-space-2); }
.fpa-publication-status [hidden] { display: none !important; }