/* Guardian page — Health + Movement. Reuses the Lab's .extras-* card/chip/seg/slider
   styles; only the two-column layout, HP bar, and 4-big-number row are defined here. */

.guardian-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Health bar: white base segment + coloured overshield segment, both inside one track. */
.g-hpbar {
  display: flex;
  width: 100%;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border-dim);
  margin-bottom: 6px;
}
.g-hpbar-fill { height: 100%; transition: width .12s ease; }
.g-hpbar-base { background: #f3f5fb; }
.g-hpbar-os { background: linear-gradient(90deg, rgba(var(--accent-void, 150 110 240), .95), rgba(120, 180, 255, .95)); }
.g-hpbar-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; }

/* Four big bold numbers. */
.g-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.g-stat {
  background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  min-width: 0;
}
.g-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: rgba(var(--accent-rgb), 1);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-stat-label { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); margin-top: 4px; letter-spacing: .2px; }
.g-stat-sub { font-size: 9.5px; color: var(--text-dim); margin-top: 1px; }

@media (max-width: 520px) {
  .g-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Super section: per-element group labels + regen breakdown line. */
.g-class-seg { margin-bottom: 6px; }
.g-el-grp { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 10px 0 4px; }
.g-super-groups .extras-chips { margin-bottom: 2px; }
.g-regen-parts { font-size: 11px; color: var(--text-dim); margin: -4px 0 12px; line-height: 1.4; }

/* Page-level class selector (armor-picker strip), centred. */
.guardian-class-row { display: flex; justify-content: center; margin: 0 0 16px; }
.guardian-class-row .bc-character-strip { justify-content: center; gap: 10px; width: 100%; max-width: 720px; }
.guardian-class-strip .bc-class-pick { flex: 1 1 0; justify-content: center; }
/* Neutral default for subgroup labels; element subgroups override the colour inline. */
.g-el-grp { color: var(--text-secondary); }
/* Exotic chips show gold. */
.extras-chip.g-exotic .extras-chip-name { color: #e8c45e; }
.extras-chip.g-exotic.active { border-color: rgba(227, 179, 65, .75); box-shadow: 0 0 0 1px rgba(227, 179, 65, .35); }