/* PIKA icon contract: 1.8 units on a 24-unit grid (1.35px at 18px).
 * Match the approved smart-keyframe icon, independent of local/lazy CSS.
 * Filled Phosphor outlines use a 256 grid: regular body = 16 units;
 * expanding that body by 3.2 gives the same 19.2/256 = 1.8/24 ratio.
 * Never apply this to brand wordmarks, traced silhouettes or artwork.
 */
@layer pika-iconography {
  :root { --ui-icon-stroke: 1.8; }

  svg[data-ui-icon="outline"] {
    --ui-icon-grid: 24;
    fill: none !important;
    stroke: currentColor !important;
  }
  svg[data-ui-icon="outline"][viewBox="0 0 14 14"] { --ui-icon-grid: 14; }
  svg[data-ui-icon="outline"][viewBox="0 0 16 16"] { --ui-icon-grid: 16; }
  svg[data-ui-icon="outline"][viewBox="0 0 22 18"],
  svg[data-ui-icon="outline"][viewBox="1 3 22 18"] { --ui-icon-grid: 18; }
  svg[data-ui-icon="outline"][viewBox="1 2 21 20"] { --ui-icon-grid: 20; }
  svg[data-ui-icon="outline"][viewBox="1 1 22 22"] { --ui-icon-grid: 22; }
  svg[data-ui-icon="outline"][viewBox="0 0 32 32"] { --ui-icon-grid: 32; }

  /* Resource navigation keeps its two top strokes; only the box fills when selected. */
  .nav a[href="/cases"][aria-current="page"] > svg[data-ui-icon="outline"] > rect {
    fill: currentColor !important;
  }

  svg[data-ui-icon="outline"],
  svg[data-ui-icon="outline"] :is(g,path,rect,circle,ellipse,line,polyline,polygon) {
    stroke-width: calc(var(--ui-icon-stroke) * var(--ui-icon-grid) / 24) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: none !important;
  }

  svg[data-ui-icon="phosphor"],
  svg[data-ui-icon="phosphor"] :is(g,path,rect,circle,ellipse,line,polyline,polygon) {
    stroke: currentColor !important;
    stroke-width: calc(var(--ui-icon-stroke) * 256 / 24 - 16) !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: none !important;
  }
  svg[data-ui-icon="phosphor"], svg[data-ui-icon="solid"] { fill: currentColor !important; }
  svg[data-ui-icon="solid"], svg[data-ui-icon="solid"] * { stroke: none !important; }
}