/* Reusable form controls: color swatch + picker, font picker, and the compact input
 * sizes they assume.
 *
 * These used to live in stream-control.css, which only the Stream Control window loads —
 * so the same JavaScript controls, mounted on the Overlays page, rendered as unstyled
 * fragments: a color swatch collapsed to a one-pixel line, a font name jammed against
 * its button. A control kit belongs to whoever mounts it, not to one page.
 */

.cp-swatch { width: 46px; height: 28px; border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; padding: 2px;
  background: conic-gradient(#999 25%, #fff 0 50%, #999 0 75%, #fff 0) 0 0 / 12px 12px; }
.cp-swatch__c { display: block; width: 100%; height: 100%; border-radius: 3px; }
.cp-pop { position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); left: 0; width: 224px; padding: var(--space-3);
  background: var(--color-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.cp-sv { position: relative; height: 128px; border-radius: 6px; cursor: crosshair; }
.cp-sv-th { position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,0.5); pointer-events: none; }
.cp-hue { position: relative; height: 12px; border-radius: 999px; cursor: pointer; background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.cp-alpha { position: relative; height: 12px; border-radius: 999px; cursor: pointer; background: conic-gradient(#999 25%, #fff 0 50%, #999 0 75%, #fff 0) 0 0 / 10px 10px; }
.cp-alpha-bg { position: absolute; inset: 0; border-radius: 999px; }
.cp-bar-th { position: absolute; top: 50%; width: 14px; height: 14px; background: #fff; border: 1px solid rgba(0,0,0,0.35); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.cp-row { display: flex; gap: 4px; }
.cp-hex { flex: 1.5; }
.cp-n { flex: 1; min-width: 0; padding-left: 5px !important; padding-right: 2px !important; }
/* color picker MODAL (swatch opens this; commits only on Save) */
.cpm { position: fixed; inset: 0; z-index: var(--z-modal-nested); display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); padding: var(--space-5); }
.cpm-panel { width: 248px; padding: var(--space-4); background: var(--color-elevated); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.cpm-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-1); }

.tw-media-name { font-size: 0.8125rem; color: var(--color-text-primary); }
.tw-media-name.is-empty { color: var(--color-text-muted); }

/* ---- font picker ---- */
.fp { position: relative; }
.fp-cur { display: flex; align-items: center; gap: var(--space-3); }
.fp-cur__name { flex: 1; min-width: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-pop { position: absolute; z-index: var(--z-popover); top: calc(100% + 6px); left: 0; right: 0; padding: var(--space-3);
  background: var(--color-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-2); }
.fp-search { width: 100%; }

/* Both popovers are toggled with the hidden attribute, and a class rule carrying
   display:flex outranks the browser's own [hidden] { display: none } — so they sat open
   on top of the controls beneath them, permanently. */
.cp-pop[hidden], .fp-pop[hidden] { display: none; }
.fp-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.fp-item { text-align: left; border: 0; background: transparent; color: var(--color-text-primary); cursor: pointer; padding: 6px 8px;
  border-radius: 6px; font-size: 1.1rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-item:hover { background: var(--color-surface); }
.fp-item.is-on { color: var(--color-accent, #8b7cf6); }
.fp-empty { color: var(--color-text-muted); padding: var(--space-3); font-size: 0.8125rem; }

/* ---- text-style editor ---- */
.ts { display: flex; flex-direction: column; gap: var(--space-4); }
.ts-preview { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: var(--space-3); overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: repeating-conic-gradient(#2b2b2f 0% 25%, #232327 0% 50%) 0 0 / 22px 22px; }
.ts-preview > span { display: inline-block; transform-origin: center; white-space: nowrap; }
.ts-slider { display: flex; align-items: center; gap: var(--space-3); }
.ts-slider input[type=range] { flex: 1; }
.ts-num { width: 66px; flex: none; }
.ts-sub { padding-left: var(--space-4); border-left: 2px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.ts-togrow { margin-bottom: var(--space-2); }

/* ---- compact form bits ---- */
.input--sm { padding: 5px 9px !important; font-size: 0.8125rem !important; min-height: 0 !important; }