/* Vehicle damage calculator — field-manual theme. Paper, ink, one red. */
.veh-section { max-width: 1280px; }
.veh-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem; border-bottom: 3px double var(--ink); padding-bottom: .8rem;
}
.veh-head .lede { margin-bottom: .2rem; }
.veh-actions { display: flex; gap: .5rem; padding-bottom: .2rem; }

.veh-grid {
  display: grid;
  grid-template-columns: 280px minmax(320px, 1fr) 300px;
  gap: .8rem;
  align-items: start;
  margin-bottom: 1.6rem;
}
@media (max-width: 1100px) { .veh-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .veh-grid { grid-template-columns: 1fr; } }

.veh-pick .hud-head + .hud-body { border-bottom: 1px solid var(--ink); }
.veh-pick .hud-body:last-child { border-bottom: 0; }

.veh-label {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: .3rem;
}
.veh-select {
  width: 100%; padding: .5rem .55rem; background: #fff; color: var(--ink);
  border: 1px solid var(--ink); font: inherit; font-size: .95rem; margin-bottom: .7rem;
}
.veh-select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.veh-groups, .veh-muni-groups { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .65rem; }
.veh-chip {
  font-family: var(--mono); font-weight: 700; font-size: .68rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: .38rem .55rem; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); cursor: pointer;
}
.veh-chip:hover { background: var(--ink); color: var(--paper); }
.veh-chip.on { color: #FBF6EA; background: var(--red); border-color: var(--red); }

.veh-muni-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--rule-2); border: 1px solid var(--rule); }
.veh-muni-stats div { background: #fff; padding: .4rem .5rem; }
.veh-muni-stats dt { font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.veh-muni-stats dd { margin: .1rem 0 0; font-family: var(--mono); font-weight: 700; font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- component drawing: figure plate ---------- */
.veh-silhouette { margin: .8rem .8rem .4rem; background: #fff; border: 1px solid var(--ink); padding: .4rem; }
.veh-schem { display: block; width: 100%; height: auto; }
.veh-schem .part {
  fill: url(#veh-hatch);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: pointer;
}
.veh-schem .part:hover { fill: url(#veh-hatch-hi); }
.veh-schem .part.active, .veh-schem .part.active:hover { fill: var(--red); stroke: var(--ink); stroke-width: 2; }
.veh-schem .part.dead, .veh-schem .part.dead:hover { fill: var(--rule); stroke: var(--ink-2); stroke-dasharray: 4 3; cursor: default; }
.veh-schem .draw { fill: none; stroke: var(--ink); stroke-width: 1.2; pointer-events: none; }
.veh-schem .draw.fill { fill: #fff; }
.veh-schem .ground { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.veh-schem .callout { pointer-events: none; }
.veh-schem .callout circle { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.veh-schem .callout.active circle { fill: var(--ink); }
.veh-schem .callout text { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.veh-schem .callout.active text { fill: var(--paper); }
.veh-schem .callout .pct { font-size: 10px; font-weight: 400; fill: var(--ink-2); }
.veh-schem .callout.dead .pct { fill: var(--bad); }
.veh-schem .leader { stroke: var(--ink-2); stroke-width: 1; fill: none; pointer-events: none; }
.veh-schem .cap { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; fill: var(--ink-2); }

.veh-zones { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .8rem .6rem; }
.veh-zone-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-weight: 700; font-size: .7rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .6rem; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); cursor: pointer;
}
.veh-zone-btn .no { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border: 1px solid var(--ink); border-radius: 50%; font-size: .62rem; }
.veh-zone-btn:hover { background: var(--ink); color: var(--paper); }
.veh-zone-btn:hover .no { border-color: var(--paper); }
.veh-zone-btn.on { border-color: var(--red); color: var(--red); background: var(--plate); }
.veh-zone-btn.on .no { background: var(--red); color: #FBF6EA; border-color: var(--red); }
.veh-zone-btn:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.veh-note { padding-bottom: .7rem; }

.veh-badge {
  font-family: var(--mono); font-weight: 700; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .15rem .45rem; border: 1px solid var(--ink); color: var(--ink); background: #fff;
}
.veh-badge.bad { border-color: var(--bad); background: var(--bad); color: #FBF6EA; }
.veh-badge.warn { border-color: var(--bad); color: var(--bad); background: #fff; }

.veh-bars { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .9rem; }
.veh-bar-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; }
.veh-bar-row .name { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.veh-bar-row .hp { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--ink); }
.veh-bar-track { grid-column: 1 / -1; height: 8px; background: #fff; border: 1px solid var(--rule); }
.veh-bar-fill { height: 100%; background: var(--ink); width: 100%; transition: width .15s, background .15s; }
.veh-bar-fill.mid { background: var(--ink-3); }
.veh-bar-fill.low { background: var(--bad); }

.veh-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; min-height: 1.4rem; }
.veh-sub { margin: 0 0 .4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: .25rem; }
.veh-history { margin: 0; padding: 0 0 0 1.1rem; color: var(--ink-2); font-size: .88rem; max-height: 220px; overflow: auto; }
.veh-history li { margin-bottom: .35rem; }
.veh-history strong { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: .82rem; }