/* Speaking Partner — the call screen, the profile form and the browse list.
 *
 * Shares the design system with the coach and the profile. What lives here is
 * the one thing this surface alone has: a live voice call, where the only
 * status a learner can read at arm's length is whether the other person is
 * audible.
 */

/* ── Call ───────────────────────────────────────────────────────────────── */
.call {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s3);
  padding: var(--s6) var(--s5)
           calc(var(--dock-h) + var(--safe-b) + var(--s9));
}
.call-stage {
  position: relative;
  width: 148px; height: 148px;
  margin-bottom: var(--s3);
}
/* The ring is speech, not decoration: it is how you know the line is live. */
.call-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 124px; height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  transform: scale(1);
  transition: transform 90ms linear;
}
.call-avatar {
  position: absolute;
  left: 50%; top: 50%;
  width: 124px; height: 124px;
  margin: -62px 0 0 -62px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: var(--card-border);
  box-shadow: var(--shadow);
  color: var(--text-2);
}
.call-avatar .ico { width: 52px; height: 52px; }
.call-name { font-size: var(--fs-display); letter-spacing: var(--tr-display); }
.call-status { color: var(--text-2); }
.call-timer {
  font-family: var(--font-num);
  font-size: var(--fs-title);
  font-weight: 800;
}
.call-hint { color: var(--text-3); font-size: var(--fs-small); min-height: 20px; }

/* A call has one destructive control and it must never be mistaken for the
   other one, so it is the only filled danger button in the system. */
.btn--end { background: var(--danger); color: var(--on-danger); }
.controls .btn { margin-top: 0; }

/* ── Profile form ───────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: var(--s6); margin-top: var(--s5); }
.fieldset h3 { font-size: var(--fs-body); margin-bottom: var(--s3); }
.fieldset .opt {
  color: var(--text-3);
  font-weight: 500;
  font-size: var(--fs-small);
  margin-left: 6px;
}
.coc {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: var(--card-border);
}
.coc input { margin-top: 2px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }

.pills { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pill {
  padding: 9px var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pill:active { transform: scale(0.96); }
.pill.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fieldset .input { margin-top: var(--s3); }

.form-msg {
  min-height: 20px;
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-small);
}
.form-msg.error { color: var(--danger-text); }

/* ── Browse ─────────────────────────────────────────────────────────────── */
.browse-list { margin-top: var(--s3); }
.browse-card {
  background: var(--surface);
  border: var(--card-border);
  box-shadow: var(--shadow);
  border-radius: var(--r-card);
  padding: var(--s4);
}
.browse-card + .browse-card { margin-top: var(--s3); }
.card-head { display: flex; align-items: center; gap: var(--s3); }
.card-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lead); font-weight: 800;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.card-avatar.has-img { color: transparent; }
.card-name {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-lead); font-weight: 800; letter-spacing: var(--tr-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-rating { flex: 0 0 auto; color: var(--text-2); font-size: var(--fs-small); font-weight: 700; }
.card-line { margin-top: var(--s3); font-size: var(--fs-small); }
.card-bio { margin-top: var(--s2); color: var(--text-2); font-size: var(--fs-small); }
.browse-card .btn { margin-top: var(--s4); }