/* UI-V2-07B · shared equipment cards, "Osiedlowy Kingston".
   Hardware detailing is functional: brackets separate layers, scale lines guide
   the miniature, and LEDs communicate ownership. No random decoration. */
.wb-gear-card {
    --gear-signal: var(--wb-brass);
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 16px 13px 13px;
    color: var(--wb-text);
    background: var(--wb-panel);
    border: 3px solid var(--wb-brass-shadow);
    /* Tiny stepped chassis: same square-corner family as HUD instruments. */
    clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0,
        calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px),
        calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
    box-shadow: inset 0 0 0 2px var(--wb-bg),
                inset 0 5px var(--wb-surface-raised),
                0 5px 0 var(--wb-bg);
    font-synthesis: none;
}

.wb-gear-card::before,
.wb-gear-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.wb-gear-card::before {
    inset: 7px 8px auto;
    height: 2px;
    background: var(--wb-brass);
    opacity: .7;
}
.wb-gear-card::after {
    inset: auto 8px 7px;
    height: 2px;
    background: var(--wb-brass-shadow);
}
.wb-gear-card[data-status="equipped"] {
    --gear-signal: var(--wb-brand-primary);
    border-color: var(--wb-brass);
    background: var(--wb-surface);
}
.wb-gear-card[data-status="owned"] { --gear-signal: var(--wb-lungs); }
.wb-gear-card[data-status="available"] { --gear-signal: var(--wb-brand-primary); }
.wb-gear-card[data-status="unaffordable"] { --gear-signal: var(--wb-text-muted); }

.wb-gear-card__rivets {
    position: absolute;
    pointer-events: none;
    inset: 0;
}
.wb-gear-card__rivets i {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--wb-brass);
    border-right: 2px solid var(--wb-brass-shadow);
    border-bottom: 2px solid var(--wb-brass-shadow);
    box-shadow: inset 1px 1px 0 var(--wb-highlight);
}
.wb-gear-card__rivets i::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    top: 1px;
    left: 1px;
    background: var(--wb-brass-shadow);
}
.wb-gear-card__rivets i:nth-child(1) { top: 11px; left: 5px; }
.wb-gear-card__rivets i:nth-child(2) { top: 11px; right: 5px; }
.wb-gear-card__rivets i:nth-child(3) { bottom: 11px; left: 5px; }
.wb-gear-card__rivets i:nth-child(4) { bottom: 11px; right: 5px; }

.wb-gear-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    gap: 8px;
    margin: 7px 6px 12px;
    padding-bottom: 0;
    border-bottom: 2px solid var(--wb-divider);
    min-width: 0;
}
.wb-gear-card__serial {
    min-width: 0;
    color: var(--wb-text-muted);
    font: 700 11px/1.3 var(--wb-font-label);
    letter-spacing: .065em;
}
.wb-gear-card__status { --card-signal: var(--gear-signal); flex: 0 0 auto; }
.wb-gear-card[data-status="equipped"] .wb-gear-card__status {
    border-color: var(--wb-brand-primary);
}
.wb-gear-card[data-status="unaffordable"] .wb-gear-card__status {
    color: var(--wb-text-muted);
}

.wb-gear-card__showcase {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: stretch;
    gap: 11px;
    min-width: 0;
}
.wb-gear-card__bay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
    min-height: 176px;
    margin: 0;
    padding: 9px 4px 7px;
    overflow: hidden;
    background: var(--wb-bg);
    border: 2px solid var(--wb-brass-shadow);
    box-shadow: inset 3px 3px 0 var(--wb-panel),
                inset -3px -3px 0 var(--wb-surface-raised);
}
.wb-gear-card__bay::before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 20px;
    bottom: 20px;
    border-left: 2px dashed var(--wb-divider);
    border-right: 2px dashed var(--wb-divider);
    pointer-events: none;
}
.wb-gear-card__bay-guides {
    position: absolute;
    width: 70%;
    height: 2px;
    left: 15%;
    top: 54%;
    background: var(--wb-divider);
}
.wb-gear-card__bay-guides::before,
.wb-gear-card__bay-guides::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 2px;
    top: -2px;
    background: var(--wb-brass);
}
.wb-gear-card__bay-guides::before { left: 0; }
.wb-gear-card__bay-guides::after { right: 0; }
.wb-gear-card__bay img {
    display: block;
    position: relative;
    z-index: 1;
    /* 3x the original Canvas; only its transparent margins meet the bay edge. */
    width: 120px;
    max-width: none;
    height: 144px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(3px 4px 0 var(--wb-panel));
    transition: transform 120ms steps(2, end);
}
.wb-gear-card__specs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
}
.wb-gear-card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 3px 7px;
    color: var(--wb-brass);
    font: 700 12px/1.2 var(--wb-font-label);
    letter-spacing: .025em;
}
.wb-gear-card__eyebrow span:first-child {
    border-bottom: 2px solid var(--wb-brass-shadow);
    padding-bottom: 2px;
}
.wb-gear-card__eyebrow span:last-child {
    color: var(--wb-text-muted);
    font-size: 11px;
}
.wb-gear-card__specs h3 {
    min-width: 0;
    margin: 0;
    font: 400 clamp(18px, 4vw, 21px)/1.2 var(--wb-font-title);
    color: var(--wb-text);
    overflow-wrap: break-word;
    hyphens: auto;
}
.wb-gear-card__mult {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding: 5px 7px;
    background: var(--wb-panel);
    border-left: 3px solid var(--wb-brand-primary);
}
.wb-gear-card__mult small,
.wb-gear-card__meter span {
    color: var(--wb-text-secondary);
    font: 700 12px/1.3 var(--wb-font-label);
}
.wb-gear-card__mult strong {
    color: var(--wb-brand-primary);
    font: 400 20px/1 var(--wb-font-numeric);
    white-space: nowrap;
}
.wb-gear-card__meter {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
    padding: 0 3px 4px;
    border-bottom: 2px dashed var(--wb-divider);
}
.wb-gear-card__meter strong {
    color: var(--wb-lungs);
    font: 400 17px/1.2 var(--wb-font-numeric);
    white-space: nowrap;
}

.wb-gear-card__description {
    position: relative;
    min-width: 0;
    margin: 13px 0;
    padding: 11px 10px 11px 13px;
    color: var(--wb-text-secondary);
    background: var(--wb-bg);
    border-left: 3px solid var(--wb-brass-shadow);
    border-bottom: 2px solid var(--wb-divider);
    font: 400 14px/1.48 var(--wb-font-text);
    overflow-wrap: break-word;
}
.wb-gear-card__description::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 4px;
    height: 9px;
    width: 2px;
    background: var(--wb-brass);
}
.wb-gear-card__deck {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    align-items: stretch;
    gap: 9px;
    min-width: 0;
    padding-top: 11px;
    border-top: 2px solid var(--wb-brass-shadow);
}
.wb-gear-card__price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.wb-gear-card__price span {
    color: var(--wb-text-muted);
    font: 700 12px/1.3 var(--wb-font-label);
    letter-spacing: .02em;
}
.wb-gear-card__price strong {
    color: var(--wb-highlight);
    font: 400 clamp(16px, 4vw, 19px)/1.15 var(--wb-font-numeric);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.wb-gear-card__control {
    min-width: 0;
    display: flex;
    align-items: stretch;
}
.wb-gear-card__action,
.wb-gear-card__equipped {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 52px;
    width: 100%;
    padding: 8px 7px;
    border: 2px solid var(--wb-brass);
    border-radius: 0;
    color: var(--wb-bg);
    background: var(--wb-brand-primary);
    text-align: center;
    font: 700 16px/1.2 var(--wb-font-label);
    overflow-wrap: anywhere;
    touch-action: manipulation;
}
.wb-gear-card__action {
    cursor: pointer;
    transition: background-color 90ms ease, transform 80ms steps(2, end);
    box-shadow: inset 0 3px 0 var(--wb-cashout-hover), 0 3px 0 var(--wb-brass-shadow);
}
.wb-gear-card__equipped {
    gap: 6px;
    color: var(--wb-text);
    background: var(--wb-selected);
    border-color: var(--wb-brand-primary);
    font: 700 16px/1.2 var(--wb-font-label);
}
.wb-gear-card__check {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: var(--wb-bg);
    background: var(--wb-brand-primary);
    font: 700 15px/1 var(--wb-font-label);
}
.wb-gear-card__action:focus-visible,
.wb-gear-card__equipped:focus-visible,
.wb-gear-card__pin:focus-visible {
    outline: 3px solid var(--wb-focus);
    outline-offset: 2px;
}
.wb-gear-card__action:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: inset 0 2px 0 var(--wb-button-primary-pressed);
}
.wb-gear-card__action:disabled {
    color: var(--wb-text-secondary);
    background: var(--wb-disabled);
    border-color: var(--wb-border);
    box-shadow: none;
    cursor: not-allowed;
}
.wb-gear-card__pin {
    min-height: 48px;
    min-width: 48px;
    flex: 0 0 48px;
    padding: 8px;
    border: 2px solid var(--wb-brass-shadow);
    color: var(--wb-brass);
    background: var(--wb-bg);
    font: 700 14px/1.3 var(--wb-font-label);
    cursor: pointer;
    touch-action: manipulation;
}
.wb-gear-card__pin[aria-pressed="true"] {
    border-color: var(--wb-brass);
    background: var(--wb-surface-raised);
}
.wb-gear-card__pin span { font-size: 15px; }

@media (hover: hover) {
    .wb-gear-card:hover .wb-gear-card__bay img { transform: translateY(-2px); }
    .wb-gear-card__action:hover:not(:disabled) { background: var(--wb-cashout-hover); }
    .wb-gear-card__pin:hover { background: var(--wb-surface-raised); }
}
@media (max-width: 359px) {
    .wb-gear-card { padding: 14px 10px 12px; }
    .wb-gear-card__showcase { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
    .wb-gear-card__eyebrow span:last-child { display: none; }
    .wb-gear-card__deck { gap: 7px; }
    /* Two text lines fit the same 52px action after affordability changes. */
    .wb-gear-card__action, .wb-gear-card__equipped { padding-block: 4px; }
    /* Wide silhouettes retain every painted pixel in the narrow 96px bay.
       The compact can and vaporizer can keep their larger 3x presentation. */
    .wb-gear-card__bay img:is([data-gear-thumbnail="pipe"],
        [data-gear-thumbnail="apple"], [data-gear-thumbnail="gravity_bong"],
        [data-gear-thumbnail="acrylic_bong"], [data-gear-thumbnail="ice_bong"]) {
        width: 80px;
        height: 96px;
    }
}
/* A wide, shallow drawer has room for a second column, not a taller card. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .wb-gear-card {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        column-gap: 16px;
    }
    .wb-gear-card__header { grid-column: 1 / -1; }
    .wb-gear-card__showcase { grid-column: 1; grid-row: 2 / 4; }
    .wb-gear-card__description { grid-column: 2; grid-row: 2; margin: 0 0 12px; }
    .wb-gear-card__deck { grid-column: 2; grid-row: 3; align-self: end; }
}
@media (prefers-reduced-motion: reduce) {
    .wb-gear-card__bay img, .wb-gear-card__action { transition: none; }
    .wb-gear-card:hover .wb-gear-card__bay img { transform: none; }
    .wb-gear-card__action:active:not(:disabled) { transform: none; }
}

/* Selection is secondary to a purchase; it stays a full native control. */
.wb-gear-card__action[data-shop-action="select"] { color:var(--wb-text);background:var(--wb-button-secondary);border-color:var(--wb-border);box-shadow:inset 0 2px var(--wb-divider),0 3px var(--wb-bg); }
.wb-gear-card[data-status="equipped"] .wb-card-status > :first-child { box-shadow:inset 1px 1px var(--wb-highlight),0 0 0 1px var(--wb-divider); }
@media (hover:hover) and (pointer:fine) { .wb-gear-card__action[data-shop-action="select"]:hover { background:var(--wb-button-secondary-hover);border-color:var(--wb-brass); } }