/* Stats due (Lines screen), the Check stats form, Scout + Performance and the
   In-Form frame: a chemistry-green glow (spec §9 chem #5cff7a). Tokens live in
   tokens.css; buttons reuse .pp-actions from lines.css. */

.stats-due { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.sd-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--seam); border-radius: 12px; background: var(--boards); color: var(--ice); font: inherit; text-align: left;
  cursor: pointer; transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.sd-toggle:active { transform: scale(var(--press)); }
.sd-toggle:focus-visible, .sd-check:focus-visible, .st-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sd-label { font: 800 16px var(--font-display); letter-spacing: .02em; }
.sd-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--goal); color: #fff; font: 800 13px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.sd-sub { margin-left: auto; color: var(--frost); font-size: 12.5px; }
.stats-due.has-due .sd-toggle { border-color: rgba(255,51,71,.45); }

.sd-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 13px; border: 1px solid var(--seam); border-radius: 14px; background: var(--boards); }
.sd-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sd-item { display: flex; flex-direction: column; gap: 10px; }
.sd-item + .sd-item { padding-top: 10px; border-top: 1px solid var(--seam); }
.sd-head { display: flex; align-items: center; gap: 10px; }
.sd-off { flex: none; padding: 3px 7px; border-radius: 5px; background: rgba(169,139,255,.14); color: var(--coin); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sd-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sd-text b { font: 800 15px/1.15 var(--font-display); overflow-wrap: anywhere; }
.sd-text span { color: var(--frost); font-size: 12px; overflow-wrap: anywhere; }
.sd-check {
  flex: none; min-height: var(--tap); padding: 0 12px; border-radius: 12px; font: 700 14px var(--font-body); cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.sd-check:active { transform: scale(var(--press)); }
.sd-empty { color: var(--frost); font-size: 13px; }

.st-form { display: flex; flex-direction: column; gap: 10px; }
.st-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.st-field { display: flex; flex-direction: column; gap: 4px; color: var(--frost); font-size: 12px; font-weight: 600; }
.st-field input {
  width: 100%; min-height: var(--tap); padding: 0 10px; border: 1px solid var(--seam); border-radius: 10px;
  background: var(--rink); color: var(--ice); font: 600 16px var(--font-body); font-variant-numeric: tabular-nums;
}
.st-err { margin: 0; color: #ffb3bb; font-size: 12.5px; }

.st-perf h3 { margin: 0 0 2px; font: 800 15px var(--font-display); letter-spacing: .02em; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.st-card {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 9px; border: 2px solid #4a5875; border-radius: 10px; background: var(--boards-2);
  transition: box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.st-card.r-rare { border-color: var(--blueline); }
.st-card.r-gold { border-color: var(--gold); }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.st-ovr { font: 900 24px/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.st-nick { font: 800 14px/1.1 var(--font-display); overflow-wrap: anywhere; }
.st-tag { padding: 2px 6px; border-radius: 5px; background: rgba(92,255,122,.14); color: var(--chem); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* Scout (Jev's OVR) and Performance, side by side. */
.sp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-item { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 7px; background: rgba(255,255,255,.04); }
.sp-item b { font: 800 16px/1.05 var(--font-display); font-variant-numeric: tabular-nums; }
.sp-item.collecting b { color: var(--frost); font: 600 11.5px/1.3 var(--font-body); }
.sp-item span { color: var(--frost); font-size: 10px; }

/* In-Form: chemistry-green frame and glow, wherever a card shows. */
.st-card.inform, .slot .card.inform, .bigcard.inform {
  border-color: var(--chem);
  box-shadow: 0 0 0 1px rgba(92,255,122,.55), 0 0 16px 3px rgba(92,255,122,.38);
}
.st-card.inform .st-ovr, .slot .card.inform .o { color: var(--chem); }
.st-card.inform.pop { animation: inform-pop 280ms var(--ease-out); }
@keyframes inform-pop { from { transform: scale(.94); box-shadow: 0 0 0 0 rgba(92,255,122,0); } }

/* The walkout card's Scout + Performance row. */
.bc-sp { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .st-card.inform.pop { animation: none; }
}