@font-face { font-family: "Work Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/fonts/work-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Work Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("vendor/fonts/work-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Aref Ruqaa"; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/fonts/aref-ruqaa-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url("vendor/fonts/noto-naskh-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url("vendor/fonts/noto-naskh-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; }

:root {
  --navy: #0C1F39; --deep: #23374F; --orange: #F8A430; --mint: #C1DED3; --cream: #FEF4EF; --slate: #5F6974;
  --ok: #2F8F5B; --bad: #C64B3C; --line: #E9DED5; --white: #FFFFFF;
  --font-ar: "Noto Naskh Arabic", "Geeza Pro", "Droid Naskh Shared", "Segoe UI", Tahoma, serif;
  --font-ar-display: "Aref Ruqaa", "Noto Naskh Arabic", serif;
  --font-ui: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s1: 0.375rem; --s2: 0.75rem; --s3: 1.125rem; --s4: 1.5rem; --radius: 18px; --touch: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--navy); font: 1rem/1.5 var(--font-ui); overflow-x: hidden; }
[hidden] { display: none !important; }
.page { max-inline-size: 30rem; margin-inline: auto; }
.screen { padding: var(--s3); display: grid; gap: var(--s3); outline: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 6px var(--s3); background: var(--navy); color: var(--white); min-block-size: 56px; }
.brand { color: var(--white); text-decoration: none; font: 600 1.125rem var(--font-ui); display: inline-flex; align-items: center; min-block-size: 44px; }
.brand { gap: 0.3em; }
.brand b { color: var(--orange); font-weight: 600; }
.pill { min-block-size: 44px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: var(--white); border-radius: 999px; padding: 0 var(--s2); font: 400 0.8125rem var(--font-ui); cursor: pointer; }
.pill[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--navy); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.card :focus-visible, .btn:focus-visible, .opt:focus-visible { outline-color: var(--navy); }

.progress { block-size: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress__fill { inline-size: var(--p); block-size: 100%; background: var(--orange); border-radius: 999px; transition: inline-size .2s; }
.eyebrow { margin: 0; font-size: 0.8125rem; color: var(--slate); }
.top { display: grid; gap: var(--s1); }
h1, h2 { margin: 0; }
.title-ar { font-family: var(--font-ar-display); font-weight: 400; font-size: 2rem; line-height: 2; color: var(--navy); }
.title-en { margin: 0; color: var(--slate); font-size: 0.9375rem; }
.h2 { font: 600 1.125rem/1.3 var(--font-ui); }
.card { background: var(--white); box-shadow: 0 1px 0 var(--line); border-radius: var(--radius); padding: var(--s3); min-inline-size: 0; display: grid; gap: var(--s2); }
.label { margin: 0; font: 600 0.75rem/1.3 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
.prompt { margin: 0; font-size: 1.0625rem; }
.help { margin: 0; color: var(--slate); font-size: 0.9375rem; }
.tr { margin: 0; font-style: italic; color: var(--deep); font-size: 0.9375rem; }

/* Arabic: rtl, start aligned (right edge), generous line height so marks are not clipped. */
.ar { font-family: var(--font-ar); line-height: 2.1; font-size: 1.375rem; margin: 0; direction: rtl; text-align: start; unicode-bidi: isolate; overflow-wrap: anywhere; }
.ar--lg { font-size: 1.75rem; line-height: 2.2; }
.ar--xl { font-size: 3rem; line-height: 2; }
.item { display: grid; gap: 0; justify-items: stretch; padding-block: var(--s1); border-block-end: 1px solid var(--line); }
.item:last-child { border: 0; }
.item .row { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); }
.item .row > .play { align-self: flex-start; }
.item .txt { min-inline-size: 0; flex: 1; }
.name { font-family: var(--font-ar-display); font-size: 1.5rem; line-height: 2; direction: rtl; text-align: start; margin: 0; }

.btn { min-block-size: var(--touch); min-inline-size: 6.5rem; padding-inline: var(--s3); display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); font: 600 1rem var(--font-ui); border-radius: 999px; border: 2px solid var(--navy); cursor: pointer; background: transparent; color: var(--navy); }
.btn--primary { background: var(--orange); border-color: var(--orange); }
.btn--mint { background: var(--mint); border-color: var(--mint); }
.btn[disabled] { opacity: .45; cursor: default; }
.nav { display: flex; justify-content: space-between; gap: var(--s2); }
.play { min-block-size: 44px; min-inline-size: 44px; border-radius: 999px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); font: 600 0.875rem var(--font-ui); cursor: pointer; padding: 0 var(--s2); flex: none; }
.play.is-missing { border-style: dashed; color: var(--slate); border-color: var(--slate); }
.play.is-playing { background: var(--mint); }
.audio-state { margin: 0; font-size: 0.8125rem; color: var(--slate); }
.audio-state.is-missing { background: var(--cream); border-radius: 8px; padding: 2px var(--s1); color: var(--deep); }

.options { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.options--row { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
.opt { min-block-size: var(--touch); padding: var(--s1) var(--s2); background: var(--white); color: var(--navy); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; font: 400 1rem var(--font-ui); display: grid; gap: 0; align-content: center; }
.opt .ar { text-align: center; }
.opt .opt-help { font-size: 0.8125rem; color: var(--slate); }
.opt.is-ok { border-color: var(--ok); background: #EAF6EF; }
.opt.is-bad { border-color: var(--bad); background: #FBECEA; }
.opt.is-sel { border-color: var(--navy); background: var(--mint); }
.opt[disabled] { cursor: default; }
.feedback { margin: 0; padding: var(--s2); border-radius: 12px; font-size: 0.9375rem; }
.feedback.ok { background: #EAF6EF; color: #1d5c3a; }
.feedback.bad { background: #FBECEA; color: #8a2f25; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.match .col { display: grid; gap: var(--s2); align-content: start; }
.tiles, .answer { display: flex; flex-wrap: wrap; gap: var(--s1); direction: rtl; min-block-size: 3.25rem; }
.answer { border: 2px dashed var(--line); border-radius: 12px; padding: var(--s1); background: var(--cream); }
.tile { min-block-size: var(--touch); min-inline-size: var(--touch); border-radius: 12px; border: 2px solid var(--navy); background: var(--white); font: 400 1.5rem/1 var(--font-ar); cursor: pointer; }
.field { min-block-size: var(--touch); inline-size: 100%; border: 2px solid var(--line); border-radius: 12px; padding: 0 var(--s2); font: 400 1.5rem var(--font-ar); direction: rtl; text-align: start; background: var(--white); color: var(--navy); }
.keys { display: flex; gap: var(--s1); flex-wrap: wrap; direction: rtl; }
.rec { display: flex; flex-wrap: wrap; gap: var(--s2); }
.who { font-size: 0.75rem; color: var(--slate); margin: 0; }
.chips { display: flex; gap: var(--s1); flex-wrap: wrap; }
.result { text-align: center; display: grid; gap: var(--s2); justify-items: center; }
.big { font: 600 2.25rem/1 var(--font-ui); margin: 0; }
.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.lesson-link { display: grid; gap: 0; text-decoration: none; color: var(--navy); background: var(--white); border-radius: var(--radius); padding: var(--s3); box-shadow: 0 1px 0 var(--line); min-block-size: var(--touch); }
.lesson-link .state { font-size: 0.8125rem; color: var(--slate); }
.lesson-link.is-done { border-inline-start: 6px solid var(--ok); }
.foot { margin: 0; padding: var(--s2) var(--s3); font-size: 0.75rem; color: var(--slate); border-block-start: 1px solid var(--line); }
.honest { margin: 0; padding: var(--s1) var(--s2); font-size: 0.75rem; background: var(--mint); border-radius: 8px; justify-self: start; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.feedback .ar { display: inline-block; margin-inline: 0.5rem; vertical-align: middle; }

/* talk page and typed-answer marks keys */
.keys--marks { gap: var(--s1); }
.tile--mark { font-size: 1.25rem; }
.banked-label { margin: 0; padding: var(--s1) var(--s2); font-size: 0.8125rem; font-weight: 600; background: var(--mint); border-radius: 8px; justify-self: start; }
.title-en--h1 { font: 600 1.375rem/1.3 var(--font-ui); color: var(--navy); }
.chat { gap: var(--s2); }
.bubble { display: grid; gap: 0; padding: var(--s2); border-radius: 14px; max-inline-size: 100%; min-inline-size: 0; }
.bubble--tutor { background: var(--cream); border: 1px solid var(--line); }
.bubble--you { background: var(--white); border: 2px solid var(--line); }
.bubble--you[data-verdict="clear"] { border-color: var(--ok); background: #EAF6EF; }
.bubble--you[data-verdict="close"] { border-color: var(--orange); }
.bubble--you[data-verdict="not_yet"] { border-color: var(--bad); background: #FBECEA; }
.bubble--sys { background: var(--mint); }
.chip { margin: 0; font-size: 0.875rem; font-weight: 600; }
.sys-note { margin: 0; font-size: 0.875rem; color: var(--slate); text-align: center; }
.recap-line { padding-block: var(--s1); border-block-end: 1px solid var(--line); text-align: start; justify-self: stretch; }
.result .line { justify-self: stretch; }

/* talk page tutor (avatar from app/vendor/avatar) */
.tutor-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--s2); align-items: center; position: sticky; inset-block-start: 0; z-index: 5; padding: var(--s2); }
.tutor-stage { inline-size: 116px; border-radius: 14px; overflow: hidden; background: var(--mint); }
.tutor-side { display: grid; gap: var(--s1); justify-items: start; min-inline-size: 0; }
.tutor-name { margin: 0; font: 600 1.0625rem var(--font-ui); color: var(--navy); }
.tutor-name .ar { font: 400 1.25rem var(--font-ar); color: var(--deep); }
.tutor-note { margin: 0; font-size: 0.8125rem; color: var(--slate); }
.tutor-change summary { cursor: pointer; font: 600 0.875rem var(--font-ui); color: var(--deep); min-block-size: 32px; display: flex; align-items: center; }
.tutor-pick { display: flex; flex-wrap: wrap; gap: 6px; padding-block-start: 6px; }
.chip-btn { min-block-size: 40px; padding: 0 var(--s2); border-radius: 999px; border: 2px solid var(--line); background: var(--white); color: var(--navy); font: 600 0.875rem var(--font-ui); cursor: pointer; }
.chip-btn.is-on { border-color: var(--navy); background: var(--mint); }
.play--sm { min-block-size: 36px; min-inline-size: 36px; font-size: 0.8125rem; justify-self: start; margin-block-start: 4px; }
.top-row { display: grid; gap: var(--s1); min-inline-size: 0; }
.top-row--tutor { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s2); align-items: center; }
.top-text { display: grid; gap: var(--s1); min-inline-size: 0; }
.lesson-tutor { inline-size: 76px; border-radius: 12px; overflow: hidden; background: var(--mint); }