/* 신고가 조건 모드 토글과 근접도 입력(D-029). `breakout.css` 에서 나눈 이유는 그 파일이
   200줄 한도에 가깝기도 하지만, **둘이 서로를 감추는 관계**라서다: 여기 규칙이 저쪽 창을
   감추는 것이 아니라 저쪽이 스스로 `hidden` 을 단다(`breakout.setMode`). 두 파일이 같은
   요소를 두고 감추기 경쟁을 하면 한쪽만 고쳐진 날 "체크는 켜졌는데 안 보이는" 화면이 된다. */

.nh-modes { display: flex; gap: 6px; margin: 0 0 6px; flex-wrap: wrap; }

/* 모드는 **둘 중 하나**다(끈 상태가 없다) — 그래서 버튼처럼 크게 그린다. 라디오를 작은
   동그라미로 두면 조건 하나가 아니라 곁다리 옵션으로 읽힌다. */
.nh-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--line, #e3e6ea); border-radius: 999px;
  background: var(--bg, #fff); cursor: pointer; font-size: 13px;
}
.nh-mode.is-picked {
  border-color: var(--accent, #2563eb);
  background: var(--head-bg, #f6f7f9);
  font-weight: 600;
}

.nh-range[hidden] { display: none; }
.nh-line { display: flex; align-items: center; gap: 6px; }
.nh-name, .nh-unit { color: var(--muted, #6b7480); font-size: 12px; }

.nh-num {
  width: 72px; padding: 2px 4px; text-align: right;
  border: 1px solid var(--line, #e3e6ea); border-radius: 4px;
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
/* `min-width: 0` 이 없으면 flex 항목이 안 줄어 좁은 화면에서 줄이 넘친다. */
.nh-slider { flex: 1 1 auto; min-width: 0; }

.nh-presets { display: flex; gap: 4px; margin: 4px 0 0; }
.nh-preset {
  padding: 2px 8px; border: 1px solid var(--line, #e3e6ea); border-radius: 6px;
  background: var(--head-bg, #f6f7f9); font: inherit; font-size: 12px; cursor: pointer;
}
.nh-preset.is-on { border-color: var(--accent, #2563eb); font-weight: 600; }

.nh-readout { margin: 4px 0 0; font-variant-numeric: tabular-nums; }

/* 끈 모드의 문구. `hidden` 만으로는 안 감춰지는 함정을 피해 짝을 함께 적는다
   (`web/checks/wiring.checks.mjs` 가 그 짝을 검사한다). */
.nh-off-note { display: block; margin: 6px 0 0; }
.nh-off-note[hidden] { display: none; }
.nh-note { margin: 4px 0 0; }

/* 돌파 전에서는 돌파 창이 통째로 빠지므로 위아래 간격만 정리한다(감추는 일은 JS 가 한다). */
.breakout.is-mode-near { margin-top: 4px; }