/* جذور وثمار — رفيق الميسّر. RTL first; logical properties only. */
:root {
  --sand-50:  #faf7f2;
  --sand-100: #f4eee4;
  --sand-200: #e8dfd0;
  --sand-300: #d8cab3;
  --ink:      #2a2622;
  --ink-soft: #5c544b;
  --ink-faint:#8a8177;
  --green-900:#143528;
  --green-700:#1f4d3a;
  --green-500:#2f7355;
  --green-100:#dfeee6;
  --amber-600:#b06a16;
  --amber-100:#fbeed6;
  --white:    #fffdfa;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(42,38,34,.06), 0 8px 24px rgba(42,38,34,.07);
  --rail: 19rem;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: 18px; line-height: 1.8;
  color: var(--ink); background: var(--sand-50);
  -webkit-text-size-adjust: 100%;
}
.boot { padding: 3rem; color: var(--ink-faint); text-align: center; }

/* ---------- controls ---------- */
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--sand-300);
  border-radius: 9px; background: var(--white);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green-500); outline-offset: 2px;
}
.btn {
  font: inherit; font-weight: 500; cursor: pointer; width: auto;
  padding: .7rem 1.2rem; border-radius: 9px; border: 1px solid transparent;
  background: var(--green-700); color: var(--white);
  text-decoration: none; display: inline-block; text-align: center;
}
.btn:hover { background: var(--green-900); color: var(--white); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn--ghost { background: transparent; color: var(--green-700); border-color: var(--sand-300); }
.btn--ghost:hover { background: var(--sand-100); color: var(--green-900); }
.btn--sm { padding: .35rem .7rem; font-size: .85rem; }
.error { color: #9b2c2c; font-size: .9rem; min-height: 1.4em; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100dvh; }
.rail {
  background: var(--sand-100); border-inline-start: 1px solid var(--sand-200);
  padding: 1.25rem 1rem 3rem; position: sticky; top: 0; align-self: start;
  max-height: 100dvh; overflow-y: auto;
}
.rail__brand { font-weight: 600; color: var(--green-900); font-size: 1.05rem; margin-block-end: .25rem; }
.rail__phase { font-size: .8rem; color: var(--ink-faint); margin-block-end: 1rem; }
.rail__search { margin-block-end: 1rem; }
.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__item a {
  display: flex; gap: .5rem; align-items: baseline; justify-content: space-between;
  padding: .5rem .6rem; border-radius: 8px; text-decoration: none;
  color: var(--ink); font-size: .95rem; line-height: 1.5;
}
.rail__item a:hover { background: var(--sand-200); }
.rail__item.is-active a { background: var(--green-100); color: var(--green-900); font-weight: 500; }
.rail__item--alt a { color: var(--ink-soft); font-size: .9rem; padding-inline-start: 1.25rem; }
.badge {
  flex: none; font-size: .75rem; color: var(--ink-faint);
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: 999px; padding: 0 .45rem;
}
.rail__sep { font-size: .75rem; color: var(--ink-faint); margin: 1.1rem .6rem .35rem; }

.main { padding: 2rem clamp(1rem, 4vw, 3rem) 6rem; max-width: 56rem; }
.topbar { display: none; }

/* ---------- session ---------- */
.sess__kind { font-size: .8rem; color: var(--amber-600); font-weight: 500; }
.sess__title { font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.4; margin: .2rem 0 .3rem; color: var(--green-900); }
.sess__sub { color: var(--ink-soft); margin: 0 0 .75rem; }
.sess__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--ink-faint); margin-block-end: 1.5rem; }
.sess__meta span { background: var(--white); border: 1px solid var(--sand-200); border-radius: 999px; padding: .1rem .6rem; }

.plan { border: 1px solid var(--sand-200); border-radius: var(--radius); background: var(--white); overflow: hidden; margin-block-end: 2rem; }
.plan__head { padding: .7rem 1rem; background: var(--sand-100); font-weight: 600; font-size: .95rem; }
.plan table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.plan td, .plan th { padding: .5rem .8rem; border-top: 1px solid var(--sand-200); text-align: start; vertical-align: top; }
.plan .min { white-space: nowrap; color: var(--green-700); font-weight: 500; width: 1%; }
.plan a { color: var(--green-700); }

.block { margin-block-end: 1.4rem; scroll-margin-top: 1rem; }
.block__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.block__h { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--green-900); line-height: 1.5; }
.block--l3 .block__h { font-size: 1rem; }
.block__tag {
  font-size: .72rem; color: var(--amber-600); background: var(--amber-100);
  border-radius: 999px; padding: .05rem .5rem; flex: none;
}
.block__tools { margin-inline-start: auto; display: flex; gap: .3rem; opacity: 0; transition: opacity .12s; }
.block:hover .block__tools, .block:focus-within .block__tools { opacity: 1; }
.block__body { margin-block-start: .3rem; }
.block__body p { margin: .5rem 0; }
.block__body ul { margin: .5rem 0; padding-inline-start: 1.3rem; }
.block__body li { margin: .25rem 0; }
.block__body table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .92rem; }
.block__body td, .block__body th { border: 1px solid var(--sand-200); padding: .45rem .6rem; text-align: start; vertical-align: top; }
.block__body img { max-width: 100%; height: auto; border-radius: 8px; }
.block__body figure { margin: .75rem 0; }

.block--room { border-inline-start: 3px solid var(--green-500); padding-inline-start: .9rem; }
.block--child { margin-inline-start: clamp(.5rem, 2vw, 1.5rem); }
.block--texts .block__body, .block--prayer .block__body {
  font-family: 'Noto Naskh Arabic', serif; font-size: 1.08em; line-height: 2;
}
.block--callout .block__body, .block--callout {
  background: var(--green-100); border: 0; border-radius: var(--radius); padding: .25rem 1rem;
}
.block.is-high { box-shadow: inset 0 0 0 2px var(--amber-600); border-radius: var(--radius); }

.note { background: var(--amber-100); border-inline-start: 3px solid var(--amber-600);
  border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; font-size: .95rem; }
.note__del { float: inline-end; }
.noteform { margin: .5rem 0; }
.noteform textarea { min-height: 4.5rem; resize: vertical; }
.noteform__row { display: flex; gap: .5rem; margin-block-start: .4rem; }

.gloss { border-block-end: 1px dotted var(--green-500); cursor: help; }
.ref { color: var(--green-700); text-decoration: underline dotted; cursor: pointer; }

/* ---------- search ---------- */
.results { list-style: none; margin: 0; padding: 0; }
.results li { border-block-end: 1px solid var(--sand-200); padding: .8rem 0; }
.results a { color: var(--green-900); font-weight: 500; text-decoration: none; }
.results .snippet { color: var(--ink-soft); font-size: .92rem; }
.results mark { background: var(--amber-100); color: inherit; padding: 0 .1em; }
.results .where { font-size: .8rem; color: var(--ink-faint); }

/* ---------- bottom sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(20,53,40,.35); }
.sheet__panel {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  background: var(--white); border-start-start-radius: 18px; border-start-end-radius: 18px;
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  max-height: 72dvh; overflow-y: auto; box-shadow: var(--shadow);
  margin-inline: auto; max-width: 40rem;
}
.sheet__close {
  position: absolute; inset-block-start: .5rem; inset-inline-end: .75rem;
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-faint);
}
.sheet__term { font-weight: 600; color: var(--green-900); font-size: 1.15rem; margin: 0 0 .4rem; }
.sheet__ref { font-family: 'Noto Naskh Arabic', serif; font-size: 1.4rem; color: var(--green-900); }
.sheet__hint { color: var(--ink-faint); font-size: .9rem; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static; max-height: none; border: 0;
    border-block-end: 1px solid var(--sand-200);
  }
  .rail.is-collapsed .rail__list, .rail.is-collapsed .rail__search, .rail.is-collapsed .rail__sep { display: none; }
  .topbar { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-block-end: .5rem; }
  .main { padding: 1.25rem 1rem 5rem; }
  body { font-size: 17px; }
}

/* a block with no heading still gets its tools row, collapsed to zero height
   until hover so it never pushes the content around */
.block__head--bare { min-height: 0; }
.block__head--bare .block__tools { margin-block-end: .2rem; }

/* rail header + phone toggle */
.rail__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.rail__toggle { display: none; flex: none; }
@media (max-width: 860px) {
  .rail__toggle { display: inline-block; }
  .rail { padding-block: .85rem; }
  .rail.is-collapsed { padding-block-end: .85rem; }
}

/* ===================== Presenting =====================
   The deck is the session; the presenter view is a cockpit, not a mirror.
   What was here before - a card per step plus a list of blocks to cast onto
   the screen one at a time - is gone with the casting it served.
   ====================================================== */
.pres { display: flex; flex-direction: column; min-height: 100dvh;
        padding-block-end: env(safe-area-inset-bottom, 0px); }
.pres__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem clamp(.75rem,3vw,1.5rem);
  padding-block-start: calc(.55rem + env(safe-area-inset-top, 0px));
  background: var(--white); border-block-end: 1px solid var(--sand-200); }
.pres__back { color: var(--green-700); text-decoration: none; font-size: .9rem; flex: none; }
.pres__title { font-weight: 500; color: var(--green-900); flex: 1 1 10rem;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres__room { display: flex; flex-direction: column; align-items: center; flex: none;
  background: var(--green-100); border-radius: 10px; padding: .2rem .7rem;
  text-decoration: none; }
.pres__room span { font-size: 1.15rem; font-weight: 600; letter-spacing: .12em;
  color: var(--green-900); }
.pres__room small { font-size: .68rem; color: var(--green-700); }

.pres__start { margin: auto; text-align: center; display: grid; gap: .8rem; padding: 2rem; }
.pres__aside { background: var(--amber-100); color: #7a4a0c; padding: .5rem 1rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: .9rem; }

.pres__main { flex: 1 1 auto; display: grid; gap: 1rem; min-height: 0;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  padding: 1rem clamp(.75rem,3vw,1.5rem); }
.pres__now, .pres__side { display: flex; flex-direction: column; min-height: 0; gap: .5rem; }
.pres__label { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem; color: var(--ink-faint); }
.pres__pos { font-variant-numeric: tabular-nums; }
.pres__section { font-size: .82rem; color: var(--green-700); }
.pres__nonotes { color: var(--ink-faint); font-size: .9rem; }
.pres__notes { flex: 1 1 auto; overflow-y: auto; background: var(--white);
  border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: .75rem .9rem; font-size: .95rem; }
.pres__note + .pres__note { border-block-start: 1px solid var(--sand-200);
  margin-block-start: .7rem; padding-block-start: .7rem; }
.pres__note h4 { margin: 0 0 .3rem; font-size: .95rem; color: var(--green-900); }
.pres__note table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pres__note td, .pres__note th { border: 1px solid var(--sand-200); padding: .3rem .45rem;
  text-align: start; vertical-align: top; }

.pres__refs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pres__refslabel { font-size: .78rem; color: var(--ink-faint); }
.chip--ref { cursor: pointer; font: inherit; font-size: .82rem;
  background: var(--green-100); border-color: var(--green-100); color: var(--green-900);
  width: auto; padding: .1rem .55rem; }
.chip--ref:hover { background: var(--green-500); color: var(--white); }

/* the slide as the room will see it, scaled into a box */
.stage { flex: 1 1 auto; min-height: 0; background: var(--green-900);
  border-radius: var(--radius); overflow: hidden; position: relative;
  container-type: size; }
.stage.is-blank { opacity: .35; }
.stage--small { flex: 0 0 auto; aspect-ratio: 16 / 9; }

.pres__ctl { position: sticky; bottom: 0; display: flex; gap: .5rem; flex-wrap: wrap;
  align-items: center; padding: .6rem clamp(.75rem,3vw,1.5rem);
  padding-block-end: calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--white); border-block-start: 1px solid var(--sand-200); }
.pres__spacer { flex: 1 1 auto; }
.btn--big { padding: .75rem 1.5rem; font-size: 1.05rem; }
.pres__step { display: flex; align-items: center; gap: .4rem; }
.pres__steptext { display: grid; line-height: 1.3; max-width: 12rem; }
.pres__steptext small { color: var(--ink-faint); font-size: .72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres__clock { font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--green-700); white-space: nowrap; }
.pres__clock i { font-style: normal; font-weight: 400; color: var(--ink-faint);
  font-size: .82rem; }
.pres__clock.is-over { color: #b03a16; }

/* ---------- every slide, jump to one ---------- */
.gridwrap { position: fixed; inset: 0; z-index: 60; background: rgba(20,53,40,.45);
  display: grid; place-items: center; padding: 1rem; }
.gridpanel { background: var(--sand-50); border-radius: var(--radius);
  box-shadow: var(--shadow); width: min(60rem, 100%); max-height: 86dvh;
  display: flex; flex-direction: column; }
.gridpanel__head { display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-block-end: 1px solid var(--sand-200); }
.gridlist { list-style: none; margin: 0; padding: .75rem; overflow-y: auto;
  display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.gridsec { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-faint);
  margin-block-start: .5rem; }
.gridcard { width: 100%; text-align: start; font: inherit; cursor: pointer;
  display: grid; gap: .15rem; background: var(--white); border: 1px solid var(--sand-200);
  border-radius: 10px; padding: .5rem .6rem; }
.gridcard:hover { background: var(--sand-100); }
.gridcard.is-now { border-color: var(--green-500); background: var(--green-100); }
.gridcard__n { font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.gridcard__kind { font-size: .72rem; color: var(--green-700); }
.gridcard__label { font-size: .88rem; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===================== The room screen ===================== */
body.is-room { background: #0d231a; }
.room { position: fixed; inset: 0; color: #f3efe7; display: flex;
  flex-direction: column; padding: 3vmin 4vmin; }
.room__stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
  container-type: size; }
.room__foot { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.6vmin; color: #7fa392; padding-block-start: 2vmin; }
.room__pos { display: flex; gap: 1.2em; align-items: baseline;
  font-variant-numeric: tabular-nums; }
.room__pos b { font-weight: 600; letter-spacing: .25em; color: #5d8573; }
.room__code { position: fixed; inset-block-end: 1.2vmin; inset-inline-end: 1.6vmin;
  font-size: 1.6vmin; letter-spacing: .25em; color: #5d8573; }
.room__hold { margin: auto; text-align: center; }
.room__holdsmall { font-size: 2.2vmin; color: #7fa392; }
.room__holdbig { font-size: 5vmin; color: #ffffff; line-height: 1.35; margin-block-start: 1vmin; }
.room__verse { font-family: 'Noto Naskh Arabic', serif; color: #cfe3d8;
  font-size: 2.2vmin; max-width: 24em; margin: 2vmin auto 0; }

/* ---------- a slide, wherever it is shown ----------
   Sized in container query units so the same markup fills a projector and a
   160px preview without a second stylesheet. */
/* Sized against BOTH axes: cqw alone looks right on 16:9 and overflows on a
   wide screen, where the same width buys much less height. container-type:size
   is what makes cqh available. */
.slide { width: 100%; height: 100%; display: flex; flex-direction: column;
  justify-content: center; gap: 2cqw; padding: 4cqw 5cqw; color: #f3efe7;
  overflow: hidden; }
.room .slide { color: #f3efe7; }
.slide__title { font-size: calc(min(7cqw, 12cqh) * var(--fit, 1)); line-height: 1.3; margin: 0; color: #ffffff; text-align: center; }
.slide__sub { font-size: calc(min(3.4cqw, 6cqh) * var(--fit, 1)); color: #cfe3d8; margin: 0; text-align: center; }
.slide__meta { font-size: calc(min(2.4cqw, 4.2cqh) * var(--fit, 1)); color: #7fa392; margin: 0; text-align: center; }
.slide__h { font-size: calc(min(5cqw, 8.5cqh) * var(--fit, 1)); line-height: 1.35; margin: 0; color: #ffffff; }
.slide__body { font-size: calc(min(3.6cqw, 6.4cqh) * var(--fit, 1)); line-height: 1.75; overflow: hidden; }
/* Set to the amount of text, so a block that cannot be split any further is
   smaller rather than cut off at the bottom of the screen. */
.slide--d-roomy .slide__body { font-size: calc(min(4.2cqw, 7.4cqh) * var(--fit, 1)); line-height: 1.8; }
.slide--d-dense .slide__body { font-size: calc(min(2.9cqw, 5.1cqh) * var(--fit, 1)); line-height: 1.62; }
.slide--d-dense .slide__h { font-size: calc(min(4cqw, 7cqh) * var(--fit, 1)); }
.slide--d-dense { gap: 1.2cqw; padding: 3cqw 4cqw; }
.slide__part { font-size: .5em; color: #8fc3a6; margin-inline-start: .8em;
  font-weight: 400; font-variant-numeric: tabular-nums; }
.slide__partonly { font-size: 2.2cqw; color: #8fc3a6; }
.slide__body p { margin: .5em 0; }
.slide__body ul, .slide__body ol { margin: .4em 0; padding-inline-start: 1.3em; }
.slide__body li { margin: .3em 0; }
.slide__body img { max-width: 100%; max-height: 72cqh; object-fit: contain;
  display: block; margin-inline: auto; border-radius: 1cqw; }
.slide__body table { width: 100%; border-collapse: collapse; font-size: .85em; }
.slide__body td, .slide__body th { border: 1px solid #2f5c48; padding: .35em .5em;
  text-align: start; vertical-align: top; }
.slide--figure .slide__body { display: grid; place-items: center; height: 100%; }
.slide--questions .slide__body { font-size: calc(min(4cqw, 7cqh) * var(--fit, 1)); }
.slide--scripture { font-family: 'Noto Naskh Arabic', serif; }
.slide__ref { font-size: calc(min(3cqw, 5.2cqh) * var(--fit, 1)); color: #8fc3a6; }
.slide__verses { font-size: calc(min(4.2cqw, 7.4cqh) * var(--fit, 1)); line-height: 1.9; overflow: hidden; }
.slide__verses p { margin: .35em 0; }
.slide__verses .vnum { font-size: .62em; color: #7fa392; margin-inline-end: .35em;
  vertical-align: super; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.slide__source { font-size: 2cqw; color: #5d8573; margin-block-start: auto; }
.slide--empty { background: transparent; }
.slide--card { justify-content: center; text-align: center; }
.slide--card .slide__h { font-size: calc(min(6cqw, 10cqh) * var(--fit, 1)); }

/* Presenting on a phone: one column, and the two move buttons share the row so
   they stay thumb-sized. Grid and flex items default to min-width:auto, which
   is what used to push this view wider than the screen (600px in a 390px
   viewport) and, in RTL, slide the controls off the side. */
@media (max-width: 900px) {
  .pres__main { grid-template-columns: minmax(0, 1fr); }
  .stage { min-height: 38dvh; }
  .pres__side { max-height: 45dvh; }
}
@media (max-width: 560px) {
  .pres__ctl { gap: .35rem; }
  .pres__ctl [data-move] { flex: 1 1 8rem; }
  .pres__step { order: 10; width: 100%; justify-content: space-between; }
  .pres__spacer { display: none; }
}
.pres, .pres__main, .pres__now, .pres__side { min-width: 0; max-width: 100%; }
.runlog { max-width: 48rem; margin: 1rem auto; padding-inline: 1rem; }
.runlog h3 { color: var(--green-900); }
.field { display: block; text-align: start; margin-block-end: .8rem; }
.field span { display: block; font-size: .9rem; color: var(--ink-soft);
  margin-block-end: .3rem; }

/* A handbook figure is up to 1000+px wide. Without this the presenter view lays
   out wider than the phone, the browser shrink-to-fits the whole page (layout
   viewport 2156px tall against a visual viewport of 844), and the controls stop
   being reachable by touch even though they look fine in a screenshot. */
img, svg, video { max-width: 100%; height: auto; }

/* a scripture passage inside the bottom sheet */
.passage { font-family: 'Noto Naskh Arabic', serif; font-size: 1.1rem; line-height: 2.1; }
.passage p { margin: .4rem 0; }
.vnum { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: .72em;
  color: var(--green-700); vertical-align: super; margin-inline-end: .15em; }

/* ===================== admin / outputs / session log ===================== */
.rail__tools { display: flex; gap: 1rem; }
.rail__tools a.is-on { font-weight: 600; color: var(--green-900); }
.adm { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-block-end: 1.25rem; }
.adm h2 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--green-900); }
.adm__dim { color: var(--ink-faint); font-size: .85rem; }
.adm__list { list-style: none; margin: 0 0 .7rem; padding: 0; }
.adm__list li { padding: .3rem 0; border-block-end: 1px solid var(--sand-100); }
.adm__form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-block-start: .6rem; }
.adm__form input, .adm__form select { font: inherit; padding: .45rem .6rem; min-width: 0;
  border: 1px solid var(--sand-300); border-radius: 8px; background: var(--white); flex: 1 1 9rem; }
.adm__form button { flex: none; }
.cohort { border: 1px solid var(--sand-200); border-radius: 10px; padding: .7rem .8rem;
  margin-block-end: .7rem; }
.cohort__head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sched, .relink { width: 100%; border-collapse: collapse; font-size: .9rem; margin-block-start: .5rem; }
.sched td, .relink td { padding: .35rem .5rem; border-top: 1px solid var(--sand-200);
  vertical-align: top; text-align: start; }
.relink__n { color: var(--ink-faint); width: 1%; }
.relink__p select { width: 100%; font: inherit; font-size: .85rem; border: 1px solid var(--sand-300);
  border-radius: 8px; padding: .3rem; }
.relink__p { min-width: 12rem; }
.out { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-block-end: 1rem; }
.out__head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.out__head h2 { margin: 0; font-size: 1rem; color: var(--green-900); }
.out textarea { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid var(--sand-300);
  border-radius: 9px; }
.out__hist { margin-block-start: .6rem; }
.out__ver { border-inline-start: 2px solid var(--sand-300); padding-inline-start: .7rem; margin: .5rem 0; }
.runlog { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-block-start: 1.25rem; }
.runlog h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--green-900); }
.runlog textarea { width: 100%; font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--sand-300); border-radius: 9px; }
.runlog input[type=number] { font: inherit; padding: .45rem .6rem; border: 1px solid var(--sand-300);
  border-radius: 8px; width: 7rem; }
.check { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; }

/* =====================================================================
   The restructure: one top bar with four destinations, and screens that
   are plain columns of cards underneath it.
   ===================================================================== */

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem clamp(.75rem, 3vw, 1.5rem);
  padding-block-start: calc(.55rem + env(safe-area-inset-top, 0px));
  background: var(--white); border-block-end: 1px solid var(--sand-200);
}
.top__brand {
  font-weight: 600; color: var(--green-900); text-decoration: none;
  font-size: 1.1rem; flex: none;
}
.nav { display: flex; gap: .2rem; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__item {
  padding: .35rem .8rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); white-space: nowrap; font-size: .95rem;
}
.nav__item:hover { background: var(--sand-100); }
.nav__item.is-on { background: var(--green-100); color: var(--green-900); font-weight: 500; }

.who { position: relative; flex: none; }
.who__name {
  list-style: none; cursor: pointer; padding: .3rem .7rem; border-radius: 999px;
  color: var(--ink-soft); font-size: .9rem; max-width: 10rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who__name::-webkit-details-marker { display: none; }
.who__name:hover { background: var(--sand-100); }
.who__menu {
  position: absolute; inset-inline-end: 0; top: 100%; margin-block-start: .35rem;
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .75rem; min-width: 14rem; display: grid; gap: .4rem;
}
.who__church { font-weight: 600; color: var(--green-900); }
.who__role { font-size: .85rem; color: var(--ink-faint); margin-block-end: .3rem; }

/* ---------- shell ---------- */
.shell--wide { grid-template-columns: 1fr; }
.shell--wide .main { margin-inline: auto; width: 100%; }
.rail { position: sticky; top: 3.4rem; align-self: start; max-height: calc(100dvh - 3.4rem); overflow-y: auto; }

.page__title { font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--green-900); margin: 0 0 .25rem; }
.page__lede { color: var(--ink-soft); margin: 0 0 1.5rem; }
.sec { font-size: 1rem; color: var(--ink-faint); font-weight: 500;
       margin: 2rem 0 .6rem; }
.empty { color: var(--ink-faint); background: var(--white);
         border: 1px dashed var(--sand-300); border-radius: var(--radius);
         padding: 1rem; margin: .5rem 0; }

/* ---------- cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-block-end: 1rem;
}
.card--quiet { background: transparent; border-style: dashed; }
.card__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card__head h2 { margin: 0; font-size: 1.1rem; color: var(--green-900); }
.card__head .btn { margin-inline-start: auto; }
.card__lede { color: var(--ink-soft); font-size: .92rem; margin: .4rem 0 0; }
.card__note { color: var(--ink-faint); font-size: .85rem; margin: .5rem 0 0; line-height: 1.7; }
.card__acts { display: flex; gap: .4rem; flex-wrap: wrap; margin-block-start: .7rem; }

.chip {
  display: inline-block; font-size: .78rem; padding: .1rem .55rem;
  border-radius: 999px; background: var(--sand-100); color: var(--ink-soft);
  border: 1px solid var(--sand-200); white-space: nowrap;
}
.chip--leader { background: var(--green-100); color: var(--green-900); border-color: var(--green-100); }
.chip--warn   { background: var(--amber-100); color: var(--amber-600); border-color: var(--amber-100); }
.chip--off, .chip--none { color: var(--ink-faint); background: transparent; }

/* ---------- lists of meetings and people ---------- */
.mlist, .plist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mrow, .prow {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: .7rem .9rem;
}
.mrow--live { border-color: var(--green-500); box-shadow: inset 0 0 0 1px var(--green-500); }
.mrow--ended { opacity: .72; }
.mrow__when { display: grid; min-width: 9.5rem; }
.mrow__date { font-size: .9rem; color: var(--green-900); }
.mrow__state { font-size: .78rem; color: var(--ink-faint); }
.mrow__what { flex: 1 1 14rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mrow__title { color: var(--ink); text-decoration: none; font-weight: 500; }
.mrow__title:hover { text-decoration: underline; }
.mrow__group { font-size: .82rem; color: var(--ink-faint); }
.mrow__do { margin-inline-start: auto; display: flex; gap: .4rem; align-items: center; }

.prow__name { font-weight: 500; min-width: 8rem; }
.prow__handle { color: var(--ink-faint); font-size: .85rem; }
.prow__groups { display: flex; gap: .3rem; flex-wrap: wrap; }
.prow__acts { margin-inline-start: auto; display: flex; gap: .3rem; }
.prow__code { font-size: 1rem; letter-spacing: .1em; color: var(--green-900);
              background: var(--sand-100); padding: .15rem .5rem; border-radius: 6px; }

/* ---------- forms ---------- */
.form { display: grid; gap: .8rem; text-align: start; }
.form label { display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-soft); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 1rem; padding: .55rem .7rem;
  border: 1px solid var(--sand-300); border-radius: 8px;
  background: var(--white); color: var(--ink); width: 100%;
}
.form__note { color: var(--ink-faint); font-size: .8rem; font-weight: 400; }
.form__err { color: #9b2c2c; font-size: .9rem; margin: 0; }
.check { display: flex !important; align-items: center; gap: .45rem; }
.check input { width: auto; }
.spacer { flex: 1; }
.btn--lg { padding: .6rem 1.2rem; font-size: 1rem; }
.adm__form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-block: .6rem; }
.adm__form input, .adm__form select { font: inherit; padding: .4rem .6rem;
  border: 1px solid var(--sand-300); border-radius: 8px; background: var(--white); }

/* ---------- the gate: signing in, and joining ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; align-content: center;
        gap: 1rem; padding: 1.5rem; }
.gate__card {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2rem 1.75rem; width: min(26rem, 100%);
}
.gate__title { font-size: 1.4rem; font-weight: 600; color: var(--green-900);
               margin: 0 0 .25rem; text-align: center; }
.gate__lede { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1.25rem; text-align: center; }
.gate__hint { color: var(--ink-faint); font-size: .9rem; text-align: center; margin-block-start: 1rem; }
.gate__hint a { color: var(--green-700); }
.gate__foot { color: var(--ink-faint); font-size: .85rem; text-align: center; }
.bigcode { font-size: 1.6rem; letter-spacing: .25em; text-align: center;
           color: var(--green-900); background: var(--sand-100);
           border-radius: var(--radius); padding: .6rem; margin: .5rem 0; }
.linkout { font-size: .85rem; word-break: break-all; color: var(--ink-soft);
           background: var(--sand-100); border-radius: 8px; padding: .5rem; }
.sharelist { display: grid; gap: .5rem; margin-block: .75rem; }

/* ---------- the session, and reading mode ---------- */
.sess__bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding-block: .6rem; margin-block-end: 1.5rem;
  border-block: 1px solid var(--sand-200);
}
.sess__facts { display: flex; gap: .5rem; flex-wrap: wrap;
               font-size: .85rem; color: var(--ink-faint); }
.sess__facts span { background: var(--white); border: 1px solid var(--sand-200);
                    border-radius: 999px; padding: .1rem .6rem; }
.sess__acts { margin-inline-start: auto; display: flex; gap: .4rem; flex-wrap: wrap; }

/* the handbook's aside to whoever is leading */
.block--aside > .block__body, .block--aside > .block__head {
  background: var(--sand-100); border-radius: var(--radius);
}
.block--aside { padding: .3rem .8rem; border-inline-start: 3px solid var(--sand-300); }

/*
 * Reading mode: the handbook and nothing else. Tools, tags, notes and the
 * facilitator's asides all go, and the measure narrows to something you can
 * actually read a page of.
 */
.sess.is-reading .block__tools,
.sess.is-reading .block__tag,
.sess.is-reading .note,
.sess.is-reading .noteslot,
.sess.is-reading .block--aside { display: none; }
.sess.is-reading .block__body { max-width: 38rem; }
.sess.is-reading .block--room { border-inline-start-color: var(--sand-300); }

.is-flash { box-shadow: inset 0 0 0 2px var(--green-500); border-radius: var(--radius); }

/* ---------- shared notes ---------- */
.note__acts { float: inline-end; display: flex; gap: .3rem; }
.note--theirs { background: var(--sand-100); border-inline-start-color: var(--green-500); }
.note__who { font-size: .8rem; color: var(--green-700); display: block; font-weight: 500; }
.note__flag { font-size: .75rem; color: var(--amber-600); margin-inline-start: .4rem; }

.runback { display: inline-block; margin-block-end: .75rem; color: var(--green-700);
           text-decoration: none; font-size: .9rem; }
.runback:hover { text-decoration: underline; }

.relink { width: 100%; border-collapse: collapse; margin-block-start: .75rem; font-size: .9rem; }
.relink td { border-block-start: 1px solid var(--sand-200); padding: .5rem .4rem; vertical-align: top; }
.relink__n { width: 2rem; color: var(--ink-faint); }
.relink__p select { width: 100%; font: inherit; font-size: .85rem; }

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; }
  .top { gap: .5rem; }
  .top__brand { font-size: 1rem; }
  .who__name { max-width: 5.5rem; }
  .mrow__do { margin-inline-start: 0; width: 100%; }
  .prow__acts { margin-inline-start: 0; }
}

/* ---------- the programme's mark ---------- */
.top__brand { display: flex; align-items: center; gap: .5rem; }
.top__brand img { display: block; width: 28px; height: 28px; }
/*
 * Greens sampled from the supplied logo so the Arabic wordmark sits with the
 * tree rather than beside it: #023d0f is the wordmark, #3f9401 the lighter
 * green of "and" and the rules under "PROGRAM".
 */
:root { --brand-deep: #023d0f; --brand-leaf: #3f9401; }

.lockup { text-align: center; margin-block-end: 1.5rem; }
.lockup__mark { display: block; width: min(9rem, 46%); height: auto; margin: 0 auto .4rem; }
.lockup__word {
  font-family: 'Noto Naskh Arabic', serif; font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.25;
  color: var(--brand-deep);
}
.lockup__prog {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-block-start: .35rem;
}
/*
 * No letter-spacing here, however much the original's spaced-out "P R O G R A M"
 * invites it: Arabic is cursive, and spacing the letters pulls «برنامج» apart
 * into six disconnected glyphs. The flanking rules carry the same idea without
 * breaking the word.
 */
.lockup__prog span {
  font-size: .95rem; color: var(--brand-leaf); font-weight: 600;
}
.lockup__prog::before, .lockup__prog::after {
  content: ''; height: 3px; border-radius: 2px;
  background: var(--brand-leaf); flex: 0 1 3.25rem;
}

/* ---------- rehearsing a deck, with no room watching ---------- */
.rehearse { display: flex; flex-direction: column; min-height: 100dvh; }
.rehearse__main { flex: 1 1 auto; min-height: 0; display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  padding: 1rem clamp(.75rem,3vw,1.5rem); }
.rehearse__main:has(> .stage:only-child) { grid-template-columns: minmax(0, 1fr); }
.rehearse__notes { overflow-y: auto; background: var(--white);
  border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: .75rem .9rem; font-size: .95rem; }
.rehearse__notes table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rehearse__notes td, .rehearse__notes th { border: 1px solid var(--sand-200);
  padding: .3rem .45rem; text-align: start; vertical-align: top; }
.rehearse__strip { display: flex; gap: .25rem; flex-wrap: wrap;
  padding: 0 clamp(.75rem,3vw,1.5rem) .5rem; }
.dot { width: .9rem; height: .9rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--sand-300); background: var(--white); }
.dot:hover { background: var(--sand-200); }
.dot.is-on { background: var(--green-700); border-color: var(--green-700); }
@media (max-width: 900px) {
  .rehearse__main { grid-template-columns: minmax(0, 1fr); }
  .rehearse .stage { min-height: 40dvh; }
  .rehearse__notes { max-height: 32dvh; }
}