/* Storyboard Forge: a boarding room over the house, not a private theme.

   EVERY COLOUR HERE IS A HOUSE TOKEN. The design of record carries a token
   block of its own and says in its comment that the block was copied FROM the
   shipping system; this room wears the real one instead, so a theme added to
   styles/tokens.css lights this room too and there is no second palette to keep
   in step. The mock's names map onto the house's like this, once, here:
   panel-2 -> setA, rail/rail-2 -> panel and setB, border -> edge, text-2 ->
   ink2, text-3 -> muted, attn/accent-ink/accent-fill -> accent, overlay ->
   scrim, shadow-pop -> sh-modal, seg-track -> inset.

   --sb-in IS A MEASUREMENT, NOT A TOKEN. The board and the tree indent by depth,
   and the markup carries that depth as a number (data-depth) rather than a pixel
   in a style attribute. The enumerated block at the foot turns the number into
   the one length four rules read, so this room ships zero inline styles and the
   census baseline never has to move for it. */

.sb-room{min-height:100%;color:var(--text)}
.sb-desk{max-width:960px;margin:0 auto;padding:34px 28px 70px}

/* ---------- the head ---------- */
.sb-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:26px}
.sb-t{font-size:var(--t-room);line-height:1.05;margin:0 0 6px}
.sb-s{font-size:var(--t-body);color:var(--ink2);line-height:var(--lh-body);margin:0;max-width:46ch}
.sb-head-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex:none;flex-wrap:wrap;justify-content:flex-end}
.sb-foot-row{margin:-14px 0 14px}
.sb-ic{display:inline-flex;width:13px;height:13px;flex:none}
.sb-ic svg{width:100%;height:100%;display:block}
.sb-meta{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.sb-meta-tools{margin-top:9px}
.sb-meta-lead{margin-bottom:var(--s5)}
.sb-meta-foot{margin-top:var(--s6)}

/* ---------- the project card: level zero of the tree ---------- */
.sb-proj{border:var(--bd) solid var(--edge);border-radius:var(--r-lg);background:var(--panel);margin-bottom:var(--s4);overflow:hidden}
.sb-proj-top{position:relative}
.sb-proj-head{display:flex;gap:var(--s6);align-items:center;width:100%;text-align:left;padding:14px 16px;border:0;background:transparent;color:var(--text);font-family:inherit;cursor:pointer;transition:background var(--mo-fast)}
.sb-proj-head:hover{background:var(--setA)}
.sb-proj-corner{position:absolute;right:14px;bottom:13px}
.sb-proj-body{min-width:0;flex:1}
.sb-proj-t{display:block;font-family:var(--font-trajan);font-size:var(--t-display);margin:0 0 5px}
.sb-proj-pitch{display:block;font-size:var(--t-body);color:var(--ink2);line-height:var(--lh-body);max-width:52ch}
.sb-cover{width:62px;height:89px;flex:none;border-radius:var(--r-sm);overflow:hidden;background:var(--setA);border:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent);color:var(--muted)}
.sb-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sb-cover-empty{border-style:dashed}
.sb-proj-open{display:none;border-top:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent)}
.sb-proj.open .sb-proj-open{display:block}
.sb-proj.open .sb-proj-head .sb-tri{transform:rotate(90deg);color:var(--accent)}
.sb-proj-tabs{padding:14px 18px 0}
.sb-proj-tabs .sb-seg{flex-wrap:wrap}
.sb-proj-pane{padding:0 18px 22px}

/* the segmented control, and it is this room's only tab shape */
.sb-seg{display:inline-flex;align-items:center;gap:3px;padding:3px;background:var(--inset);border:var(--bd) solid var(--edge);border-radius:11px}
.sb-seg-right{margin-left:auto}
.sb-seg-btn{border:0;padding:0 13px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-family:inherit;font-size:var(--t-small);font-weight:var(--w-med);color:var(--ink2);background:transparent;cursor:pointer;white-space:nowrap;transition:background var(--mo-fast),color var(--mo-fast)}
.sb-seg-btn:hover:not(.on){color:var(--text)}
.sb-seg-btn.on{background:var(--panel);color:var(--accent);font-weight:var(--w-semi)}

/* one heading, one plain sentence, then the controls. no monospace shouting. */
.sb-sec{margin-top:34px}
.sb-sec:first-child{margin-top:22px}
.sb-sec-h{font-size:var(--t-title);margin:0 0 5px}
.sb-sec-s{font-size:var(--t-body);color:var(--ink2);line-height:var(--lh-body);margin:0 0 18px;max-width:64ch}
.sb-grp{background:var(--setA);border:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent);border-radius:var(--r-md);padding:16px;margin-bottom:var(--s5)}
.sb-grp-t{font-size:var(--t-body);font-weight:var(--w-bold);margin-bottom:3px}
.sb-grp-s{font-size:var(--t-small);color:var(--ink2);line-height:var(--lh-body);margin-bottom:var(--s6)}
.sb-grp-f{font-size:var(--t-tiny);color:var(--muted);line-height:var(--lh-body);margin-top:var(--s5)}

/* the choice grid. fixed columns, so nothing wraps ragged. */
.sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.sb-grid-3{grid-template-columns:1fr 1fr 1fr}
.sb-opt{display:block;width:100%;text-align:left;padding:11px 13px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font-family:inherit;cursor:pointer;transition:border-color var(--mo-fast),background var(--mo-fast)}
.sb-opt:hover{border-color:var(--accent-line)}
.sb-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.sb-opt b{display:block;font-size:var(--t-body);font-weight:var(--w-semi);margin-bottom:2px}
.sb-opt.on b{color:var(--accent)}
.sb-opt span{display:block;font-size:var(--t-tiny);color:var(--muted);line-height:1.4}
.sb-ow{position:relative}
.sb-ow .sb-i{position:absolute;top:9px;right:9px;margin:0}
.sb-ow .sb-opt{padding-right:34px}

/* field labels read as words, not as machine output */
.sb-fl{display:block;font-size:var(--t-small);font-weight:var(--w-semi);color:var(--ink2);margin-bottom:var(--s2)}
.sb-fw{margin-bottom:var(--s6)}
.sb-in{font-family:inherit;display:block;resize:vertical}
.sb-in-mono{line-height:var(--lh-read)}

/* ---------- the information circle, and the note it opens ---------- */
.sb-i{width:16px;height:16px;flex:none;border-radius:var(--r-round);border:var(--bd) solid var(--edge);background:var(--panel);color:var(--muted);font-family:var(--font-mono);font-size:9.5px;font-weight:var(--w-bold);line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:var(--s2);position:relative;top:-1px;transition:border-color var(--mo-fast),color var(--mo-fast),background var(--mo-fast)}
.sb-i:hover{border-color:var(--accent-line);color:var(--accent)}
.sb-wn{font-size:var(--t-body);line-height:var(--lh-read);color:var(--ink2)}
.sb-wn p{margin:0 0 var(--s5)}
.sb-wn p:last-child{margin-bottom:0}
.sb-wn b{color:var(--text);font-weight:var(--w-bold)}

/* the ladder a naming scheme actually produces */
.sb-lad{margin:11px 0 4px;padding:13px 15px;border-radius:var(--r-sm);background:var(--panel);border:var(--bd) solid var(--edge)}
.sb-lad div{font-size:var(--t-small);line-height:1.85;color:var(--text)}
.sb-lad div em{font-style:normal;color:var(--muted);font-size:var(--t-tiny);margin-left:9px}
.sb-lad div.on{color:var(--accent);font-weight:var(--w-semi)}
.sb-lad [data-rung="1"]{padding-left:18px}
.sb-lad [data-rung="2"]{padding-left:36px}
.sb-lad [data-rung="3"]{padding-left:54px}
.sb-lad [data-rung="4"]{padding-left:72px}
.sb-flg{margin:var(--s5) 0 4px;border-radius:var(--r-sm);background:var(--panel);border:var(--bd) solid var(--edge);overflow:hidden}
.sb-flg>div{display:flex;gap:var(--s5);padding:var(--s4) 13px}
.sb-flg>div+div{border-top:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent)}
.sb-flg b{color:var(--muted);font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);width:15px;flex:none;padding-top:2px}
.sb-flg strong{display:block;font-size:var(--t-small);font-weight:var(--w-semi);color:var(--text);margin-bottom:2px}
.sb-flg span{display:block;font-size:var(--t-tiny);color:var(--muted);line-height:var(--lh-body)}

/* ---------- the cast ---------- */
.sb-cast{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sb-chip{display:inline-flex;align-items:center;gap:var(--s2);padding:3px 10px 3px 3px;border-radius:var(--r-pill);border:var(--bd) solid var(--edge);background:var(--panel);font-size:var(--t-tiny);font-weight:var(--w-semi);color:var(--ink2)}
.sb-face{width:20px;height:20px;border-radius:var(--r-round);background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:var(--w-bold);border:var(--bd) solid var(--accent-line);flex:none}
.sb-dashed{border:var(--bd) dashed var(--edge);background:transparent;color:var(--muted);border-radius:var(--r-pill);padding:4px 11px;font-family:inherit;font-size:var(--t-tiny);font-weight:var(--w-semi);cursor:pointer;transition:border-color var(--mo-fast),color var(--mo-fast)}
.sb-dashed:hover:not([disabled]){border-color:var(--accent-line);color:var(--accent)}
.sb-dashed[disabled]{opacity:.5;cursor:default}

/* ---------- the board ---------- */
.sb-gap{height:12px;display:flex;align-items:center;gap:var(--s2);opacity:0;transition:opacity .12s,height .12s;cursor:pointer;border:0;background:none;padding:0;width:100%;margin-left:var(--sb-in,0)}
.sb-gap:hover,.sb-gap.over{opacity:1}
.sb-gap.over{height:22px}
.sb-gap::before,.sb-gap::after{content:"";flex:1;height:1px;background:var(--accent-line)}
.sb-gap i{width:17px;height:17px;flex:none;border-radius:var(--r-round);border:var(--bd) solid var(--accent-line);background:var(--accent-soft);color:var(--accent);font-size:var(--t-tiny);font-style:normal;line-height:1;display:flex;align-items:center;justify-content:center}
.sb-row{padding-left:var(--sb-in,0)}

.sb-bar{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:var(--s3) var(--s5);border:var(--bd) solid var(--edge);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font-family:inherit;cursor:pointer;transition:border-color var(--mo-fast),background var(--mo-fast),opacity var(--mo-fast)}
.sb-bar:hover{border-color:var(--accent-line);background:var(--setA)}
.sb-bar.open{border-color:var(--accent-line);border-radius:var(--r-sm) var(--r-sm) 0 0;border-bottom-color:color-mix(in srgb,var(--edge) 58%,transparent)}
/* The three classes the drag toggles and never styles: .ghost on the row being
   carried, .over on the lit gap, .nest on a chunk's bar that would take it.
   Ghost answers on either the bar or the row around it, so the drag may hang
   it wherever it holds the node without the look depending on which. */
.sb-bar.ghost,.sb-row.ghost .sb-bar,.sb-mile.ghost{opacity:.38}
.sb-bar.nest{border-color:var(--accent);background:var(--accent-soft)}
.sb-bar:focus-visible,.sb-tw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sb-grip{width:11px;flex:none;color:var(--muted);opacity:0;cursor:grab;transition:opacity .12s}
.sb-bar:hover .sb-grip{opacity:1}
.sb-grip svg{width:11px;height:11px;display:block}
.sb-tri{width:11px;height:11px;flex:none;color:var(--muted);transition:transform var(--mo-fast);display:inline-flex}
.sb-tri svg{width:100%;height:100%;display:block}
.sb-tri.down{transform:rotate(90deg);color:var(--accent)}
.sb-tri-void{visibility:hidden}
.sb-thumb{width:62px;height:38px;flex:none;border-radius:6px;overflow:hidden;background:var(--setA);border:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent);color:var(--muted)}
.sb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sb-thumb-blank{display:flex;align-items:center;justify-content:center;border-style:dashed;font-size:var(--t-sub)}
.sb-bar-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.sb-bar-t{font-size:var(--t-body);font-weight:var(--w-med);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-bar-t.chunk{font-weight:var(--w-bold)}
.sb-bar-s{font-size:var(--t-tiny);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-bar-right{display:flex;align-items:center;gap:9px;flex:none}
.sb-count{font-family:var(--font-mono);font-size:10px;font-weight:var(--w-bold);letter-spacing:.5px;color:var(--muted);border:var(--bd) solid var(--edge);border-radius:var(--r-pill);padding:2px var(--s3);background:var(--panel);white-space:nowrap}
.sb-slug{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* a marker labels the run beneath it and holds nothing */
.sb-mile{display:flex;align-items:center;gap:var(--s4);padding:15px 2px 9px;padding-left:var(--sb-in,0)}
.sb-mile .sb-ic{width:12px;height:12px;color:var(--accent)}
.sb-mile b{font-family:var(--font-mono);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:.11em;text-transform:uppercase;color:var(--ink2)}
.sb-mile .sb-rule{flex:1;height:1px;background:var(--edge)}
.sb-mile-fw{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;color:var(--muted);flex:none}
.sb-mile .btn{padding:3px 9px;font-size:var(--t-label);opacity:0;transition:opacity .12s}
.sb-mile:focus-within .btn,.sb-mile .btn:focus-visible{opacity:1}
.sb-mile:hover .btn{opacity:1}

/* the open beat */
.sb-sheet{border:var(--bd) solid var(--accent-line);border-top:0;border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--panel);padding:18px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:20px}
.sb-sheet-chunk{grid-template-columns:180px minmax(0,1fr)}
.sb-sketch{border:var(--bd) solid var(--edge);border-radius:var(--r-sm);overflow:hidden;background:var(--setA);aspect-ratio:16/10;color:var(--muted);position:relative}
.sb-sketch img{width:100%;height:100%;object-fit:cover;display:block}
.sb-sketch-empty{border-style:dashed;display:flex;align-items:center;justify-content:center;font-size:var(--t-small);text-align:center;padding:14px;line-height:var(--lh-body)}
.sb-tools{display:flex;gap:var(--s2);margin-top:9px;flex-wrap:wrap}
/* A press that cannot work yet must not look pressable: the slice-4 and
   slice-5 buttons ship disabled, and a primary button ignores the fact
   without this. Foreman's one-line polish off the first rendered look. */
.sb-room .btn[disabled],.sb-win .btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.sb-fields{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
.sb-f-l{font-family:var(--font-mono);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:.5px;color:var(--muted);text-transform:uppercase;margin-bottom:var(--s2);display:block}
.sb-trio{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:var(--s4)}
.sb-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sb-rowbtns{display:flex;gap:var(--s3);flex-wrap:wrap}
.sb-rowbtns-top{margin-top:var(--s5)}
.sb-addend{margin-top:var(--s6);border:var(--bd) dashed var(--edge);border-radius:var(--r-sm);padding:13px;text-align:center;color:var(--muted);font-size:var(--t-small);font-weight:var(--w-semi);background:transparent;font-family:inherit;cursor:pointer;width:100%;transition:border-color var(--mo-fast),color var(--mo-fast)}
.sb-addend:hover{border-color:var(--accent-line);color:var(--accent)}

/* ---------- the structure tree, in the house's left panel ---------- */
/* The head carries the badge and the seg and no label: the house tab directly
   above it already says Structure. flex-wrap is the floor under that, so the
   seg drops below the badge in a rail dragged narrower still rather than
   clipping Cast to "Ca". */
.sb-tree-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s5);min-height:46px;border-bottom:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent)}
.sb-tree-mark{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);border:var(--bd) solid var(--accent-line);color:var(--accent);flex:none;display:flex;align-items:center;justify-content:center}
.sb-tree-mark svg{width:13px;height:13px}
.sb-tree{padding:var(--s4) var(--s3) var(--s6);display:flex;flex-direction:column}
.sb-tree-label{font-family:var(--font-mono);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:.5px;color:var(--muted);text-transform:uppercase;padding:4px var(--s3);margin-bottom:var(--s3)}
.sb-tw{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:5px var(--s3);padding-left:calc(var(--s3) + var(--sb-in,0px));border:0;background:transparent;border-radius:6px;color:var(--ink2);font-family:inherit;font-size:var(--t-small);cursor:pointer;transition:background .12s,color .12s}
.sb-tw:hover{background:var(--setA);color:var(--text)}
.sb-tw.on{background:var(--accent-soft);color:var(--accent);font-weight:var(--w-semi)}
.sb-tw .sb-tri{width:9px;height:9px}
.sb-tw-proj{font-family:var(--font-trajan);font-size:var(--t-body);color:var(--text);padding:7px var(--s3);cursor:default}
.sb-tw-mile{color:var(--muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.sb-tw-quiet{color:var(--muted);margin-top:var(--s2)}
.sb-tw .sb-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-tw em{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--muted);flex:none;font-style:normal}

/* ---------- the windows ----------
   The modal law: the house scrim centres them and passes pointers through, and
   lib/drag.js picks them up by data-drag, so nothing here is positioned by an
   attribute the way the mock positioned it. */
.sb-win{padding:0;gap:0;overflow:hidden;max-height:82vh;width:100%}
.sb-win-note{max-width:600px}
.sb-win-hist{max-width:440px}
.sb-win-compile{max-width:700px}
/* The camera window is wider than the three that carry words, because the
   machine inside it is a surface rather than a paragraph: the brush row, the
   box, three reference windows and a tray. It is the one window in this room
   whose body is somebody else's markup, so the room sizes the frame and
   styles/camera.css keeps dressing what is in it. */
/* THE CAMERA WINDOW IS TWO COLUMNS NOW: the machine on the left, the reach
   panel on the right. It is rooms/modals/image-admin.js's own shape and its own
   reason, including what happens when there is no room for two: below 900px the
   panel folds UNDER rather than collapsing behind a toggle, because a collapse
   hides the library from the person it was built for and the window already
   scrolls. */
.sb-win-cam{max-width:1040px}
.sb-cam-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;align-items:start}
.sb-cam-side{min-width:0;border-left:var(--bd) solid var(--edge);padding-left:var(--s6);margin-left:var(--s6)}
@media (max-width:900px){
  .sb-cam-cols{grid-template-columns:minmax(0,1fr)}
  .sb-cam-side{border-left:0;border-top:var(--bd) solid var(--edge);
    padding-left:0;margin-left:0;padding-top:var(--s5);margin-top:var(--s5)}
}

/* The style, set where the picture is made. Chips because this window's own
   grammar is chip rows (the brush wears one, so do the variations), and a
   control wears the vocabulary of the surface it stands on. */
.sb-cam-style{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.sb-cam-style-label{flex:none;font-family:var(--font-mono);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.sb-cam-chips{display:flex;gap:var(--s2);flex-wrap:wrap;min-width:0}
.sb-cam-chip{padding:5px var(--s4);border-radius:var(--r-pill);font-size:var(--t-tiny);font-weight:var(--w-semi);font-family:inherit;cursor:pointer}
/* Said at the moment it becomes true, and quiet: nothing is wrong, a person
   simply owns the words now. Muted rather than warned, and it sits under the
   chips it is about rather than beside the box, because what it explains is
   what a chip will not do. */
.sb-cam-note{margin:0;font-size:var(--t-tiny);color:var(--muted);line-height:var(--lh-body)}
.sb-cam-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-cam-kicker{font-family:var(--font-mono);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:var(--ls-wide);color:var(--accent)}
.sb-cam-body{display:flex;flex-direction:column;gap:var(--s6)}
.sb-cam-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);flex:none;padding:var(--s5) var(--s7);border-top:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent)}
.sb-cam-price{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;color:var(--onAccentDim);margin-left:var(--s2)}
/* A file picker wearing a button: the input is hidden inside the label, which
   is how keep.js, glass.js and camera.js all draw one. `cursor` is the whole
   difference between a label and a button on screen. */
.sb-pick{cursor:pointer}
/* The walk out of a finished send. It is the cast panel's Open World Forge
   shape, sitting on the end of the sentence that earned it rather than in a
   row of its own, because it is the sentence's own last clause. */
.sb-walk{margin-left:var(--s2);vertical-align:baseline}
/* What did not survive the translation, under the sentence that says the
   send worked. Quiet: it is information and not a warning, because nothing
   was lost and the board still holds all of it. */
.sb-lost{margin-top:var(--s5)}
.sb-lost ul{margin:var(--s2) 0 0;padding-left:var(--s6);list-style:disc}
.sb-lost li{font-size:var(--t-small);color:var(--ink2);line-height:var(--lh-read)}
.sb-win-head{display:flex;align-items:center;gap:var(--s4);padding:11px var(--s6);border-bottom:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent);background:var(--setA);flex:none;cursor:grab}
.sb-win-t{font-size:var(--t-body);font-weight:var(--w-bold);letter-spacing:var(--ls-head)}
.sb-win-head .btn{margin-left:auto}
.sb-win-body{padding:var(--s7);overflow-y:auto}
.sb-logline{display:flex;gap:var(--s4);padding:var(--s3) 0;border-bottom:var(--bd) solid color-mix(in srgb,var(--edge) 58%,transparent);font-size:var(--t-small);color:var(--ink2);line-height:1.45}
.sb-logline:last-of-type{border-bottom:0}
/* The design sized this column for "14 Aug". The house stamp is runStamp and
   it writes the month out, so the column is as wide as September needs and
   the notes still line up under each other. */
.sb-logline time{font-family:var(--font-mono);font-size:10px;color:var(--muted);flex:none;width:76px;padding-top:2px}
/* A history with nothing in it, and a room whose vault has not answered. Both
   are one quiet sentence and neither moves: this tree is rebuilt on every
   state write and a looping animation would restart with it. */
.sb-empty{font-size:var(--t-small);color:var(--muted);line-height:var(--lh-read);margin:0}
.sb-boot{font-size:var(--t-body);color:var(--muted);line-height:var(--lh-read);margin:34px 0 0;max-width:52ch}
.sb-tree .sb-boot{font-size:var(--t-small);margin:var(--s5) var(--s3)}
/* The same quiet line inside a window, where the canvas top margin would
   push it away from the head it belongs under. */
.sb-win .sb-boot{font-size:var(--t-small);margin:0}
.sb-ladder{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.sb-pill{border:var(--bd) solid var(--edge);background:var(--panel);color:var(--ink2);border-radius:var(--r-pill);padding:5px var(--s5);font-size:var(--t-tiny);font-weight:var(--w-semi);font-family:inherit;cursor:pointer;transition:border-color var(--mo-fast)}
.sb-pill:hover{border-color:var(--accent-line)}
.sb-pill.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}

/* a compiled script is a document. never a code font. */
.sb-doc{font-family:var(--font-ui);font-size:var(--t-body);line-height:var(--lh-read);color:var(--text);white-space:pre-wrap;margin:0}
.sb-doc b{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.11em;color:var(--muted);margin:20px 0 3px}
.sb-doc b:first-child{margin-top:0}
.sb-doc i{display:block;font-style:normal;font-family:var(--font-mono);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:.14em;color:var(--accent);margin:26px 0 var(--s2)}
.sb-doc u{display:block;text-decoration:none;font-weight:var(--w-bold);font-size:var(--t-body);color:var(--text);margin:26px 0 var(--s3)}
.sb-doc em{display:block;font-style:normal;color:var(--ink2);border-left:2px solid var(--accent-line);padding-left:var(--s5);margin:var(--s3) 0 0}

/* ---------- the indent, from the number the markup carries ----------
   Nine steps and then it stops, which is where levelName stops naming levels.
   One length, four consumers: the row, the gap above it, a marker and a tree
   row all read --sb-in and nothing writes a pixel into an attribute. */
.sb-board [data-depth="0"],.sb-tree [data-depth="0"]{--sb-in:0px}
.sb-board [data-depth="1"],.sb-tree [data-depth="1"]{--sb-in:16px}
.sb-board [data-depth="2"],.sb-tree [data-depth="2"]{--sb-in:32px}
.sb-board [data-depth="3"],.sb-tree [data-depth="3"]{--sb-in:48px}
.sb-board [data-depth="4"],.sb-tree [data-depth="4"]{--sb-in:64px}
.sb-board [data-depth="5"],.sb-tree [data-depth="5"]{--sb-in:80px}
.sb-board [data-depth="6"],.sb-tree [data-depth="6"]{--sb-in:96px}
.sb-board [data-depth="7"],.sb-tree [data-depth="7"]{--sb-in:112px}
.sb-board [data-depth="8"],.sb-tree [data-depth="8"]{--sb-in:128px}

/* A narrow screen keeps the sheet, and drops the two-column shape it cannot
   hold: the picture goes above the words rather than beside them. */
@media (max-width:760px){
  .sb-desk{padding:22px 16px 60px}
  .sb-sheet,.sb-sheet-chunk{grid-template-columns:minmax(0,1fr)}
  .sb-grid,.sb-grid-3{grid-template-columns:1fr}
  .sb-trio{grid-template-columns:1fr}
}