/*
 * Refined icon components: a decorative tile is not a second control.
 * Compact context = 32px; service/row = 40px; primary shortcut/hero = 48px.
 * Home account shortcuts use 56px circles with 28px glyphs.
 * Only named icon slots participate. Controls, choices, status timelines,
 * avatars, brand artwork, physical cards and navigation own their boundaries.
 */
/* Service and row icons share geometry and a quiet, borderless surface. */
.phone.app-theme-refined :is(
  .next-home-tool-grid > button > span:first-child,
  .next-business-destination-grid > button > span:first-child,
  .next-more-group button > span:first-child,
  .next-home-feature-icon,
  .next-home-line-icon,
  .next-home-activity-list button > span:first-child,
  .account-icon,
  .management-icon,
  .round-symbol,
  .row-symbol,
  .service-mark,
  .service-grid > button > span:first-child,
  .service-picker button > span:first-child,
  .receive-method-grid > button > span,
  .health-service-grid > button > span,
  .profile-row-icon,
  .profile-device-icon,
  .smart-route-main > span,
  .smart-destination-action > span:first-child,
  .card-serial-help-button > span:first-child,
  .registry-disclosure summary > span:first-child,
  .recovery-method-option > span:first-child,
  .connector-icon,
  .recipient-destination-icon,
  .otp-delivery-status > span,
  .next-home-account-actions button > span,
  .quick-actions button > span,
  .next-payment-primary > span:first-child,
  .next-business-scf-entry > span:first-child,
  .business-primary-action > span,
  .energy-mark,
  .health-hero-mark
) {
  --modern-icon-size: var(--biz-icon-glyph);
  width: var(--biz-icon-tile-row);
  height: var(--biz-icon-tile-row);
  min-width: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--biz-icon-radius-row);
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
  box-shadow: none;
  line-height: 1;
}

/* Dense destination, connection and OTP context is deliberately one tier down. */
.phone.app-theme-refined :is(
  .connector-icon,
  .recipient-destination-icon,
  .otp-delivery-status > span
) {
  width: var(--biz-icon-tile-compact);
  height: var(--biz-icon-tile-compact);
  border-radius: var(--biz-icon-radius-compact);
}

/* Prominent actions get room, while the enclosing button remains the hit area. */
.phone.app-theme-refined :is(
  .next-home-account-actions button > span,
  .quick-actions button > span,
  .next-payment-primary > span:first-child,
  .next-business-scf-entry > span:first-child,
  .business-primary-action > span,
  .energy-mark,
  .health-hero-mark
) {
  width: var(--biz-icon-tile-action);
  height: var(--biz-icon-tile-action);
  border-radius: var(--biz-icon-radius-action);
}

/* Keep a strong primary shortcut; don't flatten selected or status meanings. */
.phone.app-theme-refined :is(.next-home-account-actions, .quick-actions) button:first-child > span,
.phone.app-theme-refined .next-payment-primary > span:first-child {
  color: var(--biz-surface);
  background: var(--biz-brand);
}
.phone.app-theme-refined .row-symbol.approved {
  color: var(--biz-success);
  background: var(--biz-success-soft);
}
.phone.app-theme-refined .row-symbol.waiting,
.phone.app-theme-refined .next-home-task-list > button.waiting .next-home-line-icon {
  color: var(--biz-icon-warning);
  background: var(--biz-icon-warning-soft);
}
.phone.app-theme-refined .next-home-task-list > button.urgent .next-home-line-icon {
  color: var(--biz-icon-attention);
  background: var(--biz-icon-attention-soft);
}

/* SCF document tiles and outcome badges have semantic colors. Normalize only
 * their geometry; the selected invoice border and timeline nodes stay intact. */
.phone.app-theme-refined .scf-screen .scf-invoice > i {
  --modern-icon-size: var(--biz-icon-glyph);
  width: var(--biz-icon-tile-compact);
  height: var(--biz-icon-tile-compact);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--biz-icon-radius-compact);
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
  box-shadow: none;
}
.phone.app-theme-refined .scf-screen .scf-invoice.selected > i {
  color: var(--biz-brand);
  background: var(--biz-selected);
}
.phone.app-theme-refined .scf-screen .scf-invoice.disabled > i { color: var(--biz-muted); }
.phone.app-theme-refined :is(.invoice-state-hero, .scf-status-card) > span:first-child {
  --modern-icon-size: var(--biz-icon-glyph);
  width: var(--biz-icon-tile-action);
  height: var(--biz-icon-tile-action);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--biz-icon-radius-action);
  line-height: 1;
}

/* Grid tracks match the tile they contain, instead of squeezing a 40px tile
 * into a legacy 36–38px column. Text columns and all content remain unchanged. */
.phone.app-theme-refined :is(.business-row-list > button, .next-home-task-list > button) {
  grid-template-columns: var(--biz-icon-tile-row) minmax(0, 1fr) auto;
}
.phone.app-theme-refined .next-home-activity-list > button {
  grid-template-columns: var(--biz-icon-tile-row) minmax(0, 1fr) auto 14px;
}
.phone.app-theme-refined .receive-method-grid > button {
  grid-template-columns: var(--biz-icon-tile-row) minmax(0, 1fr);
}
.phone.app-theme-refined .business-primary-action {
  grid-template-columns: var(--biz-icon-tile-action) minmax(0, 1fr);
}
.phone.app-theme-refined :is(.next-payment-primary, .next-business-scf-entry) {
  grid-template-columns: var(--biz-icon-tile-action) minmax(0, 1fr) 16px;
}
.phone.app-theme-refined :is(.energy-hero, .health-hero) {
  grid-template-columns: var(--biz-icon-tile-action) minmax(0, 1fr);
}

/* Named outline glyph slots. No navigation symbols, avatar imagery, physical
 * cards, illustrations or brand marks are selected by this component. */
.phone.app-theme-refined :is(
  .next-home-tool-grid > button > span:first-child,
  .next-business-destination-grid > button > span:first-child,
  .next-more-group button > span:first-child,
  .next-home-feature-icon,
  .next-home-line-icon,
  .next-home-activity-list button > span:first-child,
  .account-icon, .management-icon, .round-symbol, .row-symbol, .service-mark,
  .service-grid > button > span:first-child,
  .service-picker button > span:first-child,
  .receive-method-grid > button > span,
  .health-service-grid > button > span,
  .profile-row-icon, .profile-device-icon,
  .smart-route-main > span,
  .smart-destination-action > span:first-child,
  .card-serial-help-button > span:first-child,
  .registry-disclosure summary > span:first-child,
  .recovery-method-option > span:first-child,
  .connector-icon, .recipient-destination-icon,
  .otp-delivery-status > span,
  .next-home-account-actions button > span,
  .quick-actions button > span,
  .next-payment-primary > span:first-child,
  .next-business-scf-entry > span:first-child,
  .business-primary-action > span,
  .energy-mark, .health-hero-mark,
  .scf-screen .scf-invoice > i,
  .header-actions button,
  .field > div,
  .search-field,
  .card-number-actions button,
  .detail-quick-actions button > span,
  .control-grid button > span,
  .login-topbar > button
) > svg {
  width: var(--biz-icon-glyph);
  height: var(--biz-icon-glyph);
  min-width: var(--biz-icon-glyph);
  flex-shrink: 0;
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  vertical-align: 0;
}

/* Existing <path fill="currentColor"> details remain explicit. Checks retain
 * the dedicated 2.15 stroke from check-icons.css; other outline slots use 1.75. */
.phone.app-theme-refined :is(
  .next-home-tool-grid > button > span:first-child,
  .next-business-destination-grid > button > span:first-child,
  .next-more-group button > span:first-child,
  .next-home-feature-icon, .next-home-line-icon,
  .next-home-activity-list button > span:first-child,
  .account-icon, .management-icon, .round-symbol, .row-symbol, .service-mark,
  .service-grid > button > span:first-child,
  .service-picker button > span:first-child,
  .receive-method-grid > button > span,
  .health-service-grid > button > span,
  .profile-row-icon, .profile-device-icon,
  .smart-route-main > span,
  .smart-destination-action > span:first-child,
  .card-serial-help-button > span:first-child,
  .registry-disclosure summary > span:first-child,
  .recovery-method-option > span:first-child,
  .connector-icon, .recipient-destination-icon,
  .otp-delivery-status > span,
  .next-home-account-actions button > span,
  .quick-actions button > span,
  .next-payment-primary > span:first-child,
  .business-primary-action > span,
  .energy-mark, .health-hero-mark,
  .scf-screen .scf-invoice > i,
  .header-actions button,
  .field > div, .search-field,
  .card-number-actions button,
  .detail-quick-actions button > span,
  .control-grid button > span,
  .login-topbar > button
) > svg:not(.modern-check-icon):not(:has(> use[href="#i-check"], > use[href="#i-status-success"])) {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--biz-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Home shortcuts keep their glyphs independent of shared icon sizing.
 * Circles shrink with their grid column on narrow phones without overflowing. */
#home-next-layout .next-home-account-actions > button > span {
  --biz-icon-glyph: 28px;
  --modern-icon-size: 28px;
  width: min(56px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

#home-next-layout .next-home-account-actions > button > span > svg {
  width: 28px;
  height: 28px;
  min-width: 28px;
}