/* icons.css — Cloudscape icon presentation layer for site-generic/
 *
 * Companion to icons.js. Applies to any element with class="cs-ico" (added by
 * icons.js when a [data-ico] slot is upgraded) plus the per-slot sizing rules
 * for the wrapper classes that used to hold emoji.
 *
 * Load AFTER mobile.css so per-slot overrides win against the shared theme
 * rules that also target these classes.
 *
 * DO NOT add a blanket `.cs-ico svg *{fill:none}` or `.cs-ico svg{fill:none}`
 * rule — it silently guts the ~10 glyphs whose sub-paths use `filled no-stroke`
 * (gen-ai, group, key, light-dark, play, user-profile-active, view-horizontal,
 * view-vertical, list-view, calendar).
 */

/* ------------------------------------------------------------------------
 * 1. Base SVG treatment (all icons)
 * ------------------------------------------------------------------------ */
.cs-ico {
  width: 1em;
  height: 1em;
  vertical-align: -0.16em;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  overflow: visible;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.cs-ico .stroke-linejoin-round {
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cs-ico .filled     { fill: currentColor; }
.cs-ico .no-stroke  { stroke: none; }

/* Elements that have been upgraded from a [data-ico] slot lose their inline
 * layout quirks — display them as inline-flex so gap/align work naturally. */
.has-cs-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------------
 * 2. Inline utility — for icons inside headings, buttons, or prose
 * ------------------------------------------------------------------------ */
.cs-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: -0.15em;
}
/* Inline icons scale with parent font-size via the base 1em × 1em rule. */

/* ------------------------------------------------------------------------
 * 3. Status utility classes (semantic + colour)
 * ------------------------------------------------------------------------ */
.cs-ok, .cs-warn, .cs-bad, .cs-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cs-ok   { color: var(--grn); }
.cs-warn { color: var(--amb); }
.cs-bad  { color: var(--red); }
.cs-info { color: var(--cyan); }
/* Status utility icons scale with parent font-size via the base 1em × 1em rule. */

/* Light-theme colour swap for status utilities (mobile.css flips var(--grn) etc.
 * in most contexts, but here we anchor to WCAG-friendly darker greens/reds on
 * white surfaces). */
html[data-theme="light"] .cs-ok   { color: #047857; }
html[data-theme="light"] .cs-warn { color: #B45309; }
html[data-theme="light"] .cs-bad  { color: #B91C1C; }
html[data-theme="light"] .cs-info { color: #0891B2; }

/* ------------------------------------------------------------------------
 * 4. Per-slot sizing (real classes on site-generic/*.html)
 *
 * Ordered by frequency of emoji use so the visual hierarchy matches the
 * migration priority. Each rule targets .cs-ico *inside* the slot wrapper,
 * so the wrapper's existing colour/spacing rules keep working.
 * ------------------------------------------------------------------------ */

/* Primary concept-card icon — .ico (221 emoji uses, the workhorse) */
.ico .cs-ico { width: 20px; height: 20px; }

/* Concept-card colour variants — colour is inherited via currentColor, so
 * these rules use the same accent variables mobile.css already themes for
 * both dark and light. */
.cc .ico { color: var(--pb); }
.cc.pu .ico { color: var(--pb); }
.cc.cy .ico { color: var(--cyan); }
.cc.pk .ico { color: var(--pink); }
.cc.gn .ico { color: var(--grn); }
.cc.ab .ico { color: var(--amb); }
.cc.rd .ico { color: var(--red); }

/* Larger concept card icon used on deep-dive pages */
.cc-icon .cs-ico { width: 28px; height: 28px; }
.cc.pu .cc-icon { color: var(--pb); }
.cc.cy .cc-icon { color: var(--cyan); }
.cc.pk .cc-icon { color: var(--pink); }
.cc.gn .cc-icon { color: var(--grn); }
.cc.ab .cc-icon { color: var(--amb); }
.cc.rd .cc-icon { color: var(--red); }

/* Principle-card icon (30 uses) — matches original font-size:22px */
.p-icon .cs-ico { width: 22px; height: 22px; }
.principle-card .p-icon { color: var(--pb); }

/* Section-header icon (41 uses) — matches original font-size:22px */
.sh .cs-ico {
  width: 22px;
  height: 22px;
  vertical-align: -0.22em;
  margin-right: 4px;
}
.sh { color: var(--txt); }

/* Landing-page module card big icon (11 uses, index.html) — decorative colored
 * well; icon needs high contrast against tinted background. */
.mod-card .card-icon .cs-ico,
.card-icon .cs-ico {
  width: 28px;
  height: 28px;
  stroke-width: 2;
  color: var(--txt);
}

/* Study-aid decorative service tiles (32x32 boxes with gradient bg) —
 * same treatment as module cards: high contrast on tinted well. */
.svc-ico { color: var(--txt); }
.svc-ico .cs-ico { stroke-width: 2; }

/* Narrator icon on architecture panels (12 uses) */
.n-icon .cs-ico { width: 22px; height: 22px; }
.narrator .n-icon .cs-ico,
.narrator-bar .n-icon .cs-ico { width: 24px; height: 24px; }

/* Small badges — .badge (12) + .badge.p/c/g/a/rd variants (52) */
.badge .cs-ico { width: 12px; height: 12px; margin-right: 4px; }
.badge.p .cs-ico { color: var(--pb); }
.badge.c .cs-ico { color: var(--cyan); }
.badge.g .cs-ico { color: var(--grn); }
.badge.a .cs-ico { color: var(--amb); }
.badge.rd .cs-ico { color: var(--red); }

/* "What's New" badge (55 uses — sparkle icon inline) */
.new-badge .cs-ico { width: 13px; height: 13px; }
.new-badge { color: var(--cyan); }

/* Right target/thumb elements (20 uses, exam prep) */
.rt .cs-ico { width: 20px; height: 20px; }

/* Deep-dive service tile (6 uses, m09) */
.service-name .cs-ico { width: 22px; height: 22px; margin-right: 6px; }

/* NIST-CSF function icon (6 uses) — decorative well, needs contrast. */
.fn-icon { color: var(--txt); }
.fn-icon .cs-ico { width: 24px; height: 24px; stroke-width: 2; }

/* Exam-prep domain weight pill (6 uses — star) */
.weight .cs-ico { width: 12px; height: 12px; color: var(--amb); }

/* Filter buttons on practice questions (6 uses) */
.filter-btn .cs-ico { width: 14px; height: 14px; }

/* Policy-type pill (4 uses) + Analyzer tab (4 uses) */
.pt-pill .cs-ico,
.az-tab .cs-ico { width: 14px; height: 14px; }

/* Result badges — allow/deny markers (~65 uses total across labs) */
.result .cs-ico,
.result-badge .cs-ico { width: 12px; height: 12px; }
.result.allow      { color: var(--grn); }
.result.deny       { color: var(--red); }
.result-badge.allow{ color: var(--grn); }
.result-badge.deny { color: var(--red); }

/* Step-number pill (rare — 3 uses) */
.step-num .cs-ico { width: 16px; height: 16px; }

/* Chip / label / tag micro-slots */
.chip .cs-ico,
.lbl  .cs-ico,
.tag  .cs-ico { width: 12px; height: 12px; }

/* Warning / ok table cells (rare — audit tables) */
td.warn .cs-ico { width: 14px; height: 14px; color: var(--amb); }
td.ok   .cs-ico { width: 14px; height: 14px; color: var(--grn); }

/* Warning inline label */
.lbl.warn { color: var(--amb); }

/* Register-header, ti-mit — one-offs on m01 */
.register-header .cs-ico { width: 18px; height: 18px; margin-right: 6px; }
.ti-mit .cs-ico { width: 14px; height: 14px; color: var(--grn); margin-right: 4px; }

/* ------------------------------------------------------------------------
 * 5. Callout inline-icon convention
 *
 * Callouts use <strong>EMOJI Text:</strong> pattern (~200+ uses). Migration
 * replaces this with <strong><span class="cs-inline" data-ico="X"></span>
 * Text:</strong>. Colour follows the callout's border colour variant.
 * ------------------------------------------------------------------------ */
.callout.pu .cs-inline { color: var(--pb); }
.callout.cy .cs-inline { color: var(--cyan); }
.callout.pk .cs-inline { color: var(--pink); }
.callout.gn .cs-inline { color: var(--grn); }
.callout.ab .cs-inline,
.callout.warn .cs-inline { color: var(--amb); }
.callout.rd .cs-inline { color: var(--red); }
.callout.info .cs-inline { color: var(--cyan); }

/* ------------------------------------------------------------------------
 * 6. Reduced motion
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cs-ico { transition: none; }
}