/* ============================================================
   HCIcons - sitewide icon styles.
   v2.29.0

   Pairs with js/icons.js. Loaded on EVERY page, because the shared
   nav renders marks on every page. Page-specific icon treatments
   (the tinted 46px tiles on the homepage bento, for instance) stay
   in that page's own stylesheet - only the base system lives here.

   The single most important rule in this file is `stroke:
   currentColor` inheritance: an icon takes the colour of whatever
   text context it sits in, so a per-guide accent themes its icons
   with no extra CSS. That is the entire reason for moving off emoji,
   which carry their own immutable colour.
   ============================================================ */

.hci {
  display: block;
  flex: none;
  /* Never let a mark distort: it is a 1:1 grid by definition. */
  aspect-ratio: 1 / 1;
}

/* Wrapper emitted by the React `hcIcon()` helper. */
.hci-w {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---- Nav icon slots -------------------------------------------- */
/* .hcddic previously held an emoji text glyph, so it was sized by
   font-size. A mark needs a real box instead. */
.hcddic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  /* Marks read at ~72% weight against nav label text so the label
     stays the primary element and the icon supports it. */
  color: color-mix(in srgb, currentColor 72%, transparent);
  transition: color 180ms cubic-bezier(.25, 1, .5, 1),
              transform 180ms cubic-bezier(.25, 1, .5, 1);
}

/* Full-strength accent on hover / active, so the mark confirms the
   interaction rather than sitting inert. */
.hcddi:hover .hcddic,
.hcddi:focus-visible .hcddic,
.hcddi.on .hcddic,
.hcmlink:hover .hcddic,
.hcmlink:focus-visible .hcddic,
.hcmlink.on .hcddic {
  color: var(--hc-teal, #00B4A2);
  transform: scale(1.08);
}

/* Group headers in the guides dropdown read as labels, not links. */
.hcddcat .hcddic,
.hcddgcat .hcddic {
  width: 16px;
  height: 16px;
  color: var(--hc-teal, #00B4A2);
}

@media (prefers-reduced-motion: reduce) {
  .hcddic {
    transition: none;
  }

  .hcddi:hover .hcddic,
  .hcddi.on .hcddic,
  .hcmlink:hover .hcddic,
  .hcmlink.on .hcddic {
    transform: none;
  }
}

/* ============================================================
   GROUP COLOUR MODEL  (v2.30.0)

   Why colour is assigned by GROUP and not per guide: 17 guides cannot
   produce 17 distinguishable hues inside one brand palette. Measured
   against the real candidates, heart (358deg), blood (5deg) and joint
   (9deg) all land within 11 degrees of one another - three
   indistinguishable reds in a single dropdown column. Pushing them
   apart means leaving the brand.

   So: COLOUR CARRIES THE GROUP, SHAPE CARRIES THE ITEM. Four hues,
   minimum 48 degrees apart, and the geometric mark does the per-item
   work it was designed for. It also scales - a 16th guide needs no
   16th hue.

   This replaces the flat monochrome nav shipped in v2.29.0, which
   silently dropped the colour-as-wayfinding that emoji had been doing
   for free: you could once find Heart by its redness without reading.

   CONTRAST, measured on the nav background #050C1A (--hc-ink-850),
   which stays dark in BOTH themes. Requirement for non-text UI
   glyphs is 3.0:
     Measure #4FC3E8  9.59      Fuel #3FD07F  9.81
     Move    #FF6B35  6.90      Mind #9A8CE0  6.71

   SCOPED TO THE NAV ON PURPOSE. On the light page surface (#EEF2F7)
   these same hues fall to 1.77-2.59 and would FAIL. Do not reuse them
   on light backgrounds without darker variants.

   Colour is never the only channel: every entry keeps its text label,
   so this satisfies "never convey meaning by colour alone".
   ============================================================ */

.hcddic[data-ig="measure"] { --ikc: #4FC3E8; }
.hcddic[data-ig="fuel"]    { --ikc: #3FD07F; }
.hcddic[data-ig="move"]    { --ikc: #FF6B35; }
.hcddic[data-ig="mind"]    { --ikc: #9A8CE0; }

/* At rest the mark sits back so 15 rows do not shout; the label stays
   the primary element. Hover/active brings it to full strength. */
.hcddic[data-ig] {
  color: color-mix(in srgb, var(--ikc) 78%, transparent);
}

.hcddi:hover .hcddic[data-ig],
.hcddi:focus-visible .hcddic[data-ig],
.hcddi.on .hcddic[data-ig],
.hcmlink:hover .hcddic[data-ig],
.hcmlink:focus-visible .hcddic[data-ig],
.hcmlink.on .hcddic[data-ig] {
  color: var(--ikc);
}

/* Group headers are few and they are labels, so they carry the hue at
   full strength - they are the legend for the column beneath them. */
.hcddcat .hcddic[data-ig],
.hcddgcat .hcddic[data-ig] {
  color: var(--ikc);
}

/* TOOLS STAY UNIFORM TEAL - deliberate. Guides are identity (13 topics
   you navigate between); tools are utility (13 calculators you operate).
   Colouring both would flatten a real distinction into decoration. */
.hcddic[data-ik]:not([data-ig]) {
  color: color-mix(in srgb, var(--hc-teal, #00B4A2) 72%, transparent);
}

.hcddi:hover .hcddic[data-ik]:not([data-ig]),
.hcddi.on .hcddic[data-ik]:not([data-ig]),
.hcmlink:hover .hcddic[data-ik]:not([data-ig]) {
  color: var(--hc-teal, #00B4A2);
}