/* Instrument layout for the full-bleed armor viewer. */
body.armor-page[data-armor-design="instrument"] .al-main {
  --panel: #0c1516;
  --surface-2: #192629;
  --border: #3a4b4c;
  --line: #354445;
  --text: #f1f3ed;
  --text-dim: #bfcbc6;
  --text-faint: #8fa4a0;
  --cyan: #91d5c4;
  --amber: #f0c176;
}

body.armor-page[data-armor-design="instrument"] .al-hero .page-hero-inner {
  max-width: none;
  padding: 10px 22px;
  gap: 18px;
}
body.armor-page[data-armor-design="instrument"] .al-hero .page-hero-title {
  font-size: 16px;
  font-weight: 650;
}
body.armor-page[data-armor-design="instrument"] .al-hero .page-hero-crumb {
  font-size: 10px;
  color: #8fa4a0;
}
body.armor-page[data-armor-design="instrument"] .al-hero .al-hero-tank { color: #f0c176; }

body.armor-page[data-armor-design="instrument"] .al-main { padding: 0; max-width: none; }
body.armor-page[data-armor-design="instrument"] .al-page {
  max-width: none;
  margin: 0;
  overflow: hidden;
}
body.armor-page[data-armor-design="instrument"] .al-side,
body.armor-page[data-armor-design="instrument"] .al-controls { display: contents; }

body.armor-page[data-armor-design="instrument"] .al-selection,
body.armor-page[data-armor-design="instrument"] .al-controls > .al-box,
body.armor-page[data-armor-design="instrument"] #hitsPanel {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 17px;
  color: #eaf1ec;
  background: rgba(10, 18, 19, .94);
  border: 1px solid #3a4a49;
  border-radius: 2px;
  scrollbar-color: #5c7570 transparent;
}
body.armor-page[data-armor-design="instrument"] .al-selection::before,
body.armor-page[data-armor-design="instrument"] .al-controls > .al-box:first-child::before,
body.armor-page[data-armor-design="instrument"] .al-shot::before,
body.armor-page[data-armor-design="instrument"] #hitsPanel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 2px;
  background: #91d5c4;
}
body.armor-page[data-armor-design="instrument"] .al-shot::before { background: #f0c176; }
body.armor-page[data-armor-design="instrument"] #hitsPanel::before { background: #d89d7c; }

body.armor-page[data-armor-design="instrument"] .al-selection {
  top: 16px;
  left: 18px;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
}
body.armor-page[data-armor-design="instrument"] .al-selection .al-lbl {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  margin-bottom: 7px;
}
body.armor-page[data-armor-design="instrument"] .al-selection .al-tank {
  margin-top: 0;
  min-height: 24px;
  gap: 6px;
}
body.armor-page[data-armor-design="instrument"] .al-selection .al-tank img { display: none; }
body.armor-page[data-armor-design="instrument"] .al-selection .al-tank-txt b {
  font-size: 18px;
  line-height: 1.1;
}
body.armor-page[data-armor-design="instrument"] .al-selection .al-tank-txt span { font-size: 11px; }
body.armor-page[data-armor-design="instrument"] .al-selection .al-equip {
  margin-top: 2px;
  padding: 5px 7px;
}

body.armor-page[data-armor-design="instrument"] .al-controls > .al-box:first-child {
  top: 218px;
  left: 18px;
  width: 260px;
  max-height: calc(100% - 326px);
  overflow-y: auto;
}
body.armor-page[data-armor-design="instrument"] .al-controls > .al-shot {
  top: 16px;
  right: 18px;
  width: 284px;
  max-height: calc(50% - 22px);
  overflow-y: auto;
}
body.armor-page[data-armor-design="instrument"] .al-controls > .al-measure {
  right: 18px;
  bottom: 100px;
  width: 284px;
  max-height: calc(45% - 22px);
  overflow-y: auto;
}
body.armor-page[data-armor-design="instrument"] #hitsPanel {
  top: 16px;
  right: 18px;
  width: 314px;
  max-height: calc(100% - 116px);
  overflow-y: auto;
}

body.armor-page[data-armor-design="instrument"] .al-box .al-lbl,
body.armor-page[data-armor-design="instrument"] .al-measure-empty b {
  display: block;
  margin: 0 0 13px;
  color: #b8d2c9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.armor-page[data-armor-design="instrument"] .al-pick input {
  min-height: 38px;
  padding: 8px 10px;
  background: #172223;
  border-color: #536360;
  border-radius: 2px;
  font-size: 12px;
}
body.armor-page[data-armor-design="instrument"] .al-seg {
  gap: 0;
  padding: 0;
  background: transparent;
  border-color: #536360;
  border-radius: 2px;
}
body.armor-page[data-armor-design="instrument"] .al-seg button {
  min-height: 36px;
  padding: 6px 4px;
  border: 0;
  border-right: 1px solid #354746;
  border-radius: 0;
  color: #b8c8c2;
  background: #172223;
  font-size: 11px;
}
body.armor-page[data-armor-design="instrument"] .al-seg button:last-child { border-right: 0; }
body.armor-page[data-armor-design="instrument"] .al-seg button.on,
body.armor-page[data-armor-design="instrument"] .al-toggles button.on,
body.armor-page[data-armor-design="instrument"] .al-guns button.on {
  color: #10211e;
  background: #a9d8cb;
  border-color: #a9d8cb;
}
body.armor-page[data-armor-design="instrument"] .al-toggles button,
body.armor-page[data-armor-design="instrument"] .al-guns button,
body.armor-page[data-armor-design="instrument"] .shot-shells button {
  min-height: 34px;
  border-color: #536360;
  border-radius: 2px;
  background: #172223;
  font-size: 11px;
}
body.armor-page[data-armor-design="instrument"] .shot-shells button.active {
  color: #f8f0df;
  border-color: #f0c176;
  background: #433a2b;
}
body.armor-page[data-armor-design="instrument"] .al-shooter-now { font-size: 12px; }
body.armor-page[data-armor-design="instrument"] .al-shooter-now b { color: #f0c176; }
body.armor-page[data-armor-design="instrument"] .al-measure-empty span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-color: #334341;
  font-variant-numeric: tabular-nums;
}
body.armor-page[data-armor-design="instrument"] .al-measure-empty em {
  color: #f0c176;
  white-space: nowrap;
}
body.armor-page[data-armor-design="instrument"] .armor-legend.on { gap: 5px 7px; }
body.armor-page[data-armor-design="instrument"] .hp-tab,
body.armor-page[data-armor-design="instrument"] .hp-dots-btn { border-radius: 2px; }
body.armor-page[data-armor-design="instrument"] .hp-tab.on {
  color: #f0c176;
  border-color: #d9b371;
  background: #3c3427;
}
body.armor-page[data-armor-design="instrument"] .hp-row.hot,
body.armor-page[data-armor-design="instrument"] .hp-row.pinned { background: #273936; }

body.armor-page[data-armor-design="instrument"] .al-toolbar {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(230px, 285px) minmax(0, 1fr) 66px;
  min-height: 76px;
  padding: 0 18px;
  background: rgba(13, 22, 23, .98);
  border-top: 1px solid #6b8178;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .2);
}
body.armor-page[data-armor-design="instrument"] .al-toolbar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  width: 160px;
  height: 2px;
  background: #f0c176;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-tabs {
  grid-column: 1;
  display: flex;
  align-self: stretch;
  border-right: 1px solid #354543;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-tabs button {
  flex: 1;
  padding: 7px 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-size: 12px;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-tabs button.on {
  color: #f8e2bc;
  border-bottom-color: #f0c176;
  background: #2d2d2f;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams {
  position: static;
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  transform: none;
  background: transparent;
  border: 0;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams button {
  min-width: 68px;
  min-height: 42px;
  padding: 8px 11px;
  border: 0;
  border-right: 1px solid #2d3c3b;
  border-radius: 0;
  font-size: 11px;
  text-transform: uppercase;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams button:first-child { border-left: 1px solid #2d3c3b; }
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams button.on {
  color: #132824;
  background: #a9d8cb;
  border-color: #a9d8cb;
}
body.armor-page[data-armor-design="instrument"] .al-toolbar .al-fs {
  position: static;
  grid-column: 3;
  justify-self: end;
  width: 42px;
  height: 42px;
  margin: 0;
  border-color: #58706b;
  border-radius: 2px;
  background: #1b2b2b;
}

@media (max-width: 1100px) {
  body.armor-page[data-armor-design="instrument"] .al-selection,
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-box:first-child { left: 10px; width: 220px; }
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-shot,
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-measure { right: 10px; width: 236px; }
  body.armor-page[data-armor-design="instrument"] #hitsPanel { right: 10px; width: 256px; }
  body.armor-page[data-armor-design="instrument"] .al-toolbar { grid-template-columns: 230px minmax(0, 1fr) 52px; padding: 0 10px; }
  body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams button { min-width: 0; padding-inline: 7px; }
}

@media (max-width: 900px) {
  body.armor-page[data-armor-design="instrument"] .al-hero .page-hero-inner { padding-inline: 12px; }
  body.armor-page[data-armor-design="instrument"] .al-page {
    height: calc(100dvh - 140px);
    min-height: 510px;
    overflow: hidden;
  }
  body.armor-page[data-armor-design="instrument"] .al-page.is-fs {
    height: 100dvh;
    min-height: 0;
  }
  body.armor-page[data-armor-design="instrument"] .al-stage,
  body.armor-page[data-armor-design="instrument"] .al-page.is-fs .al-stage {
    inset: 0 auto auto 0;
    width: 100%;
    height: calc(100% - min(28dvh, 220px) - 98px);
  }
  body.armor-page[data-armor-design="instrument"] .al-page.is-hits .al-stage {
    height: calc(100% - min(40dvh, 340px) - 98px);
  }
  body.armor-page[data-armor-design="instrument"] .al-selection {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px;
    gap: 8px;
  }
  body.armor-page[data-armor-design="instrument"] .al-selection .al-pick { flex: 1 1 auto; min-width: 0; }
  body.armor-page[data-armor-design="instrument"] .al-selection .al-tank { display: none; }
  body.armor-page[data-armor-design="instrument"] .al-selection .al-equip {
    flex: 0 0 118px;
    width: 118px;
    min-height: 34px;
    margin: 0;
    padding: 4px;
    gap: 4px;
    font-size: 10px;
  }
  body.armor-page[data-armor-design="instrument"] .al-selection .al-equip img { width: 22px; height: 22px; }
  body.armor-page[data-armor-design="instrument"] .al-selection .al-equip em { font-size: 9px; }
  body.armor-page[data-armor-design="instrument"] .al-selection .al-lbl { display: none; }
  body.armor-page[data-armor-design="instrument"] .al-pick input { min-height: 34px; }

  body.armor-page[data-armor-design="instrument"] .al-controls {
    position: absolute;
    z-index: 4;
    left: 8px;
    right: 8px;
    bottom: 98px;
    display: flex;
    flex-direction: column;
    max-height: min(28dvh, 220px);
    overflow-y: auto;
    background: rgba(10, 18, 19, .97);
    border: 1px solid #3a4a49;
    scrollbar-color: #5c7570 transparent;
  }
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-box {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 12px 13px;
    border: 0;
    border-bottom: 1px solid #344542;
    box-shadow: none;
    background: transparent;
  }
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-box:first-child {
    max-height: none;
    overflow: visible;
  }
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-box::before { display: none; }
  body.armor-page[data-armor-design="instrument"] .al-controls > .al-box:last-child { border-bottom: 0; }
  body.armor-page[data-armor-design="instrument"] #hitsPanel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 98px;
    width: auto;
    max-height: min(40dvh, 340px);
    padding: 12px 13px;
  }
  body.armor-page[data-armor-design="instrument"] .al-toolbar {
    min-height: 92px;
    padding: 0 8px;
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: 43px 49px;
  }
  body.armor-page[data-armor-design="instrument"] .al-toolbar::before { left: 8px; width: 75px; }
  body.armor-page[data-armor-design="instrument"] .al-toolbar .al-tabs {
    grid-column: 1 / -1;
    grid-row: 1;
    border-right: 0;
    border-bottom: 1px solid #354543;
  }
  body.armor-page[data-armor-design="instrument"] .al-toolbar .al-tabs button { font-size: 11px; }
  body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: space-between;
    min-width: 0;
  }
  body.armor-page[data-armor-design="instrument"] .al-toolbar .al-cams button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 5px 2px;
    font-size: 10px;
  }
  body.armor-page[data-armor-design="instrument"] .al-toolbar .al-fs {
    grid-column: 2;
    grid-row: 2;
    width: 37px;
    height: 37px;
  }
  body.armor-page[data-armor-design="instrument"] .al-page.is-fs .al-controls,
  body.armor-page[data-armor-design="instrument"] .al-page.is-fs #hitsPanel { bottom: 98px; }
}