/* 응답 화면의 병원 행 한 줄과 그 배지(B20·B21). 화면의 틀·머리 글은 status.css, 행 아래의 버튼 줄은 decide.css.
   행의 뼈대(.glass-list·.row-face·.hospital-*)는 후보 행과 같다(parts.css). 행은 "어느 병원으로"를 고르는 표적이다:
   흰 2px 선 = 지금 고른 병원(고르지 않았으면 추천 병원). 색은 답의 뜻으로만 쓴다: 발신중 파랑, 수용 초록, 불가 빨강,
   병원의 답을 듣지 못한 것은 회색. */

/* 행 = 진짜 라디오(.row-input)가 행 전체를 덮고, 그 아래에 그린 면. 후보 행(candidates.css)과 같은 방식이다 —
   행 어디를 눌러도 그 병원이 골라지고, 자판의 화살표·화면 읽기 프로그램은 브라우저의 라디오 동작을 그대로 쓴다. */
.call {
  display: block;
}

/* 수용 없이 끝난 전화(불가·무응답·발신 실패·종료): 글자가 흐리고 가늘어진다 — 후보 화면에서 뺀 병원과 같은 모습이다.
   밝기만으로 가르지 않는다: 배지의 그림과 글자가 같이 바뀐다. */
.call-face[data-out="true"] {
  color: var(--color-text-secondary);
}

.call-face[data-out="true"] .hospital-name,
.call-face[data-out="true"] .hospital-minutes {
  font-weight: var(--type-weight-body);
}

/* 고른 병원: 안쪽 흰 2px 선. 후보 화면에서 "발신할 병원"이던 선과 같은 뜻이다 — 아래 버튼이 이 병원으로 간다.
   고르지 않았으면 추천 병원이 골라져 있다. 확정한 뒤에는 확정한 병원에 남는다. */
.row-input:checked + .call-face {
  box-shadow: inset 0 0 0 var(--border-selected-width) var(--color-text-primary);
}

.row-input:enabled:active + .call-face {
  background: var(--glass-control-fill);
  box-shadow: inset 0 0 0 var(--border-selected-width) var(--color-text-primary);
}

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

/* 둘째 줄 왼쪽: 표(추천·선택·이송 확정)와 종별(·모의 회선). */
.call-state {
  grid-area: line;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-1) / 2) var(--space-1);
  align-self: end;
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-body);
}

/* 모의 회선(팀 휴대폰)이면 그 사실. 배지 옆에 늘 붙어 다닌다 — 모의 회선의 "수용"이 실제 병원의 수용처럼 찍히지 않게. */
.call-line {
  white-space: nowrap;
}

/* ── 배지: 병원의 답. 색 + 그림 + 글자(상자 없이 — 유리 위에서 색 글자와 24px 그림이 가장 잘 읽힌다) ──────── */

/* 줄을 바꾸지 않게 막지 않는다: 글자를 200%로 키운 폰에서는 "발신 실패"가 칸보다 넓다 — 두 줄이 되는 편이 옆 칸을 침범하는 것보다 낫다. */
.badge {
  grid-area: mark;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--type-weight-body);
}

.badge-icon {
  flex: none;
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge[data-tone="calling"] {
  color: var(--color-state-calling);
}

/* 수용만 굵다 — 행 세 줄을 훑을 때 초록 굵은 글자 하나가 먼저 보이게. */
.badge[data-tone="accept"] {
  color: var(--color-state-accept);
  font-weight: var(--type-weight-control);
}

.badge[data-tone="decline"] {
  color: var(--color-state-decline);
}

.badge[data-tone="silent"] {
  color: var(--color-state-noAnswer);
}

/* "추천"·"선택"·"이송 확정"은 색 없이 흰 굵은 글자로 적는다. 초록은 병원이 한 말(수용)에만 쓴다. */
.badge-pick {
  color: var(--color-text-primary);
  font-weight: var(--type-weight-control);
}