/* Khorvuul Studio: the shared look of the design and video editors and the studio start page.
   A blue-graphite workspace with one warm accent; the work on the canvas is the only colourful thing.
   Every editor surface takes its colours, sizes and type from these tokens, never from literals. */
.studio {
  --st-bg: #eef0f3;          /* window behind panels */
  --st-panel: #ffffff;       /* panels, bars */
  --st-raised: #ffffff;      /* cards, menus */
  --st-field: #f0f1f4;       /* inputs: a filled well, the border appears on hover and focus */
  --st-control: #eceef2;     /* secondary buttons, chips */
  --st-hover: #e8eaef;
  --st-pressed: #dfe2e8;
  --st-pasteboard: #e3e5ea;  /* area around the page / video */
  --st-line: #e5e7ec;
  --st-line-strong: #d2d5dc;
  --st-text: #181a20;
  --st-muted: #5c606b;
  --st-faint: #767a85;
  --st-accent: #e08c1a;      /* amber: selection, active tool, primary action */
  --st-accent-hover: #cc7c10;
  --st-accent-soft: rgba(224, 140, 26, .15);
  --st-accent-ink: #1b1305;  /* text on the accent (dark: white on amber is too faint) */
  --st-focus: rgba(217, 134, 28, .45);
  --st-danger: #d6453d;
  --st-success: #2f9e6a;
  --st-shadow: 0 8px 28px rgba(20, 20, 24, .14), 0 1px 3px rgba(20, 20, 24, .08);

  --st-font: 'Inter', system-ui, sans-serif;
  --st-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --st-text-xs: 12px;  /* section labels, units */
  --st-text-sm: 13px;  /* panel content, inputs */
  --st-text-md: 14px;  /* menus, buttons */
  --st-text-lg: 17px;  /* panel and dialog titles */
  --st-radius: 8px;
  --st-radius-sm: 6px;
  --st-bar: 52px;      /* top bar height */
  --st-row: 32px;      /* input, button and list row height */
  --st-gap: 8px;
  --st-icon: 16px;
  --st-panel-w: 304px;

  font-family: var(--st-font);
  font-size: var(--st-text-sm);
  color: var(--st-text);
  font-variant-numeric: tabular-nums;
}
:root[data-theme=dark] .studio {
  --st-bg: #0e1015;
  --st-panel: #15171d;
  --st-raised: #1d2027;
  --st-field: #0e1015;
  --st-control: #23262f;
  --st-hover: #2a2e39;
  --st-pressed: #333844;
  --st-pasteboard: #0a0b0f;
  --st-line: #242730;
  --st-line-strong: #363a47;
  --st-text: #eceef2;
  --st-muted: #a3a7b3;
  --st-faint: #7f8491;
  --st-accent: #f2a83b;
  --st-accent-hover: #f7bb5f;
  --st-accent-soft: rgba(242, 168, 59, .15);
  --st-accent-ink: #1b1305;
  --st-focus: rgba(240, 165, 58, .5);
  --st-danger: #f0625a;
  --st-success: #4cc38a;
  --st-shadow: 0 10px 32px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
}

/* Font picker (design, brand kit, video): chips, count and a list that draws only its visible rows. */
.cs-pop.cs-pop-fonts{width:312px}
.st-fontpicker .cs-in{width:100%}
.st-fontchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.st-fontchip{height:22px;padding:0 8px;border:1px solid var(--st-line-strong);border-radius:999px;background:none;color:var(--st-muted);font:inherit;font-size:var(--st-text-xs);cursor:pointer}.st-fontchip:hover{background:var(--st-hover)}.st-fontchip.cs-on{background:var(--st-accent-soft);border-color:var(--st-accent);color:var(--st-text)}
.st-fontcount{display:block;margin-top:6px;font-size:var(--st-text-xs);color:var(--st-muted)}
.st-fontnone{width:100%;margin-top:6px;font-size:var(--st-text-sm)}
.cs-font-list.st-fontlist{display:block;position:relative;height:300px;max-height:300px;margin-top:4px}
.st-fontrows{position:relative;overflow:hidden}
.cs-font-item.st-fontrow{position:absolute;left:0;right:0;height:46px;padding-block:2px;justify-content:center;overflow:hidden}.st-fontrow span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45}
.cs-font-item small.st-latin-only{padding:0 5px;border-radius:3px;background:var(--st-hover);color:var(--st-text);font-weight:600}
.cv-select.cs-fontbtn{font-size:var(--st-text-sm)}.st-fontcaret{flex:none;width:0;height:0;border:4px solid transparent;border-top-color:var(--st-muted);border-bottom:0}