/* Constellations icon system — base sizing + optional mon-style roundel.
   Source: icons-sprite.svg (one file, all icons as <symbol id="cn-{name}">).
   Icons are stroke-based on a 24px grid and paint in currentColor, so they
   inherit the surrounding text color. Color them with the CSS `color` property
   (or the --long/--short/--emphasis modifiers); size with font-size or width/height.
   Reference an icon: <svg class="cn-icon"><use href="/icons/icons-sprite.svg#cn-search"/></svg> */

.cn-icon{
  width: 1.25em; height: 1.25em;   /* scales with font-size; override as needed */
  display: inline-block; vertical-align: -0.18em;
  color: var(--c-ink);             /* default on light; set to var(--c-bloom) on dark */
  flex: none;
}
/* Semantic colors (apply per meaning, per the brand color->meaning map) */
.cn-icon--long, .cn-icon--buy   { color: var(--c-culm); }   /* long / positive */
.cn-icon--short, .cn-icon--sell { color: var(--c-rose); }   /* short / negative */
.cn-icon--emphasis              { color: var(--c-amber); }  /* active / critical (on dark, or as fill) */
.cn-icon--muted                 { color: var(--hairline); }

/* Mon-style roundel: filled disc with the icon reversed out, echoing Image-1 crests.
   Usage: <span class="cn-roundel"><svg class="cn-icon">…</svg></span> */
.cn-roundel{
  display: inline-grid; place-items: center;
  width: 2.6em; height: 2.6em; border-radius: 999px;
  background: var(--c-ink); color: var(--c-bloom);   /* disc + reversed icon */
}
.cn-roundel .cn-icon{ width: 1.3em; height: 1.3em; color: inherit; }
.cn-roundel--culm  { background: var(--c-culm);  color: var(--c-bloom); }
.cn-roundel--amber { background: var(--c-amber); color: var(--c-ink);  } /* Ink on Amber */
.cn-roundel--rose  { background: var(--c-rose);  color: var(--c-bloom); }
.cn-roundel--bloom { background: var(--c-bloom); color: var(--c-ink);
                     box-shadow: inset 0 0 0 1px var(--hairline); }