/* Refraction affects the backdrop only; chart, icons and labels stay sharp. */
.insight-card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid transparent;box-shadow:0 24px 50px -14px #0005;isolation:auto}
.glass-surface{position:absolute;inset:1px;border-radius:calc(var(--glass-radius,22px) - 2px);background:linear-gradient(135deg,#ffffff66,#ffffff38 48%,#ffffff4d);-webkit-backdrop-filter:blur(3px) saturate(1.1);backdrop-filter:blur(3px) saturate(1.1);pointer-events:none;z-index:0}
/* One unfiltered outline, above the inset refracted surface. */
.insight-card:before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff73;pointer-events:none;z-index:3}
@media(max-width:540px){.insight-card{--glass-radius:17px}}

.insight-card header{position:relative;z-index:2;align-items:center}.insight-card header .metric-icon{display:grid;place-items:center;width:32px;height:32px;padding:0;background:var(--metric-accent);border-radius:50%;color:white}.insight-card header .metric-delta{background:var(--metric-accent);color:white;font-size:10px;font-weight:800;padding:5px 8px}.insight-card .metric-icon svg{position:static;width:18px;height:18px;opacity:1;fill:none;stroke:currentColor;stroke-width:2}.insight-card .metric-chart{position:absolute;inset:0;width:100%;height:100%;opacity:1;z-index:1;pointer-events:none}.metric-endpoint{position:absolute;left:90%;width:9px;height:9px;border-radius:50%;background:var(--metric-accent);border:2px solid white;transform:translate(-50%,-50%);z-index:2}.insight-card .metric{z-index:2;font-weight:800;color:#0b0d12;bottom:34px}.insight-card p{z-index:2;font-size:10px;color:#30343d;font-weight:500;bottom:16px;white-space:nowrap}.insight-card{padding:15px}
@media(max-width:1100px){.insight-card{padding:12px}.insight-card header .metric-icon{width:27px;height:27px}.insight-card header .metric-delta{font-size:9px;padding:4px 6px}.insight-card p{font-size:8px;bottom:13px}.insight-card .metric{bottom:30px}.metric-endpoint{width:8px;height:8px}}
@media(max-width:540px){.insight-card header .metric-icon{width:24px;height:24px}.insight-card .metric-icon svg{width:14px;height:14px}.insight-card header .metric-delta{font-size:8px}.insight-card p{font-size:7px}.insight-card .metric{font-size:27px}}
@media(prefers-reduced-transparency:reduce){.glass-surface{background:#f8f6f4;-webkit-backdrop-filter:none;backdrop-filter:none}.glass-surface:before{display:none}}

/* URL displacement is progressive enhancement; base frost remains the fallback. */
@supports(backdrop-filter:url('#sona-glass-refraction')){.glass-surface{backdrop-filter:url('#sona-glass-refraction') blur(.7px) saturate(1.1)}}
/* A localized light wash protects the numbers without frosting the entire pane. */
.insight-card:after{content:'';position:absolute;inset:62% 0 0;background:linear-gradient(transparent,#ffffff59);pointer-events:none;z-index:1}
@media(prefers-reduced-transparency:reduce){.glass-surface{background:#f8f6f4;-webkit-backdrop-filter:none;backdrop-filter:none}.insight-card:after{display:none}}

@media(max-width:800px){
  .insight-card{padding:10px}
  .insight-card .metric{font-size:25px;bottom:33px}
  .insight-card .metric small{font-size:9px}
  .insight-card p{left:10px;right:8px;bottom:10px;white-space:normal;font-size:7px;line-height:1.2}
  .insight-card header .metric-icon{width:21px;height:21px}
  .insight-card .metric-icon svg{width:13px;height:13px}
  .insight-card header .metric-delta{font-size:7px;padding:3px 5px}
}
@media(max-width:540px){.insight-card .metric{font-size:24px}}