/* ============================================================================
   D2 GUN LOCKER — 06-lab.css
   Lab page rework: at-a-glance tool strip, numbered pipeline stations
   (Buff → Debuff → Fireteam), and the Damage Resistance card set apart as a
   separate tool. Every selector is scoped under .lab-page (the Lab page root)
   so nothing leaks into other pages. Loads after all other slices, so the
   overrides of the legacy .extras-* rules below win by cascade order.
   ========================================================================== */

/* ---------- at-a-glance tool strip (click = jump to the card) ------------- */
.lab-page .lab-toolstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
}
.lab-page .lab-tool {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; text-align: left; cursor: pointer;
  font-family: var(--font-ui);
  background: var(--bg-card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.lab-page .lab-tool:hover {
  border-color: rgba(var(--accent-rgb), .45);
  background: var(--bg-card-hover);
}
.lab-page .lab-tool-title {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-primary);
}
.lab-page .lab-tool-desc {
  font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); line-height: 1.3;
}
.lab-page .lab-tool-val {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 600; line-height: 1.15;
  color: rgba(var(--accent-rgb), 1);
  margin-top: var(--sp-1); overflow-wrap: anywhere;
}

/* ---------- section eyebrows + the "separate tool" divider ---------------- */
.lab-page .lab-eyebrow {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-5) 0 var(--sp-3);
}
.lab-page .lab-eyebrow-txt {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
}
.lab-page .lab-eyebrow-note {
  font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim);
}
.lab-page .lab-eyebrow::after {
  content: ''; flex: 1 1 24px; height: 1px; align-self: center;
  background: var(--hairline);
}
.lab-page .lab-divider {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
}
.lab-page .lab-divider::before,
.lab-page .lab-divider::after {
  content: ''; flex: 1 1 0; height: 1px; background: var(--hairline-strong);
}
.lab-page .lab-divider span {
  flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-dim); white-space: normal; text-align: center;
}

/* ---------- station (card) headers with step badges ------------------------ */
.lab-page .lab-card { scroll-margin-top: calc(var(--strip-h) + var(--sp-3)); }
.lab-page .lab-station-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.lab-page .lab-station-txt { flex: 1 1 auto; min-width: 0; }
.lab-page .lab-step-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-top: 1px;
  border: 1px solid rgba(var(--accent-rgb), .5); border-radius: 50%;
  color: rgba(var(--accent-rgb), 1); background: rgba(var(--accent-rgb), .1);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
}
.lab-page .lab-step-alt {
  border-color: var(--hairline-strong); background: var(--bg-secondary);
  color: var(--text-secondary); font-size: 10px; letter-spacing: .5px;
}
.lab-page .lab-step-sm { width: 20px; height: 20px; font-size: var(--fs-xs); margin-top: 0; }

/* ---------- calm subgroup rows: hairlines, not boxes ----------------------- */
.lab-page .extras-subgroup {
  background: transparent;
  border: 0; border-top: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--sp-3) 0 var(--sp-1);
  margin: var(--sp-3) 0 0;
}
.lab-page .extras-group-label { margin-bottom: var(--sp-2); }
.lab-page .extras-out { margin-bottom: var(--sp-3); }

/* ---------- Buff | Debuff row: near-equal weight --------------------------- */
.lab-page .extras-grid-config { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .lab-page .extras-grid-config { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- fireteam build box: numbered mini-steps ------------------------ */
.lab-page .lab-ftbuild { padding: 0 var(--sp-3); background: var(--bg-secondary); }
.lab-page .lab-ft-step { padding: var(--sp-3) 0; }
.lab-page .lab-ft-step + .lab-ft-step { border-top: 1px solid var(--hairline); }
.lab-page .lab-ft-step-lbl {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}
.lab-page .ft-namebar { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.lab-page .ft-add { margin-left: 0; }
.lab-page .lab-ft-addrow {
  display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap;
}
.lab-page .lab-ft-note { flex: 1 1 240px; margin-top: 2px; }

/* ---------- DR card: flattened subgroups flow into columns ----------------- */
.lab-page .extras-grid-dr .extras-card {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--sp-6);
}

/* ---------- narrow screens -------------------------------------------------- */
@media (max-width: 860px) {
  /* stats (totals) above the fireteam table so results aren't below the fold */
  .lab-page .ft-col-right { order: -1; }
  .lab-page .ft-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
}
@media (max-width: 768px) {
  .lab-page .lab-toolstrip { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .lab-page .lab-tool { padding: var(--sp-2) var(--sp-3); }
  .lab-page .lab-tool-val { font-size: var(--fs-lg); }
  .lab-page .ft-add { width: 100%; }
  .lab-page .ft-name { max-width: none; flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .lab-page .ft-stats { grid-template-columns: 1fr; }
}