/* غرفة الإقراء (room.html), and the pieces other pages borrow from it (shared components live in base.css).
   sheikh.html, schedule.html and interview.html load this file too: the header row (.room-bar), the page frame and
   interview's room (.side, .video, .call-controls, .notes, .toolbar, .room .desk) use the shared rules first below.
   The reading room's own look, the navy design, is the last part, scoped to body.rm so it changes nothing there. */
.room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.student { display: flex; align-items: center; gap: 10px; }
.avatar img, .big-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }     /* the student's photo (room-entry.js drawFace) */
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 600; font-size: var(--text-lg); }
.student b { display: block; font-size: var(--text-input); line-height: 1.4; }
.student div > span { font-size: var(--text-sm); color: var(--ink-2); }
.last-pos { display: flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: var(--radius-pill); background: var(--gold); color: var(--gold-ink); font-size: var(--text-md); font-weight: 500; }
.last-pos b { font-family: var(--quran); font-size: var(--text-lg); }
.call { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--neutral); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-md); font-weight: 500; color: var(--ink-2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
body.in-room .live { color: var(--brand); }
body.in-room .live i { background: var(--live); animation: pulse 2s infinite; }
.timer { font-size: var(--text-md); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--amber); font-weight: 600; }
.muted { font-size: var(--text-xs); color: var(--ink-2); }
.small-screen { display: none; margin: 0; padding: 10px 16px; background: var(--amber-bg); color: var(--amber); font-size: var(--text-md); text-align: center; }
@media (max-width: 900px) { .small-screen { display: block; } }
body.in-room .small-screen { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }   /* not a cell of the room's grid */
.btn.big { height: 52px; padding: 0 30px; font-size: var(--text-input); margin-top: 10px; }
.err { font-size: var(--text-sm); color: var(--danger); }

/* a card in the middle of the page: the room's entry and end, and a page that could not open (lib/db.js cannotOpen) */
.entry-card { width: 100%; max-width: 560px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); padding: 30px 32px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cannot-open { margin: 48px auto; }
.cannot-open h2 { margin: 0; font-size: var(--text-2xl); }
.cannot-open p { margin: 0; line-height: 1.7; }
.cannot-open-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- interview's room (interview.html): the layout the reading room started from ---------- */
body.in-room {
  display: grid; gap: 8px 10px; padding: 8px;
  grid-template-columns: clamp(300px, 22vw, 420px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
body.in-room .room-bar { grid-column: 1 / -1; grid-row: 1; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 14px; }
body.in-room #room { display: contents; }

.side { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.side > * { flex-shrink: 0; }
.side > .notes { flex: 1 1 0; min-height: 220px; }   /* the list scrolls inside; on short screens the column scrolls */
.video { position: relative; aspect-ratio: 2 / 1; border-radius: var(--radius-lg); background: #132457; color: #E6ECE9; overflow: hidden; display: grid; place-items: center; }
@media (max-height: 820px) { .video { aspect-ratio: 3 / 1; } }
.tile-name { position: absolute; bottom: 10px; inset-inline-start: 12px; font-size: var(--text-sm); background: rgba(0, 0, 0, .4); padding: 2px 8px; border-radius: var(--radius-sm); }
.call-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.call-controls .btn { height: 40px; padding: 0 6px; font-size: var(--text-sm); }
.call-controls .btn[aria-pressed="true"] { background: var(--neutral-bg); border-color: var(--ink-2); }
.notes { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.notes-head h2 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.notes-head span { font-size: var(--text-xs); color: var(--ink-2); }
#notes { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
#notes li { display: flex; gap: 8px; font-size: var(--text-md); line-height: 1.6; }
#notes li::before { content: "•"; color: var(--brand); }
#notes .tag { color: var(--brand); font-weight: 500; font-size: var(--text-xs); margin-inline-end: 6px; }
#notes .by-hand { font-size: var(--text-2xs); color: var(--ink-2); margin-inline-start: 6px; }
#notes li.note-new { animation: fresh 1.6s ease-out; border-radius: var(--radius-sm); }
#note-form { display: flex; flex-direction: column; gap: 4px; }
#note-form label { font-size: var(--text-xs); color: var(--ink-2); }
.note-row { display: flex; gap: 6px; }
.note-row input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 10px; }
.note-row .btn { height: 36px; padding: 0 14px; border-color: var(--brand); color: var(--brand); }

.work { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.toolbar .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toolbar .search { flex: 1 1 160px; min-width: 150px; }
.bar-vols { flex: none; display: flex; align-items: center; gap: 6px; }
.bar-vols:has(> .vol-tabs[hidden]) { display: none; }
.bar-label { font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; }
.bar-vols .vol-tabs { display: flex; gap: 4px; padding: 0; border: 0; }
.bar-vols .vol-tab { height: 40px; justify-content: center; padding: 0 8px; }
.bar-vols .vol-tab b { font-size: var(--text-xs); line-height: 1.3; }
.bar-vols .vol-tab span { font-size: var(--text-2xs); line-height: 1.3; }

/* the pages: a slim head and the notes beside the zoom tools above each page */
.room .desk { gap: 10px; }
.room .pane { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.room .pane-head { flex-wrap: wrap; padding: 4px 6px 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.room .pane-title { min-width: 0; }
.room .pane-title .name { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room .pane-tools { flex: 0 1 auto; flex-wrap: wrap; gap: 4px; }
.room .pane-tools .icon-btn { width: 28px; height: 30px; }
.room .tools-sep { margin: 0 1px; }
.room .pane-foot { padding: 6px 4px 0; }
.room .pane-body { background: transparent; padding: 0; }
.room .shelf { flex-basis: 118px; }
/* two pages side by side: their heads share rows so both pages get the same height, and they meet in the middle */
.room .desk.two-up { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 0 10px; }
.room .desk.two-up > .pane { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
.room .desk.two-up > .pane > * { min-width: 0; }
.room .desk.two-up .pane-head { grid-row: 1; }
.room .desk.two-up .pane-foot { grid-row: 2; }
.room .desk.two-up .pane-body { grid-row: 3; }
.room .desk.two-up > .pane:first-child .page-frame { margin-inline-end: 0; }
.room .desk.two-up > .pane:last-child .page-frame { margin-inline-start: 0; }

.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(16, 27, 58, .42); display: grid; place-items: center; padding: 20px; }
.dialog { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.dialog h2 { margin: 0; font-size: var(--text-xl); }
.dialog p { margin: 0; font-size: var(--text-base); line-height: 1.7; color: var(--neutral); }
.dialog b { font-family: var(--quran); font-size: var(--text-lg); color: var(--ink); }
.dialog-actions { display: flex; gap: 8px; margin-top: 6px; }
/* «أنهِها بدون تقرير»: quiet under the two choices; red once it asks to be sure */
.end-skip { display: block; margin: 12px auto 0; padding: 6px 8px; border: 0; background: none; color: var(--ink-2); font: inherit;
  font-size: var(--text-md); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.end-skip.sure { color: var(--danger); font-weight: 700; text-decoration: none; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fresh { from { background: var(--gold); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* =================================================================================================================
   The reading room (room.html, body.rm): the navy design. A header card on top; on the right the navy call card, the
   position, the mistakes and the notes (always open); one bar above the pages; the two pages meet in the middle.
   ================================================================================================================= */
body.rm {
  --rm-ink-3: #636C89; --rm-amber-ink: #7A520B; --rm-fill: var(--fill); --rm-fill-2: var(--fill-2); --rm-navy-2: var(--navy-2); --rm-wash: var(--navy-wash);
  --rm-lift: 0 0 0 1px rgba(16, 27, 58, .07), 0 2px 4px rgba(16, 27, 58, .04), 0 14px 30px -14px rgba(16, 27, 58, .22);
  --rm-ease: cubic-bezier(.23, 1, .32, 1);
  --rm-r: 20px;
  /* the call's line icons (drawn as masks, so a button's label can change without losing its icon) */
  --ic-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E");
  --ic-mic-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10V6a3 3 0 0 0-5.7-1.3M9 9v2a3 3 0 0 0 4.6 2.5M5.5 11a6.5 6.5 0 0 0 10.4 5.2M18.5 11c0 .7-.1 1.4-.3 2M12 17.5V21M3.5 3.5l17 17'/%3E%3C/svg%3E");
  --ic-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='12.5' height='12' rx='2.5'/%3E%3Cpath d='m15.5 10.5 5.5-3v9l-5.5-3'/%3E%3C/svg%3E");
  --ic-video-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 10.5 5.5-3v9l-5.5-3'/%3E%3Cpath d='M9.5 6H13a2.5 2.5 0 0 1 2.5 2.5V12M15.5 15.6A2.5 2.5 0 0 1 13 18H5.5A2.5 2.5 0 0 1 3 15.5v-7a2.5 2.5 0 0 1 1.8-2.4M3.5 3.5l17 17'/%3E%3C/svg%3E");
  --ic-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.2 8.2 0 0 1-12.2 7.2L3.5 20l1.3-4.3a8.2 8.2 0 1 1 15.7-4.1z'/%3E%3C/svg%3E");
  --ic-end: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5c4.7-4.6 12.3-4.6 17 0l-2.3 2.6-3.2-1.3v-2.4a10 10 0 0 0-6 0v2.4l-3.2 1.3z'/%3E%3C/svg%3E");
  --ic-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3.5 5v13.5c3.5-.5 6.5 0 8.5 1.5 2-1.5 5-2 8.5-1.5V5C17 4.5 14 5 12 6.5zM12 6.5V20'/%3E%3C/svg%3E");
}
body.rm ::selection { background: #DCE3F5; color: var(--ink); }
body.rm .small-screen { color: var(--rm-amber-ink); }
body.rm kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line); font: 700 11.5px/1 var(--ui); color: var(--ink-2); vertical-align: middle; }

/* buttons: soft navy by default, the navy gradient for the one way on, a press that sinks */
body.rm .btn { height: 36px; padding: 0 16px; border: 0; background: var(--brand-soft); color: var(--brand); font-size: 14.5px; font-weight: 700; transition: transform 150ms var(--rm-ease), background-color 200ms ease, box-shadow 200ms ease, filter 200ms ease; }
body.rm .btn:active:not(:disabled) { transform: scale(.97); }
body.rm .btn.primary { background: var(--grad); color: var(--on-accent); box-shadow: var(--shadow-navy); }
body.rm .btn:disabled { background: var(--rm-fill-2); color: #8E96AE; box-shadow: none; cursor: not-allowed; }
body.rm .btn.big { width: 100%; height: 52px; margin-top: 6px; font-size: var(--text-input); }
@media (hover: hover) and (pointer: fine) {
  body.rm .btn:not(.primary):not(:disabled):hover { background: #DDE3F4; }
  body.rm .btn.primary:not(:disabled):hover { filter: brightness(1.1); }
}

/* ---------- the header card ---------- */
body.rm .room-bar { flex: none; margin: 12px 16px 0; min-height: 62px; padding: 8px 18px; gap: 8px 16px; border: 0; border-radius: var(--rm-r); box-shadow: var(--shadow); }
body.rm .rm-brand { flex-direction: row; align-items: center; gap: 9px; padding: 0; border: 0; }
body.rm .rm-brand .logo { border-radius: 10px; box-shadow: var(--shadow-navy); }
body.rm .rm-brand b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
body.rm .rm-brand small { display: block; font-size: var(--text-xs); color: var(--rm-ink-3); line-height: 1.3; }
.rm-sep { width: 1px; height: 30px; background: var(--line); }
body.rm .student .avatar { width: 40px; height: 40px; background: var(--grad); color: var(--on-accent); font-size: 16px; font-weight: 800; }
body.rm .student b { font-size: 16px; font-weight: 700; line-height: 1.3; }
body.rm .student div > span { display: block; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.4; }
body.rm .last-pos { gap: 6px; padding: 0; background: none; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
/* a position is always gold */
body.rm .last-pos b, body.rm #note-pos, body.rm #notes .tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; background: var(--gold); color: var(--gold-ink);
  font: 700 13px/1 var(--ui); white-space: nowrap;
}
body.rm .call { gap: 14px; }
body.rm .pill { height: auto; min-height: 28px; padding: 5px 12px; gap: 6px; border: 0; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
body.rm .live { gap: 8px; font-size: 14px; font-weight: 700; }
body.rm .live i { width: 8px; height: 8px; background: #B6BCCC; }
body.rm.in-room .live { color: var(--live); }
body.rm.in-room .live i { background: var(--live); box-shadow: 0 0 0 3px rgba(21, 150, 74, .2); animation: rm-beat 2.2s ease-in-out infinite; }
body.rm .timer { font-size: var(--text-sm); }
body.rm .timer:has(.timer-bar) { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; min-width: 168px; }
body.rm .timer b { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
body.rm .timer span { font-size: 12.5px; color: var(--rm-ink-3); }
body.rm .timer .timer-bar { grid-column: 1 / -1; display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--rm-fill-2); overflow: hidden; }
body.rm .timer-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
body.rm .timer.low b { color: var(--amber); }
/* past the session's time: the time over it, counting on, in amber with the bar full (room.js tick) */
body.rm .timer.over b, body.rm .timer.over span { color: var(--rm-amber-ink); }
body.rm .timer.over .timer-bar i { background: var(--amber); }
/* the whole session's time, under the bar, all along */
body.rm .timer .timer-all { grid-column: 1 / -1; margin-top: 5px; }
body.rm .timer.over .timer-all { color: var(--rm-ink-3); }
body.rm .timer.low .timer-bar i { background: var(--gold-mark); }

/* ---------- before the call: the entry card ---------- */
body.rm .entry, body.rm .ended { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px 16px; }
.entry-trial { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0 4px 16px; border-bottom: 1px solid var(--divider); text-align: start; font-size: var(--text-md); }
.entry-trial select { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--surface); font-size: var(--text-input); font-weight: 700; }
/* where the session starts: gold, as every position */
.entry-start { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 4px 18px; border-bottom: 1px solid var(--divider); }
.entry-start .muted { font-size: var(--text-sm); color: var(--ink-2); }
.entry-surah { font-family: var(--quran); font-size: 46px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.entry-ayah { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 10px; background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-edge); font-size: var(--text-lg); font-weight: 800; color: var(--gold-ink); }
.entry-start #entry-date { margin-top: 4px; }
body.rm .entry-change { height: 36px; margin-top: 10px; background: var(--surface); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-edge); font-size: var(--text-md); }
@media (hover: hover) and (pointer: fine) { body.rm .btn.entry-change:not(.primary):not(:disabled):hover { background: #FFFDF8; } }
.entry-picker { width: 100%; justify-content: center; margin-top: 10px; text-align: start; }
.entry-picker .field:first-child { flex: 1; }
.entry-picker .pick-surah { width: 100%; }
/* the references that open on it, each with a book */
.entry-refs { width: 100%; text-align: start; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 0; font-size: var(--text-md); }
.entry-refs b { font-weight: 700; }
.entry-refs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.6; }
.entry-refs li { position: relative; padding-inline-start: 26px; }
.entry-refs li::before { content: ""; position: absolute; inset-inline-start: 0; top: 3px; width: 17px; height: 17px; background: var(--brand); -webkit-mask: var(--ic-book) center / contain no-repeat; mask: var(--ic-book) center / contain no-repeat; }
.entry-refs li.closed { color: var(--ink-2); }
.entry-refs li.closed::before { background: #A3AAC0; }
/* the student's link into this session (lib/call.js inviteLink) */
.entry-call { width: 100%; text-align: start; display: flex; flex-direction: column; gap: 6px; padding: 14px 4px 0; border-top: 1px solid var(--divider); font-size: var(--text-md); }
.entry-call b { font-weight: 700; }
.entry-call .muted { font-size: var(--text-sm); line-height: 1.6; }
.entry-call-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.entry-call-row .btn { flex: 1 1 auto; }
/* the developer's session: a trial, nothing kept */
.note-trial { width: 100%; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--amber-bg); color: var(--rm-amber-ink); font-size: var(--text-md); font-weight: 500; }
.back-today { display: inline-flex; align-items: center; min-height: 36px; color: var(--brand); font-size: var(--text-md); font-weight: 700; text-decoration: none; }
.back-today:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- after the call: the end card ---------- */
body.rm .ended h1 { margin: 4px 0 2px; font-size: var(--text-3xl); font-weight: 800; }
.done-mark { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); color: var(--on-accent); box-shadow: var(--shadow-navy); display: grid; place-items: center; }
.summary { width: 100%; margin: 4px 0; display: grid; grid-template-columns: auto 1fr; text-align: start; font-size: var(--text-base); border-radius: 16px; background: var(--rm-fill); padding: 4px 18px; }
.summary dt, .summary dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--line); }
.summary dt:first-of-type, .summary dd:first-of-type { border-top: 0; }
.summary dt { padding-inline-end: 18px; color: var(--ink-2); }
.summary dd { font-weight: 700; }
.summary dd.q { justify-self: start; align-self: center; padding: 0 10px; height: 28px; display: inline-flex; align-items: center; border: 0; border-radius: 8px; background: var(--gold); color: var(--gold-ink); font-weight: 800; }
body.rm .ended .entry-card > .muted { font-size: var(--text-md); line-height: 1.7; }
/* after the session: rate the student now, or back to his day (his choice, 2026-10-21) */
body.rm .end-choices { display: grid; gap: 10px; width: 100%; }
body.rm .end-choices .btn { width: 100%; justify-content: center; }
body.rm #restart { margin-top: 4px; }

/* ---------- in the room: the page as a grid ---------- */
body.rm.in-room { grid-template-columns: clamp(320px, 24.5vw, 400px) minmax(0, 1fr); gap: 12px 14px; padding: 12px 16px 14px; }
body.rm.in-room .room-bar { margin: 0; padding: 8px 18px; border: 0; border-radius: var(--rm-r); }

/* the right column: room around each card's shadow, scrolling only on a short screen */
body.rm .side { gap: 10px; margin: -4px -6px -14px; padding: 4px 6px 14px; }
body.rm .rm-card { background: var(--surface); border: 0; border-radius: var(--rm-r); box-shadow: var(--shadow); padding: 12px 16px; }
body.rm .rm-h { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
body.rm .rm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }

/* the call: navy, audio first; the student's picture only when he turns it on, his own small and off */
.rm-call { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 20px; background: var(--grad); color: var(--on-accent); box-shadow: 0 1px 2px rgba(15, 18, 28, .12), 0 16px 30px -18px rgba(15, 18, 28, .5); }
body.rm .video { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; border-radius: 0; background: none; color: inherit; overflow: visible; }
body.rm .student-feed { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #0B1530; }
.rm-voice { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
body.rm .big-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(233, 211, 160, .55); font-size: 26px; font-weight: 800; }
body.rm .big-avatar::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(233, 211, 160, .4); opacity: 0; }
.rm-voice-t { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
body.rm .tile-name { position: static; padding: 0; border-radius: 0; background: none; font-size: 16.5px; font-weight: 700; line-height: 1.35; }
/* his voice: a quiet line while silent, bars while he reads */
body.rm .waves { position: static; display: flex; align-items: center; gap: 3px; height: 16px; opacity: .4; transition: opacity 300ms ease; }
body.rm .waves i { width: 3px; height: 4px; border-radius: 2px; background: #E9C77D; transition: height 200ms var(--rm-ease); }
body.rm .video.speaking .waves { opacity: 1; }
body.rm .video.speaking .waves i { height: 6px; animation: rm-eq 1.1s ease-in-out infinite; }
body.rm .video.speaking .waves i:nth-child(2) { height: 13px; animation-delay: -.35s; }
body.rm .video.speaking .waves i:nth-child(3) { height: 9px; animation-delay: -.7s; }
body.rm .video.speaking .waves i:nth-child(4) { height: 15px; animation-delay: -.2s; }
body.rm .video.speaking .waves i:nth-child(5) { height: 7px; animation-delay: -.55s; }
body.rm .video.speaking .big-avatar::after { animation: rm-ring 2.4s var(--rm-ease) infinite; }
body.rm .self { position: relative; inset: auto; width: 72px; height: 54px; aspect-ratio: auto; border: 0; border-radius: 12px; background: rgba(8, 16, 40, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); display: grid; place-items: center; align-content: center; gap: 3px; overflow: hidden; }
body.rm .self::before { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--ic-video-off) center / contain no-repeat; mask: var(--ic-video-off) center / contain no-repeat; }
body.rm .self video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
body.rm .self-feed { position: absolute; inset: 0; }
body.rm .self-feed video { width: 100%; height: 100%; object-fit: cover; }
body.rm .self-label { position: relative; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(8, 16, 40, .5); }
/* what stops the call from working, said in the card */
body.rm .call-alert { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--amber-bg); color: #7A520B; font-size: var(--text-sm); font-weight: 500; line-height: 1.6; }
body.rm .btn.hear { width: 100%; background: var(--surface); color: var(--brand); box-shadow: none; }
body.rm .call-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.rm .call-controls .btn { flex-direction: column; gap: 6px; height: auto; min-height: 62px; padding: 8px 0; border-radius: 14px; background: rgba(255, 255, 255, .12); color: var(--on-accent); font-size: 11.5px; line-height: 1.2; white-space: normal; text-align: center; }
body.rm .call-controls .btn::before { content: ""; flex: none; width: 21px; height: 21px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
body.rm #mute { --ic: var(--ic-mic); }
body.rm #mute[aria-pressed="true"] { --ic: var(--ic-mic-off); }
body.rm #cam { --ic: var(--ic-video); }
body.rm #chat-btn { --ic: var(--ic-chat); }
body.rm #close-room { --ic: var(--ic-end); background: var(--danger); }
body.rm .call-controls .btn[aria-pressed="true"] { background: var(--surface); color: var(--brand); }
body.rm .mic-row { display: flex; align-items: center; gap: 8px; color: var(--on-accent); font-size: var(--text-sm); }
body.rm .mic-row label { flex: none; font-weight: 700; }
body.rm .mic-row select { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  body.rm .call-controls .btn:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .2); }
  body.rm .call-controls .btn[aria-pressed="true"]:hover { background: #EEF1FA; }
  body.rm #close-room:hover { background: #D23E3E; }
}

/* the current position, large and gold; the AI's state beside its title */
body.rm .track { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 3px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.45; }
body.rm .track i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
body.rm .track.follow { background: var(--live-soft); color: var(--live); }
body.rm .track.follow i { background: var(--live); box-shadow: 0 0 0 3px rgba(21, 150, 74, .2); }
body.rm .track.unsure { background: var(--amber-bg); color: var(--rm-amber-ink); }
body.rm .track.unsure i { background: var(--gold-mark); }
body.rm .track.manual { background: var(--neutral-bg); color: var(--neutral); }
body.rm .track.manual i { background: var(--ink-2); }
.rm-pos-n { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.rm #pos-label { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-edge); font-size: 24px; font-weight: 800; white-space: nowrap; }
.rm-pos-n p { margin: 0; font-size: var(--text-sm); line-height: 1.75; color: var(--rm-ink-3); text-align: end; }

/* memorisation mistakes: two allowed, the third stops the reading (tajweed is not counted) */
body.rm .mistakes-actions { display: flex; align-items: center; gap: 2px; }
body.rm #mistake-add { height: 34px; padding: 0 14px 0 12px; gap: 6px; font-size: 13.5px; }
body.rm .undo { min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--brand); font-size: var(--text-sm); font-weight: 700; transition: background-color 150ms ease; }
body.rm .undo:hover { background: var(--rm-wash); }
.rm-err-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
body.rm .mistakes .count { font-size: 20px; font-weight: 800; white-space: nowrap; }
.rm-pips { flex: 1 1 160px; display: grid; grid-template-columns: 1fr 1fr 3fr; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rm-pips li { height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; color: var(--rm-ink-3); background: var(--rm-fill); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.rm-pips li.on { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px #EBD3A4; }
.rm-pips li:last-child { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1px rgba(194, 52, 52, .28); }
.rm-pips li:last-child.on { background: var(--danger); color: var(--on-accent); box-shadow: none; }
body.rm .mistakes > .muted { display: block; margin-top: 8px; font-size: var(--text-sm); line-height: 1.6; color: var(--rm-ink-3); }
body.rm .mistakes.stop { box-shadow: inset 0 0 0 1.5px rgba(194, 52, 52, .45), var(--shadow); }
body.rm .mistakes.stop .count, body.rm .mistakes.stop > .muted { color: var(--danger); }

/* the sheikh's notes: always open, each on its ayah, the newest by the box he types in */
body.rm .side > .notes { flex: 1 1 0; min-height: 250px; }
body.rm .notes { display: flex; flex-direction: column; gap: 0; padding: 12px 16px 14px; }
body.rm .notes-head span { display: block; margin-top: 2px; font-size: var(--text-sm); line-height: 1.6; color: var(--rm-ink-3); }
body.rm #notes { flex: 1; min-height: 0; margin-top: 6px; padding-top: 12px; gap: 0; overflow: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
body.rm #notes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 8px 0; border-top: 1px solid var(--divider); font-size: var(--text-md); line-height: 1.55; }
body.rm #notes li:first-child { margin-top: auto; border-top: 0; }
body.rm #notes:empty::before { content: "لا توجد ملاحظات بعدُ. اكتب النقطة الأولى في الخانة أدناه."; margin: auto; padding: 8px 12px; text-align: center; font-size: var(--text-sm); line-height: 1.6; color: var(--rm-ink-3); }
body.rm #notes li::before { content: none; }
body.rm #notes .tag { height: 22px; margin: 1px 0 0; padding: 0 7px; font-size: var(--text-xs); }
body.rm #notes p { margin: 0; font-weight: 500; line-height: 1.55; }
body.rm #notes .by-hand { display: inline-block; margin-inline-start: 6px; font-size: 11.5px; font-weight: 700; color: var(--brand); }
body.rm #notes .said { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--rm-ink-3); }
body.rm #notes li.note-new { animation: rm-note-in 600ms var(--rm-ease); border-radius: 0; }
/* «عدّل» on a note (room-notes.js): a quiet pencil, a full finger's reach; open, its words, «احفظ» «إلغاء» and «احذف» */
body.rm #notes .note-edit { width: 40px; height: 40px; margin: -9px -8px -9px 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--rm-ink-3); }
@media (hover: hover) and (pointer: fine) { body.rm #notes .note-edit:hover { background: var(--rm-fill); color: var(--brand); } }
body.rm #notes .note-edit-form { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 8px; }
body.rm #notes .note-edit-form input { height: 40px; padding: 0 12px; border: 1px solid var(--rm-navy-2); border-radius: 12px; background: var(--surface); font-size: var(--text-md); }
body.rm #notes .note-edit-form input:focus { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }
body.rm #notes .note-edit-actions { display: flex; align-items: center; gap: 6px; }
body.rm #notes .note-edit-actions .btn.ghost { background: none; color: var(--ink-2); }
body.rm #notes .note-del { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--danger); font-size: var(--text-sm); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { body.rm #notes .note-del:hover { background: var(--danger-bg); } }
body.rm #note-form { gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--divider); }
body.rm #note-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
body.rm #note-pos { height: 22px; padding: 0 7px; font-size: var(--text-xs); }
body.rm .note-row { gap: 8px; }
body.rm .note-row input { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--rm-fill); transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
body.rm .note-row input::placeholder { color: var(--ink-3); }
body.rm .note-row input:focus { outline: none; border-color: var(--rm-navy-2); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); }
body.rm .note-row .btn { height: 36px; padding: 0 16px; }
.side-demo { flex: none; align-self: center; min-height: 30px; padding: 0 12px; border: 1px dashed var(--gold-edge); border-radius: var(--radius-pill); background: #FFF9EC; color: var(--rm-amber-ink); font-size: var(--text-xs); font-weight: 700; }

/* ---------- the work: one bar above the pages ---------- */
body.rm .work { gap: 12px; }
body.rm .toolbar { gap: 8px 12px; padding: 8px 10px; border: 0; border-radius: var(--rm-r); box-shadow: var(--shadow); }
/* the position by hand: the arrows around the surah and the ayah */
.pos-edit { display: flex; align-items: center; gap: 6px; }
body.rm .pos-edit .icon-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface); color: var(--brand); box-shadow: var(--shadow); transition: transform 120ms ease-out, box-shadow 150ms ease; }
body.rm .pos-edit .icon-btn:hover { box-shadow: var(--rm-lift); }
body.rm .pos-edit .icon-btn:active { transform: scale(.94); }
body.rm .pos-edit .picker { align-items: center; gap: 6px; }
body.rm .pos-edit .field { flex-direction: row; align-items: center; gap: 2px; height: 38px; padding: 4px 14px 4px 6px; border-radius: var(--radius-pill); background: var(--rm-fill); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 150ms ease, box-shadow 150ms ease; }
body.rm .pos-edit .field:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--rm-navy-2), 0 0 0 3px var(--brand-soft); }
body.rm .toolbar label[for="ayah"] { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 12.5px; font-weight: 500; color: var(--rm-ink-3); }
body.rm .pos-edit .pick-surah { height: 30px; min-width: 0; max-width: 170px; padding: 0 2px; border: 0; background: transparent; color: var(--gold-ink); font-weight: 800; }
body.rm .pos-edit .pick-surah:focus-visible, body.rm .pos-edit .pick-ayah:focus-visible { outline: none; }
body.rm .pos-edit .pick-ayah-wrap { height: 30px; align-items: center; border: 0; background: transparent; overflow: visible; }
body.rm .pos-edit .pick-ayah { width: 42px; color: var(--gold-ink); font-weight: 800; }
body.rm .pos-edit .pick-toggle { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; }
body.rm .pos-edit .pick-toggle:hover, body.rm .pos-edit .pick-toggle[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); }
body.rm .toolbar .search { flex: 1 1 170px; min-width: 130px; }
body.rm .toolbar .search-input { height: 38px; }
body.rm .toolbar .results { inset-inline: 0 auto; width: max(100%, 440px); max-width: calc(100vw - 32px); }   /* an ayah's text reads on fewer lines */
/* the volumes: one soft group, the one shown is navy */
body.rm .bar-vols { gap: 4px; padding: 3px; border-radius: 14px; background: var(--rm-fill); box-shadow: inset 0 0 0 1px var(--line); }
body.rm .bar-label { padding-inline: 8px 4px; font-size: 12.5px; font-weight: 700; color: var(--rm-ink-3); }
body.rm .bar-vols .vol-tabs { gap: 2px; }
body.rm .bar-vols .vol-tab { height: auto; min-height: 38px; align-items: flex-start; justify-content: center; gap: 3px; padding: 5px 9px; border-radius: 11px; background: transparent; box-shadow: none; text-align: start; color: var(--ink-2); }
body.rm .bar-vols .vol-tab b { font-size: 13px; line-height: 1; }
body.rm .bar-vols .vol-tab span { font-size: 11.5px; line-height: 1; color: var(--rm-ink-3); }
body.rm .bar-vols .vol-tab[aria-pressed="true"] { background: var(--grad); color: var(--on-accent); box-shadow: var(--shadow-navy); }
body.rm .bar-vols .vol-tab[aria-pressed="true"] span { color: rgba(255, 255, 255, .78); }
body.rm .bar-vols .vol-tab.has-ayah::after { top: 7px; inset-inline-start: auto; inset-inline-end: 6px; }
@media (hover: hover) and (pointer: fine) { body.rm .bar-vols .vol-tab:not([aria-pressed="true"]):hover { background: var(--surface); } }
/* «التفسير» of the ayah being read (lib/tafsir.js ayahPanel, the real side only) */
body.rm .tf-room-btn { height: 38px; padding: 0 14px; font-size: var(--text-md); }
body.rm .tf-room-btn[aria-expanded="true"] { background: var(--grad); color: var(--on-accent); box-shadow: var(--shadow-navy); }

/* ---------- the pages: on paper, meeting in the middle, each with its name and tools under it ---------- */
body.rm .room .desk { gap: 14px; }
body.rm .room .pane-body { order: -1; padding: 0; }
body.rm .room .pane-head { padding: 10px 2px 0; border: 0; border-radius: 0; background: none; gap: 6px 10px; }
body.rm .room .pane-foot { padding: 6px 2px 0; }
body.rm .room .pane-title { flex-wrap: nowrap; }
body.rm .room .pane-title .name { font-size: 13.5px; }
body.rm .room .pane-tools .icon-btn { width: 30px; height: 30px; }
body.rm .room .pg-input { width: 46px; height: 30px; }
body.rm .room .desk.two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 0; }
body.rm .room .desk.two-up .pane-body { grid-row: 1; }
body.rm .room .desk.two-up .pane-head { grid-row: 2; }
body.rm .room .desk.two-up .pane-foot { grid-row: 3; }
/* each page's name and tools as wide as the page (lib/ui.js sets --page-w), on its side of the fold */
body.rm .room .desk.two-up .pane-head, body.rm .room .desk.two-up .pane-foot { width: min(100%, max(var(--page-w, 100%), 500px)); }
body.rm .room .desk.two-up > .pane:first-child > :is(.pane-head, .pane-foot) { justify-self: end; padding-inline-end: 10px; }
body.rm .room .desk.two-up > .pane:last-child > :is(.pane-head, .pane-foot) { justify-self: start; padding-inline-start: 10px; }
body.rm .room .desk:not(.two-up) .pane > :is(.pane-head, .pane-foot) { align-self: center; width: min(100%, max(var(--page-w, 100%), 500px)); }
body.rm .room .page-frame { position: relative; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 27, 58, .06), 0 22px 44px -26px rgba(16, 27, 58, .45); }
body.rm .room .desk.two-up > .pane:first-child .page-frame { border-start-end-radius: 0; border-end-end-radius: 0; }
body.rm .room .desk.two-up > .pane:last-child .page-frame { border-start-start-radius: 0; border-end-start-radius: 0; }
/* the fold where the two pages meet */
body.rm .room .desk.two-up .page-frame::after { content: ""; position: absolute; inset-block: 0; width: 30px; pointer-events: none; }
body.rm .room .desk.two-up > .pane:first-child .page-frame::after { inset-inline-end: 0; background: linear-gradient(to right, rgba(16, 27, 58, .14), rgba(16, 27, 58, 0)); }
body.rm .room .desk.two-up > .pane:last-child .page-frame::after { inset-inline-start: 0; background: linear-gradient(to left, rgba(16, 27, 58, .14), rgba(16, 27, 58, 0)); }
body.rm .room .shelf { flex-basis: 124px; }

/* ---------- «إنهاء الجلسة»: the ending ayah, a step back or on, and where the next session starts ---------- */
body.rm .overlay { background: rgba(16, 27, 58, .42); }
body.rm .dialog { max-width: 440px; gap: 12px; padding: 24px; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(16, 27, 58, .45); }
body.rm .dialog h2 { font-size: var(--text-xl); font-weight: 800; }
body.rm .dialog p { font-size: var(--text-base); color: var(--ink-2); }
.end-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 16px; background: var(--rm-fill); }
body.rm .end-step b { flex: 1; display: grid; place-items: center; height: 48px; border-radius: 12px; background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-edge); font: 800 var(--text-3xl)/1 var(--ui); }
body.rm .end-step .btn { min-width: 76px; background: var(--surface); box-shadow: var(--shadow); }
body.rm .dialog .end-next { font-size: var(--text-md); font-weight: 700; color: var(--brand); }
body.rm .dialog-actions .btn { flex: 1; height: 44px; }
body.rm #confirm-yes { flex: 2; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  body.rm .overlay:not([hidden]) { animation: rm-fade 180ms ease-out; }
  body.rm .overlay:not([hidden]) .dialog { animation: rm-rise 220ms var(--rm-ease); }
}

/* ---------- the trial's tools: one small button, so nothing takes height from the pages ---------- */
.demo-tag { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--amber-bg); color: var(--rm-amber-ink); font-weight: 700; font-size: var(--text-xs); }
.demo-link { color: var(--brand); font-weight: 700; }
.demo-fab { position: fixed; bottom: 12px; left: 12px; z-index: 50; height: 32px; padding: 0 12px; border: 1px dashed var(--gold-edge); border-radius: var(--radius-pill); background: #FFF9EC; color: var(--rm-amber-ink); font-size: var(--text-xs); font-weight: 700; }
body.in-room .demo-fab { display: none; }
.demo-pop { position: fixed; bottom: 52px; left: 12px; z-index: 55; width: 270px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: #FFF9EC; border: 1px dashed var(--gold-edge); border-radius: 18px; box-shadow: 0 20px 44px -14px rgba(16, 27, 58, .3); font-size: var(--text-sm); }
body.in-room .demo-pop { left: auto; right: 12px; bottom: 40px; }
.demo-pop label { display: flex; align-items: center; gap: 6px; }
.demo-pop input { accent-color: var(--brand); }
body.rm .demo-pop .btn { height: 32px; padding: 0 12px; font-size: var(--text-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--gold-edge); }

/* ---------- the real side's chat with the student, over the room (room-chat.js) ---------- */
.room-chat { position: fixed; bottom: 16px; left: 16px; z-index: 60; width: min(340px, calc(100vw - 32px)); max-height: 60vh; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 24px 50px -18px rgba(16, 27, 58, .35); }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-head h2 { margin: 0; font-size: var(--text-input); font-weight: 800; }
.rc-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.rc-list li { align-self: flex-start; max-width: 86%; padding: 8px 12px; border-radius: 16px; background: var(--fill); font-size: var(--text-md); line-height: 1.6; }
.rc-list li.me { align-self: flex-end; background: var(--brand-soft); }
.rc-list li.rc-empty { align-self: center; background: none; color: var(--ink-2); }
.rc-list b { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--ink-2); }
.rc-send { display: flex; gap: 8px; }
.rc-send input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); }
.rc-send .btn { width: 44px; height: 44px; padding: 0; }
/* «التفسير» (lib/tafsir.js ayahPanel): an optional panel over the references */
.room-tafsir { position: fixed; top: 88px; bottom: 16px; left: 16px; z-index: 55; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 24px 50px -18px rgba(16, 27, 58, .35); }
.tf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-head h2 { margin: 0; font-size: var(--text-input); font-weight: 800; }
.tf-status { margin: 0; font-size: var(--text-md); color: var(--ink-2); }
.tf-status:empty { display: none; }
.tf-back { align-self: flex-start; height: 32px; padding: 0 12px; font-size: var(--text-md); }
.tf-books { list-style: none; margin: 0; padding: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.tf-book { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--fill); text-align: start; color: var(--ink); transition: background-color 150ms ease; }
.tf-book:hover { background: var(--brand-soft); }
.tf-book b { font-size: var(--text-base); font-weight: 700; }
.tf-book small { font-size: var(--text-sm); color: var(--ink-2); }
.tf-reading { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.tf-steps { display: flex; align-items: center; gap: 8px; }
.tf-where { flex: 1; min-width: 0; font-size: var(--text-md); text-align: center; }
.tf-reading .tf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px; font-family: var(--quran); font-size: var(--text-lg); line-height: 2; }
.tf-reading .tf-body p { margin: 0 0 8px; }
.tf-reading .tf-body h3 { margin: 10px 0 6px; font-size: var(--text-lg); color: var(--brand); }
.tf-reading .tf-notes { font-size: var(--text-md); color: var(--ink-2); }
.tf-reading .tf-notes hr { width: 30%; margin: 10px 0 6px; border: 0; border-top: 1px solid var(--line); }
.tf-open { align-self: flex-start; gap: 6px; color: var(--ink); text-decoration: none; }

/* ---------- motion: the live beat, his voice, a new note; nothing under reduced motion (above) ---------- */
@keyframes rm-beat { 50% { box-shadow: 0 0 0 6px rgba(21, 150, 74, 0); } }
@keyframes rm-eq { 50% { transform: scaleY(.45); } }
@keyframes rm-ring { 0% { opacity: .9; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes rm-note-in { from { opacity: 0; transform: translateY(6px); background: var(--gold); } 40% { opacity: 1; transform: none; } }
@keyframes rm-fade { from { opacity: 0; } }
@keyframes rm-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- narrower screens: the call column on top, then the pages one under the other ---------- */
@media (max-width: 1100px) {
  body.rm { height: auto; min-height: 100%; overflow: visible; }
  body.rm.in-room { display: flex; flex-direction: column; padding: 10px; gap: 10px; }
  body.rm.in-room .small-screen { position: static; border-radius: 14px; }
  body.rm .side { overflow: visible; margin: 0; padding: 0; }
  body.rm .side > .notes { flex: none; min-height: 0; }
  body.rm #notes { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  body.rm .room .desk, body.rm .room .desk > .pane { flex: none; }
  body.rm .room .desk.two-up { display: flex; flex-direction: column; gap: 22px; }
  body.rm .room .desk.two-up > .pane { display: flex; }
  body.rm .room .desk.two-up .pane-head, body.rm .room .desk.two-up .pane-foot { width: auto; }
  body.rm .room .pane-body { flex: none; aspect-ratio: 5 / 7; max-height: 86vh; }
  body.rm .room .desk.two-up > .pane .page-frame { margin: auto; border-radius: 7px; }
  body.rm .room .desk.two-up .page-frame::after { content: none; }
  body.rm .room .desk.two-up > .pane .pane-head, body.rm .room .desk.two-up > .pane .pane-foot { padding-inline: 2px; }
}
.rm-back { display: none; }
@media (max-width: 760px) {
  body.rm .small-screen { display: none; }   /* the iPhone app: no «افتحها من الكمبيوتر» */
  body.rm:not(.in-room) .rm-back { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -6px 0 2px; padding: 0 2px; border: 0; background: none; color: var(--navy-2); font-size: 17px; font-weight: 500; }
  .rm-back:active { opacity: .55; }
  body.rm .room-bar { margin: 10px 10px 0; padding: 10px 14px; }
  body.rm.in-room .room-bar { padding: 10px 14px; }
  .rm-sep { display: none; }
  body.rm .call { margin-inline-start: 0; gap: 10px 12px; }
  body.rm .entry, body.rm .ended { padding: 16px 10px 64px; }   /* the end clears «وضع التجربة» */
  .entry-card { padding: 22px 16px 18px; }
  .entry-surah { font-size: 38px; }
  .rm-pos-n { flex-wrap: wrap; }
  .rm-pos-n p { text-align: start; }
  body.rm .toolbar .search, body.rm .bar-vols { flex: 1 1 100%; }
  body.rm .bar-vols { flex-wrap: wrap; }
  body.rm .bar-vols .vol-tabs { flex-wrap: wrap; }
  body.rm .room .shelf { flex-basis: auto; }
  body.rm .room .desk:not(.two-up) { flex-direction: column; }
  body.rm .room .shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.rm .room .shelf-title { grid-column: 1 / -1; }
  body.rm .room .spine { min-height: 112px; }
}

/* the session recorded (RECORDINGS.md §5), calm: the header's chip with a small gold dot (no red, no blinking), the
   entry card's line, and one quiet line in the call's card when this device cannot record */
.rec-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--gold); color: var(--gold-ink); font-size: 12.5px; font-weight: 700; }
.rec-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-mark); }
.rec-chip:empty { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }   /* there, unseen */
.entry-rec { width: 100%; margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-md); line-height: 1.7; color: var(--ink-2); }
.entry-rec::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-mark); }
.entry-rec[hidden] { display: none; }
body.rm .rec-note { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: rgba(255, 255, 255, .82); }
body.rm .rec-note:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }     /* there, unseen */