/* ============================================================================
   INHERITING QUR'AN — the arm skin

   Loaded only by the pages under /quran/. It never redefines a house token that
   text sits on, so every contrast pair verified for the rest of the site still
   holds here. What it does change is the *register*: alternate bands warm
   toward parchment, Arabic is set larger and given room, and the arm gets its
   own navigation bar so a student is never being sold a website build.

   The arm bar, the mobile arm group, .faq, .timeline, .dl, .pending and
   .js-only used to live here. They are not particular to this arm, so they
   were promoted to site.css when the Studio needed them — see the "ARM
   SECTIONS" block there. What remains below is only ever about Qur'an.

   Depends on assets/css/site.css. Load it after.
   ========================================================================== */

/* ---------------------------------------------------------------- room     */
/* One room warmer. 10% of the brand gold folded into the alternate surface —
   computed, not eyeballed: every text token still clears 5.3:1 on it in both
   themes (ink 13.2 / 11.7, ink-soft 8.0 / 5.6, ink-faint 5.3 / 5.3). */
[data-arm="quran"]{
  --band-warm:color-mix(in srgb, var(--brand-gold) 10%, var(--paper-2));
}
[data-arm="quran"] .band-alt{background:var(--band-warm)}

/* Arabic gets more room in this arm than anywhere else on the site. */
[data-arm="quran"] .ar{font-size:1.24em;line-height:2}

/* ---------------------------------------------------------------- specimen */
/* A line of Arabic shown as the thing itself — big, centred, unhurried. */
.specimen{
  font-family:var(--f-ar);direction:rtl;text-align:center;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  padding:clamp(20px,3.6vw,44px) clamp(14px,2.4vw,28px);
  font-size:clamp(1.9rem,1.1rem + 3.4vw,3.4rem);line-height:2.05;
  overflow-wrap:break-word
}
.band-alt .specimen{background:var(--paper)}
.specimen.sm{font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem);line-height:1.95}

/* ---------------------------------------------------------------- check    */
/* The placement check. Every step is in the HTML and readable with no
   JavaScript at all; the script only ever hides steps you have passed. */
.check{border-top:1px solid var(--line)}
.check .step{
  padding-block:clamp(26px,4vw,44px);border-bottom:1px solid var(--line-soft)
}
.check .step .head{margin-bottom:1.1em}
.check .step .head .n{
  display:block;margin-bottom:.6em;
  font-family:var(--f-body);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)
}
.check .step h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);max-width:26ch}
.check .step .gloss{
  font-family:var(--f-body);font-size:.83rem;color:var(--ink-faint);
  text-align:center;margin-top:.9em;letter-spacing:.02em
}
.choices{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,26px)}
.choices .btn{min-width:min(100%,15rem)}

.check-progress{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.4em
}
.check-progress .bar{
  flex:1;max-width:220px;height:2px;background:var(--line);position:relative;overflow:hidden
}
.check-progress .bar i{
  position:absolute;inset:0 auto 0 0;background:var(--gold-line);
  width:0;transition:width .4s cubic-bezier(.2,.7,.3,1)
}

/* ---------------------------------------------------------------- result   */
.result{
  border:1px solid var(--line);border-top:2px solid var(--gold-line);
  background:var(--paper);padding:clamp(24px,3.4vw,40px)
}
.band-alt .result{background:var(--paper)}
.result .lbl{
  font-family:var(--f-body);font-weight:600;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1em
}
.result h2,.result h3{margin-bottom:.5em;max-width:22ch}
.result p{color:var(--ink-soft);max-width:62ch}
.result .btns{margin-top:1.6em}
.results-static > * + *{margin-top:clamp(16px,2vw,22px)}

/* ---------------------------------------------------------------- letters  */
/* Extends .huruf from site.css: the same grid, made selectable. */
.huruf.pick span{cursor:pointer;user-select:none}
.huruf.pick span[aria-pressed="true"]{background:var(--gold-wash);color:var(--gold)}
.huruf.pick span:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}

.letterpane{
  border:1px solid var(--line);border-left:2px solid var(--gold-line);
  background:var(--paper);padding:clamp(20px,2.6vw,28px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px);align-items:center;min-height:150px
}
.band-alt .letterpane{background:var(--paper)}
/* The glyph column is fixed-width so the panel does not jump between a wide
   letter and a narrow one as you tap along the grid. */
.letterpane .gl{
  font-family:var(--f-ar);direction:rtl;font-size:clamp(3rem,2rem + 4vw,5rem);
  line-height:1.4;color:var(--ink);flex:none;
  min-width:1.7em;text-align:center
}
.letterpane .name-row{
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin-bottom:.85em
}
.letterpane .nm{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.15;margin:0
}
/* A transliteration, not a label — so it is not uppercased. "Ḍ" is not a sound
   anybody makes, and the capital fights the diacritic that carries the meaning. */
.letterpane .tr{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:1.12rem;letter-spacing:0;color:var(--gold);margin:0
}
.letterpane p{color:var(--ink-soft);font-size:.95rem;margin:0;max-width:52ch}
.letterpane .zone{
  display:inline-block;margin-top:.9em;font-family:var(--f-body);font-weight:600;
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)
}
@media (max-width:620px){
  .letterpane{grid-template-columns:1fr;text-align:center;gap:12px}
  .letterpane p,.letterpane .nm{max-width:none}
}

/* ---------------------------------------------------------------- makharij */
/* The five places of articulation, as a table you can read rather than an
   anatomical drawing nobody learns from. */
.makhraj{border-top:1px solid var(--line)}
.mrow2{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
  gap:clamp(16px,3vw,44px);padding:clamp(20px,2.6vw,30px) 0;
  border-bottom:1px solid var(--line-soft);align-items:start
}
.mrow2 .zone-name{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;margin-bottom:.45em}
.mrow2 .zone-name h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
.mrow2 .zone-name .ar{font-size:1.15rem;color:var(--gold)}
.mrow2 .desc{color:var(--ink-soft);font-size:.95rem;max-width:56ch;margin:0}
.mrow2 .glyphs{
  direction:rtl;display:flex;flex-wrap:wrap;gap:8px;align-items:center
}
.mrow2 .glyphs span{
  font-family:var(--f-ar);font-size:clamp(1.45rem,1.1rem + 1.2vw,1.95rem);line-height:1;
  color:var(--ink);border:1px solid var(--line);background:var(--paper);
  padding:.44em .5em;min-width:2.1em;text-align:center
}
.band-alt .mrow2 .glyphs span{background:var(--paper)}
.mrow2 .count{
  font-family:var(--f-body);font-weight:600;font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:1em;display:block
}
@media (max-width:760px){.mrow2{grid-template-columns:1fr;gap:16px}}

/* ---------------------------------------------------------------- schedule */
.sched{border-top:1px solid var(--line)}
.srow{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) auto;
  gap:clamp(14px,2.6vw,36px);align-items:start;
  padding:clamp(20px,2.6vw,28px) 0;border-bottom:1px solid var(--line-soft)
}
.srow .cname{font-family:var(--f-display);font-weight:600;font-size:1.35rem;line-height:1.15}
.srow .cname .sub{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:.5em
}
.srow dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5em 1.2em;font-size:.95rem}
.srow dt{
  font-family:var(--f-body);font-weight:600;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:.28em
}
.srow dd{margin:0;color:var(--ink-soft)}
.srow dd.tbd{color:var(--ink-faint);font-style:italic}
.srow .meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
@media (max-width:860px){
  .srow{grid-template-columns:1fr;gap:14px}
  .srow .meta{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap}
}

/* ---------------------------------------------------------------- misc     */
/* A checkbox grid for "when could you actually make a class" — the one piece
   of information needed before any of this can be scheduled. */
.checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:600px){.checkgrid{grid-template-columns:1fr}}
.checkgrid .checkrow{font-size:.92rem}

.tzline{
  font-family:var(--f-body);font-size:.8rem;color:var(--ink-faint);
  margin:.55em 0 0;min-height:1.3em
}

/* The timeline marker sits on the band it is drawn on, and this arm's
   alternate band is warmed. */
[data-arm="quran"] .band-alt .timeline li::before{background:var(--band-warm)}