/* جذور وثمار — رفيق الميسّر. 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; }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.login__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%); text-align: center;
}
.login__title { font-size: 1.5rem; font-weight: 600; color: var(--green-900); margin: 0 0 .25rem; }
.login__sub { color: var(--ink-faint); font-size: .95rem; margin: 0 0 1.5rem; }
.field { display: block; text-align: start; margin-block-end: 1rem; }
.field span { display: block; font-size: .9rem; color: var(--ink-soft); margin-block-end: .35rem; }
input[type=password], input[type=search], 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, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--green-500); outline-offset: 2px;
}
.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  padding: .7rem 1.2rem; border-radius: 9px; border: 1px solid transparent;
  background: var(--green-700); color: var(--white);
}
.btn:hover { background: var(--green-900); }
.btn--ghost { background: transparent; color: var(--green-700); border-color: var(--sand-300); }
.btn--ghost:hover { background: var(--sand-100); }
.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--facilitator > .block__body, .block--facilitator > .block__head {
  background: var(--sand-100);
}
.block--facilitator {
  background: var(--sand-100); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: .8rem 1rem;
}
.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; }
}

/* ===================== Run mode (§7.2) ===================== */
.runwrap { max-width: 56rem; margin-inline: auto; padding: 1.25rem clamp(.75rem,3vw,2rem) 5rem; }
.runhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.runhead__kicker { font-size: .8rem; color: var(--amber-600); font-weight: 500; }
.runhead__title { margin: .15rem 0 0; font-size: clamp(1.1rem,3vw,1.5rem); color: var(--green-900); line-height: 1.4; }
.runhead__right { display: flex; align-items: center; gap: .9rem; }
.runhead__clock { font-size: 1.1rem; font-weight: 600; color: var(--green-700); white-space: nowrap; }
.runhead__clock span { font-weight: 400; color: var(--ink-faint); font-size: .85rem; }
.roomcode { display: flex; flex-direction: column; align-items: center; background: var(--green-100);
  border-radius: 10px; padding: .25rem .7rem; }
.roomcode span { font-size: 1.3rem; font-weight: 600; letter-spacing: .12em; color: var(--green-900); }
.roomcode a { font-size: .72rem; color: var(--green-700); }
.runstart { background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: 1.25rem; margin-block-start: 1.25rem; text-align: center; }
.runstart p { color: var(--ink-soft); margin-block-start: 0; }

.stepcard { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--sand-200); border-radius: var(--radius);
  padding: 1.1rem; margin-block-start: 1.25rem; box-shadow: var(--shadow); }
.stepcard__ring { position: relative; flex: none; width: 118px; height: 118px; }
.stepcard__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__bg { fill: none; stroke: var(--sand-200); stroke-width: 9; }
.ring__fg { fill: none; stroke: var(--green-500); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .9s linear, stroke .3s; }
.stepcard.is-warn .ring__fg { stroke: var(--amber-600); }
.stepcard.is-over .ring__fg { stroke: #b03a16; }
.stepcard__time { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.stepcard__time b { font-size: 1.5rem; color: var(--green-900); font-variant-numeric: tabular-nums; }
.stepcard.is-over .stepcard__time b { color: #b03a16; }
.stepcard__time span { font-size: .72rem; color: var(--ink-faint); }
.stepcard__main { flex: 1 1 18rem; min-width: 0; }
.stepcard__meta { font-size: .82rem; color: var(--ink-faint); }
.stepcard__title { margin: .2rem 0 .4rem; font-size: clamp(1.15rem,3vw,1.5rem); color: var(--green-900); line-height: 1.45; }
.stepcard__goal { color: var(--ink-soft); margin: 0 0 .6rem; }
.stepcard__room { font-size: 1.06rem; }
.stepcard__room .roomblk { border-inline-start: 3px solid var(--green-500); padding-inline-start: .8rem; margin: .6rem 0; }
.stepcard__room h3 { font-size: 1rem; margin: 0 0 .2rem; color: var(--green-900); }
.stepcard__other .otherblk { margin: .5rem 0; color: var(--ink-soft); }
.stepcard__other h4, .facnote h4 { font-size: .95rem; margin: .4rem 0 .15rem; color: var(--ink); }
.stepcard__none { color: var(--ink-faint); font-size: .92rem; }
.facnotes { margin-block-start: .8rem; background: var(--sand-100); border: 1px solid var(--sand-200);
  border-radius: 10px; padding: .5rem .8rem; }
.facnotes summary { cursor: pointer; font-weight: 500; color: var(--amber-600); }
.facnote { margin-block-start: .4rem; }

.runctl { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: 1rem; }
.runctl .btn:disabled { opacity: .45; cursor: not-allowed; }

.cast { margin-block-start: 1.5rem; background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--radius); padding: .9rem 1rem; }
.cast__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cast__head h3 { margin: 0; font-size: 1rem; color: var(--green-900); }
.cast__hint { font-size: .82rem; color: var(--ink-faint); margin-inline-end: auto; }
.cast__list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.cast__item button { width: 100%; display: flex; align-items: center; gap: .6rem; text-align: start;
  font: inherit; cursor: pointer; background: var(--sand-50); border: 1px solid var(--sand-200);
  border-radius: 9px; padding: .45rem .65rem; color: var(--ink); }
.cast__item button:hover { background: var(--sand-100); }
.cast__item.is-on button { background: var(--green-100); border-color: var(--green-500); }
.cast__type { font-size: .7rem; color: var(--ink-faint); flex: none; min-width: 7.5rem; }
.cast__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cast__mark { color: var(--green-700); flex: none; }

.jump { margin-block-start: 1.5rem; }
.jump h3 { font-size: 1rem; color: var(--green-900); }
.jump table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.jump td { padding: .4rem .6rem; border-top: 1px solid var(--sand-200); vertical-align: top; }
.jump tr.is-now { background: var(--green-100); }
.jump__n { color: var(--ink-faint); width: 1%; }
.jump__min, .jump__act { white-space: nowrap; width: 1%; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.jump__act.is-over { color: #b03a16; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--green-700); cursor: pointer; text-align: start; }

/* ===================== Room screen (§7.3) ===================== */
body.is-room { background: #0d1f18; }
.room { min-height: 100dvh; background: #0d1f18; color: #f3efe7;
  padding: clamp(1rem,3vw,2.5rem); position: relative;
  font-size: clamp(22px, 2.6vw, 40px); line-height: 1.7; }
.room__boot { opacity: .6; }
.room__top { display: flex; justify-content: space-between; gap: 1rem;
  font-size: .5em; color: #9fc2b1; }
.room__title { font-size: 1.35em; line-height: 1.35; margin: .3em 0 .5em; color: #ffffff; }
.room__blocks { display: grid; gap: 1em; }
.room__block h2 { font-size: .8em; margin: 0 0 .2em; color: #9fc2b1; }
.room__body p { margin: .35em 0; }
.room__body ul { padding-inline-start: 1.2em; margin: .35em 0; }
.room__body li { margin: .25em 0; }
.room__body img { max-width: 100%; height: auto; border-radius: 10px; }
.room__body table { width: 100%; border-collapse: collapse; }
.room__body td, .room__body th { border: 1px solid #27483b; padding: .3em .5em; }
.room__block--texts .room__body, .room__block--prayer .room__body {
  font-family: 'Noto Naskh Arabic', serif; line-height: 2; }
.room__hold { min-height: 80dvh; display: grid; place-content: center; text-align: center; gap: .4em; }
.room__holdsmall { font-size: .6em; color: #9fc2b1; }
.room__holdbig { font-size: 1.5em; color: #ffffff; line-height: 1.35; }
.room__verse { font-family: 'Noto Naskh Arabic', serif; color: #cfe3d8; font-size: .75em;
  max-width: 24em; margin-inline: auto; }
.room__code { position: fixed; inset-block-end: .6rem; inset-inline-end: .9rem;
  font-size: .5em; letter-spacing: .25em; color: #5d8573; }

/* Grid and flex items default to min-width:auto, so a nowrap label refuses to
   shrink and pushes the whole run view wider than a phone screen (600px in a
   390px viewport), which in RTL slides the controls off the side. */
.cast__list { grid-template-columns: minmax(0, 1fr); }
.cast__item, .cast__item button { min-width: 0; max-width: 100%; }
.cast__type { flex: 0 1 7.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .cast__type { flex-basis: 5rem; }
  .cast__item button { gap: .4rem; }
  .runctl .btn { flex: 1 1 auto; }
}
.runwrap, .stepcard, .jump, .cast { max-width: 100%; }
.jump { overflow-x: auto; }

/* A handbook figure is up to 1000+px wide. Without this the run 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; }
.roomblk, .otherblk, .facnote { min-width: 0; overflow-wrap: anywhere; }
.roomblk table, .otherblk table, .facnote table { display: block; overflow-x: auto; max-width: 100%; }

/* 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; }