/* Shared SVG icon sizing — use with js/svg-icons.js */
.sc-icon,
.ic svg,
.sc-metric-icon svg,
.instr-metric-card > .sc-icon-wrap svg,
.metric-card > .sc-icon-wrap svg,
.feature-icon svg,
.auth-feature-icon svg,
.nav-bell svg,
.bell svg,
.qa-btn .ic svg,
.confirm-icon svg,
.instr-confirm-icon svg,
.ic-big svg,
.notif-item-icon svg,
.stu-prof-card-icon svg,
.stu-sim-ql-icon svg,
.stu-sim-perm-icon svg {
  display: block;
  flex-shrink: 0;
}

.sc-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.15em;
}

.sc-icon--sm { width: 16px; height: 16px; }
.sc-icon--md { width: 20px; height: 20px; }
.sc-icon--lg { width: 28px; height: 28px; }
.sc-icon--xl { width: 36px; height: 36px; }

.sc-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.sc-metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  line-height: 0;
}

.ic svg { width: 20px; height: 20px; max-width: 24px; max-height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Headings / panels with inline icons */
.panel-box h3,
.es-sec-title,
.instr-sub-h:has(.ic),
h3.font-display:has(.ic),
h4.font-display:has(.ic) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-box h3 .ic svg,
.es-sec-title .ic svg { width: 18px; height: 18px; }

.mcard .ic svg { width: 22px; height: 22px; }
.alert-banner .ic svg { width: 26px; height: 26px; }

.ic-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.ic-big svg,
.ic-big .sc-icon { width: 40px !important; height: 40px !important; max-width: 40px; max-height: 40px; }

/* Catch-all: inline UI SVGs must not blow up as solid blobs */
svg[viewBox][aria-hidden="true"]:not(.sc-risk-dot svg) {
  flex-shrink: 0;
}

svg[viewBox][aria-hidden="true"]:not([width]):not(.sc-icon) {
  width: 20px;
  height: 20px;
  max-width: 24px;
  max-height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-icon[fill="currentColor"],
.sc-risk-dot svg,
svg[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.sb-item > span:first-child:not(.sb-label):not(.ic) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
}

.feature-icon {
  display: block;
  margin-bottom: 20px;
  color: var(--green, #15803d);
  line-height: 0;
}

.feature-icon svg { width: 36px; height: 36px; }

.auth-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(22, 101, 52, 0.1);
  color: #15803d;
  flex-shrink: 0;
  line-height: 0;
}

.auth-feature-icon svg { width: 16px; height: 16px; }

.nav-bell svg,
.bell svg { width: 18px; height: 18px; }

.qa-btn .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 7px;
  width: auto;
}

.qa-btn .ic svg { width: 24px; height: 24px; }

.confirm-icon svg,
.instr-confirm-icon svg,
.ic-big svg { width: 40px; height: 40px; }

.notif-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  line-height: 0;
}

.notif-item-icon svg { width: 18px; height: 18px; }

.sc-risk-dot {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 4px;
  line-height: 0;
}

.sc-risk-dot .sc-icon { width: 10px; height: 10px; }

.ap-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  line-height: 0;
}

.ap-icon-btn svg { width: 16px; height: 16px; }

.stu-well-card .sc-icon-wrap {
  text-align: center;
  margin-bottom: 8px;
  color: var(--active-dept, #15803d);
}

.stu-well-card .sc-icon-wrap svg { width: 36px; height: 36px; }

.contact-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 6px;
  line-height: 0;
}

.contact-icon svg { width: 16px; height: 16px; }

.pw-req-icon svg,
.pw-match-icon svg { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }