/* S1 icons. One outline family (Lucide, lucide-static 1.48.0, ISC) drawn from the self-hosted sprite icons.svg.
 * Markup: <svg class="s1-icon" aria-hidden="true" focusable="false"><use href="./icons.svg?v=HASH#i-NAME"></use></svg>
 * Build it with RWTIcon(name, {size, label}) — never by hand in tab renderers.
 *
 * Rules
 * - An icon never carries color of its own. Paint is currentColor, so it takes the text color of its context;
 *   semantic color comes only from the existing status tokens on that context (late/soon/wait/ok/mute).
 * - The sprite symbols carry geometry only; every paint property below is inherited through <use>.
 * - Stroke width is set per size so the rendered line is the same weight at every size:
 *   14px → 1.46px, 16px → 1.5px, 20px → 1.75px (24-unit grid × size/24).
 * - Decorative by default (aria-hidden). An icon that is the only content of a control is named on the
 *   control (aria-label), not on the svg. RWTIcon(name, {label}) is only for a standalone meaningful glyph. */

.s1-icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;            /* optical baseline for 13–15px Inter */
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  pointer-events: none;
}
.s1-icon--14 { width: 14px; height: 14px; stroke-width: 2.5; vertical-align: -2px; }
.s1-icon--16 { width: 16px; height: 16px; stroke-width: 2.25; }
.s1-icon--20 { width: 20px; height: 20px; stroke-width: 2.1; vertical-align: -5px; }

/* Icon + label pairs: the gap is fixed by context, never by ad hoc spacing. */
.s1-icon-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.s1-icon-label--wide { gap: 8px; }

/* Contexts already defined in s1-components.css: their existing gap/alignment is kept; icons only get sized. */
.s1-btn > .s1-icon { width: 16px; height: 16px; stroke-width: 2.25; vertical-align: 0; }
.s1-btn--small > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.s1-btn--ghost > .s1-icon { color: var(--s1-ink-2); }
.s1-btn--icon { gap: 0; }
.s1-tab > .s1-icon { width: 16px; height: 16px; margin-right: 2px; }
.s1-segmented-item > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; margin-right: 5px; vertical-align: -2px; }
.s1-chip > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; color: var(--s1-mute); }
.s1-chip[aria-pressed="true"] > .s1-icon { color: var(--s1-ink); }
.s1-menu-item > .s1-icon { width: 16px; height: 16px; color: var(--s1-mute); }
.s1-text-btn > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; margin-right: 4px; vertical-align: -2px; }
.s1-panel-head a > .s1-icon, .s1-panel-link > .s1-icon { width: 14px; height: 14px; stroke-width: 2.5; vertical-align: -2px; }

/* Status control: the chevron becomes the sprite glyph when the controller renders it; the tone dot stays. */
.s1-status-control > .s1-icon { position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; stroke-width: 2.5; margin-top: -7px; color: var(--s1-ink-2); }
.s1-status-control:has(> .s1-icon)::after { content: none; }

@media (max-width: 640px) {
  /* Larger touch targets do not change icon size; icons never scale with the hit area. */
  .s1-btn--icon > .s1-icon { width: 18px; height: 18px; stroke-width: 2.15; }
  /* Tabs: icon over label in one row of five instead of wrapping to three lines (the icon pays for itself). */
  .s1-tabs { flex-wrap: nowrap; padding: 0 4px; gap: 0; }
  .s1-tab { position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 8px 2px 7px; font-size: 11.5px; line-height: 1.2; text-align: center; }
  .s1-tab > .s1-icon { width: 20px; height: 20px; stroke-width: 2.1; margin: 0; }
  .s1-tab > .s1-tab-count { position: absolute; top: 4px; left: calc(50% + 8px); padding: 0 5px; font-size: 10.5px; }
}
@media (forced-colors: active) {
  .s1-icon { stroke: CanvasText; }
  .s1-btn > .s1-icon { stroke: ButtonText; }
}