/* 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; } }