/* ══════════════════════════════════════════════════════════════
   XSkillo — Icon system
   Replaces FontAwesome. Append to panel.css / coach.css / pwa.css,
   or load standalone before them.

   Sizing note: FA sized icons by font-size, so `<i>` inherited from
   its parent. `width:1em` reproduces that exactly, which is why the
   existing layout does not shift when you swap the markup.
   ══════════════════════════════════════════════════════════════ */

.xsk-i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;   /* matches FA's baseline nudge */
  flex-shrink: 0;             /* stops icons collapsing inside flex rows */

  fill: none;
  stroke: currentColor;       /* inherits colour like a font did */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Tabler is drawn on a 24px grid at 2px stroke. Scaling the whole icon
     down scales the stroke with it, so a 14px icon gets a 1.17px stroke and
     looks washed out next to text. Compensating keeps weight optical. */
  vector-effect: non-scaling-stroke;
}

/* Filled variants — for icons that read better solid (star, heart, circle) */
.xsk-i--fill { fill: currentColor; stroke: none; }

/* Sizes. Use these instead of FA's fa-lg / fa-2x. */
.xsk-i--sm { width: .875em; height: .875em; }
.xsk-i--lg { width: 1.25em; height: 1.25em; }
.xsk-i--xl { width: 1.5em;  height: 1.5em;  }
.xsk-i--2x { width: 2em;    height: 2em;    }
.xsk-i--3x { width: 3em;    height: 3em;    }

/* Fixed-width, for icons in a list or nav where labels must align.
   Replaces fa-fw. */
.xsk-i--fw { width: 1.25em; }

/* Thinner stroke for large decorative icons — 2px on a 48px icon is heavy */
.xsk-i--2x, .xsk-i--3x { stroke-width: 1.5; }

/* Spinner. Replaces fa-spin. */
.xsk-i--spin { animation: xsk-i-spin 1s linear infinite; }
@keyframes xsk-i-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .xsk-i--spin { animation-duration: 2.5s; }
}

/* Debug only: WP_DEBUG renders a hollow square for an unknown name. */
.xsk-i--missing { color: #E5484D; opacity: .8; }