/* jarchi for a student from the school's system (student.js): the short join card and the way back to the school. */

/* ---------- the join card: «ورود به کلاس» on the first screen of a 360×640 phone ---------- */
.st-join .pg-classid { margin-bottom: 14px; }
.st-name { margin: 2px 0 0; font-size: var(--fs-body); color: var(--ink-2); }
.st-name b { font-weight: var(--fw-x); color: var(--ink); }
.st-join #product-enter { min-height: 52px; font-size: var(--fs-lead); margin: 0 0 4px; }
.st-join #product-enter + .err:empty { display: none; }
.st-join .rd-check { margin: 14px 0 0; padding: 10px 14px; }
.st-join .rd-check > .hint { margin-bottom: 4px; }
/* Each check on one line (icon, word, verdict), even on a 360 px phone. */
.st-join .rd-row { grid-template-columns: auto minmax(0, auto) minmax(0, 1fr); min-height: 44px; }
.st-join .rd-st { grid-column: auto; justify-content: flex-end; padding-inline-start: 0; }
.st-join .rd-row[data-st="ask"] .rd-st { flex-wrap: wrap; }
/* The optional mic test is one more quiet row, not a box with a paragraph. */
.st-join .rd-check .rd-pj { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 6px 0 0; margin: 0; }
.st-join .rd-pj > h3, .st-join .rd-pj > .hint { display: none; }
.st-join .rd-pj .pj-row { justify-content: flex-start; }
.st-join .rd-pj #pj-mic-start { min-height: 40px; font-size: var(--fs-meta); color: var(--muted); border-color: transparent; background: transparent; padding-inline: 4px; }

/* ---------- back to the school ---------- */
.st-backbox { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.st-back { gap: 8px; }
.st-said:empty { display: none; }
.st-said { margin: 0; text-align: center; }
.pg-done .fb-row:has(> .st-backbox) { flex-wrap: wrap; }
.pg-done .fb-row > .st-backbox { flex: 1 1 100%; }

/* ---------- in the class: one note at a time on a phone ---------- */
/* The iPhone's «stay in Safari» comes first; the «حضور فعال» line waits until it is dismissed (it is shown once). */
body:has(#pj-ios:not([hidden])) #pres-note { display: none; }
@media (max-width: 480px) {
  #pj-ios { padding: 8px 12px; gap: 6px 10px; font-size: var(--fs-body); }
  #pj-ios > span { flex-basis: 180px; }
}
/* The reactions' picker opens over the toasts' place: the toast steps away while it is open. */
body:has(#react-pick:not([hidden])) #pres-note { visibility: hidden; }

/* ---------- the waiting room on a phone: the reassuring line in sight, the facts as two small chips ---------- */
@media (max-width: 480px) {
  .wt { padding-block: 20px 16px; }
  .wt h1 { font-size: var(--fs-heading); margin-top: 8px; }
  .wt .pg-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
  .wt .pg-facts > div { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); }
  .wt .pg-facts dt { font-size: var(--fs-meta); }
  .wt .pg-facts dt::after { content: ":"; }
  .wt .pg-facts dd { font-size: var(--fs-meta); }
}

/* ---------- in a messenger's browser, hand up: the way to Chrome / Safari as one compact note over the stage ---------- */
#pj-inapp { padding: 8px 12px; gap: 6px; font-size: var(--fs-body); line-height: 1.6; }
#pj-inapp .ia-actions { flex-direction: row; flex-wrap: wrap; margin: 2px 0 0; gap: 8px; }
#pj-inapp .ia-actions .btn { width: auto; flex: 1 1 auto; min-height: 40px; font-size: var(--fs-body); padding: 6px 12px; }
#pj-inapp .ia-said, #pj-inapp .ia-linkbox { flex-basis: 100%; }

/* ---------- the next visits: the optional sound / mic tests as two quiet buttons under «ورود به کلاس» ---------- */
.st-join > .pj-box { background: transparent; border: 0; padding: 0; margin-top: 12px; }
.st-join > .pj-box > h3 { display: none; }
.st-join > .pj-box > .hint { font-size: var(--fs-meta); text-align: center; margin: 0 auto 8px; max-width: 34ch; }
.st-join > .pj-box .pj-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.st-join > .pj-box .pj-row > .btn { width: auto; flex: 1 1 140px; min-height: 44px; font-size: var(--fs-meta); }

/* «نوبت توئه!» the first time: what the phone will ask, in one line */
.st-mic-ask { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px !important; color: var(--speak-ink); }
.st-mic-ask .ic { width: 18px; height: 18px; flex: none; }