/* SMAU FILE
 * Path: css/smau-studio2.css
 * Owns: Creator Studio 2.0 shell — workspace nav (bottom bar on mobile, left
 *       rail on desktop), workspace panels, topbar save-state / issues / More
 *       menu, and the SHARED s2- primitives (rows, cards, fields, chips,
 *       buttons) used by the Hub / Project / Logic panels here and by the
 *       World panel (css/smau-studio2-world.css).
 * Invariants:
 *   - Workspace truth is #studio-root[data-ws]; CSS only presents it.
 *   - Tokens live on #studio-root so every panel inherits them.
 *   - World-specific rules stay in smau-studio2-world.css (w2- prefix).
 */

#studio-root {
  --s2-accent: #8b7cf8;
  --s2-accent-strong: #7c5cff;
  --s2-accent-soft: rgba(139, 124, 248, 0.14);
  --s2-ok: #3ecf8e;
  --s2-warn: #ffb454;
  --s2-danger: #ff5c5c;
  --s2-ink: rgba(238, 240, 248, 0.94);
  --s2-muted: rgba(238, 240, 248, 0.55);
  --s2-card: rgba(255, 255, 255, 0.04);
  --s2-card-border: rgba(255, 255, 255, 0.08);
  --s2-radius: 16px;

  /* Shell tokens (blueprint 00). --s2-tap is the floor for anything a thumb
     has to hit; the studio had 22×18px buttons before it existed. */
  --s2-tap: 44px;
  --s2-gap: 12px;
  --s2-pad: 14px;
  --s2-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Main split: nav + stage ─────────────────────────────────────── */

.studio2-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

.studio2-stage {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.studio2-ws {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

#studio-root[data-ws="hub"] [data-ws-panel="hub"],
#studio-root[data-ws="build"] [data-ws-panel="build"],
#studio-root[data-ws="world"] [data-ws-panel="world"],
#studio-root[data-ws="logic"] [data-ws-panel="logic"],
#studio-root[data-ws="project"] [data-ws-panel="project"] {
  display: flex;
}

/* The pre-2.0 studio body is now nested inside the Build panel. */
#studio2-ws-build .studio-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Workspace nav — left rail on wide, bottom bar on narrow ─────── */

.studio2-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 10px 6px;
  border-right: 1px solid var(--studio-border);
  background: rgba(255, 255, 255, 0.02);
}

.studio2-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 62px;
  min-height: 54px;
  padding: 8px 6px;
  border-radius: 12px;
  color: var(--s2-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.studio2-nav-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--s2-ink); }

.studio2-nav-btn[data-state="on"] {
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
}

.studio2-nav-btn:focus-visible {
  outline: 2px solid var(--s2-accent);
  outline-offset: 2px;
}

.studio2-nav-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio2-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Topbar additions ────────────────────────────────────────────── */

.studio2-breadcrumb {
  border-radius: 10px;
  padding: 4px 8px;
  text-align: left;
  transition: background 0.15s ease;
}
.studio2-breadcrumb:hover { background: rgba(255, 255, 255, 0.06); }
.studio2-breadcrumb:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.studio2-save-state {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--s2-ok);
  background: rgba(62, 207, 142, 0.1);
  white-space: nowrap;
}
.studio2-save-state[data-state="saving"] {
  color: var(--s2-muted);
  background: rgba(255, 255, 255, 0.06);
}
/* A refused write. This must never be mistaken for the resting state, so it
   takes the danger colour and stays visible at every width. */
.studio2-save-state[data-state="failed"] {
  color: var(--s2-danger);
  background: rgba(255, 92, 92, 0.14);
}

/* The physical Save button. Autosave still does the work — this is the press
   the author wanted to be able to make, so it acknowledges itself briefly and
   then goes quiet again rather than shouting. */
.studio2-save-btn[data-state="done"] {
  color: var(--s2-ok);
  background: rgba(62, 207, 142, 0.14);
}
.studio2-save-btn[data-state="failed"] {
  color: var(--s2-danger);
  background: rgba(255, 92, 92, 0.14);
}

.studio2-issues {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.studio2-issues[data-state="hidden"] { display: none; }
.studio2-issues[data-state="warning"] { color: var(--s2-warn); background: rgba(255, 180, 84, 0.12); }
.studio2-issues[data-state="error"] { color: var(--s2-danger); background: rgba(255, 92, 92, 0.12); }

.studio2-more { position: relative; }

/* The ⋯ glyph is a bare text node, not a .studio-tool-icon span — so
   smau-studio.css's "below 1240px the labels give way" rule
   (.studio-root .studio-tool-btn { font-size: 0 }) was zeroing it, and the
   More menu — one of blueprint 00's four persistent header elements —
   rendered as an empty box on every screen narrower than 1240px. Measured at
   390×844: 44×44 button, font-size 0px, nothing drawn. An id beats that rule's
   0,2,0 without needing markup. Sized to read as a real affordance, not a
   12.5px speck. */
#studio2-btn-more {
  font-size: 19px;
  line-height: 1;
  justify-content: center;
}

.studio2-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  display: none;
  flex-direction: column;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--studio-border);
  background: #161a26;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.studio2-more-menu[data-state="open"] { display: flex; }

.studio2-menu-item {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--s2-ink);
}
.studio2-menu-item:hover { background: rgba(255, 255, 255, 0.07); }

/* ── Shared s2- primitives ───────────────────────────────────────── */

.s2-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Scroll containment: a fling that runs out of screen must stop here, not
     chain through to the page behind the studio. */
  overscroll-behavior: contain;
  padding: 20px 18px 40px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s2-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--s2-ink);
}

.s2-sub { font-size: 13px; color: var(--s2-muted); margin: 0; }
.s2-center { text-align: center; }

.s2-section-label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--s2-accent);
}

/* Blueprint 00 puts the screen title hard left next to Back, big and bold —
   not centred inside a 56px counterweight. The centred variant made every
   sub-screen title jump horizontally as the Back label changed length, and
   reserved dead space on the right where the Saved chip and ⋮ belong. */
.s2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--s2-tap);
}
.s2-head-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--s2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kept as a hook so the modules that emit it need no edit; it is a spacer for
   a centred title, and the title is no longer centred. */
.s2-head-spacer { flex: 0 0 0; }

.s2-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--s2-tap);
  min-width: var(--s2-tap);
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--s2-accent);
  border-radius: 10px;
}
.s2-back:hover { background: var(--s2-accent-soft); }
.s2-back:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.s2-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--s2-card);
  border: 1px solid var(--s2-card-border);
  border-radius: var(--s2-radius);
  padding: 14px;
  color: var(--s2-ink);
}

.s2-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.s2-card-title-meta { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--s2-muted); }

.s2-row-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  text-align: left;
  background: var(--s2-card);
  border: 1px solid var(--s2-card-border);
  border-radius: var(--s2-radius);
  color: var(--s2-ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.s2-row:not(.s2-row--static):hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
.s2-row:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.s2-row--danger, .s2-row--danger strong { color: var(--s2-danger); }

.s2-row-icon {
  flex: 0 0 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
  font-size: 16px;
}
.s2-row--danger .s2-row-icon { background: rgba(255, 92, 92, 0.12); color: var(--s2-danger); }

.s2-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s2-row-body strong { font-size: 14px; font-weight: 700; }
.s2-row-body span { font-size: 12px; color: var(--s2-muted); }

.s2-chevron { flex: 0 0 auto; color: var(--s2-muted); font-size: 18px; }

.s2-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
  white-space: nowrap;
}

.s2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--s2-card-border);
  color: var(--s2-ink);
}

.s2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--s2-ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--s2-card-border);
  transition: background 0.15s ease, transform 0.1s ease;
}
.s2-btn:hover { background: rgba(255, 255, 255, 0.11); }
.s2-btn:active { transform: scale(0.98); }
.s2-btn:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.s2-btn--primary {
  background: linear-gradient(135deg, var(--s2-accent), var(--s2-accent-strong));
  border-color: transparent;
  color: #fff;
}
.s2-btn--primary:hover { background: linear-gradient(135deg, #9a8dfa, var(--s2-accent-strong)); }

.s2-btn--danger { color: var(--s2-danger); border-color: rgba(255, 92, 92, 0.35); background: rgba(255, 92, 92, 0.08); }
.s2-btn--big { width: 100%; min-height: 52px; font-size: 15px; }

.s2-icon-btn {
  flex: 0 0 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--s2-muted);
  font-size: 15px;
}
.s2-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--s2-ink); }

.s2-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.s2-field:last-child { margin-bottom: 0; }
.s2-label { font-size: 12px; font-weight: 700; color: var(--s2-muted); }
.s2-hint { font-size: 12px; color: var(--s2-muted); }
.s2-count { font-size: 11px; color: var(--s2-muted); text-align: right; }

.s2-input, .s2-textarea, .s2-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* ≥16px on mobile to avoid browser zoom (spec §20.3) */
  color: var(--s2-ink);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--s2-card-border);
  border-radius: 12px;
  /* THE DROPDOWN IS NOT OURS TO PAINT — but its COLOUR SCHEME is.
     A <select>'s popup list is drawn by the browser, not by this stylesheet,
     and it defaults to the system light scheme: our light --s2-ink text then
     lands on the browser's WHITE popup and the options are unreadable
     ("pick from voices it already has looks entirely white so I can't read
     it" — owner, 2026-08-10). color-scheme tells the browser to draw its own
     widgets dark; the explicit option rules below are the belt to that
     braces, for engines that honour one and not the other. Same reason the
     date/time pickers and the caret elsewhere in the studio need it. */
  color-scheme: dark;
}

/* The popup rows themselves. Stated explicitly because a select that renders
   correctly closed and unreadably when OPEN is the worst version of this bug:
   nothing looks wrong until you try to use it. */
.s2-select option,
.s2-select optgroup {
  background: #14161f;
  color: var(--s2-ink);
}
.s2-textarea { resize: vertical; min-height: 78px; }
.s2-input:focus, .s2-textarea:focus, .s2-select:focus {
  outline: none;
  border-color: var(--s2-accent);
  box-shadow: 0 0 0 3px var(--s2-accent-soft);
}

.s2-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--s2-card-border);
}
.s2-seg-btn {
  flex: 1 1 0;
  min-height: 38px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--s2-muted);
}
.s2-seg-btn[data-state="on"] { background: var(--s2-accent); color: #fff; }
.s2-seg-btn:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.s2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 34px 20px;
  color: var(--s2-muted);
  font-size: 13px;
}
.s2-empty--inline { padding: 14px 6px; align-items: flex-start; text-align: left; }
.s2-empty-title { font-size: 15px; font-weight: 700; color: var(--s2-ink); }
.s2-empty p { margin: 0; max-width: 380px; }

.s2-save-state { font-size: 12px; font-weight: 600; color: var(--s2-ok); }
.s2-save-state[data-state="saving"] { color: var(--s2-muted); }

/* ── Hub ─────────────────────────────────────────────────────────── */

.s2-hub-head { display: flex; align-items: flex-end; justify-content: space-between; }

.s2-hub-continue { display: flex; gap: 14px; align-items: center; cursor: pointer; border-color: rgba(139, 124, 248, 0.4); }
.s2-hub-continue:hover { background: rgba(139, 124, 248, 0.08); }
.s2-hub-continue-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }

.s2-hub-cover {
  flex: 0 0 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 26px;
  font-weight: 800;
  color: var(--s2-accent);
  background: var(--s2-accent-soft);
}
.s2-hub-cover--small { flex-basis: 46px; height: 46px; font-size: 18px; border-radius: 12px; }

.s2-hub-title { font-size: 17px; font-weight: 800; color: var(--s2-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.s2-hub-meta { font-size: 12px; color: var(--s2-muted); }

.s2-hub-quick { display: flex; gap: 10px; }
.s2-hub-quick-card {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 72px;
}
.s2-hub-quick-card:hover { background: rgba(255, 255, 255, 0.07); }
.s2-hub-quick-icon {
  flex: 0 0 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
}
.s2-hub-quick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s2-hub-quick-text strong { font-size: 14px; }
.s2-hub-quick-text span:not(strong) { font-size: 12px; color: var(--s2-muted); }

.s2-hub-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.s2-hub-row:hover { background: rgba(255, 255, 255, 0.07); }
.s2-hub-row-body { flex: 1 1 auto; min-width: 0; }

/* ── New Project ─────────────────────────────────────────────────── */

.s2-form-card { display: block; }

.s2-np-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.s2-np-choice[data-state="on"] { border-color: var(--s2-accent); background: rgba(139, 124, 248, 0.07); }
.s2-np-choice-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.s2-np-choice-body strong { font-size: 15px; }
.s2-np-choice-body span:not(strong) { font-size: 12.5px; color: var(--s2-muted); }

.s2-radio {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--s2-muted);
}
.s2-np-choice[data-state="on"] .s2-radio {
  border-color: var(--s2-accent);
  background: radial-gradient(circle, var(--s2-accent) 0 40%, transparent 45%);
}

/* ── Project workspace ───────────────────────────────────────────── */

.s2-proj-card { display: flex; gap: 14px; align-items: flex-start; }
.s2-proj-card-body { flex: 1 1 auto; min-width: 0; }

.s2-doctor { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.s2-doctor[data-state="ok"] { border-color: rgba(62, 207, 142, 0.35); }
.s2-doctor[data-state="warning"] { border-color: rgba(255, 180, 84, 0.4); }
.s2-doctor[data-state="error"] { border-color: rgba(255, 92, 92, 0.45); }
.s2-doctor-icon {
  flex: 0 0 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 16px;
}
.s2-doctor[data-state="ok"] .s2-doctor-icon { background: rgba(62, 207, 142, 0.12); color: var(--s2-ok); }
.s2-doctor[data-state="warning"] .s2-doctor-icon { background: rgba(255, 180, 84, 0.12); color: var(--s2-warn); }
.s2-doctor[data-state="error"] .s2-doctor-icon { background: rgba(255, 92, 92, 0.12); color: var(--s2-danger); }
.s2-doctor-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s2-doctor-body strong { font-size: 14px; }
.s2-doctor-head { font-size: 13px; font-weight: 700; }
.s2-doctor[data-state="ok"] .s2-doctor-head { color: var(--s2-ok); }
.s2-doctor[data-state="warning"] .s2-doctor-head { color: var(--s2-warn); }
.s2-doctor[data-state="error"] .s2-doctor-head { color: var(--s2-danger); }
.s2-doctor-sub { font-size: 12px; color: var(--s2-muted); }

.s2-doctor-report { display: none; flex-direction: column; gap: 8px; }
.s2-doctor-report[data-state="open"] { display: flex; }

.s2-scene-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.s2-scene-chip {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--s2-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--s2-card-border);
}
.s2-scene-chip:hover { background: rgba(255, 255, 255, 0.1); }
.s2-scene-chip[data-state="on"] { background: var(--s2-accent); border-color: transparent; color: #fff; }

/* ── Logic workspace ─────────────────────────────────────────────── */

.s2-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
  color: var(--s2-ink);
}
.s2-flag-row:last-child { border-bottom: none; }
.s2-flag-row--link { cursor: pointer; border-radius: 8px; }
.s2-flag-row--link:hover { background: rgba(255, 255, 255, 0.05); }
.s2-flag-name { font-size: 13.5px; font-weight: 600; font-family: var(--smau-mono, ui-monospace, monospace); }
.s2-flag-row--link .s2-flag-name { font-family: inherit; }
.s2-flag-meta { font-size: 12px; color: var(--s2-muted); white-space: nowrap; }
.s2-flag-warn { color: var(--s2-warn); }

/* ── Responsive: bottom nav on narrow screens ────────────────────── */

@media (max-width: 900px) {
  .studio2-main { flex-direction: column-reverse; }

  /* Command bar: one uncramped row. The Phone nav tab replaces the exit
     button, and Undo/Redo shrink to their icons. */
  #studio-btn-exit { display: none; }
  .studio-topbar { gap: 8px; padding: 8px 10px; }
  .studio-toolbar { flex-wrap: nowrap; gap: 6px; }
  .studio2-breadcrumb { min-width: 0; flex: 1 1 auto; }
  .studio2-breadcrumb .studio-brand-text { display: block; min-width: 0; }
  .studio2-breadcrumb .studio-title,
  .studio2-breadcrumb .studio-sub { overflow: hidden; text-overflow: ellipsis; }

  .studio2-nav {
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--studio-border);
    background: rgba(10, 12, 20, 0.92);
  }

  .studio2-nav-btn { flex: 1 1 0; min-width: 0; min-height: 56px; }

  .s2-screen { padding: 16px var(--s2-pad) calc(30px + var(--s2-safe-b)); }

  /* Topbar: keep the command bar one row; undo/redo shrink to icons.
     Blueprint 00 / WCAG 2.5.8: a thumb target is 44px. Measured before this
     rule at 390×844 — More was 22×18, Undo/Redo 40×32, Play 78×33, and the
     breadcrumb 24px tall. #studio-root beats the .studio-root .studio-tool-btn
     padding override in smau-studio.css, which is what shrank them. */
  #studio-root .studio-toolbar .studio-tool-btn {
    min-height: var(--s2-tap);
    min-width: var(--s2-tap);
    /* flex-shrink:0 matters as much as the min-width. The toolbar is nowrap,
       so with the default shrink the 44px floor squeezed Play down to its
       min-width and its own label spilled out past the button. Nothing in
       here shrinks below its label; the breadcrumb is the flexible one and
       already ellipsises. */
    flex: 0 0 auto;
    padding: 8px 10px;
    justify-content: center;
  }
  #studio-root .studio2-breadcrumb { min-height: var(--s2-tap); }
  #studio-root .studio2-issues { min-height: var(--s2-tap); display: inline-flex; align-items: center; flex: 0 0 auto; }
  #studio-root .studio2-issues[data-state="hidden"] { display: none; }
  #studio-root .studio2-menu-item { min-height: var(--s2-tap); }
  /* The breadcrumb is the one thing on this bar that may be truncated — it
     already ellipsises, and the story name is recoverable by tapping it. So
     the command controls hold their size and the breadcrumb absorbs. */
  #studio-root .studio-toolbar { flex: 0 0 auto; }
  /* "Recovered unsaved changes" is a long state word; cap it rather than let
     it push Play off the bar. */
  #studio-root .studio2-save-state {
    flex: 0 0 auto;
    max-width: 36vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The story/scene navigator covers the bottom bar, so it owns the inset. */
  .s2-nav-sheet { padding-bottom: calc(28px + var(--s2-safe-b)); }
}

@media (max-width: 640px) {
  .s2-hub-quick { flex-direction: column; }
  /* The topbar has no room for a resting "Saved" at this width — the screen
     header carries it (SMAU.creator.shell.header). But hiding everything
     except "Saving…" also hid "Could not save" and "Storage almost full",
     which are the two states a creator must not miss. Hide only the quiet
     resting state. */
  .studio2-save-state[data-state="saved"] { display: none; }
}

/* ── Story & Scene Navigator sheet ───────────────────────────────── */

.s2-nav-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(5, 6, 12, 0.6);
  backdrop-filter: blur(2px);
}

.s2-nav-sheet {
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 28px;
  background: #10131d;
  border-left: 1px solid var(--studio-border);
  border-right: 1px solid var(--studio-border);
  animation: studio2-sheet-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes studio2-sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Both of these are role="button" tabindex="0" and are activated by Enter and
   Space (creator.workspaces.js) — so they must show where the focus is. */
.s2-nav-project { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.s2-nav-project:hover { background: rgba(255, 255, 255, 0.07); }
.s2-nav-project:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.s2-nav-scene {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.s2-nav-scene:hover { background: rgba(255, 255, 255, 0.07); }
.s2-nav-scene:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.s2-nav-scene[data-state="on"] { border-color: var(--s2-accent); }

.s2-nav-scene-num {
  flex: 0 0 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.07);
  color: var(--s2-ink);
}
.s2-nav-scene[data-state="on"] .s2-nav-scene-num { background: var(--s2-accent); color: #fff; }

.s2-nav-scene-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s2-nav-scene-name { font-size: 15px; font-weight: 700; color: var(--s2-ink); }

.s2-color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.s2-color-chip {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: transparent;
}
.s2-color-chip[data-state="on"] { border-color: #fff; box-shadow: 0 0 0 3px var(--s2-accent-soft); }

/* ── Build: vertical choreography list ───────────────────────────── */
/* View truth: .studio-panel[data-view]. Default (no attribute yet) keeps the
   timeline visible so nothing flashes before creator.choreo.js applies. */

.studio-choreo-region { display: none; }

.studio-panel[data-view="list"] .studio-timeline-region { display: none; }
.studio-panel[data-view="list"] .studio-choreo-region {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

/* Event category colors — used by both the list cards and the Add Beat sheet.
   Every category also has an icon and label; color is never the only signal. */
#studio-root {
  --cat-conversation: #8b7cf8;
  --cat-alert: #ffb454;
  --cat-call: #3ecf8e;
  --cat-pacing: #e8c064;
  --cat-logic: #ff6e9c;
  --cat-reveal: #5aa7ff;
  --cat-social: #c77dff;
  --cat-state: #7fd0d6;
}

.choreo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--s2-radius);
  background: var(--s2-card);
  border: 1px solid var(--s2-card-border);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.choreo-card:hover { background: rgba(255, 255, 255, 0.07); }
.choreo-card:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.choreo-card[data-editing="true"] { border-color: var(--s2-accent); background: rgba(139, 124, 248, 0.08); }

.choreo-card[data-cat="conversation"] { border-left: 3px solid var(--cat-conversation); }
.choreo-card[data-cat="alert"] { border-left: 3px solid var(--cat-alert); }
.choreo-card[data-cat="call"] { border-left: 3px solid var(--cat-call); }
.choreo-card[data-cat="pacing"] { border-left: 3px solid var(--cat-pacing); }
.choreo-card[data-cat="logic"] { border-left: 3px solid var(--cat-logic); }
.choreo-card[data-cat="reveal"] { border-left: 3px solid var(--cat-reveal); }
.choreo-card[data-cat="social"] { border-left: 3px solid var(--cat-social); }
.choreo-card[data-cat="state"] { border-left: 3px solid var(--cat-state); }

.choreo-num {
  flex: 0 0 auto;
  min-width: 22px;
  font-size: 14px;
  font-weight: 800;
  color: var(--s2-muted);
  text-align: center;
}

.choreo-icon {
  flex: 0 0 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--s2-card-border);
}

.choreo-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.choreo-type { font-size: 13px; font-weight: 800; }
.choreo-card[data-cat="conversation"] .choreo-type { color: var(--cat-conversation); }
.choreo-card[data-cat="alert"] .choreo-type { color: var(--cat-alert); }
.choreo-card[data-cat="call"] .choreo-type { color: var(--cat-call); }
.choreo-card[data-cat="pacing"] .choreo-type { color: var(--cat-pacing); }
.choreo-card[data-cat="logic"] .choreo-type { color: var(--cat-logic); }
.choreo-card[data-cat="reveal"] .choreo-type { color: var(--cat-reveal); }
.choreo-card[data-cat="social"] .choreo-type { color: var(--cat-social); }
.choreo-card[data-cat="state"] .choreo-type { color: var(--cat-state); }

.choreo-summary {
  font-size: 13.5px;
  color: var(--s2-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.choreo-cond { font-size: 11.5px; color: var(--s2-warn); }

.choreo-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.choreo-time { font-size: 12px; color: var(--s2-muted); font-family: var(--smau-mono, ui-monospace, monospace); }

.choreo-menu-btn {
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  color: var(--s2-muted);
  font-size: 16px;
}
.choreo-menu-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--s2-ink); }

.choreo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  border-radius: var(--s2-radius);
  border: 1.5px dashed rgba(139, 124, 248, 0.5);
  color: var(--s2-accent);
  font-size: 14px;
  font-weight: 700;
  background: rgba(139, 124, 248, 0.04);
}
.choreo-add:hover { background: rgba(139, 124, 248, 0.1); }

/* The way out of an empty phone-filtered scene, sitting where the beats
   would have been. */
.choreo-clear-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 10px;
  border-radius: var(--s2-radius);
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--s2-ink);
  font-size: 13.5px;
  font-weight: 600;
}
.choreo-clear-filter:hover { background: rgba(255, 255, 255, 0.09); }

.choreo-menu {
  position: fixed;
  z-index: 60;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--studio-border);
  background: #161a26;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.choreo-menu button {
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--s2-ink);
}
.choreo-menu button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.choreo-menu button:disabled { opacity: 0.4; cursor: default; }
.choreo-menu .choreo-menu-danger { color: var(--s2-danger); }

/* ── Add Beat sheet (restyles #creator-event-picker) ─────────────── */

#creator-event-picker.studio-picker {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 30;
  width: min(560px, 100%);
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 20px;
  border-radius: 18px 18px 0 0;
  max-height: 72vh;
  overflow: hidden;
  background: #141824;
  border: 1px solid var(--studio-border);
  border-bottom: none;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.55);
}
#creator-event-picker.studio-picker[data-state="open"] {
  display: flex;
  animation: studio2-sheet-up 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes studio2-sheet-up {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.studio-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.studio-picker-head .studio-picker-title { font-size: 20px; font-weight: 800; margin: 0; }
.studio-picker-cancel {
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--s2-accent);
  border-radius: 10px;
}
.studio-picker-cancel:hover { background: var(--s2-accent-soft); }

.studio-picker-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--s2-ink);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--s2-card-border);
  border-radius: 12px;
}
.studio-picker-search:focus { outline: none; border-color: var(--s2-accent); box-shadow: 0 0 0 3px var(--s2-accent-soft); }

#creator-event-picker .studio-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

#creator-event-picker .studio-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  text-align: left;
  border-radius: 14px;
  background: var(--s2-card);
  border: 1px solid var(--s2-card-border);
}
#creator-event-picker .studio-picker-item:hover { background: rgba(255, 255, 255, 0.07); }
#creator-event-picker .studio-picker-item:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

#creator-event-picker .studio-picker-icon {
  flex: 0 0 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 19px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--s2-card-border);
}
.studio-picker-icon[data-cat="conversation"] { background: rgba(139, 124, 248, 0.14); border-color: rgba(139, 124, 248, 0.35); }
.studio-picker-icon[data-cat="alert"] { background: rgba(255, 180, 84, 0.12); border-color: rgba(255, 180, 84, 0.35); }
.studio-picker-icon[data-cat="call"] { background: rgba(62, 207, 142, 0.12); border-color: rgba(62, 207, 142, 0.35); }
.studio-picker-icon[data-cat="pacing"] { background: rgba(232, 192, 100, 0.12); border-color: rgba(232, 192, 100, 0.35); }
.studio-picker-icon[data-cat="logic"] { background: rgba(255, 110, 156, 0.12); border-color: rgba(255, 110, 156, 0.35); }
.studio-picker-icon[data-cat="reveal"] { background: rgba(90, 167, 255, 0.12); border-color: rgba(90, 167, 255, 0.35); }
.studio-picker-icon[data-cat="social"] { background: rgba(199, 125, 255, 0.12); border-color: rgba(199, 125, 255, 0.35); }
.studio-picker-icon[data-cat="state"] { background: rgba(127, 208, 214, 0.12); border-color: rgba(127, 208, 214, 0.35); }

.studio-picker-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-picker-name { font-size: 14.5px; font-weight: 800; color: var(--s2-ink); }
.studio-picker-desc { font-size: 12.5px; color: var(--s2-muted); }

@media (prefers-reduced-motion: reduce) {
  #studio-root * { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLUEPRINT 00 — THE SHELL TOOLKIT (sh2-)
   Built by js/creator/creator.shell.js. Every rule here backs one of the five
   navigation patterns the blueprint names: 1 Overview, 2 Section List,
   3 Editor, 4 Picker / Sheet, 5 Action Menu — plus the persistent header they
   all wear. Class selectors only; the toolkit mints its own nodes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The persistent header ───────────────────────────────────────── */

.sh2-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: var(--s2-tap);
  margin-bottom: 4px;
}

.sh2-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--s2-tap);
  min-width: var(--s2-tap);
  padding: 0 8px 0 4px;
  margin-left: -4px;
  border-radius: 10px;
  color: var(--s2-accent);
  font-size: 14px;
  font-weight: 700;
}
.sh2-back:hover { background: var(--s2-accent-soft); }
.sh2-back:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.sh2-back-glyph { font-size: 22px; line-height: 1; }
.sh2-back-label { font-size: 14px; }

.sh2-head-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 6px;
}

.sh2-head-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--s2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Always know where you are" — the parenthetical context line. */
.sh2-head-context {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--s2-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh2-head-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--s2-tap);
}

/* The save indicator. Same words, same truth as the topbar chip — this one
   just survives a 390px screen, where the topbar chip has nowhere to go. */
.sh2-saved {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--s2-ok);
  background: rgba(62, 207, 142, 0.12);
  border: 1px solid rgba(62, 207, 142, 0.32);
}
.sh2-saved[data-state="saving"] {
  color: var(--s2-muted);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--s2-card-border);
}
/* "failed" is the ONE name for a refused write — creator.core reports the
   outcome, creator.workspaces writes it, this mirrors it. (It replaced two
   names, "error" and "full", that nothing ever wrote.) */
.sh2-saved[data-state="failed"] {
  color: var(--s2-danger);
  background: rgba(255, 92, 92, 0.12);
  border-color: rgba(255, 92, 92, 0.35);
}
.sh2-saved[data-state="recovered"] {
  color: var(--s2-warn);
  background: rgba(255, 180, 84, 0.12);
  border-color: rgba(255, 180, 84, 0.35);
}

/* The header's Save. Same handler and same states as the topbar button — the
   .studio2-save-btn class above carries the confirmed / failed colours, this
   only gives it the header's shape. */
.sh2-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-height: var(--s2-tap);
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--s2-ink);
  font-size: 13px;
  font-weight: 700;
}
.sh2-save:hover { background: rgba(255, 255, 255, 0.09); }
.sh2-save:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.sh2-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--s2-tap);
  min-height: var(--s2-tap);
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--s2-ink);
  font-size: 19px;
  line-height: 1;
}
.sh2-more:hover { background: rgba(255, 255, 255, 0.09); }
.sh2-more:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.sh2-more[aria-expanded="true"] {
  background: var(--s2-accent-soft);
  border-color: rgba(139, 124, 248, 0.4);
  color: var(--s2-accent);
}

/* ── Pattern 5 — the per-item action menu ────────────────────────── */

.sh2-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 6, 12, 0.35);
}

.sh2-menu {
  position: fixed;
  z-index: 61;
  min-width: 208px;
  max-width: min(300px, calc(100vw - 16px));
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--s2-card-border);
  background: #171a26;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: sh2-pop-in 0.14s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes sh2-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sh2-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--s2-tap);
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  color: var(--s2-ink);
  font-size: 14px;
  font-weight: 600;
}
.sh2-menu-item:hover { background: rgba(255, 255, 255, 0.07); }
.sh2-menu-item:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: -2px; }
.sh2-menu-item--danger { color: var(--s2-danger); }

/* A disabled item that only greys out is a dead end — it never says what
   would bring it back. The reason is part of the control. */
.sh2-menu-item[data-state="disabled"] {
  cursor: default;
  color: var(--s2-muted);
}
.sh2-menu-item[data-state="disabled"]:hover { background: none; }

.sh2-menu-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh2-menu-item-label { display: inline-flex; align-items: center; gap: 8px; }
.sh2-menu-item-icon { font-size: 15px; line-height: 1; }
.sh2-menu-item-why {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--s2-muted);
  white-space: normal;
}

/* ── Pattern 2 — the section list ────────────────────────────────── */

.sh2-list { display: flex; flex-direction: column; gap: 8px; }

.sh2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px var(--s2-pad);
  border-radius: var(--s2-radius);
  border: 1px solid var(--s2-card-border);
  background: var(--s2-card);
  color: var(--s2-ink);
  text-align: left;
}
.sh2-row:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
.sh2-row:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.sh2-row-wrap { display: flex; align-items: stretch; gap: 6px; }
.sh2-row-wrap .sh2-row { flex: 1 1 auto; min-width: 0; }

.sh2-row-icon {
  flex: 0 0 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
  font-size: 14px;
  font-weight: 800;
}

.sh2-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh2-row-body strong { font-size: 15px; font-weight: 700; }
.sh2-row-body span {
  font-size: 12.5px;
  color: var(--s2-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh2-row-meta { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--s2-muted); }
.sh2-row[data-tone="ok"] .sh2-row-meta { color: var(--s2-ok); }
.sh2-row[data-tone="warn"] .sh2-row-meta { color: var(--s2-warn); }
.sh2-row[data-tone="danger"] .sh2-row-meta { color: var(--s2-danger); }

.sh2-row-chevron { flex: 0 0 auto; font-size: 20px; color: var(--s2-muted); }

.sh2-row-more {
  flex: 0 0 var(--s2-tap);
  min-height: var(--s2-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s2-radius);
  border: 1px solid var(--s2-card-border);
  background: var(--s2-card);
  color: var(--s2-muted);
  font-size: 18px;
}
.sh2-row-more:hover { background: rgba(255, 255, 255, 0.08); color: var(--s2-ink); }
.sh2-row-more:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

/* ── Pattern 1 — the overview strip ──────────────────────────────── */

.sh2-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}

.sh2-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--s2-card-border);
  background: var(--s2-card);
  text-align: left;
}
.sh2-stat:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.sh2-stat-value { font-size: 21px; font-weight: 800; color: var(--s2-accent); line-height: 1.1; }
.sh2-stat[data-tone="ok"] .sh2-stat-value { color: var(--s2-ok); }
.sh2-stat[data-tone="warn"] .sh2-stat-value { color: var(--s2-warn); }
.sh2-stat[data-tone="danger"] .sh2-stat-value { color: var(--s2-danger); }
.sh2-stat-label { font-size: 11.5px; font-weight: 600; color: var(--s2-muted); }

/* ── Pattern 4 — the picker / bottom sheet ───────────────────────── */

.sh2-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 6, 12, 0.62);
  backdrop-filter: blur(2px);
}

.sh2-sheet {
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(16px + var(--s2-safe-b));
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--s2-card-border);
  border-bottom: none;
  background: #131725;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
  animation: sh2-sheet-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes sh2-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.sh2-sheet-grabber {
  flex: 0 0 auto;
  width: 44px;
  height: 4px;
  margin: 4px auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.sh2-sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--s2-tap);
}

.sh2-sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--s2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh2-sheet-close {
  flex: 0 0 auto;
  min-width: var(--s2-tap);
  min-height: var(--s2-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--s2-muted);
  font-size: 17px;
}
.sh2-sheet-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--s2-ink); }
.sh2-sheet-close:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.sh2-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.sh2-sheet-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--s2-muted); }

.sh2-sheet-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--s2-card-border);
}

.sh2-sheet-btn {
  flex: 1 1 0;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--s2-ink);
  font-size: 15px;
  font-weight: 700;
}
.sh2-sheet-btn:hover { background: rgba(255, 255, 255, 0.11); }
.sh2-sheet-btn:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.sh2-sheet-btn--primary {
  background: linear-gradient(135deg, #8b7cf8, var(--s2-accent-strong));
  border-color: transparent;
  color: #fff;
}
.sh2-sheet-btn--danger {
  color: var(--s2-danger);
  border-color: rgba(255, 92, 92, 0.35);
  background: rgba(255, 92, 92, 0.08);
}
.sh2-sheet-btn[data-state="disabled"] { opacity: 0.4; cursor: default; }
.sh2-sheet-btn[data-state="disabled"]:hover { background: rgba(255, 255, 255, 0.06); }

/* ── A PROJECT THAT SAYS WHAT IT IS ───────────────────────────────────────
   Two facts belong next to a project's name, because both change what you
   can do with it and neither should be a surprise you meet after you have
   started editing: whether it came with the app, and whether its author let
   you change it (creator.exportImport writes meta.permissions.editable; the
   lock itself lives in creator.core). */
.s2-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.s2-tag--builtin {
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
}
.s2-tag--locked {
  background: rgba(255, 180, 84, 0.14);
  color: var(--s2-warn);
}

.s2-locked-note {
  padding: var(--s2-pad);
  border-left: 3px solid var(--s2-warn);
}
.s2-locked-note strong { display: block; margin-bottom: 6px; font-size: 14px; }
.s2-locked-note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--s2-muted); }

/* The editing chrome goes away for a read-only project. This is manners, not
   security — creator.core refuses the write whether or not the button is on
   screen — but a control that quietly does nothing is its own bug. */
#studio-root[data-readonly] #creator-btn-add-event,
#studio-root[data-readonly] #creator-btn-add-scene,
#studio-root[data-readonly] #creator-btn-filler,
#studio-root[data-readonly] #creator-event-picker,
#studio-root[data-readonly] #creator-editor-save,
#studio-root[data-readonly] #creator-editor-delete { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE BUILD SHEET (js/creator/creator.buildsheet.js)

   What the ☰ opens on a phone. The rules it exists to keep, all of which the
   old squeezed-sidebar broke: names WRAP (nothing is ever "Kyung-…"), every
   target clears --s2-tap, the sheet scrolls vertically and NOTHING in it
   scrolls horizontally.
   ═══════════════════════════════════════════════════════════════════════════ */

.bs2-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.bs2-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bs2-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s2-muted);
  padding-bottom: 2px;
}
.bs2-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
}

.bs2-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--s2-muted);
}

/* ── Rows: full width, wrapping name, two quiet actions ───────────── */

.bs2-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid transparent;
}

.bs2-row[data-active="true"] {
  background: var(--s2-accent-soft);
  border-color: rgba(139, 124, 248, 0.4);
}

.bs2-row-pick {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: var(--s2-tap);
  padding: 8px 10px;
  border-radius: 12px;
  text-align: left;
  color: var(--s2-ink);
}
.bs2-row-pick:hover { background: rgba(255, 255, 255, 0.05); }
.bs2-row-pick:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: -2px; }

/* THE LINE THIS WHOLE FILE IS ABOUT. A story is called "Kyung-Ha Seo", not
   "Kyung-…" — so it wraps onto a second line and the row grows. */
.bs2-row-name {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bs2-row[data-active="true"] .bs2-row-name { color: var(--s2-accent); }

.bs2-row-meta {
  display: block;
  width: 100%;
  font-size: 11.5px;
  color: var(--s2-muted);
  white-space: normal;
}

.bs2-row-act {
  flex: 0 0 auto;
  min-width: var(--s2-tap);
  min-height: var(--s2-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--s2-muted);
  font-size: 14px;
}
.bs2-row-act:hover { background: rgba(255, 255, 255, 0.08); color: var(--s2-ink); }
.bs2-row-act--danger:hover { background: rgba(255, 92, 92, 0.14); color: var(--s2-danger); }
.bs2-row-act:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: -2px; }

.bs2-add {
  display: flex;
  align-items: center;
  min-height: var(--s2-tap);
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px dashed var(--s2-card-border);
  color: var(--s2-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.bs2-add:hover { color: var(--s2-accent); border-color: rgba(139, 124, 248, 0.5); }
.bs2-add:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

/* ── Phone: segmented chips that WRAP rather than scroll sideways ─── */

.bs2-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.bs2-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: var(--s2-tap);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--s2-card-border);
  background: var(--s2-card);
  color: var(--s2-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bs2-seg-btn[data-state="on"] {
  background: var(--s2-accent);
  border-color: var(--s2-accent);
  color: #fff;
}
.bs2-seg-btn:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.bs2-seg-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s2-accent);
}
.bs2-seg-dot[data-line="public"] { background: var(--s2-warn); }
.bs2-seg-btn[data-state="on"] .bs2-seg-dot { background: #fff; }

/* ── Apps: two columns, full labels, no horizontal anything ───────── */

.bs2-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}

.bs2-app {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--s2-tap);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: var(--s2-card);
  color: var(--s2-ink);
  text-align: left;
}
.bs2-app:hover { background: rgba(255, 255, 255, 0.08); }
.bs2-app:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.bs2-app-icon { flex: 0 0 auto; font-size: 15px; line-height: 1; }

/* "Lived-in filler" and "GFO Library" both used to arrive as "Lived-in fi"
   and "GFO Libra". They wrap now. */
.bs2-app-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}