/* The Studio shell (T0): the rail, the top bar, and the Library / Centre /
   Right panels with their resize grips.

   The shell draws frames only. Each data-slot is filled by the ticket that
   owns it, which styles it from its own stylesheet (for example mixer.css may
   style [data-slot="mixer"]). The shell decides what is on screen from the
   data attributes ui/shell.ts sets on #shell:
     data-screen   first-time | splitting | song
     data-library, data-split, data-now, data-live, data-mixer, data-player   on | off
     data-sheet    right | center | bottom | float | off
   and sizes the panels from --library-px, --sheet-px and --live-px.

   Measured against the design at 1728×1117: rail 72, top bar 64, library 280,
   sheet panel 380, centre padding 20 and gap 16.

   Stacking, bottom to top: the panels (auto), the resize grips (3, inside
   the shell body), the floating sheet (30), the rail with its account
   popover (40), and tooltips on top of everything, the top bar included:
   they open in the browser's top layer (ui/tooltip.ts; z-index 50 where
   popovers aren't supported). The rail's sticky position
   gives it its own stacking context, so it needs a z-index above the shell
   for the account popover (which opens over the library and the player) to
   take clicks. Area popovers (the layout menu, pickers) open inside the
   centre and never cross the rail. */

.studio-page {
  height: 100vh;
  overflow: hidden;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: var(--st-font);
  font-size: 13px;
  line-height: normal;
}

.studio-page .app {
  grid-template-columns: 72px minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
}

/* ---- The shell ---------------------------------------------------------- */

.st-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  background: var(--st-bg);
}

.st-shell__top {
  flex: none;
  display: flex;
  /* The top bar's narrow rules (the Extract chips, the Layout button's name) query its width. */
  container: st-top / inline-size;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--st-line);
  background: var(--st-panel);
}

.st-shell__topbar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The Layout button (decision 39): after Split stems and a 1×24 divider, before
   the bell. The menu hangs from this box, right-aligned, 8px below. */
.st-shell__layout-menu {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.st-shell__layout-menu::before {
  content: '';
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--st-line);
}
.st-shell__notifications {
  flex: none;
  display: flex;
  align-items: center;
}

.st-shell__body {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}

.st-shell__library {
  flex: none;
  width: var(--library-px, 280px);
  min-width: 0;
  overflow: auto;
  /* Tab scrolls an item to the edge with its focus ring still in view. */
  scroll-padding-block: 6px;
  border-right: 1px solid var(--st-line);
  background: var(--st-panel);
}

.st-shell__center {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow: auto;
}

.st-shell__right {
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--sheet-px, 380px);
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--st-line);
  background: var(--st-panel);
}

.st-shell__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Centre slots --------------------------------------------------------- */

.st-shell__split { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.st-shell__now {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}
.st-shell__header { flex: 1; min-width: 0; }

/* ---- The mixer slot: the contract with mixer.css (decision 16) ----------------

   The centre column is a flex column. On a short window (below about 1080px
   high in Practice) the panels above the mixer take their height first, and
   the mixer card gets what is left, down to --st-mixer-min-h. Live chords
   keeps the height the layout gives it (never below the store's 180px
   minimum, where its content already fills the panel); the mixer's tracks
   scroll instead. Below the mixer's minimum a bottom-docked sheet gives up
   height; only then does the centre column scroll.

   Inside the card the shell guarantees:
   - [data-slot='mixer-head'], [data-slot='sections'] and [data-slot='transport']
     never shrink (flex: none), so the header and the transport row stay whole
     and on screen;
   - [data-slot='mixer-tracks'] is the only part that gives: flex 1 (1 1 0%) with
     min-height 0, so its height is bounded by the card, never by its content.
     It is a size container named `st-mixer-tracks`; no rule queries it now
     (the rows have fixed heights).
   mixer.css owns what happens inside the tracks slot: it must scroll it
   (overflow-y: auto) or shrink the rows, and keep everything it draws within
   the slot's box, so no row ever paints over the transport. */

.st-shell {
  /* The smallest mixer card the shell keeps before the centre scrolls: the
     header row, the Sections row, a ruler and one track, and the transport. */
  --st-mixer-min-h: 272px;
  /* A bottom-docked sheet shrinks to this before the centre scrolls. */
  --st-sheet-bottom-min-h: 200px;
}

.st-shell__live { flex: none; height: var(--live-px, 247px); min-height: 0; }
.st-shell[data-mixer='off'] .st-shell__live { flex: 1; height: auto; }

.st-shell__mixer { flex: 1; display: flex; flex-direction: column; min-height: var(--st-mixer-min-h); }
.st-shell__mixer-head,
.st-shell__sections,
.st-shell__transport { flex: none; }
.st-shell__mixer-tracks {
  flex: 1;
  min-height: 0;
  container: st-mixer-tracks / size;
}

.st-shell__sheet-host { display: flex; flex-direction: column; min-height: 0; }
.st-shell[data-sheet='center'] .st-shell__sheet-host { flex: 1; }
.st-shell[data-sheet='bottom'] .st-shell__sheet-host {
  flex: 0 1 var(--sheet-px, 380px);
  height: var(--sheet-px, 380px);
  min-height: min(var(--sheet-px, 380px), var(--st-sheet-bottom-min-h));
}
.st-shell__sheet { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.st-shell__player { flex: none; }

.st-shell__float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  width: var(--sheet-px, 380px);
  height: min(70vh, 720px);
  border: 1px solid var(--st-line-strong);
  border-radius: var(--st-radius-card);
  background: var(--st-panel);
  box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--st-shadow) 70%, transparent);
  overflow: hidden;
}

/* ---- Resize grips: zero-size edges, the pill centred on the border ------- */

.st-shell__edge { position: relative; flex: none; z-index: 3; }
.st-shell__edge--library,
.st-shell__edge--sheet { width: 0; }
.st-shell__edge--live { height: 0; margin: -8px 0; }

.st-grip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 3px;
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-line);
  touch-action: none;
}
.st-grip--x {
  top: 50%;
  left: -3px;
  flex-direction: column;
  width: 6px;
  height: 36px;
  transform: translateY(-50%);
  cursor: col-resize;
}
.st-grip--y {
  top: -3px;
  left: 50%;
  width: 36px;
  height: 6px;
  transform: translateX(-50%);
  cursor: row-resize;
}
.st-grip__dot { width: 2px; height: 2px; border-radius: 1px; background: var(--st-text-faint); }
.st-grip:hover,
.st-grip.is-dragging { background: var(--st-line-strong); }
/* The grips' ring comes from controls.css, like every other control's. */

/* The skip link shows at the page's top-left corner: its ring goes inside. */
.studio-page .skip { --st-focus-offset: -2px; }

/* ---- What is on screen ---------------------------------------------------- */

.st-shell:not([data-screen='song']) .st-shell__edge,
.st-shell[data-library='off'] .st-shell__library,
.st-shell[data-library='off'] .st-shell__edge--library,
.st-shell[data-split='off'] .st-shell__split,
.st-shell[data-now='off'] .st-shell__now,
.st-shell[data-live='off'] .st-shell__live,
.st-shell[data-live='off'] .st-shell__edge--live,
.st-shell[data-mixer='off'] .st-shell__edge--live,
.st-shell[data-mixer='off'] .st-shell__mixer,
.st-shell[data-player='off'] .st-shell__player,
.st-shell[data-sections-row='off'] .st-shell__sections,
.st-shell:not([data-sheet='right']) .st-shell__right,
.st-shell:not([data-sheet='right']) .st-shell__edge--sheet,
.st-shell:not([data-sheet='center']):not([data-sheet='bottom']) .st-shell__sheet-host,
.st-shell:not([data-sheet='float']) .st-shell__float {
  display: none;
}

/* ---- The sign-in gate ------------------------------------------------------ */

.st-shell[data-gate='closed'] .st-shell__library,
.st-shell[data-gate='closed'] .st-shell__edge,
.st-shell[data-gate='closed'] .st-shell__right,
.st-shell[data-gate='closed'] .st-shell__float,
.st-shell[data-gate='closed'] .st-shell__center > :not(.st-shell__gate) {
  display: none;
}
.st-shell[data-gate='closed'] .st-shell__center { align-items: center; justify-content: center; }
.st-shell[data-gate='closed'] .st-shell__gate {
  display: block;
  padding: 24px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-card);
  background: var(--st-surface);
}

/* ---- Narrow screens: the panels stack under the centre ------------------- */

/* Tablet and phone are out of scope (decision 16): the only promise is no
   page-level sideways scroll. Wide rows (the top bar's link input and Split
   button) scroll inside their own region instead of widening the page. */
@media (max-width: 900px) {
  .studio-page { height: auto; overflow: auto; }
  /* Clipped sideways only, so the Layout menu can hang below the bar. */
  .st-shell__top { overflow-x: clip; overflow-y: visible; }
  .st-shell__topbar { align-self: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  /* The stacked page grows with its content, so the mixer's desktop sizing
     (a minimum, and a size container that ignores its content) is off. */
  .st-shell { --st-mixer-min-h: 0px; }
  .st-shell__mixer-tracks { container-type: normal; }
  .studio-page .app { height: auto; min-height: 100vh; }
  .studio-page .rail { position: sticky; top: 0; }
  .st-shell { height: auto; min-height: 100vh; }
  .st-shell__body { flex-direction: column; }
  .st-shell__library,
  .st-shell__right { width: auto; max-height: 60vh; border: 0; border-top: 1px solid var(--st-line); }
  .st-shell__library { order: 2; }
  .st-shell__right { order: 3; }
  .st-shell__edge--library,
  .st-shell__edge--sheet { display: none; }
}