/* Workspace modes. Manual, AI assisted and Changes share one canvas; the mode decides which tools and which side panel are shown. */
.ss-canvas-workspace:not(.ss-mode-manual) [data-mode-tool=manual],
.ss-canvas-workspace:not(.ss-mode-changes) [data-mode-tool=changes],
.ss-canvas-workspace.ss-mode-manual [data-mode-tool=view] { display: none !important; }

/* AI assisted and Changes are read only, and say so where the editing tools
   would be, as the shared factory page does. Nothing on the canvas looks or
   behaves as if it could be picked up: a drag pans, wherever it starts. */
.ss-read-only { display: flex; align-items: center; gap: 10px; padding: 0 4px 0 2px; color: var(--ss-muted); font-size: 12px; white-space: nowrap; }
.ss-read-only-label { display: inline-flex; align-items: center; gap: 8px; height: var(--ss-tool-size, 36px); padding: 0 12px 0 10px; border: 1px solid var(--ss-accent); border-radius: 6px; background: color-mix(in srgb, var(--ss-accent) 10%, transparent); }
.ss-read-only-label .ss-icon { width: 18px; height: 18px; color: var(--ss-accent); }
.ss-read-only strong { color: var(--ss-accent); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ss-read-only-hint { font-size: 12px; }
.ss-read-only-hint::before { content: "· "; }
/* Outside Manual the canvas is for looking: a frame says so, strongest while the AI is editing. */
:is(.ss-mode-ai, .ss-mode-changes) > .ss-canvas { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ss-accent) 35%, transparent); }
.is-ai-working > .ss-canvas { box-shadow: inset 0 0 0 3px var(--ss-accent); animation: ss-ai-frame 1.6s ease-in-out infinite; }
@keyframes ss-ai-frame { 50% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ss-accent) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .is-ai-working > .ss-canvas { animation: none; } }
.ss-ai-banner { display: none; position: absolute; left: 50%; top: calc(var(--ss-canvas-top, 72px) + 10px); transform: translateX(-50%); z-index: 3; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border: 1px solid var(--ss-accent); border-radius: 20px; background: var(--ss-sidebar); font-size: 13px; white-space: nowrap; box-shadow: 0 4px 18px #0006; pointer-events: none; }
.is-ai-working .ss-ai-banner { display: flex; }
.ss-ai-banner i { width: 9px; height: 9px; border-radius: 50%; background: var(--ss-accent); animation: ss-chat-pulse 1.2s ease-in-out infinite; }
.ss-ai-banner strong { color: var(--ss-accent); font-weight: 700; }
.ss-ai-banner span { color: var(--ss-muted); }
.ss-workspace-mode[aria-disabled=true][data-mode=manual] { opacity: .45; cursor: not-allowed; }
@media (max-width: 700px) { .ss-ai-banner span { display: none; } .ss-read-only-label { padding: 0 8px; } }
.ss-read-only.is-nudged { animation: ss-read-only-nudge .9s ease-out; }
@keyframes ss-read-only-nudge { 0%, 40% { background: color-mix(in srgb, var(--ss-accent) 28%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ss-accent) 28%, transparent); border-radius: 6px; } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; border-radius: 6px; } }
@media (prefers-reduced-motion: reduce) { .ss-read-only.is-nudged { animation: none; } }
:is(.ss-mode-ai, .ss-mode-changes) :is(.ss-node-body, [data-port]) { cursor: inherit; }
:is(.ss-mode-ai, .ss-mode-changes) .ss-nodes :disabled { opacity: 1; }
:is(.ss-mode-ai, .ss-mode-changes) .ss-nodes button:not([data-notes]) { pointer-events: none; }
@media (max-width: 700px) { .ss-read-only-hint { display: none; } }
.ss-workspace-mode .ss-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--ss-accent); color: #1a1400; font-size: 11px; font-weight: 600; }
.ss-workspace-mode .ss-count[hidden] { display: none; }
.ss-workspace-mode .ss-count.is-large { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent) 30%, transparent); }
.ss-workspace-mode[aria-disabled=true] { opacity: .45; cursor: default; }
/* The AI is working on the draft: shown on its tab from any mode. */
.ss-workspace-mode.is-working::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-accent); animation: ss-mode-working 1.2s ease-in-out infinite; }
@keyframes ss-mode-working { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ss-workspace-mode.is-working::after { animation: none; } }
.ss-workspace-mode[aria-disabled=true]:hover { color: var(--ss-muted); background: transparent; }

/* The side panel of the AI assisted and Changes modes sits where the Manual inspector sits, at the same width. */
.ss-canvas-workspace.ss-panel-open { grid-template: "top top" auto "canvas inspector" minmax(0,1fr) "bottom bottom" auto / minmax(0,1fr) 360px; }
.ss-canvas-workspace.ss-panel-collapsed { grid-template: "top top" auto "canvas inspector" minmax(0,1fr) "bottom bottom" auto / minmax(0,1fr) 48px; }
.ss-mode-panel { grid-area: inspector; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--ss-border); background: var(--ss-sidebar); }
.ss-mode-panel[hidden], .ss-mode-panel > [hidden] { display: none; }
.ss-mode-panel > section { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ss-panel-actions { display: flex; align-items: center; gap: 4px; }
.ss-mode-panel .ss-inspector-heading .ss-button { min-height: 32px; padding: 6px 8px; font-size: 12px; }
.ss-panel-open .ss-minimap { right: 376px; }
.ss-panel-collapsed .ss-minimap { right: 64px; }
/* Small screens: the panel lies over the canvas, and a tab at its edge brings it back. */
.ss-panel-cover .ss-mode-panel { grid-area: canvas; z-index: 4; border-left: 0; }
.ss-panel-cover .ss-mode-panel-tab { grid-area: canvas; z-index: 4; place-self: end center; flex-direction: row; gap: 8px; margin-bottom: 12px; padding: 10px 16px; border: 1px solid var(--ss-accent); border-radius: 20px; color: var(--ss-accent); box-shadow: 0 4px 18px #0006; }
.ss-panel-cover .ss-mode-panel-tab strong { writing-mode: horizontal-tb; }
.ss-panel-cover .ss-mode-panel-tab .ss-icon { display: none; }
.ss-panel-covering .ss-minimap { display: none; }

/* Changes mode: the review list. */
.ss-changes-panel[hidden] { display: none; }
.ss-changes-filters { display: flex; gap: 6px; padding: 12px 16px 0; }
.ss-changes-filters button { height: 26px; padding: 0 10px; border: 1px solid var(--ss-border); border-radius: 13px; background: transparent; color: var(--ss-muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.ss-changes-filters button[aria-pressed="true"] { color: var(--ss-accent); border-color: var(--ss-accent); background: color-mix(in srgb, var(--ss-accent) 10%, transparent); }
.ss-changes-filters button [data-count] { font-variant-numeric: tabular-nums; }
.ss-changes-filters button [data-count]:not(:empty)::before { content: " · "; }
.ss-changes-overview { display: grid; gap: 6px; padding: 12px 16px 0; }
.ss-changes-overview[hidden] { display: none; }
.ss-changes-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 8px 16px; }
.ss-changes-group-title { display: flex; align-items: center; gap: 6px; margin: 10px 8px 4px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-muted); }
.ss-changes-group-title span { color: var(--ss-text); }
/* Rows are colour coded the same way as the canvas: green added, amber edited, red deleted. */
.ss-changes-list .ss-draft-change { width: 100%; box-sizing: border-box; text-align: left; margin-bottom: 6px; padding: 10px 12px; border: 1px solid transparent; border-left: 3px solid var(--ss-accent); border-radius: 0 6px 6px 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.ss-changes-list .ss-draft-change:hover, .ss-changes-list .ss-draft-change:focus-visible { background: var(--ss-surface); border-color: var(--ss-border); border-left-color: var(--ss-accent); }
.ss-changes-list .ss-draft-change[data-change-type=added], .ss-changes-list .ss-draft-change[data-change-type=added]:hover { border-left-color: var(--ss-flow-good); }
.ss-changes-list .ss-draft-change[data-change-type=removed], .ss-changes-list .ss-draft-change[data-change-type=removed]:hover { border-left-color: var(--ss-flow-bad); }
.ss-changes-list .ss-draft-change p { margin-top: 6px !important; }
.ss-changes-list .ss-change-badge { flex-shrink: 0; padding: 2px 7px; border: 1px solid currentColor; border-radius: 5px; font-size: 10px; font-weight: 600; text-transform: none; }
.ss-changes-list .ss-change-badge--added { color: var(--ss-flow-good); background: color-mix(in srgb, var(--ss-flow-good) 12%, transparent); }
.ss-changes-list .ss-change-badge--edited { color: var(--ss-accent); background: color-mix(in srgb, var(--ss-accent) 12%, transparent); }
.ss-changes-list .ss-change-badge--removed { color: var(--ss-flow-bad); background: color-mix(in srgb, var(--ss-flow-bad) 12%, transparent); }
.ss-changes-list .ss-draft-change[data-change-type=removed] .ss-draft-change-title strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ss-flow-bad) 70%, transparent); }
.ss-change-actor { font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--ss-border); color: var(--ss-muted); }
.ss-changes-empty { padding: 16px; color: var(--ss-muted); font-size: 13px; }
/* Belts are one line per item and change; open a group to see each belt. */
.ss-changes-list details.ss-draft-change { padding: 0; }
.ss-changes-list details.ss-draft-change > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; }
.ss-changes-list details.ss-draft-change > summary::-webkit-details-marker { display: none; }
.ss-changes-list details.ss-draft-change > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--ss-muted); border-bottom: 1.5px solid var(--ss-muted); transform: rotate(-45deg); flex-shrink: 0; transition: transform .15s; }
.ss-changes-list details.ss-draft-change[open] > summary::before { transform: rotate(45deg); }
.ss-draft-change-title > .ss-belt-count { color: var(--ss-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-transform: none; }
.ss-belt-lines { display: grid; gap: 2px; padding: 0 8px 8px 26px; }
.ss-belt-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; width: 100%; padding: 3px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--ss-muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer; }
.ss-belt-line > span:not(.ss-review-belt-arrow) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-belt-line > span:last-child { text-align: right; }
.ss-belt-line .ss-review-belt-arrow { font-size: 13px; }
.ss-belt-line:hover, .ss-belt-line:focus-visible { background: var(--ss-surface); color: var(--ss-text); }

/* What the draft makes compared with the main factory. */
.ss-changes-production { margin: 12px 16px 0; border: 1px solid var(--ss-border); border-radius: 6px; background: var(--ss-surface); }
.ss-changes-production[hidden] { display: none; }
.ss-changes-production > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 12px; }
.ss-changes-production > summary::-webkit-details-marker { display: none; }
.ss-changes-production > summary > span:last-child { color: var(--ss-text); }
.ss-changes-production > div { display: grid; gap: 2px; padding: 0 8px 10px; }
.ss-production-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: 12px; }
.ss-production-row--total { font-weight: 600; }
.ss-production-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ss-production-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-production-name small { color: var(--ss-muted); font-size: 10px; }
.ss-production-rates { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ss-production-row.is-up .ss-production-rates { color: var(--ss-flow-good); }
.ss-production-row.is-down .ss-production-rates { color: var(--ss-flow-bad); }
.ss-production-note { margin: 4px 6px 0; color: var(--ss-muted); font-size: 11px; }

/* The only place a draft is applied or discarded. */
.ss-changes-footer { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ss-border); }
.ss-changes-footer p { margin: 0; font-size: 11px; color: var(--ss-muted); }
.ss-changes-footer > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-changes-footer .ss-button { min-height: 40px; }

/* Draft / Main: what the canvas shows while reviewing. It looks like the mode switch it sits beside. */
.ss-version-switch { display: inline-flex; flex-shrink: 0; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--ss-border); border-radius: 8px; background: var(--ss-bg); }
.ss-version-switch button { min-height: 32px; padding: 5px 12px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ss-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ss-version-switch button:hover { color: var(--ss-text); background: var(--ss-surface); }
.ss-version-switch button[aria-pressed="true"] { color: var(--ss-accent); border-color: var(--ss-accent); background: var(--ss-surface); }
.ss-version-switch button:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }

/* Canvas overlay: ghosts, old positions, badges, belts and paint diffs. */
.ss-changes-layer { z-index: 2; overflow: visible; width: 1px; height: 1px; pointer-events: none; }
.ss-changes-layer[hidden] { display: none; }
/* Changed cards get a ring of their own around the card. The card keeps its outline and shadow, so selection still reads on a changed card. */
.ss-show-changes .ss-grid-node:is(.is-change-added, .is-change-edited, .is-change-removed)::after { content: ""; position: absolute; inset: calc(-8px / var(--ss-canvas-scale, 1)); border: calc(2px / var(--ss-canvas-scale, 1)) solid var(--ss-accent); border-radius: calc(9px + 8px / var(--ss-canvas-scale, 1)); pointer-events: none; }
.ss-show-changes .ss-grid-node.is-change-added::after { border-color: var(--ss-flow-good); }
.ss-show-changes .ss-grid-node.is-change-removed::after { border-color: var(--ss-flow-bad); border-style: dashed; }
.ss-change-badge rect { fill: var(--ss-accent); }
.ss-change-badge text { fill: #1a1400; font-size: 18px; font-weight: 600; font-family: inherit; }
/* Belts that are not on this canvas (deleted in the draft, or new when viewing Main). */
/* Belts on this canvas carry their change on their own path, so they follow drags and redraws. */
.ss-show-changes .ss-belt.is-change-added:not(.is-selected) { stroke: var(--ss-flow-good); stroke-opacity: 1; stroke-width: calc(5px / var(--ss-canvas-scale, 1)); }
.ss-show-changes .ss-belt.is-change-removed:not(.is-selected) { stroke: var(--ss-flow-bad); stroke-opacity: 1; stroke-width: calc(4px / var(--ss-canvas-scale, 1)); stroke-dasharray: calc(12px / var(--ss-canvas-scale, 1)) calc(8px / var(--ss-canvas-scale, 1)); }
.ss-show-changes .ss-belt.is-change-rerouted:not(.is-selected) { stroke: var(--ss-accent); stroke-opacity: .9; stroke-dasharray: calc(4px / var(--ss-canvas-scale, 1)) calc(6px / var(--ss-canvas-scale, 1)); }
.ss-change-paint { stroke: none; }
[data-zoom-detail=map] .ss-change-badge, [data-zoom-detail=compact] .ss-change-badge { display: none; }

/* Main view: the applied plan on the same canvas. The Draft / Main switch in the top bar is the control; this only labels the canvas. */
.ss-before-banner { position: absolute; left: 50%; top: calc(var(--ss-canvas-top, 72px) + 10px); transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--ss-accent); border-radius: 18px; background: var(--ss-sidebar); font-size: 12px; white-space: nowrap; box-shadow: 0 4px 18px #0006; pointer-events: none; }
.ss-before-banner[hidden] { display: none; }
.ss-before-banner strong { color: var(--ss-accent); font-weight: 600; }
.ss-before-banner span { color: var(--ss-muted); }
.is-before-mode .ss-canvas { box-shadow: inset 0 0 0 2px var(--ss-accent); }
/* Outside Manual the canvas is for looking: editing handles are put away. Port sockets stay in the layout, because belts are measured from them. */
:is(.is-before-mode, .ss-mode-ai, .ss-mode-changes) :is(.ss-zoom-settings, .ss-stamp-resize, .ss-belt-waypoint) { display: none !important; }

.ss-editor-error.is-notice { border-color: var(--ss-flow-good); }

/* Phones: an empty tool row is not kept. */
@media (max-width: 700px) {
  .ss-mode-ai .ss-top-dock .ss-editor-toolbar { display: none; }
  .ss-workspace-mode { padding-inline: 8px; gap: 5px; }
}
@media (max-width: 420px) {
  .ss-workspace-mode .ss-icon { display: none; }
}
/* The AI asked a question and waits: a steady frame and a banner that opens the chat. */
.is-ai-waiting:not(.is-ai-working) > .ss-canvas { box-shadow: inset 0 0 0 3px var(--ss-accent); }
.is-ai-waiting:not(.is-ai-working) .ss-ai-banner--waiting { display: flex; pointer-events: auto; cursor: pointer; color: var(--ss-text); font: inherit; font-size: 13px; }
.ss-ai-banner--waiting:hover { background: color-mix(in srgb, var(--ss-accent) 12%, var(--ss-sidebar)); }
.ss-ai-banner--waiting:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 3px; }
.ss-workspace-mode.is-waiting::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-accent); }