/* ============================================
   ABI GUIDE — Database
   Landing (/database) + weapon detail pages
============================================ */

.db-page,
.db-detail {
  min-height: 100vh;
  /* body already offsets the fixed nav (style.css) — don't add nav-h again */
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-16);
}
.db-wrap {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

/* --- shared panel chrome ------------------- */
.db-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.db-panel__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-hd);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.db-panel__bar {
  width: 3px;
  height: 13px;
  background: var(--amber);
  border-radius: 2px;
}

/* ============================================
   LANDING
============================================ */
.db-top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}
.db-head {
  text-align: center;
  padding: var(--sp-6) 0 0;
}
.db-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--amber-dim);
  margin-bottom: var(--sp-4);
}
.db-head__title {
  font-family: var(--font-hd);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.db-head__title span { color: var(--amber); }
.db-head__sub {
  color: var(--ink-muted);
  margin-top: var(--sp-3);
  font-size: 1.02rem;
}

/* search */
.db-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(640px, 100%);
  margin: 0 auto;
}
.db-search__icon {
  position: absolute;
  left: var(--sp-4);
  color: var(--ink-faint);
  pointer-events: none;
}
.db-search input {
  width: 100%;
  padding: var(--sp-4) var(--sp-12) var(--sp-4) calc(var(--sp-8) + var(--sp-3));
  background: var(--surface-el);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.db-search input:focus {
  outline: none;
  border-color: var(--amber-dim);
  box-shadow: 0 0 0 3px var(--amber-bg);
}
.db-search input::placeholder { color: var(--ink-faint); }
.db-search__kbd {
  position: absolute;
  right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2px 7px;
}

/* category cards */
.db-cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-3);
}
.db-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  padding: var(--sp-5) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.db-cat.is-active {
  border-color: var(--amber-dim);
  background: var(--amber-bg);
}
a.db-cat:hover {
  border-color: var(--amber-dim);
  transform: translateY(-2px);
}
.db-cat.is-soon {
  opacity: 0.5;
  cursor: not-allowed;
}
.db-cat__ico {
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
}
.db-cat__ico svg { width: 26px; height: 26px; }
.db-cat__ico--img { width: 100%; }
.db-cat__ico--img img { max-height: 34px; max-width: 84%; object-fit: contain; }
.db-cat.is-active .db-cat__ico { color: var(--amber); }
.db-cat__name {
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.db-cat__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.db-cat.is-active .db-cat__count { color: var(--amber); }

/* browse */
.db-browse__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.db-browse__title {
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 1.3rem;
}
.db-browse__title span { color: var(--ink-muted); font-weight: 500; }
.db-filters {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.db-fbtn {
  font-family: var(--font-hd);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  background: var(--surface-el);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-4);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.db-fbtn:hover { color: var(--ink); border-color: var(--border-bright); }
.db-fbtn.is-active {
  color: var(--amber-bright);
  border-color: var(--amber-dim);
  background: var(--amber-bg);
}

/* table */
.db-table {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.db-table__head,
.db-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 1.3fr 1fr 1.4fr 32px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
}
.db-table__head {
  font-family: var(--font-hd);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-el);
  border-bottom: 1px solid var(--border);
}
.db-row {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.db-row:last-child { border-bottom: 0; }
.db-row:hover { background: var(--surface-el); }
.db-row__entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.db-row__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.db-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.db-row__names { display: flex; flex-direction: column; min-width: 0; }
.db-row__name {
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--amber-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-row:hover .db-row__name { color: var(--amber); }
.db-row__sub { font-size: 0.76rem; color: var(--ink-faint); }
.db-row__type {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.84rem;
  color: var(--ink-muted);
}
.db-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: 0 0 auto;
}
.db-row__cal {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
}
.db-row__stat {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.db-row__go { color: var(--ink-faint); display: grid; place-items: center; }
.db-row:hover .db-row__go { color: var(--amber); }
.db-empty {
  text-align: center;
  color: var(--ink-muted);
  padding: var(--sp-10);
}

/* ============================================
   DETAIL PAGE
============================================ */
.db-crumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.db-crumb a { color: var(--ink-muted); text-decoration: none; }
.db-crumb a:hover { color: var(--amber); }
.db-crumb__here { color: var(--ink); }

.db-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.db-hero__figure {
  background:
    linear-gradient(var(--surface-el), var(--surface)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 210px;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-6) calc(var(--sp-10) + var(--sp-4));
  position: relative;
  overflow: hidden;
}
.db-hero__figure::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.25;
  border-radius: inherit;
  pointer-events: none;
}
.db-hero__figure img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  position: relative;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.5));
}
.db-hero__noimg { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.8rem; }
/* weapon name sits in the bottom-left corner of the photo */
.db-hero__title {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  z-index: 1;
  max-width: calc(100% - var(--sp-10));
  font-family: var(--font-hd);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 14px oklch(0.07 0 0 / 0.9), 0 1px 3px oklch(0.07 0 0 / 0.9);
}
/* type + caliber sit in the bottom-right corner of the weapon photo */
.db-hero__tags {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 1;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.db-hero__tags .db-tag {
  backdrop-filter: blur(6px);
  background-color: oklch(0.11 0.008 252 / 0.72);
}
.db-hero__tags .db-tag--type {
  background-color: var(--amber-bg);
}
.db-tag {
  font-family: var(--font-hd);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: var(--r);
  border: 1px solid var(--border-bright);
}
.db-tag--type { color: var(--amber-bright); background: var(--amber-bg); border-color: var(--amber-dim); }
.db-tag--cal { color: var(--ink); font-family: var(--font-mono); }
.db-hero__desc { color: var(--ink-muted); font-size: 0.94rem; max-width: 46ch; }

/* performance bars */
.db-perf {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.db-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-6);
}
.db-bar__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.db-bar__label { font-size: 0.8rem; color: var(--ink-muted); }
.db-bar__val {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
}
.db-bar__track {
  height: 5px;
  background: var(--surface-raised);
  border-radius: 3px;
  overflow: hidden;
}
.db-bar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  border-radius: 3px;
}

/* specs */
.db-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
.db-spec { display: flex; flex-direction: column; gap: 2px; }
.db-spec__label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.db-spec__val {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  color: var(--ink);
}

/* ammo */
.db-panel + .db-panel,
.db-detail .db-panel { margin-top: var(--sp-5); }
.db-ammo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.db-ammo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-el);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.db-ammo__img {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--surface-raised);
  border-radius: var(--r);
  overflow: hidden;
}
.db-ammo__img img { width: 100%; height: 100%; object-fit: contain; }
.db-ammo__meta { display: flex; flex-direction: column; min-width: 0; }
.db-ammo__name {
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
}
.db-ammo__pen { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); }

/* builds cta */
.db-builds-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.db-builds-cta p { color: var(--ink-muted); font-size: 0.9rem; margin-top: var(--sp-1); }
.db-btn {
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--bg);
  background: var(--amber);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.db-btn:hover { background: var(--amber-bright); }

/* ============================================
   MEDICAL PAGE (accordions + tables)
============================================ */
.db-head--sub {
  text-align: left;
  padding: var(--sp-2) 0 var(--sp-6);
}
.db-head--sub .db-head__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.db-head--sub .db-head__sub { margin-top: var(--sp-2); }

.db-accs { display: flex; flex-direction: column; gap: var(--sp-3); }
.db-acc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.db-acc__sum {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.db-acc__sum::-webkit-details-marker { display: none; }
.db-acc__sum:hover { background: var(--surface-el); }
.db-acc__ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.db-acc__ico img { width: 100%; height: 100%; object-fit: contain; }
.db-acc__name {
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}
.db-acc__count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin-right: auto;
}
.db-acc__chev {
  color: var(--ink-muted);
  transition: transform 0.2s var(--ease-out);
  flex: 0 0 auto;
}
.db-acc[open] .db-acc__chev { transform: rotate(180deg); }
.db-acc[open] .db-acc__sum { border-bottom: 1px solid var(--border); }

.db-mt-scroll { overflow-x: auto; }
.db-mt {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.db-mt th {
  text-align: left;
  font-family: var(--font-hd);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-el);
  white-space: nowrap;
}
.db-mt td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  vertical-align: middle;
}
.db-mt tbody tr:hover { background: var(--surface-el); }
.db-mt__item { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; }
.db-mt__thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  overflow: hidden;
}
.db-mt__thumb img { width: 100%; height: 100%; object-fit: contain; }
.db-mt__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-mt__name { font-family: var(--font-hd); font-weight: 600; color: var(--amber-bright); }
.db-mt__desc {
  font-size: 0.76rem;
  color: var(--ink-muted);
  line-height: 1.35;
  max-width: 44ch;
}
.db-mt__fx { color: var(--ink); min-width: 150px; }
.db-mt__num { font-family: var(--font-mono); white-space: nowrap; color: var(--ink); }
.db-pos { color: var(--green-bright); }
.db-neg { color: oklch(0.62 0.17 22); }
.db-z { color: var(--ink-faint); }
/* headset rating levels (higher = better) */
.db-lv { font-weight: 600; }
.db-lv--hi { color: var(--green-bright); }
.db-lv--mid { color: var(--amber-bright); }
.db-lv--lo { color: oklch(0.64 0.18 22); }

/* ammo rarity (in-game item colour): framed thumbnail + tinted name */
.db-ammo-thumb {
  border: 1.5px solid var(--border-bright);
  border-radius: var(--r);
  background: var(--surface-raised);
}
.db-rar--grey   { border-color: oklch(0.52 0.02 250);        background: oklch(0.52 0.02 250 / 0.12); }
.db-rar--purple { border-color: oklch(0.58 0.17 300);        background: oklch(0.58 0.17 300 / 0.15); }
.db-rar--gold   { border-color: oklch(0.74 0.14 85);         background: oklch(0.74 0.14 85 / 0.15); }
.db-rar--red    { border-color: oklch(0.58 0.20 25);         background: oklch(0.58 0.20 25 / 0.15); }
.db-rar-txt--grey   { color: var(--ink); }
.db-rar-txt--purple { color: oklch(0.74 0.15 300); }
.db-rar-txt--gold   { color: var(--amber-bright); }
.db-rar-txt--red    { color: oklch(0.68 0.19 25); }

/* weapons that chamber a caliber (reverse compat) */
.db-ammo-guns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-el);
}
.db-ammo-guns__lbl {
  flex: 0 0 auto;
  font-family: var(--font-hd);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.db-gun-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1 1 auto; }
.db-gun {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 3px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.db-gun:hover { border-color: var(--amber); background: var(--surface); color: var(--amber-bright); }
.db-gun__thumb {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  overflow: hidden;
}
.db-gun__thumb img { width: 100%; height: 100%; object-fit: contain; }
.db-gun__name { font-family: var(--font-hd); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }

/* ============================================
   ARMOR — sub-categories (helmets / body / visors),
   each a collapsible group of defense-tier accordions
============================================ */
.db-subcat { margin-bottom: var(--sp-7); }
.db-subcat__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.db-subcat__hd::-webkit-details-marker { display: none; }
.db-subcat__hd:hover .db-subcat__name { color: var(--amber-bright); }
.db-subcat__ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  overflow: hidden;
}
.db-subcat__ico img { max-width: 100%; max-height: 38px; object-fit: contain; }
.db-subcat__name {
  font-family: var(--font-hd);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: color 0.15s;
}
.db-subcat__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); }
.db-subcat__rule { flex: 1 1 auto; height: 1px; }
.db-subcat__chev { flex: 0 0 auto; color: var(--ink-faint); transition: transform 0.2s; }
.db-subcat[open] .db-subcat__chev { transform: rotate(180deg); }
.db-subcat__body { padding-top: var(--sp-5); }

/* per-class accent colour (grey -> green -> blue -> purple -> gold -> red) */
.db-tier--c1, .db-helm--c1 { --tc: oklch(0.64 0.02 250); }
.db-tier--c2, .db-helm--c2 { --tc: oklch(0.66 0.13 150); }
.db-tier--c3, .db-helm--c3 { --tc: oklch(0.64 0.13 235); }
.db-tier--c4, .db-helm--c4 { --tc: oklch(0.62 0.16 300); }
.db-tier--c5, .db-helm--c5 { --tc: oklch(0.74 0.15 78);  }
.db-tier--c6, .db-helm--c6 { --tc: oklch(0.62 0.20 25);  }

.db-tier { margin-bottom: var(--sp-5); }
.db-tier + .db-tier { margin-top: var(--sp-6); }
.db-tier__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.db-tier__hd::-webkit-details-marker { display: none; }
.db-tier__chev { flex: 0 0 auto; color: var(--ink-faint); transition: transform 0.2s; }
.db-tier[open] .db-tier__chev { transform: rotate(180deg); }
.db-tier__badge {
  font-family: var(--font-hd);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc);
  padding: 3px 12px;
  border: 1px solid color-mix(in oklch, var(--tc) 55%, transparent);
  border-radius: var(--r);
  background: color-mix(in oklch, var(--tc) 12%, transparent);
  white-space: nowrap;
}
.db-tier__count { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; }
.db-tier__rule { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, color-mix(in oklch, var(--tc) 40%, transparent), transparent); }

.db-helm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: var(--sp-4);
  padding-top: var(--sp-4);
}
.db-helm {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-top: 2px solid var(--tc);
  border-radius: var(--r);
  background: var(--surface-raised);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.db-helm:hover { border-color: var(--tc); transform: translateY(-2px); }
.db-helm__bar {
  display: flex;
  align-items: stretch;
  padding: var(--sp-3) var(--sp-3) 0;
}
.db-helm__class {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 4px 8px;
  display: grid; place-items: center;
  font-family: var(--font-hd);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1;
  color: var(--bg);
  background: var(--tc);
  border: 1px solid var(--tc);
  border-radius: var(--r) 0 0 var(--r);
}
.db-helm__name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.15;
  color: var(--ink);
  background: var(--surface-el);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--r) var(--r) 0;
}
/* no frame: the helmet sits on the card, oversized, and pops in front of the
   first stats row (negative bottom margin + z-index above .db-helm__stats) */
.db-helm__thumb {
  position: relative;
  z-index: 2;
  height: 128px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: var(--sp-2) var(--sp-3) -18px;
  pointer-events: none;
}
/* pixel max-height (percentages don't resolve reliably inside a sized flex box) */
.db-helm__thumb img {
  max-width: 88%;
  max-height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 5px 9px oklch(0 0 0 / 0.55));
}
.db-helm__stats {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 0.78rem;
}
.db-helm__stats > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.db-helm__stats dt { color: var(--ink-faint); white-space: nowrap; }
.db-helm__stats dd {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--ink);
  text-align: right;
}

/* face mask -> compatible helmets (clickable chips) */
.db-fits {
  position: relative;
  z-index: 1;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
}
.db-fits__lbl {
  display: block;
  font-family: var(--font-hd);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.db-fits__row { display: flex; flex-wrap: wrap; gap: 5px; }
.db-fitchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 9px 2px 3px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  background: var(--surface-el);
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.db-fitchip:hover { border-color: var(--amber); background: var(--surface); color: var(--amber-bright); }
.db-fitchip__thumb { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden; }
.db-fitchip__thumb img { max-width: 100%; max-height: 22px; object-fit: contain; }
.db-fitchip__name {
  min-width: 0;
  font-family: var(--font-hd); font-weight: 600; font-size: 0.72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* helmet reached from a mask's compat chip: flash outline then fade */
.db-helm.is-highlight { animation: db-helm-flash 2.2s ease-out; }
@keyframes db-helm-flash {
  0%, 18% {
    box-shadow: 0 0 0 2px var(--amber), 0 0 20px 2px color-mix(in oklch, var(--amber) 55%, transparent);
    border-color: var(--amber);
  }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* equipment cards (no defense tier): amber accent, full-width name, layout grid */
.db-helm--eq { --tc: var(--amber); }
.db-helm--eq .db-helm__name { border-left: 1px solid var(--border); border-radius: var(--r); }
.db-eq__layout {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
}
.db-eq__layout-sum {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-hd);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.db-eq__layout-sum::-webkit-details-marker { display: none; }
.db-eq__layout-sum span { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
.db-eq__chev { flex: 0 0 auto; margin-left: auto; width: 15px; height: 15px; color: var(--ink-faint); transition: transform 0.2s; }
.db-eq__layout[open] .db-eq__chev { transform: rotate(180deg); }
.db-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 24px);
  grid-auto-rows: 24px;
  grid-auto-flow: row dense;
  gap: 0;
  padding: 2px var(--sp-4) var(--sp-4);
  justify-content: start;
}
/* POCKET: thick-ish outline + margin gap (clear separation between pockets) */
.db-pk {
  display: grid;
  grid-template-columns: repeat(var(--pw), 1fr);
  grid-template-rows: repeat(var(--ph), 1fr);
  gap: 1px;                         /* THIN divider between slots (shows bg) */
  margin: 2px;
  border: 1.5px solid var(--border-bright);
  border-radius: 3px;
  background: var(--border);        /* the 1px gaps read as faint slot dividers */
  overflow: hidden;
}
/* SLOT: individual 1x1 cell (dark, neutral) */
.db-slot { background: var(--bg); }
.db-slot.is-off { background: transparent; opacity: 0.4; }

/* placeholder for a throwable with no render yet (brand-new items) */
.db-noimg { width: 46px; height: 46px; color: var(--ink-faint); opacity: 0.6; }

/* exact storage-grid image from abibuilder (when available) */
.db-layimg { padding: 2px var(--sp-4) var(--sp-4); }
.db-layimg img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  margin: 0 auto;
  border-radius: var(--r);
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 860px) {
  .db-cats { grid-template-columns: repeat(3, 1fr); }
  .db-hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .db-cats { grid-template-columns: repeat(2, 1fr); }
  .db-search { order: 1; } /* search below the category cards on phones */
  .db-bars { grid-template-columns: 1fr; }
  .db-table__head { display: none; }
  .db-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'entry go' 'meta go';
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .db-row__entry { grid-area: entry; }
  .db-row__type { grid-area: meta; font-size: 0.76rem; }
  .db-col-cal, .db-col-stat { display: none; }
  .db-row__go { grid-area: go; }
}