/* ==========================================================================
   INDIA'S ARSENAL — defence.html#arsenal (assets/arsenal.js).
   Colours come only from the site tokens in site.css, so the classic and
   editorial skins (and dark mode) all apply.
   ========================================================================== */

.ars-lede{ max-width:68ch; margin:0 0 var(--s3); color:var(--ink-2); }

/* mini search: a plain GET form to weapons.html?q= */
.ars-search{
  display:flex; gap:0; max-width:620px; margin-bottom:var(--s3);
  background:var(--paper); border:1px solid var(--rule); border-bottom:2px solid var(--ink);
  transition:border-color .2s var(--ease);
}
.ars-search:focus-within{ border-color:var(--stamp); }
.ars-search input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink); outline:none;
  font-family:var(--body); font-size:16px; padding:12px 14px;
}
.ars-search input::placeholder{ color:var(--ink-3); }
.ars-search .btn{ flex:none; border-radius:0; margin:0; }

/* service tabs + category chips */
.ars-tabs{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--rule); }
.ars-tabs::-webkit-scrollbar{ display:none; }
.ars-tab{
  flex:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 16px; margin-bottom:-1px; background:transparent; border:0; border-bottom:2px solid transparent;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.ars-tab:hover{ color:var(--ink); }
.ars-tab[aria-pressed="true"]{ color:var(--stamp); border-bottom-color:var(--stamp); }
.ars-tab:focus-visible, .ars-chip:focus-visible{ outline:2px solid var(--stamp); outline-offset:-2px; }

.ars-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s2); }
.ars-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; line-height:1.2;
  padding:7px 11px; border:1px solid var(--rule); background:var(--paper); color:var(--ink-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.ars-chip:hover{ border-color:var(--ink); color:var(--ink); }
.ars-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.ars-n{
  font-variant-numeric:tabular-nums; font-size:10px; padding:1px 6px; min-width:20px; text-align:center;
  background:var(--paper-2); color:var(--ink-3); border-radius:999px;
}
.ars-chip[aria-pressed="true"] .ars-n, .ars-tab[aria-pressed="true"] .ars-n{ background:var(--stamp); color:var(--stamp-ink); }

.ars-status{ margin:var(--s2) 0 0; min-height:1.5em; color:var(--ink-3); }

/* grid of compact cards */
.ars-grid{
  list-style:none; margin:var(--s2) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s2);
}
.ars-grid[aria-busy="true"]{ opacity:.55; transition:opacity .2s var(--ease); }
.ars-cell{ display:flex; min-width:0; }
.ars-card{
  flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--paper); border:1px solid var(--rule-soft); color:var(--ink); text-decoration:none;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ars-card:hover, .ars-card:focus-visible{ border-color:var(--stamp); transform:translateY(-3px); box-shadow:0 12px 26px -16px rgba(0,0,0,.45); }
.ars-card:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; }
.ars-img{ position:relative; aspect-ratio:16/10; background:var(--paper-2); overflow:hidden; }
.ars-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.ars-card:hover .ars-img img{ transform:scale(1.04); }
.ars-ph{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:30px; letter-spacing:.08em; color:var(--rule); }
.ars-body{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; flex:1; }
.ars-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stamp); }
.ars-name{ font-family:var(--display); font-size:18px; line-height:1.2; margin:0; overflow-wrap:anywhere; }
.ars-st{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
}
.ars-st::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--state-2); }
.ars-st.is-in-service::before{ background:var(--stamp); }
.ars-st.is-retired::before{ background:var(--rule); }
.ars-empty{ grid-column:1/-1; padding:var(--s3); background:var(--paper); color:var(--ink-2); }
.ars-all{ margin-top:var(--s3); }

@media (max-width:520px){
  .ars-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ars-body{ padding:10px 10px 12px; }
  .ars-name{ font-size:15.5px; }
  .ars-ph{ font-size:22px; }
  .ars-search .btn{ padding-inline:12px; }
}