/* ProField — icon system
   ------------------------------------------------------------------
   All icons in assets/icons/** are 24x24, stroke="currentColor", no fill.
   Inline the SVG (or use an <svg><use href="sprite.svg#id"> sprite) so the
   stroke inherits the surrounding text colour. Don't load them as <img>
   if you want them to recolour — <img> can't inherit currentColor.

   Single source of truth: set the colour on the parent text element and
   the icon follows. Size with --pf-icon-size.
   ------------------------------------------------------------------ */

.pf-icon{
  width: var(--pf-icon-size, 1.25em);
  height: var(--pf-icon-size, 1.25em);
  flex: none;
  display: inline-block;
  vertical-align: -0.18em;        /* optical baseline align with text */
  color: inherit;                  /* currentColor → stroke */
  stroke-width: 1.75;              /* matches the source family */
}

/* size steps */
.pf-icon--sm{ --pf-icon-size: 16px; }
.pf-icon--md{ --pf-icon-size: 20px; }
.pf-icon--lg{ --pf-icon-size: 24px; }

/* example: nav item — icon picks up the link colour automatically */
.pf-nav a{ display:flex; align-items:center; gap:12px; color:#0E1525; }
.pf-nav a:hover,
.pf-nav a[aria-current="page"]{ color:#FF6A1A; }

/* status colours — apply to the wrapping element, icon inherits */
.pf-status--ok{ color:#1F8A5B; }      /* paid / trial-active */
.pf-status--warn{ color:#FF6A1A; }    /* past-due / downgrade-pending */
.pf-status--bad{ color:#D4310A; }     /* payment-failed */