/* Editor-pane overrides for Playroom's UI chrome.
 *
 * Three concerns are bundled here because they all target Playroom's
 * outer editor (NOT the iframe preview) and share the same brittle
 * surface — Playroom's compiled vanilla-extract output and Arbor's
 * Tailwind preflight, both of which leak into this pane via webpack
 * splitChunks (Playroom → Frames → frameSrc → Frame.tsx → fonts.css /
 * styles.css). The iframe is a separate document and unaffected.
 *
 * 1. UI font: replace Plus Jakarta Sans with Arbor's Link Sans Product.
 * 2. Code editor (CodeMirror): replace the bundled mono stack with
 *    JetBrains Mono Variable (loaded via @fontsource-variable in
 *    components.ts).
 * 3. Inline SVGs: undo Tailwind's `svg { display: block }` so menu
 *    glyph icons sit inline with their labels (e.g. the external-link
 *    arrow next to "New Playroom" / "Duplicate").
 *
 * --- Font var override ---
 * Playroom's UI font flows through six CSS vars defined in
 * node_modules/playroom/src/css/vars.css.ts via vanilla-extract.
 * Vanilla-extract emits TWO different name forms depending on build mode:
 *   • Production (yarn build): short hashes — `--_1bpha6d0` … `--_1bpha6d5`
 *   • Development (yarn dev / webpack-dev-server): debug-prefixed —
 *     `--font-family-standard__1bpha6d0`, `--font-scale-large__1bpha6d5`, etc.
 * Override BOTH forms so the cascade resolves correctly in either mode.
 *
 * If Playroom upgrades and the hashes change, the override will silently
 * revert to Plus Jakarta Sans — re-pin from `dist/index.css` (prod) or
 * the dev-server's bundled `:root` rule (dev) by grepping for "Jakarta".
 *
 * Mapping (from vars.css.ts):
 *   d0 → font.family.standard (UI)
 *   d1 → font.family.code     (CodeMirror — also covered by the
 *                              .CodeMirror !important rule below)
 *   d2 → font.scale.xsmall    (10/14 shorthand)
 *   d3 → font.scale.small     (12/16 shorthand)
 *   d4 → font.scale.standard  (14/24 shorthand)
 *   d5 → font.scale.large     (16/22 shorthand) */
:root {
  /* Stack values defined once and referenced below for both name forms. */
  --_arbor-ui-stack:
    "Link Sans Product", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --_arbor-mono-stack:
    "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Production short names. */
  --_1bpha6d0: var(--_arbor-ui-stack);
  --_1bpha6d1: var(--_arbor-mono-stack);
  --_1bpha6d2: normal 10px/14px var(--_arbor-ui-stack);
  --_1bpha6d3: normal 12px/16px var(--_arbor-ui-stack);
  --_1bpha6d4: normal 14px/24px var(--_arbor-ui-stack);
  --_1bpha6d5: normal 16px/22px var(--_arbor-ui-stack);

  /* Development debug-prefixed names. */
  --font-family-standard__1bpha6d0: var(--_arbor-ui-stack);
  --font-family-code__1bpha6d1: var(--_arbor-mono-stack);
  --font-scale-xsmall__1bpha6d2: normal 10px/14px var(--_arbor-ui-stack);
  --font-scale-small__1bpha6d3: normal 12px/16px var(--_arbor-ui-stack);
  --font-scale-standard__1bpha6d4: normal 14px/24px var(--_arbor-ui-stack);
  --font-scale-large__1bpha6d5: normal 16px/22px var(--_arbor-ui-stack);
}

/* Code editor: JetBrains Mono Variable + ligatures, system-mono fallback
 * in case the WOFF2 fails to load. */
.CodeMirror,
.CodeMirror-hints,
.CodeMirror-dialog input,
.CodeMirror-search-label {
  font-family: var(--_arbor-mono-stack) !important;
  font-feature-settings:
    "liga" 1,
    "calt" 1;
}

/* Arbor's Tailwind preflight (loaded via Frame.tsx → styles.css) sets
 * `audio, canvas, embed, iframe, img, object, svg, video { display: block }`,
 * which forces Playroom's inline glyph SVGs (e.g. the external-link arrow
 * next to "New Playroom" / "Duplicate" in the menu, or the chevron next
 * to sub-menu triggers) onto their own line. Restore inline-block for
 * SVGs in the editor pane. The iframe is a separate document, so this
 * doesn't affect Arbor's preview. */
svg {
  display: inline-block;
}