/* ──────────────────────────────────────────────────────────────────────────
   PINd.AI · Cloudscape iconography — presentation layer
   Icons come from icons.js (Cloudscape Design System, Apache-2.0). They are
   unstyled by default so the stroke, weight, and colour come from CSS. They
   inherit currentColor, so light/dark themes work for free.
   ────────────────────────────────────────────────────────────────────────── */

/* ── The icon primitive ── */
.cs-ico{
  display:block;
  width:1em;
  height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  flex-shrink:0;
}
.cs-ico .stroke-linejoin-round{stroke-linejoin:round}
.cs-ico .filled              {fill:currentColor}
.cs-ico .no-stroke           {stroke:none}

/* Elements upgraded by icons.js become flex boxes so the SVG centres cleanly. */
.has-cs-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}

/* Inline icon inside a heading, pill, or button — scales to surrounding text. */
.cs-inline{display:inline-flex;vertical-align:-0.14em;margin-right:.4em}
.cs-inline .cs-ico{width:1em;height:1em}
/* When we want the icon to sit inside a pill with a small gap; no side margin. */
.cs-inline.no-mr{margin-right:0}

/* ── Slot sizing (per PINd.AI page components) ── */
.mc-icon .cs-ico            {width:28px;height:28px}   /* index module cards */
.fc-icon .cs-ico            {width:26px;height:26px}   /* feat-card icons across pages */
.bb-icon .cs-ico            {width:26px;height:26px}   /* bedrock building-block cards */
.oc-icon .cs-ico            {width:24px;height:24px}   /* index outcomes */
.pr-check .cs-ico           {width:14px;height:14px}   /* lab prerequisite ticks */
.narrator-icon .cs-ico      {width:22px;height:22px}   /* narrator bars */
.st-icon .cs-ico            {width:22px;height:22px}   /* step-player step title */
.xr-icon .cs-ico            {width:22px;height:22px}   /* xref cards */
.tip-icon .cs-ico           {width:20px;height:20px}   /* tip callouts */
.meta-pill .cs-ico          {width:14px;height:14px}   /* hero meta pills */
.gnav-fab .gnav-btn .cs-ico {width:19px;height:19px}   /* nav FAB — no-op since nav.js uses emoji, keep for future */

/* ── Colour · icons inherit their container's currentColor.
   Add any per-slot accent overrides below.                    ── */
.mc-icon                    {color:inherit}   /* module-card .mc-icon already colours via [data-tone] */
.oc-icon                    {color:var(--violet,#7C3AED)}
.pr-check                   {color:#059669}

/* Status glyph classes (used inline in text) */
.cs-ok   { color:#059669 }
.cs-warn { color:#B45309 }
.cs-bad  { color:#DC2626 }
.cs-info { color:#0891B2 }
.cs-ok  .cs-ico,.cs-warn .cs-ico,.cs-bad .cs-ico,.cs-info .cs-ico{width:14px;height:14px}
html[data-theme="dark"] .cs-ok   { color:#34D399 }
html[data-theme="dark"] .cs-warn { color:#FBBF24 }
html[data-theme="dark"] .cs-bad  { color:#F87171 }
html[data-theme="dark"] .cs-info { color:#60A5FA }