/* ──────────────────────────────────────────────────────────────────────────
   Cloudscape iconography — presentation layer for icons.js
   (adapted for the AnyCompany Group Finance workshop site)

   Cloudscape ships icons as 16x16 SVGs that are *unstyled* on their own: the
   stroke, weight and colour come from CSS, so they inherit the surrounding
   text colour via currentColor and work in both light and dark themes without
   duplicate assets.

   Reference: cloudscape.design/foundation/visual-foundation/iconography/
   ────────────────────────────────────────────────────────────────────────── */

/* ── 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
   and any leftover text node can't nudge it off-centre. */
.has-cs-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
/* A decision-table cell must stay a table cell, not become a flex box. */
td.dt-icon.has-cs-ico { display: table-cell; text-align: center; }

/* ── Per-slot sizing ─────────────────────────────────────────────────────
   Each slot previously sized an emoji with font-size; icons are sized
   explicitly instead so they align on the pixel grid. ── */
.nav-list .nav-emoji .cs-ico              { width: 20px; height: 20px; }
.info-grid .info-card .card-icon .cs-ico,
.card .card-icon .cs-ico                  { width: 26px; height: 26px; }
.th-ico .cs-ico                           { width: 22px; height: 22px; }
.callout .callout-icon .cs-ico            { width: 19px; height: 19px; }
.narrator-bar .narrator-icon .cs-ico      { width: 22px; height: 22px; }
.decision-table .dt-icon .cs-ico          { width: 18px; height: 18px; }
.side-nav-panel .nav-icon .cs-ico         { width: 17px; height: 17px; }
.nav-cluster-btn .cs-ico                  { width: 17px; height: 17px; }
.theme-fab .cs-ico                        { width: 17px; height: 17px; }
.wj-trophy .cs-ico                        { width: 24px; height: 24px; }
.wj-trophy                                { color: var(--d-accent, #059669); }

/* Inline icons sitting in headings / labels / buttons — scale to the
   surrounding text size (1em) so they match the emoji they replaced. */
.cs-inline { display: inline-flex; vertical-align: -0.14em; margin-right: 0.4em; }
.cs-inline .cs-ico { width: 1em; height: 1em; }

/* ── Colour — icons take the workshop's emerald accent, or the accent of the
   card/callout they sit in ─────────────────────────────────────────────── */
.nav-list .nav-emoji                      { color: var(--green, #059669); }
.info-grid .info-card .card-icon,
.card .card-icon                          { color: var(--green, #059669); }
.th-ico                                   { color: var(--t, #059669); }
.narrator-bar .narrator-icon              { color: var(--green, #059669); }
.decision-table .dt-icon                  { color: var(--green, #059669); }

/* Callout icons follow the callout's accent so the pairing stays cohesive. */
.callout .callout-icon                    { color: var(--green, #059669); }
.callout-green  .callout-icon             { color: var(--green, #059669); }
.callout-blue   .callout-icon             { color: var(--blue, #2563EB); }
.callout-amber  .callout-icon             { color: var(--amber, #D97706); }
.callout-red    .callout-icon             { color: #DC2626; }

/* Side navigation panel: icons read as affordances, not decoration. */
.side-nav-panel .nav-icon                 { color: #64748B; }
.side-nav-panel a.current .nav-icon,
.side-nav-panel a.snp-highlight .nav-icon { color: var(--green, #059669); }

/* Status glyphs keep their semantic colour wherever they appear. */
.cs-ok   { color: #059669; }
.cs-warn { color: #D97706; }
.cs-bad  { color: #DC2626; }
.cs-info { color: #2563EB; }

/* Status glyphs injected inline need a little separation from the text. */
.cs-ok, .cs-warn, .cs-bad, .cs-info {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 6px;
}
.cs-ok .cs-ico, .cs-warn .cs-ico, .cs-bad .cs-ico, .cs-info .cs-ico { width: 14px; height: 14px; }
svg.cs-ico.cs-ok, svg.cs-ico.cs-warn, svg.cs-ico.cs-bad, svg.cs-ico.cs-info {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
}

/* ── Dark theme ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .nav-list .nav-emoji                 { color: var(--green-bright, #34D399); }
html[data-theme="dark"] .info-grid .info-card .card-icon,
html[data-theme="dark"] .card .card-icon                     { color: var(--green-bright, #34D399); }
html[data-theme="dark"] .narrator-bar .narrator-icon         { color: var(--green-bright, #34D399); }
html[data-theme="dark"] .decision-table .dt-icon             { color: var(--green-bright, #34D399); }
html[data-theme="dark"] .callout .callout-icon               { color: var(--green-bright, #34D399); }
html[data-theme="dark"] .callout-green .callout-icon         { color: var(--green-bright, #34D399); }
html[data-theme="dark"] .callout-blue  .callout-icon         { color: #60A5FA; }
html[data-theme="dark"] .callout-amber .callout-icon         { color: #FBBF24; }
html[data-theme="dark"] .callout-red   .callout-icon         { color: #F87171; }
html[data-theme="dark"] .side-nav-panel .nav-icon            { color: #94A3B8; }
html[data-theme="dark"] .side-nav-panel a.current .nav-icon,
html[data-theme="dark"] .side-nav-panel a.snp-highlight .nav-icon { color: var(--green-bright, #34D399); }

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; }