/* Learn (js/learn.js and its modules), on the choir's tokens. The teaching cards are in lab.css (.tcard). */
body[data-room="learn"] main, body[data-room="learn"] #book, body[data-room="learn"] #inspector { display: none; }
body[data-room="learn"] header > :not(.brand):not(a.home):not(#rooms) { display: none !important; }
body[data-room="learn"] .echos { display: none !important; }
#learn { grid-row: 2 / span 2; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); position: relative;
  background: radial-gradient(ellipse at 40% 0%, #1b1e27 0%, var(--nave) 60%); }
#learn[hidden] { display: none; }
#learn .spacer { flex: 1; }

/* the bar: where you are, and the voice */
#learnBar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-block: 7px; min-height: 30px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line); background: var(--stone); }
.ln-crumb { display: flex; align-items: baseline; gap: 8px; font: 700 15px var(--label); letter-spacing: 0.06em; min-width: 0; }
.ln-crumb a { color: var(--gold); text-decoration: none; }
.ln-crumb a:hover { text-decoration: underline; }
.ln-crumb .sl { color: var(--dim); margin-right: 8px; font-weight: 400; }
.ln-crumb b { color: var(--vellum); }
.ln-voice { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ln-voice select { font-size: 12.5px; padding: 4px 8px; max-width: 240px; }
#learnStatus { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 20; pointer-events: none; max-width: calc(100% - 32px);
  font-family: var(--label); font-size: 13px; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--stone) 94%, transparent); border: 1px solid var(--line); }
#learnStatus:empty { display: none; }
#learnMain { min-height: 0; overflow: auto; position: relative; scrollbar-width: thin; }
#learnMain > .ln-mod { min-height: 100%; }
#learnMain > [hidden] { display: none !important; }

/* Learn's home: a card per module */
#learnHome { max-width: 1100px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
#learnHome h1 { margin: 0; font: 700 clamp(28px, 4vw, 38px)/1.1 var(--display); }
#learnHome .ln-sub { margin: 4px 0 18px; color: var(--dim); }
.ln-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ln-grid > li { display: grid; }
.ln-card { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--stone); color: inherit; text-decoration: none;
  transition: border-color 0.15s, background 0.15s; }
a.ln-card:hover, a.ln-card:focus-visible { border-color: var(--gold); background: var(--stone-2); outline: none; }
.ln-card .ln-trad { font: 12px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--rubric); }
.ln-card b { font: 700 21px var(--display); color: var(--gold); }
.ln-card .ln-line { color: var(--vellum); font-size: 15px; line-height: 1.4; }
.ln-card.coming { opacity: 0.55; }
.ln-card.coming b { color: var(--vellum); }
.ln-card .ln-tag { position: absolute; top: 12px; right: 12px; font: 11px var(--label); letter-spacing: 0.06em; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .ln-card { transition: none; } }

/* Octoechos in Learn: the page, without its window */
#octo.in-learn { position: static; inset: auto; z-index: auto; background: none; backdrop-filter: none; padding: 0; height: 100%; }
#octo.in-learn .ocWin { border: 0; border-radius: 0; box-shadow: none; background: transparent; height: 100%; }
#octo.in-learn #ocClose { display: none; }
#octo.in-learn .ocBar { background: transparent; }
#learnMain > .ln-mod[data-mod="octoechos"] { height: 100%; }

/* Rules of speech */
.lr { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 100%; min-height: 0; }
.lr-nav { overflow-y: auto; border-right: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.lr-nav button { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; background: none; border: 1px solid transparent; padding: 3px 8px;
  font: 15px var(--display); letter-spacing: 0; }
.lr-nav button small { font: 11.5px var(--mono); color: var(--dim); }
.lr-nav button:hover { border-color: var(--line); background: var(--stone-2); }
.lr-nav button.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--stone)); }
.lr-nav button.none { opacity: 0.4; }
.lr-main { overflow-y: auto; min-height: 0; padding: 14px clamp(14px, 3vw, 32px) 48px; scrollbar-width: thin; }
.lr-top { position: sticky; top: -14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 0 8px; margin-top: -14px; background: linear-gradient(var(--nave) 80%, transparent); }
.lr-q { flex: 1; max-width: 420px; font: 15px var(--display); padding: 5px 10px; }
.lr-wait { color: var(--dim); margin: 30px 0; }
.lr-lang h2 { font: 700 26px var(--display); margin: 8px 0 4px; }
.lr-lang h2 .label, .lr-mod h3 .label { margin-left: 4px; }
.lr-mod h3 { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font: 700 13px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--gold); }
.lr-mod h3 .k { width: 9px; height: 9px; border-radius: 2px; background: var(--dim); display: inline-block; }
.lr-mod h3 .k.m-inventory { background: #c9a24a; } .lr-mod h3 .k.m-phonotactics { background: #c27a4a; } .lr-mod h3 .k.m-allophones { background: #6fa8c8; }
.lr-mod h3 .k.m-rhythm { background: #7fb07a; } .lr-mod h3 .k.m-pitch { background: #9b8ac9; }
.lr-rule { margin: 0 0 12px; max-width: 900px; }
.lr-rule .lr-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 5px; }
.lr-rule .lr-h b { font: 500 13px var(--mono); color: var(--vellum); }
.lr-rule .lr-desc { flex: 1 1 280px; color: var(--dim); font-size: 14px; }
.lr-rule .lr-lab { font-size: 11.5px; padding: 2px 8px; }
.lr .t-play button.on { background: var(--gold); color: #1a1408; border-color: var(--gold); }
@media (max-width: 700px) {
  .lr { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .lr-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 8px; }
  .lr-nav button { flex: none; }
  .ln-voice select { max-width: 170px; }
}
.ln-voice[hidden] { display: none; }

/* Tajwīd (js/learn-tajwid.js) */
.tj { max-width: 1040px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px)); }
.tj [hidden] { display: none !important; }
.tj .spacer { flex: 1; }
.tj-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.tj-tabs { display: flex; gap: 4px; }
.tj-tabs button { font-size: 14px; padding: 5px 14px; }
.tj-note { margin: 0; color: var(--dim); font-size: 13.5px; }
.tj-src { color: var(--dim); font-size: 13px; line-height: 1.45; }
.tj-suras, .tj-ayat, .tj-mqs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.tj-suras button { font: 15px var(--display); letter-spacing: 0; display: flex; align-items: baseline; gap: 6px; }
.tj-suras small { font: 11px var(--mono); color: var(--dim); }
.tj-ayat .label { margin-right: 4px; }
.tj-ayat button { min-width: 30px; padding: 3px 8px; font: 13px var(--mono); }
.tj-recite { position: relative; }
.tj-verse { border: 1px solid var(--line); border-radius: 10px; background: var(--stone); padding: 14px clamp(12px, 3vw, 26px) 12px; margin: 4px 0 10px; }
.tj-ar { margin: 0 0 6px; font: 400 clamp(26px, 4.4vw, 36px)/2.3 "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Geeza Pro", serif; color: var(--vellum); text-align: right; word-spacing: 0.12em; }
.tj-aw { position: relative; display: inline-block; padding: 0 1px 6px; border-radius: 4px; cursor: pointer; }
.tj-aw.plain { cursor: default; }
.tj-aw:not(.plain):hover, .tj-aw:focus-visible { background: color-mix(in srgb, var(--vellum) 7%, transparent); outline: none; }
.tj-bars { position: absolute; left: 2px; right: 2px; bottom: 2px; display: flex; gap: 2px; pointer-events: none; }
.tj-bars i { flex: 1; height: 3px; border-radius: 2px; background: var(--c); }
.tj-bars i.off { opacity: 0.25; }
.tj-tr { margin: 0 0 4px; font: 400 clamp(18px, 2.4vw, 22px)/2.5 var(--display); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.tj-wait { color: var(--dim); font-size: 15px; }
.tj-hl { background: color-mix(in srgb, var(--c) 24%, transparent); border-bottom: 2px solid var(--c2); border-radius: 3px; padding: 1px 0; cursor: pointer; }
.tj-hl:hover, .tj-hl:focus-visible { background: color-mix(in srgb, var(--c) 45%, transparent); outline: none; }
.tj-hl.off { background: none; border-bottom-style: dashed; opacity: 0.65; }
.tj-str { position: relative; display: inline-block; width: calc(var(--n) * 0.36em); height: 0.55em; margin-right: 2px; vertical-align: 0.08em;
  background: linear-gradient(var(--c), var(--c)) left 50% / 100% 2px no-repeat; cursor: pointer; }
.tj-str i { position: absolute; left: 0; top: 1.05em; font: normal 9px/1 var(--mono); letter-spacing: 0.5px; color: var(--c); white-space: nowrap; }
.tj-str.off { opacity: 0.35; }
.tj .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tj-en { margin: 2px 0 0; color: var(--dim); font-style: italic; font-size: 14.5px; }
.tj-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.tj-ctl label { display: flex; align-items: center; gap: 4px; font: 13px var(--label); color: var(--dim); }
.tj .tj-play.on { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.tj-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tj-legend button { display: flex; align-items: center; gap: 6px; padding: 4px 9px; font: 14px var(--display); letter-spacing: 0; border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.tj-legend button .sw, .tj-pop .sw { width: 11px; height: 11px; border-radius: 3px; background: var(--c); flex: none; }
.tj-legend button small { font: 11.5px var(--mono); color: var(--dim); }
.tj-legend button .x { font: 11px var(--mono); color: var(--dim); }
.tj-legend button.off { opacity: 0.55; text-decoration: line-through; border-style: dashed; }
.tj-legend button.off .sw { background: none; border: 1.5px solid var(--c); }
.tj-none { color: var(--dim); }
.tj-pop { position: absolute; z-index: 30; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--stone-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.tj-pr { border-left: 3px solid var(--c); padding-left: 9px; margin-bottom: 8px; }
.tj-ph { display: flex; align-items: center; gap: 7px; padding-right: 18px; }
.tj-ph b { font: 700 16px var(--display); }
.tj-n { font: 11.5px var(--mono); color: var(--gold); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; }
.tj-pr p { margin: 4px 0; font-size: 14px; line-height: 1.4; }
.tj-u { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tj-u span { font-style: italic; margin-right: auto; }
.tj-u button { font-size: 12px; padding: 2px 8px; }
.tj-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; font-size: 18px; color: var(--dim); padding: 0 4px; }
.tj-about { margin-top: 6px; color: var(--dim); font-size: 14px; }
.tj-about summary { cursor: pointer; font: 13px var(--label); letter-spacing: 0.06em; }
.tj-about p { max-width: 760px; }
/* maqām */
.tj-mqs button { font: 15px var(--display); letter-spacing: 0; }
.tj-mq-body { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tj-ladder-box { border: 1px solid var(--line); border-radius: 10px; background: var(--stone); padding: 6px; }
.tj-ladder { display: block; width: 100%; height: auto; }
.tj-ladder .tj-lbg { fill: none; }
.tj-ladder .tj-q { stroke: #262b35; stroke-width: 1; }
.tj-ladder .tj-q.st { stroke: #353c4a; }
.tj-ladder .tj-rail { stroke: var(--line); stroke-width: 1.5; }
.tj-ladder .tj-rung { cursor: pointer; }
.tj-ladder .tj-rung .hit { fill: transparent; }
.tj-ladder .tj-rung line { stroke: var(--gold); stroke-width: 2.4; }
.tj-ladder .tj-rung.base line { stroke-width: 3.4; }
.tj-ladder .tj-rung:hover line, .tj-ladder .tj-rung:focus-visible line { stroke: var(--vellum); }
.tj-ladder .tj-rung:focus { outline: none; }
.tj-ladder .tj-rung.now line { stroke: #fff; stroke-width: 5; }
.tj-ladder .tj-ln { fill: var(--vellum); font: 13px var(--display); }
.tj-ladder .tj-lw { fill: var(--dim); font: 10.5px var(--mono); }
.tj-ladder .tj-step { fill: var(--dim); font: 12px var(--mono); }
.tj-ladder .tj-step.qt { fill: var(--gold); font-weight: 500; }
.tj-ladder .tj-jins { stroke: var(--rubric); stroke-width: 1.5; fill: none; }
.tj-ladder .tj-jt { fill: var(--rubric); font: 11px var(--label); letter-spacing: 0.04em; }
.tj-mq-side h3 { margin: 0 0 2px; font: 700 21px var(--display); color: var(--gold); }
.tj-mq-ajnas { margin: 0 0 10px; color: var(--dim); }
.tj-mq-ajnas b { color: var(--vellum); font-weight: 500; }
.tj-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tj-btns label { display: flex; align-items: center; gap: 4px; font: 13px var(--label); color: var(--dim); }
.tj-quiz { border: 1px solid var(--line); border-radius: 10px; background: var(--stone); padding: 10px 14px 6px; margin: 6px 0 12px; }
.tj-quiz h3 { margin: 0 0 8px; font: 700 13px var(--label); letter-spacing: 0.08em; text-transform: lowercase; color: var(--gold); }
.tj-answers { display: flex; flex-wrap: wrap; gap: 6px; }
.tj-answers button { font: 15px var(--display); letter-spacing: 0; min-width: 88px; }
.tj-answers button.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 22%, var(--stone-2)); }
.tj-answers button.wrong { border-color: var(--rubric); background: color-mix(in srgb, var(--rubric) 22%, var(--stone-2)); }
.tj-answers button:disabled { cursor: default; }
.tj-score { margin: 8px 0 4px; font-size: 14.5px; }
@media (max-width: 700px) {
  .tj-mq-body { grid-template-columns: minmax(0, 1fr); }
  .tj-ladder-box { max-width: 340px; }
  .tj-verse { padding: 10px 12px; }
}

/* the live tract (js/learn-tract.js): beside the lesson; at phone width a strip under it */
#learn.with-tract { grid-template-columns: minmax(0, 1fr) auto; }
#learnBar { grid-column: 1 / -1; }
.ln-tract { font-size: 12.5px; padding: 3px 10px; }
.ln-tract[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.ln-tract[hidden], #learnTract[hidden] { display: none !important; }
#learnTract { grid-row: 2; grid-column: 2; display: none; flex-direction: column; width: clamp(260px, 26vw, 360px); min-height: 0; border-left: 1px solid var(--line); background: #060607; }
#learnTract.open { display: flex; }
#learnTract .lt-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 30px; border-bottom: 1px solid var(--line); background: var(--stone); }
#learnTract .lt-fold { display: none; }
#learnTract .lt-voice { font-size: 12px; padding: 2px 6px; max-width: 130px; }
#learnTract .lt-voice[hidden] { display: none; }
#learnTract .lt-read { flex: 1; min-width: 0; font: 12.5px var(--label); letter-spacing: 0.04em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#learnTract .wf-reset { font-size: 11.5px; padding: 1px 7px; }
#learnTract .lt-view { position: relative; flex: 1 1 auto; max-height: 720px; min-height: 0; }
#learnTract canvas { display: block; width: 100%; height: 100%; touch-action: none; }
@media (max-width: 700px) {
  #learn.with-tract { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  #learnBar .ln-tract { display: none; }
  #learnTract, #learnTract.open { grid-row: 3; grid-column: 1; display: flex; width: auto; border-left: 0; border-top: 1px solid var(--line); }
  #learnTract .lt-head { border-bottom: 0; }
  #learnTract .lt-fold { display: inline-block; font-size: 12.5px; padding: 2px 10px; }
  #learnTract .lt-fold::after { content: " ▴"; }
  #learnTract.open .lt-fold::after { content: " ▾"; }
  #learnTract .lt-view { display: none; flex: none; height: min(36vh, 260px); }
  #learnTract.open .lt-view { display: block; }
  #learnTract:not(.open) .wf-reset { display: none; }
}