/* ===== Shared course layer: profiles, progress, teacher mode, sequential audio, review deck ===== */

#q-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:'Karla',sans-serif; font-size:12.5px;
  background:var(--bg-panel); border-bottom:1px solid var(--border-soft);
  padding:8px 16px; margin:0 0 0; backdrop-filter:blur(6px);
}
#q-topbar .q-group{display:flex; align-items:center; gap:6px;}
#q-topbar select, #q-topbar button, #q-topbar input.q-name-input{
  font-family:'Karla',sans-serif; font-size:12.5px;
  background:var(--bg); color:var(--ink); border:1px solid var(--border);
  border-radius:14px; padding:4px 10px; cursor:pointer;
}
#q-topbar button{white-space:nowrap;}
#q-topbar button.q-primary{background:var(--teal); color:var(--bg-panel); border-color:var(--teal); font-weight:600;}
#q-topbar .q-spacer{flex:1 1 auto;}
#q-topbar a.q-link{color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--border);}
#q-topbar a.q-link:hover{color:var(--teal);}
#q-topbar .q-tick{color:var(--pill-learned-ink); font-weight:700;}
@media(max-width:560px){ #q-topbar{font-size:11.5px; padding:7px 10px;} #q-topbar select, #q-topbar button{padding:4px 8px;} }

/* Teacher notes: hidden by default, revealed in teacher mode */
body:not(.q-teacher-mode) .teacher-note{display:none;}
body.q-teacher-mode .teacher-note{outline:2px dashed var(--gold-soft); outline-offset:4px;}

/* Play-all buttons for dialogues / scripted conversations */
.q-playall-wrap{display:flex; justify-content:flex-end; margin:0 0 6px;}
.q-playall-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Karla',sans-serif; font-size:12px; font-weight:600;
  background:var(--teal-tint); color:var(--teal); border:1px solid var(--border-soft);
  border-radius:14px; padding:5px 12px; cursor:pointer;
}
.q-playall-btn:hover{border-color:var(--teal);}
.q-playall-btn.playing{background:var(--teal); color:var(--bg-panel);}
.q-playall-btn svg{width:12px; height:12px;}

/* Mark-chapter-complete affordance placed at chapter end */
.q-complete-box{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:18px 0 0; padding:16px; text-align:center;
}
.q-complete-btn{
  font-family:'Karla',sans-serif; font-size:13px; font-weight:600;
  background:var(--teal); color:var(--bg-panel); border:none;
  border-radius:16px; padding:8px 18px; cursor:pointer;
}
.q-complete-btn.done{background:var(--pill-learned-bg); color:var(--pill-learned-ink);}

/* Index page: search + progress dashboard */
.q-search-wrap{max-width:420px; margin:0 auto 22px;}
.q-search-wrap input{
  width:100%; font-family:'Lora',Georgia,serif; font-size:15px;
  background:var(--bg-panel); color:var(--ink); border:1px solid var(--border);
  border-radius:20px; padding:10px 18px;
}
.q-dashboard{
  background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:18px 24px; margin:0 0 30px; font-family:'Karla',sans-serif; font-size:13.5px; color:var(--ink-soft);
}
.q-dashboard .q-bar-track{background:var(--border-soft); border-radius:6px; height:8px; margin:8px 0 4px; overflow:hidden;}
.q-dashboard .q-bar-fill{background:var(--teal); height:100%;}
.q-resume-btn{
  display:inline-block; font-family:'Karla',sans-serif; font-weight:600; font-size:13.5px;
  background:var(--teal); color:var(--bg-panel); border-radius:18px; padding:8px 18px;
  text-decoration:none; margin-top:8px;
}
.chap-card.q-complete{border-color:var(--pill-learned-ink); background:var(--pill-learned-bg);}
.chap-card .q-check{margin-left:auto; color:var(--pill-learned-ink); font-weight:700; display:none;}
.chap-card.q-complete .q-check{display:inline;}
.chap-card{position:relative;}
.chap-grid .chap-card[data-hidden="1"]{display:none;}

/* Review / spaced-repetition deck */
.q-review-shell{max-width:560px; margin:0 auto; text-align:center;}
.q-review-progress{font-family:'Karla',sans-serif; font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
.q-flashcard{
  background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:8px;
  padding:48px 30px; margin-bottom:20px; min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  cursor:pointer;
}
.q-flashcard .ar{font-family:'Arial','Amiri',serif; direction:rtl; font-size:34px; color:var(--teal-deep);}
.q-flashcard .tl{font-style:italic; color:var(--gold);}
.q-flashcard .en{font-size:16px; color:var(--ink); display:none;}
.q-flashcard .meta{font-family:'Karla',sans-serif; font-size:11.5px; color:var(--ink-soft); margin-top:6px;}
.q-flashcard.flipped .en{display:block;}
.q-flashcard .hint{font-family:'Karla',sans-serif; font-size:11.5px; color:var(--ink-soft);}
.q-review-actions{display:flex; gap:14px; justify-content:center;}
.q-review-actions button{
  font-family:'Karla',sans-serif; font-weight:600; font-size:14px;
  border-radius:18px; padding:10px 22px; border:1px solid var(--border); cursor:pointer;
  background:var(--bg-panel); color:var(--ink);
}
.q-review-actions button.q-knew{border-color:var(--pill-learned-ink); color:var(--pill-learned-ink);}
.q-review-actions button.q-forgot{border-color:var(--red-soft); color:var(--red-soft);}
.q-review-empty{padding:60px 20px; color:var(--ink-soft); font-family:'Karla',sans-serif;}
.q-review-filter{margin-bottom:20px; font-family:'Karla',sans-serif; font-size:13px;}
.q-review-filter select{border-radius:14px; padding:5px 10px; border:1px solid var(--border); background:var(--bg-panel); color:var(--ink);}

/* Mobile polish: bigger tap targets under 420px for the interactive bits */
@media(max-width:420px){
  .quiz-opt, .match-btn, .tf-opts, .ar-key{min-height:38px;}
  .ar-key{padding:9px 10px; font-size:16px;}
  .q-review-actions button{padding:12px 18px; font-size:15px;}
  .q-review-actions{flex-direction:column;}
}

/* Continuous reading passage: hover-to-translate, word/sentence toggle */
.q-cr-toggle-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 18px; font-family:'Karla',sans-serif; font-size:12.5px; color:var(--ink-soft);
}
.q-cr-toggle-label{transition:color .15s ease;}
.q-cr-toggle-label.q-active{color:var(--teal); font-weight:700;}
.q-cr-toggle{
  position:relative; width:38px; height:21px; flex:none; padding:0; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); border-radius:11px;
}
.q-cr-toggle-knob{
  position:absolute; top:1px; left:1px; width:17px; height:17px; border-radius:50%;
  background:var(--ink-soft); transition:transform .15s ease, background .15s ease;
}
.q-cr-toggle[aria-checked="true"] .q-cr-toggle-knob{transform:translateX(17px); background:var(--teal);}
.q-cr-passage{
  font-family:'Arial','Amiri','Traditional Arabic',serif; direction:rtl; text-align:right;
  font-size:22px; line-height:2.6; background:var(--bg-panel); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:26px 30px;
}
.q-cr-word{position:relative; cursor:help; border-bottom:1px dotted var(--gold-soft);}
.q-cr-sent{position:relative;}
.q-cr-passage.q-sentence-mode .q-cr-word{border-bottom:none; cursor:default;}
.q-cr-passage.q-sentence-mode .q-cr-sent{cursor:help; border-radius:3px; transition:background .1s ease;}
.q-cr-passage.q-sentence-mode .q-cr-sent:hover{background:var(--teal-tint);}
.q-cr-word::after, .q-cr-passage.q-sentence-mode .q-cr-sent::after{
  content:attr(data-en); position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%); direction:ltr; text-align:center;
  width:max-content; max-width:min(230px, 62vw);
  font-family:'Karla',sans-serif; font-size:13px; font-weight:500; line-height:1.35;
  color:var(--bg); background:var(--ink); padding:6px 10px; border-radius:5px;
  visibility:hidden; opacity:0; transition:opacity .12s ease; pointer-events:none; z-index:6;
}
.q-cr-word:hover::after, .q-cr-word.q-tapped::after{visibility:visible; opacity:1;}
.q-cr-passage.q-sentence-mode .q-cr-word::after{content:none;}
.q-cr-passage.q-sentence-mode .q-cr-sent:hover::after,
.q-cr-passage.q-sentence-mode .q-cr-sent.q-tapped::after{visibility:visible; opacity:1;}
.q-cr-passage.q-sentence-mode .q-cr-sent.q-tapped{background:var(--teal-tint);}
.q-cr-note{font-size:13px; color:var(--ink-soft); font-family:'Karla',sans-serif; margin:0 0 16px;}

/* Continuous reading: bigger toggle hit-area and edge-safe tooltips on narrow screens */
@media(max-width:480px){
  .q-cr-toggle{width:42px; height:26px; border-radius:13px;}
  .q-cr-toggle-knob{width:22px; height:22px;}
  .q-cr-toggle[aria-checked="true"] .q-cr-toggle-knob{transform:translateX(16px);}
  .q-cr-passage{padding:20px 16px; line-height:2.5;}
}

/* Printing: none of the new interactive/profile chrome belongs on paper */
@media print{
  #q-topbar, .q-playall-wrap, .q-complete-box, .q-cr-toggle-row{display:none !important;}
  .q-cr-word, .q-cr-sent{border-bottom:none !important;}
}