/* r-solar Brand System v2 compliance layer: icons.
   Loaded after styles_v2.min.css on every page that loads it (brand gauntlet run 2, 2026-09-28).
   Owned by one gauntlet lane; see audits/brand-gauntlet-2026-09-27 in the SEO repo. */

/* ===================================================================
   P9 root cause: css/styles_v2.css ~5254 sets
   .material-symbols-rounded.material-symbols-rounded{font-size:inherit;...}
   so every icon takes whatever font-size its surrounding text happens to
   be (12-32px, off the spec's 16/20/24/32/40 scale), and opsz is hardcoded
   to 24 regardless of rendered size. Selector below is doubled to match
   that rule's specificity (0,2,0); this file loads after styles_v2 in
   every page's <head>, so at equal specificity this wins on source order
   without needing !important. CLS protection is untouched: styles_v2's
   second doubled rule sets width/height:1em, which now tracks a fixed
   font-size instead of an inherited one, so the reserved box stays correct.

   Companion pass: scripts run in this commit stripped the small (<30px)
   inline style="font-size:...} and page-local <style> block overrides that
   were pinning individual icons off-scale (~190 instances across 47 pages)
   so these rules can reach them. Overrides >=30px (illustrative icons, the
   40px+ bucket) were left in place -- they were already on-scale.
   =================================================================== */

/* ---- Default tier: 24px / opsz 24 --------------------------------
   Navigation, toolbars, standalone actions, and anything not matched by
   a more specific context rule below. */
.material-symbols-rounded.material-symbols-rounded {
  font-size: 24px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- 16px / opsz 20 -----------------------------------------------
   Dense tables, inline in caption text. */
table .material-symbols-rounded.material-symbols-rounded,
td .material-symbols-rounded.material-symbols-rounded,
th .material-symbols-rounded.material-symbols-rounded,
caption .material-symbols-rounded.material-symbols-rounded,
figcaption .material-symbols-rounded.material-symbols-rounded,
.text-caption .material-symbols-rounded.material-symbols-rounded {
  font-size: 16px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* ---- 20px / opsz 20 -------------------------------------------------
   Buttons, form fields, list rows, chips, trust badges (the inline
   check_circle checklists under CTAs/forms, not the larger homepage
   trust-strip icons -- those are feature-row tier below). */
.btn .material-symbols-rounded.material-symbols-rounded,
button .material-symbols-rounded.material-symbols-rounded,
[class*="btn"] .material-symbols-rounded.material-symbols-rounded,
li .material-symbols-rounded.material-symbols-rounded,
[class*="form"] .material-symbols-rounded.material-symbols-rounded,
[class*="chip"] .material-symbols-rounded.material-symbols-rounded,
[class*="badge"] .material-symbols-rounded.material-symbols-rounded,
[class*="trust"] .material-symbols-rounded.material-symbols-rounded,
.rsa-tag .material-symbols-rounded.material-symbols-rounded,
.material-symbols-rounded.faq-icon,
.material-symbols-rounded.check-icon {
  font-size: 20px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
/* .rsa-tag (index.html small tag chips: "25-year warranty", "Made in
   India", etc.) reads no chip/badge/trust class so it fell through to
   the 24px default tier despite sitting beside 12px tag-scale text --
   added above as its own chip-bucket match (round 4 fix). */

/* ---- 32px / opsz 40 --------------------------------------------------
   Section headers, empty states, feature rows: icons in feature/benefit
   circles, the trust strip under the homepage hero, solution-card icons.
   Matched by any wrapper whose class names this codebase's per-page BEM
   patterns as an icon slot (*-icon, *__icon, *-steps__icon, etc.), so one
   rule covers the many page-scoped class names (opex-step-icon,
   outcome-icon, timeline-icon, mp-icon, zone-icon, gz-icon, benefit-icon,
   rsa-feature-icon, rsa-svc-icon, abt-why__icon, *-steps__icon,
   ppa-step-icon, fw-node-icon, property-icon, rs-feat__icon,
   trust-icon-wrapper) without enumerating every one by hand. The 20px
   button/chip/trust-badge rule above is written with the same specificity
   and comes first, so where an icon sits in a chip/badge/trust AND an
   "-icon" wrapper, the tier below (more specific use case: feature rows)
   still needs its own precedence -- verified none of the trust-badge
   matches above also carry an "-icon"/"__icon" class in this codebase. */
[class*="-icon"] > .material-symbols-rounded.material-symbols-rounded,
[class*="__icon"] > .material-symbols-rounded.material-symbols-rounded,
.material-symbols-rounded[class*="-icon"]:not(.faq-icon):not(.check-icon),
.material-symbols-rounded[class*="__icon"],
.trust-icon-wrapper .material-symbols-rounded.material-symbols-rounded,
.rs-feat__icon .material-symbols-rounded.material-symbols-rounded,
.solution-card > .d-flex > .material-symbols-rounded.material-symbols-rounded {
  font-size: 32px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}
/* .solution-card's lead icon (the 3 case-study pages) is a feature-row
   header icon per the lead's own worked example, but carries no *-icon/
   *__icon class -- added explicitly above (round 4 fix). The per-item
   check_circle icons inside .solution-card's own <ul> stay at the 20px
   list-row tier via the plain `li` rule above; only the card's single
   lead icon is feature-row scale. */

/* ===================================================================
   Round 4: Gap to label. rs-icons.css set font-size/opsz per tier but
   never touched the gap between an icon and its label, so every gap
   sitewide was whatever Bootstrap's mr-1 (4px)/mr-2 (8px)/mr-3 (16px)
   utility, or a page's own margin/flex-gap CSS, happened to produce --
   not the spec's 6/8/8/12/16px scale. Bootstrap's mr-* and ml-* utilities
   are !important (bootstrap.min.css), so overriding them needs
   !important too.

   The spec gives 20px and 24px icons the SAME 8px gap, so one blanket
   rule below covers both tiers' mr-1 (4px, half spec) and mr-3 (16px,
   double spec) instances at once -- verified against every mr-1/mr-3
   icon instance sitewide (146 mr-1, ~23 mr-3): none sit inside the
   16px caption tier (table/td/th/caption/figcaption/.text-caption) or
   the 32px feature-row tier (-icon/__icon wrappers, .solution-card),
   so no tier-specific carve-out is needed there today. mr-2 (8px) is
   already correct at both tiers and is left untouched. ---- */
.material-symbols-rounded.material-symbols-rounded.mr-1,
.material-symbols-rounded.material-symbols-rounded.mr-3 {
  margin-right: 8px !important;
}
.material-symbols-rounded.material-symbols-rounded.ml-1,
.material-symbols-rounded.material-symbols-rounded.ml-3 {
  margin-left: 8px !important;
}

/* 32px feature-row tier gap (12px): the 3 case-study pages' solution-card
   lead icon uses mr-3 (16px, 4px over spec). Higher specificity than the
   blanket 8px rule above (ancestor class added), so it wins outright. */
.solution-card > .d-flex > .material-symbols-rounded.material-symbols-rounded.mr-3 {
  margin-right: 12px !important;
}

/* 16px caption tier gap, for completeness / future-proofing -- no
   current mr-1/mr-3 instance sits inside these contexts, but if one is
   ever added it should get the tight --space-1 gap, not the --space-2
   blanket above. Was 6px (off the §08 scale, R14); snapped down to
   --space-1 (4px) rather than up to 8px so it stays visually tighter
   than the blanket rule it exists to override. Higher specificity
   (ancestor context added) wins over the blanket rule. */
table .material-symbols-rounded.material-symbols-rounded.mr-1,
table .material-symbols-rounded.material-symbols-rounded.mr-3,
td .material-symbols-rounded.material-symbols-rounded.mr-1,
td .material-symbols-rounded.material-symbols-rounded.mr-3,
th .material-symbols-rounded.material-symbols-rounded.mr-1,
th .material-symbols-rounded.material-symbols-rounded.mr-3,
caption .material-symbols-rounded.material-symbols-rounded.mr-1,
caption .material-symbols-rounded.material-symbols-rounded.mr-3,
figcaption .material-symbols-rounded.material-symbols-rounded.mr-1,
figcaption .material-symbols-rounded.material-symbols-rounded.mr-3,
.text-caption .material-symbols-rounded.material-symbols-rounded.mr-1,
.text-caption .material-symbols-rounded.material-symbols-rounded.mr-3 {
  margin-right: var(--space-1, 4px) !important;
}

/* Non-utility-class gaps: contexts that set their own margin/flex-gap
   in page-local <style> instead of an mr-* or ml-* class, so the rules
   above never reach them. */

/* .pmlf__trust (20px chip/trust-badge tier, spec 8px): the inline
   "Free design and quote / Subsidy handled / Callback in 2 hours"
   checklist under 21 pages' inline lead-capture forms. Every copy of
   this page-local block sets margin-right:.2rem (3.2px, best-panels'
   copy already had a partial .25rem/4px fix) -- one shared override
   here fixes every page at once instead of editing 21 inline <style>
   blocks. Page-local <style> loads after this file in <head>, so the
   override needs !important to win despite equal (0,2,0) specificity. */
.pmlf__trust .material-symbols-rounded.material-symbols-rounded {
  margin-right: 8px !important;
}

/* .rsa-tag (index.html "25-year warranty" / "Made in India" / "Rust
   Proof" / "ISO Certified" chips, now in the 20px tier above, spec
   8px): page-local <style> sets the tag's flex gap to 5px. Same
   !important/source-order reasoning as .pmlf__trust above. */
.rsa-tag {
  gap: 8px !important;
}

/* .rs-cta__trust (contact-us.html's "Free site visit / No obligation /
   Callback within 2 hours" checklist under the closing CTA card, 20px
   chip/trust-badge tier, spec 8px): matches the [class*="trust"] size
   selector above by name, but that rule only sets font-size/opsz
   (0,2,0), so the page-local `.rs-cta__trust span.material-symbols-
   rounded{margin-right:.3rem}` block (0,2,1, loads after this file)
   still won on margin -- this page-local pattern was missed from the
   .pmlf__trust/.rsa-tag gap-fix list despite matching. Selector below
   is padded to (0,3,0) plus !important so it wins outright regardless
   of load order. round 5 fix. */
.rs-cta__trust .material-symbols-rounded.material-symbols-rounded {
  margin-right: 8px !important;
}

/* Same block's check_circle colour: page-local <style> used
   var(--rs-green-2) (#8FD46B), a hex invented locally at contact-
   us.html:746 and not one of the spec's copy-paste tokens, instead of
   the spec's dark-ground success token for this dark CTA card
   (bg #2f6b22) -- violates §agents R13 (components reference semantic
   tokens only). Uses this codebase's existing --success-dark token
   (css/design-tokens.css, #6FBF8F, matches the spec's dark-ground
   success value exactly), same token the calculator-hero override
   above already uses for the identical state. round 5 fix. */
.rs-cta__trust .material-symbols-rounded.material-symbols-rounded {
  color: var(--success-dark, #6FBF8F) !important;
}

/* ---- 40px+ illustrative tier: opsz correction only -------------------
   These icons (hero, onboarding, marketing) were already sized >=30px by
   the strip pass above and left alone; they just need opsz 40 instead of
   the hardcoded opsz 24. Existing !important font-size rules in
   styles_v2.css (.product-icon, etc.) are untouched -- opsz needs
   !important here only to reach past that file's own !important color/
   size declarations on the same selector chain. */
.product-icon .material-symbols-rounded.material-symbols-rounded,
[style*="font-size:64px"] ,
[style*="font-size: 64px"],
[style*="font-size:48px"],
[style*="font-size: 48px"],
[style*="font-size:56px"],
[style*="font-size: 56px"],
[style*="font-size:3rem"],
[style*="font-size: 3rem"],
[style*="font-size:4rem"],
[style*="font-size: 4rem"],
[style*="font-size:3em"],
[style*="font-size: 3em"] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40 !important;
}

/* ---- Round 3 fix: .app-step.completed .step-indicator check_circle ---
   services.html's "Your installation updates" phone-mockup progress
   timeline. styles_v2.min.css's own
   .app-step.completed .step-indicator .material-symbols-rounded rule
   is three plain classes (specificity 0,3,0), which beats this file's
   doubled-class default-tier rule (0,2,0) even though this file loads
   later -- source order only decides a tie, and here there isn't one.
   Treated as the feature-row tier (32px/opsz 40): these check_circle
   marks are step/progress indicators, the same family as the feature-
   circle icons the 32px tier above already covers. The selector below
   is padded to five classes (0,5,0) so it wins outright, at both the
   default and the phone-mockup's own max-width:768px step-indicator
   breakpoint. .step-indicator itself is grown from 28px/22px to a
   uniform 32px so the circle still fully contains the larger glyph at
   both breakpoints (only in this file; styles_v2*.css is untouched).
   Same pattern does not occur elsewhere in the sitemap -- grep confirms
   services.html is the only page with class="step-indicator" markup. */
.app-step.completed .step-indicator .material-symbols-rounded.material-symbols-rounded.material-symbols-rounded {
  font-size: 32px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
}
.app-step.completed .step-indicator {
  width: 32px;
  height: 32px;
}
@media (max-width: 768px) {
  .app-step.completed .step-indicator .material-symbols-rounded.material-symbols-rounded.material-symbols-rounded {
    font-size: 32px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
  }
  .app-step.completed .step-indicator {
    width: 32px;
    height: 32px;
  }
}

/* ===================================================================
   Semantic-state icon colour on a confirmed dark ground: the calculator
   hero (photo + 55% black scrim). A generic .text-success (Solar Green,
   #72BF44) was standing in for the dedicated dark-ground success token;
   spec's semantic-state table requires #6FBF8F on dark, not the brand
   fill colour. Uses this codebase's own --success-dark token from
   css/design-tokens.css (#6FBF8F, matches the spec's dark-ground success
   value) -- never a hand-typed hex, per §agents R13. .text-success itself
   is !important in styles_v2.css, so this scoped override needs
   !important too to actually win.
   =================================================================== */
.calculator-hero .material-symbols-rounded.text-success {
  color: var(--success-dark, #6FBF8F) !important;
}

/* ===================================================================
   CLS box reservation stays keyed to font-size (styles_v2's width/height:
   1em rule), so no separate width/height overrides are needed here -- a
   fixed font-size per tier above already gives icons a fixed, final box
   before/after the icon font loads.
   =================================================================== */

/* Root cause of the "icons look tiny" defect (lead finding, 2026-09-28): the body-level CLS fix in
   styles_v2 sets `font-size-adjust: 0.5` so the text fallback font matches Poppins' x-height. Icons
   inherit it, and on an icon font it rescales every glyph to ~72% of its box (a 24px `home` rendered
   11.5px of ink instead of 16px). The CLS protection is still needed for text, so exempt only the
   icon font. Icon boxes keep their explicit width/height, so this adds no layout shift. */
.material-symbols-rounded,
.material-symbols-rounded.material-symbols-rounded {
    font-size-adjust: none !important;
}

/* Lead decision: the homepage solution cards (Residential / Commercial / Industrial) are a
   feature row, so their header icon takes the §icons 32 px tier with opsz 40. */
.w-100.text-center.mb-3 > .material-symbols-rounded {
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40 !important;
}

/* ===================================================================
   Round 11: doubled gap on the primary CTA buttons (.common-btn2 /
   .common-btn2-outline). Both classes already set
   display:inline-flex; gap:8px (styles_v2.min.css), which is the
   correct spec gap for the 20px button tier. But the icon inside also
   carries a Bootstrap mr-* / ml-* margin utility -- mr-2/ml-2 (8px
   !important, bootstrap.min.css) on most buttons, or ml-1 (bumped to
   8px !important by this file's own round-4 blanket gap-fix rule
   above, on the C&I "Back to hub" links) -- which stacks on top of
   the flex gap instead of replacing it: 38 of 69 pages measured a
   16px icon-to-label gap on these buttons, double spec. Zero every
   margin utility the icon can carry here (mr-1/2/3, ml-1/2/3) so flex
   gap is the only source of spacing; equal (0,3,0)-class specificity
   beats the round-4 rule (0,2,0) and Bootstrap's own !important, and
   this file's later load order settles any remaining tie. */
.common-btn2 .material-symbols-rounded.material-symbols-rounded.mr-1,
.common-btn2 .material-symbols-rounded.material-symbols-rounded.mr-2,
.common-btn2 .material-symbols-rounded.material-symbols-rounded.mr-3,
.common-btn2-outline .material-symbols-rounded.material-symbols-rounded.mr-1,
.common-btn2-outline .material-symbols-rounded.material-symbols-rounded.mr-2,
.common-btn2-outline .material-symbols-rounded.material-symbols-rounded.mr-3 {
  margin-right: 0 !important;
}
.common-btn2 .material-symbols-rounded.material-symbols-rounded.ml-1,
.common-btn2 .material-symbols-rounded.material-symbols-rounded.ml-2,
.common-btn2 .material-symbols-rounded.material-symbols-rounded.ml-3,
.common-btn2-outline .material-symbols-rounded.material-symbols-rounded.ml-1,
.common-btn2-outline .material-symbols-rounded.material-symbols-rounded.ml-2,
.common-btn2-outline .material-symbols-rounded.material-symbols-rounded.ml-3 {
  margin-left: 0 !important;
}

/* Round 11: contact-us.html's four office-card "Get directions" links
   (.office-dir, page-local <style>, not covered by any component
   class -- no .btn/.chip/.trust/-icon wrapper) set no gap at all
   between the icon and the "Get directions" label, so the browser's
   default inline whitespace collapse (a literal space character,
   ~2.6px at this 0.85rem/13.6px text) stood in for it. .office-dir
   isn't a button/chip/badge/list-row, but it functions as one (an
   inline link with a leading icon), so it takes the same 20px-tier
   8px gap as the CTA buttons above. */
.office-dir .material-symbols-rounded {
  margin-right: 8px;
}

/* Round 12, worst finding: industrial-solar-indore.html and
   industrial-solar-khargone.html's "Eligibility Checklist" card (dark
   card, background rgba(255,255,255,.06) over the section's dark-ink
   ground) uses check_circle .text-success for each of its 5 list
   items. .text-success is the generic brand-green utility (Solar
   Green, #72BF44 via --rs-green/--brand-green) -- the same class of
   bug already fixed for .calculator-hero and .rs-cta__trust above,
   but this pattern (`.text-success.mt-1`, distinct from the nav's
   `.text-success.mr-2` on light chrome) was never covered. Semantic
   state icons need the dedicated dark-ground success token, not the
   generic brand green: spec's Success/complete on-dark value is
   #6FBF8F, which is this codebase's existing --success-dark token. */
.material-symbols-rounded.text-success.mt-1 {
  color: var(--success-dark, #6FBF8F) !important;
}

/* Round 12: contact-us.html's four .office-dir "Get directions" icons
   (dark ink ground, #242834) and the .rs-chip "verified" icon (also
   on dark ink ground, the .contact-v2.why-rs section) both inherit
   --rs-green-2 (#8FD46B), a hex invented locally in contact-us.html's
   page <style> (not one of design-tokens.css's spec tokens). These
   are interactive/labelled icons on an ink ground, so the spec's
   correct token is Solar Green (--rs-green, #72BF44 -- explicitly the
   allowed ground for that token per design-tokens.css's own comment:
   "never text/icons/borders on light"). Only the icon glyph is
   overridden here, not the label text it sits beside -- changing the
   label's colour is outside P9's icon-only scope. */
.office-dir .material-symbols-rounded,
.rs-chip .material-symbols-rounded {
  color: var(--rs-green, #72BF44);
}
