/* ---------------------------------------------------------------- icon system
   Every icon is drawn on a 24-unit grid (inline viewBox or sprite symbol). One rule sets
   its size and a stroke that renders at the same on-screen weight at every size:
     stroke-width (user units) = target px × 24 / icon size.
   Content icons draw 1.5px lines; small UI glyphs (arrows, chevrons, +/−) draw 1.75px.
   Sizes: 16 inline facts and labels · 20 list rows and benefits · 28 section features.
   UI glyphs: 16 inside navigation and small text links · 18 in buttons and arrow links.
   Loaded after the component styles so it is the single source of these values. */
:root { --icon-line:1.5px; --icon-line-ui:1.75px; }

/* Content icons */
:is(.listing-card__facts, .vf-profile-stats, .vf-profile-icon-rail, .vf-profile-location, .vf-field label, .vf-result-download, .vf-art-missing) svg,
.vf-stat-icon, .vf-label-icon { --icon:16; }
:is(.ve-reassurance, .ve-benefits, .pd-keyfacts, .pd-amenities, .pd-agent__links, .pd-resources, .pd-place, .pd-location__map-fallback, .vf-condition-choice, .contact dl, .listings__views, .vf-refine-chip) svg { --icon:20; }
.svc-icon, .vf-group-intro > svg { --icon:28; }
:is(.svc-scope-list, .svc-document-list, .svc-tenant-list, .svc-outcome-list, .svc-value-diagram__orbit, .service-buying__why, .buy-journey__node) .svc-icon { --icon:20; }
.svc-icon--large { --icon:36; }
.svc-price-flow__badge .svc-icon { --icon:24; }

/* UI glyphs */
.nav__btn svg, .gscore__link svg, .contact .contact__map-link svg { --icon:16; --icon-stroke:var(--icon-line-ui); }
:is(.arrowlink, .otherlist, .btn, .listing-card__more, .listings__more, .pd-carousel__peek-arrow, .vf-stepper__button, .sel__btn) svg,
.sel__chev { --icon:18; --icon-stroke:var(--icon-line-ui); }

/* Apply: square box, matched stroke, round ends everywhere. */
:is(.listing-card__facts, .vf-profile-stats, .vf-profile-icon-rail, .vf-profile-location, .vf-field label, .vf-quick-action, .vf-art-missing,
    .ve-reassurance, .ve-benefits, .pd-keyfacts, .pd-amenities, .pd-agent__links, .pd-resources, .pd-place, .pd-location__map-fallback,
    .vf-condition-choice, .contact dl, .listings__views, .vf-refine-chip, .vf-result-download,
    .nav__btn, .gscore__link, .contact__map-link, .arrowlink, .otherlist, .btn, .listing-card__more, .listings__more,
    .pd-carousel__peek-arrow, .vf-stepper__button, .sel__btn) svg,
.vf-stat-icon, .vf-label-icon, .svc-icon, .vf-group-intro > svg, .sel__chev {
  flex:none;
  width:calc(var(--icon) * 1px)!important;
  height:calc(var(--icon) * 1px)!important;
  stroke-width:calc(var(--icon-stroke, var(--icon-line)) * 24 / var(--icon))!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
/* Shapes inside inherit the matched stroke, even where a path set its own. */
:is(.listing-card__facts, .vf-profile-stats, .vf-profile-icon-rail, .vf-profile-location, .vf-field label, .vf-quick-action, .vf-art-missing,
    .ve-reassurance, .ve-benefits, .pd-keyfacts, .pd-amenities, .pd-agent__links, .pd-resources, .pd-place, .pd-location__map-fallback,
    .vf-condition-choice, .contact dl, .listings__views, .vf-refine-chip, .vf-result-download,
    .nav__btn, .gscore__link, .contact__map-link, .arrowlink, .otherlist, .btn, .listing-card__more, .listings__more,
    .pd-carousel__peek-arrow, .vf-stepper__button, .sel__btn) svg :is(path, circle, rect, line, polyline, ellipse),
:is(.vf-stat-icon, .vf-label-icon, .svc-icon, .vf-group-intro > svg, .sel__chev) :is(path, circle, rect, line, polyline, ellipse) {
  stroke-width:inherit; stroke-linecap:inherit; stroke-linejoin:inherit;
}

/* Inline glyphs that replace text arrows and ticks (the fonts have no ←, →, ✓, so phones drew
   them in the system font). They scale with the text and keep the UI line weight. */
.ui-glyph { display:inline-block; flex:none; width:1em; height:1em; vertical-align:-.14em; overflow:visible; }
.ui-glyph path { stroke-width:var(--icon-line-ui); stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.ui-glyph--r { margin-left:.35em; }
.ui-glyph--l { margin-right:.35em; }
.ui-glyph--check { width:.95em; height:.95em; }
.ui-glyph--check path { stroke-width:2px; }