:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: var(--nav-h) minmax(0, 1fr);
  background: var(--mm-bg);
  color: var(--mm-ink);
  font: 12px/1.5 var(--mm-font-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select { font: inherit; }
kbd {
  padding: 0 5px;
  border: 1px solid var(--mm-rule);
  border-radius: 4px;
  color: var(--mm-ink-muted);
  font: 10px/1.5 var(--mm-font-mono);
  letter-spacing: .05em;
}
.sep { color: var(--mm-ink-faint); }

/* --- Control column ----------------------------------------------------
   Sections are hairline-separated, never carded: a mono eyebrow, the
   controls, then a mono note. Olive fill means on, a hairline means off. */

aside {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 14px 24px;
  background: var(--mm-bg);
  border-right: 1px solid var(--mm-rule);
  scrollbar-width: thin;
  scrollbar-color: var(--mm-rule-strong) transparent;
}
.inspector-title {
  order: -3;
  margin: 0 0 10px;
  color: var(--mm-accent-soft);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#current { order: -3; }
.panel { padding: 12px 0; border-top: 1px solid var(--mm-rule); }
.panel[hidden] { display: none; }
.panel-title {
  margin: 0 0 10px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.note {
  margin: 8px 0 0;
  color: var(--mm-ink-muted);
  font-size: 10px;
  line-height: 1.5;
}

.field {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.field + .field, .toggle + .field { margin-top: 8px; }
.field > span {
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
select.select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 6px 24px 6px 8px;
  background: var(--mm-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 9px 9px;
  border: 1px solid var(--mm-rule);
  border-radius: 2px;
  color: var(--mm-ink);
  font-size: 11px;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s ease;
}
select.select:hover { border-color: var(--mm-rule-strong); }
select.select:focus-visible { border-color: var(--mm-ink); outline: none; }
select.select:disabled { color: var(--mm-ink-muted); cursor: default; }
select option, select optgroup { background: var(--mm-bg); color: var(--mm-ink); }

.callout {
  margin-top: 10px;
  padding: 6px 10px;
  border-left: 2px solid var(--mm-accent);
  background: var(--mm-bg-soft);
  color: var(--mm-ink-soft);
  font-size: 10.5px;
  line-height: 1.5;
}
.callout:empty { display: none; }
.callout b { color: var(--mm-ink); font-weight: 400; }
.tone-ok { color: var(--mm-accent-soft); }
.tone-warn { color: var(--mm-load-busy); }

.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  color: var(--mm-ink-soft);
  font-size: 11px;
  cursor: pointer;
}
.toggle input,
.facet label input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.toggle input:hover,
.facet label input:hover { border-color: var(--mm-ink-muted); }
.toggle input:checked,
.facet label input:checked { background: var(--mm-accent); border-color: var(--mm-accent); }
.toggle input:focus-visible,
.facet label input:focus-visible { outline: 1px solid var(--mm-ink); outline-offset: 2px; }
.toggle input:checked + span { color: var(--mm-ink); }
.toggle:has(input:disabled) { color: var(--mm-ink-faint); cursor: default; }
.toggle input:disabled { opacity: .5; cursor: default; }

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--mm-ink-soft);
  font-size: 10.5px;
  list-style: none;
  cursor: pointer;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.5 7 5 3.5 8.5' fill='none' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .15s ease;
}
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure > summary:hover { color: var(--mm-ink); }
.disclosure > summary:focus-visible { outline: 1px solid var(--mm-ink-muted); outline-offset: 2px; }
.disclosure-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 0 3px;
  padding: 2px 0 0 14px;
  border-left: 1px solid var(--mm-rule);
}

/* One slider look everywhere: a 3px olive-filled track and a hairline
   thumb. --fill is kept in step by syncRange(). */
input.range {
  --fill: 50%;
  --range-fill: var(--mm-accent);
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 15px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input.range.is-busy { --range-fill: var(--mm-load-busy); }
input.range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--range-fill), var(--range-fill)) 0 0 / var(--fill) 100% no-repeat, var(--mm-bg-mute);
}
input.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 13px;
  margin-top: -5px;
  background: var(--mm-ink);
  border: 0;
  border-radius: 0;
}
input.range::-moz-range-track { height: 3px; border-radius: 2px; background: var(--mm-bg-mute); }
input.range::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--range-fill); }
input.range::-moz-range-thumb { width: 3px; height: 13px; background: var(--mm-ink); border: 0; border-radius: 0; }
input.range:focus-visible { outline: 1px solid var(--mm-ink-muted); outline-offset: 3px; }
.range-row { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; }
.range-row[hidden] { display: none; }
.range-row output {
  min-width: 46px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Current model + armoury CTA */
.side-allied { --side-tint: var(--mm-success); }
.side-axis { --side-tint: var(--mm-kill); }
.side-mixed { --side-tint: var(--mm-kd-low); }
.side-none { --side-tint: var(--mm-rule); }

#current-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--mm-rule);
  border-top: 2px solid var(--side-tint, var(--mm-rule));
  border-radius: 2px;
}
#current-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--mm-stage);
}
#current-thumb[hidden] { display: none; }
.current-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#current-name,
#current-meta,
#current-side { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#current-name { color: var(--mm-ink); font-size: 13px; letter-spacing: .02em; }
/* Tighter than the house .06em so "Land vehicle · 6.29 m · 5,614 tris"
   fits the 320px column on one line. */
#current-meta { color: var(--mm-ink-muted); font-size: 10px; letter-spacing: .01em; }
#current-side {
  color: var(--side-tint, var(--mm-ink-muted));
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#current-side:empty { display: none; }
button.browse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--mm-highlight);
  border: 0;
  border-radius: 2px;
  color: var(--mm-highlight-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease;
}
button.browse:hover { background: var(--mm-accent); }
button.browse:focus-visible { outline: 1px solid var(--mm-ink); outline-offset: 2px; }
button.browse kbd { border-color: rgba(0, 0, 0, .45); color: var(--mm-highlight-ink); }

/* Armour */
.weapon-summary {
  margin-top: 8px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  line-height: 1.5;
}
.weapon-summary:empty { display: none; }
.weapon-summary strong { color: var(--mm-ink-soft); font-weight: 400; }
#collision-legend { margin-top: 10px; }
#collision-legend[hidden] { display: none; }
/* Critical-red to faint: the same five stops the collision meshes are
   painted with (vulnerabilityStops). There is no blue in the system. */
.ramp { display: flex; gap: 2px; }
.ramp span { flex: 1; height: 6px; }
.ramp span:nth-child(1) { background: var(--mm-kill); }
.ramp span:nth-child(2) { background: var(--mm-load-busy); }
.ramp span:nth-child(3) { background: var(--mm-kd-low); }
.ramp span:nth-child(4) { background: var(--mm-accent); }
.ramp span:nth-child(5) { background: var(--mm-kd-poor); }
.ramp-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: var(--mm-ink-muted);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#legend-materials { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.material-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, opacity .12s ease;
}
.material-chip:hover,
.material-chip:focus-visible { border-color: var(--chip); color: var(--mm-ink); outline: none; }
.material-chip[aria-pressed="true"] {
  border-color: var(--chip);
  box-shadow: inset 0 -2px var(--chip);
  color: var(--mm-ink);
}
#legend-materials[data-filtered="true"] .material-chip:not([aria-pressed="true"]) { opacity: .35; }
.material-chip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--chip); }
.material-chip small { color: var(--mm-ink); font-size: 9.5px; }
.material-chip[data-immune="true"] { border-style: dashed; }
.legend-hint { margin-top: 6px; color: var(--mm-ink-muted); font-size: 9.5px; }

#hit-details {
  margin-top: 10px;
  padding: 6px 10px 8px;
  border-left: 2px solid var(--mm-load-busy);
  background: var(--mm-bg-soft);
  color: var(--mm-ink-soft);
  font-size: 10.5px;
}
.hit-region { color: var(--mm-ink); font-size: 12px; }
.hit-class {
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.impact-reading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 4px;
}
.impact-reading strong {
  color: var(--mm-ink);
  font: 300 28px/1 var(--mm-font-display);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.impact-reading span {
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-align: right;
  text-transform: uppercase;
}
.damage-basis { color: var(--mm-ink-muted); font-size: 10px; }
.hp-loss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--mm-rule);
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hp-loss span:nth-child(even) {
  color: var(--mm-load-busy);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hp-loss.hp-loss-known span:nth-child(even) { color: var(--mm-ink); }
.hp-loss.hp-loss-lethal span:nth-child(even) { color: var(--mm-kill); }
.hp-loss.hp-loss-immune span:nth-child(even) { color: var(--mm-ink-muted); }
#hit-details .formula { margin-top: 7px; color: var(--mm-ink-muted); font-size: 10px; line-height: 1.5; }
.angle-control, .distance-control { margin-top: 10px; }
.angle-control label,
.distance-control label {
  display: flex;
  justify-content: space-between;
  color: var(--mm-ink-muted);
  font-size: 10px;
}
.angle-control output,
.distance-control output { color: var(--mm-ink); font-variant-numeric: tabular-nums; }
.hit-technical { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--mm-rule); }
.hit-technical .stat:first-of-type { margin-top: 6px; }
.stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-size: 10.5px;
}
.stat span:first-child { color: var(--mm-ink-muted); white-space: nowrap; }
.stat span:last-child {
  min-width: 0;
  color: var(--mm-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Model */
.model-details { margin-top: 9px; }
.detail-label {
  margin: 12px 0 5px;
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
ul.missing { margin: 0; padding-left: 14px; color: var(--mm-kill); font-size: 10.5px; }
ul.missing li.none { color: var(--mm-accent-soft); list-style: none; margin-left: -14px; }
#tree {
  overflow-x: auto;
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  line-height: 1.7;
  white-space: pre;
}
#tree b { color: var(--mm-ink-soft); font-weight: 400; }

/* --- Stage --------------------------------------------------------------
   The canvas owns `main`; the hints strip and crew console are rows under
   it rather than overlays, so the renderer's clientHeight is the visible
   viewport and nothing sits over the model or the raycast. */

.stage {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--mm-stage);
}
/* The canvas is taken out of flow: at its attribute size it would otherwise
   prop `main` open, and a viewport that only ever grows can never shrink back
   (setSize(w, h, false) deliberately leaves the element's style alone). */
main { position: relative; flex: 1; min-height: 0; overflow: hidden; }
main > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
canvas { display: block; transition: opacity 120ms ease; }
main[data-load-state="loading"] canvas { opacity: .55; }
main[data-collision="true"] canvas { cursor: crosshair; }
main[data-angle-drag="true"] canvas { cursor: grabbing; }

#crumb {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 340px);
  overflow: hidden;
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
#crumb[hidden] { display: none; }
#crumb b { color: var(--mm-ink); font-weight: 400; }
#banner {
  position: absolute;
  top: 36px;
  left: 14px;
  z-index: 2;
  max-width: min(520px, calc(100% - 28px));
  padding: 6px 10px;
  border-left: 2px solid var(--mm-load-busy);
  background: var(--mm-bg);
  color: var(--mm-ink-soft);
  font-size: 10.5px;
  line-height: 1.5;
}
#banner[hidden] { display: none; }

#hints {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 30px;
  padding: 0 16px;
  overflow: hidden;
  background: var(--mm-bg);
  border-top: 1px solid var(--mm-rule);
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Crew console ---------------------------------------------------------
   One station per seat. What a seat aims with, what it fires and where its
   camera sits are the same station, in the order you would use them. */

.crew { flex: none; min-width: 0; background: var(--mm-bg); border-top: 1px solid var(--mm-rule); }
.crew[hidden] { display: none; }
.crew-head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  padding: 0 10px 0 16px;
}
.crew[data-collapsed="false"] .crew-head { border-bottom: 1px solid var(--mm-rule); }
.crew-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--mm-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.crew-title::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--mm-accent);
}
.crew-count {
  flex: none;
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.crew-keys {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.crew-keys span { display: inline-flex; align-items: center; gap: 5px; }
.crew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 24px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink);
  font-size: 10.5px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.crew-btn[hidden] { display: none; }
.crew-btn:hover,
.crew-btn:focus-visible { border-color: var(--mm-ink); outline: none; }
.crew-btn[aria-pressed="true"] {
  background: var(--mm-highlight);
  border-color: var(--mm-highlight);
  color: var(--mm-highlight-ink);
}
.crew-btn svg { width: 12px; height: 12px; flex: none; }
.crew-collapse { width: 26px; padding: 3px 0; color: var(--mm-ink-muted); }
.crew-collapse svg { transition: transform .15s ease; }
.crew[data-collapsed="true"] .crew-collapse svg { transform: rotate(180deg); }
.crew-row {
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mm-rule-strong) transparent;
}
.crew[data-collapsed="true"] .crew-row { display: none; }

.station {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  border-right: 1px solid var(--mm-rule);
}
.station::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: transparent;
  transition: background-color .15s ease;
}
.station[data-active="true"]::before { background: var(--mm-accent); }
.station-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.station-key { flex: none; font-variant-numeric: tabular-nums; }
.station[data-active="true"] .station-key {
  background: var(--mm-accent);
  border-color: var(--mm-accent);
  color: var(--mm-highlight-ink);
}
.station-name {
  flex: none;
  color: var(--mm-ink);
  font: 500 14px/1.2 var(--mm-font-display);
  white-space: nowrap;
}
.station-role {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.station-view { width: 26px; padding: 3px 0; color: var(--mm-ink-muted); }
.station-view[aria-pressed="true"] { color: var(--mm-highlight-ink); }
.station-views { display: flex; flex-wrap: wrap; gap: 6px; }
.station-body { display: flex; align-items: flex-start; gap: 16px; }
.station-controls { display: flex; align-items: flex-start; gap: 14px; }
.station-controls:empty { display: none; }
.station-triggers { display: flex; flex-direction: column; gap: 6px; width: 236px; }
.station-triggers:empty { display: none; }

.instrument { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.instrument-row { display: flex; align-items: flex-start; gap: 10px; }
.instrument-label {
  color: var(--mm-ink-muted);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* `pre`, because readouts are padded to a fixed character count (steady())
   and a collapsed leading space would let the column breathe as values
   change sign or gain a digit. */
.instrument-read {
  color: var(--mm-ink-soft);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
.instrument:focus-within .instrument-read { color: var(--mm-ink); }
.dial,
.elev,
.pad { touch-action: none; outline: none; }
.dial:focus-visible,
.elev:focus-visible,
.pad:focus-visible { box-shadow: 0 0 0 1px var(--mm-ink-muted); }
.dial { width: 84px; height: 84px; border-radius: 50%; cursor: grab; }
.dial.dragging { cursor: grabbing; }
.dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dial-face { fill: var(--mm-bg-soft); stroke: var(--mm-rule-strong); }
.dial-tick { stroke: var(--mm-rule-strong); stroke-width: 1; }
.dial-tick.is-major { stroke: var(--mm-ink-faint); }
.dial-arc { fill: none; stroke: var(--mm-accent); stroke-width: 3; stroke-linecap: butt; }
.dial-hull { fill: none; stroke: var(--mm-ink-faint); stroke-width: 1; }
.dial-needle { stroke: var(--mm-ink); stroke-width: 1.5; stroke-linecap: round; }
.dial-tip { fill: var(--mm-accent-soft); }
.dial-hub { fill: var(--mm-ink); }
.elev-wrap { position: relative; padding-right: 26px; }
.elev {
  position: relative;
  width: 22px;
  height: 84px;
  background: var(--mm-bg-soft);
  border: 1px solid var(--mm-rule);
  cursor: ns-resize;
}
.elev:hover, .elev.dragging { border-color: var(--mm-ink-muted); }
.elev-zero { position: absolute; left: -4px; right: -4px; height: 1px; background: var(--mm-rule-strong); }
.elev-fill { position: absolute; left: 0; right: 0; background: var(--mm-accent); opacity: .55; }
.elev-mark { position: absolute; left: -5px; right: -5px; height: 2px; margin-top: -1px; background: var(--mm-ink); }
.elev-lim {
  position: absolute;
  left: 28px;
  color: var(--mm-ink-muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.elev-lim.is-top { top: 0; }
.elev-lim.is-bottom { bottom: 0; }
.pad {
  position: relative;
  width: 84px;
  height: 84px;
  background:
    linear-gradient(var(--mm-rule), var(--mm-rule)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--mm-rule), var(--mm-rule)) 0 50% / 100% 1px no-repeat,
    var(--mm-bg-soft);
  border: 1px solid var(--mm-rule);
  cursor: crosshair;
}
.pad:hover, .pad.dragging { border-color: var(--mm-ink-muted); }
.pad-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--mm-accent-soft);
  pointer-events: none;
  transition: left .14s ease, top .14s ease;
}
.pad.dragging .pad-knob { transition: none; }
.lever { display: flex; flex-direction: column; gap: 5px; width: 128px; }
.lever-head { display: flex; justify-content: space-between; gap: 8px; }
.seg {
  display: inline-flex;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  overflow: hidden;
}
.seg button {
  padding: 5px 10px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-rule-strong);
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--mm-ink); }
.seg button:focus-visible { outline: 1px solid var(--mm-ink); outline-offset: -1px; }
.seg button[aria-pressed="true"] { background: var(--mm-ink); color: var(--mm-bg); }

/* Triggers borrow the busy-amber load band; held, they fill. */
.trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1px 10px;
  width: 100%;
  padding: 6px 10px 6px 0;
  background: transparent;
  border: 1px solid var(--mm-load-busy);
  border-radius: 2px;
  color: var(--mm-ink);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: background-color .08s ease, color .08s ease;
}
.trigger:hover,
.trigger:focus-visible { background: rgba(197, 162, 58, .1); outline: none; }
.trigger-word {
  grid-row: span 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid rgba(197, 162, 58, .35);
  color: var(--mm-load-busy);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}
.trigger-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.trigger-name span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trigger-kind {
  flex: none;
  padding: 0 4px;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink-muted);
  font-size: 8.5px;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.trigger-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--mm-ink-muted);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trigger-stats { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Space and F fire the active station, so only its triggers show them. */
.station:not([data-active="true"]) .trigger kbd { display: none; }
.trigger[aria-pressed="true"] { background: var(--mm-load-busy); color: var(--mm-highlight-ink); }
.trigger[aria-pressed="true"] .trigger-word { color: var(--mm-highlight-ink); border-right-color: rgba(0, 0, 0, .3); }
.trigger[aria-pressed="true"] .trigger-meta,
.trigger[aria-pressed="true"] .trigger-kind,
.trigger[aria-pressed="true"] kbd { color: var(--mm-highlight-ink); border-color: rgba(0, 0, 0, .35); }
/* Thumbnail shots: nothing over or around the canvas, and no half-faded
   loading state. The nav row goes too, and shoot.mjs gets its square canvas
   back: at the 820x500 shooting viewport the column leaves exactly 500x500,
   and the browse view's scale lineup reads size off a common aspect. */
body.is-portrait { grid-template-rows: 0 minmax(0, 1fr); }
body.is-portrait .shell-nav,
body.is-portrait #hints,
body.is-portrait #crew,
body.is-portrait #crumb,
body.is-portrait #banner,
body.is-portrait .stage-touchpad-toggle,
body.is-portrait #touchpad-disk-wrap { display: none; }
body.is-portrait canvas { opacity: 1; transition: none; }
/* Hiding the bar takes it out of the grid, so auto-placement would pull the
   column and stage up into the collapsed first row. Pin them to the second
   row, which is where they sit in both modes anyway. */
body.is-portrait > aside,
body.is-portrait > .stage { grid-row: 2; }

/* --- Armoury browser ----------------------------------------------------
   The sidebar list does not survive a few hundred models, so picking one is
   its own surface: facets on the left, a layout switch across the top, and
   three ways of looking at the same filtered set. */

#browser {
  position: fixed;
  /* Stops below the shared bar so the feature toggle stays reachable while
     the armoury is open. */
  inset: var(--nav-h) 0 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--mm-bg);
}
#browser[hidden] { display: none; }
.browser-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mm-rule);
}
.browser-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--mm-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.browser-head h2::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--mm-accent);
}
.browser-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 260px;
  max-width: 420px;
  padding: 7px 12px;
  border: 1px solid var(--mm-rule);
  border-radius: 999px;
  color: var(--mm-ink-muted);
  transition: border-color .15s ease;
}
.browser-search:focus-within { border-color: var(--mm-ink); }
.browser-search svg { flex: none; width: 12px; height: 12px; }
#browser-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--mm-ink);
  font: 12.5px var(--mm-font-display);
}
#browser-search::placeholder { color: var(--mm-ink-muted); }
#browser-count {
  color: var(--mm-ink-muted);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.browser-head .spacer { flex: 1; }
.browser-head select.select { width: auto; }
.layout-switch {
  display: inline-flex;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  overflow: hidden;
}
.layout-switch button {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--mm-rule-strong);
  color: var(--mm-ink-muted);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.layout-switch button:last-child { border-right: 0; }
.layout-switch button:hover { color: var(--mm-ink); }
.layout-switch button:focus-visible { outline: 1px solid var(--mm-ink); outline-offset: -1px; }
.layout-switch button[aria-pressed="true"] { background: var(--mm-ink); color: var(--mm-bg); }
button.browser-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button.browser-close:hover,
button.browser-close:focus-visible {
  background: var(--mm-accent);
  border-color: var(--mm-accent);
  color: var(--mm-highlight-ink);
  outline: none;
}
button.browser-close:hover kbd,
button.browser-close:focus-visible kbd { border-color: rgba(0, 0, 0, .4); color: var(--mm-highlight-ink); }

#facets {
  overflow-y: auto;
  padding: 14px 14px 40px;
  border-right: 1px solid var(--mm-rule);
  scrollbar-width: thin;
  scrollbar-color: var(--mm-rule-strong) transparent;
}
.facet { margin-bottom: 16px; }
.facet > h3 {
  margin: 0 0 6px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.facet label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--mm-ink-soft);
  font-size: 11px;
  cursor: pointer;
}
.facet label.is-empty { opacity: .32; }
.facet label .facet-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet label .facet-count { color: var(--mm-ink-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.facet label input:checked + .facet-name { color: var(--mm-ink); }
.facet-more {
  margin-top: 2px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--mm-accent-soft);
  font-size: 10px;
  cursor: pointer;
}
.facet-more:hover { color: var(--mm-ink); }
#facet-reset {
  width: 100%;
  margin-bottom: 14px;
  padding: 6px;
  background: transparent;
  border: 1px dashed var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
#facet-reset:hover:not(:disabled) { border-color: var(--mm-kill); color: var(--mm-kill); }
#facet-reset:disabled { opacity: .4; cursor: default; }

#browser-body { overflow-y: auto; padding: 16px 16px 48px; }
.browser-empty {
  padding: 48px 16px;
  color: var(--mm-ink-muted);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

/* Grid ---------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
button.card {
  display: grid;
  /* Both of these matter: min-width keeps the button from refusing to shrink
     below its content, and the explicit column keeps the card's own grid from
     sizing itself to the widest text and overflowing the box it just fit. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--mm-bg);
  border: 1px solid var(--mm-rule);
  border-top: 2px solid var(--side-tint, var(--mm-rule));
  border-radius: 2px;
  color: var(--mm-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
button.card:hover,
button.card:focus-visible {
  border-color: var(--mm-ink-muted);
  border-top-color: var(--side-tint, var(--mm-ink-muted));
  outline: none;
}
button.card[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--mm-accent); }
.card-art {
  position: relative;
  /* Square, to match the thumbnails — a 4:3 well would letterbox them. */
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--mm-stage);
}
.card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-art .no-art {
  color: var(--mm-ink-faint);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Stacked, not wrapped: two badges side by side overflow a narrow card and
   break mid-word. */
.card-flags {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.card-flag {
  padding: 1px 5px;
  background: rgba(19, 19, 19, .88);
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink-soft);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-flag.is-warn { border-color: var(--mm-load-busy); color: var(--mm-load-busy); }
.card-body { display: grid; gap: 3px; min-width: 0; padding: 8px 9px 9px; }
.card-name {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.card-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub .is-side { color: var(--side-tint, var(--mm-ink-muted)); }
.side-none .card-sub .is-side { color: var(--mm-ink-muted); }

/* Scale lineup -------------------------------------------------------- */
.scale-note { margin-bottom: 12px; color: var(--mm-ink-muted); font-size: 10px; line-height: 1.6; }
.scale-rule {
  position: relative;
  height: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--mm-rule-strong);
}
.scale-rule span {
  position: absolute;
  bottom: 0;
  padding-left: 4px;
  border-left: 1px solid var(--mm-rule-strong);
  color: var(--mm-ink-muted);
  font-size: 9px;
  line-height: 18px;
  white-space: nowrap;
}
.scale-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--mm-rule);
}
.scale-label { padding-bottom: 4px; border-left: 2px solid var(--side-tint, var(--mm-rule)); padding-left: 8px; }
.scale-label .scale-name { font-size: 11px; }
.scale-label .scale-dim { color: var(--mm-ink-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
/* Square, because the thumbnails are square: any other aspect would letterbox
   inside object-fit and silently shrink the model off the shared scale. */
/* The square frame is what carries the scale, but a model only fills a band
   across its middle. The button is a window onto that band — same fraction of
   every frame, so cropping costs nothing in accuracy and buys back the dead
   space above and below. */
button.scale-figure {
  display: block;
  justify-self: start;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 0;
  line-height: 0;
  cursor: pointer;
}
button.scale-figure img { display: block; object-fit: contain; }
button.scale-figure:hover,
button.scale-figure:focus-visible { outline: 1px solid var(--mm-ink-muted); }
button.scale-figure.is-clamped { outline: 1px dotted var(--mm-load-busy); }
button.scale-figure .scale-box {
  width: 100%;
  height: 100%;
  background: var(--mm-bg-soft);
  border: 1px solid var(--side-tint, var(--mm-rule));
}
.scale-lane { min-width: 0; }

/* Scatter ------------------------------------------------------------- */
.plot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.plot-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mm-ink-muted);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.plot-controls select.select { width: auto; letter-spacing: 0; text-transform: none; }
.plot-wrap { position: relative; }
.plot-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.plot-wrap .axis-line { stroke: var(--mm-rule-strong); }
.plot-wrap .tick-line { stroke: var(--mm-bg-mute); }
.plot-wrap text { fill: var(--mm-ink-muted); font: 10px var(--mm-font-mono); }
.plot-wrap .axis-title { fill: var(--mm-accent-soft); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.plot-dot { cursor: pointer; outline: none; }
.plot-dot circle {
  fill: var(--side-tint, var(--mm-ink-muted));
  fill-opacity: .45;
  stroke: var(--side-tint, var(--mm-ink-muted));
}
.plot-dot.side-none circle { fill: var(--mm-ink-muted); stroke: var(--mm-ink-muted); }
.plot-dot:hover circle,
.plot-dot:focus-visible circle { fill-opacity: .9; stroke: var(--mm-ink); }
.plot-dot text { fill: var(--mm-ink-soft); font-size: 9px; pointer-events: none; }
.plot-dot:hover text { fill: var(--mm-ink); }
/* Labels that would have landed on a neighbour: still there, revealed on
   hover, so a dense cluster stays legible one dot at a time. */
.plot-dot text.is-crowded { opacity: 0; }
.plot-dot:hover text.is-crowded,
.plot-dot:focus-visible text.is-crowded { opacity: 1; }
.plot-unplotted { margin-top: 10px; color: var(--mm-ink-muted); font-size: 10px; line-height: 1.6; }

/* Inspector header & collapse controls */
.inspector-header {
  order: -4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.inspector-title {
  margin: 0;
  color: var(--mm-accent-soft);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.controls-collapse-btn {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--mm-bg-soft);
  border: 1px solid var(--mm-rule);
  border-radius: 2px;
  color: var(--mm-ink-muted);
  font: 10px var(--mm-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.controls-collapse-btn:hover,
.controls-collapse-btn:focus-visible {
  color: var(--mm-ink);
  border-color: var(--mm-rule-strong);
  outline: none;
}

.stage-controls-fab {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(19, 19, 19, 0.9);
  border: 1px solid var(--mm-rule-strong);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mm-ink);
  font: 11px var(--mm-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: background-color .15s ease, border-color .15s ease;
}
.stage-controls-fab:hover,
.stage-controls-fab:focus-visible {
  background: var(--mm-bg-soft);
  border-color: var(--mm-accent);
  outline: none;
}
.stage-controls-fab[hidden] { display: none !important; }

/* Touchpad virtual controller */
.stage-touchpad-toggle {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(19, 19, 19, 0.9);
  border: 1px solid var(--mm-rule-strong);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mm-ink);
  font: 11px var(--mm-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  touch-action: manipulation;
}
.stage-touchpad-toggle:hover,
.stage-touchpad-toggle:focus-visible {
  background: var(--mm-bg-soft);
  border-color: var(--mm-accent);
  outline: none;
}
.stage-touchpad-toggle[aria-pressed="true"] {
  background: var(--mm-bg-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.stage-touchpad-toggle[hidden] { display: none !important; }

.touchpad-disk-wrap {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.touchpad-disk-wrap[hidden] { display: none !important; }

.touchpad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 136px;
  gap: 6px;
}
.touchpad-station-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  background: rgba(19, 19, 19, 0.92);
  border: 1px solid var(--mm-rule-strong);
  border-radius: 999px;
  color: var(--mm-ink);
  font: 10px var(--mm-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .15s ease;
}
.touchpad-station-btn:hover {
  border-color: var(--accent);
}
.touchpad-station-btn svg {
  flex: none;
  color: var(--accent);
}
.touchpad-station-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.touchpad-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(19, 19, 19, 0.92);
  border: 1px solid var(--mm-rule-strong);
  border-radius: 50%;
  color: var(--mm-ink-muted);
  font: 14px sans-serif;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color .15s ease, border-color .15s ease;
}
.touchpad-close-btn:hover {
  color: var(--mm-ink);
  border-color: var(--accent);
}

.touchpad-disk {
  position: relative;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(32, 30, 26, 0.88) 0%, rgba(14, 13, 11, 0.94) 100%);
  border: 1.5px solid var(--mm-rule-strong);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: none;
  cursor: crosshair;
}
.touchpad-disk.is-active {
  border-color: var(--accent);
}
.touchpad-cross-h,
.touchpad-cross-v {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.touchpad-cross-h {
  left: 12px;
  right: 12px;
  top: calc(50% - 0.5px);
  height: 1px;
}
.touchpad-cross-v {
  top: 12px;
  bottom: 12px;
  left: calc(50% - 0.5px);
  width: 1px;
}

.touchpad-puck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #2c2925 0%, #151412 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .08s ease-out, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.touchpad-disk.is-dragging .touchpad-puck {
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.touchpad-puck-label {
  font: 10px var(--mm-font-mono);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mm-ink);
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.touchpad-puck.is-firing {
  background: radial-gradient(circle at 40% 35%, #eb5e28 0%, #a82000 100%);
  border-color: #ff8a65;
  box-shadow: 0 0 18px rgba(235, 94, 40, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.touchpad-puck.is-firing .touchpad-puck-label {
  color: #fff;
}

@media (max-width: 360px) {
  .touchpad-disk { width: 120px; height: 120px; }
  .touchpad-head { width: 120px; }
  .touchpad-puck { width: 48px; height: 48px; }
}

/* Armoury filter toggle & count badge */
.browser-filter-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--mm-rule-strong);
  border-radius: 2px;
  color: var(--mm-ink-muted);
  font: 10.5px var(--mm-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.browser-filter-toggle:hover {
  color: var(--mm-ink);
  border-color: var(--mm-ink-muted);
}
.browser-filter-toggle[aria-expanded="true"] {
  background: var(--mm-accent);
  border-color: var(--mm-accent);
  color: var(--mm-highlight-ink);
}
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--mm-highlight);
  color: var(--mm-highlight-ink);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
}
.browser-filter-toggle[aria-expanded="true"] .filter-count-badge {
  background: var(--mm-highlight-ink);
  color: var(--mm-accent-soft);
}
.filter-count-badge[hidden] { display: none !important; }
.facet-done-btn {
  display: none;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  background: var(--mm-accent);
  border: 0;
  border-radius: 2px;
  color: var(--mm-highlight-ink);
  font: 11px var(--mm-font-mono);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Narrow screens: model at top, controls at bottom, with full collapse */
@media (max-width: 720px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--nav-h) minmax(0, 46vh) minmax(0, 1fr);
    transition: grid-template-rows .2s ease;
  }
  body.controls-collapsed {
    grid-template-rows: var(--nav-h) minmax(0, 1fr) 0px;
  }
  body.controls-collapsed aside,
  body.controls-collapsed #crew {
    display: none;
  }
  body.controls-collapsed .stage {
    grid-row: 2;
    height: 100%;
  }
  aside {
    grid-row: 3;
    border-right: 0;
    border-top: 1px solid var(--mm-rule);
    padding: 10px 12px 20px;
  }
  .panel {
    padding: 8px 0;
  }
  .panel-title {
    margin: 0 0 6px;
  }
  #current-card {
    padding: 6px 8px;
    margin-bottom: 6px;
  }
  #browse-open {
    padding: 6px 10px;
  }
  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .field-grid .field {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    margin-top: 0 !important;
  }
  .toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }
  .stage { grid-row: 2; position: relative; }
  .controls-collapse-btn { display: inline-flex; }
  #crumb { max-width: calc(100% - 28px); }
  .crew-keys, #hints { display: none; }

  /* Armoury browser modal on mobile */
  .browser-filter-toggle { display: inline-flex; }
  #browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .browser-head {
    padding: 8px 10px;
    gap: 8px;
  }
  .browser-search {
    flex: 1 1 180px;
    padding: 5px 10px;
  }
  /* Filters optional and hidden unless selected */
  #browser:not(.facets-open) #facets {
    display: none;
  }
  #browser.facets-open {
    grid-template-rows: auto minmax(0, 44vh) minmax(0, 1fr);
  }
  #browser.facets-open #facets {
    display: block;
    max-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid var(--mm-rule);
    background: var(--mm-bg-soft);
    padding: 10px 12px 20px;
  }
  .facet-done-btn { display: block; }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
}