/* StructuralCanvas truss editor (DESIGN §24). Colours are custom properties, so a host can theme them. */
.sct {
  --sct-ink: #1f2933; --sct-muted: #52606d; --sct-line: #9aa5b1; --sct-bg: #ffffff; --sct-grid: #eef1f5; --sct-grid-major: #dde3ea;
  --sct-member: #323f4b; --sct-item: #1f5fbf; --sct-sel: #c2410c; --sct-focus: #f59e0b;
  --sct-tension: #1d4ed8; --sct-compression: #c81e1e; --sct-zero: #9aa5b1; --sct-react: #0f7b4a; --sct-shape: #7c3aed; --sct-flag: #d97706;
  color: var(--sct-ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sct *, .sct *::before, .sct *::after { box-sizing: border-box; }
.sct-main { min-width: 0; }
.sct-toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.sct-group { display: inline-flex; }
.sct-group .sct-btn:first-child { border-radius: 6px 0 0 6px; }
.sct-group .sct-btn:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.sct-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sct-muted); }
.sct-tool select, .sct-field select { font: inherit; font-size: 14px; color: var(--sct-ink); padding: 5px 6px; border: 1px solid var(--sct-line); border-radius: 5px; background: #fff; min-height: 34px; }
.sct-btn { font: inherit; padding: 6px 11px; border: 1px solid var(--sct-line); border-radius: 6px; background: var(--sct-bg); color: var(--sct-ink); cursor: pointer; min-height: 34px; }
.sct-btn:hover:not(:disabled) { border-color: var(--sct-item); }
.sct-btn:disabled { opacity: 0.45; cursor: default; }
.sct-btn.sct-on { background: var(--sct-item); border-color: var(--sct-item); color: #fff; }
.sct-btn:focus-visible, .sct input:focus-visible, .sct select:focus-visible, .sct-x:focus-visible { outline: 3px solid var(--sct-focus); outline-offset: 1px; }
.sct-coach { min-height: 3.2em; margin: 0 0 6px; padding: 6px 10px; border-radius: 6px; background: #eef4fd; color: #1e3a8a; font-size: 13px; border-left: 4px solid var(--sct-item); }
.sct-msg { color: #9a3412; font-weight: 600; margin: 6px 0; }
.sct-msg:empty { display: none; }
/* A hint (data-tone="info") is grey; only a refusal (data-tone="error") stays red. */
.sct-msg[data-tone="info"], .sct-pop-msg[data-tone="info"] { color: var(--sct-muted); font-weight: 400; }
.sct-stage { position: relative; background: var(--sct-bg); border: 1px solid #d9e2ec; border-radius: 8px; overflow: visible; }
/* touch-action: none comes from the core (.sca-host): the drawing takes touch gestures itself. */
.sct-svg { display: block; user-select: none; -webkit-user-select: none; }
/* The core tools' popover controls, in this editor's popover. */
.sct-pop .sca-btn { font: inherit; padding: 6px 11px; border: 1px solid var(--sct-line); border-radius: 6px; background: var(--sct-bg); color: var(--sct-ink); cursor: pointer; min-height: 34px; }
.sct-pop .sca-btn:focus-visible, .sct-pop .sca-field input:focus-visible { outline: 3px solid var(--sct-focus); outline-offset: 1px; }
.sct-pop .sca-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sct-pop .sca-choice.sca-on { background: var(--sct-item); border-color: var(--sct-item); color: #fff; }
.sct-pop .sca-wide { width: 100%; text-align: left; }
.sct-pop .sca-danger { color: #9b1c1c; border-color: #e5a5a5; }
.sct-pop .sca-field { display: flex; flex-direction: column; font-size: 12px; color: var(--sct-muted); gap: 2px; }
.sct-pop .sca-field input { font: inherit; font-size: 15px; color: var(--sct-ink); padding: 5px 7px; border: 1px solid var(--sct-line); border-radius: 5px; background: #fff; min-height: 36px; width: 100%; }
.sct-pop .sca-sub, .sct-pop .sca-note { font-size: 12px; color: var(--sct-muted); margin: 0; }
.sct-pop .sca-pair { display: flex; gap: 8px; }
.sct-hit { fill: transparent; stroke: none; cursor: pointer; }
.sct-bg { cursor: crosshair; }
.sct-grid { stroke: var(--sct-grid); stroke-width: 1; }
.sct-grid-major { stroke: var(--sct-grid-major); }
.sct-axis { stroke: #c3ccd6; stroke-width: 1.2; }
.sct-item { cursor: pointer; outline: none; }
.sct-node { touch-action: none; }
.sct-svg [tabindex] { outline: none; }
.sct-member-hit { stroke: transparent; stroke-width: 16; fill: none; }
.sct-item:focus-visible .sct-member-hit { stroke: rgba(245, 158, 11, 0.45); }
.sct-item:focus-visible .sct-hit:not(.sct-member-hit) { stroke: var(--sct-focus); stroke-width: 2.5; stroke-dasharray: 5 3; }
.sct-member { stroke: var(--sct-member); stroke-linecap: round; }
.sct-member.sct-nosec { stroke-dasharray: 6 4; stroke: #9a3412; }
.sct-member.sct-sense-T { stroke: var(--sct-tension); }
.sct-member.sct-sense-C { stroke: var(--sct-compression); }
.sct-member.sct-sense-0 { stroke: var(--sct-zero); stroke-dasharray: 5 4; }
.sct-sel .sct-member { stroke: var(--sct-sel); }
.sct-flag .sct-member, .sct-flag .sct-joint { stroke: var(--sct-flag); }
.sct-flag .sct-member-hit { stroke: rgba(217, 119, 6, 0.25); }
.sct-joint { fill: #fff; stroke: var(--sct-member); stroke-width: 2.2; }
.sct-sel .sct-joint { fill: var(--sct-sel); stroke: var(--sct-sel); }
.sct-over .sct-joint { fill: #fde7da; stroke: var(--sct-sel); stroke-width: 3; }
.sct-flag .sct-joint { fill: #fef3c7; stroke-width: 3; }
.sct-node-id { font-size: 11px; fill: var(--sct-muted); pointer-events: none; }
.sct-label { font-size: 12px; fill: var(--sct-ink); }
.sct-vlabel rect { fill: #fff; stroke-width: 1; }
.sct-vlabel text { font-size: 11.5px; font-weight: 700; }
.sct-vlabel-T rect { stroke: var(--sct-tension); } .sct-vlabel-T text { fill: var(--sct-tension); }
.sct-vlabel-C rect { stroke: var(--sct-compression); } .sct-vlabel-C text { fill: var(--sct-compression); }
.sct-vlabel-0 rect { stroke: var(--sct-zero); } .sct-vlabel-0 text { fill: var(--sct-muted); }
.sct-action-arrow line { stroke: var(--sct-item); stroke-width: 2.6; }
.sct-action-arrow polygon { fill: var(--sct-item); }
.sct-action-text { font-weight: 600; fill: var(--sct-item); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.sct-sel .sct-action-arrow line { stroke: var(--sct-sel); } .sct-sel .sct-action-arrow polygon { fill: var(--sct-sel); }
.sct-sym-fill { fill: #e4e7eb; stroke: var(--sct-member); stroke-width: 1.5; }
.sct-ground { stroke: var(--sct-member); stroke-width: 1.6; }
.sct-hatch { stroke: var(--sct-muted); stroke-width: 1; }
.sct-react-arrow line { stroke: var(--sct-react); stroke-width: 2.6; }
.sct-react-arrow polygon { fill: var(--sct-react); }
.sct-react { fill: var(--sct-react); font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.sct-shape line { stroke: var(--sct-shape); stroke-width: 2; stroke-dasharray: 6 4; }
.sct-rubber { stroke: var(--sct-sel); stroke-width: 3; stroke-dasharray: 6 4; }
.sct-pill rect { fill: #1f2933; } .sct-pill text { fill: #fff; font-size: 12px; font-weight: 600; }
.sct-pill-sel rect { fill: var(--sct-sel); }
.sct-dim { cursor: pointer; }
.sct-dim line { stroke: var(--sct-muted); stroke-width: 1; }
.sct-dim polygon { fill: var(--sct-muted); }
.sct-dim-pill { fill: #fff; stroke: var(--sct-item); stroke-width: 1.4; }
.sct-dim-text { font-size: 12px; font-weight: 600; fill: var(--sct-item); }
.sct-dim:hover .sct-dim-pill, .sct-dim:focus-visible .sct-dim-pill { fill: #eef4fd; stroke-width: 2.2; }
.sct-dim:focus-visible .sct-dim-pill { stroke: var(--sct-focus); }
.sct-stale { opacity: 0.35; }
.sct-bar { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px; padding: 6px 10px; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12); }
.sct-bar[hidden] { display: none; }
.sct-pop { position: absolute; z-index: 5; background: var(--sct-bg); border: 1px solid var(--sct-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; max-height: 80vh; overflow: auto; }
.sct-pop[hidden] { display: none; }
.sct-pop-head { display: flex; justify-content: space-between; align-items: center; }
.sct-pop-sub { font-size: 12px; color: var(--sct-muted); }
.sct-pop-msg { color: #9a3412; font-weight: 600; font-size: 12.5px; }
.sct-pop-msg:empty { display: none; }
.sct-pair { display: flex; gap: 8px; }
.sct-pair > * { flex: 1 1 0; min-width: 0; }
.sct-x { font: inherit; font-size: 18px; line-height: 1; border: 0; background: none; cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; color: var(--sct-ink); }
.sct-types { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sct-type.sct-on { background: var(--sct-item); border-color: var(--sct-item); color: #fff; }
.sct-danger { color: #9b1c1c; border-color: #e5a5a5; }
.sct-note { margin: 0; color: var(--sct-muted); font-size: 12px; }
.sct-field { display: flex; flex-direction: column; font-size: 12px; color: var(--sct-muted); gap: 2px; }
.sct-field input { font: inherit; font-size: 15px; color: var(--sct-ink); padding: 5px 7px; border: 1px solid var(--sct-line); border-radius: 5px; background: #fff; min-height: 36px; width: 100%; }
.sct-returned { background: #f5f7fa; border-radius: 6px; padding: 5px 7px; font-size: 13px; }
.sct-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0; font-size: 13px; }
.sct-legend[hidden] { display: none; }
.sct-key { display: inline-flex; align-items: center; gap: 5px; }
.sct-swatch { display: inline-block; width: 22px; height: 5px; border-radius: 3px; }
.sct-swatch.sct-sense-T { background: var(--sct-tension); }
.sct-swatch.sct-sense-C { background: var(--sct-compression); }
.sct-swatch.sct-sense-0 { background: repeating-linear-gradient(90deg, var(--sct-zero) 0 5px, transparent 5px 9px); }
.sct-swatch.sct-react-key { background: var(--sct-react); }
.sct-check { display: inline-flex; align-items: center; gap: 5px; }
.sct-muted { color: var(--sct-muted); font-size: 12px; }
.sct-summary { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.sct-status-bad { color: #9a3412; font-weight: 600; }
.sct-table { border-collapse: collapse; font-size: 13px; }
.sct-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.sct-table th, .sct-table td { border-bottom: 1px solid #e4e7eb; padding: 3px 8px; text-align: left; }
.sct-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A 64-character section name has no place to break: text in the editor (its messages, the legend keys)
   may break it anywhere rather than widen the page, which the drawing would then size itself to. The
   member table shows the name shortened, the full name in its tooltip. */
.sct { overflow-wrap: anywhere; min-width: 0; }
/* StructuralCanvas core action and support tools (DESIGN §25). A mode's stylesheet includes this file;
   colours are custom properties a host may theme. */
/* Touch (CORE-PARITY-SPEC §6): browsers ignore touch-action on most SVG children, so the policy is set on
   the drawing. A frame's drawing takes every gesture; a beam's lets a vertical swipe scroll the page. */
.sca-host.sca-touch-none { touch-action: none; }
.sca-host.sca-touch-pan-y { touch-action: pan-y; }
.sca-touch-pan-y .sca-item { touch-action: none; }
.sca-band { fill: rgba(31, 95, 191, 0.13); stroke: var(--sca-item); stroke-width: 1.4; }
.sca-sel .sca-band { stroke: var(--sca-sel); fill: rgba(194, 65, 12, 0.12); }
.sca-tag-wind .sca-band { stroke: var(--sca-tag); fill: rgba(14, 116, 144, 0.10); }
.sca-handle { fill: #fff; stroke: var(--sca-sel); stroke-width: 2; cursor: ew-resize; }
.sca-hit-wide { stroke-width: 26; }
.sca-host, .sca-pop {
  --sca-item: #1f5fbf; --sca-sel: #c2410c; --sca-ink: #1f2933; --sca-muted: #52606d; --sca-bg: #ffffff; --sca-tag: #0e7490;
}
.sca-label { font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--sca-ink); paint-order: stroke; stroke: var(--sca-bg); stroke-width: 3px; stroke-linejoin: round; }
.sca-value { font-weight: 600; fill: var(--sca-item); }
.sca-readout { font-weight: 700; fill: var(--sca-sel); }
.sca-item { cursor: grab; outline: none; }
.sca-arrow line { stroke: var(--sca-item); stroke-width: 2.4; }
.sca-arrow-thin line { stroke-width: 1.4; }
/* Rule 18: a point arrow held up at the minimum length (too small to draw to scale) has a tick across
   its tail, so it is not read as to scale. */
.sca-min-tick { stroke: var(--sca-item); stroke-width: 2; }
.sca-sel .sca-min-tick { stroke: var(--sca-sel); }
.sca-arrow polygon { fill: var(--sca-item); }
.sca-tail-line { fill: none; stroke: var(--sca-item); stroke-width: 1.2; }
.sca-leader { stroke: var(--sca-item); stroke-width: 1; stroke-dasharray: 2 2; }
.sca-sel .sca-leader { stroke: var(--sca-sel); }
/* A member's start-to-end marker while a local-direction action on it is selected. */
.sca-member-dir .sca-arrow line { stroke: var(--sca-muted); stroke-width: 1.4; }
.sca-member-dir .sca-arrow polygon { fill: var(--sca-muted); }
.sca-member-end { font: 11px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; fill: var(--sca-muted); }
.sca-arc path { fill: none; stroke: var(--sca-item); stroke-width: 2.2; }
.sca-arc polygon, .sca-arc circle { fill: var(--sca-item); }
/* The dot marks the point; a click there reaches what is under it (a frame's node). */
.sca-arc circle { pointer-events: none; }
.sca-arc path.sca-hit-line, .sca-hit-line { fill: none; stroke: transparent; stroke-width: 18; stroke-linecap: round; cursor: pointer; }
.sca-hit { fill: transparent; stroke: none; cursor: pointer; }
.sca-hit-line.sca-hit-wide { stroke-linecap: butt; }
.sca-tag-wind .sca-arrow line, .sca-tag-wind .sca-tail-line { stroke: var(--sca-tag); }
.sca-tag-wind .sca-arrow polygon { fill: var(--sca-tag); }
.sca-tag-wind .sca-value { fill: var(--sca-tag); }
.sca-sel .sca-arrow line, .sca-sel .sca-tail-line, .sca-sel .sca-arc path:not(.sca-hit-line) { stroke: var(--sca-sel); }
.sca-sel .sca-arrow polygon, .sca-sel .sca-arc polygon, .sca-sel .sca-arc circle { fill: var(--sca-sel); }
.sca-sel .sca-sym-fill { fill: #fde7da; stroke: var(--sca-sel); }
.sca-sel .sca-value { fill: var(--sca-sel); }
.sca-item:focus-visible .sca-hit-line, .sca-item:focus-visible .sca-hit { stroke: rgba(245, 158, 11, 0.5); }
.sca-rotate { fill: #fff; stroke: var(--sca-sel); stroke-width: 2.4; cursor: grab; }
/* The placement preview: the beam's dashed start line and band, and its plain range readout. */
.sca-pending { stroke: var(--sca-sel); stroke-width: 2; stroke-dasharray: 4 3; }
.sca-pending-band { fill: rgba(194, 65, 12, 0.14); stroke: var(--sca-sel); stroke-dasharray: 4 3; }
.sca-pending-text { font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--sca-ink); }
.sca-support { cursor: pointer; outline: none; }
.sca-sym-fill { fill: #e4e7eb; stroke: #323f4b; stroke-width: 1.5; }
.sca-fixed { fill: #cbd2d9; }
.sca-ground { stroke: #323f4b; stroke-width: 1.6; }
.sca-hatch { stroke: var(--sca-muted); stroke-width: 1; }
.sca-support:hover .sca-sym-fill, .sca-support:focus-visible .sca-sym-fill { stroke: var(--sca-item); stroke-width: 2.2; }
.sca-btn { font: inherit; padding: 6px 10px; border: 1px solid #9aa5b1; border-radius: 6px; background: #fff; color: var(--sca-ink); cursor: pointer; min-height: 34px; }
.sca-btn:hover:not(:disabled) { border-color: var(--sca-item); }
.sca-btn.sca-on, .sca-choice.sca-on { background: var(--sca-item); border-color: var(--sca-item); color: #fff; }
.sca-btn:focus-visible, .sca-field input:focus-visible { outline: 3px solid #f59e0b; outline-offset: 1px; }
.sca-wide { width: 100%; text-align: left; }
.sca-small { min-height: 28px; padding: 2px 8px; font-size: 12.5px; }
.sca-danger { color: #9b1c1c; border-color: #e5a5a5; }
.sca-choices { display: flex; flex-wrap: wrap; gap: 4px; }
/* A choice's label wraps rather than being cut short (Ugur's review, 2026-11-06). */
.sca-choice { flex: 1 1 28%; min-width: 0; padding: 5px 3px; font-size: 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
/* The node menu (DESIGN §25.11), FloorCanvas's .fc-menu: one column of full-width items in a white box. */
.sca-menu { display: flex; flex-direction: column; min-width: 170px; margin: 0; padding: 4px; border: 1px solid #d6dde5; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); }
.sca-menu-item { appearance: none; display: block; width: 100%; margin: 0; padding: 7px 10px; border: 0; border-radius: 5px; background: transparent; color: #1d2733; font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; min-height: 32px; }
.sca-menu-item:hover, .sca-menu-item:focus { background: #eff6ff; color: #1d4ed8; outline: none; }
.sca-menu-item:focus-visible { outline: 2px solid #1a5fb4; outline-offset: -2px; }
.sca-menu-item[aria-checked="true"] { background: #eff6ff; color: #1d4ed8; }
.sca-menu-item[aria-checked="true"]::after { content: " \2713"; }
.sca-menu-item:disabled { opacity: 0.5; cursor: default; }
.sca-menu-more { color: #4a5a6a; }
.sca-menu-sub::after { content: " \203A"; color: #4a5a6a; }
.sca-menu-danger { color: #9b1c1c; }
.sca-menu-sep { height: 1px; margin: 4px 6px; background: #d6dde5; }
.sca-sub { font-size: 12px; color: var(--sca-muted); font-weight: 600; }
.sca-note { margin: 0; color: var(--sca-muted); font-size: 12px; }
.sca-pair { display: flex; gap: 8px; }
.sca-pair > * { flex: 1 1 0; min-width: 0; }
.sca-field { display: flex; flex-direction: column; font-size: 12px; color: var(--sca-muted); gap: 2px; }
.sca-field input { font: inherit; font-size: 15px; color: var(--sca-ink); padding: 5px 7px; border: 1px solid #9aa5b1; border-radius: 5px; background: #fff; min-height: 36px; width: 100%; box-sizing: border-box; }
/* StructuralCanvas core Sections grid (DESIGN §26): S3U-05's table look (review/s3u05/app.css),
   made host-neutral. Colours are custom properties a host may theme. */
.scs { --scs-ink: #1f2933; --scs-muted: #52606d; --scs-line: #d9e2ec; --scs-bad: #b42318; --scs-sel: #e8f0fb; --scs-item: #1a5fb4; --scs-ro: #f6f8fa; }
.scs-wrap { overflow-x: auto; max-width: 100%; margin-top: 4px; }
/* More columns than fit: the host's hint line, and on a phone a fade on the edge with more (DESIGN §26.5).
   The fade is phone-only, so a desktop panel looks exactly as S3U-05's. */
.scs-scroll { position: relative; }
.scs-more-hint { margin-top: 3px; font-size: 12px; color: var(--scs-muted); }
@media (max-width: 560px) {
  .scs-scroll[data-more="right"]::after, .scs-scroll[data-more="both"]::after,
  .scs-scroll[data-more="left"]::before, .scs-scroll[data-more="both"]::before { content: ''; position: absolute; top: 4px; bottom: 0; width: 22px; pointer-events: none; }
  .scs-scroll[data-more="right"]::after, .scs-scroll[data-more="both"]::after { right: 0; background: linear-gradient(to left, rgba(31, 41, 51, 0.22), rgba(31, 41, 51, 0)); }
  .scs-scroll[data-more="left"]::before, .scs-scroll[data-more="both"]::before { left: 0; background: linear-gradient(to right, rgba(31, 41, 51, 0.22), rgba(31, 41, 51, 0)); z-index: 1; }
}
.scs-grid { border-collapse: collapse; font-size: 12px; color: var(--scs-ink); }
.scs-grid th { text-align: left; font-weight: 600; padding: 2px 3px; white-space: nowrap; color: var(--scs-muted); }
.scs-grid th.scs-ro-head { text-align: right; }
.scs-grid td { padding: 1px 2px; }
.scs-grid input { width: 4.6em; padding: 2px 3px; font-size: 12px; box-sizing: border-box; }
.scs-grid input.scs-name { width: 6.5em; }
.scs-grid input:disabled { background: #eceff2; color: #a0a8b0; border-color: #dde2e7; }
.scs-grid select { font-size: 12px; max-width: 9em; }
.scs-grid tr.scs-sel { background: var(--scs-sel); }
.scs-grid tr.scs-assigning { outline: 2px solid var(--scs-item); outline-offset: -2px; }
.scs-grid td.ro { text-align: right; font-variant-numeric: tabular-nums; background: var(--scs-ro); white-space: nowrap; }
.scs-grid td.ro.stale { opacity: 0.55; }
.scs-grid td.bad input, .scs-grid td.bad select { border-color: var(--scs-bad); background: #fff6f6; }
.scs-grid button { min-height: 24px; padding: 0 6px; font: inherit; font-size: 12px; cursor: pointer; }
.scs-grid button.on { background: var(--scs-item); color: #fff; border-color: var(--scs-item); }
.scs-grid td.used { white-space: nowrap; }
.scs-grid .used-text { display: inline-block; min-width: 7em; }
.scs-grid button.sec-select { color: var(--scs-item); border-color: var(--scs-item); }
.scs-grid button:disabled { opacity: 0.45; cursor: default; }
.scs-foot { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.scs-msg { color: var(--scs-bad); font-size: 12px; }
.scs-preview { margin: 6px 0 0; display: flex; gap: 10px; align-items: center; }
.scs-preview svg { border: 1px solid var(--scs-line); background: #fbfcfd; }
/* The dimension key (rule 20): in the page's text colour, the shape in --scs-key-fill. */
.scs-preview svg.scs-dimkey { border: 0; background: none; flex: 0 0 auto; }
.scs-dimkey .scs-key-leader { stroke-dasharray: 2 2; }
/* S3U-05's preview path: the stroke width is set on the path (1 px at the outline's scale). */
.scs-outline { fill: #8fb3df; stroke: #1a5fb4; }
.scs-caption { color: var(--scs-muted); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
/* The assignment tools (DESIGN §26.4): S3U-05's legend, Section bar and box (src/view/viewer.css
   scw-legend, scw-selbar, scw-box), host-neutral. The bar is a block a host places (S3U-05 floats it
   over its drawing). */
.scs-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 8px; border-top: 1px solid #d5dce3; font-size: 12px; }
.scs-legend-title { font-weight: 600; }
.scs-key { display: inline-flex; gap: 4px; align-items: center; }
.scs-legend .scs-key { font: inherit; font-size: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; padding: 2px 8px; cursor: pointer; min-height: 28px; }
.scs-legend button.scs-key:hover, .scs-legend button.scs-key:focus-visible { border-color: #1a5fb4; background: #eef5fd; }
.scs-legend .scs-key-static { cursor: default; }
/* A host-owned Sections table (DESIGN §26.7): a legend entry with "Used by" and its own Select. */
.scs-legend .scs-key-usage { cursor: default; flex-wrap: wrap; border-color: #d6dde5; }
.scs-key-usage .scs-key-name { font-weight: 600; }
.scs-key-usage .scs-used { color: #4a5a6a; }
.scs-key-usage .scs-key-select { font-size: 11px; min-height: 24px; padding: 1px 8px; }
.scs-legend .scs-box-toggle { border-color: #a9b4bf; }
.scs-legend .scs-box-toggle.on { background: #ff6a00; border-color: #ff6a00; color: #fff; }
.scs-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.scs-swatch-none { background: repeating-linear-gradient(90deg, #111 0 4px, #fff 4px 7px); border: 1px solid #111; }
.scs-flag { color: #8a5a00; font-weight: 600; }
/* The selection popup (DESIGN §26.8): the node menu's look (a white box, 8 px corners, its shadow), with
   the selection's orange as a left accent. */
.scs-selbar { box-sizing: border-box; display: flex; width: max-content; max-width: 100%; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 10px; background: #fff; border: 1px solid #d6dde5; border-left: 4px solid #ff6a00; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); font-size: 13px; }
.scs-selbar[hidden] { display: none; }
.scs-selbar select { font: 14px system-ui, sans-serif; min-height: 32px; }
.scs-selbar-what { font-weight: 600; }
.scs-tool { display: inline-flex; gap: 4px; align-items: center; }
.scs-btn { font: inherit; padding: 4px 10px; border: 1px solid #a9b4bf; border-radius: 4px; background: #f6f8fa; cursor: pointer; min-height: 30px; }
.scs-btn:disabled { opacity: 0.5; cursor: default; }
.scs-box { fill: rgba(255, 106, 0, 0.08); stroke: #ff6a00; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
/* StructuralCanvas viewer styles (DESIGN §20). Copied to dist/ by build.mjs. */
.sc-view { position: relative; overflow: hidden; min-height: 240px; outline: none; }
.sc-view:focus-visible { box-shadow: inset 0 0 0 3px #1a5fb4; }
.sc-canvas { display: block; }
.sc-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sc-label { position: absolute; left: 0; top: 0; font: 11px/1.2 ui-monospace, monospace; color: #fff; background: rgba(17, 27, 38, 0.86); padding: 1px 3px; border-radius: 2px; white-space: nowrap; transform-origin: 0 0; }
.sc-label-selected { background: #b34d00; }
.sc-schedule { border-collapse: collapse; width: 100%; table-layout: fixed; font: 12px/16px ui-monospace, monospace; }
.sc-schedule th { position: sticky; top: 0; background: #fff; text-align: left; padding: 2px 6px; border-bottom: 2px solid #c9d1d9; }
.sc-schedule td { padding: 2px 6px; border-bottom: 1px solid #e1e5ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-schedule tbody tr:not(.sc-spacer) { height: 22px; cursor: pointer; }
.sc-schedule tr.sc-spacer td { padding: 0; border: 0; }
.sc-schedule tr.sc-selected { background: #ffe3c4; }
.sc-schedule tr:focus-visible { outline: 2px solid #1a5fb4; outline-offset: -2px; }

/* The warehouse canvas (DESIGN §22b): 2D front and side views, the 3D view, popovers, legend. */
.scw { display: flex; flex-direction: column; min-width: 0; font: 13px/1.4 system-ui, sans-serif; color: #1d2733; }
.scw-toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid #d5dce3; }
.scw-tabs { display: inline-flex; border: 1px solid #a9b4bf; border-radius: 5px; overflow: hidden; }
.scw-tab { font: inherit; border: 0; border-right: 1px solid #a9b4bf; background: #f6f8fa; padding: 5px 14px; cursor: pointer; min-height: 32px; }
.scw-tab:last-child { border-right: 0; }
.scw-tab.scw-on { background: #1a5fb4; color: #fff; font-weight: 600; }
.scw-btn { font: inherit; padding: 4px 10px; border: 1px solid #a9b4bf; border-radius: 4px; background: #f6f8fa; cursor: pointer; min-height: 30px; }
.scw-btn:disabled { opacity: 0.5; cursor: default; }
.scw-btn.scw-wide { display: block; width: 100%; margin-top: 6px; text-align: left; }
.scw-danger { color: #a32020; }
.scw-tool { display: inline-flex; gap: 4px; align-items: center; }
.scw-toolbar select { font: inherit; min-height: 30px; }
.scw-tools3d { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.scw-tools3d[hidden] { display: none; }
.scw-msg { min-height: 0; padding: 0 8px; color: #a32020; }
/* A 64-character section name has no place to break: message lines may break it anywhere rather than widen the page. */
.scw-msg, .scw-hint { overflow-wrap: anywhere; min-width: 0; }
.scw-msg:not(:empty) { padding: 4px 8px; }
/* A hint (data-tone="info") is grey; only a refusal (data-tone="error") stays red; the flag ("warning") is amber. */
.scw-msg[data-tone="info"], .scw-pop-msg[data-tone="info"] { color: #56636f; }
.scw-msg.scw-flag { color: #8a5a00; background: #fff2d6; }
.scw-stage { position: relative; }
.scw-svg { display: block; width: 100%; user-select: none; -webkit-user-select: none; background: #fbfcfd; }
.scw-svg[hidden], .scw-3d[hidden] { display: none; }
.scw-3d { height: 380px; }
.scw-ground { stroke: #56636f; stroke-width: 1.5; }
.scw-dim { stroke: #8a96a3; stroke-width: 1; }
.scw-ridge { stroke: #8a96a3; stroke-width: 1; stroke-dasharray: 5 4; }
.scw-label { font: 12px system-ui, sans-serif; fill: #1d2733; }
.scw-small { font-size: 11px; fill: #56636f; }
.scw-warn { fill: #8a5a00; }
.scw-click { cursor: pointer; text-decoration: underline dotted; }
.scw-hit, .scw-hitline { fill: transparent; stroke: transparent; }
.scw-hitline { stroke-width: 14; }
.scw-member { cursor: pointer; }
.scw-handle { cursor: grab; touch-action: none; outline: none; }
.scw-handle.scw-cur-ew { cursor: ew-resize; }
.scw-handle.scw-cur-ns { cursor: ns-resize; }
.scw-handle.scw-cur-move { cursor: move; }
.scw-knob { fill: #1a5fb4; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 1.5px rgba(17, 27, 38, 0.45)); }
.scw-ring { fill: none; stroke: transparent; stroke-width: 3; }
.scw-handle:hover .scw-ring, .scw-handle:focus-visible .scw-ring { stroke: rgba(26, 95, 180, 0.45); }
.scw-handle:hover .scw-knob, .scw-handle:focus-visible .scw-knob { fill: #0d4a96; }
.scw-handle:focus-visible .scw-ring { stroke: #1a5fb4; stroke-dasharray: 3 2; }
.scw-dashed { stroke-dasharray: 4 3; }
.scw-pill { cursor: pointer; outline: none; }
.scw-pill-bg { fill: #fff; stroke: #1a5fb4; stroke-width: 1.5; }
.scw-pill-text { font: 600 12px system-ui, sans-serif; fill: #0d4a96; }
.scw-pill-small .scw-pill-text { font-size: 11px; }
.scw-pencil { font: 12px system-ui, sans-serif; fill: #1a5fb4; opacity: 0; }
.scw-pill:hover .scw-pill-bg, .scw-pill:focus-visible .scw-pill-bg { fill: #e8f0fb; stroke-width: 2; }
.scw-pill:hover .scw-pencil, .scw-pill:focus-visible .scw-pencil { opacity: 1; }
.scw-pill:focus-visible .scw-pill-bg { stroke: #0d4a96; stroke-width: 2.5; }
.scw-add .scw-pill-bg { fill: #f2f7fd; stroke-dasharray: 4 2; }
/* The "+ bay" pill (src/mode/add-bay.js, rule 19): the same in the warehouse, the deck and the rack. */
.sc-addbay { cursor: pointer; }
.sc-addbay.sc-addbay-off { cursor: not-allowed; opacity: 0.45; }
.scw-live rect { fill: #1d2733; opacity: 0.92; }
.scw-live text { font: 600 12px system-ui, sans-serif; fill: #fff; }
.scw-coach { display: flex; gap: 10px; align-items: center; margin: 6px 8px 2px; padding: 8px 10px; border: 1px solid #9cc0ea; border-left: 4px solid #1a5fb4; border-radius: 6px; background: #eef5fd; font-size: 13px; }
.scw-coach[hidden] { display: none; }
.scw-coach-icon { font-size: 18px; color: #1a5fb4; }
.scw-coach-text { flex: 1; min-width: 0; }
.scw-coach-detail { color: #3b4855; }
.scw-pop-sub { margin-top: 8px; font-size: 12px; font-weight: 600; color: #3b4855; }
.scw-box { fill: rgba(255, 106, 0, 0.08); stroke: #ff6a00; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.scw-caption { padding: 4px 10px 0; font-size: 12px; color: #56636f; }
.scw-caption:empty { display: none; }
.scw-grid { fill: #3d4a57; font-weight: 600; }
.scw-selbar { position: absolute; z-index: 4; top: 6px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; max-width: calc(100% - 16px); padding: 6px 10px; background: #fff; border: 2px solid #ff6a00; border-radius: 6px; box-shadow: 0 3px 12px rgba(17, 27, 38, 0.2); font-size: 13px; }
.scw-selbar[hidden] { display: none; }
/* On a phone the Section bar sits under the drawing, in the flow, never over it (Coordination,
   2026-11-06; as the deck's and the rack's). With nothing selected it is hidden. */
@media (max-width: 560px) {
  .scw-selbar { position: static; margin: 6px 8px; max-width: none; box-shadow: none; }
}
.scw-selbar select { font: 14px system-ui, sans-serif; min-height: 32px; }
.scw-selbar-what { font-weight: 600; }
.scw-legend .scw-key { font: inherit; font-size: 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; padding: 2px 8px; cursor: pointer; min-height: 28px; }
.scw-legend button.scw-key:hover, .scw-legend button.scw-key:focus-visible { border-color: #1a5fb4; background: #eef5fd; }
.scw-legend .scw-key-static { cursor: default; }
.scw-coach-assign { color: #3b4855; }
.scw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scw-bay { cursor: pointer; outline: none; }
.scw-bayrect { fill: transparent; stroke: none; }
.scw-braced .scw-bayrect { fill: rgba(192, 57, 43, 0.08); }
.scw-bay:focus-visible .scw-bayrect, .scw-bay:hover .scw-bayrect { stroke: #1a5fb4; stroke-width: 2; stroke-dasharray: 4 3; }
.scw-door { cursor: grab; touch-action: none; outline: none; }
.scw-doorrect { fill: rgba(26, 95, 180, 0.12); stroke: #1a5fb4; stroke-width: 1.5; stroke-dasharray: 5 3; }
.scw-door:focus-visible .scw-doorrect { stroke-width: 3; }
.scw-pop { position: absolute; z-index: 5; background: #fff; border: 1px solid #a9b4bf; border-radius: 6px; box-shadow: 0 4px 16px rgba(17, 27, 38, 0.18); padding: 8px 10px; max-height: 70vh; overflow: auto; }
.scw-pop[hidden] { display: none; }
.scw-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.scw-x { font: inherit; border: 0; background: transparent; font-size: 18px; cursor: pointer; min-width: 32px; min-height: 32px; }
.scw-field { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; font-size: 12px; color: #56636f; }
.scw-field input, .scw-field select { font: 14px system-ui, sans-serif; color: #1d2733; padding: 4px 6px; min-height: 32px; }
.scw-check { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.scw-note { margin: 4px 0; font-size: 12px; color: #56636f; }
.scw-pop-msg { color: #a32020; font-size: 12px; }
.scw-pop-msg:empty { display: none; }
.scw-info { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.scw-info caption { text-align: left; font-weight: 600; padding: 2px 0; }
.scw-info th { text-align: left; font-weight: 500; color: #56636f; padding: 1px 4px 1px 0; }
.scw-info td { text-align: right; font-variant-numeric: tabular-nums; }
.scw-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 8px; border-top: 1px solid #d5dce3; font-size: 12px; }
.scw-legend-title { font-weight: 600; }
.scw-key { display: inline-flex; gap: 4px; align-items: center; }
.scw-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.scw-swatch-none { background: repeating-linear-gradient(90deg, #111 0 4px, #fff 4px 7px); border: 1px solid #111; }
.scw-flag { color: #8a5a00; font-weight: 600; }
.scw-hint { padding: 2px 8px 6px; font-size: 12px; color: #56636f; }
@media (max-width: 560px) { .scw-3d { height: 300px; } .scw-tab { padding: 5px 10px; } }
/* StructuralCanvas beam editor (DESIGN §22). Colours are custom properties, so a host can theme them.
   Every input is edited on the drawing (Ugur, review 1): there is no side panel. */
.scb {
  --scb-ink: #1f2933; --scb-muted: #52606d; --scb-line: #9aa5b1; --scb-bg: #ffffff;
  --scb-beam: #323f4b; --scb-item: #1f5fbf; --scb-dist-fill: rgba(31, 95, 191, 0.13); --scb-sel: #c2410c;
  --scb-react: #0f7b4a; --scb-v: #1f5fbf; --scb-v-fill: rgba(31, 95, 191, 0.16); --scb-m: #7c3aed;
  --scb-m-fill: rgba(124, 58, 237, 0.15); --scb-shape: #b91c1c; --scb-focus: #f59e0b;
  color: var(--scb-ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.scb *, .scb *::before, .scb *::after { box-sizing: border-box; }
.scb-main { min-width: 0; }
.scb-toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.scb-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--scb-muted); }
.scb-tool select { font: inherit; font-size: 14px; color: var(--scb-ink); padding: 5px 6px; border: 1px solid var(--scb-line); border-radius: 5px; background: #fff; min-height: 34px; }
.scb-hint { color: var(--scb-muted); font-size: 13px; margin-left: 4px; flex: 1 1 260px; }
.scb-btn { font: inherit; padding: 6px 11px; border: 1px solid var(--scb-line); border-radius: 6px; background: var(--scb-bg); color: var(--scb-ink); cursor: pointer; min-height: 34px; }
.scb-btn:hover:not(:disabled) { border-color: var(--scb-item); }
.scb-btn:disabled { opacity: 0.45; cursor: default; }
.scb-btn:focus-visible, .scb input:focus-visible, .scb select:focus-visible, .scb-x:focus-visible { outline: 3px solid var(--scb-focus); outline-offset: 1px; }
/* overflow stays visible: a popover may reach below a short drawing. */
.scb-stage { position: relative; background: var(--scb-bg); border: 1px solid #d9e2ec; border-radius: 8px; }
.scb-svg { display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scb-hit { fill: transparent; stroke: none; cursor: pointer; }
.scb-item { cursor: grab; touch-action: none; outline: none; }
/* Keyboard focus on the drawing: the focused element's hit box is outlined. */
.scb-svg [tabindex] { outline: none; }
.scb-item:focus-visible .scb-hit, .scb-beam-hit:focus-visible, .scb-length:focus-visible .scb-hit { stroke: var(--scb-focus); stroke-width: 2.5; stroke-dasharray: 5 3; }
.scb-props:focus-visible .scb-props-box { stroke: var(--scb-focus); stroke-width: 2.5; }
.scb-beam { fill: var(--scb-beam); cursor: pointer; }
.scb-label { font-size: 12px; fill: var(--scb-ink); }
.scb-value { font-weight: 600; }
.scb-props { cursor: pointer; }
.scb-props-box { fill: #eef2f7; stroke: #cbd2d9; stroke-width: 1; }
.scb-props:hover .scb-props-box { stroke: var(--scb-item); }
.scb-props-text { font-weight: 600; }
.scb-length { cursor: pointer; }
.scb-length:hover .scb-dim-text { fill: var(--scb-item); }
.scb-point-arrow line { stroke: var(--scb-item); stroke-width: 2.4; }
.scb-point-arrow polygon { fill: var(--scb-item); }
.scb-couple-arrow path { fill: none; stroke: var(--scb-item); stroke-width: 2.4; }
.scb-couple-arrow polygon, .scb-couple-arrow circle { fill: var(--scb-item); }
.scb-sel .scb-couple-arrow path { stroke: var(--scb-sel); }
.scb-sel .scb-couple-arrow polygon, .scb-sel .scb-couple-arrow circle { fill: var(--scb-sel); }
.scb-dist { fill: var(--scb-dist-fill); stroke: var(--scb-item); stroke-width: 1.4; }
.scb-dist-arrow line { stroke: var(--scb-item); stroke-width: 1.1; }
.scb-dist-arrow polygon { fill: var(--scb-item); }
.scb-sel .scb-point-arrow line, .scb-sel .scb-dist-arrow line { stroke: var(--scb-sel); }
.scb-sel .scb-point-arrow polygon, .scb-sel .scb-dist-arrow polygon { fill: var(--scb-sel); }
.scb-sel .scb-dist { stroke: var(--scb-sel); fill: rgba(194, 65, 12, 0.12); }
.scb-sel .scb-label { fill: var(--scb-sel); }
.scb-sym-fill { fill: #e4e7eb; stroke: var(--scb-beam); stroke-width: 1.5; }
.scb-sel .scb-sym-fill { fill: #fde7da; stroke: var(--scb-sel); }
.scb-ground { stroke: var(--scb-beam); stroke-width: 1.6; }
.scb-hatch { stroke: var(--scb-muted); stroke-width: 1; }
.scb-handle { fill: #fff; stroke: var(--scb-sel); stroke-width: 2; cursor: ew-resize; touch-action: none; }
.scb-pending { stroke: var(--scb-sel); stroke-width: 2; stroke-dasharray: 4 3; }
.scb-pending-band { fill: rgba(194, 65, 12, 0.14); stroke: var(--scb-sel); stroke-dasharray: 4 3; }
.scb-dim line { stroke: var(--scb-muted); stroke-width: 1; }
.scb-dim polygon { fill: var(--scb-muted); }
.scb-dim-text { fill: var(--scb-muted); }
.scb-dim-sel line { stroke: var(--scb-sel); }
.scb-dim-sel polygon { fill: var(--scb-sel); }
.scb-dim-sel .scb-dim-text { fill: var(--scb-sel); }
.scb-react-arrow line { stroke: var(--scb-react); stroke-width: 2.4; }
.scb-react-arrow polygon { fill: var(--scb-react); }
.scb-react { fill: var(--scb-react); font-weight: 600; }
.scb-react-couple path { fill: none; stroke: var(--scb-react); stroke-width: 2.2; }
.scb-react-couple polygon { fill: var(--scb-react); }
.scb-guide { stroke: #cbd2d9; stroke-width: 1; stroke-dasharray: 3 4; }
.scb-band-title { font-size: 12.5px; font-weight: 600; fill: var(--scb-ink); }
.scb-zero { stroke: var(--scb-line); stroke-width: 1; }
.scb-curve { fill: none; stroke-width: 2; stroke-linejoin: round; }
.scb-curve-V { stroke: var(--scb-v); }
.scb-curve-M { stroke: var(--scb-m); }
.scb-curve-shape { stroke: var(--scb-shape); stroke-width: 2.4; }
.scb-fill { stroke: none; }
.scb-fill-V { fill: var(--scb-v-fill); }
.scb-fill-M { fill: var(--scb-m-fill); }
.scb-extreme { fill: var(--scb-ink); }
.scb-extreme-text { font-weight: 600; }
.scb-stale { opacity: 0.35; }
/* The shared crosshair over the diagrams: the returned sample nearest the pointer. */
.scb-cross { pointer-events: none; }
.scb-cross-line { stroke: var(--scb-ink); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.7; }
.scb-cross-dot { fill: var(--scb-bg); stroke: var(--scb-ink); stroke-width: 1.6; }
.scb-cross-text { font-weight: 600; paint-order: stroke; stroke: var(--scb-bg); stroke-width: 3px; stroke-linejoin: round; }
.scb-cross-at { fill: var(--scb-muted); }
.scb-status-text { fill: #9a3412; font-weight: 600; }
.scb-status-bad { color: #9a3412; font-weight: 600; }
/* The popover: anchored to what it edits. */
.scb-pop { position: absolute; z-index: 5; background: var(--scb-bg); border: 1px solid var(--scb-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.scb-pop[hidden] { display: none; }
.scb-pop-head { display: flex; justify-content: space-between; align-items: center; }
.scb-pop-sub { font-size: 12px; color: var(--scb-muted); }
.scb-pop-msg { color: #9a3412; font-weight: 600; font-size: 12.5px; }
.scb-pop-msg:empty { display: none; }
/* A hint (data-tone="info") is grey; only a refusal (data-tone="error") stays red. */
.scb-msg[data-tone="info"], .scb-pop-msg[data-tone="info"] { color: var(--scb-muted); font-weight: 400; }
.scb-pair { display: flex; gap: 8px; }
.scb-pair .scb-field { flex: 1 1 0; min-width: 0; }
.scb-x { font: inherit; font-size: 18px; line-height: 1; border: 0; background: none; cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; color: var(--scb-ink); }
.scb-types { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.scb-type.scb-on { background: var(--scb-item); border-color: var(--scb-item); color: #fff; }
.scb-wide { width: 100%; text-align: left; }
.scb-danger { color: #9b1c1c; border-color: #e5a5a5; }
.scb-danger:hover:not(:disabled) { border-color: #9b1c1c; }
.scb-warn { margin: 0 0 6px; padding: 5px 9px; border-radius: 6px; background: #fff4d6; color: #7c4a03; font-size: 13px; }
.scb-warn:empty { display: none; }
.scb-msg { color: #9a3412; font-weight: 600; margin-bottom: 6px; }
.scb-msg:empty { display: none; }
.scb-note { margin: 0; color: var(--scb-muted); font-size: 12px; }
.scb-field { display: flex; flex-direction: column; font-size: 12px; color: var(--scb-muted); gap: 2px; }
.scb-field input { font: inherit; font-size: 15px; color: var(--scb-ink); padding: 5px 7px; border: 1px solid var(--scb-line); border-radius: 5px; background: #fff; min-height: 36px; width: 100%; }
.scb-summary { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.scb-table { border-collapse: collapse; font-size: 13px; }
.scb-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.scb-table th, .scb-table td { border-bottom: 1px solid #e4e7eb; padding: 3px 8px; text-align: left; }
.scb-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Trial (the core's beam trial branch): the core tools' popover rows in the beam's look. */
.scb-pop .sca-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.scb-pop .sca-choice { font-size: 14px; padding: 6px 11px; white-space: normal; min-height: 34px; }
.scb-pop .sca-sub { font-size: 12px; font-weight: normal; color: var(--scb-muted); }
/* The node menu in the popover (core .sca-menu): the popover is already the card. */
.scb-pop .sca-menu { border: 0; box-shadow: none; padding: 0; min-width: 0; }
/* A point load's angle, locked: the workbook takes vertical point loads only. */
.scb-pop .sca-field input[readonly] { background: #f1f4f8; color: var(--scb-muted); }
/* The elevated-deck canvas (DESIGN §30.3). It builds on the .scw styles of structural-canvas.css. */
.scd-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid #d5dce3; background: #f7f9fb; }
.scd-row[hidden] { display: none; }
.scd-tools { display: inline-flex; flex-wrap: wrap; border: 1px solid #a9b4bf; border-radius: 5px; overflow: hidden; }
.scd-toolbtn { border: 0; border-right: 1px solid #a9b4bf; border-radius: 0; }
.scd-toolbtn:last-child { border-right: 0; }
.scd-toolbtn.scw-on { background: #1a5fb4; color: #fff; font-weight: 600; }
.scd-row select { font: inherit; min-height: 30px; }
.scw-svg.scd-drawing { cursor: crosshair; }
.scd-gridline { stroke: #9aa7b4; stroke-width: 1; stroke-dasharray: 2 4; }
.scd-deck { cursor: pointer; outline: none; }
.scd-deck-shape { stroke: #56636f; stroke-width: 1.5; }
.scd-deck:hover .scd-deck-shape, .scd-deck:focus-visible .scd-deck-shape { stroke: #1a5fb4; stroke-width: 2.5; }
.scd-deck.scd-on .scd-deck-shape, .scd-deck.scd-on .scd-deckbar { stroke: #ff6a00; stroke-width: 3; }
.scd-deck-other { fill: none; stroke: #a9b4bf; stroke-width: 1; stroke-dasharray: 6 4; pointer-events: none; }
.scd-deckbar { stroke: #56636f; stroke-width: 1; }
.scd-open { cursor: pointer; outline: none; }
.scd-open-shape { fill: #ffffff; stroke: #1d2733; stroke-width: 1.5; stroke-dasharray: 5 3; }
.scd-open.scd-on .scd-open-shape { stroke: #ff6a00; stroke-width: 3; }
.scd-open:focus-visible .scd-open-shape { stroke-width: 3; }
.scd-stair { cursor: grab; outline: none; touch-action: none; }
.scd-stair.scd-faint { opacity: 0.35; pointer-events: none; cursor: default; }
.scd-flight { fill: #f3e9d4; stroke: #5a4a2a; stroke-width: 1.5; }
.scd-landing { fill: #e9dcc0; stroke: #5a4a2a; stroke-width: 1.5; }
.scd-tread { stroke: #8a7a5a; stroke-width: 1; }
.scd-walk { fill: none; stroke: #5a4a2a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.scd-up { font-weight: 700; fill: #5a4a2a; }
.scd-stair.scd-on .scd-flight, .scd-stair.scd-on .scd-landing, .scd-stair.scd-on .scd-stair-end { stroke: #ff6a00; stroke-width: 3; }
.scd-stair:focus-visible .scd-flight { stroke-width: 3; }
.scd-stringer { stroke: #5a4a2a; stroke-width: 4; stroke-linecap: round; }
/* Rule 23: every stringer on Plan (parallel lines across the width), "×N" on a flight seen from the side. */
.scd-stringer-plan { stroke: #5a4a2a; stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.scd-stair.scd-on .scd-stringer-plan { stroke: #ff6a00; }
.scd-stringer-count { font-weight: 700; fill: #5a4a2a; }
.scd-seg { display: flex; margin-top: 4px; border: 1px solid #a9b4bf; border-radius: 4px; overflow: hidden; }
.scd-seg .scw-btn { flex: 1; border: 0; border-right: 1px solid #a9b4bf; border-radius: 0; min-height: 32px; }
.scd-seg .scw-btn:last-child { border-right: 0; }
.scd-seg .scw-btn.scw-on { background: #1a5fb4; color: #fff; font-weight: 600; }
.scd-seg .scw-btn:focus-visible { outline: 2px solid #1a5fb4; outline-offset: -2px; }
.scd-landing-line { stroke: #5a4a2a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 0; }
.scd-stair.scd-on .scd-stringer, .scd-stair.scd-on .scd-landing-line { stroke: #ff6a00; }
.scd-stair-end { fill: #f3e9d4; stroke: #5a4a2a; stroke-width: 1; }
.scd-guard { cursor: pointer; outline: none; }
.scd-guard-hit { fill: none; stroke: transparent; stroke-width: 14; }
.scd-guard-line { fill: none; stroke: #d0469a; stroke-width: 3.5; stroke-linejoin: round; }
.scd-guard-line.scd-thin { stroke-width: 2; }
.scd-guard:hover .scd-guard-line, .scd-guard:focus-visible .scd-guard-line { stroke-width: 5; }
.scd-guard.scd-on .scd-guard-line { stroke: #ff6a00; stroke-width: 5; }
.scd-edgelen { fill: #3b4855; }
.scd-draft { fill: rgba(26, 95, 180, 0.08); stroke: #1a5fb4; stroke-width: 2; stroke-dasharray: 6 3; pointer-events: none; }
.scd-draft-rail { fill: none; stroke: #d0469a; }
.scd-draft-member { fill: none; stroke: #b85c00; }
.scd-draft-pt { fill: #1a5fb4; stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.scd-draft-pt.scd-first { fill: #fff; stroke: #1a5fb4; stroke-width: 2.5; }
.scd-small .scw-knob { stroke-width: 2; }
.scd-key-deck .scw-swatch { border: 1px solid #56636f; }
/* The core Section bar (DESIGN §26.4) floats where the deck's own bar was (top right), in the band a
   desktop plan keeps for it, with the deck's "Leave out" and menu inside; the core legend sits above the
   deck's own keys. */
.scd-seldock { position: absolute; z-index: 4; top: 6px; right: 8px; max-width: calc(100% - 16px); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.scd-seldock > * { pointer-events: auto; }
/* Desktop: the bar keeps to one line; a selection of two or more types has one "Use for every… ▾" menu
   instead of the core's per-type buttons (hidden while the bar has data-multi). */
.scd-seldock .scs-selbar { flex-wrap: nowrap; }
.scd-seldock .scs-selbar-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scd-seldock .scs-selbar > * { flex-shrink: 0; }
.scd-seldock .scs-selbar > .scs-selbar-what { flex-shrink: 1; }
.scs-selbar[data-multi] [data-key^="selbar:type:"] { display: none; }
.scd-every { position: relative; display: inline-flex; }
.scd-every-btn { white-space: nowrap; }
.scd-every-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; display: flex; flex-direction: column; min-width: 13em; padding: 4px; background: #fff; border: 1px solid #a9b4bf; border-radius: 6px; box-shadow: 0 4px 14px rgba(17, 27, 38, 0.22); }
.scd-every-menu[hidden] { display: none; }
.scd-every-item { font: inherit; font-size: 13px; text-align: left; white-space: nowrap; border: 0; border-radius: 4px; background: transparent; padding: 6px 10px; min-height: 32px; cursor: pointer; }
.scd-every-item:hover, .scd-every-item:focus-visible, .scd-every-item:focus { background: #eef5fd; outline: 2px solid #1a5fb4; outline-offset: -2px; }
/* Phones: the bar sits under the drawing, in the flow, never over it (Coordination, 2026-11-06). */
@media (max-width: 560px) {
  .scd-seldock { position: static; max-width: none; align-items: stretch; padding: 6px 8px 0; }
  .scd-seldock .scs-selbar { flex-wrap: wrap; width: auto; }
  .scd-seldock .scs-selbar-what { white-space: normal; }
  .scd-every-menu { right: auto; left: 0; }
}
.scd-legends .scw-legend.scd-legend-more { border-top: 0; padding-top: 0; }
.scd-legends .scw-legend[hidden] { display: none; }
/* Perimeter bays on Front and Side (Ugur: "How do I add bracing to newly added bays"): a click braces or
   unbraces one; the pointer and a light tint say so; Ctrl+Click picks it (orange). */
.scd-bay { cursor: pointer; outline: none; }
.scd-bay-hit { fill: transparent; stroke: none; }
.scd-bay:hover .scd-bay-hit, .scd-bay:focus-visible .scd-bay-hit { fill: rgba(26, 95, 180, 0.08); stroke: #1a5fb4; stroke-dasharray: 4 3; }
.scd-bay.scd-bay-blocked { cursor: not-allowed; }
.scd-bay.scd-bay-blocked:hover .scd-bay-hit { fill: rgba(86, 99, 111, 0.08); stroke: #56636f; }
.scd-bay.scd-bay-picked .scd-bay-hit { fill: rgba(255, 106, 0, 0.12); stroke: #ff6a00; stroke-dasharray: none; }
.scd-baybar[hidden] { display: none; }
/* StructuralCanvas 2D frame editor (DESIGN §27). Colours are custom properties, so a host can theme them.
   Geometry is edited on the drawing; exact values live in popovers anchored to what they edit. */
.scf {
  --scf-ink: #1f2933; --scf-muted: #52606d; --scf-line: #9aa5b1; --scf-bg: #ffffff;
  --scf-member: #323f4b; --scf-item: #1f5fbf; --scf-wind: #0e7490; --scf-sel: #ff6a00; --scf-hot: #16a34a;
  --scf-react: #0f7b4a; --scf-N: #b45309; --scf-N-fill: rgba(180, 83, 9, 0.16); --scf-V: #1f5fbf; --scf-V-fill: rgba(31, 95, 191, 0.16);
  --scf-M: #7c3aed; --scf-M-fill: rgba(124, 58, 237, 0.16); --scf-shape: #b91c1c; --scf-focus: #f59e0b; --scf-pill: #eef2f7;
  color: var(--scf-ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.scf *, .scf *::before, .scf *::after { box-sizing: border-box; }
.scf-main { min-width: 0; }
.scf-toolbar, .scf-results-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.scf-results-bar { padding: 5px 8px; background: #f5f7fa; border: 1px solid #e4e7eb; border-radius: 8px; }
.scf-results-title { font-weight: 600; font-size: 13px; color: var(--scf-muted); }
.scf-seg { display: inline-flex; gap: 0; }
.scf-seg .scf-btn { border-radius: 0; margin-left: -1px; }
.scf-seg .scf-btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.scf-seg .scf-btn:last-child { border-radius: 0 6px 6px 0; }
.scf-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--scf-muted); }
.scf-tool select { font: inherit; font-size: 14px; color: var(--scf-ink); padding: 5px 6px; border: 1px solid var(--scf-line); border-radius: 5px; background: #fff; min-height: 34px; }
.scf-tool[hidden] { display: none; }
.scf-hint { color: var(--scf-muted); font-size: 13px; margin-left: 4px; flex: 1 1 240px; }
.scf-help { margin: 0 0 6px; padding: 6px 10px; border-radius: 6px; background: #eef4fd; color: #1e3a8a; font-size: 13px; }
.scf-btn { font: inherit; padding: 6px 11px; border: 1px solid var(--scf-line); border-radius: 6px; background: var(--scf-bg); color: var(--scf-ink); cursor: pointer; min-height: 34px; }
.scf-btn:hover:not(:disabled) { border-color: var(--scf-item); }
.scf-btn:disabled { opacity: 0.45; cursor: default; }
.scf-btn.scf-on, .scf-choice.scf-on { background: var(--scf-item); border-color: var(--scf-item); color: #fff; }
.scf-btn:focus-visible, .scf input:focus-visible, .scf select:focus-visible, .scf-x:focus-visible { outline: 3px solid var(--scf-focus); outline-offset: 1px; }
.scf-small { min-height: 28px; padding: 2px 8px; font-size: 12.5px; }
.scf-stage { position: relative; background: var(--scf-bg); border: 1px solid #d9e2ec; border-radius: 8px; }
.scf-svg { display: block; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
/* Drawn dimensions and results take no clicks: a click there is a click on the frame or on empty space. */
.scf-dims, .scf-result, .scf-shape-note, .scf-series-note, .scf-status, .scf-drag-text { pointer-events: none; }
.scf-bg { fill: transparent; }
.scf-hit { fill: transparent; stroke: none; cursor: pointer; }
.scf-hit-line { stroke: transparent; stroke-width: 18; stroke-linecap: round; cursor: pointer; }
.scf-svg [tabindex] { outline: none; }
.scf-member { cursor: pointer; }
.scf-member-hit { stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.scf-member-line { stroke: var(--scf-member); stroke-width: 5; stroke-linecap: round; }
.scf-type-column .scf-member-line { stroke: #3e4c59; }
.scf-type-rafter .scf-member-line, .scf-type-beam .scf-member-line { stroke: #1f2933; }
.scf-type-brace .scf-member-line { stroke-width: 3; stroke-dasharray: 8 4; }
.scf-nosec .scf-member-line { stroke: #9aa5b1; stroke-dasharray: 6 4; }
.scf-member.scf-sel .scf-member-line { stroke: var(--scf-sel); }
.scf-member.scf-hot .scf-member-line { stroke: var(--scf-hot); }
/* The host's selection (the core assignment tools): the core's selected colour (#ff6a00, as in the legend),
   the same as a member, node or load picked on the drawing. Green (--scf-hot) is only an assignment in progress. */
.scf-member.scf-picked .scf-member-line { stroke: var(--scf-sel); }
.scf-member:focus-visible .scf-member-hit { stroke: rgba(245, 158, 11, 0.45); }
.scf-node { cursor: grab; touch-action: none; }
.scf-node-hit { fill: transparent; }
.scf-node:focus-visible .scf-node-hit { fill: none; stroke: var(--scf-focus); stroke-width: 2.5; stroke-dasharray: 4 3; }
.scf-joint { fill: var(--scf-member); stroke: #fff; stroke-width: 1.2; }
.scf-node-dot { fill: #fff; stroke: var(--scf-member); stroke-width: 2; }
.scf-node.scf-sel .scf-joint, .scf-node.scf-sel .scf-node-dot { fill: var(--scf-sel); stroke: #fff; }
.scf-loose .scf-node-dot { stroke: var(--scf-sel); stroke-dasharray: 2 2; }
.scf-support { cursor: pointer; }
.scf-sym-fill { fill: #e4e7eb; stroke: var(--scf-member); stroke-width: 1.5; }
.scf-fixed { fill: #cbd2d9; }
.scf-support:hover .scf-sym-fill { stroke: var(--scf-item); }
.scf-ground { stroke: var(--scf-member); stroke-width: 1.6; }
.scf-hatch { stroke: var(--scf-muted); stroke-width: 1; }
.scf-label { font-size: 12px; fill: var(--scf-ink); paint-order: stroke; stroke: var(--scf-bg); stroke-width: 3px; stroke-linejoin: round; }
.scf-value { font-weight: 600; fill: var(--scf-item); }
.scf-item { cursor: pointer; }
.scf-dist-arrow line, .scf-point-arrow line { stroke: var(--scf-item); stroke-width: 1.4; }
.scf-point-arrow line { stroke-width: 2.4; }
.scf-dist-arrow polygon, .scf-point-arrow polygon { fill: var(--scf-item); }
.scf-dist-line { fill: none; stroke: var(--scf-item); stroke-width: 1.2; }
.scf-wind .scf-dist-arrow line, .scf-wind .scf-dist-line { stroke: var(--scf-wind); }
.scf-wind .scf-dist-arrow polygon { fill: var(--scf-wind); }
.scf-wind .scf-value { fill: var(--scf-wind); }
.scf-couple path { fill: none; stroke: var(--scf-item); stroke-width: 2.2; }
.scf-couple polygon { fill: var(--scf-item); }
.scf-item.scf-sel line, .scf-item.scf-sel .scf-dist-line { stroke: var(--scf-sel); }
.scf-item.scf-sel polygon { fill: var(--scf-sel); }
.scf-dim line { stroke: var(--scf-muted); stroke-width: 1; }
.scf-pill { fill: var(--scf-pill); stroke: #cbd2d9; stroke-width: 1; }
.scf-pill-text { font-size: 11.5px; font-weight: 600; fill: var(--scf-muted); stroke: none; }
.scf-preview { stroke: var(--scf-sel); stroke-width: 2.5; stroke-dasharray: 6 4; }
.scf-preview-dot { fill: none; stroke: var(--scf-sel); stroke-width: 2; }
.scf-drag-text { font-weight: 600; fill: var(--scf-sel); }
.scf-diagram-fill { stroke: none; }
.scf-diagram-curve { fill: none; stroke-width: 2; stroke-linejoin: round; }
.scf-diagram-N .scf-diagram-fill { fill: var(--scf-N-fill); } .scf-diagram-N .scf-diagram-curve { stroke: var(--scf-N); }
.scf-diagram-V .scf-diagram-fill { fill: var(--scf-V-fill); } .scf-diagram-V .scf-diagram-curve { stroke: var(--scf-V); }
.scf-diagram-M .scf-diagram-fill { fill: var(--scf-M-fill); } .scf-diagram-M .scf-diagram-curve { stroke: var(--scf-M); }
.scf-diagram-dot { fill: var(--scf-ink); }
.scf-diagram-text { font-size: 11.5px; font-weight: 600; }
/* A result label moved more than 24 px from its point: a leader like the action leaders, in its diagram's colour. */
.scf-result-leader { fill: none; stroke-width: 1; stroke-dasharray: 2 2; stroke: var(--scf-ink); }
.scf-diagram-N .scf-result-leader { stroke: var(--scf-N); } .scf-diagram-V .scf-result-leader { stroke: var(--scf-V); }
.scf-diagram-M .scf-result-leader { stroke: var(--scf-M); } .scf-drift .scf-result-leader { stroke: var(--scf-shape); }
.scf-shape-line { fill: none; stroke: var(--scf-shape); stroke-width: 2.2; stroke-dasharray: 7 4; }
.scf-shape-node { fill: var(--scf-shape); }
.scf-shape-note, .scf-series-note { font-weight: 600; fill: var(--scf-muted); }
.scf-react-arrow line { stroke: var(--scf-react); stroke-width: 2.4; }
.scf-react-arrow polygon { fill: var(--scf-react); }
.scf-react-couple path { fill: none; stroke: var(--scf-react); stroke-width: 2.2; }
.scf-react-couple polygon { fill: var(--scf-react); }
.scf-react-text { fill: var(--scf-react); font-weight: 600; }
.scf-drift-arrow line { stroke: var(--scf-shape); stroke-width: 2; }
.scf-drift-arrow polygon { fill: var(--scf-shape); }
.scf-drift-text { fill: var(--scf-shape); font-weight: 600; }
.scf-stale { opacity: 0.35; }
.scf-cross { pointer-events: none; }
.scf-cross-line { stroke: var(--scf-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.scf-cross-dot { fill: var(--scf-bg); stroke: var(--scf-ink); stroke-width: 1.8; }
.scf-cross-text { font-weight: 600; }
.scf-cross-at { fill: var(--scf-muted); }
.scf-status-text { fill: #9a3412; font-weight: 600; }
.scf-status-bad { color: #9a3412; font-weight: 600; }
.scf-pop { position: absolute; z-index: 5; background: var(--scf-bg); border: 1px solid var(--scf-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; max-height: 72vh; overflow-y: auto; }
.scf-pop[hidden] { display: none; }
/* A long popover scrolls; its rows never shrink into each other. */
.scf-pop > * { flex-shrink: 0; }
/* The core tools' direction rows: long names (Normal, toward the member's left side) wrap. */
.scf-pop .sca-choice { white-space: normal; font-size: 12.5px; line-height: 1.2; }
.scf-pop-head { display: flex; justify-content: space-between; align-items: center; }
.scf-pop-sub { font-size: 12px; color: var(--scf-muted); font-weight: 600; margin-top: 2px; }
.scf-pop-msg { color: #9a3412; font-weight: 600; font-size: 12.5px; }
.scf-pop-msg:empty { display: none; }
.scf-pair { display: flex; gap: 8px; }
.scf-pair > * { flex: 1 1 0; min-width: 0; }
.scf-block { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid #e4e7eb; border-radius: 6px; }
.scf-block-wind { border-color: #a5d8e2; background: #f0fafc; }
.scf-x { font: inherit; font-size: 18px; line-height: 1; border: 0; background: none; cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; color: var(--scf-ink); }
.scf-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.scf-choice { flex: 1 1 0; min-width: 0; padding: 5px 3px; font-size: 12px; white-space: nowrap; }
/* Five directions wrap onto two rows (three and two). */
.scf-choices[aria-label] .scf-choice[data-dir] { flex: 1 1 30%; }
.scf-wide { width: 100%; text-align: left; }
.scf-danger { color: #9b1c1c; border-color: #e5a5a5; }
.scf-danger:hover:not(:disabled) { border-color: #9b1c1c; }
.scf-warn { margin: 0 0 6px; padding: 5px 9px; border-radius: 6px; background: #fff4d6; color: #7c4a03; font-size: 13px; }
.scf-warn:empty { display: none; }
.scf-msg { color: #9a3412; font-weight: 600; margin-bottom: 6px; }
.scf-msg:empty { display: none; }
/* A hint (data-tone="info") is grey; only a refusal (data-tone="error") stays red. The rack uses these too. */
.scf-msg[data-tone="info"], .scf-pop-msg[data-tone="info"] { color: var(--scf-muted); font-weight: 400; }
.scf-note { margin: 0; color: var(--scf-muted); font-size: 12px; }
.scf-field { display: flex; flex-direction: column; font-size: 12px; color: var(--scf-muted); gap: 2px; }
.scf-field input, .scf-field select { font: inherit; font-size: 15px; color: var(--scf-ink); padding: 5px 7px; border: 1px solid var(--scf-line); border-radius: 5px; background: #fff; min-height: 36px; width: 100%; }
.scf-summary { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.scf-table { border-collapse: collapse; font-size: 13px; }
.scf-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.scf-table th, .scf-table td { border-bottom: 1px solid #e4e7eb; padding: 3px 8px; text-align: left; }
.scf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A results table scrolls sideways in its own box; the page never does (DESIGN §27.9). */
.scf-table-box { position: relative; max-width: 100%; min-width: 0; }
.scf-table-scroll { overflow-x: auto; max-width: 100%; }
.scf-more-hint { margin-top: 2px; font-size: 12px; color: var(--scf-muted); }
@media (max-width: 560px) {
  .scf-summary { display: block; }
  .scf-table-box { margin-bottom: 10px; }
  .scf-table-box[data-more="right"]::after, .scf-table-box[data-more="both"]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 18px; width: 22px; pointer-events: none; background: linear-gradient(to left, rgba(31, 41, 51, 0.22), rgba(31, 41, 51, 0)); }
  .scf-table-box[data-more="left"]::before, .scf-table-box[data-more="both"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 18px; width: 22px; pointer-events: none; z-index: 1; background: linear-gradient(to right, rgba(31, 41, 51, 0.22), rgba(31, 41, 51, 0)); }
}
/* A 64-character section name has no place to break: the editor's message lines may break it anywhere
   rather than widen the page (the rack uses these too). Tables keep their numbers whole. */
.scf-hint, .scf-msg, .scf-note { overflow-wrap: anywhere; min-width: 0; }
/* StructuralCanvas pipe rack mode (DESIGN §28). It sits on the frame mode's styles (structural-canvas-frame.css,
   the .scf classes) and adds the plan, the side elevation, the handles, the section legend and the 3D frame. */
.rk { --rk-bay: rgba(31, 95, 191, 0.04); --rk-braced: rgba(183, 121, 31, 0.13); --rk-typical: #c2410c; --rk-handle: #1f5fbf; }
.rk-tabs { margin-right: 4px; }
.rk-tab[aria-selected="true"] { background: var(--scf-item); border-color: var(--scf-item); color: #fff; }
.rk-lines .scf-choice { flex: 0 0 auto; padding: 6px 10px; font-size: 13px; }
.rk-lines[hidden], .rk [hidden] { display: none !important; }
.rk > .scf-main > .scf-hint { display: block; margin: 0 0 4px; }
.rk-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12.5px; color: var(--scf-muted); margin: 0 0 6px; }
.rk-legend-title { font-weight: 600; }
.rk-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rk-swatch { display: inline-block; width: 14px; height: 6px; border-radius: 2px; }
.rk-body { display: flex; gap: 12px; align-items: flex-start; }
/* The drawing never widens the page: until the editor re-measures (a rotation, a narrower window) the SVG
   scales down inside its stage instead of pushing the layout out. */
.rk-svg { max-width: 100%; height: auto; }
.rk-stage { overflow-x: clip; }
.rk-draw { flex: 1 1 auto; min-width: 0; }
.rk-tiers { flex: 0 0 auto; max-width: 380px; min-width: 0; }
.rk-tier-table td { white-space: nowrap; }
.rk-tiers[hidden] { display: none; }
.rk-tier-table caption.rk-note { caption-side: bottom; font-weight: 400; font-size: 11.5px; color: var(--scf-muted); padding-top: 4px; max-width: 320px; }
.rk-item { cursor: pointer; }
.rk-item:focus-visible, .rk-item.rk-focus { outline: none; }
.rk-item.rk-focus .rk-bay, .rk-item:focus-visible .rk-bay { stroke: var(--scf-focus); stroke-width: 2; stroke-dasharray: 5 3; }
.rk-item.rk-focus .rk-pill, .rk-item:focus-visible .rk-pill { stroke: var(--scf-focus); stroke-width: 2; }
.rk-bay { fill: var(--rk-bay); stroke: none; }
.rk-bay.rk-braced { fill: var(--rk-braced); }
.rk-bay-text { font-size: 11.5px; fill: var(--scf-muted); }
.rk-hit-line { stroke: transparent; stroke-width: 20; stroke-linecap: round; }
.rk-bent-line { stroke: var(--scf-member); stroke-width: 5; stroke-linecap: round; }
.rk-bent-line.rk-typical { stroke-width: 8; }
.rk-is-typical .rk-hit-line { stroke: rgba(194, 65, 12, 0.14); stroke-width: 22; }
.rk-item.rk-focus .rk-hit-line, .rk-item:focus-visible .rk-hit-line { stroke: rgba(245, 158, 11, 0.4); }
.rk-sel, .rk-bent-line.rk-sel, .rk-mline.rk-sel { stroke: var(--scf-sel) !important; }
.rk-col.rk-sel { fill: var(--scf-sel) !important; }
/* Members that already use the section being assigned: their own colour, drawn wider with a halo. */
.rk-hot { stroke-width: 7 !important; filter: drop-shadow(0 0 2.5px rgba(22, 163, 74, 0.95)); }
.rk-bent-no { font-weight: 700; fill: var(--scf-muted); }
.rk-typical-text { fill: var(--rk-typical); }
.rk-col { stroke: #fff; stroke-width: 1.2; }
.rk-pmember { cursor: pointer; }
.rk-mline { stroke: var(--scf-member); stroke-width: 4; stroke-linecap: round; }
.rk-strut .rk-mline { stroke-width: 3; }
.rk-brace .rk-mline, .rk-t-brace { stroke-width: 2.4 !important; }
.rk-t-column { stroke-width: 5; }
.rk-line-name { font-weight: 700; fill: var(--scf-muted); }
.rk-handle-box { fill: #fff; stroke: var(--rk-handle); stroke-width: 1.6; }
.rk-handle-glyph { font-size: 13px; font-weight: 700; fill: var(--rk-handle); stroke: none; }
.rk-handle { cursor: grab; touch-action: none; }
.rk-handle.rk-focus .rk-handle-box, .rk-handle:focus-visible .rk-handle-box { stroke: var(--scf-focus); stroke-width: 2.5; }
.rk-dimitem { cursor: pointer; }
.rk-dimitem .rk-pill { fill: #e6eefb; stroke: #9fb6dc; }
.rk-dimitem:hover .rk-pill { stroke: var(--scf-item); }
.rk-title { font-weight: 700; fill: var(--scf-muted); }
.rk-tier-tag { font-size: 11.5px; font-weight: 600; fill: var(--scf-muted); }
.rk-base { fill: #cbd2d9; }
.rk-svg .scf-member .scf-member-line { stroke-width: 5; }
.rk-svg .scf-node { cursor: default; }
/* A base node's mark is its support symbol (pinned or fixed), never a round joint that reads as a pin. */
.rk-svg .scf-node[data-base] { display: none; }
/* Touch: every view has vertical and horizontal drags (tiers, the column top, the width, bents), and
   touch-action on an SVG child is ignored by browsers, so the drawing itself takes the gestures. The
   page scrolls from outside the drawing. */
.rk-svg { touch-action: none; }
.rk-svg .scf-member { cursor: grab; }
.rk-tier-name { cursor: pointer; }
.rk-drag-live { font-weight: 700; }
.rk-svg .scf-member.rk-focus .scf-member-hit { stroke: rgba(245, 158, 11, 0.45); }
.rk-3d-wrap { border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; padding: 6px; }
.rk-3d { position: relative; height: 520px; border-radius: 6px; overflow: hidden; touch-action: none; }
.rk-3d-info { font-size: 13px; padding: 6px 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rk-3d-tools { margin-bottom: 4px; }
.scf-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
@media (max-width: 900px) {
  .rk-body { flex-direction: column; }
  .rk-tiers { max-width: none; width: 100%; }
}
@media (max-width: 560px) {
  .rk-3d { height: 380px; }
  .rk-tab { padding: 6px 8px; }
}
/* StructuralCanvas base plate detail editor (S3U-39). Colours are custom properties, so a host can
   theme them. Geometry is edited on the drawing; results are drawn from what the workbook returned. */
.scp {
  --scp-ink: #1f2933; --scp-muted: #52606d; --scp-line: #9aa5b1; --scp-bg: #ffffff;
  --scp-plate: #c9d3df; --scp-plate-edge: #3e4c59; --scp-ped: #eceae4; --scp-ped-edge: #8d8a80;
  --scp-col: #1f5fbf; --scp-col-fill: rgba(31, 95, 191, 0.22); --scp-rod: #323f4b; --scp-sel: #c2410c;
  --scp-tension: #b91c1c; --scp-calm: #7b8794; --scp-focus: #f59e0b; --scp-low: #b45309;
  color: var(--scp-ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.scp *, .scp *::before, .scp *::after { box-sizing: border-box; }
.scp-main { min-width: 0; }
.scp-toolbar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.scp-group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.scp-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--scp-muted); }
.scp-tool-label { font-size: 13px; color: var(--scp-muted); }
.scp-tool select { font: inherit; font-size: 14px; color: var(--scp-ink); padding: 5px 6px; border: 1px solid var(--scp-line); border-radius: 5px; background: #fff; min-height: 34px; }
.scp-btn { font: inherit; padding: 6px 11px; border: 1px solid var(--scp-line); border-radius: 6px; background: var(--scp-bg); color: var(--scp-ink); cursor: pointer; min-height: 34px; }
.scp-btn:hover:not(:disabled) { border-color: var(--scp-col); }
.scp-btn:disabled { opacity: 0.45; cursor: default; }
.scp-btn.scp-on { background: var(--scp-col); border-color: var(--scp-col); color: #fff; }
.scp-small { padding: 3px 8px; min-height: 28px; font-size: 12.5px; }
/* The rods match no pattern: a pressed-looking label beside the pattern buttons. */
.scp-pattern-state { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 11px; border-radius: 6px; background: var(--scp-col); border: 1px solid var(--scp-col); color: #fff; font-weight: 600; }
.scp-pattern-state[hidden] { display: none; }
.scp-primary { border-color: var(--scp-col); color: var(--scp-col); font-weight: 600; }
.scp-btn:focus-visible, .scp input:focus-visible, .scp select:focus-visible, .scp-x:focus-visible { outline: 3px solid var(--scp-focus); outline-offset: 1px; }
.scp-help { margin: 0 0 6px; padding: 6px 10px; border-radius: 6px; background: #eef4fd; color: #1e3a6b; font-size: 13px; }
.scp-warn { margin: 0 0 6px; padding: 5px 9px; border-radius: 6px; background: #fff4d6; color: #7c4a03; font-size: 13px; }
.scp-warn:empty { display: none; }
.scp-msg { color: #9a3412; font-weight: 600; margin-bottom: 6px; }
.scp-msg:empty { display: none; }
/* A hint (data-tone="info") is grey; only a refusal (data-tone="error") stays red. */
.scp-msg[data-tone="info"], .scp-pop-msg[data-tone="info"] { color: var(--scp-muted); font-weight: 400; }
/* overflow stays visible: a popover may reach below a short drawing. */
.scp-stage { position: relative; }
.scp-views { display: flex; flex-direction: column; gap: 10px; }
/* Side by side (hosted CI, PR #3): the editor sizes each drawing to (stage - 14) / 2 (paneWidth), so the
   two panes take equal halves whatever their heads say (flex-basis 0, never their content's width: the
   plan's long title is wider in some fonts, and an auto basis then gave the plan pane more than half and
   pushed the elevation's fixed-width drawing past the stage). A 10 px gap plus each pane's 1 px borders
   make the 14 px, so each drawing fits its pane exactly. */
.scp-views.scp-side { flex-direction: row; gap: 10px; align-items: flex-start; }
.scp-views.scp-side > .scp-pane { flex: 1 1 0; }
.scp-pane { background: var(--scp-bg); border: 1px solid #d9e2ec; border-radius: 8px; min-width: 0; }
.scp-pane-head h3 { overflow-wrap: anywhere; }
.scp-pane[hidden] { display: none; }
.scp-pane-head { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; padding: 6px 8px 0; }
.scp-pane-head h3 { margin: 0; font-size: 13.5px; }
.scp-svg { display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scp-svg [tabindex] { outline: none; }
.scp-hit { fill: transparent; stroke: none; cursor: pointer; }
.scp-item { cursor: grab; touch-action: none; }
.scp-label { font-size: 11.5px; fill: var(--scp-ink); }
/* Plan */
.scp-ped-rect { fill: var(--scp-ped); stroke: var(--scp-ped-edge); stroke-width: 1.4; stroke-dasharray: 6 4; cursor: pointer; }
.scp-plate-rect { fill: var(--scp-plate); stroke: var(--scp-plate-edge); stroke-width: 2; cursor: copy; }
.scp-sel .scp-plate-rect, .scp-sel .scp-ped-rect { stroke: var(--scp-sel); }
.scp-plate:focus-visible .scp-plate-rect, .scp-ped:focus-visible .scp-ped-rect, .scp-item:focus-visible .scp-hit,
.scp-e-plate:focus-visible .scp-hit, .scp-e-grout:focus-visible .scp-hit, .scp-e-rodg:focus-visible .scp-hit, .scp-e-ped:focus-visible .scp-e-ped-rect, .scp-e-col:focus-visible .scp-e-col-rect { stroke: var(--scp-focus); stroke-width: 3; stroke-dasharray: 5 3; }
.scp-col-path { fill: var(--scp-col-fill); stroke: var(--scp-col); stroke-width: 1.6; fill-rule: evenodd; }
.scp-sel .scp-col-path { stroke: var(--scp-sel); fill: rgba(194, 65, 12, 0.18); }
.scp-col-mark { stroke: var(--scp-col); stroke-width: 1.2; }
.scp-col-name { font-size: 11px; fill: var(--scp-col); font-weight: 600; paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3px; }
.scp-col-ghost { fill: rgba(31, 95, 191, 0.08); stroke: var(--scp-col); stroke-dasharray: 4 3; }
.scp-rod-c { fill: #fff; stroke: var(--scp-rod); stroke-width: 2; }
.scp-rod-c.scp-rod-t { fill: #fde2e2; stroke: var(--scp-tension); stroke-width: 2.4; }
.scp-rod-c.scp-rod-n { stroke: var(--scp-calm); }
.scp-sel .scp-rod-c { stroke: var(--scp-sel); stroke-width: 3; }
.scp-rod-id { font-size: 10.5px; fill: var(--scp-muted); }
.scp-handle { fill: #fff; stroke-width: 2; touch-action: none; }
.scp-handle-plate { stroke: var(--scp-plate-edge); cursor: move; }
.scp-handle-ped { stroke: var(--scp-ped-edge); cursor: move; }
.scp-handle[data-part$="B"] { cursor: ew-resize; }
.scp-handle[data-part$="N"] { cursor: ns-resize; }
.scp-press, .scp-na, .scp-rodres, .scp-legend, .scp-e-press, .scp-ext, .scp-key { pointer-events: none; }
.scp-press rect { opacity: 0.86; }
.scp-na line { stroke: #111827; stroke-width: 1.6; stroke-dasharray: 8 4 2 4; }
.scp-na-text { font-weight: 700; }
.scp-rodres-text { font-size: 11px; font-weight: 600; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: 3px; stroke-linejoin: round; }
.scp-rodres-t .scp-rodres-text { fill: var(--scp-tension); }
.scp-rodres-n .scp-rodres-text { fill: var(--scp-calm); }
.scp-legend-title { font-size: 11px; fill: var(--scp-muted); }
.scp-key { font-size: 11px; fill: var(--scp-muted); }
/* Dimensions and pills */
.scp-dim-line { stroke: var(--scp-muted); stroke-width: 1; }
.scp-ext { stroke: #b8c2cc; stroke-width: 0.8; stroke-dasharray: 3 3; }
.scp-pill rect { fill: #fff; stroke: #9aa5b1; stroke-width: 1; }
.scp-pill-text { font-size: 11px; fill: var(--scp-ink); font-weight: 600; }
.scp-dim[data-hit] { cursor: pointer; }
.scp-dim[data-hit]:hover .scp-pill rect { stroke: var(--scp-col); }
.scp-dim-ped .scp-pill rect { fill: #f5f3ee; }
.scp-dim-edge .scp-pill rect { stroke: var(--scp-col); }
.scp-dim-low .scp-pill rect { fill: #fff4d6; stroke: var(--scp-low); stroke-width: 1.6; }
.scp-dim-low .scp-pill-text { fill: var(--scp-low); }
/* Elevation */
.scp-e-ped-rect { fill: var(--scp-ped); stroke: var(--scp-ped-edge); stroke-width: 1.4; cursor: pointer; }
.scp-break { fill: none; stroke: var(--scp-ped-edge); stroke-width: 1.2; }
.scp-e-grout-shape { fill: #d8d2c4; stroke: #8d8a80; stroke-width: 1; }
.scp-e-plate-rect { fill: #8a99a8; stroke: var(--scp-plate-edge); stroke-width: 1.4; }
.scp-e-col-rect { fill: var(--scp-col-fill); stroke: var(--scp-col); stroke-width: 1.4; }
.scp-e-col-wall { fill: rgba(31, 95, 191, 0.45); stroke: none; }
.scp-e-col-hidden { stroke: var(--scp-col); stroke-width: 1; stroke-dasharray: 4 3; }
.scp-sel .scp-e-col-rect { stroke: var(--scp-sel); }
.scp-e-rod { fill: #52606d; stroke: none; }
.scp-e-rod.scp-rod-t { fill: var(--scp-tension); }
.scp-e-washer, .scp-e-nut { fill: #323f4b; }
.scp-sel .scp-e-rod { fill: var(--scp-sel); }
.scp-rod-count { font-size: 10.5px; fill: var(--scp-muted); }
.scp-e-press-shape { fill: rgba(245, 158, 11, 0.35); stroke: #b45309; stroke-width: 1.4; }
.scp-e-press-arrow { stroke: #b45309; stroke-width: 1; }
.scp-e-press-text { font-weight: 700; fill: #92400e; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3px; }
.scp-stale { opacity: 0.35; }
/* The popover: anchored to what it edits. */
.scp-pop { position: absolute; z-index: 5; background: var(--scp-bg); border: 1px solid var(--scp-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.scp-pop[hidden] { display: none; }
.scp-pop-head { display: flex; justify-content: space-between; align-items: center; }
.scp-pop-sub { font-size: 12px; color: var(--scp-muted); }
.scp-pop-msg { color: #9a3412; font-weight: 600; font-size: 12.5px; }
.scp-pop-msg:empty { display: none; }
.scp-pair { display: flex; gap: 8px; }
.scp-pair .scp-field { flex: 1 1 0; min-width: 0; }
.scp-x { font: inherit; font-size: 18px; line-height: 1; border: 0; background: none; cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px; color: var(--scp-ink); }
.scp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.scp-wide { width: 100%; text-align: left; }
.scp-danger { color: #9b1c1c; border-color: #e5a5a5; }
.scp-note { margin: 0; color: var(--scp-muted); font-size: 12px; }
.scp-field { display: flex; flex-direction: column; font-size: 12px; color: var(--scp-muted); gap: 2px; }
.scp-field input, .scp-field select { font: inherit; font-size: 15px; color: var(--scp-ink); padding: 5px 7px; border: 1px solid var(--scp-line); border-radius: 5px; background: #fff; min-height: 36px; width: 100%; }
/* Results */
.scp-summary { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.scp-card { border: 1px solid #d9e2ec; border-radius: 8px; padding: 8px 12px; background: #fff; flex: 1 1 320px; min-width: 0; max-width: 560px; }
.scp-card-bad { border-color: #e5a5a5; background: #fff6f6; color: #9a3412; font-weight: 600; }
.scp-card-bad p { margin: 2px 0; }
.scp-card-head { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: space-between; align-items: baseline; }
.scp-status-ok { color: #0b5d38; font-weight: 600; font-size: 13px; }
.scp-status-check { color: #7c4a03; background: #fff4d6; border-radius: 6px; padding: 1px 6px; font-weight: 600; font-size: 13px; }
.scp-case { margin: 6px 0; font-size: 13.5px; font-weight: 600; }
.scp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.scp-tile { background: #f5f7fa; border-radius: 6px; padding: 6px 8px; }
.scp-tile-label { font-size: 12px; color: var(--scp-muted); font-weight: 500; }
.scp-tile-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scp-table { border-collapse: collapse; font-size: 13px; }
.scp-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.scp-table th, .scp-table td { border-bottom: 1px solid #e4e7eb; padding: 3px 7px; text-align: left; }
.scp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.scp-tr-t th, .scp-tr-t td { color: var(--scp-tension); }
/* The host's badge on every result (for example the review page's MOCK label). */
.scp-badge { display: inline-block; font-size: 11.5px; font-weight: 700; color: #7c4a03; background: #fff4d6; border: 1px dashed #b7791f; border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.scp-badge-svg rect { fill: #fff4d6; stroke: #b7791f; stroke-dasharray: 3 2; }
.scp-badge-svg text { font-size: 11px; font-weight: 700; fill: #7c4a03; }
@media (max-width: 600px) { .scp-table { font-size: 12px; } .scp-table th, .scp-table td { padding: 3px 4px; } }
/* StructuralCanvas cutting editor (DESIGN §29). Colours are custom properties, so a host can theme them. */
.scc, .scc-gridhost {
  --scc-ink: #1f2933; --scc-muted: #52606d; --scc-line: #9aa5b1; --scc-bg: #fff; --scc-item: #1f5fbf; --scc-focus: #f59e0b;
  --scc-stock: #cbd2d9; --scc-kerf: #111827; --scc-remnant: #0f7b4a; --scc-scrap: #b91c1c;
  color: var(--scc-ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.scc *, .scc *::before, .scc *::after { box-sizing: border-box; }
.scc-main { min-width: 0; }
.scc-toolbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.scc-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--scc-muted); }
.scc-tool select { font: inherit; font-size: 14px; padding: 5px 6px; border: 1px solid var(--scc-line); border-radius: 5px; background: #fff; min-height: 34px; color: var(--scc-ink); }
.scc-btn { font: inherit; padding: 6px 11px; border: 1px solid var(--scc-line); border-radius: 6px; background: var(--scc-bg); color: var(--scc-ink); cursor: pointer; min-height: 34px; }
.scc-btn:disabled { opacity: 0.45; cursor: default; }
.scc-btn:hover:not(:disabled) { border-color: var(--scc-item); }
.scc-small { padding: 2px 7px; min-height: 30px; min-width: 30px; }
.scc-btn:focus-visible, .scc input:focus-visible, .scc select:focus-visible, .scc-x:focus-visible, .scc-grid input:focus-visible { outline: 3px solid var(--scc-focus); outline-offset: 1px; }
.scc-coach { min-height: 2.4em; margin: 0 0 6px; padding: 6px 10px; border-radius: 6px; background: #eef4fd; color: #1e3a8a; font-size: 13px; border-left: 4px solid var(--scc-item); }
.scc-h { font-size: 14px; margin: 10px 0 4px; }
.scc-stage { position: relative; background: var(--scc-bg); border: 1px solid #d9e2ec; border-radius: 8px; }
.scc-svg { display: block; user-select: none; -webkit-user-select: none; }
.scc-tick { stroke: #eef1f5; stroke-width: 1; }
.scc-tick-text { font-size: 10.5px; fill: var(--scc-muted); }
.scc-row-label { font-size: 12px; font-weight: 600; fill: var(--scc-muted); }
.scc-sub { font-size: 12px; fill: var(--scc-muted); }
.scc-stock-bar { fill: var(--scc-stock); stroke: #7b8794; stroke-width: 1; }
.scc-live .scc-stock-bar { fill: #dbe7fb; stroke: var(--scc-item); }
.scc-len-pill { cursor: pointer; outline: none; }
.scc-len-text { font-size: 12px; font-weight: 600; fill: var(--scc-ink); }
.scc-len-pill:focus-visible .scc-len-text, .scc-len-pill:hover .scc-len-text { fill: var(--scc-item); text-decoration: underline; }
.scc-handle { fill: #fff; stroke: var(--scc-item); stroke-width: 2; cursor: ew-resize; touch-action: none; outline: none; }
.scc-handle:focus-visible { stroke: var(--scc-focus); stroke-width: 3; }
.scc-piece-text { font-size: 12px; fill: var(--scc-ink); }
.scc-pill rect { fill: #1f2933; } .scc-pill text { fill: #fff; font-size: 12px; font-weight: 600; }
.scc-msg { color: #9a3412; font-weight: 600; margin: 6px 0; }
.scc-msg:empty { display: none; }
/* A hint (data-tone="info") is grey; only a refusal (data-tone="error") stays red (as the other modes, §26.8). */
.scc-msg[data-tone="info"], .scc-pop-msg[data-tone="info"] { color: var(--scc-muted); font-weight: 400; }
.scc-plan-note { font-size: 13px; color: var(--scc-muted); margin: 2px 0 6px; }
.scc-plan-note.scc-warn { color: #7c4a03; background: #fff4d6; border-radius: 6px; padding: 5px 8px; font-weight: 600; }
.scc-plan-note.scc-bad { color: #9a3412; font-weight: 600; }
.scc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; margin: 0 0 4px; }
.scc-legend[hidden] { display: none; }
.scc-key { display: inline-flex; align-items: center; gap: 5px; }
.scc-sw { display: inline-block; width: 18px; height: 12px; border-radius: 2px; }
.scc-sw-kerf { background: var(--scc-kerf); width: 4px; }
.scc-sw-remnant { background: #e6f6ee; border: 1px solid var(--scc-remnant); }
.scc-sw-scrap { background: #fdecec; border: 1px dashed var(--scc-scrap); }
.scc-bar-bg { fill: #f5f7fa; }
.scc-bar-edge { fill: none; stroke: #52606d; stroke-width: 1; }
.scc-cut { cursor: pointer; }
.scc-cut rect { stroke: #fff; stroke-width: 0.6; }
.scc-cut-on rect { stroke: var(--scc-ink); stroke-width: 2.4; }
.scc-cut-text { font-size: 11.5px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2px; pointer-events: none; }
.scc-kerf { fill: var(--scc-kerf); }
.scc-offcut.scc-remnant { fill: #e6f6ee; stroke: var(--scc-remnant); stroke-width: 1; }
.scc-offcut.scc-scrap { fill: #fdecec; stroke: var(--scc-scrap); stroke-width: 1; stroke-dasharray: 3 2; }
.scc-bar-text { font-size: 12px; fill: var(--scc-ink); }
.scc-notcut { font-size: 13px; font-weight: 700; fill: #9a3412; }
.scc-stale { opacity: 0.35; }
.scc-pop { position: absolute; z-index: 5; background: var(--scc-bg); border: 1px solid var(--scc-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.scc-pop[hidden] { display: none; }
.scc-pop-head { display: flex; justify-content: space-between; align-items: center; }
.scc-pop-msg { color: #9a3412; font-weight: 600; font-size: 12.5px; }
.scc-pop-msg:empty { display: none; }
.scc-pair { display: flex; gap: 8px; }
.scc-pair > * { flex: 1 1 0; min-width: 0; }
.scc-x { font: inherit; font-size: 18px; border: 0; background: none; cursor: pointer; min-width: 32px; min-height: 32px; color: var(--scc-ink); }
.scc-field { display: flex; flex-direction: column; font-size: 12px; color: var(--scc-muted); gap: 2px; }
.scc-field input { font: inherit; font-size: 15px; padding: 5px 7px; border: 1px solid var(--scc-line); border-radius: 5px; min-height: 36px; width: 100%; color: var(--scc-ink); }
.scc-note { margin: 0; color: var(--scc-muted); font-size: 12px; }
.scc-danger { color: #9b1c1c; border-color: #e5a5a5; }
.scc-summary { margin-top: 8px; }
.scc-table { border-collapse: collapse; font-size: 13px; }
.scc-table caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.scc-table th, .scc-table td { border-bottom: 1px solid #e4e7eb; padding: 3px 8px; text-align: left; }
.scc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The grids in the calculator panel. */
.scc-grid-head { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 4px; font-size: 13px; }
.scc-count { font-size: 12px; color: #52606d; }
.scc-wrap { overflow-x: auto; border: 1px solid #e4e7eb; border-radius: 6px; margin-bottom: 6px; }
.scc-grid { border-collapse: collapse; font-size: 13px; width: 100%; }
.scc-grid th, .scc-grid td { padding: 2px 3px; border-bottom: 1px solid #eef1f5; text-align: left; white-space: nowrap; }
.scc-grid th { font-weight: 600; color: #52606d; background: #f5f7fa; font-size: 12px; }
.scc-grid input { font: inherit; font-size: 14px; padding: 4px 5px; border: 1px solid #9aa5b1; border-radius: 4px; min-height: 32px; background: #fff; color: #1f2933; }
.scc-grid tr.scc-on td { background: #fff7ed; }
.scc-mark { width: 58px; } .scc-len { width: 84px; } .scc-qty { width: 52px; } .scc-cost { width: 70px; }
@media (max-width: 480px) {
  .scc-mark { width: 44px; } .scc-len { width: 68px; } .scc-qty { width: 40px; } .scc-cost { width: 58px; }
  .scc-grid input { padding: 4px 3px; }
  .scc-small { min-width: 26px; padding: 2px 4px; }
}
.scc-chip { display: inline-block; width: 10px; height: 18px; border-radius: 2px; vertical-align: middle; }
.scc-order { white-space: nowrap; }
.scc-rowno { color: #52606d; font-size: 12px; text-align: center; }
.scc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }