/* ============================================================================
 * MYSTRIX STUDIO — the creator web app's design system.
 *
 * IMP-0626. Built from docs/design/MYSTRIX_DESIGN_LANGUAGE.md; the palette,
 * type roles and radius values below are that brief's decisions, not new ones.
 * The component shapes ARE new — the brief explicitly leaves them to each
 * dependent improvement ("Concrete component shapes ... are each dependent
 * improvement's own job to design using these tokens").
 *
 * WHY THIS FILE EXISTS
 * The creator app had 60 empty-state classes across 25 padding values, 73
 * form-field class names across ~40 visual treatments, 117 card/panel names,
 * and 3 competing page-header systems. Adjacent workflows — the character
 * editor and the location editor, which do the same job — did not look alike.
 * This file is the one place those decisions now live.
 *
 * DESIGN DIRECTION
 * The governing metaphor is an illuminated manuscript annotated in low light.
 * The reader-facing product spends its boldness on the *forking rule* (a
 * vertical amethyst line that splits at a choice). The studio is where that
 * manuscript is AUTHORED, so it takes the same line UNFORKED: every panel
 * carries a quiet vertical margin rule on its inline-start edge that lights to
 * amethyst when the panel is active. It reads as ruled manuscript margin, it
 * ties the studio to the reader surface, and it deliberately never forks —
 * forking belongs to the live choice moment alone.
 *
 * Density is deliberately TIGHTER than the reader product (brief, "Layout
 * principles"): this is a working tool with a multi-pane workspace, so the
 * canonical control height is 32px and the base UI size is 13px.
 *
 * SECTIONS
 *   1. Fonts (self-hosted)      5. Panels + sections
 *   2. Tokens                   6. Fields + controls
 *   3. Base / type roles        7. State: empty, loading, skeleton
 *   4. Layout + page header     8. Chips, badges, cards, toolbars
 * ==========================================================================*/


/* ---------------------------------------------------------------------------
 * 1. FONTS — self-hosted variable woff2, script-subsetted.
 *
 * Per the brief these are self-hosted rather than pulled from a third-party
 * CDN, following the precedent BUG-1627 set for CDN-delivered assets. Each
 * face is split by unicode-range so a Latin-locale creator downloads only
 * the Latin subset. Scripts these faces do not cover (Arabic, Bengali, Hindi,
 * Marathi, Urdu, Chinese, Japanese) fall through to the system stack, which
 * is the correct behaviour — no glyph is faked.
 * ------------------------------------------------------------------------ */

/* --- Inter: the UI/utility face. Everything dense and functional. --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
 * 9. Creator task stages (IMP-0631)
 *
 * Four destinations stay visible; the larger tool inventory is disclosed one
 * stage at a time. The lit inline rule is the same navigation cue used by the
 * rest of the Studio system, not a second tab design.
 * ------------------------------------------------------------------------ */
.cr-stage-group {
  margin-block: var(--st-space-1);
}

.cr-stage-direct {
  display: flex;
  align-items: center;
  gap: var(--st-space-2);
  min-height: 32px;
  margin-block: var(--st-space-1);
  padding: var(--st-space-1) var(--st-space-2);
  border-inline-start: 2px solid transparent;
  color: var(--st-text-muted);
  font: 600 var(--st-text-sm)/var(--st-leading-tight) var(--st-font-ui);
}

.cr-stage-direct:hover { background: var(--st-surface-2); }
.cr-stage-direct.active {
  border-inline-start-color: var(--st-rule-active);
  color: var(--st-text);
}

.cr-stage-group > summary {
  display: flex;
  align-items: center;
  gap: var(--st-space-2);
  min-height: 32px;
  padding: var(--st-space-1) var(--st-space-2);
  border-inline-start: 2px solid transparent;
  color: var(--st-text-muted);
  font: 600 var(--st-text-sm)/var(--st-leading-tight) var(--st-font-ui);
  cursor: pointer;
  list-style: none;
}

.cr-stage-group > summary::-webkit-details-marker {
  display: none;
}

.cr-stage-group > summary::after {
  content: "\f078";
  margin-inline-start: auto;
  font-family: 'Font Awesome 6 Free';
  font-size: var(--st-text-sm);
  font-weight: 900;
  transition: transform var(--cr-transition-fast);
}

.cr-stage-group[open] > summary {
  border-inline-start-color: var(--st-rule-active);
  color: var(--st-text);
}

.cr-stage-group[open] > summary::after {
  transform: rotate(180deg);
}

.cr-stage-group > summary:hover {
  background: var(--st-surface-2);
}

.cr-stage-group > summary:focus-visible,
.cr-stage-direct:focus-visible {
  outline: 2px solid var(--st-rule-active);
  outline-offset: 2px;
}

.cr-stage-tools {
  padding-inline-start: var(--st-space-2);
}

body.cr-sidebar-collapsed .cr-stage-group > summary {
  justify-content: center;
  overflow: hidden;
  font-size: 0;
}

body.cr-sidebar-collapsed .cr-stage-direct {
  justify-content: center;
  overflow: hidden;
  font-size: 0;
}

body.cr-sidebar-collapsed .cr-stage-direct i { font-size: var(--st-text-md); }

body.cr-sidebar-collapsed .cr-stage-group > summary::after,
body.cr-sidebar-collapsed .cr-stage-tools {
  display: none;
}

body.cr-sidebar-collapsed .cr-stage-group > summary i {
  font-size: var(--st-text-md);
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* --- Fraunces: the display face. Titles only, used with restraint. --- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-var-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}


/* ---------------------------------------------------------------------------
 * 2. TOKENS
 * ------------------------------------------------------------------------ */

:root {
  /* --- Palette: exactly the seven from the design brief. ---------------- */
  --st-ink: #0b0a10;
  --st-parchment: #f3ede1;
  --st-amethyst: #9b7ef5;
  --st-amethyst-deep: #5b3fb0;
  --st-ember: #e8935f;
  --st-verdigris: #4fae94;
  --st-error: #e2565a;
  color-scheme: dark;
  --st-primary: var(--st-amethyst);
  --st-secondary: var(--st-ember);
  --st-positive: var(--st-verdigris);
  --st-danger: var(--st-error);
  --st-canvas: var(--st-ink);
  --st-on-accent: var(--st-ink);
  --st-chrome-sidebar: rgba(0, 0, 0, 0.55);
  --st-chrome-header: rgba(0, 0, 0, 0.35);

  /* Derived surfaces. Every step is a violet-cast lift off --st-ink, never a
     neutral gray — the brief calls for "near-black with a violet cast". The
     "well" is DARKER than the panel: inputs are recessed into the page like a
     ruled blank on a form, not raised chips sitting on top of it. */
  --st-surface-1: #131019;   /* panels, cards */
  --st-surface-2: #181420;   /* nested panels, hovered rows, panel headers */
  --st-surface-3: #1f1a2b;   /* pressed / selected row */
  --st-well: #0e0c14;        /* input + code interiors */

  /* Rules (borders). Named for the manuscript metaphor: a rule is a ruled
     line, and the panel's inline-start rule is the studio's signature. */
  --st-rule: #2a2338;
  --st-rule-soft: #1e1928;
  --st-rule-strong: #3a3050;
  --st-rule-active: var(--st-primary);

  /* Text */
  --st-text: #f1eafe;        /* 15.5:1 on surface-1 */
  --st-text-muted: #947cac;  /*  7.6:1 */
  --st-text-dim: #9784a6;    /*  5.0:1 on surface-2, the lightest panel */
  --st-text-faint: #837b9b;  /*  4.6:1 — AA floor; hints and dim glyphs */

  /* Accent tints. Two alphas per accent: a wash for surfaces, a line for
     borders. Nothing else — this is what stops the grab-bag reappearing. */
  --st-amethyst-wash: rgba(155, 126, 245, 0.10);
  --st-amethyst-wash-strong: rgba(155, 126, 245, 0.18);
  --st-amethyst-line: rgba(155, 126, 245, 0.32);
  --st-amethyst-glow: rgba(155, 126, 245, 0.22);
  --st-ember-wash: rgba(232, 147, 95, 0.10);
  --st-ember-line: rgba(232, 147, 95, 0.30);
  --st-verdigris-wash: rgba(79, 174, 148, 0.10);
  --st-verdigris-line: rgba(79, 174, 148, 0.30);
  --st-error-wash: rgba(226, 86, 90, 0.10);
  --st-error-line: rgba(226, 86, 90, 0.32);

  /* --- Type ------------------------------------------------------------- */
  --st-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --st-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  /* Reader prose previewed inside the studio. The reading-serif role is the
     reader product's, not the studio's; the studio only borrows it for a
     preview pane, so it is a fallback stack rather than a hosted face here. */
  --st-font-reading: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --st-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    monospace;

  /* Type scale. Twelve pixels is the governed readable floor, including dense
     metadata and badges. The base stays 13px so the authoring workspace keeps
     the compact density established by IMP-0626 without returning to 10/11px. */
  --st-text-2xs: 12px;
  --st-text-xs: 12px;
  --st-text-sm: 12px;
  --st-text-base: 13px;   /* the studio's workhorse size */
  --st-text-md: 14px;
  --st-text-lg: 16px;
  --st-display-sm: 15px;  /* Fraunces: empty-state + panel-group titles */
  --st-display-md: 18px;  /* Fraunces: section headings */
  --st-display-lg: 22px;  /* Fraunces: page title */

  --st-leading-tight: 1.25;
  --st-leading-ui: 1.45;
  --st-leading-prose: 1.65;
  --st-leading-icon: 1;
  --st-tracking-display: -0.015em;
  --st-tracking-ui: -0.005em;

  --st-weight-normal: 400;
  --st-weight-medium: 500;
  --st-weight-semi: 600;
  --st-weight-bold: 700;

  /* One Font Awesome 6 vocabulary, weight and optical box. Functional SVGs
     such as maps/charts remain SVG; production interface glyphs use these. */
  --st-icon-size-sm: 12px;
  --st-icon-size: 14px;
  --st-icon-size-lg: 16px;
  --st-icon-box: 18px;

  /* --- Space. 4px grid, tightened at the low end for dense controls. ---- */
  --st-space-0: 0;
  --st-space-1: 2px;
  --st-space-2: 4px;
  --st-space-3: 6px;
  --st-space-4: 8px;
  --st-space-5: 12px;
  --st-space-6: 16px;
  --st-space-7: 20px;
  --st-space-8: 24px;
  --st-space-9: 32px;
  --st-space-10: 48px;

  /* --- Controls. One height scale is the real density lever. ------------ */
  --st-control-h-sm: 26px;
  --st-control-h: 32px;      /* canonical field + button height */
  --st-control-h-lg: 38px;
  --st-control-pad-x: var(--st-space-5);
  --st-control-pad-x-sm: var(--st-space-4);

  /* --- Radius. The brief keeps the product's existing 12/16 and says not to
     relitigate them; the smaller steps are for controls nested inside. --- */
  --st-radius-xs: 4px;
  --st-radius-sm: 8px;
  --st-radius: 12px;
  --st-radius-lg: 16px;
  --st-radius-pill: 999px;

  /* --- The margin rule: the studio's signature dimension. --------------- */
  --st-rule-width: 2px;

  /* --- Motion ----------------------------------------------------------- */
  --st-ease: cubic-bezier(0.2, 0, 0, 1);
  --st-dur-fast: 120ms;
  --st-dur: 180ms;
  --st-dur-slow: 320ms;

  /* --- Elevation. Low light: shadows are deep and soft, never gray. ----- */
  --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --st-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --st-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --st-focus-ring: 0 0 0 3px var(--st-amethyst-glow);

  /* --- Workspace geometry (brief: "wide-screen, multi-pane workspace"). - */
  --st-pane-rail: 260px;     /* secondary/inspector pane */
  --st-measure: 68ch;        /* max line length for authoring text */
}


/* ---------------------------------------------------------------------------
 * 3. BASE / TYPE ROLES
 *
 * base.css:3 set the body font to the system UI stack — the brief names that
 * exact stack as the "tiny system UI" problem. studio.css loads after it and
 * installs the three real type roles.
 * ------------------------------------------------------------------------ */

body {
  font-family: var(--st-font-ui);
  font-size: var(--st-text-base);
  line-height: var(--st-leading-ui);
  letter-spacing: var(--st-tracking-ui);
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'tnum' 0;
}

/* Studio page titles share the same restrained display/workhorse roles. */
:where(.cr-logo-name, .cr-page-title, .page-title, .ss-h1, .sd-title, .se-title) {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
}

:where(.cr-card-title, .cr-section-title, .te-section-title) {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
}

/* Font Awesome 6 is vendored by base.html. A fixed optical box stops adjacent
   workflows from giving the same glyph a different baseline or footprint. */
:where(i.fa-solid, i.fa-regular, i.fa-brands) {
  inline-size: var(--st-icon-box);
  min-inline-size: var(--st-icon-box);
  block-size: var(--st-icon-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--st-icon-size);
  line-height: var(--st-leading-icon);
  vertical-align: -0.125em;
}

:where(i.fa-solid) { font-weight: 900; }

/* Display role. Restraint is enforced by scope: Fraunces is reachable only
   through .studio-display and the components that opt into it below. */
.studio-display {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
}

/* Reading role — only for panes previewing reader-facing prose. */
.studio-prose {
  font-family: var(--st-font-reading);
  font-size: var(--st-text-lg);
  line-height: var(--st-leading-prose);
  letter-spacing: 0;
  max-width: var(--st-measure);
  color: var(--st-text);
}

/* Tabular numerals wherever numbers are compared in a column. */
.studio-num { font-variant-numeric: tabular-nums; }
.studio-mono { font-family: var(--st-font-mono); font-size: var(--st-text-sm); }


/* ---------------------------------------------------------------------------
 * 4. LAYOUT + PAGE HEADER
 * ------------------------------------------------------------------------ */

/* The workspace: a wide main column plus an optional inspector rail. This is
   the multi-pane shape the brief asks the studio for, and it collapses to a
   single column below the rail's usable width. */
.studio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--st-pane-rail);
  gap: var(--st-space-6);
  align-items: start;
}
.studio-workspace--wide-rail { --st-pane-rail: 320px; }
.studio-workspace__main { min-width: 0; }
.studio-workspace__rail {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-5);
  position: sticky;
  top: var(--st-space-6);
}
@media (max-width: 1100px) {
  .studio-workspace { grid-template-columns: minmax(0, 1fr); }
  .studio-workspace__rail { position: static; }
}

/* Stack: the default vertical rhythm between panels on a studio screen. */
.studio-stack { display: flex; flex-direction: column; gap: var(--st-space-6); }
.studio-stack--tight { gap: var(--st-space-5); }

/* Row: side-by-side fields. Wraps rather than squeezing below a usable width. */
.studio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-space-5);
  align-items: flex-start;
}
.studio-row > * { flex: 1 1 220px; min-width: 0; }
.studio-row__grow-2 { flex-grow: 2; }

/* --- Page header. One system, replacing .cr-page-header / .cr-content
   .page-header / .ss-header / .sd-header / .ai-page-header / .qs-wizard-header
   / .cc-header (6 title sizes, 6 weights between them).

   The short amethyst rule at the inline-start of the underline is where the
   trunk line starts on every studio screen — the same line the panels carry
   down their edge, and the same line that forks for the reader. ---------- */
.studio-page-header {
  display: flex;
  align-items: flex-end;
  gap: var(--st-space-6);
  flex-wrap: wrap;
  padding-block-end: var(--st-space-5);
  margin-block-end: var(--st-space-7);
  border-block-end: 1px solid var(--st-rule-soft);
  position: relative;
}
.studio-page-header::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 44px;
  height: 2px;
  background: var(--st-primary);
  border-radius: var(--st-radius-pill);
}
.studio-page-header__content { flex: 1 1 320px; min-width: 0; }
.studio-page-header__title {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-size: var(--st-display-lg);
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
}
.studio-page-header__title > i {
  font-size: 0.75em;
  color: var(--st-primary);
  flex: none;
}
.studio-page-header__subtitle {
  margin: var(--st-space-3) 0 0;
  font-size: var(--st-text-base);
  line-height: var(--st-leading-ui);
  color: var(--st-text-muted);
  max-width: 76ch;
}
.studio-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  flex-wrap: wrap;
}

/* --- Section heading: groups panels under a Fraunces label. Replaces the
   ~20 competing *-section-header variants. --------------------------------*/
.studio-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--st-space-4);
  margin-block-end: var(--st-space-5);
}
.studio-section-header__title {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-size: var(--st-display-md);
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
  margin: 0;
}
.studio-section-header__note {
  font-size: var(--st-text-sm);
  color: var(--st-text-faint);
}
.studio-section-header__rule {
  flex: 1;
  height: 1px;
  background: var(--st-rule-soft);
}


/* ---------------------------------------------------------------------------
 * 5. PANELS
 *
 * THE signature component. A panel is a leaf of the manuscript: an ink surface
 * with a hairline border and a ruled inline-start margin. The rule is dim by
 * default and lights to amethyst when anything inside the panel has focus, so
 * a creator's eye is drawn along the same line the reader's story branches on.
 *
 * Replaces 117 card/panel class names — including 9 near-identical
 * *-sidebar-card and 11 *-panel reimplementations that differed only in
 * padding (12/16/20/24px) and radius (8/10/12px).
 * ------------------------------------------------------------------------ */

.studio-panel {
  background: var(--st-surface-1);
  border: 1px solid var(--st-rule);
  border-inline-start: var(--st-rule-width) solid var(--st-rule-strong);
  border-radius: var(--st-radius);
  transition: border-color var(--st-dur) var(--st-ease),
              background-color var(--st-dur) var(--st-ease);
  min-width: 0;
}
/* The rule lights when the creator is working inside this panel. */
.studio-panel:focus-within { border-inline-start-color: var(--st-rule-active); }
.studio-panel--active {
  border-inline-start-color: var(--st-rule-active);
  background: var(--st-surface-2);
}
/* A panel that is itself a control (selectable template, preset, choice). */
.studio-panel--selectable { cursor: pointer; }
.studio-panel--selectable:hover { background: var(--st-surface-2); }
.studio-panel--selected {
  border-color: var(--st-amethyst-line);
  border-inline-start-color: var(--st-rule-active);
  background: var(--st-amethyst-wash);
}
/* Accent variants — strictly the brief's three roles, no others. */
.studio-panel--warn { border-inline-start-color: var(--st-secondary); }
.studio-panel--good { border-inline-start-color: var(--st-positive); }
.studio-panel--danger { border-inline-start-color: var(--st-danger); }
/* A quieter nested panel: no rule, sits inside another panel's body. */
.studio-panel--nested {
  background: var(--st-surface-2);
  border: 1px solid var(--st-rule-soft);
  border-radius: var(--st-radius-sm);
}
.studio-panel--nested:focus-within { border-color: var(--st-rule); }

.studio-panel__header {
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  padding: var(--st-space-4) var(--st-space-5);
  border-block-end: 1px solid var(--st-rule-soft);
  min-height: var(--st-control-h-lg);
}
.studio-panel__title {
  font-family: var(--st-font-ui);
  font-size: var(--st-text-base);
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-ui);
  color: var(--st-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  min-width: 0;
}
.studio-panel__title > i { color: var(--st-text-faint); font-size: 0.92em; flex: none; }
.studio-panel__count {
  font-size: var(--st-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--st-text-faint);
  background: var(--st-surface-2);
  border: 1px solid var(--st-rule-soft);
  border-radius: var(--st-radius-pill);
  padding: 0 var(--st-space-3);
  line-height: var(--st-icon-box);
  flex: none;
}
.studio-panel__header-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--st-space-3);
  flex: none;
}
.studio-panel__body { padding: var(--st-space-5); }
.studio-panel__body--roomy { padding: var(--st-space-6); }
.studio-panel__body--flush { padding: 0; }
.studio-panel__footer {
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  padding: var(--st-space-4) var(--st-space-5);
  border-block-start: 1px solid var(--st-rule-soft);
}
.studio-panel__note {
  margin: 0;
  font-size: var(--st-text-sm);
  line-height: var(--st-leading-ui);
  color: var(--st-text-muted);
}

/* An intro block: what this screen's panel group is for. Fraunces title so a
   creator can tell screens apart at a glance — this is what the character
   editor had (.ce-section-intro) and the location editor did not. */
.studio-intro {
  margin-block-end: var(--st-space-6);
  padding-inline-start: var(--st-space-5);
  border-inline-start: var(--st-rule-width) solid var(--st-primary);
}
.studio-intro__title {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-size: var(--st-display-md);
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
  margin: 0 0 var(--st-space-3);
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
}
.studio-intro__title > i { font-size: 0.8em; color: var(--st-primary); flex: none; }
.studio-intro__body {
  margin: 0;
  font-size: var(--st-text-base);
  line-height: var(--st-leading-ui);
  color: var(--st-text-muted);
  max-width: 76ch;
}


/* ---------------------------------------------------------------------------
 * 6. FIELDS + CONTROLS
 *
 * One field primitive. Replaces .cr-input/.cr-select/.cr-textarea/
 * .cr-form-control(-sm)/.qs-form-control/.cc-form-control/.ai-input/.ai-select/
 * .ai-textarea/.tl-input/.tl-select/.field input and ~30 more — 7 vertical
 * padding values, 5 radii and 8 font sizes collapse to one.
 *
 * The control is RECESSED (--st-well is darker than the panel it sits on): a
 * blank ruled into the page rather than a chip on top of it. Focus is the one
 * place amethyst enters a dense form, which keeps it meaningful.
 * ------------------------------------------------------------------------ */

.studio-field { display: flex; flex-direction: column; gap: var(--st-space-3); min-width: 0; }

.studio-field__label {
  display: flex;
  align-items: center;
  gap: var(--st-space-3);
  font-size: var(--st-text-sm);
  font-weight: var(--st-weight-medium);
  color: var(--st-text-muted);
  line-height: var(--st-leading-tight);
}
.studio-field__req { color: var(--st-secondary); font-size: var(--st-text-xs); flex: none; }
.studio-field__hint {
  font-size: var(--st-text-xs);
  line-height: var(--st-leading-ui);
  color: var(--st-text-faint);
  margin: 0;
}
.studio-field__error {
  font-size: var(--st-text-xs);
  line-height: var(--st-leading-ui);
  color: var(--st-danger);
  margin: 0;
}

.studio-input,
.studio-select,
.studio-textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--st-font-ui);
  font-size: var(--st-text-base);
  line-height: var(--st-leading-ui);
  letter-spacing: var(--st-tracking-ui);
  color: var(--st-text);
  background: var(--st-well);
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius-sm);
  padding: 0 var(--st-control-pad-x);
  height: var(--st-control-h);
  transition: border-color var(--st-dur-fast) var(--st-ease),
              box-shadow var(--st-dur-fast) var(--st-ease),
              background-color var(--st-dur-fast) var(--st-ease);
  appearance: none;
}
.studio-textarea {
  height: auto;
  min-height: 84px;
  padding: var(--st-space-4) var(--st-control-pad-x);
  resize: vertical;
  line-height: var(--st-leading-prose);
}
.studio-select {
  /* Chevron drawn in the border colour so the control has no second palette. */
  background-image: linear-gradient(45deg, transparent 50%, var(--st-text-faint) 50%),
                    linear-gradient(135deg, var(--st-text-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--st-space-9);
  cursor: pointer;
}
[dir='rtl'] .studio-select {
  background-position: 16px calc(50% + 1px), 11px calc(50% + 1px);
}

.studio-input::placeholder,
.studio-textarea::placeholder { color: var(--st-text-faint); }

.studio-input:hover,
.studio-select:hover,
.studio-textarea:hover { border-color: var(--st-rule-strong); }

.studio-input:focus,
.studio-select:focus,
.studio-textarea:focus {
  outline: none;
  border-color: var(--st-primary);
  box-shadow: var(--st-focus-ring);
  background: var(--st-well);
}

.studio-input:disabled,
.studio-select:disabled,
.studio-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--st-surface-1);
}

.studio-input[aria-invalid='true'],
.studio-select[aria-invalid='true'],
.studio-textarea[aria-invalid='true'] { border-color: var(--st-danger); }
.studio-input[aria-invalid='true']:focus,
.studio-select[aria-invalid='true']:focus,
.studio-textarea[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px var(--st-error-wash);
}

/* Size modifier — the only one. */
.studio-input--sm,
.studio-select--sm {
  height: var(--st-control-h-sm);
  font-size: var(--st-text-sm);
  padding-inline: var(--st-control-pad-x-sm);
}
.studio-select--sm { padding-inline-end: var(--st-space-8); }

/* Checkbox / radio rows read as annotations in a margin, not form furniture. */
.studio-check {
  display: flex;
  align-items: flex-start;
  gap: var(--st-space-4);
  font-size: var(--st-text-base);
  color: var(--st-text);
  cursor: pointer;
  padding: var(--st-space-3) 0;
  line-height: var(--st-leading-ui);
}
.studio-check input[type='checkbox'],
.studio-check input[type='radio'] {
  flex: none;
  width: 15px;
  height: 15px;
  margin-block-start: 2px;
  accent-color: var(--st-primary);
  cursor: pointer;
}
.studio-check__body { min-width: 0; }
.studio-check__hint {
  display: block;
  font-size: var(--st-text-xs);
  color: var(--st-text-faint);
  margin-block-start: var(--st-space-1);
}

/* --- Buttons -------------------------------------------------------------*/
.studio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-3);
  height: var(--st-control-h);
  padding-inline: var(--st-space-5);
  font-family: var(--st-font-ui);
  font-size: var(--st-text-base);
  font-weight: var(--st-weight-medium);
  letter-spacing: var(--st-tracking-ui);
  line-height: var(--st-leading-icon);
  white-space: nowrap;
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius-sm);
  background: var(--st-surface-2);
  color: var(--st-text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--st-dur-fast) var(--st-ease),
              border-color var(--st-dur-fast) var(--st-ease),
              color var(--st-dur-fast) var(--st-ease);
}
.studio-btn:hover { background: var(--st-surface-3); border-color: var(--st-rule-strong); }
.studio-btn:focus-visible { outline: none; box-shadow: var(--st-focus-ring); }
.studio-btn:disabled,
.studio-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.studio-btn--primary {
  background: var(--st-primary);
  border-color: var(--st-primary);
  color: var(--st-on-accent);
  font-weight: var(--st-weight-semi);
}
.studio-btn--primary:hover {
  background: var(--st-amethyst-deep);
  border-color: var(--st-amethyst-deep);
  color: var(--st-text);
}
.studio-btn--secondary {
  background: var(--st-surface-3);
  border-color: var(--st-rule-strong);
  color: var(--st-text);
}
.studio-btn--secondary:hover {
  background: var(--st-surface-2);
  border-color: var(--st-primary);
}
.studio-btn--ghost {
  background: transparent;
  border-color: var(--st-rule);
  color: var(--st-text-muted);
}
.studio-btn--ghost:hover { background: var(--st-surface-2); color: var(--st-text); }
.studio-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--st-text-muted);
  padding-inline: var(--st-space-4);
}
.studio-btn--quiet:hover { background: var(--st-surface-2); color: var(--st-text); }
.studio-btn--danger {
  background: transparent;
  border-color: var(--st-error-line);
  color: var(--st-danger);
}
.studio-btn--danger:hover { background: var(--st-error-wash); }
.studio-btn--sm {
  height: var(--st-control-h-sm);
  font-size: var(--st-text-sm);
  padding-inline: var(--st-space-4);
}
.studio-btn--icon { padding-inline: 0; width: var(--st-control-h); flex: none; }
.studio-btn--block { width: 100%; }
.studio-btn--icon.studio-btn--sm { width: var(--st-control-h-sm); }


/* ---------------------------------------------------------------------------
 * 7. STATE COMPONENTS — empty, loading, skeleton
 *
 * The brief is explicit that state screens are "deliberately UNDECORATED
 * relative to the signature moment, not competing with it". That is the whole
 * design argument here, and it is why these do NOT get the 84px gradient tile,
 * the 72px glowing planet, or the spinning glyph the app used before.
 * ------------------------------------------------------------------------ */

/* --- Empty: THE BLANK LEAF. -----------------------------------------------
   An empty state in a manuscript studio is an unwritten page, so it is drawn
   as one: a dashed hairline rule enclosing nothing, no fill, a small dim
   glyph, and a Fraunces caption. The dashes are the only place the studio
   uses a dashed border, which makes "nothing here yet" instantly legible
   without a single decorative pixel.

   Replaces 60 empty-state classes spanning 25 padding values and 14 icon
   sizes (2.80px to 64px), plus 16 media-placeholder classes. ------------- */
.studio-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--st-space-4);
  padding: var(--st-space-8) var(--st-space-6);
  border: 1px dashed var(--st-rule);
  border-radius: var(--st-radius);
  background: transparent;
  color: var(--st-text-muted);
}
.studio-empty__icon {
  font-size: 20px;
  line-height: var(--st-leading-icon);
  color: var(--st-text-faint);
  /* Colour, not opacity: the app previously mixed 0.4/0.5/0.8/none, so the
     same glyph rendered at four weights on adjacent screens. */
  opacity: 1;
}
.studio-empty__title {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-size: var(--st-display-sm);
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
  margin: 0;
}
.studio-empty__body {
  margin: 0;
  font-size: var(--st-text-base);
  line-height: var(--st-leading-ui);
  color: var(--st-text-muted);
  max-width: 46ch;
}
.studio-empty__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-4);
  flex-wrap: wrap;
  margin-block-start: var(--st-space-2);
}
/* Inline: sits inside a panel body where a list would be. */
/* Screens toggle an empty state with the `hidden` attribute; a display rule
   would otherwise beat the UA stylesheet and leave it permanently visible. */
.studio-empty[hidden],
.studio-loading[hidden] { display: none; }

.studio-empty--sm {
  padding: var(--st-space-6) var(--st-space-5);
  gap: var(--st-space-3);
}
.studio-empty--sm .studio-empty__icon { font-size: 16px; }
.studio-empty--sm .studio-empty__title { font-size: var(--st-text-md); }
.studio-empty--sm .studio-empty__body { font-size: var(--st-text-sm); }
/* Page: the whole screen has no content yet. Still undecorated — it earns
   more breathing room, not more ornament. */
.studio-empty--page {
  padding: var(--st-space-10) var(--st-space-8);
  gap: var(--st-space-5);
}
.studio-empty--page .studio-empty__icon { font-size: 28px; }
.studio-empty--page .studio-empty__title { font-size: var(--st-display-md); }
/* Inline text-only variant for a table cell or a value slot. */
.studio-empty-inline {
  font-size: var(--st-text-sm);
  font-style: italic;
  color: var(--st-text-faint);
}

/* Media placeholder: the "no cover image yet" slot. Was 5 classes at
   24/28/32/36/48px; now one, with the same blank-leaf logic. */
.studio-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--st-surface-2);
  color: var(--st-text-faint);
  font-size: 24px;
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
}

/* --- Loading: THE RULING LINE. --------------------------------------------
   Not a spinner. The studio's line motif being drawn: a 2px rule with an
   amethyst segment travelling along it. It replaces 5 duplicate rotate
   keyframes (spin x3, pv-spin, ce-ai-spin) and 7 competing loading metaphors.
   Quiet by construction — a 2px line cannot out-compete the signature. ---- */
.studio-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-4);
  padding: var(--st-space-8) var(--st-space-6);
  color: var(--st-text-muted);
  font-size: var(--st-text-sm);
}
.studio-loading::before {
  content: '';
  display: block;
  width: 96px;
  height: var(--st-rule-width);
  border-radius: var(--st-radius-pill);
  background: var(--st-rule);
  background-image: linear-gradient(90deg, transparent, var(--st-primary), transparent);
  background-repeat: no-repeat;
  background-size: 40% 100%;
  animation: studio-rule-draw 1.4s var(--st-ease) infinite;
}
.studio-loading--sm { padding: var(--st-space-5); }
.studio-loading--sm::before { width: 64px; }
/* Inline: sits in a panel header or beside a control. */
.studio-loading-inline {
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: var(--st-rule-width);
  border-radius: var(--st-radius-pill);
  background: var(--st-rule);
  background-image: linear-gradient(90deg, transparent, var(--st-primary), transparent);
  background-repeat: no-repeat;
  background-size: 40% 100%;
  animation: studio-rule-draw 1.4s var(--st-ease) infinite;
}
@keyframes studio-rule-draw {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* Skeleton — one system, replacing cc-skeleton + ss-skeleton + one inlined
   copy (two keyframe names, two easings, two radii between them). */
.studio-skeleton {
  background: var(--st-surface-2);
  background-image: linear-gradient(90deg, transparent, var(--st-surface-3), transparent);
  background-repeat: no-repeat;
  background-size: 50% 100%;
  border-radius: var(--st-radius-xs);
  animation: studio-rule-draw 1.6s var(--st-ease) infinite;
}
.studio-skeleton--text { height: 11px; width: 60%; margin-block: var(--st-space-2); }
.studio-skeleton--title { height: 15px; width: 40%; margin-block: var(--st-space-2); }
.studio-skeleton--block { height: 96px; width: 100%; border-radius: var(--st-radius-sm); }

/* The brief spends the product's motion budget on the forking rule alone. If
   the OS asks for less motion, these state animations stop entirely — the
   line simply sits at rest. root.css already zeroes durations globally; this
   is explicit so the intent survives a refactor of that rule. */
@media (prefers-reduced-motion: reduce) {
  .studio-loading::before,
  .studio-loading-inline,
  .studio-skeleton {
    animation: none;
    background-image: none;
  }
  .studio-loading::before,
  .studio-loading-inline { background: var(--st-primary); }
}


/* ---------------------------------------------------------------------------
 * 8. CHIPS, BADGES, CARDS, TOOLBARS
 * ------------------------------------------------------------------------ */

/* --- Chip field. The character editor (.ce-chip*) and the location editor
   (.le-chip*) had two separate implementations of this exact control — the
   clearest single example of the "adjacent workflows look different" problem
   this improvement is filed about. One control now. --------------------- */
.studio-chip-field {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-4);
}
.studio-chips {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: var(--st-space-2);
  margin-block: var(--st-space-3) var(--st-space-4);
  min-height: 20px;
}
.studio-chips:empty { display: none; }
.studio-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-3);
  height: var(--st-control-h-sm);
  padding-inline: var(--st-space-4);
  font-size: var(--st-text-sm);
  line-height: var(--st-leading-icon);
  color: var(--st-text);
  background: var(--st-amethyst-wash);
  border: 1px solid var(--st-amethyst-line);
  border-radius: var(--st-radius-pill);
  max-width: 100%;
}
.studio-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-chip button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: var(--st-radius-pill);
  background: transparent;
  color: var(--st-text-muted);
  font-size: var(--st-text-md);
  line-height: var(--st-leading-icon);
  cursor: pointer;
}
.studio-chip button:hover { background: var(--st-amethyst-wash-strong); color: var(--st-text); }
.studio-chip button:disabled { opacity: 0.4; cursor: not-allowed; }
/* A chip that is a toggle (the location editor's connected-locations picker). */
.studio-chip--toggle {
  cursor: pointer;
  background: var(--st-surface-2);
  border-color: var(--st-rule);
  color: var(--st-text-muted);
  transition: background-color var(--st-dur-fast) var(--st-ease),
              border-color var(--st-dur-fast) var(--st-ease),
              color var(--st-dur-fast) var(--st-ease);
}
.studio-chip--toggle:hover { border-color: var(--st-rule-strong); color: var(--st-text); }
.studio-chip--toggle:focus-within { box-shadow: var(--st-focus-ring); }
.studio-chip--toggle input { accent-color: var(--st-primary); cursor: pointer; margin: 0; }
.studio-chip--toggle:has(input:checked) {
  background: var(--st-amethyst-wash);
  border-color: var(--st-amethyst-line);
  color: var(--st-text);
}

/* Quick-add suggestion row — a creator affordance, kept visually subordinate
   to the chips it fills in. */
.studio-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-space-3);
}
.studio-suggest__label {
  font-size: var(--st-text-xs);
  color: var(--st-text-faint);
  margin-inline-end: var(--st-space-2);
}
.studio-suggest__item {
  height: 22px;
  padding-inline: var(--st-space-4);
  font-family: var(--st-font-ui);
  font-size: var(--st-text-xs);
  color: var(--st-text-muted);
  background: transparent;
  border: 1px dashed var(--st-rule);
  border-radius: var(--st-radius-pill);
  cursor: pointer;
  transition: border-color var(--st-dur-fast) var(--st-ease),
              color var(--st-dur-fast) var(--st-ease);
}
.studio-suggest__item:hover {
  border-style: solid;
  border-color: var(--st-amethyst-line);
  color: var(--st-text);
}
.studio-suggest__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* IMP-1217: a compact two-part authoring row compiles to inventory_seed's
   existing string contract. The capability note stays visible on every saved
   possession because runtime action planning treats the whole list as
   available equipment. */
.studio-row--capabilities > * { flex-basis: 28rem; }
.ce-main .studio-chips {
  flex-wrap: wrap;
  overflow: visible;
}
.studio-possession-entry {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(12rem, 1.2fr) auto;
  gap: var(--st-space-3);
  align-items: end;
}
.studio-possession-entry > .studio-btn { margin-block-end: 1px; }
.studio-chip--possession {
  height: auto;
  min-height: var(--st-control-h-sm);
  flex-wrap: wrap;
  padding-block: var(--st-space-2);
}
.studio-chip--possession > .studio-chip__value { max-width: min(32ch, 100%); }
.studio-possession-capability {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  color: var(--st-positive);
  font-size: var(--st-text-xs);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .studio-possession-entry { grid-template-columns: 1fr; }
  .studio-possession-entry > .studio-btn { justify-self: start; }
}
@media (max-width: 1220px) {
  .studio-row--capabilities { flex-direction: column; }
  .studio-row--capabilities > * { width: 100%; flex-basis: auto; }
}

/* --- Badges. Three accents only: the brief's ember / verdigris / error. --*/
.studio-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  height: 20px;
  padding-inline: var(--st-space-4);
  font-size: var(--st-text-xs);
  font-weight: var(--st-weight-medium);
  line-height: var(--st-leading-icon);
  border-radius: var(--st-radius-pill);
  background: var(--st-surface-2);
  border: 1px solid var(--st-rule);
  color: var(--st-text-muted);
  white-space: nowrap;
}
.studio-badge--brand {
  background: var(--st-amethyst-wash);
  border-color: var(--st-amethyst-line);
  color: var(--st-primary);
}
.studio-badge--good {
  background: var(--st-verdigris-wash);
  border-color: var(--st-verdigris-line);
  color: var(--st-positive);
}
.studio-badge--warn {
  background: var(--st-ember-wash);
  border-color: var(--st-ember-line);
  color: var(--st-secondary);
}
.studio-badge--danger {
  background: var(--st-error-wash);
  border-color: var(--st-error-line);
  color: var(--st-danger);
}

/* --- Toolbar: filter/search bar above a list. --------------------------- */
.studio-toolbar {
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  flex-wrap: wrap;
  padding: var(--st-space-4) var(--st-space-5);
  background: var(--st-surface-1);
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius);
  margin-block-end: var(--st-space-6);
}
.studio-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  flex-wrap: wrap;
  min-width: 0;
}
.studio-toolbar__group--grow { flex: 1 1 240px; }
.studio-toolbar__end { margin-inline-start: auto; display: flex; gap: var(--st-space-3); }
.studio-toolbar .studio-input,
.studio-toolbar .studio-select { width: auto; min-width: 140px; }
.studio-toolbar .studio-input[type='search'] { flex: 1 1 200px; }

/* Segmented view toggle. */
.studio-segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--st-well);
  border: 1px solid var(--st-rule);
  border-radius: var(--st-radius-sm);
}
.studio-segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 22px;
  border: none;
  border-radius: var(--st-radius-xs);
  background: transparent;
  color: var(--st-text-faint);
  font-size: var(--st-text-sm);
  cursor: pointer;
  transition: background-color var(--st-dur-fast) var(--st-ease),
              color var(--st-dur-fast) var(--st-ease);
}
.studio-segmented__btn:hover { color: var(--st-text); }
.studio-segmented__btn.is-active,
.studio-segmented__btn.active { background: var(--st-surface-3); color: var(--st-primary); }

/* --- Card grid + entity card. A card is a panel that happens to be in a
   grid, so it inherits .studio-panel and adds only what a grid item needs. */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--st-space-5);
}
/* auto-fill rather than auto-fit: a last row that is only partly full must still give each
   card one track, not share the leftover space and stretch the row. */
@media (min-width: 1440px) {
  .studio-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  }
}
@media (min-width: 1920px) {
  .studio-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  }
}
.studio-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--st-dur) var(--st-ease),
              box-shadow var(--st-dur) var(--st-ease);
}
/* Every catalogue card lifts the same way, so a World and a Story read as one shelf. */
.studio-card:hover {
  background: var(--st-surface-2);
  border-color: var(--st-rule-strong);
  transform: translateY(-3px);
  box-shadow: var(--st-shadow);
}
.studio-card__cover {
  position: relative;
  height: 100px;
  background: var(--st-surface-2);
  overflow: hidden;
}
.studio-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-project-art {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg, #122333, #4b527a);
  color: rgb(255 255 255 / .92);
}
.wl-project-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgb(4 8 12 / .12) 46%, rgb(4 8 12 / .8));
}
.wl-project-art__orb {
  position: absolute;
  inset: 12% 12% auto auto;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd6a1;
  box-shadow: 0 0 55px rgb(255 214 161 / .58);
}
.wl-project-art__ridge {
  position: absolute;
  inset-inline: -7%;
  inset-block-end: -2%;
}
.wl-project-art__ridge--distant {
  height: 58%;
  background: #46566b;
  clip-path: polygon(0 60%, 15% 30%, 31% 56%, 48% 18%, 65% 53%, 82% 24%, 100% 50%, 100% 100%, 0 100%);
}
.wl-project-art__ridge--near {
  height: 37%;
  background: #101923;
  clip-path: polygon(0 42%, 19% 14%, 38% 53%, 62% 9%, 81% 46%, 100% 18%, 100% 100%, 0 100%);
}
.wl-project-art strong {
  position: absolute;
  z-index: 1;
  inset: auto auto var(--st-space-4) var(--st-space-4);
  font-family: var(--st-font-display);
  font-size: clamp(28px, 4dvw, 48px);
}
.wl-card-cover[data-art-variant="1"] .wl-project-art { background: linear-gradient(145deg, #24152f, #70436c); }
.wl-card-cover[data-art-variant="1"] .wl-project-art__orb { background: #ffc4dd; box-shadow: 0 0 55px rgb(255 196 221 / .55); }
.wl-card-cover[data-art-variant="2"] .wl-project-art { background: linear-gradient(145deg, #152a24, #55715f); }
.wl-card-cover[data-art-variant="2"] .wl-project-art__orb { background: #c8e9ba; box-shadow: 0 0 55px rgb(200 233 186 / .5); }
.wl-card-cover[data-art-variant="3"] .wl-project-art { background: linear-gradient(145deg, #301a13, #895a39); }
.wl-card-cover[data-art-variant="3"] .wl-project-art__orb { background: #ffd091; box-shadow: 0 0 55px rgb(255 208 145 / .55); }
.studio-card__cover-badges {
  position: absolute;
  inset-block-start: var(--st-space-3);
  inset-inline-end: var(--st-space-3);
  display: flex;
  gap: var(--st-space-2);
  flex-wrap: wrap;
}
.studio-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-3);
  padding: var(--st-space-5);
  flex: 1;
  min-width: 0;
}
.studio-card__title {
  font-family: var(--st-font-display);
  font-optical-sizing: auto;
  font-size: var(--st-display-sm);
  font-weight: var(--st-weight-semi);
  letter-spacing: var(--st-tracking-display);
  line-height: var(--st-leading-tight);
  color: var(--st-text);
  margin: 0;
}
.studio-card__text {
  margin: 0;
  font-size: var(--st-text-sm);
  line-height: var(--st-leading-ui);
  color: var(--st-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.studio-card__meta {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: var(--st-space-6);
  margin-block-start: auto;
  color: var(--st-text-faint);
  font-size: var(--st-text-xs);
}
.studio-card__meta i { margin-inline-end: var(--st-space-2); }
.studio-card__actions {
  display: flex;
  align-items: center;
  gap: var(--st-space-3);
  flex-wrap: wrap;
  row-gap: var(--st-space-2);
  padding: var(--st-space-4) var(--st-space-5);
  border-block-start: 1px solid var(--st-rule-soft);
}
.studio-card__actions .studio-btn--grow { flex: 1; }

/* Catalogue cards: the cover and content are one link to the reader-facing surface,
   while the action row below stays outside the anchor so each action remains its own
   target. Worlds and Stories share this component, so it has one owner. */
.studio-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.studio-card__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--cr-primary-bg-xsoft);
}

/* Progress: a rule that fills. Same primitive as everything else here. */
.studio-progress {
  display: flex;
  align-items: center;
  gap: var(--st-space-4);
  font-size: var(--st-text-xs);
  color: var(--st-text-faint);
  font-variant-numeric: tabular-nums;
}
.studio-progress__track {
  flex: 1;
  height: var(--st-rule-width);
  background: var(--st-rule);
  border-radius: var(--st-radius-pill);
  overflow: hidden;
}
.studio-progress__fill {
  height: 100%;
  background: var(--st-primary);
  border-radius: var(--st-radius-pill);
  transition: width var(--st-dur-slow) var(--st-ease);
}

/* --- Utility: a visually hidden label that stays available to a11y tools. */
.studio-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* IMP-0628 — one intent-specific state grammar for every Creator workspace. */
.studio-state {
  width: min(100%, 680px);
  min-height: 220px;
  margin: auto;
  padding: clamp(24px, 4dvw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--cr-text-muted);
}

.studio-state__art {
  width: 56px;
  height: 56px;
  border-radius: var(--st-radius);
  display: grid;
  place-items: center;
  color: var(--st-primary);
  background: color-mix(in srgb, var(--st-primary) 12%, var(--cr-bg-card));
  font-size: 1.5rem;
}

.studio-state--error .studio-state__art {
  color: var(--st-danger);
  background: color-mix(in srgb, var(--st-danger) 12%, var(--cr-bg-card));
}

.studio-state__title { margin: 6px 0 0; color: var(--cr-text); font-size: var(--st-text-xl); }
.studio-state__body { max-width: 52ch; margin: 0; line-height: var(--st-leading-body); }
.studio-state__content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.studio-state__actions { margin-top: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.studio-state__actions .cr-btn-primary,
.studio-state__actions .studio-btn--primary { order: -1; }
.studio-state[role="alert"] { border: 1px solid color-mix(in srgb, var(--st-danger) 30%, transparent); border-radius: var(--st-radius-sm); }

.studio-state__skeleton { width: min(100%, 460px); display: grid; gap: 12px; }
.studio-state__skeleton-line {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cr-bg-muted) 25%, var(--cr-bg-hover) 45%, var(--cr-bg-muted) 65%);
  background-size: 300% 100%;
  animation: studio-rule-draw 1.4s var(--st-ease) infinite;
}
.studio-state__skeleton-line:nth-child(2) { width: 82%; }
.studio-state__skeleton-line:nth-child(3) { width: 64%; }

[data-studio-state-region][data-state-ready="false"] [data-studio-state-content] { visibility: hidden; }
[data-studio-state-view][hidden] { display: none !important; }

@media (max-width: 640px) {
  .studio-state { min-height: 180px; padding: 24px 16px; }
  .studio-state__actions { width: 100%; }
  .studio-state__actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-state__skeleton-line { animation: none; background: var(--cr-bg-muted); }
}