/* 6e R3 — STUDIO. The chassis is the Templates screen's own classes (.tpl-cats-band, .tpl-cat,
   .tpl-case-strip, .tpl-case-dd — app.css); the offer cards are the Live Stream card chassis (.nf-row, app.css);
   the sidebar run cards are .nf-row holding R6's three parts (window.LSRunCard.html). This file holds ONLY what
   those have no equivalent for. The Studio purple is NOT written here: 45-studio.js sets --st-run, --st-run-fill
   and --st-run-spine from window.LS_CATS.skills (one home). */
#studio { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; background:var(--bg);
  --st-avail:#7fb8ec; --st-avail-fill:#141b21;   /* blue   — available */
  --st-block:#e3c14a; --st-block-fill:#1f1c12;   /* yellow — "Needs Another Skill Run" (7l.7): available once another skill runs */
  --st-none:#454545;  --st-none-fill:#151515;    /* grey   — nothing to run (status "nothing") */
  --st-cur:var(--ls-green); --st-cur-fill:#171c18; /* green  — current ("Up to Date", D-82 item 3); PUSH 18 I1-8 (P-28): one value, app.css :root */
  --st-amber:var(--ls-amber);                    /* amber  — needs you now (push 14 §COLOURS; one value, app.css :root) */
  --st-div:#3a3a3a; }                            /* the thin divider between sidebar sections (design §3.5) */

/* D-83 (push 10) — ONE CARD STYLE for every Studio card: the History grid, three rows left and right, one frame, one
   padding, one left bar; only the bar's colour (and the state word's and sentence's) changes, from LSRunCard.tone. */
/* PUSH 13 F-20 — THE STUDIO CARD SYSTEM (Joshua, addendum 11), on the same two columns, bars and state words:
   · Sizing is the Live Stream card's (app.css .nf-row / .nf-title / .nf-body, read, never changed): padding 11px 14px
     11px 15px, the headline .86rem at 1.35, every other line .8rem at 1.45, 4px between lines (.nf-body's margin).
   · The skill name wears the card's OWN bar colour (--st-bar); a case name after it (the no-case rail, All My Cases'
     Deadline view) is white. The headline wraps; it is never cut.
   · No empty rows and no reserved heights: an empty cell is dropped (display:none takes it out of the grid, so its row
     is never made), and a left cell whose right cell is empty spans the card.
   · The status sentence is muted, not the tone colour; the initials sit in row 2's right cell, muted, before the date. */
#studio .st-card, #studio .st-ar { border:1px solid var(--border); border-left:4px solid var(--st-bar); border-radius:8px;
  background:var(--surface); padding:11px 14px 11px 15px; --st-bar:var(--st-run); --st-tone:var(--st-run); }
/* PUSH 15 MG-2 (ruling 20: D-111 addendum 2 and the ARCH's clarification): THE AVAILABLE RUNS TILE'S THREE TYPE SIZES,
   ONE HOME. The tile's own rules below read them (its title; its sub-line; its right column, the deadline and the state
   word), and the shared run card reads the SAME three on both surfaces: the rail's rules below and the Live Stream's
   .lsrc-r1 / .lsrc-r2 / .lsrc-r3 (app.css). Title -> title; every other left-column line (row 2, the status line) ->
   the sub-line; the right column (the time, the initials) -> the right column, muted and not bold. */
:root { --ar-title-size:.86rem; --ar-sub-size:.8rem; --ar-right-size:.8rem; }
#studio .lsrc-hgrid { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:4px; align-items:baseline; }
#studio .lsrc-h-title { grid-column:1; grid-row:1; font-weight:600; font-size:var(--ar-title-size); line-height:1.35; color:var(--st-bar); overflow-wrap:anywhere; }
#studio .lsrc-h-case { color:#f4f4f4; font-weight:400; }
/* 7e (push 14): the icons sit at the top right, level with the title's FIRST line, however many lines it wraps to. */
#studio .lsrc-h-folder { grid-column:2; grid-row:1; justify-self:end; display:flex; align-items:center; gap:8px; align-self:start; }
#studio .lsrc-h-folder:empty { display:none; }
#studio .lsrc-h-title:has(+ .lsrc-h-folder:empty) { grid-column:1 / -1; }
#studio .lsrc-h-folder .folder-ico { margin-left:0; }
#studio .lsrc-h-sets { grid-column:1; grid-row:2; font-size:var(--ar-sub-size); line-height:1.45; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studio .lsrc-h-sets:empty { display:none; }
#studio .lsrc-h-sets:has(+ .lsrc-h-state:empty) { grid-column:1 / -1; }
#studio .lsrc-h-state, #studio .lsrc-h-dl { grid-column:2; justify-self:end; white-space:nowrap; font-size:var(--ar-right-size); line-height:1.45; }
#studio .lsrc-h-state { grid-row:2; }
#studio .lsrc-h-state:empty { display:none; }
#studio .lsrc-h-dl { grid-row:1; }
#studio .lsrc-h-date { color:#f4f4f4; }
#studio .lsrc-h-dot, #studio .lsrc-h-cap, #studio .lsrc-h-ini { color:var(--muted); }
#studio .lsrc-h-word { color:var(--st-tone); }
/* push 14 R-1 row 3, across the whole card: the status line WHITE (7f.3) | the initials, muted, at the right. */
#studio .lsrc-h-r3 { grid-column:1 / -1; grid-row:3; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
#studio .lsrc-h-r3:has(> .lsrc-h-line:empty):has(> .lsrc-h-ini:empty) { display:none; }
#studio .lsrc-h-line { min-width:0; font-size:var(--ar-sub-size); line-height:1.45; color:#f4f4f4; }
#studio .lsrc-h-ini { margin-left:auto; white-space:nowrap; font-size:var(--ar-right-size); line-height:1.45; }
/* The Available Runs tile with no deadline: the state word moves up to row 1 and the scope spans row 2 (rule 6). */
#studio .st-ar.nodl .lsrc-h-state { grid-row:1; }
#studio .st-ar.nodl .lsrc-h-sets { grid-column:1 / -1; }
/* PUSH 14 L1 R-10 (§COLOURS): ONE colour per card, the model's `tone` (LSRunCard.tone): the bar and the state word. The
   case, the work product, the status line and the time never take it. Grey's word is lighter than its bar (F-25). */
#studio .tone-purple { --st-bar:var(--st-run);   --st-tone:var(--st-run); }
#studio .tone-green  { --st-bar:var(--st-cur);   --st-tone:var(--st-cur); }
#studio .tone-amber  { --st-bar:var(--st-amber); --st-tone:var(--st-amber); }
#studio .tone-red    { --st-bar:var(--ls-red);   --st-tone:var(--ls-red); }
#studio .tone-grey   { --st-bar:var(--ls-grey);  --st-tone:var(--ls-grey-word); }
#studio .st-ar.available { --st-bar:var(--st-avail); --st-tone:var(--st-avail); }
#studio .st-ar.blocked   { --st-bar:var(--st-block); --st-tone:var(--st-block); }
/* A past deadline (7g; push 14 §COLOURS): the card turns AMBER — the bar, the name, the state word, "Overdue" and the date. */
#studio .st-ar.overdue   { --st-bar:var(--st-amber); --st-tone:var(--st-amber); }
#studio .st-ar.overdue .lsrc-h-date { color:var(--st-amber); font-weight:700; }
#studio .st-ar-over { font-weight:700; }

/* layout: main column + the ONE sidebar */
/* THE RAIL TAKES HALF OF THE DEAD SPACE (Joshua D-65, push 7 item 3; the ARCH's rulings (C) and (ii)). Derived from the
   stage's own width (a container, so 100cqw is the stage), never a fixed pixel number, and the same on every tab (D-59):
   · the gap the 537px rail left beside the 940px body = the body's 22px padding + its spare half,
     22 + max(0, (W − 537 − 940) / 2); the rail grows by half of that.
   · CAPPED, smoothly, at every width: the rail never takes Case Lifecycle's map below its 1000px minimum where it fits
     today (W − 537 ≥ 1000), and never grows at all below that (there the gap is the list's own padding, not dead space).
     So it is 537px up to 1537 wide, then grows without a jump (never narrower as the window widens).
   The list no longer keeps its old place beside the grown rail: it is centred in whatever space the rail leaves
   (Joshua D-77 amendment 2, which replaces that half of D-65; .st-wrap below). The rail's rule above stands. */
#studio .st-stage { flex:1; min-height:0; display:flex; container-type:inline-size;
  --st-rail0:537px; --st-body:940px; --st-pad:22px; --st-lc-min:1000px;
  --st-gap0:calc(var(--st-pad) + max(0px, (100cqw - var(--st-rail0) - var(--st-body)) / 2));
  --st-grow:max(0px, min(var(--st-gap0) / 2, 100cqw - var(--st-rail0) - var(--st-lc-min))); }
#studio .st-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
#studio .st-pane { flex:1; min-height:0; overflow:auto; display:none; }
#studio .st-pane.on { display:block; }
/* ONE BODY WIDTH ON BOTH TABS, AND NO JUMP WHEN A SCROLLBAR COMES (Joshua D-59, push 6 item 7; D-77 amendment 3). The pane
   is the scroller, so a list tall enough to scroll (All My Cases, most days) grows a scrollbar a short list does not. The
   gutter is kept whether or not the list scrolls, so the body's box never depends on what a tab holds — and it is kept
   on BOTH edges, so the space inside the pane stays centred in the pane: the list is centred between the stage's left
   edge and the rail (D-77 amendment 2), with or without a scrollbar. Diagnostics takes the same gutter and body, so
   switching tabs moves nothing. */
#stPane-runs, #stPane-diagnostics { scrollbar-gutter:stable both-edges; }
/* THE LIST PANEL IS CENTRED in the area left of the rail, at every window width (Joshua D-77 amendment 2): the tabs and the
   body, 940px at most (their 22px padding inside), with equal space either side. */
#studio .st-wrap { width:min(var(--st-body), 100%); margin:0 auto; padding:18px var(--st-pad) 26px; }
/* No "Available Runs" heading in the panel: the tab already names it (Joshua D-32 item 16). The This Case / All My Cases
   toggle stays at the top, right-aligned, and the cards start just below it. */
#studio .st-sec-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
/* The This Case / All My Cases tabs and the View menu stay pinned at the top of the pane while the cards scroll beneath
   them (Joshua D-37 item 27). The pane (.st-pane) is the scroller; the negative margin and matching padding cover the
   wrap's own top padding, so no card shows above the pinned row. */
#stPane-runs .st-sec-h { position:sticky; top:0; z-index:4; background:var(--bg); margin:-18px 0 0; padding:18px 0 0; align-items:flex-end; }
/* This Case / All My Cases are the Templates screen's own FOLDER TABS (.tpl-cmpl-coatabs / .tpl-cmpl-coatab, app.css — the
   Complaints and Respond to Discovery tabs), reused as they are, never approximated (Joshua D-42 item 3, push 5 item 39):
   each tab sits on the cards' panel like a manila-folder tab, the picked one in the panel's own colour and continuous with
   it. The panel is Templates' own box (.tpl-cats-box), its top corners squared so the tabs form its edge, as Templates
   does. The row's own padding ends at the panel, so the tabs rest on it; the View menu (the Live Stream's .nf-filter) stays
   on the right, All My Cases only (D-37 item 21). */
/* The View box wears the picked tab's and the panel's colour (Joshua D-53, push 6 item 1): the same token as
   .tpl-cmpl-coatab.active and .tpl-cats-box (app.css), reused, never a look-alike. And it JOINS the panel the way the
   picked tab does (Joshua D-77 item 2): it rests on the panel's top edge with no bottom border and square foot corners,
   and reaches 1px down over the panel's top border (the tab's own margin-bottom:-1px), so the button and the panel read as
   one surface with no line between them. Its hover (gold word and border) and its focus ring are .nf-bulk's and the
   browser's, untouched. The Live Stream's .nf-bulk keeps its own clear fill and full border. */
#studio .st-view { align-self:flex-end; }
#studio .st-view [data-st-view-toggle], #studio .st-view [data-st-amc-all] { background:var(--surface); border-bottom:none; border-radius:6px 6px 0 0; margin-bottom:-1px; }
/* Push 13 F-20 A: Collapse all sits just left of the sort button, in the same tab look, on the Case view only. */
#studio .st-view { gap:6px; }
#studio .st-view [data-st-amc-all][hidden] { display:none; }
#studio #stArList.tpl-cats-box { border-top-left-radius:0; border-top-right-radius:0; overflow:visible; padding:12px; }
/* ONE CONTENT START ON BOTH TABS (Joshua D-43, push 5 item 48). The View menu's slot is kept on This Case too, only
   unseen and unclickable (visibility, never display:none), so the tab row is the same height on both tabs by construction
   and switching tabs moves nothing below it. (The cause, measured at a94d1a28: `display:none` here took the 31px View
   button out of This Case's row, whose .tpl-cat tabs were 26px tall, so All My Cases' row was 7px taller.) */
#studio .st-view[hidden] { display:inline-flex; visibility:hidden; }
#studio .st-empty { color:var(--muted); font-size:.8rem; font-style:italic; padding:10px 0; }
#studio .st-err { color:#f08a96; font-size:.78rem; line-height:1.45; }
#studio .st-err[hidden] { display:none; }
/* push 13 F-33: the folders a refusal names, one per line, muted, under its sentence */
#studio .st-err-folders { list-style:none; margin:6px 0 0; padding:0; color:var(--muted); font-size:.75rem; line-height:1.45; overflow-wrap:anywhere; }

/* Available Runs offer cards — the Live Stream card chassis (.nf-row, app.css:1828-1882) */
/* Each card is its own height (push 13 F-20 rule 6, which retires D-32 item 8's equal-height 1fr rows). */
#studio .st-ar-list { display:grid; gap:8px; }
/* D-83: the card's frame and grid are the ONE card style above; only the card's own behaviour is here. */
#studio .st-ar { display:block; cursor:pointer; transition:border-color .12s, background .12s; }
#studio .st-ar:hover { border-color:var(--st-bar); }
#studio .st-ar.picked { border-color:var(--st-bar); box-shadow:inset 0 0 0 1px var(--st-bar); }   /* its OWN bar colour, never gold (F-20 rule 8) */
#studio .st-ar:focus-visible, #studio .st-sc-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* Case Lifecycle */
#studio .st-lc { padding:4px 0 0; }
#stGraph { display:block; min-width:1000px; width:100%; height:auto; }
#stGraph .st-band { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; fill:#5b626e; }
#stGraph .st-rule { stroke:#212121; stroke-width:1; }
#stGraph .st-n { cursor:pointer; outline:none; }
#stGraph .st-n rect { stroke-width:1.8; }
/* Each status names its colour (--c) and fill (--f) once; the resting box and the ONE brightening rule below read them. */
#stGraph .st-n.running   { --c:var(--st-run);   --f:var(--st-run-fill); }
#stGraph .st-n.available { --c:var(--st-avail); --f:var(--st-avail-fill); }
#stGraph .st-n.blocked   { --c:var(--st-block); --f:var(--st-block-fill); }
#stGraph .st-n.nothing   { --c:var(--st-none);  --f:var(--st-none-fill); }
#stGraph .st-n.current   { --c:var(--st-cur);   --f:var(--st-cur-fill); }
#stGraph .st-n rect { stroke:var(--c); fill:var(--f); }
#stGraph .st-n.current rect { stroke:rgba(63,191,106,.65); }
/* D-77 amendment 10: the hover (and focus) outline takes the box's OWN state colour, never gold; a slightly heavier
   line is what shows the hover. */
#stGraph .st-n:not(.sel):hover rect, #stGraph .st-n:not(.sel):focus-visible rect { stroke:var(--c); stroke-width:2.4; }
/* The clicked box keeps its OWN colour and brightens, border and fill, with a glow of that colour: blue stays blue,
   green stays green (Joshua D-32 item 7). One rule for every status; no gold, no per-colour case. */
#stGraph .st-n.sel rect { stroke:color-mix(in srgb, var(--c) 70%, #fff); stroke-width:2.6;
  fill:color-mix(in srgb, var(--c) 18%, var(--f)); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--c) 45%, transparent)); }
#stGraph .st-n.dim { opacity:.5; }                 /* "lightly muted (about half strength)" — design §3.2 */
#stGraph .st-n text { font-family:'DM Sans',sans-serif; pointer-events:none; }
#stGraph .st-n-name { font-size:12.5px; font-weight:600; fill:var(--text); }
#stGraph .st-n.nothing .st-n-name { fill:#7f8795; }
#stGraph .st-n-state { font-size:10.5px; font-weight:600; }
#stGraph .st-n.running .st-n-state { fill:var(--st-run); }
#stGraph .st-n.available .st-n-state { fill:var(--st-avail); }
#stGraph .st-n.blocked .st-n-state { fill:var(--st-block); }
#stGraph .st-n.nothing .st-n-state { fill:#6f7889; }
#stGraph .st-n.current .st-n-state { fill:var(--st-cur); }
#stGraph .st-pip.ok { fill:var(--st-cur); }
#stGraph .st-pip.no { fill:#3d4350; }

#stGraph .st-runpip { fill:var(--st-run); animation:st-pulse 1.6s ease-in-out infinite; }
@keyframes st-pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
/* the arrows: small, thin, faint grey; solid = required, dotted = conditional or optional (design §3.2) */
#stGraph .st-e { fill:none; stroke:#8b93a3; stroke-width:1.1; opacity:.6; stroke-linejoin:round; }
#stGraph .st-e.dot { stroke-dasharray:1.5 4; stroke-linecap:round; }
#stGraph .st-cap { fill:#8b93a3; opacity:.6; stroke-width:0; }
@media (prefers-reduced-motion:reduce) { #stGraph .st-runpip { animation:none; } }

/* Diagnostics */
#studio .st-sc-card { background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:16px; display:flex; flex-direction:column; gap:8px; max-width:560px; margin:0 auto; cursor:pointer; }
#studio .st-sc-card:hover, #studio .st-sc-card.picked { border-color:var(--gold); }
#studio .st-sc-t { font-size:.98rem; font-weight:700; color:#5fae6a; }   /* admin-only = the green of .tpl-cat.dev */
#studio .st-sc-d { font-size:.8rem; color:var(--muted); line-height:1.45; }

/* the bottom strip — legend on Case Lifecycle only; the usage note on any tab */
#studio .st-strip { flex:none; min-height:37px; display:flex; gap:17px; flex-wrap:wrap; align-items:center; padding:8px 16px; border-top:1px solid var(--border); background:var(--surface); font-size:.75rem; color:var(--muted); }
#studio .st-strip .st-lg { display:inline-flex; align-items:center; gap:6px; }
#studio .st-strip.nolegend .st-lg { display:none; }
#studio .st-sw { width:15px; height:11px; border-radius:3px; border:1.8px solid; display:inline-block; }
#studio .st-sw.running { border-color:var(--st-run); background:var(--st-run-fill); }
#studio .st-sw.available { border-color:var(--st-avail); background:var(--st-avail-fill); }
#studio .st-sw.blocked { border-color:var(--st-block); background:var(--st-block-fill); }
#studio .st-sw.nothing { border-color:var(--st-none); background:var(--st-none-fill); }
#studio .st-sw.current { border-color:rgba(63,191,106,.65); background:var(--st-cur-fill); }
#studio .st-usage { margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--text); padding:3px 10px; border:1px solid var(--st-run); border-radius:6px; background:var(--st-run-fill); }
#studio .st-usage[hidden] { display:none; }
#studio .st-usage b { color:var(--st-run); }

/* the ONE sidebar — about 30% wider than v05's 350px (design §3.5), then 18% wider again: 455 × 1.18 ≈ 537px
   (Joshua D-32 item 6, inside his 15–20%), and since push 7 wider still by half the dead space beside it (D-65, the
   --st-grow rule on .st-stage above). The main column gives up the space (flex:1, min-width:0). */
#studio .st-side { width:calc(var(--st-rail0) + var(--st-grow)); flex:none; border-left:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; min-height:0; }
#studio .st-m1 { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; }   /* a window too short for Running + two cards each scrolls the sidebar whole; nothing is cut off */
#studio .st-sec { display:flex; flex-direction:column; min-height:0; border-bottom:1px solid var(--st-div); }
#studio .st-sec:last-child { border-bottom:none; }
#studio .st-sec-hd { flex:none; padding:12px 14px 7px; font-size:.86rem; font-weight:700; color:#f4f4f4; display:flex; justify-content:space-between; align-items:baseline; }
/* Rail typography (Joshua D-32 item 10): section headers white; each section's content indented 10px from its header;
   body text (the description, the empty lines, the bullet lists) muted; the rail's CARDS keep their own colours. */
#studio .st-sec-sc { overflow-y:auto; padding:2px 14px 14px 24px; display:flex; flex-direction:column; gap:7px; }
#studio .st-sec.running { flex:0 0 auto; }                              /* takes all it needs, never shrinks */
/* EVERY RAIL SECTION IS THE SIZE OF ITS CARDS (push 13 F-20 B, Joshua; addendum 11): Queue and History no longer split
   the rest or keep a 307px floor (design §3.5's "about two cards each", retired); an empty section is its one italic
   line. The rail (.st-m1) scrolls whole when they outgrow it. */
#studio .st-sec.queue, #studio .st-sec.history { flex:0 0 auto; }
#studio .st-body { flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
#studio .st-blk { display:flex; flex-direction:column; gap:6px; padding-bottom:12px; padding-left:10px; border-bottom:1px solid var(--st-div); }
#studio .st-blk:last-child { border-bottom:none; padding-bottom:0; }
#studio .st-blk[hidden] { display:none; }
/* Mode 2's Description is pinned at the top of the rail while the rest scrolls beneath it (Joshua D-32 item 5).
   ONE GAP ABOVE EVERY SECTION HEADING (Joshua D-61, push 6 item 9): every section sits the body's one `gap` below the
   separator above it, Description included. The pin used to reach back over the body's top padding with a -12px
   margin, but a sticky box is held inside the scroller's padding, so it was pushed 12px down onto the next section:
   Available Runs sat 0px under Description's separator where Running, Queue and History sit 12px under theirs. So
   in Mode 2 the rail's top space is the pin's own padding, not the body's, and the pin sits where the flow puts it. */
#studio .st-body[data-st-mode="2"] { padding-top:0; }
#studio .st-blk.st-pin { position:sticky; top:0; z-index:2; background:var(--surface); padding-top:12px; }
#studio .st-blk-h { font-size:.86rem; font-weight:700; color:#f4f4f4; margin-left:-10px; }   /* the header sits at the block's edge; its content is indented */
#studio .st-flat { padding:0; overflow:visible; }
/* push 14 7a (R-8): Check all / Uncheck all at the right of the rows' heading, in the rail's muted-button look (.st-back's:
   the border brightens with the word on hover); the 50-row line under it, muted. */
#studio .st-blk-hrow { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }   /* the heading sits where every block's does (D-61) */
#studio .st-checkall { margin:-3px 0; background:var(--surface); color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:2px 10px; font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600; cursor:pointer; }
#studio .st-checkall:hover { color:var(--text); border-color:var(--muted); }
#studio .st-cap-note { font-size:.75rem; line-height:1.4; color:var(--muted); }
#studio .st-cap-note[hidden] { display:none; }
#studio .st-dep { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:9px 11px; border:1px solid var(--st-block); border-radius:7px; background:var(--st-block-fill); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.75rem; text-align:left; cursor:pointer; }
#studio .st-dep b { font-size:.8rem; }
#studio .st-dep:hover { border-color:var(--gold); }
#studio .st-dep .go { display:inline-flex; color:var(--st-block); flex:none; }
#studio .st-dep.still { cursor:default; }
#studio .st-dep.still:hover { border-color:var(--st-block); }
/* Run Order (Joshua D-78): the same card in BLUE, the Available colour — the skill can be run now. */
#studio .st-dep.ro { border-color:var(--st-avail); background:var(--st-avail-fill); }
#studio .st-dep.ro .go { color:var(--st-avail); }
#studio .st-dep.ro.still:hover { border-color:var(--st-avail); }
/* The Run Order launch screen (D-78 amendments 2-4): the helper line, then one collapsed section per run. */
#studio .st-ro-help { font-size:.8rem; color:var(--muted); line-height:1.45; }
#studio .st-ro-sec { border:1px solid var(--border); border-radius:7px; background:var(--surface-2, var(--surface)); }
#studio .st-ro-sec > summary { list-style:none; cursor:pointer; padding:9px 11px; display:flex; flex-direction:column; gap:2px; }
#studio .st-ro-sec > summary::-webkit-details-marker { display:none; }
#studio .st-ro-sec > summary:hover { color:var(--gold); }
#studio .st-ro-sec > summary:focus-visible { outline:1px solid var(--gold); outline-offset:1px; }
#studio .st-ro-t { font-weight:600; font-size:.8rem; }
#studio .st-ro-t::before { content:"\25B8"; display:inline-block; width:1em; color:var(--muted); }
#studio .st-ro-sec[open] .st-ro-t::before { content:"\25BE"; }
#studio .st-ro-sets { font-size:.75rem; color:var(--muted); padding-left:1em; }
#studio .st-ro-sec > .st-blk { padding:0 11px 9px 21px; }
#studio .st-why { padding:8px 10px; border:1px dashed var(--st-block); border-radius:7px; font-size:.75rem; color:var(--text); line-height:1.4; }
#studio .st-desc { font-size:.8rem; line-height:1.5; color:var(--muted); }
#studio .st-rows { display:flex; flex-direction:column; gap:6px; }
#studio .st-row { display:flex; gap:9px; align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); cursor:pointer; font-size:.75rem; line-height:1.35; }
#studio .st-row:hover { border-color:rgba(201,168,76,.5); }
#studio .st-row input { margin:1px 0 0; flex:none; }
/* Every Studio checkbox is blue, as on Templates (#1a73e8 — app.css .tpl-cat-row, "boolean checkboxes = blue"; Joshua
   D-37 item 24). One rule for the whole screen: the rows, the Test Switches and anything added later. */
#studio input[type="checkbox"] { accent-color:#1a73e8; }
#studio .st-row b { font-size:.8rem; font-weight:600; display:block; color:var(--text); }
#studio .st-row .sub { color:var(--muted); display:block; margin-top:2px; }
#studio .st-bul { margin:0; padding-left:18px; font-size:.8rem; line-height:1.5; color:var(--muted); }
#studio .st-bul li { margin:2px 0; }
#studio .st-foot { flex:none; padding:11px 14px; border-top:1px solid var(--border); display:flex; gap:8px; }
#studio .st-foot button { flex:1 1 0; min-width:0; padding:8px 13px; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:600; cursor:pointer; }   /* Back and Continue/Launch the same size */
#studio .st-back { background:var(--surface); color:var(--muted); border:1px solid var(--border); }
/* On hover the border brightens with the word, one step each along the same token ladder (--border → --muted as the
   word goes --muted → --text): the house convention for a muted button (.d-subtab / .d-clienttab, app.css). Joshua D-60,
   push 6 item 8. Keyboard focus keeps its own ring, unchanged. */
#studio .st-back:hover { color:var(--text); border-color:var(--muted); }
#studio .st-go { background:var(--surface-3); color:var(--gold); border:1px solid var(--gold); }
#studio .st-go:hover:not(:disabled) { filter:brightness(1.25); }
#studio .st-go:disabled { opacity:.5; cursor:not-allowed; color:var(--muted); border-color:var(--border); }
/* the sidebar run cards: the Live Stream chassis (.nf-row, app.css) holding R6's parts, drawn in the ONE card style above
   (D-83); only the sidebar's own behaviour here. A run waiting on a question is gold by its tone (ANALYST C-14). */
#studio .st-card .nf-run-acts { margin-left:0; }                /* no category gutter in the sidebar */
/* push 14 R-2: a rail run card opens in place on a click (its body, LSRunCard's `.lsrc-body`, under the card's text) */
#studio .st-card { cursor:pointer; }
#studio .st-card .lsrc-body { margin-left:0; }
/* PUSH 15 (D-109 am. 2, ruling 8): drag-to-reorder is removed, so no card is draggable and the grab hand and the grip go. */
/* PUSH 15 rulings 1 and 15 (D-109; D-111 (p14.1) item 3): the run card's "⋯" in row 1's slot, where the × was — the house
   size (app.css, beside the shared remove X: 18px, stroke 2.4), no padding, so its right edge is the time and initials
   column's right edge under it. Muted, white on hover or while its menu is open. */
#studio .st-more { background:none; border:none; color:#7d8698; cursor:pointer; line-height:1; padding:0; margin:0; display:inline-flex; align-items:center; }
#studio .st-more:hover, #studio .st-more:focus-visible { color:#f4f4f4; }
/* PUSH 15 ruling 19 (D-111 addendum, time line): the rail card's time ("Started: …", "Queued: …", every time word) is drawn
   as the initials under it are — their size, their muted colour, their weight — and keeps its right alignment. */
#studio .st-card .lsrc-hgrid .lsrc-h-date { color:var(--muted); font-size:var(--ar-right-size); font-weight:400; }   /* push 15 MG-2: the tile's right-column size */