/*
  14-loadout.css — v41.19 the arc deck grid

  Left and Right are 4 decks x 10 positions. Rendered as a list that was 40
  rows tall and grew with every weapon; rendered as a grid it is 10 rows tall
  and stays 10 rows whether you have 6 weapons or 40.

  Column budget: on a 360px phone, minus page padding and the 20px row-number
  gutter, four columns get roughly 74px each. Everything below is sized to
  survive that — two short stacked lines, no wrapping, no ellipsis on the
  common weapon names.

  Unlayered, loaded after styles.css. No !important.
*/

.arc-grid {
  display: grid;
  grid-template-columns: 20px repeat(var(--decks, 4), minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
  margin-bottom: var(--s4);
}

.arc-grid-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.arc-grid-corner { min-height: 20px; }

.arc-grid-num {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3px;
  font-size: .64rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #b9a482;
}

/* ==========================================================
   Cells
   ========================================================== */
.arc-cell {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 4px 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--chart);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.arc-cell:active { transform: translateY(1px); }

.arc-cell-slot {
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.1;
}
.arc-cell-name {
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-cell-name small {
  display: block;
  font-size: .58rem;
  font-weight: 650;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-cell-state {
  font-size: .55rem;
  line-height: 1.1;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* State is spelled out in .arc-cell-state on every cell; these tints are a
   second signal, never the only one. */
.arc-cell.is-manned { background: var(--chart); }
.arc-cell.is-unmanned {
  background: color-mix(in srgb, var(--warn) 14%, var(--chart));
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line-strong));
}
.arc-cell.is-unmanned .arc-cell-state { color: #8a5310; font-weight: 750; }
.arc-cell.is-ready {
  background: color-mix(in srgb, var(--lagoon) 12%, var(--chart));
  border-color: color-mix(in srgb, var(--lagoon) 42%, var(--line-strong));
}
.arc-cell.is-ready .arc-cell-state { color: var(--lagoon-deep); font-weight: 750; }

.arc-cell.is-empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(232, 192, 105, .30);
}
.arc-cell.is-empty .arc-cell-slot,
.arc-cell.is-empty .arc-cell-state { color: #b9a482; }
.arc-cell.is-empty .arc-cell-name { color: #c2ad84; font-size: .9rem; font-weight: 700; }
.arc-cell.is-empty:hover { background: rgba(232, 192, 105, .08); border-color: rgba(232, 192, 105, .5); }

/* A deck that simply has no slot at this position — not an empty slot you
   could equip, so it must not look tappable. */
.arc-cell.is-absent { border: 0; background: none; min-height: 46px; }

/* ==========================================================
   Arc summary + type rollup
   ========================================================== */
.arc-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--s3);
  font-size: .78rem;
  color: #cdbb95;
}
.arc-summary b { color: var(--brass-bright); font-weight: 800; font-variant-numeric: tabular-nums; }
.arc-summary .arc-dot { color: #7d6b4e; }
.arc-summary .arc-warn { color: #e5a752; font-weight: 700; }

.section-title.sub h2 { font-size: var(--t2); }
.type-row { cursor: default; }
.type-row .type-count { color: var(--muted); font-weight: 800; }

@media (max-width: 340px) {
  .arc-cell { min-height: 48px; padding: 4px 2px; }
  .arc-cell-name { font-size: .62rem; }
  .arc-grid { gap: 3px; }
}