/* Cloudscape icon presentation layer for the AWS Transform explainer site.
   Cloudscape ships glyphs unstyled — stroke/fill live here. Colour comes from
   `currentColor`, so an icon inherits the colour of its containing element or
   card accent, which means it theme-flips for free. Load this AFTER the page's
   own <style> (and any theme sheet) so its colour rules win. */

.cs-ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 1.4px;
  stroke-linecap: round;
  overflow: visible;
  flex: none;
}
.cs-ico .stroke-linejoin-round { stroke-linejoin: round; }

/* A handful of Cloudscape glyphs (gen-ai, key, play, group, view-*, etc.)
   carry filled sub-paths marked `filled no-stroke`. NEVER add a blanket
   `fill:none` on `.cs-ico *` — it would gut those glyphs. */
.cs-ico .filled { fill: currentColor; }
.cs-ico .no-stroke { stroke: none; }

/* Generic holder used in markup: <span class="cc-icon" data-ico="..."></span>
   Sizes to the surrounding font-size via 1em; override per slot below. */
.cc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
}
.cc-icon .cs-ico { width: 1em; height: 1em; }

/* Inline in a heading / button / list marker */
.cs-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -0.14em;
  color: inherit;
}
.cs-inline .cs-ico { width: 100%; height: 100%; }

/* Semantic status colours (work in both themes via the palette variables) */
.cs-ok  { color: var(--green); }
.cs-warn { color: var(--amber); }
.cs-bad { color: var(--red); }

/* ── Per-slot sizing ────────────────────────────────────────────────
   Icons previously sized via emoji font-size. Match those visual sizes. */
.node-icon .cc-icon { font-size: 1.6rem; }          /* 3D orbit agent nodes */
.center-brain .cc-icon { font-size: 2rem; }          /* orbit centre brain */
.cap-icon { font-size: 2.4rem; line-height: 0; display: inline-flex; }
.cap-icon .cs-ico { width: 1em; height: 1em; }
.rg-icon .cc-icon,
.resource-group h3 .rg-icon { font-size: 1.3rem; }
.arch-bedrock .cc-icon { font-size: 1.05em; }
.cap-stat .val .cc-icon { font-size: 1.05em; }
.resource-contact a .cs-inline { font-size: 1em; }

@media (max-width: 768px) {
  .node-icon .cc-icon { font-size: 1.3rem; }
  .center-brain .cc-icon { font-size: 1.5rem; }
  .cap-icon { font-size: 1.8rem; }
}
@media (max-width: 480px) {
  .node-icon .cc-icon { font-size: 1.1rem; }
  .center-brain .cc-icon { font-size: 1.2rem; }
}