/* إسناد · تجربة الاتصال (call.js). Phone first; the same page on the sheikh's laptop. Tokens and .btn come from base.css. */
body { margin: 0; background: var(--ground); font-family: var(--ui); color: var(--ink); }
.cl { width: min(560px, 100%); margin: 0 auto; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.cl-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
.cl-head b { display: block; font-family: var(--quran); font-size: 26px; line-height: 1.1; color: var(--brand); }
.cl-head small { font-size: var(--text-sm); color: var(--ink-2); }

.cl-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.cl-card h1 { margin: 0; font-size: var(--text-2xl); font-weight: 600; }
.cl-card h2 { margin: 0; font-size: var(--text-input); font-weight: 600; }
.cl-card p { margin: 0; font-size: var(--text-base); line-height: 1.7; color: var(--ink-2); }
.cl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-row .btn { flex: 1 1 auto; }
.btn.big { height: 52px; font-size: var(--text-input); }
.btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.cl-link { padding: 10px 12px; border-radius: var(--radius-md); background: var(--paper); font-size: var(--text-sm); word-break: break-all; text-align: left; }
.cl-err { padding: 10px 12px; border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger) !important; }

/* in the call: where it stands, the other side (a picture only when they turn theirs on) */
.cl-status { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand) !important; }
.cl-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--live); }
.cl-status.reconnecting { color: var(--amber) !important; }
.cl-status.reconnecting i { background: var(--amber); }
.cl-status.connecting i { background: var(--line); }
.cl-peer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.cl-video video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--ink); }

/* the numbers */
.cl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cl-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--paper); }
.cl-stat small { font-size: var(--text-sm); color: var(--ink-2); }
.cl-stat b { font-size: var(--text-input); font-variant-numeric: tabular-nums; }
.cl-stat.warn { background: var(--amber-bg); }
.cl-stat.warn b { color: var(--amber); }
.cl-note { font-size: var(--text-sm) !important; }