/* _bodydrop.css - the body drop card on live.html.
 *
 * ★★★★★ EVERY CLASS IN THIS FILE IS `bd-` PREFIXED, ON PURPOSE.
 *   `_term.css` defines a GLOBAL `.sq` as a decorative 9x9px square, and on
 *   2026-08-15 an unprefixed short class on the extractions page inherited it:
 *   every price rendered as a blue square with the number spilling out, in
 *   production, with valid markup and every gate green. Specificity decides who
 *   wins PER PROPERTY, so overriding font and colour did not undo width, height,
 *   display and background. A namespace is the only fix that scales.
 *   Do not add a bare single-word class to this file.
 *
 * Colours, spacing and the ink stroke come from the theme's own variables so
 * this card cannot drift from the panels beside it.
 */

.bd-card .bd-lede{
  font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--blue-dim);
  text-shadow:var(--sh-micro);margin:2px 0 14px}

.bd-cost{font-family:var(--pixel);font-size:11px;letter-spacing:.14em;color:var(--amber);
  text-shadow:var(--sh-micro)}

/* --- the label above a group ---------------------------------------------- */
.bd-lab{display:block;font-family:var(--pixel);font-size:10px;letter-spacing:.2em;
  color:var(--blue-dim);text-shadow:var(--sh-micro);margin:0 0 8px}

/* --- the species picker ---------------------------------------------------- */
.bd-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;
  margin:0 0 15px}
.bd-pick{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  font-family:var(--pixel);font-size:11px;letter-spacing:.11em;padding:9px 11px;
  color:#79D9FF;text-shadow:var(--sh-body);background:transparent;
  border:1px solid rgba(75,180,252,.34);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),inset 0 0 0 1px rgba(1,5,11,.7);
  transition:border-color .15s linear,color .15s linear,background .15s linear}
.bd-pick small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.bd-pick:hover:not(:disabled){border-color:#79D9FF;color:#A8E7FF;background:rgba(30,111,224,.1)}
.bd-pick[aria-pressed="true"]{border-color:var(--rule-hot);color:#CDEEFF;
  background:rgba(30,111,224,.19)}
.bd-pick[aria-pressed="true"] small{color:#79D9FF}
.bd-pick:disabled{opacity:.42;cursor:not-allowed}

/* --- the one button -------------------------------------------------------- */
.bd-go{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--pixel);font-size:13px;letter-spacing:.13em;padding:13px 15px;
  color:#A8E7FF;text-shadow:var(--sh-body);background:rgba(30,111,224,.08);
  border:1px solid rgba(75,180,252,.6);
  box-shadow:0 0 0 1px rgba(1,5,11,.9),inset 0 0 0 1px rgba(1,5,11,.7);
  transition:border-color .15s linear,color .15s linear,background .15s linear}
.bd-go small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--blue-dim);
  text-shadow:var(--sh-micro)}
.bd-go:hover:not(:disabled){border-color:#79D9FF;background:rgba(30,111,224,.16)}
.bd-go:disabled{opacity:.42;cursor:not-allowed}
.bd-go.bd-busy{border-color:var(--amber);color:var(--amber)}
.bd-go.bd-busy small{color:var(--amber)}

/* --- why the button is greyed out ------------------------------------------ */
/* Always in the DOM, never display:none - a reason that appears and disappears
   moves everything under it, and the whole point of this line is that it is
   read the moment the button looks dead. */
.bd-why{min-height:17px;margin:9px 0 0;font-family:var(--mono);font-size:11.5px;
  line-height:1.55;color:var(--amber);text-shadow:var(--sh-micro)}
.bd-why.bd-good{color:var(--green)}
.bd-why.bd-bad{color:var(--red)}

/* --- the two counters ------------------------------------------------------ */
.bd-stats{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;
  margin:15px 0 0;padding-top:12px;border-top:1px solid rgba(30,111,224,.55)}
.bd-stat{display:flex;gap:8px;align-items:baseline}
.bd-stat b{font-family:var(--pixel);font-size:10px;letter-spacing:.2em;font-weight:400;
  color:var(--blue-dim);text-shadow:var(--sh-micro)}
.bd-stat i{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--blue-hot);
  text-shadow:var(--sh-body)}

/* the pips - how many are left, readable without counting digits */
.bd-pips{display:inline-flex;gap:5px;align-items:center}
.bd-pip{width:9px;height:9px;border:1px solid rgba(75,180,252,.55);
  box-shadow:0 0 0 1px rgba(1,5,11,.9)}
.bd-pip.bd-on{background:var(--blue-hot);border-color:var(--blue-hot);
  box-shadow:0 0 9px rgba(75,180,252,.75)}

/* --- the rules, said once -------------------------------------------------- */
.bd-rules{margin:13px 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:11px;line-height:1.75;color:var(--blue-dim);
  text-shadow:var(--sh-micro)}
.bd-rules li{padding-left:13px;position:relative}
.bd-rules li::before{content:"\203A";position:absolute;left:0;color:rgba(75,180,252,.6)}

@media (max-width:520px){
  .bd-picks{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
  .bd-stats{gap:12px}
}