/* BL Guide: /weapons, the armory. Loaded after style.css, home.css and anomalies.css
   (reset, HUD tokens, rail, title block, filters, chips). Built from the validated mockup on 29 October 2026. */

.wtitle { padding: 1.8rem 0 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 2rem; align-items: end; border-bottom: 1px solid var(--h-line); }
.wtitle h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: .98; }
.wtitle p { grid-column: 1; margin: 0; max-width: 64ch; font-size: 1rem; line-height: 1.55; color: oklch(0.86 0 0); }
.wtitle .stats { grid-column: 2; grid-row: 1 / span 2; }
.tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.1rem 0 .9rem; }
.tools .find { margin-left: auto; }
.tools select { padding: .45rem .6rem; background: var(--h-bg); border: 1px solid var(--h-line); color: var(--h-ink2); font: inherit; font-size: .8125rem; }
.tools label.sort { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink3); }

/* a weapon tile: the game's stash tile, with what the database knows */
.wt { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--h-line); background: var(--h-tile); text-align: left; color: var(--h-ink); transition: border-color 160ms ease, background 160ms ease; }
.wt:hover { border-color: var(--h-line-hi); background: var(--h-tile-hi); }
.wt[aria-pressed="true"], .wt[aria-current] { border-color: var(--mark); box-shadow: inset 0 0 0 1px var(--mark); }
.wt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.1rem .6rem .9rem; }
.wt .sil { position: absolute; left: 50%; top: 50%; translate: -50% -45%; width: 46%; height: auto; aspect-ratio: 1; stroke: oklch(1 0 0 / .16); fill: none; stroke-width: 1.1; stroke-linejoin: round; }
.wt .nm { position: absolute; left: .55rem; top: .45rem; font-size: .8125rem; font-weight: 700; letter-spacing: .03em; }
.wt .ty { position: absolute; left: .55rem; top: 1.55rem; font-size: .6875rem; color: var(--h-ink3); }
.wt .tr { position: absolute; right: .45rem; top: .45rem; font-size: .625rem; font-weight: 700; letter-spacing: .06em; padding: .1rem .35rem; border: 1px solid var(--h-line-hi); color: var(--h-ink2); }
.wt .px { position: absolute; left: 0; bottom: 0; padding: .14rem .45rem; font-size: .6875rem; font-weight: 700; color: oklch(0.98 0 0); }
.px.buy { background: var(--h-buy); } .px.sell { background: var(--h-sell); }
.wt .st { position: absolute; right: .45rem; bottom: .45rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mark); }
.wt .lv { position: absolute; right: .45rem; bottom: .45rem; font-size: .6875rem; font-weight: 600; color: var(--h-ink2); }

/* the weapon card: the M12S card from the game, empty where nothing is shown */
.wc { border: 1px solid var(--h-line); background: var(--h-panel); }
.wc__img { position: relative; height: 11rem; display: grid; place-items: center; border-bottom: 1px solid var(--h-line); background: radial-gradient(60% 70% at 50% 50%, oklch(0.24 0.006 250), oklch(0.15 0.005 250)); }
.wc__img img { max-width: 84%; max-height: 9rem; object-fit: contain; }
.wc__img .sil { width: 6rem; height: 6rem; stroke: oklch(1 0 0 / .2); fill: none; stroke-width: 1.1; stroke-linejoin: round; }
.wc__b { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .8rem; }
.wc h2, .wc h3 { font-size: 1.6rem; line-height: 1; }
.wc .sub { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mark); }
.wc .desc { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--h-ink2); }
.kv2 { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--h-line); }
.kv2 div { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--h-line); font-size: .8125rem; color: var(--h-ink3); }
.kv2 div:nth-child(odd) { padding-right: .75rem; border-right: 1px solid var(--h-line); }
.kv2 div:nth-child(even) { padding-left: .75rem; }
.kv2 b { color: var(--h-ink); font-weight: 600; text-align: right; }
.kv2 b.no { color: oklch(0.42 0 0); font-weight: 400; }
.bars2 { display: grid; gap: .32rem; }
.bar2 { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) 4.4rem; gap: .6rem; align-items: center; font-size: .75rem; color: var(--h-ink3); }
.bar2 .tk { height: 6px; background: oklch(1 0 0 / .08); position: relative; }
.bar2 .tk i { position: absolute; inset: 0 auto 0 0; background: oklch(0.80 0 0); }
.bar2 .tk i.mod { background: var(--h-green); } .bar2 .tk i.bad { background: oklch(0.62 0.17 25); }
.bar2 .tk.r { background: oklch(0.06 0 0); border: 1px solid var(--h-line); height: 8px; }
.bar2 b { color: var(--h-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bar2 b.no { color: oklch(0.42 0 0); font-weight: 400; }
.bar2 em { font-style: normal; color: var(--h-green); font-size: .6875rem; }
.nostats { margin: 0; font-size: .8125rem; color: var(--h-ink3); }
.wc__src { padding: .65rem 1.1rem; border-top: 1px solid var(--h-line); font-size: .75rem; color: var(--h-ink3); }
.wc__src b { color: var(--h-ink2); font-weight: 600; }

/* A. Poss's unlock ladder, as one compact row */
.ladder3 { display: flex; flex-wrap: wrap; gap: .35rem; }
.ladder3 span { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .55rem; border: 1px solid var(--h-line); font-size: .8125rem; font-weight: 600; color: var(--h-ink); }
.ladder3 span em { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--h-ink3); }
.ladder3 span.known { border-color: var(--h-line-hi); }
.cap3 { margin: .5rem 0 0; font-size: .8125rem; color: var(--h-ink3); }
.h2c { display: flex; align-items: baseline; gap: .8rem; margin: 2.4rem 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--h-line); }
.h2c h2 { font-size: 1.25rem; }
.h2c p { margin: 0; font-size: .8125rem; color: var(--h-ink3); }
.unk3 { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.6rem; padding: .85rem 1.1rem; border: 1px solid var(--h-line); background: var(--h-panel); }
.unk3 .k { width: 100%; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
.unk3 span:not(.k) { display: inline-flex; align-items: center; gap: .55rem; font-size: .8125rem; color: var(--h-ink2); }
.unk3 i { width: 4rem; height: .8rem; background: oklch(0.06 0 0); border: 1px solid var(--h-line); }

@media (max-width: 56rem) { .wtitle { grid-template-columns: 1fr; } .wtitle .stats { grid-column: 1; grid-row: auto; } }
@media (max-width: 46rem) { .tools .find { width: 100%; margin-left: 0; } .bar2 { grid-template-columns: 6.4rem minmax(0, 1fr) 4.2rem; } }

/* the grid and the card side by side; every card is in the HTML, only one is shown */
.arm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); gap: 1.25rem; align-items: start; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .45rem; }
.wgroup { grid-column: 1 / -1; margin: .9rem 0 .1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-ink3); }
.wgroup:first-child { margin-top: 0; }
.wgrid [hidden], .wcwrap [hidden] { display: none; }
.wcwrap { position: sticky; top: 1rem; }
.empty { grid-column: 1 / -1; margin: 1.5rem 0 0; padding: 1.5rem; border: 1px dashed var(--h-line-hi); color: var(--h-ink3); text-align: center; }
@media (max-width: 64rem) { .arm { grid-template-columns: minmax(0, 1fr); } .wcwrap { position: static; } }
@media (max-width: 46rem) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }