/* Illustrated Atlas storyboard: the canvas stays quiet; tools explain themselves. */
.storyboard-atlas { --sb-paper:#fffdf8; --sb-line:#cbd5c5; --sb-green:#183d36; min-width:0; }
.storyboard-atlas [hidden] { display:none!important; }
.storyboard-atlas .sb-heading { margin-bottom:26px; }
.storyboard-atlas .sb-heading h1 { font-size:clamp(2.2rem,4vw,3.5rem);margin:12px 0; }
.storyboard-atlas .sb-heading>p:last-child { max-width:780px;color:#526158;line-height:1.8; }
.storyboard-atlas .sb { height:auto;min-height:0;grid-template-columns:minmax(0,1fr) 280px;gap:16px; }
.storyboard-atlas .sb-bar { display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px 22px;padding:22px;background:var(--sb-paper);border:1px solid var(--sb-line);border-radius:12px;box-shadow:none;align-items:start; }
.storyboard-atlas .sb-board-row,.storyboard-atlas .sb-drawing-row,.storyboard-atlas .sb-arrange-row { display:flex;align-items:end;flex-wrap:wrap;gap:8px;grid-column:1/-1; }
.storyboard-atlas .sb-board-row { border-bottom:1px solid #e2e7da;padding-bottom:14px; }
.storyboard-atlas .sb-picker-label { display:flex;flex-direction:column;gap:6px;color:#526158;font-size:.73rem;max-width:100%; }
.storyboard-atlas .sb-select { min-height:44px;max-width:100%;background:#f6f6ee;color:var(--sb-green);border:1px solid var(--sb-line);font-family:var(--sans);font-size:.82rem;padding:9px 12px;border-radius:6px; }
.storyboard-atlas .sb-board-row .sb-picker-label { flex:1;min-width:180px; }
.storyboard-atlas .sb-tool { width:auto;height:auto;min-height:44px;padding:9px 12px;display:inline-flex;align-items:center;gap:7px;font:500 .75rem var(--sans);border:1px solid var(--sb-line);border-radius:6px;background:#fffdf8;color:#284a3a; }
.storyboard-atlas .sb-tool:hover:not(:disabled) { background:#eaf0e3;color:#183d36; }
.storyboard-atlas .sb-tool.is-on,.storyboard-atlas .sb-tool[aria-pressed=true] { background:#183d36;color:#fff9ed;border-color:#183d36; }
.storyboard-atlas .sb-tool:disabled { opacity:.45;cursor:not-allowed; }
.storyboard-atlas .sb-zoom { display:flex;align-items:center;gap:4px; }
.storyboard-atlas .sb-zoom-value { min-width:54px;text-align:center;font-size:.78rem;color:#385147; }
.storyboard-atlas .sb-findwrap { grid-column:1;display:flex;flex-direction:column;gap:6px;position:relative;max-width:430px; }
.storyboard-atlas .sb-findwrap>label { font-size:.75rem;color:#526158; }
.storyboard-atlas .sb-find { width:100%;min-width:0;min-height:44px;background:#fffefa;border:1px solid var(--sb-line);color:#183d36;padding:10px 13px;border-radius:6px; }
.storyboard-atlas .sb-results { top:100%;width:100%;max-height:320px;overflow:auto;background:#fffdf8;border:1px solid var(--sb-line);box-shadow:0 12px 35px #183d3622;border-radius:6px;z-index:5; }
.storyboard-atlas .sb-result { min-height:44px;color:#183d36;gap:10px;background:#fffdf8; }
.storyboard-atlas .sb-result:hover { background:#e9f0e1;color:#183d36; }
.storyboard-atlas .sb-search-message { padding:14px;color:#526158;font-size:.82rem; }
.storyboard-atlas .sb-tool-help { font-size:.8rem;color:#526158;margin:0;grid-column:1/-1; }
.storyboard-atlas .sb-save-status { font-size:.75rem;color:#385147;margin:0;grid-column:2;grid-row:4;align-self:end; }
.storyboard-atlas .sb-save-status[data-error=true] { color:#8d3b28; }
.storyboard-atlas .sb-stage { min-height:560px;height:65vh;max-height:900px;background:radial-gradient(#bdcbb9 1px,transparent 1px) 0 0/24px 24px,#edf1e6;border:1px solid var(--sb-line);border-radius:10px; }
.storyboard-atlas .sb-stage>.btn { margin:24px; }
.storyboard-atlas .sb-card { fill:#fffdf8;stroke:#b5c3ab;rx:8px;filter:none; }
.storyboard-atlas .sb-node:focus .sb-card,.storyboard-atlas .sb-node.is-selected .sb-card { stroke:#92512e;stroke-width:3px; }
.storyboard-atlas .sb-frame:focus>rect,.storyboard-atlas .sb-frame.is-selected>rect { stroke:#92512e;stroke-width:3px; }
.storyboard-atlas .sb-frame>rect { fill:#dce8d333;stroke:#708267; }
.storyboard-atlas .sb-node-title,.storyboard-atlas .sb-note-text,.storyboard-atlas .sb-frame-title { fill:#183d36;font-family:Georgia,serif; }
.storyboard-atlas .sb-node-sum,.storyboard-atlas .sb-node-id { fill:#526158; }
.storyboard-atlas .sb-edge-label { fill:#385147;stroke:#edf1e6; }
.storyboard-atlas .sb-inspector { background:#fffdf8;border:1px solid var(--sb-line);border-radius:10px;padding:18px;overflow:auto;max-height:900px; }
.storyboard-atlas .sb-inspector .scroll { padding:18px 0;border:0;box-shadow:none;background:transparent; }
.storyboard-atlas .sb-inspector .sb-detail h3 { font-size:1.5rem;overflow-wrap:anywhere; }
.storyboard-atlas .sb-inspector .sb-detail p { overflow-wrap:anywhere;font-size:.88rem; }
.storyboard-atlas .sb-stats { border-bottom:1px solid #d4ddcd;padding-bottom:16px;margin-bottom:18px; }
.storyboard-atlas .sb-stat strong { color:#183d36;font:1.6rem Georgia,serif; }
.storyboard-atlas .sb-stat span { color:#526158;font-family:var(--sans);font-size:.68rem; }
.storyboard-atlas .sb-fognote { color:#375344;background:#edf2e6;padding:12px;border:1px solid #c4d4bb; }
.storyboard-atlas .sb-empty { background:#fffdf8;border:1px solid var(--sb-line);border-radius:12px;padding:clamp(22px,4vw,40px); }
.storyboard-atlas .sb-empty h2 { font-size:2rem; }
.storyboard-atlas .sb-empty p { color:#526158;max-width:780px; }
.storyboard-atlas .sb-start-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:26px; }
.storyboard-atlas .sb-start { display:flex;flex-direction:column;gap:16px;text-align:left;min-height:175px;background:#edf2e6;border:1px solid #c5d3ba;border-radius:9px;padding:22px;cursor:pointer;color:#183d36; }
.storyboard-atlas .sb-start strong { font:1.5rem Georgia,serif; }
.storyboard-atlas .sb-start span { font:.8rem/1.6 var(--sans);color:#526158; }
.storyboard-atlas .sb-start .ico { width:30px;height:30px; }
.storyboard-atlas .sb-help { margin-top:22px;font-size:.8rem; }
dialog.sb-canon-dialog { width:min(650px,calc(100% - 28px));max-height:85dvh;overflow:auto;padding:clamp(20px,4vw,36px);background:#fffdf8;color:#213d35;border:1px solid #bbcbb1;border-radius:12px;box-shadow:0 20px 70px #183d3640; }
.sb-canon-dialog::backdrop { background:#183d3670; }
.sb-canon-dialog h2 { font:2rem Georgia,serif;color:#183d36;margin-top:0; }
.sb-canon-dialog>p { color:#526158; }
.sb-canon-dialog>label { display:block;margin:20px 0 8px;font-size:.8rem; }
.sb-canon-dialog>input { width:100%;min-height:44px; }
.sb-canon-dialog .sb-picker-row { width:100%;min-height:44px;padding:16px;margin:8px 0;background:#f1f5e9;border:1px solid #d0dcc5;border-radius:7px;color:#183d36;text-align:left; }
.sb-canon-dialog .sb-picker-row strong { display:block;color:#183d36; }
.sb-canon-dialog .sb-picker-blurb { color:#526158;font-size:.85rem; }
.sb-canon-dialog .sb-picker-blurb p { margin:7px 0; }
.sb-canon-dialog .sb-picker-feedback { font-size:.8rem; }
.sb-placement form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sb-placement form > .field:nth-child(-n+2), .sb-placement form > [role] { grid-column:1/-1; }
.sb-placement .field { margin:0; min-width:0; }
.sb-placement [role=alert] { color:#813d29; }
@media(max-width:480px){.sb-placement form {grid-template-columns:minmax(0,1fr)} }
@media(max-width:1000px){.storyboard-atlas .sb{grid-template-columns:minmax(0,1fr)}.storyboard-atlas .sb-inspector{max-height:none}.storyboard-atlas .sb-start-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.storyboard-atlas .sb-bar{grid-template-columns:minmax(0,1fr);padding:15px;gap:12px}.storyboard-atlas .sb-findwrap{max-width:none}.storyboard-atlas .sb-save-status{grid-column:1;grid-row:auto}.storyboard-atlas .sb-tool{font-size:.72rem;padding:8px 10px}.storyboard-atlas .sb-stage{height:60vh;min-height:420px}.storyboard-atlas .sb-start-grid{grid-template-columns:1fr 1fr}.storyboard-atlas .sb-start{padding:16px;min-height:160px}.storyboard-atlas .sb-picker-label{width:100%}}
@media print{.storyboard-atlas .sb-bar,.storyboard-atlas .sb-inspector{display:none!important}.storyboard-atlas .sb{display:block}.storyboard-atlas .sb-stage{height:70vh}}