/* A quiet, one-topic-at-a-time introduction; independent of page-date records. */
.qt .qp-tabs { display: flex; gap: 22px; padding: 0 28px; border-bottom: 1px solid var(--qt-line); }
.qt .qp-tabs button { min-height: 50px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 0; color: #68776e; background: transparent; font-weight: 600; font-size: 13px; }
.qt .qp-tabs button[aria-selected=true] { color: var(--qt-green); border-bottom-color: var(--qt-green); }
.qp { padding: 26px 28px 16px; }
.qp-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.qp-intro>div:first-child { max-width: 630px; }
.qt .qp-eyebrow { margin: 0 0 8px; color: #718077; font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.qp h3 { margin: 0; font: 650 20px/1.4 system-ui, sans-serif; letter-spacing: -.4px; }
.qt #qp-intro-text { margin: 8px 0 0; color: #617267; font-size: 12px; line-height: 1.8; }
.qp-progress { min-width: 100px; flex-shrink: 0; color: var(--qt-green); font-size: 11px; text-align: right; }
.qp .qp-progress progress { margin: 8px 0 0; height: 5px; }
.qt .qp-preflight { margin: 14px 0 24px; padding-bottom: 17px; border-bottom: 1px solid var(--qt-line); font-size: 12px; color: #657469; }
.qt .qp-preflight summary { padding: 4px 0; color: var(--qt-green); font-size: 11px; }
.qp-study { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 30px; align-items: start; }
.qp-topics { min-width: 0; }
.qp-topics>label { display: block; font-size: 11px; font-weight: 500; color: #657469; margin-bottom: 7px; }
.qt #qp-search, .qt #qp-topic-select { width: 100%; min-width: 0; height: 40px; padding: 8px 10px; border: 1px solid #dbe4dc; border-radius: 8px; background: white; color: var(--qt-ink); font-size: 12px; }
.qp #qp-topic-list { display: grid; gap: 3px; margin-top: 14px; }
.qt #qp-topic-list button { display: flex; gap: 8px; align-items: baseline; min-height: 40px; padding: 9px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #647269; text-align: left; font-size: 12px; line-height: 1.5; }
.qt #qp-topic-list button:hover { background: #f6f8f3; }
.qt #qp-topic-list button[aria-current=true] { color: var(--qt-green); background: #edf4eb; border-color: #dee9da; font-weight: 600; }
.qp-topic-number { flex-shrink: 0; width: 18px; font-size: 10px; font-variant-numeric: tabular-nums; color: #708572; }
.qp #qp-topic-select, .qp .qp-mobile-label { display: none; }
.qt #qp-search-reset { border: 0; background: none; padding: 8px 0; color: var(--qt-green); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.qp #qp-search-empty { font-size: 12px; color: #7d6c56; }
.qp-lesson { min-width: 0; border-left: 1px solid var(--qt-line); padding-left: 30px; }
.qp-lesson-heading { position: relative; }
.qp h4 { margin: 0; font: 650 25px/1.35 system-ui, sans-serif; letter-spacing: -.5px; }
.qp #qp-title { scroll-margin-top: 100px; }
.qt #qp-arabic { margin: 7px 0 18px; text-align: left; font: 24px/1.8 "Noto Naskh Arabic", "Traditional Arabic", serif; color: #607650; overflow-wrap: anywhere; }
.qt #qp-meaning { margin: 0 0 20px; font-size: 14px; line-height: 1.85; color: #435c4d; }
.qp-example { margin: 0 0 22px; padding: 18px 16px 14px; border: 1px solid #e3e9db; border-radius: 12px; background: #f7f9f2; text-align: center; }
.qt #qp-example { margin: 0 0 8px; font: 32px/1.85 "Noto Naskh Arabic", "Traditional Arabic", serif; color: var(--qt-green); overflow-wrap: anywhere; }
.qp-example figcaption { font-size: 10px; color: #74806c; line-height: 1.6; }
.qp h5 { margin: 0 0 5px; font: 650 12px/1.5 system-ui, sans-serif; }
.qp-explanation, .qp-caution, .qp-practice { margin: 0 0 19px; }
.qp-explanation p, .qp-caution p, .qp-practice p { margin: 0; font-size: 13px; line-height: 1.85; color: #5b6e60; }
.qp-caution { padding-left: 13px; border-left: 2px solid #d5b884; }
.qp-caution h5 { color: #8b6c3a; }
.qp .qp-quiz { min-width: 0; padding: 14px 16px 16px; margin: 26px 0 23px; border: 1px solid var(--qt-line); border-radius: 12px; }
.qp-quiz legend { padding: 0 6px; font-size: 11px; font-weight: 600; color: var(--qt-green); }
.qt #qp-question { margin: 0 0 13px; font-size: 13px; font-weight: 500; }
.qp #qp-choices { display: grid; gap: 7px; }
.qt #qp-choices button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px 12px; text-align: left; color: #526759; background: #fcfdfb; border: 1px solid #e3e8e0; border-radius: 8px; font-size: 12px; line-height: 1.65; }
.qp-choice-letter { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; background: #edf1e9; border-radius: 6px; font-size: 10px; font-weight: 650; }
.qt #qp-choices button, .qt #qp-topic-list button { justify-content: flex-start; }
.qt #qp-choices button:hover { border-color: #a9bfaa; }
.qt #qp-choices button.is-correct { border-color: #91b698; background: #edf6ec; color: #235c48; }
.qt #qp-choices button.is-wrong { border-color: #d5ae99; background: #fff5ed; color: #915d36; }
.qt #qp-answer { margin: 13px 0 0; color: #476e50; font-size: 12px; line-height: 1.8; }
.qt #qp-answer.is-wrong { color: #915d36; }
.qp-practice { padding-top: 2px; }
.qp-read { display: flex; align-items: flex-start; gap: 9px; padding: 15px 0; border-top: 1px solid var(--qt-line); font-size: 12px; font-weight: 600; cursor: pointer; }
.qt .qp-read input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--qt-green); }
.qp-read small { display: block; margin-top: 3px; color: #718077; font-size: 10px; font-weight: 400; }
.qt .qp-notes, .qt .qp-sources { padding: 11px 0; border-top: 1px solid var(--qt-line); color: #65776a; font-size: 11px; }
.qt .qp-notes summary, .qt .qp-sources summary { padding: 0; font-weight: 500; font-size: 11px; color: #4c6955; }
.qp-notes label { display: block; margin: 13px 0 6px; }
.qp-notes textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #dbe4dc; border-radius: 8px; font: 13px/1.7 system-ui, sans-serif; color: var(--qt-ink); resize: vertical; background: #fff; }
.qp-notes textarea:focus-visible { outline: 3px solid #93b5a2; outline-offset: 2px; }
.qt #qp-note-status { margin: 4px 0 0; min-height: 18px; }
.qp-sources p { line-height: 1.8; }
.qp-sources ul { padding-left: 17px; line-height: 1.8; }
.qp-sources li { margin: 5px 0; overflow-wrap: anywhere; }
.qp-sources a { color: var(--qt-green); text-underline-offset: 3px; }
.qp-lesson-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--qt-line); }
.qt .qp-lesson-nav button { min-height: 42px; border: 1px solid #d9e3d5; border-radius: 8px; padding: 9px 12px; background: white; color: var(--qt-green); font-size: 12px; }
.qt .qp-lesson-nav button:last-child, .qt #qp-next { background: #f2f6ed; }
.qt .qp-storage-note { margin: 20px 0 0; color: #7b877b; font-size: 10px; }
.qt .qp-storage-note.is-error { color: #915d36; }
@container (max-width: 720px) {
  .qp { padding: 22px 20px 16px; }
  .qp-study { grid-template-columns: 1fr; gap: 23px; }
  .qp-lesson { border-left: 0; padding-left: 0; }
  .qp #qp-topic-list { display: none; }
  .qp #qp-topic-select, .qp .qp-mobile-label { display: block; }
  .qp .qp-mobile-label { margin: 11px 0 6px; }
  .qp-topics { display: grid; grid-template-columns: 1fr; }
  .qp-intro { align-items: flex-start; flex-direction: column; gap: 14px; }
  .qp-progress { width: 100%; text-align: left; }
  .qp h3 { font-size: 18px; }
  .qt #qp-search, .qt #qp-topic-select { height: 44px; font-size: 16px; }
  .qp .qp-preflight { margin-bottom: 19px; }
  .qp h4 { font-size: 24px; }
  .qt #qp-arabic { font-size: 22px; }
  .qt #qp-example { font-size: 29px; }
  .qp-notes textarea { font-size: 16px; }
}
@media (max-width: 380px) {
  .qt .qp-tabs { padding-inline: 14px; gap: 20px; }
  .qp { padding-inline: 14px; }
  .qp .qp-quiz { padding-inline: 12px; }
  .qt .qp-lesson-nav button { font-size: 11px; padding-inline: 10px; }
}