/* Week 0: Read the Arabic script (read-arabic.html). Mobile-first; light only; colours are tokens.
   The token names match the other platform pages, so shared.css (top bar, enrol card) picks them up. */
:root{
  color-scheme: light;
  --bg:#F2F8FC; --bg-panel:#FBFDFE; --ink:#24262B; --ink-soft:#5B6672;
  --teal:#B85C38; --teal-deep:#6B3420; --teal-tint:#EFE1D3; --gold:#A67C3D; --gold-soft:#E9D9BC;
  --navy:#123B5C; --navy-tint:#E3EEF6;
  --border:#C3D8E3; --border-soft:#DCE9F0; --radius:10px;
  --pill-learned-bg:#DCEEE1; --pill-learned-ink:#2E6B47; --red-soft:#A23B32; --red-tint:#F6E1DE;
  --sun-bg:#F7E6CF; --sun-ink:#8A4B12; --moon-bg:#E3EEF6; --moon-ink:#24506F;
  --ar-font:'Arial','Amiri',serif;
  --quran-font:'Amiri','Arial',serif;
}
*{box-sizing:border-box;}
.rp-page [hidden]{display:none !important;}
body.rp-body{background:var(--bg); color:var(--ink); font-family:'Lora',Georgia,serif; margin:0; padding:0 0 80px; line-height:1.6;}
.rp-page{max-width:760px; margin:0 auto; padding:22px 16px 0;}
.rp-page a{color:var(--teal);}
[lang="ar"]{font-family:var(--ar-font);}
.rp-page h2{font-family:'Lora',Georgia,serif; font-size:24px; line-height:1.25; color:var(--teal-deep); margin:2px 0 12px;}
.rp-page h3{font-family:'Karla',sans-serif; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); margin:26px 0 10px;}
.rp-page p{margin:0 0 12px; font-size:16px;}
.rp-small{font-family:'Karla',sans-serif; font-size:14px !important; color:var(--ink-soft);}
.rp-inline{font-size:24px; color:var(--teal-deep);}

/* hero */
.rp-hero{text-align:center; padding:6px 0 4px;}
.rp-eyebrow{font-family:'Karla',sans-serif; font-size:13px !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7D5A1B; margin-bottom:6px !important;}
.rp-hero h1{font-family:'Lora',Georgia,serif; font-size:30px; line-height:1.2; color:var(--teal-deep); margin:0 0 4px;}
.rp-hero-ar{font-size:30px !important; color:var(--navy); margin:0 0 12px !important; line-height:1.6;}
.rp-lead{text-align:left;}
.rp-how{text-align:left; font-family:'Karla',sans-serif; background:var(--navy-tint); border-radius:var(--radius); padding:10px 14px;}
.rp-noscript{font-family:'Karla',sans-serif; background:var(--teal-tint); padding:10px 14px; border-radius:var(--radius);}

/* step tracker */
.rp-track{padding:10px 0 4px; margin:8px 0 14px; scroll-margin-top:64px;}
.rp-track ol{list-style:none; margin:0; padding:0; display:flex; gap:4px;}
.rp-track li{flex:1 1 0; min-width:0;}
.rp-track button{width:100%; min-height:44px; border-radius:10px; border:1px solid var(--border); background:var(--bg-panel); color:var(--ink-soft); font-family:'Karla',sans-serif; font-weight:700; font-size:15px; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; gap:2px;}
.rp-track button.rp-is-done{background:var(--pill-learned-bg); border-color:var(--pill-learned-ink); color:var(--pill-learned-ink);}
.rp-track button[aria-current="step"]{background:var(--teal); border-color:var(--teal); color:#fff;}
.rp-track button:focus-visible{outline:3px solid var(--navy); outline-offset:2px;}
.rp-track-label{font-family:'Karla',sans-serif; font-size:14px !important; color:var(--ink-soft); margin:6px 0 2px !important; text-align:center;}

/* steps */
.rp-step{background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px 16px 20px; margin:0 0 18px;}
.rp-kicker{font-family:'Karla',sans-serif; font-size:13px !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7D5A1B; margin:0 0 2px !important;}
.rp-box{background:var(--bg); border-left:4px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; padding:12px 14px 2px; margin:0 0 16px;}
.rp-marks{list-style:none; margin:0 0 12px; padding:0;}
.rp-marks li{display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid var(--border-soft);}
.rp-marks li:last-child{border-bottom:none;}
.rp-mark{flex:0 0 64px; text-align:center; font-family:var(--ar-font); font-size:36px; line-height:1.5; color:var(--teal-deep);}

/* letter cards */
.rp-group{margin:0 0 18px;}
.rp-group-head{font-family:'Karla',sans-serif; font-weight:700; color:var(--navy); margin:0 0 4px !important; font-size:15.5px !important;}
.rp-group-note{font-family:'Karla',sans-serif; font-size:14px !important; color:var(--ink-soft); margin:0 0 8px !important;}
.rp-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:10px;}
.rp-letter{display:grid; grid-template-columns:64px 1fr; gap:4px 12px; align-items:center; width:100%; text-align:left; background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--radius); padding:10px 12px; cursor:pointer; color:var(--ink); font:inherit;}
.rp-letter:hover{border-color:var(--teal);}
.rp-glyph{grid-row:1 / span 2; font-family:var(--ar-font); font-size:50px; line-height:1.3; text-align:center; color:var(--teal-deep);}
.rp-name{font-family:'Karla',sans-serif; font-weight:700; font-size:16px; color:var(--ink);}
.rp-name [lang="ar"]{font-size:22px; font-weight:400; color:var(--navy);}
.rp-sound{font-family:'Karla',sans-serif; font-size:14px; color:var(--ink-soft); line-height:1.4;}
.rp-forms{grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:6px; direction:rtl;}
.rp-forms > span{display:flex; flex-direction:column; align-items:center; background:var(--bg-panel); border-radius:8px; padding:2px 0 4px;}
.rp-forms b{font-family:var(--ar-font); font-weight:400; font-size:30px; line-height:1.4; color:var(--teal-deep);}
.rp-forms i{font-family:'Karla',sans-serif; font-style:normal; font-size:12.5px; color:var(--ink-soft); direction:ltr;}

/* syllable grids and word buttons */
.rp-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 0 8px;}
.rp-grid-head{font-family:'Karla',sans-serif; font-size:13px; font-weight:700; color:var(--ink-soft); text-align:center; align-self:end;}
.rp-say{min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--radius); cursor:pointer; color:var(--teal-deep); padding:4px 6px; font:inherit;}
.rp-say:hover{border-color:var(--teal);}
.rp-say .rp-ar{font-family:var(--ar-font); font-size:32px; line-height:1.5; direction:rtl;}
.rp-say .rp-tl{font-family:'Karla',sans-serif; font-size:13.5px; color:var(--ink-soft); line-height:1.3;}
.rp-say .rp-en{font-family:'Karla',sans-serif; font-size:13px; color:var(--ink-soft); font-style:italic; line-height:1.3;}
.rp-say.playing, .rp-letter.playing, .rp-ayah.playing{border-color:var(--teal); background:var(--teal-tint);}
.rp-say.q-loading, .rp-letter.q-loading, .rp-ayah.q-loading{opacity:.75;}
.rp-words{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap:8px; margin:0 0 12px;}
.rp-words.rp-wide{grid-template-columns:1fr;}
.rp-words .rp-say{min-height:72px; padding:6px 8px;}
.rp-words .rp-ar{font-size:30px;}
.rp-hide-tl .rp-tl, .rp-hide-tl .rp-en{visibility:hidden;}
.rp-toggle{font-family:'Karla',sans-serif; font-weight:700; font-size:14.5px; background:none; border:1px solid var(--teal); color:var(--teal); border-radius:100px; padding:10px 16px; min-height:44px; cursor:pointer; margin:0 0 10px;}

/* syllable build-ups */
.rp-build{display:flex; flex-wrap:wrap; align-items:center; gap:6px; direction:rtl; background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--radius); padding:8px; margin:0 0 10px;}
.rp-build .rp-say{background:var(--bg-panel); min-width:64px;}
.rp-build .rp-plus{font-family:'Karla',sans-serif; color:var(--ink-soft); font-size:18px;}
.rp-build .rp-whole{margin-right:auto; border-color:var(--teal); min-width:110px;}
.rp-build .rp-eq{font-family:'Karla',sans-serif; color:var(--ink-soft); font-size:20px; padding:0 2px;}

/* sun / moon */
.rp-chart{display:grid; grid-template-columns:1fr; gap:10px; margin:16px 0 4px;}
.rp-chart > div{border-radius:var(--radius); padding:10px 12px;}
.rp-chart .rp-sun{background:var(--sun-bg); color:var(--sun-ink);}
.rp-chart .rp-moon{background:var(--moon-bg); color:var(--moon-ink);}
.rp-chart p{font-family:'Karla',sans-serif; font-weight:700; margin:0 0 4px !important; font-size:14.5px !important;}
.rp-chart .rp-letters{font-family:var(--ar-font); font-size:28px; line-height:1.7; direction:rtl; word-spacing:8px;}

/* listening checks */
.rp-check{margin:22px 0 4px; border:2px dashed var(--border); border-radius:var(--radius); padding:14px;}
.rp-check-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-family:'Karla',sans-serif; margin:0 0 10px;}
.rp-check-head b{color:var(--navy); font-size:16px;}
.rp-check-head span{color:var(--ink-soft); font-size:14px; white-space:nowrap;}
.rp-check-prompt{font-family:'Karla',sans-serif; font-size:15px !important;}
.rp-check-prompt [lang="ar"]{font-size:32px; color:var(--teal-deep); padding:0 4px;}
.rp-play{display:inline-flex; align-items:center; gap:8px; min-height:48px; font-family:'Karla',sans-serif; font-weight:700; font-size:15.5px; background:var(--navy); color:#fff; border:none; border-radius:100px; padding:10px 20px; cursor:pointer; margin:0 0 12px;}
.rp-play.playing{background:var(--teal);}
.rp-opts{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.rp-opts.rp-two{grid-template-columns:repeat(2, 1fr);}
.rp-opt{min-height:64px; background:var(--bg); border:2px solid var(--border-soft); border-radius:var(--radius); cursor:pointer; color:var(--teal-deep); font-family:var(--ar-font); font-size:32px; line-height:1.4; padding:4px;}
.rp-opt.rp-en-opt{font-family:'Karla',sans-serif; font-size:16px; font-weight:700;}
.rp-opt.rp-right{border-color:var(--pill-learned-ink); background:var(--pill-learned-bg); color:var(--pill-learned-ink);}
.rp-opt.rp-wrong{border-color:var(--red-soft); background:var(--red-tint); color:var(--red-soft);}
.rp-opt:disabled{cursor:default;}
.rp-fb{font-family:'Karla',sans-serif; font-size:15px !important; min-height:24px; margin:10px 0 6px !important;}
.rp-fb [lang="ar"]{font-size:26px;}
.rp-fb.rp-good{color:var(--pill-learned-ink);}
.rp-fb.rp-bad{color:var(--red-soft);}
.rp-link-btn{font-family:'Karla',sans-serif; font-weight:700; font-size:15px; background:none; border:none; color:var(--teal); text-decoration:underline; cursor:pointer; min-height:44px; padding:6px 4px;}

/* Al-Fatihah */
.rp-signs{display:grid; gap:8px; margin:0 0 16px;}
.rp-sign{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center; background:var(--bg); border-radius:var(--radius); padding:8px 10px;}
.rp-sign .rp-say{min-width:120px; min-height:60px;}
.rp-sign .rp-ar{font-family:var(--quran-font); font-size:30px;}
.rp-sign p{font-family:'Karla',sans-serif; font-size:14.5px !important; margin:0 !important;}
.rp-ayat{list-style:none; margin:0 0 12px; padding:0;}
.rp-ayat li{margin:0 0 10px;}
.rp-ayah{display:flex; align-items:center; gap:12px; width:100%; direction:rtl; text-align:right; background:var(--navy); color:#F6E9C6; border:2px solid var(--navy); border-radius:var(--radius); padding:10px 14px; cursor:pointer; font:inherit; min-height:64px;}
.rp-ayah .rp-ar{flex:1 1 auto; font-family:var(--quran-font); font-size:30px; line-height:1.9;}
.rp-ayah .rp-num{flex:0 0 auto; font-family:var(--quran-font); font-size:22px; color:var(--gold-soft);}
.rp-ayah.playing{background:var(--teal-deep); border-color:var(--teal);}
.rp-ayah-en{font-family:'Lora',serif; font-style:italic; font-size:15px !important; color:var(--ink-soft); margin:6px 4px 0 !important;}
.rp-actions{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px;}
.rp-status{font-family:'Karla',sans-serif; color:var(--ink-soft);}

/* step navigation */
.rp-nav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border-soft);}
.rp-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; font-family:'Karla',sans-serif; font-weight:700; font-size:15.5px; background:var(--teal); color:#fff !important; border:1px solid var(--teal); border-radius:100px; padding:10px 22px; text-decoration:none; cursor:pointer;}
.rp-btn-alt{background:none; color:var(--teal) !important;}
.rp-nav .rp-btn:last-child{margin-left:auto;}

/* finish + email */
.rp-finish{background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px 16px 20px;}
.rp-done{background:var(--pill-learned-bg); color:var(--pill-learned-ink); border-radius:var(--radius); padding:12px 14px 2px; margin:0 0 14px;}
.rp-done-title{font-family:'Lora',serif; font-weight:600; font-size:19px !important;}
.rp-next-links{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px;}
.rp-mail{margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft);}
.rp-mail h2{font-size:21px;}
.rp-hp{position:absolute; left:-9999px;}
.rp-row{margin:0 0 12px;}
.rp-row label{display:block; font-family:'Karla',sans-serif; font-weight:700; font-size:14.5px; margin:0 0 4px;}
.rp-row input{width:100%; min-height:48px; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink);}
.rp-row input:focus{outline:3px solid var(--navy-tint); border-color:var(--navy);}
.rp-submit{width:100%; margin:4px 0 10px;}
.rp-submit:disabled{opacity:.7; cursor:progress;}
.rp-form-error{font-family:'Karla',sans-serif; color:var(--red-soft); font-size:14.5px !important;}
.rp-sent{background:var(--pill-learned-bg); color:var(--pill-learned-ink); border-radius:var(--radius); padding:12px 14px 2px;}

@media (max-width:480px){
  .rp-build .rp-eq{display:none;}
  .rp-build .rp-whole{flex:1 1 100%;}
}
@media (min-width:640px){
  .rp-page{padding:30px 24px 0;}
  .rp-step, .rp-finish{padding:24px 26px 26px;}
  .rp-hero h1{font-size:36px;}
  .rp-chart{grid-template-columns:1fr 1fr;}
  .rp-words.rp-wide{grid-template-columns:1fr;}
}