/* ==========================================================================
   Раздел «Инструменты»: витрина /tools/ и конфигуратор прицела /tools/crosshair/.
   Семейство APPLICATION из 1cs.png — слева управление, в центре рабочая область,
   справа результат. Тёмная зона одна и функциональная: превью прицела и вывод команд.
   ========================================================================== */

/* --- Витрина ---------------------------------------------------------------- */

.tool-hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tool-hero:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }

.tool-hero__preview {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  background:
    radial-gradient(circle at 50% 45%, #35403F 0%, var(--dark-workspace) 70%);
}
.tool-hero__preview svg { width: 132px; height: 132px; }
/* Схема кадра шире квадратного превью прицела — отдаём ей всю плитку. */
.tool-hero__preview--viewmodel { padding: var(--sp-3); }
.tool-hero__preview--viewmodel svg { width: 100%; height: auto; }
.tool-hero__glyph { width: 64px; height: 64px; color: rgba(255, 255, 255, .55); }

.tool-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.tool-hero__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.tool-hero__text { max-width: 62ch; color: var(--text-secondary); font-size: var(--fs-small); }
.tool-hero__points { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.tool-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: var(--fs-tiny);
}
.tool-hero__points .icon { color: var(--accent); }

.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.tool-card:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }
.tool-card--planned { background: var(--surface-soft); box-shadow: none; }

.tool-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tool-card__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-hover);
}
.tool-card--planned .tool-card__icon { background: var(--surface); color: var(--text-muted); }
.tool-card__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.tool-card__tagline { color: var(--text-secondary); font-size: var(--fs-small); }
.tool-card__text { color: var(--text-muted); font-size: var(--fs-tiny); line-height: var(--lh-body); }
.tool-card .section__link { margin-top: auto; padding-top: var(--sp-2); }

/* --- Конфигуратор: раскладка -------------------------------------------------- */

.crosshair__grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 350px;
  grid-template-areas:
    "controls preview  output"
    "controls presets  output";
  gap: var(--grid-gap);
  align-items: start;
}
.crosshair__controls { grid-area: controls; }
.crosshair__preview  { grid-area: preview; }
.crosshair__presets  { grid-area: presets; }
.crosshair__output   { grid-area: output; }

.crosshair__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.crosshair__panel-head {
  align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
/* Заголовок панели соседствует с кнопкой в узкой колонке — держим его в одну строку. */
.crosshair__panel-head .card__title { font-size: 1rem; }
.crosshair__controls > .control:first-of-type { margin-top: calc(var(--sp-1) * -1); }
.crosshair__controls .control,
.crosshair__submit { padding: 0 var(--sp-5); }

/* --- Управление --------------------------------------------------------------- */

.control { display: flex; flex-direction: column; gap: 6px; }
.control__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.control__label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.control__value {
  min-width: 46px;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.control__hint { color: var(--text-muted); font-size: var(--fs-tiny); line-height: 1.45; }
.control__convar { color: var(--text-muted); font-size: 11px; }
.control__convar code { font-family: var(--font-mono); font-size: 11px; }

.control--switch { gap: var(--sp-2); }
.control--switch .switch { align-items: flex-start; }
.switch__text { display: flex; flex-direction: column; gap: 2px; }

.control--rgb { transition: opacity var(--dur) var(--ease); }
.control--rgb[data-active="0"] { opacity: .5; }

.rgb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.rgb-row__item { display: flex; flex-direction: column; gap: 4px; }
.rgb-row__item .input { min-height: 36px; padding: 6px 10px; }

.crosshair__submit { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }

/* --- Превью ------------------------------------------------------------------- */

.crosshair-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-panel);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Нейтральная тренировочная стена: собственная графика, без игровых скриншотов. */
.crosshair-preview--wall {
  border-color: transparent;
  background:
    linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 100% 76px,
    linear-gradient(90deg, rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 76px 100%,
    radial-gradient(circle at 50% 42%, #8E8A80 0%, #6B6860 62%, #4E4C46 100%);
}
.crosshair-preview--dark {
  border-color: transparent;
  background: radial-gradient(circle at 50% 45%, #2E3839 0%, var(--dark-workspace) 72%);
}
.crosshair-preview--light {
  background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, var(--surface-soft) 78%);
}

.crosshair-preview__svg { display: block; width: 320px; height: 320px; max-width: 100%; }

.crosshair-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.crosshair__disclaimer {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  line-height: var(--lh-body);
}

/* --- Заготовки ---------------------------------------------------------------- */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-3);
}
.preset {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.preset:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.preset__preview {
  display: grid;
  place-items: center;
  flex: none;
  width: 62px; height: 62px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.preset__preview--dark  { background: var(--dark-workspace); }
.preset__preview--light { background: var(--surface-soft); }
.preset__preview svg { width: 76px; height: 76px; }
.preset__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preset__name { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.preset__note { color: var(--text-muted); font-size: 11px; line-height: 1.4; }

/* --- Вывод -------------------------------------------------------------------- */

.crosshair__panel { padding-bottom: var(--sp-5); }
.crosshair__panel > .code-output,
.crosshair__panel > .crosshair__steps,
.crosshair__panel > .field,
.crosshair__panel > .table { margin-left: var(--sp-5); margin-right: var(--sp-5); }
.crosshair__panel > .code-output { width: auto; margin-top: var(--sp-4); }
.crosshair__panel > .table { width: auto; }

.crosshair__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--fs-tiny);
  line-height: var(--lh-body);
  list-style: decimal;
}
.crosshair__steps code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}

.crosshair__table { margin-top: var(--sp-5); }
.crosshair__table th { font-weight: var(--fw-regular); }
.crosshair__table th code { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.crosshair__table td { text-align: right; font-weight: var(--fw-semibold); }

/* --- Общая раскладка инструмента: viewmodel, чувствительность ------------------
   Та же схема, что у конфигуратора прицела: управление — рабочая область — вывод.
   ------------------------------------------------------------------------------ */

.lab__grid {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 350px;
  grid-template-areas:
    "controls stage   output"
    "controls presets output";
  gap: var(--grid-gap);
  align-items: start;
}
.lab__controls { grid-area: controls; }
.lab__stage    { grid-area: stage; }
.lab__presets  { grid-area: presets; }
.lab__output   { grid-area: output; }

.lab__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.lab__panel-head {
  align-items: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.lab__panel-head .card__title { font-size: 1rem; }
.lab__controls .control,
.lab__controls .field,
.lab__group,
.lab__submit { padding: 0 var(--sp-5); }

.lab__group { display: flex; flex-direction: column; gap: 2px; }
.lab__group + .control,
.lab__group + .field { margin-top: calc(var(--sp-2) * -1); }
.lab__group-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
}
.lab__controls .chip-group { gap: 6px; }
.lab__controls .chip { padding: 3px 10px; font-size: 11px; }

.lab__submit { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }

.lab__stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.lab__disclaimer {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  line-height: var(--lh-body);
}
.lab__disclaimer code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}

.lab__panel { padding-bottom: var(--sp-5); }
.lab__panel > .code-output,
.lab__panel > .lab__steps,
.lab__panel > .field,
.lab__panel > .sens-formulas,
.lab__panel > .table { margin-left: var(--sp-5); margin-right: var(--sp-5); }
.lab__panel > .code-output { width: auto; margin-top: var(--sp-4); }
.lab__panel > .table { width: auto; }

.lab__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-4);
  padding-left: var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--fs-tiny);
  line-height: var(--lh-body);
  list-style: decimal;
}
.lab__steps code,
.lab__table th code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 11px;
}

.lab__table { margin-top: var(--sp-5); }
.lab__table th { font-weight: var(--fw-regular); }
.lab__table th code { color: var(--text-secondary); }
.lab__table td { text-align: right; font-weight: var(--fw-semibold); }

/* --- Viewmodel: схема кадра ---------------------------------------------------- */

.vm-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-panel);
  background: radial-gradient(circle at 50% 44%, #2E3839 0%, var(--dark-workspace) 76%);
  overflow: hidden;
}
.vm-frame__svg { display: block; width: 100%; height: auto; }
.vm-frame__label {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

.vm-frame__weapon { overflow: visible; }

/* Покачивание — условная демонстрация размаха, а не игровая анимация. */
.vm-frame__weapon.is-moving {
  animation: vm-bob var(--vm-bob-t, 1s) ease-in-out infinite alternate;
  transform-box: view-box;
  transform-origin: center;
}
@keyframes vm-bob {
  from { translate: calc(var(--vm-bob-x, 0px) * -1) 0; }
  to   { translate: var(--vm-bob-x, 0px) var(--vm-bob-y, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  .vm-frame__weapon.is-moving { animation: none; }
}

.preset__preview--frame { width: 104px; height: 66px; background: var(--dark-workspace); }
.preset__preview--frame svg { width: 104px; height: auto; }

/* --- Чувствительность: результат ----------------------------------------------- */

.sens-result { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); }
.sens-result__main { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.sens-result__label {
  flex-basis: 100%;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.sens-result__value {
  font-size: clamp(2.5rem, 6vw, 3.4rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -.03em;
  line-height: 1;
}
.sens-result__unit { color: var(--text-secondary); font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

.sens-scale {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
}
.sens-scale__fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.sens-scale__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sens-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.sens-grid .stat__value { font-size: 1.35rem; }

.sens-convert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.sens-convert__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sens-convert__label { color: var(--text-muted); font-size: var(--fs-tiny); font-weight: var(--fw-medium); }
.sens-convert__value { font-size: 1.75rem; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.sens-convert__col--result .sens-convert__value { color: var(--accent-hover); }
.sens-convert__note { color: var(--text-secondary); font-size: 11px; }
.sens-convert__arrow { display: grid; place-items: center; color: var(--text-muted); }

.sens-formulas { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.sens-formulas__item { display: flex; flex-direction: column; gap: 2px; }
.sens-formulas__item code {
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}
.sens-formulas__item span { color: var(--text-muted); font-size: 11px; line-height: 1.45; }

/* --- Адаптив ------------------------------------------------------------------ */

@media (max-width: 1279px) {
  .lab__grid {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas:
      "controls stage"
      "controls presets"
      "output   output";
  }
  .lab__panel > .table { margin-bottom: 0; }
  .crosshair__grid {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas:
      "controls preview"
      "controls presets"
      "output   output";
  }
  .crosshair__panel > .table { margin-bottom: 0; }
}

/* Мобильная раскладка по ТЗ: превью сверху, под ним управление. */
@media (max-width: 1023px) {
  .tool-hero { grid-template-columns: 200px 1fr; padding: var(--sp-5); }
  .crosshair__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "controls"
      "presets"
      "output";
  }
  .crosshair-preview__svg { width: 260px; height: 260px; }
  .lab__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "controls"
      "presets"
      "output";
  }
  .sens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tool-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .tool-hero__preview { aspect-ratio: 16 / 9; }
  .tool-hero__points { flex-direction: column; gap: 6px; }
  .crosshair-preview { aspect-ratio: 4 / 3; }
  .crosshair-preview__svg { width: 220px; height: 220px; }
  .crosshair-preview__bar { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  /* В две колонки на телефоне название и пояснение рвутся на пять строк — оставляем одну. */
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .crosshair__controls .control,
  .crosshair__submit { padding: 0 var(--sp-4); }
  .crosshair__panel > .code-output,
  .crosshair__panel > .crosshair__steps,
  .crosshair__panel > .field,
  .crosshair__panel > .table { margin-left: var(--sp-4); margin-right: var(--sp-4); }

  .lab__stage-bar { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .lab__controls .control,
  .lab__controls .field,
  .lab__group,
  .lab__submit { padding: 0 var(--sp-4); }
  .lab__panel > .code-output,
  .lab__panel > .lab__steps,
  .lab__panel > .field,
  .lab__panel > .sens-formulas,
  .lab__panel > .table { margin-left: var(--sp-4); margin-right: var(--sp-4); }
  .sens-result { padding: var(--sp-5); }
  /* На телефоне стрелка «сейчас → поставить» смотрит вниз, колонки идут одна под другой. */
  .sens-convert { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .sens-convert__arrow { justify-self: start; rotate: 90deg; }
}