/* ==========================================================================
   Theme icons — the sidebar's visual language, usable anywhere.

   The glyphs themselves live in ONE inline sprite (templates/_icons.html);
   this file only sizes and colours them. Nothing here is a colour decision:
   every icon inherits `currentColor`, so it follows the button, the sidebar's
   active gradient, the dark rail, or a public page's light theme on its own.

   Use:  <svg class="ic" aria-hidden="true" focusable="false">
           <use href="#i-trash"/>
         </svg>
   or from JS:  stIco("trash")   (static/js/icons.js)
   ========================================================================== */

.ic {
  width: 1.15em;
  height: 1.15em;
  /* INLINE on purpose: a sprite icon usually sits inside a sentence (a title,
     a date, a note). Some resets make every <svg> block-level, which puts the
     icon on its own line above the words it labels. */
  display: inline-block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;
  pointer-events: none;
}

/* An icon and the word(s) it labels are ONE unit. Without this a long line can
   break between the glyph and its text, leaving the icon alone on a line —
   reported on the Video Studio export list (2026-11-12). */
.ic-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  vertical-align: middle;
}
.ic-line > span { min-width: 0; }

/* Fixed sizes for places where `em` is unreliable (chips, avatars, empty states) */
.ic-sm  { width: 16px; height: 16px; }
.ic-md  { width: 19px; height: 19px; }
.ic-lg  { width: 24px; height: 24px; }
.ic-xl  { width: 32px; height: 32px; }
.ic-2xl { width: 44px; height: 44px; }
.ic-3xl { width: 56px; height: 56px; }

/* Status tones — never signal by glyph alone (colour + shape + text) */
.ic-ok     { color: #16a34a; }
.ic-warn   { color: #d97706; }
.ic-danger { color: #dc2626; }
.ic-info   { color: #1d4ed8; }
.ic-muted  { color: #94a3b8; }

/* Sit an icon next to a label without a wrapper element */
.ic + span, .ic + .tb-lbl, .ic + b { margin-inline-start: 6px; }

/* Sprite host — present on every page, never visible, never interactive */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Slots that used to hold an emoji character -------------------------
   These already centre an <img>; an inline <svg> needs the same treatment. */
.sb-item .sb-ico svg,
.mb-tab .mb-ico svg,
.cs-act .cs-ico svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
  stroke-width: 1.8;
}
.create-sheet .cs-act .cs-ico svg { width: 24px; height: 24px; }

/* Topbar pills (bell / feedback / page) used `font-size` on the emoji. */
.pill-btn .tb-ico { display: inline-flex; align-items: center; justify-content: center; }
.pill-btn .tb-ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
@media (max-width: 600px) {
  .pill-btn#btnBell .tb-ico svg,
  .pill-btn#btnFeedback .tb-ico svg { width: 20px; height: 20px; }
}

/* Modal close buttons: one glyph, one size, one hit area. */
.modal-close .ic,
.modal-close svg { width: 18px; height: 18px; stroke-width: 2; }

/* RTL: the sprite is drawn LTR; only the arrows may need mirroring, and they
   are direction-specific (i-send-back, i-skip-*). Never flip a magnifier, a
   trash can or a camera. */
[dir="rtl"] .ic-dir { transform: scaleX(-1); }