/* ============================================================================
 * Cloudscape icon presentation for the Amazon Quick workshop.
 * Cloudscape ships icons UNSTYLED — stroke/size/colour come from here.
 * Link AFTER style.css / explainer-base.css so these colour rules win.
 *
 * Colour: icons inherit `currentColor`. Block slots below set an explicit
 * colour; inline icons inherit the surrounding text colour.
 * Do NOT add a blanket `fill:none` — it guts the `filled` sub-path glyphs.
 * ========================================================================== */

/* ── base glyph ── */
.cs-ico { display: inline-block; vertical-align: middle; width: 16px; height: 16px; flex: none; }
.cs-ico .filled { fill: currentColor; }
.cs-ico .no-stroke { stroke: none; }
.cs-ico .stroke-linejoin-round { stroke-linejoin: round; }

/* ── inline, sits in a run of text (headings, notices, buttons) ── */
.cs-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; margin-right: .42em;
  vertical-align: -0.14em; flex: none;
}
.cs-inline .cs-ico { width: 100%; height: 100%; }

/* ═══════════════ Hub slots (style.css) ═══════════════ */

/* info-card icon tile — 48x48 gradient tile, glyph in brand purple */
.info-card .card-icon { color: var(--brand); }
.info-card .card-icon .cs-ico { width: 24px; height: 24px; }

/* nav-list leading glyph */
.nav-list .nav-emoji { display: inline-flex; align-items: center; justify-content: center; color: var(--brand); }
.nav-list .nav-emoji .cs-ico { width: 20px; height: 20px; }
.nav-list a:hover .nav-emoji { color: var(--brand-light); }

/* section heading inline glyph */
.section h2 .cs-inline, .section h3 .cs-inline { color: var(--brand); }

/* notices — tint the inline glyph to the notice's accent */
.notice .cs-inline { color: var(--amber); }
.notice-blue .cs-inline { color: var(--blue); }
.notice-teal .cs-inline { color: var(--teal); }
.notice-purple .cs-inline { color: var(--brand); }

/* buttons */
.copy-btn .cs-inline { color: #fff; }
.tab-btn .cs-inline { color: inherit; }
.tt-btn .cs-inline { color: inherit; }

/* ═══════════════ Explainer slots (explainer-base.css) ═══════════════ */

/* concept cards already set `color` per variant (.cc.purple .cc-icon{color:…}) */
.cc-icon .cs-ico { width: 26px; height: 26px; }
.cc-icon { color: var(--brand); }

/* exp-card heading icon tile */
.exp-card h2 .icon { color: var(--brand); }
.exp-card h2 .icon .cs-ico { width: 24px; height: 24px; }

/* narrator */
.narrator-icon { color: var(--brand); }
.narrator-icon .cs-ico { width: 26px; height: 26px; }

/* callouts already set `color` per type (.callout.tip .callout-icon{color:…}) */
.callout-icon .cs-ico { width: 20px; height: 20px; }

/* capability-table leading glyph */
.cap-icon { color: var(--brand); }
.cap-icon .cs-ico { width: 18px; height: 18px; }

/* explainer footer arrow / next */
.exp-footer .next-arrow .cs-ico { width: 20px; height: 20px; }
.exp-footer .next-arrow { color: var(--brand); }

/* reduced-motion / print friendliness: icons are static, nothing to do */