/* 후보 병원 화면. 위 = 읽는 정보(← · 몇 곳에 걸지 · 병원이 듣게 될 환자 값 · 숫자를 읽는 법), 아래 = 누르는 것(병원 행·
   [병원 직접 추가]·[동시 발신]). 행은 한 유리 목록 위에 선으로 나뉜다(.glass-list — parts.css). 390×844에서 패널 안 높이 약 490px:
   행 104×3 · 여백 4 · 버튼 줄 16+56+16+64. 행이 넷 이상이면 88px로 낮춘다. 그래도 넘치면 행만 스크롤하고 버튼은 남는다. */

.candidates {
  --row-height: 104px;
}

/* 행 = 진짜 체크박스(.row-input)가 행 전체를 덮고, 그 아래에 그린 면(.row-face — parts.css). 행 어디를 눌러도 빠지고 들어온다.
   자판의 스페이스·화면 읽기 프로그램은 브라우저의 체크박스 동작을 그대로 쓴다. */
.hospital {
  display: block;
}

/* 오른쪽 위의 체크: 빈 흰 네모 → 흰 면에 먹색 체크. 작은 그림이 따로 눌리는 표적은 아니다(행 전체가 표적). */
.hospital-check {
  grid-area: mark;
  justify-self: end;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  border: var(--border-selected-width) solid var(--color-text-primary);
  border-radius: var(--radius-badge);
  color: transparent;
}

.row-input:checked + .row-face .hospital-check {
  background: var(--color-text-primary);
  color: var(--color-text-onFill);
}

/* 둘째 줄: 발신할 병원이면 종별, 뺀 병원이면 "발신 제외". */
.hospital-line {
  grid-area: line;
  align-self: end;
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-body);
}

.hospital-note,
.hospital-out {
  display: block;
}

.row-input:checked + .row-face .hospital-out,
.row-input:not(:checked) + .row-face .hospital-note {
  display: none;
}

/* 뺀 병원: 글자가 흐리고 가늘어지고, 체크가 빈다. 밝기만으로 가르지 않는다 — 둘째 줄의 글자가 같이 바뀐다. */
.row-input:not(:checked) + .hospital-face {
  color: var(--color-text-secondary);
}

.row-input:not(:checked) + .hospital-face .hospital-name,
.row-input:not(:checked) + .hospital-face .hospital-minutes {
  font-weight: var(--type-weight-body);
}

/* 닿은 순간: 행 안쪽에 흰 2px 선. */
.row-input:enabled:active + .hospital-face {
  box-shadow: inset 0 0 0 var(--border-selected-width) var(--color-text-primary);
}

@media (hover: hover) {
  .row-input:enabled:hover + .hospital-face {
    box-shadow: inset 0 0 0 var(--border-control-width) var(--color-text-primary);
  }
}

/* 발신 요청을 보내는 동안: 보낸 병원은 그대로 보이고, 뺀 병원의 체크 테두리는 흐려진다. */
.row-input:disabled:not(:checked) + .row-face .hospital-check {
  border-color: var(--color-border-control);
}

/* ── 후보가 없다: 행이 있던 자리에 크게 적는다. 이 화면에서 읽을 것은 이것뿐이다 ──────────────── */

.candidates-empty {
  margin: 0;
  font-size: var(--type-size-xl);
  line-height: var(--type-lineHeight-xl);
  font-weight: var(--type-weight-heading);
  letter-spacing: var(--type-tracking-heading);
}

.candidates-empty span {
  display: block;
}

/* 환자 값은 한 줄로 흘려 적는다(20px) — 위 40%에 "몇 곳 · 환자 값 · 수용 미확인 · 기준" 넷이 다 들어오게. */
.candidates-brief .readout {
  font-weight: var(--type-weight-control);
}

/* ── 화면에 맞추기. 글자와 터치 크기는 줄이지 않는다 ────────────────────────────── */

/* 행이 넷 이상이거나 화면이 낮으면 빈 여백만 줄인다(행 88px) — 390×844에 다섯 줄이 다 들어온다. */
.candidates[data-density="compact"] {
  --row-height: 88px;
}

@media (max-height: 699px) {
  .candidates {
    --row-height: 88px;
  }

  /* 낮은 화면: "3곳에 동시에 연결합니다"는 맨 아래 [3곳 동시 발신]과 같은 말이라 접는다 — 위 영역에 환자 값과 기준이 들어오게. */
  #candidates-lede {
    display: none;
  }
}

/* ── [병원 직접 추가] 시트(B19a): 행은 후보 행과 같다. 다만 고르지 않은 병원은 "아직 안 넣은 곳"이지 "뺀 곳"이 아니다 —
   흐리지 않고 종별을 그대로 적는다("발신 제외"는 후보 목록에서만). 다 골라 누를 수 없는 행만 흐리다. ───────────── */

#candidates-picker .sheet-scroll {
  padding-inline: var(--space-1);
}

#candidates-picker .sheet-title,
#candidates-picker .field-label,
#candidates-picker .sheet-fact {
  padding-inline: var(--space-1);
}

#candidates-picker .hospital-list {
  --row-height: 88px;
}

#candidates-picker .row-input:not(:checked) + .row-face .hospital-note {
  display: block;
}

#candidates-picker .hospital-out {
  display: none;
}

#candidates-picker .row-input:enabled:not(:checked) + .hospital-face {
  color: var(--color-text-primary);
}

#candidates-picker .row-input:disabled:not(:checked) + .hospital-face {
  color: var(--color-text-secondary);
}

#candidates-picker-retry {
  margin-top: var(--space-2);
}