/* KR Website Icon Pack v1.0 — placement utilities (Round 18).
   Generated by build_kr_icons.py. The pack sprite carries the geometry, the
   1.5px optical stroke and the 0 0 24 24 viewBox; this file only positions it.

   Variant handling (brand rule: on-light charcoal / on-dark cream / bronze for
   emphasis) is done with `currentColor`: every icon inherits the colour of the
   text it sits with, so the light and dark themes and every bronze hover/active
   state that already exists in the site CSS carry through with no extra rules
   and no theme-switch flash. */

.kr-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  color: inherit;
  overflow: visible;
}

/* Approved rendered sizes (brand guide): 20px inline, 40px feature tile,
   64px hero. Existing components pass explicit width/height that is already
   tuned to their type scale; these helpers are for new placements. */
.kr-icon--20 { width: 20px; height: 20px; }
.kr-icon--40 { width: 40px; height: 40px; }
.kr-icon--64 { width: 64px; height: 64px; }

/* Mirrored chevron for "previous" controls — the pack has one chevron; the
   mirror preserves geometry, stroke weight and aspect ratio. */
.kr-icon--flip { transform: scaleX(-1); }

/* Inline arrow that trails a text label (card links, "Back to" buttons). */
.kr-icon-trail { margin-left: 0.4em; vertical-align: -0.12em; }
.kr-icon-lead { margin-right: 0.45em; vertical-align: -0.12em; }

/* ---------------------------------------------------------------------------
   Refreshed-pack size normalisation (kr-brand-style, current version).

   The refreshed pack draws every symbol inside a 22.5px rounded container
   frame with the artwork scaled to 82%, so the icons no longer read correctly
   at the 10-16px sizes that suited the earlier open-glyph drawings. The brand
   guide allows exactly three rendered sizes, and these rules pin each existing
   component to the one its role warrants:

     20px  body-inline (list links, inline controls, chips, CTAs beside labels)
     40px  feature tile / card header
     64px  hero / category lead   (no component currently holds this role)

   Specificity is one class higher than the component rules it supersedes
   (`.owner svg.kr-icon` beats `.owner svg`), so nothing else in the cascade
   has to change and every rule here is reversible in one block.
   --------------------------------------------------------------------------- */

/* -- 20px: body-inline ---------------------------------------------------- */
.tp-quick svg.kr-icon,
.tp-act-icon svg.kr-icon,
.sys-features svg.kr-icon,
.sys-link svg.kr-icon,
.sys-specs-toggle svg.kr-icon,
.solution-tile-arrow svg.kr-icon,
.wd-hcard-feats svg.kr-icon,
.wd-hcard-enquire svg.kr-icon,
.wd-hcard-tech-link svg.kr-icon,
.wd-hcard-portal-note svg.kr-icon,
.wd-hcard-award-chip svg.kr-icon,
.kr-cmp-toggle svg.kr-icon,
.kr-cmp-slot-remove svg.kr-icon,
.kr-cmp-tray-go svg.kr-icon,
.kr-cmp-tray-clear svg.kr-icon,
.kr-explore-prompt svg.kr-icon,
.mfr-tile-cta svg.kr-icon,
.sch-hybrid-cta svg.kr-icon,
.card-link svg.kr-icon,
.menu-toggle svg.kr-icon,
.mobile-nav-close svg.kr-icon,
.accordion-trigger svg.kr-icon,
.insp-btn svg.kr-icon,
.kr-carousel-btn svg.kr-icon,
.btn svg.kr-icon,
.tp-act svg.kr-icon {
  width: 20px;
  height: 20px;
}

/* A few flex parents were tuned around the old 12-16px marks and can still
   compress an icon on the cross axis; pin the box so the approved size always
   renders at its full width. */
.kr-cmp-slot-remove svg.kr-icon {
  min-width: 20px;
  min-height: 20px;
}

/* -- 40px: feature tile / card header ------------------------------------- */
.tp-cap-icon svg.kr-icon,
.tp-panel .tp-cap-icon svg.kr-icon,
.wd-cmp-cta-icon svg.kr-icon {
  width: 40px;
  height: 40px;
}

/* Below 480px the capability grid drops to a single narrow column, where a
   40px tile icon would crowd the label pair. The role there is body-inline,
   so it takes the 20px approved size rather than an unapproved in-between. */
@media (max-width: 480px) {
  .tp-cap-icon svg.kr-icon,
  .tp-panel .tp-cap-icon svg.kr-icon {
    width: 20px;
    height: 20px;
  }
}

/* The `.kr-arrow` mark is sized in `em` so it tracks its label's type scale;
   at the body scale that resolves to ~16-18px. Pin it to the approved inline
   size while keeping the CSS rotation that produces the "right" variant. */
.kr-arrow.kr-icon,
.btn .kr-arrow.kr-icon,
.kr-explore-prompt .kr-arrow.kr-icon {
  width: 20px;
  height: 20px;
}