/* weapon-design.css — the weapon detail page.

   The page wears the character dossier's chrome (.cd-page), so nothing here
   declares a colour, a typeface or a spacing scale of its own: every rule reads
   the same custom properties character-design.css already sets, which is what
   keeps the two page types looking like one site. Only the parts a weapon page
   has and a character page does not live here — stat bars, the figure grid,
   acquisition steps, pro/con columns, the comparison table and the rail box.

   Every rule is prefixed .wd-page so it can never reach another page. */

/* ---------- layout guard ----------
   The article column must be allowed to be NARROWER than its widest child.
   Below 940px the shared layout collapses to a single `1fr` track, which sizes
   to max-content, so the comparison table's own minimum width stretched the
   whole column to 737px on a 390px phone and the prose was clipped rather than
   wrapped. The table still scrolls inside its own box; only the column stops
   being dragged along with it. */
.wd-page .d-main,
.wd-page .sec {
  min-width: 0;
}

/* ---------- hero art ----------
   A weapon is photographed against nothing, so it is CONTAINED rather than
   cropped to fill: cover chopped the barrel off every silhouette. */
.wd-page .w-art img {
  object-fit: contain;
  padding: 6%;
  background: var(--art-bg);
}

/* ---------- statistics ---------- */
.wd-page .w-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 68ch;
}
.wd-page .w-src {
  font-size: 12.5px;
  color: var(--muted);
  margin: 16px 0 0;
}

.wd-page .w-bars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 34px;
  margin: 0 0 22px;
}
@media (max-width: 720px) {
  .wd-page .w-bars {
    grid-template-columns: 1fr;
  }
}
.wd-page .w-bar .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.wd-page .w-bar .k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.wd-page .w-bar .v {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wd-page .w-bar .track {
  height: 9px;
  background: var(--sunk);
  border-radius: 5px;
  overflow: hidden;
}
.wd-page .w-bar .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
}

/* The figures beside the bars: magazine size, price, unlock rank and the rest. */
.wd-page .w-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.wd-page .w-facts li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.wd-page .w-facts .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.wd-page .w-facts .val {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* A note on a figure — "per shot", "two-handed only" — is subordinate to it. */
.wd-page .w-facts .note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
}
/* The writer's headline figure keeps the emphasis the data asked for. */
.wd-page .w-facts li[data-emphasis='true'] {
  border-color: var(--accent);
}

/* A panel figure that declares a scale keeps its proportion, at panel scale. */
.wd-page .w-mini {
  display: block;
  height: 5px;
  margin-top: 6px;
  background: var(--sunk);
  border-radius: 3px;
  overflow: hidden;
}
.wd-page .w-mini .stat-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* ---------- acquisition ---------- */
.wd-page .w-prereq {
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px;
  margin: 0 0 18px;
}
.wd-page .w-prereq-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.wd-page .w-prereq ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}

.wd-page .w-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wd-page .w-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.wd-page .w-steps .n {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex: none;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.wd-page .w-steps .t {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

/* Availability: one card per mode, because a weapon is routinely purchasable in
   one mode and mission-locked in another and a single line cannot say that. */
.wd-page .w-avail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.wd-page .w-av {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 17px;
}
.wd-page .w-av-h {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.wd-page .w-av .ctx {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.wd-page .w-av .st,
.wd-page .w-av .pr {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--muted);
}
.wd-page .w-av .pr {
  background: var(--accent);
  color: var(--accent-ink);
}
.wd-page .w-av .req,
.wd-page .w-av .note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.wd-page .w-av .req span {
  font-weight: 700;
  color: var(--muted);
}
.wd-page .w-av .note {
  margin-top: 6px;
  color: var(--muted);
}

/* ---------- strengths and weaknesses ---------- */
.wd-page .w-pc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.wd-page .w-pc-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.wd-page .w-pc-box h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.wd-page .w-pc-box[data-tone='pro'] h3 {
  color: #2f8f4e;
}
.wd-page .w-pc-box[data-tone='con'] h3 {
  color: #c0392b;
}
.wd-page .w-pc-box[data-tone='use'] h3 {
  color: var(--accent);
}
html[data-mode='dark'] .wd-page .w-pc-box[data-tone='pro'] h3 {
  color: #7cc47f;
}
html[data-mode='dark'] .wd-page .w-pc-box[data-tone='con'] h3 {
  color: #e8796b;
}
.wd-page .w-pc-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wd-page .w-pc-box li {
  position: relative;
  padding-left: 22px;
  margin: 9px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.wd-page .w-pc-box li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.wd-page .w-pc-box[data-tone='pro'] li::before {
  content: '+';
  color: #2f8f4e;
}
.wd-page .w-pc-box[data-tone='con'] li::before {
  content: '\2013';
  color: #c0392b;
}
.wd-page .w-pc-box[data-tone='use'] li::before {
  content: '\2192';
  color: var(--accent);
}

/* ---------- comparison ----------
   The table scrolls inside its own box rather than widening the article, so a
   six-column comparison cannot force the whole page sideways on a phone. */
.wd-page .w-tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.wd-page .w-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 520px;
}
/* On a phone a 520px floor guarantees a scrollbar on every table; at that size
   the columns are better left to wrap than to force sideways scrolling. */
@media (max-width: 560px) {
  .wd-page .w-tbl {
    min-width: 0;
  }
  .wd-page .w-tbl th,
  .wd-page .w-tbl td {
    padding: 10px 12px;
  }
}
.wd-page .w-tbl th,
.wd-page .w-tbl td {
  text-align: left;
  padding: 12px 15px;
  vertical-align: top;
}
.wd-page .w-tbl thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.wd-page .w-tbl tbody th {
  font-weight: 700;
  color: var(--text);
}
.wd-page .w-tbl tbody td {
  color: var(--text-2);
  line-height: 1.55;
}
.wd-page .w-tbl tbody tr + tr th,
.wd-page .w-tbl tbody tr + tr td {
  border-top: 1px solid var(--line-2);
}
/* The row for the weapon being read is marked, so a reader never has to hunt
   for their own line in a table of near-identical rifles. */
.wd-page .w-tbl tbody tr.this th,
.wd-page .w-tbl tbody tr.this td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.wd-page .w-tbl tbody tr.this th {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---------- rail box ---------- */
.wd-page .w-box {
  padding: 0;
  overflow: hidden;
}
.wd-page .w-box-art {
  aspect-ratio: 4 / 3;
  background: var(--art-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wd-page .w-box-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.wd-page .w-box-h {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.wd-page .w-box-h .nm {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
}
.wd-page .w-box-h .tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  padding: 2px 7px;
  flex: none;
}
.wd-page .w-grp {
  padding: 4px 0;
  border-bottom: 1px solid var(--line-2);
}
.wd-page .w-grp:last-of-type {
  border-bottom: 0;
}
.wd-page .w-grp-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 16px 2px;
}
.wd-page .w-box .dl {
  padding: 0 16px 8px;
}
.wd-page .w-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px;
  padding: 12px 15px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  transition: filter 0.15s var(--ease);
}
.wd-page .w-cta:hover {
  filter: brightness(1.08);
}