/* Studio: shared bar and dialogs for the Blocking and Chiaraura labs. */
:root {
  /* SUMOFILMMAKER palette */
  --sumo-paper: #f7f7f2; --sumo-ink: #141a1a; --sumo-teal: #0098a7; --sumo-teal-bright: #01afbf;
  --sumo-yellow: #f5c519; --sumo-muted: #5c6666; --sumo-line: #d5dad4;
  /* Studio chrome (light, like the website) */
  --st-bg: var(--sumo-paper); --st-panel: #ffffff; --st-raised: #f1f1ec; --st-line: var(--sumo-line); --st-text: var(--sumo-ink);
  --st-muted: var(--sumo-muted); --st-teal: var(--sumo-teal); --st-gold: var(--sumo-yellow); --st-danger: #b3403c;
  /* Lab workspaces: same paper look as Scriptae */
  --mr-bg: #f7f7f2; --mr-panel: #ffffff; --mr-line: #d5dad4; --mr-text: #141a1a; --mr-muted: #5c6666;
  --mr-teal: #0098a7; --mr-gold: #9a7700;
  --bg: var(--mr-bg); --panel: var(--mr-panel); --border: var(--mr-line); --text: var(--mr-text); --muted: var(--mr-muted);
  --teal: var(--mr-teal); --gold: var(--mr-gold);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sumo-paper); color: var(--mr-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body.studio-lab { min-height: 100vh; }
button, input, select, textarea { font: inherit; }
.blockcraft h1, .chiaraura h1 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; letter-spacing: -.01em; }

/* The labs' own browser-only Save/Load buttons are replaced by the Studio bar. */
body.studio-lab #saveScene, body.studio-lab #loadScene { display: none !important; }

.st-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px; background: var(--sumo-paper); color: var(--sumo-ink); border-bottom: 2px solid var(--sumo-ink); }
.st-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--sumo-ink); text-decoration: none; }
.st-brand img { width: 42px; height: 42px; display: block; }
.st-wordmark { display: grid; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 24px; line-height: .9; color: var(--sumo-ink); }
.st-wordmark b { display: inline; font-weight: 800; }
.st-wordmark small { font-weight: 700; font-size: 10px; letter-spacing: .42em; margin-top: 3px; }
.st-tag { margin: 0 10px 0 2px; padding: 4px 9px; background: var(--sumo-teal); color: #fff; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; text-decoration: none; }
.st-apps { display: flex; gap: 0; flex-wrap: wrap; }
.st-apps a { padding: 9px 16px; color: var(--sumo-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.st-apps a:hover { color: var(--sumo-teal); }
.st-apps a.active { color: var(--sumo-paper); background: var(--sumo-ink); }
.st-user { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--st-muted); }
.st-user b { color: var(--sumo-ink); }

.st-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; background: #ffffff; color: var(--sumo-ink); border-bottom: 1px solid var(--st-line); }
.st-tools .st-title { flex: 1 1 240px; max-width: 420px; }
.st-status { font-size: 12.5px; color: var(--st-muted); margin-left: 4px; }
.st-input, .st-tools input, .st-dialog input, .st-dialog select, .st-dialog textarea {
  min-height: 38px; padding: 7px 10px; border: 1.5px solid #c6ccc7; border-radius: 2px; background: #ffffff; color: var(--sumo-ink); width: 100%;
}
.st-dialog textarea { min-height: 80px; resize: vertical; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1.5px solid var(--sumo-ink); border-radius: 2px;
  background: #ffffff; color: var(--sumo-ink); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; }
.st-btn:hover { background: var(--sumo-paper); color: var(--sumo-teal); }
.st-btn.primary { background: var(--sumo-yellow); border-color: var(--sumo-ink); color: var(--sumo-ink); }
.st-btn.primary:hover { background: #ffd43a; color: var(--sumo-ink); }
.st-btn.gold { background: var(--sumo-ink); border-color: var(--sumo-ink); color: var(--sumo-paper); }
.st-btn.gold:hover { background: var(--sumo-teal); border-color: var(--sumo-teal); color: #ffffff; }
.st-btn.danger { color: var(--st-danger); }
.st-btn.sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
.st-btn[disabled] { opacity: .45; cursor: not-allowed; }

.st-banner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; padding: 12px 20px; background: #fff6cf; color: var(--sumo-ink); border-bottom: 2px solid var(--sumo-yellow); font-size: 14px; }
.st-banner .grow { flex: 1 1 320px; min-width: 0; }
.st-banner p { margin: 4px 0 0; color: var(--st-muted); }
.st-review { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; flex: 1 1 520px; align-items: end; }
.st-review label { display: grid; gap: 4px; font-size: 12px; color: var(--st-muted); font-weight: 700; }
@media (max-width: 760px) { .st-review { grid-template-columns: 1fr; } }

.st-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 2px solid var(--sumo-ink); border-radius: 4px; background: #ffffff; color: var(--sumo-ink); }
.st-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.st-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.st-dialog h2 { margin: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 28px; line-height: 1; }
.st-dialog header p { margin: 4px 0 0; color: var(--st-muted); font-size: 13px; }
.st-dialog .body { padding: 4px 18px 16px; display: grid; gap: 10px; }
.st-dialog .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--st-line); }
.st-x { border: 0; background: transparent; color: var(--st-muted); font-size: 22px; cursor: pointer; line-height: 1; }
.st-field { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--st-muted); }
.st-list { display: grid; border: 1px solid var(--st-line); border-radius: 2px; overflow: hidden; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--st-line); }
.st-row:last-child { border-bottom: 0; }
.st-row .main { min-width: 0; }
.st-row .t { font-weight: 700; overflow-wrap: anywhere; }
.st-row .m { font-size: 12.5px; color: var(--st-muted); margin-top: 2px; }
.st-row .a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.st-empty { padding: 18px; text-align: center; color: var(--st-muted); font-size: 14px; }
.st-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--st-line); color: var(--st-muted); }
.st-pill.done { color: var(--sumo-teal); border-color: color-mix(in srgb, var(--st-teal) 50%, transparent); }
.st-pill.new { color: #7a5f00; background: #fff3c2; border-color: var(--sumo-yellow); }
.st-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 10px 16px; border-radius: 2px; background: var(--sumo-ink); border: 2px solid var(--sumo-teal-bright); color: var(--sumo-paper); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.st-toast.err { border-color: var(--st-danger); }
.st-loading { display: grid; place-items: center; min-height: 60vh; color: var(--st-muted); }
/* Chiaraura's browser-only "Save / Load setup" card is empty once Studio takes over saving. */
body.studio-lab .chiaraura-card:has(#saveScene):not(:has(button:not(#saveScene):not(#loadScene))) { display: none !important; }

/* ---- Paper theme for the labs (matches Scriptae; no light/dark switch) ---- */
body.studio-lab .blockcraft-card { box-shadow: 0 1px 2px rgba(20, 26, 26, .06); border-radius: 4px; }
body.studio-lab .blockcraft-stage { background: #fbfbf8; }
body.studio-lab .blockcraft-grid-floor { opacity: .9; }
body.studio-lab .blockcraft-button, body.studio-lab .blockcraft-add { border-radius: 2px; }
body.studio-lab .chiaraura {
  --chiaraura-bg: #f7f7f2; --chiaraura-card: #ffffff; --chiaraura-card-dark: #f1f1ec;
  --chiaraura-border: #d5dad4; --chiaraura-border-bright: #b9c1bc; --chiaraura-text: #141a1a;
  --chiaraura-muted: #5c6666; --chiaraura-gold: #9a7700; --chiaraura-blue: #0098a7;
  background: #f7f7f2 !important;
}
body.studio-lab .chiaraura-card { box-shadow: 0 1px 2px rgba(20, 26, 26, .06) !important; }
/* The lighting floor stays a dark studio so the light beams read clearly. */
body.studio-lab .chiaraura-stage {
  --chiaraura-bg: #141a1a; --chiaraura-card: #1b2222; --chiaraura-card-dark: #111616;
  --chiaraura-border: #2c3636; --chiaraura-border-bright: #3f4c4c; --chiaraura-text: #f7f7f2;
  --chiaraura-muted: #a7b0ae; --chiaraura-gold: #f5c519; --chiaraura-blue: #01afbf;
  color: #f7f7f2;
}
/* Chiaraura controls on paper: white fields, ink outlines, yellow for the active choice */
body.studio-lab .chiaraura .chiaraura-select, body.studio-lab .chiaraura .chiaraura-select select {
  background: #ffffff !important; color: #141a1a !important; -webkit-text-fill-color: #141a1a !important; border-color: #c6ccc7 !important; border-radius: 2px !important;
}
body.studio-lab .chiaraura .chiaraura-select::after { border-color: #141a1a !important; color: #141a1a !important; }
body.studio-lab .chiaraura .chiaraura-button, body.studio-lab .chiaraura .chiaraura-preset, body.studio-lab .chiaraura .chiaraura-pose-toggle button {
  background: #ffffff !important; color: #141a1a !important; -webkit-text-fill-color: #141a1a !important;
  border: 1.5px solid #141a1a !important; border-radius: 2px !important; box-shadow: none !important; text-shadow: none !important;
}
body.studio-lab .chiaraura .chiaraura-button *, body.studio-lab .chiaraura .chiaraura-preset * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
body.studio-lab .chiaraura .chiaraura-button:hover, body.studio-lab .chiaraura .chiaraura-preset:hover { background: #f7f7f2 !important; color: #0098a7 !important; -webkit-text-fill-color: #0098a7 !important; }
body.studio-lab .chiaraura .chiaraura-preset.is-active, body.studio-lab .chiaraura .chiaraura-pose-toggle button.is-active {
  background: #f5c519 !important; color: #141a1a !important; -webkit-text-fill-color: #141a1a !important;
}
body.studio-lab .chiaraura .chiaraura-button--danger { color: #b3403c !important; -webkit-text-fill-color: #b3403c !important; border-color: #b3403c !important; }
body.studio-lab .chiaraura .chiaraura-button--blue { color: #0098a7 !important; -webkit-text-fill-color: #0098a7 !important; border-color: #0098a7 !important; }
body.studio-lab .chiaraura .chiaraura-toggle-card, body.studio-lab .chiaraura .chiaraura-subject-preview { border-radius: 4px !important; }

/* Way back to the website */
.st-back { margin-left: auto; font-weight: 800; }
.st-back:hover { background: var(--sumo-yellow) !important; color: var(--sumo-ink) !important; }
.st-back + .st-user { margin-left: 12px; }