/* Retro seed catalogue: specimen chamber, index strip and pressed-metal ledger.
   Shares tokens with equipment; no equipment template or sprite changes. */
.wb-strain-card {
    position: relative;
    min-width: 0;
    padding: 12px 12px 4px;
    border: 2px solid var(--wb-brass-shadow);
    border-left: 6px solid var(--wb-brass-shadow);
    background: var(--wb-surface);
    color: var(--wb-text);
    box-shadow: inset 0 2px var(--wb-brass), inset 2px 0 var(--wb-bg), inset 0 -3px var(--wb-bg), 0 4px var(--wb-bg);
    font-synthesis: none;
    overflow-wrap: anywhere;
}
.wb-strain-card::before, .wb-strain-card::after {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    left: -6px;
    background: var(--wb-brass);
    border: 2px solid var(--wb-brass-shadow);
    box-shadow: 0 1px var(--wb-highlight);
    pointer-events: none;
}
.wb-strain-card::before { top: 12px; }
.wb-strain-card::after { bottom: 12px; }
.wb-strain-card__corner-clips { position: absolute; inset: 4px; pointer-events: none; }
.wb-strain-card__corner-clips i { position: absolute; right: 0; width: 8px; height: 8px; border-right: 2px solid var(--wb-brass); }
.wb-strain-card__corner-clips i:first-child { top: 0; border-top: 2px solid var(--wb-brass); }
.wb-strain-card__corner-clips i:last-child { bottom: 0; border-bottom: 2px solid var(--wb-brass-shadow); }
.wb-strain-card[data-status^="selected"] { border-color: var(--wb-brass); }
.wb-strain-card__header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--wb-divider);
    font: 700 13px/1.3 var(--wb-font-label);
}
.wb-strain-card__serial { color: var(--wb-text-muted); border-left: 12px solid var(--strain-accent); padding-left: 8px; }
.wb-strain-card__status { --card-signal:var(--wb-text-muted); }
.wb-strain-card[data-status="available"] .wb-strain-card__status { --card-signal:var(--wb-success); }
.wb-strain-card[data-status="owned"] .wb-strain-card__status { --card-signal:var(--wb-lungs); }
.wb-strain-card[data-status^="selected"] .wb-strain-card__status { --card-signal:var(--wb-success);color:var(--wb-text);border-color:var(--wb-success); }
.wb-strain-card[data-status^="selected"] .wb-card-status > :first-child { box-shadow:inset 1px 1px var(--wb-highlight),0 0 0 1px var(--wb-divider); }
.wb-strain-card[data-status="selected-empty"] .wb-strain-card__status { --card-signal:var(--wb-warning); }
.wb-strain-card h3 { margin: 10px 0; font: 400 20px/1.2 var(--wb-font-title); text-wrap: balance; }
.wb-strain-card__specimen { display: grid; grid-template-columns: 152px minmax(0,1fr); gap: 12px; }
.wb-strain-card__bay {
    position: relative; margin: 0; height: 184px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--wb-panel); border: 2px solid var(--wb-divider);
    box-shadow: inset 2px 2px var(--wb-bg), 0 2px var(--wb-bg);
}
.wb-strain-card__bay::before, .wb-strain-card__bay::after {
    content: ""; position: absolute; pointer-events: none; width: 10px; height: 10px;
    border-color: var(--strain-accent); border-style: solid;
}
.wb-strain-card__bay::before { left: 5px; top: 5px; border-width: 2px 0 0 2px; }
.wb-strain-card__bay::after { right: 5px; bottom: 5px; border-width: 0 2px 2px 0; }
.wb-strain-card__bay img { width: 128px; height: 128px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.wb-strain-card dl { margin: 0; }
.wb-strain-card dt { font: 700 13px/1.3 var(--wb-font-label); color: var(--wb-text-secondary); }
.wb-strain-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.wb-strain-card__readouts { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; padding: 6px 0; min-width: 0; }
.wb-strain-card__readouts .wb-strain-card__mult { font: 400 32px/1.15 var(--wb-font-numeric); }
.wb-strain-card__stock { border-top: 2px solid var(--wb-divider); padding-top: 8px; }
.wb-strain-card__stock dd { font: 400 36px/1.05 var(--wb-font-numeric); }
.wb-strain-card__stock > span { display: block; font: 700 13px/1.3 var(--wb-font-label); color: var(--wb-text-muted); }
.wb-strain-card:is([data-status="owned"], [data-status^="selected"])[data-stock="empty"] .wb-strain-card__stock dd,
.wb-strain-card:is([data-status="owned"], [data-status^="selected"])[data-stock="empty"] .wb-strain-card__stock > span { color: var(--wb-warning); }
.wb-strain-card__description { margin: 10px 0; font: 400 14px/1.5 var(--wb-font-text); color: var(--wb-text-secondary); }
.wb-strain-card__ledger { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--wb-panel); border-top: 2px solid var(--wb-divider); border-bottom: 2px solid var(--wb-divider); }
.wb-strain-card__ledger > div { min-width: 0; padding: 8px; }
.wb-strain-card__ledger > div + div { border-left: 2px solid var(--wb-divider); }
.wb-strain-card__ledger dd { font: 400 20px/1.3 var(--wb-font-numeric); overflow-wrap: normal; }
.wb-strain-card__controls { display: grid; gap: 6px; margin-top: 10px; }
.wb-strain-card__button {
    appearance: none; width: 100%; min-width: 0; min-height: 56px; padding: 2px 8px;
    background: var(--wb-button-secondary); color: var(--wb-text); border: 2px solid var(--wb-border);
    border-radius: 0; box-shadow: inset 0 2px var(--wb-divider), 0 3px var(--wb-bg);
    font: 700 16px/1.25 var(--wb-font-label); cursor: pointer; touch-action: manipulation;
    overflow-wrap: anywhere; transition: transform 80ms;
}
.wb-strain-card__button--primary { background: var(--wb-button-primary); border-color: var(--wb-brass); }
.wb-strain-card__button[aria-disabled="true"] { background: var(--wb-disabled); color: var(--wb-text-secondary); border-color:var(--wb-border); cursor: default; box-shadow: none; }
.wb-strain-card__current[aria-disabled="true"] { background: var(--wb-selected); color: var(--wb-text); border-color: var(--wb-brass); }
.wb-strain-card[data-status="selected-empty"] .wb-strain-card__current { color: var(--wb-warning); }
@media (hover:hover) {
    .wb-strain-card__button:not([aria-disabled="true"]):hover { background: var(--wb-button-secondary-hover); border-color: var(--wb-brass); }
    .wb-strain-card__button--primary:not([aria-disabled="true"]):hover { background: var(--wb-button-primary-hover); }
}
.wb-strain-card__button:not([aria-disabled="true"]):active { transform: translateY(2px); box-shadow: none; }
.wb-strain-card__button:focus-visible { outline: 3px solid var(--wb-focus); outline-offset: 2px; }
.wb-strain-card:focus-visible { outline: 3px solid var(--wb-focus); outline-offset: -5px; }
/* The placeholder occupies exactly the same mechanical control bay as a refill
   button, so unlock/empty/ready transitions do not move the catalogue. */
.wb-strain-card__after-unlock { min-height: 56px; display: grid; place-items: center; text-align: center; border: 1px dashed var(--wb-divider); font: 400 13px/1.5 var(--wb-font-text); color: var(--wb-text-secondary); padding: 2px 8px; }
/* Reserve one compact line for affordability changes without scroll jumps. */
/* A fixed one-line slot cannot gain fractional height when RP shortfall text
   appears. Keep the full DOM text for aria-describedby on purchase controls. */
.wb-strain-card__note { height: 20px; min-height: 20px; margin: 4px 0 0; font: 400 13px/20px var(--wb-font-text); color: var(--wb-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-strain-card[data-status="selected-empty"] .wb-strain-card__note { color: var(--wb-warning); }
/* Fixed one-line feedback keeps the final card anchored on purchase.
   Full confirmations remain available through the persistent live region. */
.wb-strain-card__feedback { display: block; min-height: 20px; height: 20px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 13px/1.4 var(--wb-font-label); color: var(--wb-success); }
.wb-strain-card[data-feedback="denied"] .wb-strain-card__feedback { color: var(--wb-warning); }
.wb-strain-card[data-feedback="purchase"] .wb-strain-card__status i { animation: wb-strain-confirm 240ms steps(2,end); }
.wb-strain-card[data-feedback="select"] .wb-strain-card__current { animation: wb-strain-confirm 160ms steps(2,end); }
.wb-strain-card[data-feedback="denied"] .wb-strain-card__feedback { animation: wb-strain-confirm 120ms steps(2,end); }
@keyframes wb-strain-confirm { from { opacity: .35; } to { opacity: 1; } }
@media (max-width:359px) {
    .wb-strain-card { padding: 12px; }
    /* The empty-selection badge needs two rows here. Keep that geometry when
       it becomes ready, so buying the last item cannot shrink the scroll range. */
    .wb-strain-card__header { flex-direction: column; align-items: flex-start; }
    /* Two 20px lines + 4px padding + 4px border fit the existing 48px target.
       Unlocking must not collapse a wrapped price button from 64px to 48px. */
    .wb-strain-card__button { padding-block: 2px; }
    .wb-strain-card__specimen { grid-template-columns: 132px minmax(0,1fr); gap: 10px; }
    .wb-strain-card__bay { height: 164px; }
    .wb-strain-card__bay img { width: 112px; height: 112px; }
    .wb-strain-card h3 { font-size: 18px; }
    .wb-strain-card__stock dd { font-size: 32px; }
}
/* Landscape drawer has a wide shelf: use it for two catalogue columns.
   Desktop's narrow side panel keeps the same vertical card as portrait. */
@media (min-width:700px) and (max-width:1023px) {
    .wb-strain-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 20px;
        grid-template-areas: "header header" "name description" "specimen ledger" "specimen controls" "note feedback"; }
    .wb-strain-card__header { grid-area: header; }
    .wb-strain-card h3 { grid-area: name; }
    .wb-strain-card__specimen { grid-area: specimen; align-self: start; }
    .wb-strain-card__description { grid-area: description; }
    .wb-strain-card__ledger { grid-area: ledger; align-self: start; }
    .wb-strain-card__controls { grid-area: controls; align-self: start; }
    .wb-strain-card__note { grid-area: note; }
    .wb-strain-card__feedback { grid-area: feedback; align-self: end; }
}
@media (prefers-reduced-motion:reduce) {
    .wb-strain-card .wb-strain-card__button { transition: none; transform: none; }
    .wb-strain-card .wb-strain-card__button:not([aria-disabled="true"]):active { transform: none; }
    .wb-strain-card[data-feedback] .wb-strain-card__status i,
    .wb-strain-card[data-feedback] .wb-strain-card__current,
    .wb-strain-card[data-feedback] .wb-strain-card__feedback { animation: none; }
}