/* Shared tokens and components for إسناد. The look is the navy design canvas (2026-10-19): navy brand, gold for
   ayah positions, Tajawal. --brand is still the brand token's name (every page uses it); its value is navy now. */
:root {
  --ground: #F2F4F9; --surface: #FFFFFF; --ink: #101B3A; --ink-2: #56617F;
  --line: #DFE4EF; --divider: #EDF0F6; --brand: #1E3A7B; --brand-hover: #16295C;
  --brand-soft: #E9EDF8; --live: #117A3C; --gold: #F7EEDA; --gold-ink: #8A6420; --gold-edge: #E4CB93;
  --amber-bg: #FBF1DE; --amber: #855B0E; --neutral-bg: #EBEEF5; --neutral: #3E4762;
  --danger: #C23434; --danger-bg: #FBEAEA; --paper: #EEF1F7;
  --live-soft: #E3F5EA; --gold-mark: #B98A34; --gold-light: #E9C77D;   /* the gold rule and bars on navy */
  /* the brand mark's teal leaf and navy chain: --teal fills (navy text on it), --teal-ink is teal text on white (AA) */
  --teal: #3AC5BF; --teal-ink: #0B7A75; --teal-soft: #E6F7F6; --navy-deep: #1C234A;
  --grad: linear-gradient(135deg, #132457 0%, #2A4B9E 100%);   /* primary buttons, the menu's current page, one hero card */
  --shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 1px 2px rgba(16, 27, 58, .03), 0 8px 22px -12px rgba(16, 27, 58, .12);
  --shadow-navy: 0 16px 32px -16px rgba(22, 41, 92, .55);
  --shadow-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);
  --shadow-deep: 0 14px 28px -16px rgba(16, 27, 58, .42);     /* raised navy pieces: a neutral shadow, never a coloured glow */
  --fill: #F4F6FB; --fill-2: #E8ECF5; --ink-3: #5F6884; --navy-2: #2A4B9E; --navy-wash: #F3F5FC;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ui: 'Tajawal', -apple-system, 'SF Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --quran: 'Amiri', 'Noto Naskh Arabic', serif;
  --on-accent: #FFFFFF;      /* text on the green and the other solid colours */
  /* The scale every page uses. Type (px): body 15, a field 16 (iOS Safari zooms into a smaller one), headings 18–24;
     the few larger figures (clocks, the logo) keep their own size. */
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-base: 15px; --text-input: 16px;
  --text-lg: 18px; --text-xl: 20px; --text-2xl: 22px; --text-3xl: 24px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --radius-card: 20px; --radius-xl: 24px;    /* every card on every page; the navy hero cards and the sheets */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--ui); display: flex; flex-direction: column; overflow: hidden; }
button { font-family: inherit; font-size: var(--text-base); color: var(--ink); }
input, select, textarea { font-family: inherit; font-size: var(--text-input); color: var(--ink); }
p { line-height: 1.6; }      /* reading text breathes; a component sets its own when it needs */
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.brand { display: flex; flex-direction: column; padding-inline-end: 16px; border-inline-end: 1px solid var(--line); }
.logo { flex: none; border-radius: 22%; }
.word .logo { display: inline-block; margin-inline-end: 8px; vertical-align: middle; }
.brand .word { margin: 0; font-family: var(--quran); font-weight: 700; font-size: 26px; color: var(--brand); line-height: 1.1; }
.brand .sub { font-size: var(--text-xs); color: var(--ink-2); }

.icon-btn { flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); display: grid; place-items: center; font-size: var(--text-lg); line-height: 1; padding: 0; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--text-base); font-weight: 500; text-decoration: none; }
a.btn { color: var(--brand); }
/* One button, three sizes (review 2026-10-26): small for a row's own action, the normal one, large for a page's main one. */
.btn.sm { height: 36px; padding: 0 14px; font-size: var(--text-sm); }
.btn.lg { height: 52px; padding: 0 22px; font-size: var(--text-input); }      /* a link drawn as a button: never the browser's link blue */
.btn.primary { background: var(--grad); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-navy); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
/* A press shows (a phone has no hover): a slight sink, quick to come back. */
.btn, .icon-btn, .kpi { transition: transform 120ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
.btn:active:not(:disabled), .icon-btn:active, a.kpi:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) { .btn, .icon-btn, .kpi { transition: none; } .btn:active:not(:disabled), .icon-btn:active, a.kpi:active { transform: none; } }

.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; border: 0; white-space: nowrap; }
.chip.here { background: var(--gold); color: var(--gold-ink); }
.chip.alt { background: var(--brand-soft); color: var(--brand); }
.chip.warn { background: var(--amber-bg); color: var(--amber); }
.chip.back { background: var(--brand); color: var(--on-accent); }

/* A failed save on the real side (lib/db-core.js showError): over the page for a few seconds. */
.db-alert { position: fixed; inset-inline: 16px; bottom: 24px; z-index: 90; max-width: 520px; margin: 0 auto; padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); font-size: var(--text-base); font-weight: 500; line-height: 1.6;
  box-shadow: 0 10px 28px rgba(22, 32, 28, .14); }
/* A move is an app's, not a new web page's (2026-10-22): inside a page the apps fade their screens (lib/dom.js fadeTo)
   and what is named (the sheikh's side column, nav.css; the student's bars, student.css) stays still. Between pages
   (sheikh.html ↔ schedule.html) the browser keeps the old one on screen until the next is drawn, whole, from the rows
   kept on the device (render-blocking script, lib/db-core.js startKept). Not cross-document View Transitions: they
   left clicks hanging and «Transition was skipped» errors when a page faded while the next one came (suite F02, F12d). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
/* «فعّل الإشعارات» (lib/push.js): before the phone's own one-time question, what he will hear. */
.push-ask { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); color: var(--brand); }
.push-ask .pa-text { flex: 1; display: grid; gap: 2px; color: var(--ink); }
.push-ask b { font-size: var(--text-base); font-weight: 800; }
.push-ask small { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-2); }
.push-ask .btn { flex: none; height: 36px; padding: 0 18px; }
/* An app opening while its data comes (lib/db-core.js startOnScreen): a ring, a line, and «حاول مرة ثانية» when slow. */
.page-wait { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.page-wait p { margin: 0; max-width: 340px; font-size: var(--text-md); line-height: 1.7; color: var(--ink-2); }
.page-wait-ring { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--brand-soft); border-top-color: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .page-wait-ring { animation: page-wait-turn 900ms linear infinite; }
  @keyframes page-wait-turn { to { transform: rotate(360deg); } }
}


/* ---------- ayah picker ---------- */
.picker { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 2px; }
.field label { font-size: var(--text-xs); color: var(--ink-2); }
.pick-surah { height: 40px; min-width: 150px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 10px; background: var(--surface); font-size: var(--text-input); font-weight: 700; color: var(--ink); cursor: pointer; }
.pick-ayah-wrap { display: flex; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.pick-ayah-wrap:focus-within { border-color: var(--brand); }
.pick-ayah { width: 56px; border: 0; text-align: center; background: transparent; font-size: var(--text-input); font-weight: 700; font-variant-numeric: tabular-nums; }
.pick-ayah:focus { outline: none; }
.pick-toggle { width: 34px; border: 0; border-inline-start: 1px solid var(--line); background: var(--ground); color: var(--ink-2); display: grid; place-items: center; transition: background-color 150ms ease, color 150ms ease; }
.pick-toggle:hover, .pick-toggle[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); }
/* the ayah numbers: a card under the picker; the current ayah is gold, as every position is */
.pick-pop { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 40; width: 340px; max-height: 320px; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 20px 44px -14px rgba(16, 27, 58, .3); overflow: hidden; transform-origin: top right; }
.pick-head { padding: 12px 16px 10px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--divider); }
.pick-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; padding: 10px; }
.pick-grid button { height: 38px; border: 0; border-radius: 10px; background: var(--ground); font-size: var(--text-base); font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color 120ms ease, color 120ms ease; }
.pick-grid button:hover { background: var(--brand-soft); color: var(--brand); }
.pick-grid button[aria-current="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-edge); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .pick-pop, .results { animation: drop-in 160ms cubic-bezier(.23, 1, .32, 1); }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
}

/* ---------- search ---------- */
/* A pill; a page may put a search icon (.search-ic) and a key hint (.search-key) inside it. */
.search { position: relative; }
.search-input { width: 100%; height: 40px; border: 0; border-radius: var(--radius-pill); padding: 0 16px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--text-input); transition: background-color 150ms ease, box-shadow 150ms ease; }
.search-input::placeholder { color: var(--ink-3); }
.search-input:focus { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--navy-2), 0 0 0 4px var(--brand-soft); outline: none; }
.search-ic, .search-key { position: absolute; top: 50%; translate: 0 -50%; pointer-events: none; }
.search-ic { inset-inline-start: 14px; color: var(--ink-2); }
.search:has(> .search-ic) .search-input { padding-inline-start: 40px; }
.search-key { inset-inline-end: 10px; display: grid; place-items: center; min-width: 22px; height: 22px; 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 12px/1 var(--ui); color: var(--ink-2); }
.search-input:focus ~ .search-key, .search-input:not(:placeholder-shown) ~ .search-key { display: none; }
.results { position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 40; max-height: 60vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 20px 44px -14px rgba(16, 27, 58, .3); transform-origin: top; }
.results .result { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--divider); background: none; text-align: start; }
.results .result:last-child { border-bottom: 0; }
.results .result[aria-selected="true"] { background: var(--navy-wash); }
.results .result .where { font-size: var(--text-sm); font-weight: 700; color: var(--brand); }
.results .result .snip { font-family: var(--quran); font-size: var(--text-lg); line-height: 1.7; }
.results .result mark { background: var(--gold); color: var(--gold-ink); border-radius: 3px; }
.results .empty { padding: 14px 16px; font-size: var(--text-md); color: var(--ink-2); }

/* ---------- reference desk ---------- */
/* Each pane: its title and page tools, its notes beside the zoom tools, then the page on paper (lib/ui.js Pane). */
.desk { flex: 1; min-height: 0; display: flex; gap: 14px; }
.pane { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 14px 6px; }
.pane-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; line-height: 1.3; min-width: 0; }
.pane-title .role { font-size: var(--text-xs); color: var(--ink-2); }
.pane-title .name { margin: 0; font-size: var(--text-md); font-weight: 700; }
.pane-tools { display: flex; align-items: center; gap: 4px; }
.pane-tools .icon-btn { width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--surface); color: var(--brand); box-shadow: var(--shadow); transition: transform 120ms ease-out, box-shadow 150ms ease; }
.pane-tools .icon-btn:hover { color: var(--brand); box-shadow: 0 0 0 1px rgba(16, 27, 58, .1), 0 10px 22px -10px rgba(16, 27, 58, .3); }
.tools-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.pg-jump { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; }
.pg-input { width: 52px; height: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color 150ms ease, box-shadow 150ms ease; }
.pg-input:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.pane-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; padding: 0 14px 10px; }
.pane-zoom { margin-inline-start: auto; }
.pane-extra:empty, .pane-note:empty { display: none; }
.pane-note { min-width: 0; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-2); }
.pane-note .chip { height: 24px; font-weight: 700; }
.pane-note .chip.here { box-shadow: inset 0 0 0 1px var(--gold-edge); }
.pane-note .chip.alt { background: var(--surface); color: var(--brand); box-shadow: inset 0 0 0 1px var(--line); }
.pane-note button.chip { cursor: pointer; transition: background-color 150ms ease; }
.pane-note .chip.alt:hover { background: var(--navy-wash); }
.pane-note .chip.back { background: var(--grad); }
.pane-note .chip.warn { color: #7A520B; }   /* the amber reads at 4.5:1 on its tint */
.pane-body { flex: 1; min-height: 0; overflow: auto; background: var(--paper); display: flex; padding: 12px; -webkit-user-select: none; user-select: none; }
.page-frame { margin: auto; flex: none; overflow: hidden; background: var(--surface); border-radius: 4px; box-shadow: 0 0 0 1px rgba(16, 27, 58, .06), 0 18px 36px -22px rgba(16, 27, 58, .45); }
.page-img { display: block; max-width: none; height: auto; }
.pane-empty { margin: auto; max-width: 360px; padding: 18px 20px; border-radius: 14px; background: var(--amber-bg); color: #7A520B; font-size: var(--text-base); line-height: 1.8; text-align: center; }
.pane-body:has(.page-frame:not([hidden])) { cursor: zoom-in; }   /* one click zooms in (lib/ui.js Pane), the next zooms out */
.pane.zoomed .pane-body { cursor: zoom-out; }

/* the volumes as tabs: the one shown is navy, a gold dot marks the volume with the current ayah */
.vol-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 14px 10px; }
.vol-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 6px; border: 0; border-radius: 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.3; min-width: 0; transition: background-color 150ms ease, color 150ms ease; }
.vol-tab b { font-size: var(--text-sm); font-weight: 700; }
.vol-tab span { font-size: var(--text-2xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vol-tab:not([aria-pressed="true"]):hover { background: var(--brand-soft); }
.vol-tab[aria-pressed="true"] { background: var(--grad); box-shadow: var(--shadow-navy); color: var(--on-accent); }
.vol-tab[aria-pressed="true"] span { color: rgba(255, 255, 255, .78); }
.vol-tab.has-ayah::after { content: ""; position: absolute; top: 6px; inset-inline-start: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-mark); }
.vol-tab[aria-pressed="true"].has-ayah::after { background: #E9C77D; }

/* the references closed: their volumes as navy spines on a shelf beside the mushaf */
.shelf { flex: 0 0 132px; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.shelf-title { display: flex; flex-direction: column; gap: 2px; text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
.shelf-title span { font-family: var(--quran); font-size: var(--text-lg); font-weight: 700; color: var(--brand); }
.shelf-title small { font-size: var(--text-2xs); color: var(--ink-2); line-height: 1.5; }
.spine { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 8px 12px 12px 8px; background: linear-gradient(90deg, rgba(8, 16, 40, .35) 0 9px, transparent 9px), var(--grad); color: var(--on-accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 20px -14px rgba(22, 41, 92, .7); position: relative; padding: 6px; transition: filter 150ms ease, transform 120ms ease-out; }
.spine::before, .spine::after { content: ""; position: absolute; inset-inline: 18px 8px; height: 2px; background: var(--gold-edge); opacity: .75; }
.spine::before { top: 12px; } .spine::after { bottom: 12px; }
.spine:hover { filter: brightness(1.12); }
.spine:active { transform: scale(.98); }
.spine-vol { font-size: var(--text-md); font-weight: 700; }
.spine-range { font-size: var(--text-2xs); color: rgba(255, 255, 255, .78); text-align: center; line-height: 1.4; }
.spine-here { display: none; font-size: var(--text-2xs); font-weight: 700; color: var(--gold-ink); background: var(--gold); border-radius: var(--radius-pill); padding: 1px 8px; }
.spine.has-ayah .spine-here { display: inline-block; }

/* An app, not a page: no grey flash on a tap, no copy menu on a long press of a button or a link, and controls'
   words are not picked up when a thumb drags across them. */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"] { -webkit-touch-callout: none; }
button, [role="button"], .tabbar, .top { -webkit-user-select: none; user-select: none; }

/* «نزل تحديث جديد» (lib/fresh.js): a navy pill over the page, under the phone's top bar, until he taps it */
.fresh { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 56px); left: 50%; transform: translateX(-50%); z-index: 200; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--grad); color: var(--on-accent); font-size: var(--text-base); font-weight: 700;
  white-space: nowrap; box-shadow: 0 12px 28px -10px rgba(16, 27, 58, .55); }

/* a student's photo the sheikh taps (lib/photo-view.js): the frame keeps its look as a button; the photo opens on a dark
   ground at its own size, never past the screen, its name under it and ✕ in reach */
.pv-open { padding: 0; border: 0; font: inherit; cursor: zoom-in; }
.pv-open:active { opacity: .8; }
.pv { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px); background: rgba(6, 12, 30, .92); cursor: zoom-out; }
.pv-img { max-width: 100%; max-height: calc(100% - 40px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7); }
.pv-name { margin: 0; color: #fff; font-size: var(--text-base); font-weight: 700; }
.pv-x.icon-btn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); inset-inline-end: 12px; width: 44px; height: 44px; border-radius: 50%;
  border-color: transparent; background: rgba(255, 255, 255, .16); color: #fff; }

/* privacy.html / terms.html opened over a form (lib/legal.js): the page's own text, and a way back to the form */
.legal-sheet { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 16px 18px 24px; border: 0;
  border-radius: var(--radius-lg); background: var(--ground); color: var(--ink); overflow: auto; }
.legal-sheet::backdrop { background: rgba(16, 27, 58, .45); }
.legal-sheet > .btn { position: sticky; top: 0; z-index: 1; margin-bottom: 8px; }
.legal-sheet section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin: 12px 0; }
.legal-sheet h1 { font-size: var(--text-xl, 22px); margin: 0; } .legal-sheet h2 { font-size: var(--text-lg, 18px); margin: 0 0 6px; }
.legal-sheet header { display: flex; align-items: center; gap: 12px; } .legal-sheet header img { width: 44px; height: 44px; border-radius: 12px; }

/* the time picker (lib/slot-picker.js): the days, wrapping (a strip cut the seventh off a phone's edge, 2026-10-30), then the
   chosen day's free times as buttons, each with when it would end; the chosen one navy, a taken one dimmed */
.sp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sp-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.sp-day, .sp-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 56px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; }
.sp-day { padding: 6px 10px; }
.sp :is(.sp-day, .sp-slot) b { font-family: inherit; font-size: var(--text-base); font-weight: 700; color: inherit; }   /* not .dialog b's */
.sp-day small, .sp-slot small { font-size: var(--text-md); color: var(--ink-3); }
.sp-slot.sp-now { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }   /* the time it has now (lib/slot-picker.js) */
.sp-slot.sp-now small { color: var(--brand); font-weight: 700; }
.sp-day[aria-pressed="true"], .sp-slot[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: var(--on-accent); }
.sp-day[aria-pressed="true"] small, .sp-slot[aria-pressed="true"] small { color: rgba(255, 255, 255, .82); }
.sp-slot:disabled { background: var(--neutral-bg); border-color: transparent; color: #8E96AE; cursor: default; }
.sp-times { display: flex; flex-direction: column; gap: 10px; }
.sp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sp-part { display: flex; flex-direction: column; gap: 6px; }
.sp-part > span { font-size: var(--text-md); font-weight: 600; color: var(--ink-3); }
.sp-empty { margin: 0; font-size: var(--text-md); color: var(--ink-3); }
.sp-more { align-self: flex-start; min-height: 40px; font-weight: 700; }

/* a sheet over the page (.overlay / .dialog, room.css): on a phone it rises from the bottom, full width, over both bars of
   the app (nav.css), its content scrolling and its buttons staying at its bottom, on its own background (a sticky bar that
   bleeds over the sheet's padding) */
.dialog.sheet { --sheet-x: 24px; --sheet-b: 24px; max-width: 520px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.dialog.sheet .dialog-actions { position: sticky; bottom: calc(-1 * var(--sheet-b)); margin: 0 calc(-1 * var(--sheet-x)) calc(-1 * var(--sheet-b));
  padding: 6px var(--sheet-x) var(--sheet-b); background: var(--surface); }
.dialog.sheet .sheet-sub { margin: -4px 0 4px; font-size: var(--text-md); color: var(--ink-3); }
.sheet-acts { display: flex; flex-direction: column; gap: 8px; }
.sheet-acts .btn { justify-content: flex-start; min-height: 52px; }
.sheet-acts .btn.no { color: var(--danger); }
@media (max-width: 760px) {
  .overlay:has(> .sheet) { place-items: end stretch; padding: 0; }
  .dialog.sheet { --sheet-x: 16px; --sheet-b: calc(18px + env(safe-area-inset-bottom)); max-width: none; max-height: 88dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px var(--sheet-x) var(--sheet-b); }
}

/* the voice consent, asked once at sign-up and on the invite (lib/consent.js) */
.consent-sheet { width: min(460px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 12px; padding: 24px 20px 20px; text-align: center; }
.consent-sheet[open] { display: flex; }
.consent-sheet h2 { margin: 0; font-size: var(--text-xl); }
.consent-sheet p { margin: 0 0 6px; font-size: var(--text-base); line-height: 1.8; color: var(--ink-2); }
.consent-ic { align-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.consent-sheet .btn { position: static; margin: 0; }
.terms-line { margin: 0; font-size: var(--text-md); line-height: 1.8; color: var(--ink-2); }

/* a session's recording (lib/recording-player.js), in the sheikh's file and the student's «تقاريري»: play, the bar over
   the whole session (right to left, as the page reads), the time; a failure in a quiet line under them */
.rec-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.rec-play { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand); cursor: pointer; transition: background-color 150ms ease-out; }
.rec-play:hover { background: #DCE3F4; }
.rec-play:focus-visible, .rec-bar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rec-bar { width: 100%; height: 24px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.rec-time { font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-err { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); line-height: 1.7; color: var(--ink-2); }
.rec-err:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }     /* there for its words, unseen */