/* studio-shell.css: the one shell (studio-shell.js). The source switch, the inspector header and
   the action bar. Loaded after the four Studio sheets. Two faces, ink on paper, colour only for a
   verdict; the one inked mark in the rail is the source switch, as the selected channel was. */

/* 1. The source switch: one ruled line naming the source on stage. The 24-source menu opens
   under it and folds away once a source is chosen. */
html body.studio-page #studio-rail .source-switch{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:.6rem;
  width:auto;margin:.35rem 1.25rem .25rem;padding:.6rem .55rem .55rem;min-height:2.75rem;
  border:0;border-radius:0;background:var(--st-ink);color:var(--st-on-ink);
  font-family:var(--st-sans);font-size:.9375rem;font-weight:600;line-height:1.2;text-align:left;cursor:pointer;
}
html body.studio-page #studio-rail .source-switch-num{
  font-weight:500;font-variant-numeric:tabular-nums lining-nums;opacity:.72;
}
html body.studio-page #studio-rail .source-switch-name{min-width:0;overflow-wrap:anywhere}
html body.studio-page #studio-rail .source-switch-cue{font-size:.8125rem;font-weight:500;opacity:.8}
html body.studio-page #studio-rail .source-switch-cue::after{content:" +";content:" +" / ""}
html body.studio-page #studio-rail .source-switch[aria-expanded="true"] .source-switch-cue::after{content:" \2212";content:" \2212" / ""}
html body.studio-page #studio-rail .source-switch:hover .source-switch-cue{opacity:1;text-decoration:underline;text-underline-offset:.2em}
html body.studio-page #studio-rail .source-switch:focus-visible{outline:2px solid var(--st-ink);outline-offset:2px}
html body.studio-page #studio-rail[data-sources="closed"] #studio-source{display:none}
/* While the menu is open the switch reads as its heading, and the selected channel keeps the mark. */
html body.studio-page #studio-rail[data-sources="open"] .source-switch{background:transparent;color:var(--st-ink);border-bottom:1px solid var(--st-ink)}

/* 2. The inspector header: the source's name and one sentence of what it does. */
html body.studio-page #studio-rail .inspector-head{margin:.6rem 0 .5rem}
html body.studio-page #studio-rail .inspector-head h2{
  margin:0 0 .3rem;font-family:var(--st-sans);font-size:1.375rem;font-weight:700;line-height:1.15;
  letter-spacing:-.01em;color:var(--st-ink);
}
html body.studio-page #studio-rail .inspector-head h2:focus{outline:0}
html body.studio-page #studio-rail .inspector-head h2:focus-visible{outline:2px solid var(--st-ink);outline-offset:3px}
html body.studio-page #studio-rail .inspector-head p{margin:0;font-family:var(--st-sans);font-size:.9375rem;line-height:1.45;color:var(--st-soft)}

/* 3. The action bar: the main action, Undo, Redo, Export, Pin, in that order for every source
   that has joined the shell. It stays in view at the top of the rail while the controls scroll. */
html body.studio-page #studio-rail .inspector-actions{
  position:sticky;top:0;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:0 0 .75rem;padding:.55rem 0 .6rem;
  background:var(--st-paper);border-bottom:1px solid var(--st-line);
}
html body.studio-page #studio-rail .inspector-actions[hidden]{display:none}
html body.studio-page #studio-rail .inspector-actions .btn{margin:0;min-height:2.5rem}
html body.studio-page #studio-rail .inspector-actions .btn:disabled{opacity:.45;cursor:default}
html body.studio-page #studio-rail .inspector-actions .ia-primary{margin-right:.2rem}
html body.studio-page #studio-rail .ia-export{position:relative}
html body.studio-page #studio-rail .ia-export>summary{list-style:none;display:inline-flex;align-items:center;cursor:pointer}
html body.studio-page #studio-rail .ia-export>summary::-webkit-details-marker{display:none}
html body.studio-page #studio-rail .ia-export>summary::after{content:" +";content:" +" / "";margin-left:.25rem}
html body.studio-page #studio-rail .ia-export[open]>summary::after{content:" \2212";content:" \2212" / ""}
html body.studio-page #studio-rail .ia-export-list{
  position:absolute;left:0;top:calc(100% + .3rem);z-index:6;min-width:13rem;
  display:flex;flex-direction:column;gap:0;padding:.3rem 0;
  background:var(--st-paper);border:1px solid var(--st-ink);
}
html body.studio-page #studio-rail .ia-export-list .btn{
  justify-content:flex-start;width:100%;margin:0;border:0;border-radius:0;text-align:left;min-height:2.5rem;
}
html body.studio-page #studio-rail .ia-export-list .btn:hover{background:var(--st-raised)}

/* A control the bar now carries stays wired but out of sight, so each action shows once. A row
   left with nothing to show closes up. */
/* Every control stays where the source put it. The bar repeats a few of them (#342 hid the rail
   copies; the author, 4 October 2026: "The studio modules have lost user granularity"), so nothing
   is hidden here any more. */

/* 3b. The keep line under the bar: whether this source's work is kept in this browser, and
   "Start fresh". A source that is not kept says so in ink, in words. */
html body.studio-page #studio-rail .inspector-keep{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;margin:-.35rem 0 .8rem;
  font-family:var(--st-sans);font-size:.8125rem;line-height:1.4;color:var(--st-soft);
}
html body.studio-page #studio-rail .inspector-keep [data-kept="no"]{color:var(--st-ink);font-weight:600}
html body.studio-page #studio-rail .inspector-keep .ia-fresh{min-height:2rem;padding:.15rem .5rem;font-size:.8125rem}

/* 3c. The readings fold while the visitor makes a piece (studio-readings.js). The column keeps
   its width, so the stage never changes size under the pen; only the readings step aside. */
html body.studio-page #studio-panel[data-readings="folded"] > .panel-scroll{display:none}
html body.studio-page #studio-panel .readings-folded{
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--st-line);
}
html body.studio-page #studio-panel .readings-folded[hidden]{display:none}
html body.studio-page #studio-panel .readings-folded p{margin:0;font-family:var(--st-sans);font-size:.9375rem;line-height:1.45;color:var(--st-soft)}
html body.studio-page #studio-panel .readings-folded .btn{min-height:2.5rem}

/* 3d. The empty sheet (Bring your own, Watch with me): the stage says what to do instead of
   showing the previous source's picture. Ink of the plate, on the plate. */
html body.studio-page #viewport-stage .stage-empty{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(28rem,calc(100% - 3rem));margin:0;text-align:center;pointer-events:none;
  font-family:var(--st-sans);font-size:.9375rem;line-height:1.5;color:var(--st-plate-ink);
}
html body.studio-page #viewport-stage .stage-empty[hidden]{display:none}

/* 4. Phone. The switch sits where the channel strip was, above the plate; the action bar is
   pinned to the bottom of the screen, in reach of a thumb. */
@media (max-width:899.98px){
  html body.studio-page #studio-rail .source-switch{order:2;margin:.1rem 1rem .6rem}
  html body.studio-page #studio-rail .inspector-actions{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;margin:0;
    padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--st-ink);border-bottom:0;
  }
  html body.studio-page #studio-rail .inspector-actions{flex-wrap:nowrap;gap:.3rem}
  html body.studio-page #studio-rail .inspector-actions :is(.btn,.ia-export>summary){
    flex:0 1 auto;min-width:0;padding-left:.55rem;padding-right:.55rem;font-size:.875rem;white-space:nowrap;
  }
  html body.studio-page #studio-rail .inspector-actions .ia-primary{margin-right:0}
  html body.studio-page #studio-rail .ia-export-list{top:auto;bottom:calc(100% + .3rem);right:0;left:auto}
  html body.studio-page:has(#studio-rail[data-inspector="unified"]){padding-bottom:4.5rem}
}

@media (forced-colors:active){
  html body.studio-page #studio-rail .source-switch{forced-color-adjust:none;background:Highlight;color:HighlightText}
  html body.studio-page #studio-rail[data-sources="open"] .source-switch{background:Canvas;color:CanvasText;border-bottom-color:CanvasText}
}
@media print{
  html body.studio-page #studio-rail :is(.source-switch,.inspector-actions){display:none!important}
}

/* The full Retro Engine on the stage (studio-retro.js): retro.html's own preview, with its output
   canvas, full-screen button and HUD, fills the stage while Retro is the source. */
html body.studio-page #viewport-stage .studio-retro-preview{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;border:0;background:transparent;
}
html body.studio-page #viewport-stage .studio-retro-preview[hidden],
html body.studio-page #viewport-stage canvas[hidden]{display:none!important}
html body.studio-page #viewport-stage .studio-retro-preview canvas{max-width:100%;max-height:100%;width:auto;height:auto;image-rendering:pixelated}
html body.studio-page #retro-mount .re-sources{flex-wrap:wrap}
html body.studio-page #retro-mount .re-tab{flex:1 0 auto}