/* CSP-compatibility utility classes.
 *
 * Static inline styles (especially in index.html, parsed before any JS can run)
 * are blocked by `style-src 'self'`. This file holds the small set of utilities
 * those inline styles needed: display toggles, icon sizing, toolbar separators.
 *
 * Dynamically-injected HTML (templates that go through innerHTML at runtime)
 * is handled separately by the style-attribute lifter at
 *   public/js/utils/utils-csp-style-lift.ts
 * which rewrites blocked `style="..."` attributes into element.style.X writes
 * (CSP only blocks the attribute path, not the property API).
 *
 * Long-term: incrementally migrate runtime templates to classes too, then
 * remove the lifter. This file stays.
 */

.is-hidden { display: none !important; }

.icon-xs { width: 12px; height: 12px; }

/* Lucide icons inside the harness "Add" dropdown options. The buttons used to
 * carry inline `style="width:12px;height:12px"` on every `<i>` — moved here. */
.comp-opt > i[data-lucide] { width: 12px; height: 12px; }

/* Toolbar/menu vertical separator slivers. */
.tb-sep { height: 1px; background: #334155; margin: 2px 0; }

/* "A/B" dark-segments toggle in the harness toolbar. */
.ht-btn-darkseg { font-size: 9px; letter-spacing: -.3px; padding: 0 3px; color: var(--text-muted); }

/* Empty-state hint above the detail panel. */
.detail-empty-hint { color: #475569; font-size: 12px; }

/* ── Icon sizing utilities (replaces inline style= on <i data-lucide> tags) ── */
.ico-xxs { width: 10px; height: 10px; vertical-align: -1px; }
.ico-xs  { width: 12px; height: 12px; }
.ico-xs-sub { width: 12px; height: 12px; vertical-align: -2px; }
.ico-sm  { width: 13px; height: 13px; }
.ico-link-clr { color: #a5b4fc; }
.proj-empty-hint { padding: 20px 10px; text-align: center; font-size: 11px; color: var(--text-muted); }
.text-muted { color: var(--text-muted); }