/* ==========================================================================
   NDF — weapons database (weapons.html). Colours come only from the site
   tokens in site.css, so the classic and editorial skins both apply.
   ========================================================================== */

.wpn-head{ padding-bottom:var(--s3); }
.wpn-head h1{ font-size:clamp(38px,6vw,72px); line-height:1; margin:var(--s1) 0 var(--s2); }
.wpn-head .hero-lede{ max-width:64ch; margin:0; color:var(--ink-2); }

/* ---------- search ---------- */
.wpn-search{
  position:relative; display:flex; align-items:center; gap:0;
  margin-top:var(--s4); max-width:960px;
  background:var(--paper); border:1px solid var(--rule); border-bottom:2px solid var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wpn-search:focus-within{ border-color:var(--stamp); box-shadow:0 0 0 3px color-mix(in srgb, var(--stamp) 18%, transparent); }
.wpn-search-ico{ flex:none; width:58px; display:grid; place-items:center; color:var(--ink-3); }
.wpn-search-ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.wpn-search input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font-family:var(--body); font-size:clamp(18px,2.2vw,24px); padding:20px 8px 20px 0; outline:none;
}
.wpn-search input::placeholder{ color:var(--ink-3); }
.wpn-search input::-webkit-search-cancel-button{ display:none; }
.wpn-search-clear{
  flex:none; width:48px; height:48px; margin-right:6px; border:0; background:transparent; color:var(--ink-2);
  font-size:26px; line-height:1; cursor:pointer; border-radius:50%;
}
.wpn-search-clear:hover{ color:var(--stamp); background:var(--paper-2); }
.wpn-search-go{ flex:none; align-self:stretch; border-radius:0; margin:0; padding-inline:22px; }
.wpn-hint{ margin-top:10px; color:var(--ink-3); }
.wpn-hint kbd{ font-family:var(--mono); font-size:11px; border:1px solid var(--rule); padding:1px 6px; background:var(--paper); color:var(--ink-2); }

/* ---------- facet chips ---------- */
.wpn-filters{ margin-top:var(--s3); display:grid; gap:12px; }
.wpn-facet{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; align-items:start; }
.wpn-facet-label{ padding-top:9px; }
.wpn-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.wpn-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border:1px solid var(--rule); background:var(--paper); color:var(--ink-2);
  cursor:pointer; line-height:1.2; transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.wpn-chip:hover{ border-color:var(--ink); color:var(--ink); }
.wpn-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.wpn-chip-count{
  font-variant-numeric:tabular-nums; font-size:10.5px; padding:1px 6px; min-width:22px; text-align:center;
  background:var(--paper-2); color:var(--ink-3); border-radius:999px;
}
.wpn-chip[aria-pressed="true"] .wpn-chip-count{ background:var(--stamp); color:var(--stamp-ink); }
.wpn-chip-more{ border-style:dashed; }

.wpn-status-line{ margin-top:var(--s3); min-height:1.6em; color:var(--ink-3); }

/* ---------- grid + cards ---------- */
.wpn-grid{
  list-style:none; margin:var(--s2) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s3);
}
.wpn-cell{ display:flex; min-width:0; }
.wpn-card{
  flex:1; display:flex; flex-direction:column; min-width:0;
  background:var(--paper); border:1px solid var(--rule-soft); color:var(--ink); text-decoration:none; overflow:hidden;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.wpn-card:hover, a.wpn-card:focus-visible{ border-color:var(--stamp); transform:translateY(-3px); box-shadow:0 12px 26px -16px rgba(0,0,0,.45); }
.wpn-card-img{ position:relative; aspect-ratio:16/10; background:var(--paper-2); overflow:hidden; }
.wpn-card-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
a.wpn-card:hover .wpn-card-img img{ transform:scale(1.04); }
.wpn-card-ph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-size:34px; letter-spacing:.08em; color:var(--rule);
}
.wpn-status{
  position:absolute; left:10px; bottom:10px; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 8px; background:var(--paper); color:var(--ink); border:1px solid var(--rule);
}
.wpn-status::before, .wpn-fact-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:none; }
.wpn-status.is-in-service::before, .wpn-fact-status.is-in-service::before{ background:var(--state-2); }
.wpn-status.is-development::before, .wpn-fact-status.is-development::before{ background:var(--stamp); }
.wpn-card-body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:7px; }
.wpn-card-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stamp); }
.wpn-card-name{ font-size:19px; line-height:1.25; margin:0; overflow-wrap:anywhere; }
a.wpn-card:hover .wpn-card-name{ color:var(--stamp); }
.wpn-card-sum{
  margin:0; font-size:15px; line-height:1.5; color:var(--ink-2); font-weight:300;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.wpn-card.is-loading{ min-height:290px; }
.wpn-card .sk{ display:block; height:14px; background:var(--rule-soft); width:85%; animation:wpnPulse 1.4s ease-in-out infinite; }
.wpn-card .sk-s{ width:40%; height:10px; }
.wpn-card.is-loading .wpn-card-img{ animation:wpnPulse 1.4s ease-in-out infinite; }
@keyframes wpnPulse{ 50%{ opacity:.55; } }

.wpn-empty{
  grid-column:1/-1; padding:var(--s4); background:var(--paper); border:1px solid var(--rule-soft);
  border-top:3px solid var(--stamp); color:var(--ink-2);
}
.wpn-empty h3, .wpn-empty h1{ font-size:clamp(22px,2.6vw,30px); margin:0 0 8px; color:var(--ink); }
.wpn-empty p{ margin:0 0 var(--s2); max-width:60ch; }

.wpn-more-row{ display:flex; justify-content:center; margin-top:var(--s4); }

/* ---------- detail ---------- */
.wpn-back{ display:inline-flex; gap:8px; align-items:center; color:var(--ink-2); }
.wpn-back:hover{ color:var(--stamp); }
.wpn-d-head{ margin:var(--s2) 0 var(--s3); max-width:980px; }
.wpn-d-kicker a:hover{ text-decoration:underline; }
.wpn-d-title{ font-size:clamp(36px,6vw,74px); line-height:1.02; margin:var(--s1) 0 var(--s2); overflow-wrap:anywhere; }
.wpn-d-sum{ margin:0; max-width:70ch; color:var(--ink-2); }

.wpn-d-loading .wpn-d-sk-hero{ aspect-ratio:16/7; background:var(--paper-2); margin:var(--s3) 0; animation:wpnPulse 1.4s ease-in-out infinite; }
.wpn-d-loading .sk{ display:block; height:16px; width:60%; margin-top:12px; background:var(--rule-soft); }
.wpn-d-loading .sk-s{ width:30%; }

.wpn-d-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:var(--s5); margin-top:var(--s4); align-items:start; }
.wpn-d-main{ min-width:0; }
.wpn-d-main .post-body{ margin-top:0; }
.wpn-d-body h3{ font-size:clamp(19px,2vw,23px); margin-top:1.4em; }
.wpn-d-body ul, .wpn-d-body ol{ padding-left:1.3em; }
.wpn-d-body li + li{ margin-top:.35em; }
.wpn-d-body blockquote{ margin:1.4em 0; padding:0 0 0 var(--s3); border-left:3px solid var(--stamp); font-style:italic; color:var(--ink-2); }
.wpn-d-body figure{ margin:1.6em 0; }
.wpn-d-body figure img, .wpn-d-body img{ display:block; width:100%; height:auto; }
.wpn-d-body figcaption{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:8px; }
.wpn-d-body a{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; }
.wpn-d-side{ display:grid; gap:var(--s3); position:sticky; top:100px; min-width:0; }
.wpn-box{ background:var(--paper); border:1px solid var(--rule-soft); border-top:3px solid var(--ink); padding:var(--s3); min-width:0; }
.wpn-box-h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--stamp); margin:0 0 var(--s2); }
.wpn-facts{ margin:0; display:grid; }
.wpn-fact{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; padding:9px 0; border-top:1px solid var(--rule-soft); }
.wpn-fact:first-child{ border-top:0; padding-top:0; }
.wpn-fact dt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-top:3px; }
.wpn-fact dd{ margin:0; font-size:16px; overflow-wrap:anywhere; }
.wpn-fact-status{ display:inline-flex; align-items:center; gap:8px; }
.wpn-ops{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.wpn-op{ display:inline-block; font-size:14px; padding:5px 10px; border:1px solid var(--rule); background:var(--ground); color:var(--ink); }
.wpn-op:hover, .wpn-op:focus-visible{ border-color:var(--stamp); color:var(--stamp); }
.wpn-specs-wrap{ overflow-x:auto; }
.wpn-specs{ width:100%; border-collapse:collapse; font-size:15px; }
.wpn-specs th, .wpn-specs td{ text-align:left; vertical-align:top; padding:8px 0; border-top:1px solid var(--rule-soft); }
.wpn-specs tr:first-child th, .wpn-specs tr:first-child td{ border-top:0; padding-top:0; }
.wpn-specs th{ font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); width:44%; padding-right:12px; padding-top:11px; }
.wpn-specs tr:first-child th{ padding-top:3px; }
.wpn-specs td{ font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.wpn-tags{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--rule); display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.wpn-tags ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wpn-tag{ font-family:var(--mono); font-size:12px; color:var(--ink-2); padding:4px 9px; background:var(--paper-2); border:1px solid transparent; }
.wpn-tag:hover, .wpn-tag:focus-visible{ border-color:var(--stamp); color:var(--stamp); }
.wpn-d-updated{ margin-top:var(--s3); color:var(--ink-3); }
/* procurement records of the system (assets/weapons.js -> procurement.html?d=) */
.wpn-proc-list{ list-style:none; margin:0; padding:0; display:grid; }
.wpn-proc-list li{ display:grid; gap:3px; padding:9px 0; border-top:1px solid var(--rule-soft); }
.wpn-proc-list li:first-child{ border-top:0; padding-top:0; }
.wpn-proc{ font-size:16px; line-height:1.35; color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; overflow-wrap:anywhere; }
.wpn-proc:hover, .wpn-proc:focus-visible{ color:var(--stamp); text-decoration-color:currentColor; }
.wpn-proc-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.wpn-related{ margin-top:var(--s6); padding-top:var(--s3); border-top:2px solid var(--ink); }
.wpn-related .section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.wpn-grid-related{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* ---------- carousel ---------- */
.wpn-car{ position:relative; margin-top:var(--s3); background:var(--field-b); color:var(--field-ink); border:1px solid var(--rule-soft); }
.wpn-car-view{ position:relative; overflow:hidden; touch-action:pan-y; cursor:grab; outline:none; }
.wpn-car.is-single .wpn-car-view{ cursor:default; }
.wpn-car-view:focus-visible{ outline:2px solid var(--stamp); outline-offset:3px; }
.wpn-car-track{
  list-style:none; margin:0; padding:0; display:flex;
  transition:transform .55s var(--ease-out); will-change:transform;
}
.wpn-car-track.is-dragging{ transition:none; cursor:grabbing; }
.wpn-car.is-reduced .wpn-car-track{ transition:none; }
@media (prefers-reduced-motion: reduce){ .wpn-car-track{ transition:none; } }
.wpn-car-slide{ flex:0 0 100%; min-width:0; }
.wpn-car-slide figure{ margin:0; }
.wpn-car-frame{ position:relative; aspect-ratio:16/8; background:var(--field-b); overflow:hidden; }
.wpn-car-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; opacity:0; transition:opacity .35s var(--ease); }
.wpn-car-frame.is-loaded img{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .wpn-car-frame img{ transition:none; } }
.wpn-car-frame.is-broken::after{
  content:"Image unavailable"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--field-mute);
}
.wpn-car-cap{
  display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; align-items:baseline;
  padding:12px 16px 14px; min-height:48px; background:var(--paper); color:var(--ink-2); border-top:1px solid var(--rule-soft);
}
.wpn-car-caption{ font-size:15px; line-height:1.4; color:var(--ink); }
.wpn-car-credit{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
.wpn-car-nav{
  position:absolute; left:0; right:0; top:0; aspect-ratio:16/8; z-index:2; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between; padding-inline:14px;
}
.wpn-car-btn{
  pointer-events:auto;
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:50%;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5); transition:background .18s var(--ease), color .18s var(--ease);
}
.wpn-car-btn:hover{ background:var(--ink); color:var(--paper); }
.wpn-car-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.wpn-car-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:4px 10px 4px 6px; background:var(--paper); border-top:1px solid var(--rule-soft);
}
.wpn-car-dots{ display:flex; gap:2px; pointer-events:auto; }
.wpn-car-dot{
  width:22px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center;
}
.wpn-car-dot::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rule); transition:background .2s var(--ease), transform .2s var(--ease); }
.wpn-car-dot:hover::before{ background:var(--ink-3); }
.wpn-car-dot[aria-current="true"]::before{ background:var(--stamp); transform:scale(1.3); }
.wpn-car-count{ font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .wpn-d-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .wpn-d-side{ position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .wpn-grid-related{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .wpn-search-ico{ width:44px; }
  .wpn-search-go{ display:none; }
  .wpn-search input{ padding:16px 4px 16px 0; }
  .wpn-facet{ grid-template-columns:1fr; gap:6px; }
  .wpn-facet-label{ padding-top:0; }
  .wpn-chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut); scrollbar-width:thin; }
  .wpn-chip{ flex:none; }
  .wpn-grid{ grid-template-columns:1fr; }
  .wpn-grid-related{ grid-template-columns:1fr; }
  .wpn-d-side{ grid-template-columns:1fr; }
  .wpn-car-frame{ aspect-ratio:4/3; }
  .wpn-car-nav{ aspect-ratio:4/3; padding-inline:8px; }
  .wpn-car-btn{ width:40px; height:40px; }
  .wpn-fact{ grid-template-columns:110px minmax(0,1fr); }
}