/* ============================================================
   Miftah Arabic — مفتاح العربية — main stylesheet
   Palette: navy / gold / terracotta / cream (WCAG AA-adjusted)
   Arabic: Amiri (fallback Noto Naskh Arabic), ≥1.75rem in learning
   content, line-height ≥ 2, generous padding so harakat never clip.
   ============================================================ */

:root {
  --navy:        #1A2848;
  --navy-deep:   #111B33;
  --navy-soft:   #2C3E66;
  --gold:        #FFD56B;
  --gold-dark:   #B8860B;   /* darker gold for text on cream (AA) */
  --terracotta:  #C45A3C;
  --terracotta-dark: #A34630; /* AA on cream */
  --cream:       #FFF5E6;
  --paper:       #FFFDF8;
  --ink:         #22283A;
  --muted:       #5A617A;
  --ok:          #2E7D46;
  --ok-bg:       #E7F5EC;
  --bad:         #B3392B;
  --bad-bg:      #FBEAE7;
  --line:        #E7DCC8;
  --radius:      14px;
  --shadow:      0 2px 10px rgba(26, 40, 72, 0.08);
  --font-ui:     'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:     'Amiri', 'Noto Naskh Arabic', 'Geeza Pro', 'Traditional Arabic', serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 1rem; }

main.wrap { padding-top: 1.25rem; padding-bottom: 3rem; min-height: 70vh; }

h1 { font-size: 1.7rem; line-height: 1.3; }
h2 { font-size: 1.3rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; }

a { color: var(--navy); }

/* ---- Arabic typography (non-negotiable rules) ---------------------------- */
/* Everything Arabic: big, roomy, RTL-isolated, no clipped diacritics.       */
[lang="ar"], .ar, .ar-input {
  font-family: var(--font-ar);
  line-height: 2;                 /* ≥ 2 so harakat and dagger alif fit */
  unicode-bidi: isolate;
}
bdi { unicode-bidi: isolate; }

/* Main learning content Arabic ≥ 1.75rem. */
.ar-learn, .flashcard-arabic, .reading-text, .tile, .match-card .ar,
.frame-line, .player-body [lang="ar"] {
  font-size: 1.75rem;
  line-height: 2.1;
  padding-top: 0.15em;            /* headroom for stacked diacritics */
  padding-bottom: 0.1em;
  overflow: visible;
}

.ar-inline { font-size: 1.25rem; margin-inline-start: 0.5rem; }
.ar-input  { font-size: 1.5rem; line-height: 2; }

/* ---- Focus & touch -------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}
button, .btn, select, input, .activity-card, .match-card, .tile {
  min-height: 44px;               /* generous touch targets */
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--navy); padding: 0.5rem 1rem; z-index: 99;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Header / footer ------------------------------------------------------- */
.site-header {
  background: var(--navy);
  color: var(--cream);
  box-shadow: var(--shadow);
  /* Sticky top menu: stays visible while scrolling on all screen sizes.
     position:sticky keeps the header IN the page flow, so it never
     covers content (no offset padding needed, unlike position:fixed).
     z-index sits below the activity player (50) so the modal still
     covers the menu when open. */
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 1rem;
}
.wordmark {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--gold); text-decoration: none;
}
.brand-key { width: 30px; height: 30px; flex: none; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.2; }
.wordmark-en { font-weight: 800; font-size: 1.05rem; color: var(--cream); }
.wordmark-ar {
  font-family: var(--font-ar); font-size: 1.15rem; line-height: 1.9;
  color: var(--gold);
}
.main-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.main-nav a {
  color: var(--cream); text-decoration: none; padding: 0.55rem 0.8rem;
  border-radius: 8px; font-weight: 600;
}
.main-nav a.active, .main-nav a:hover { background: var(--navy-soft); color: var(--gold); }
.nav-user { color: #C6CDE0; padding: 0 0.5rem; font-size: 0.95rem; }
.nav-logout { border: 1px solid var(--navy-soft); }

.site-footer {
  background: var(--navy); color: #C6CDE0;
  margin-top: 2rem; padding: 1.1rem 0; font-size: 0.95rem;
}
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.footer-brand bdi { color: var(--gold); font-family: var(--font-ar); font-size: 1.05rem; }
.footer-tagline { color: var(--gold); }

/* ---- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1.1rem; border-radius: 10px; border: 1.5px solid var(--navy);
  background: var(--paper); color: var(--navy);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--cream); }
.btn-primary { background: var(--navy); color: var(--cream); }
.btn-primary:hover { background: var(--navy-soft); color: var(--gold); }
.btn-gold { background: var(--gold); border-color: var(--gold-dark); color: var(--navy); }
.btn-gold:hover { background: #F5C84D; }
.btn-danger { border-color: var(--bad); color: var(--bad); }
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.95rem; min-height: 40px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Cards & grids ------------------------------------------------------------ */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem;
}
.card-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: 1rem 0;
}

.unit-card, .lesson-card, .activity-card {
  display: flex; flex-direction: column; gap: 0.35rem; text-align: left;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; text-decoration: none; color: var(--ink);
  font: inherit; cursor: pointer; transition: transform 0.12s ease;
}
.unit-card:hover, .lesson-card:not(.locked):hover, .activity-card:hover {
  transform: translateY(-2px); border-color: var(--navy);
}
.unit-card.all-locked { opacity: 0.75; }

.unit-code, .lesson-code { font-weight: 800; color: var(--terracotta-dark); font-size: 0.95rem; }
.unit-title, .lesson-title, .activity-title { font-weight: 700; font-size: 1.05rem; }
.unit-meta { color: var(--muted); font-size: 0.9rem; }
.lesson-title-ar, .lesson-h1-ar {
  font-family: var(--font-ar); font-size: 1.45rem; line-height: 2; color: var(--navy);
}
.lesson-h1-ar { font-size: 1.9rem; margin: 0.2rem 0 0.6rem; }

.lesson-card.locked { background: #F6EFE2; color: var(--muted); cursor: not-allowed; }
.lesson-card.current { border-color: var(--gold-dark); background: #FFF9E9; }
.locked-msg { font-size: 0.88rem; color: var(--muted); }

/* Status badges (lock / key motif) */
.status-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.85rem; font-weight: 700; border-radius: 999px;
  padding: 0.15rem 0.6rem; width: fit-content;
}
.status-badge .icon { width: 15px; height: 15px; }
.status-locked  { background: #EDE6D6; color: var(--muted); }
.status-current { background: var(--gold); color: var(--navy); }
.status-open    { background: var(--ok-bg); color: var(--ok); }
.icon { width: 18px; height: 18px; vertical-align: -3px; }
.icon-current { color: var(--gold-dark); }
.icon-open { color: var(--ok); }
.icon-locked { color: var(--muted); }

/* ---- Progress bars ---------------------------------------------------------------- */
.progress-bar {
  display: block; height: 10px; border-radius: 999px;
  background: #EDE4D2; overflow: hidden; margin-top: 0.35rem;
}
.progress-bar.big { height: 14px; }
.progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 999px; transition: width 0.4s ease;
}
.progress-label { font-size: 0.88rem; color: var(--muted); }

/* ---- Welcome / sections ----------------------------------------------------------- */
.welcome { margin-top: 0.5rem; }
.welcome-sub { color: var(--muted); }
.welcome-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.8rem 0; }
.stage-heading {
  border-bottom: 3px solid var(--gold); display: inline-block;
  padding-bottom: 0.15rem; margin-bottom: 0.4rem;
}
.current-strip h2 { display: flex; align-items: center; gap: 0.4rem; }

/* "This week's lessons" section: one heading, then a single row holding
   the weekly lesson card(s) and the circular unit tracker as a MATCHED
   PAIR — equal column widths and stretched to equal height on desktop,
   stacked full-width on mobile (see the media query further down). */
.current-strip-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* same width for both cards */
  gap: 1rem;
  align-items: stretch;             /* same height for both cards */
}
.current-strip-row.solo { grid-template-columns: minmax(0, 480px); } /* tracker alone */
.current-strip-cards {
  margin: 0; height: 100%;
  grid-template-columns: 1fr;   /* one full-width card per row, so the
                                   weekly card matches the tracker width */
}
/* Weekly card fills its column and centres its content so it doesn't
   look top-heavy next to the taller ring. */
.current-strip-cards .lesson-card {
  height: 100%;
  justify-content: center;
}

/* Circular unit progress tracker — styled as the weekly card's twin:
   same cream-gold background, gold border, radius and shadow as
   .lesson-card.current. */
.unit-ring-card {
  background: #FFF9E9;                       /* = .lesson-card.current */
  border: 1.5px solid var(--gold-dark);      /* = .lesson-card.current */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.unit-ring-label {
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--terracotta-dark);
  margin: 0 0 0.1rem;
}
.unit-ring-unit { font-weight: 800; font-size: 1.15rem; color: var(--navy); margin: 0; }
.unit-ring {
  --pct: 0;
  width: 132px; height: 132px; border-radius: 50%;
  margin: 0.6rem auto;
  background: conic-gradient(var(--gold-dark) 0,
              var(--gold) calc(var(--pct) * 1%), #EDE4D2 0);
  display: grid; place-items: center;
}
.unit-ring-inner {
  width: 98px; height: 98px; border-radius: 50%;
  background: #FFF9E9;                       /* match the card background */
  display: grid; place-items: center;
}
.unit-ring-pct { font-size: 1.8rem; font-weight: 800; color: var(--navy); line-height: 1; }
.unit-ring-text { color: var(--muted); font-size: 0.92rem; margin: 0; }
.gentle-reminder { color: var(--muted); font-size: 0.95rem; margin-top: 2.5rem; }
.breadcrumb { font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--muted); }
.empty-state { color: var(--muted); font-style: italic; }
.muted { color: var(--muted); font-weight: 400; }
.help-text { color: var(--muted); font-size: 0.95rem; }
.flash {
  background: var(--ok-bg); color: var(--ok); border: 1px solid #BFE3CC;
  padding: 0.6rem 1rem; border-radius: 10px; font-weight: 600;
}

/* ---- Login ---------------------------------------------------------------------------- */
.login-hero { max-width: 420px; margin: 2.5rem auto; text-align: center; }
.login-key { width: 54px; height: 54px; color: var(--gold-dark); }
.login-title-ar {
  font-family: var(--font-ar); font-size: 2.6rem; line-height: 2;
  margin: 0.4rem 0 0; color: var(--navy);
}
.login-title-en { font-size: 1.3rem; font-weight: 800; margin: 0.1rem 0; }
.login-tagline { color: var(--terracotta-dark); font-weight: 600; margin-top: 0; }
.login-form { text-align: left; margin-top: 1.2rem; }
.login-form label { display: block; font-weight: 700; margin: 0.8rem 0 0.25rem; }
.login-form input {
  width: 100%; padding: 0.65rem 0.8rem; font: inherit;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
}
.login-form button { margin-top: 1.1rem; }
.login-hint { color: var(--muted); font-size: 0.9rem; text-align: center; }
.form-error {
  background: var(--bad-bg); color: var(--bad);
  padding: 0.6rem 0.8rem; border-radius: 10px; font-weight: 600;
}

/* ---- Lesson page ------------------------------------------------------------------------ */
.lesson-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lesson-head-progress { min-width: 240px; flex: 1; max-width: 340px; align-self: center; }
.teacher-note {
  background: #FFF9E9; border: 1.5px solid var(--gold);
  border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: 1rem 0;
}
.teacher-note p { margin: 0.3rem 0 0; }

.activity-card { align-items: flex-start; }
.activity-emoji { font-size: 1.6rem; }
.activity-kind { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--terracotta-dark); }
.activity-done-badge { color: var(--ok); font-weight: 700; font-size: 0.92rem; }
.activity-card.done { border-color: var(--ok); background: #F4FBF6; }
.activity-start { color: var(--navy); font-weight: 700; font-size: 0.95rem; }

.download-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.download-item { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.download-badge {
  background: var(--navy); color: var(--gold); font-weight: 800; font-size: 0.8rem;
  padding: 0.3rem 0.6rem; border-radius: 8px; letter-spacing: 0.03em;
}
.download-text { flex: 1; display: flex; flex-direction: column; min-width: 180px; }
.download-text span { color: var(--muted); font-size: 0.92rem; }
.download-unavailable { color: var(--muted); font-style: italic; }

.locked-page { text-align: center; max-width: 460px; margin: 3rem auto; }
.locked-page .icon { width: 44px; height: 44px; }

/* ---- Activity player ----------------------------------------------------------------------- */
.activity-player {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(26, 40, 72, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto;
}
/* SAFETY RULE — do not remove. display:flex above would otherwise beat
   the browser's default [hidden] handling, leaving an invisible-looking
   modal blocking the whole lesson page. */
.activity-player[hidden] {
  display: none !important;
}
.player-inner { width: 100%; max-width: 720px; margin: 1rem 0 3rem; }
.player-bar {
  display: flex; align-items: center; gap: 0.8rem;
  border-bottom: 2px solid var(--gold); padding-bottom: 0.6rem; margin-bottom: 1rem;
}
.player-title { font-weight: 800; font-size: 1.1rem; }

/* The modal itself is ALWAYS an LTR document; only marked Arabic blocks
   and isolated inline Arabic runs render right-to-left. */
.player-body { direction: ltr; text-align: left; }

/* Reusable direction utilities for mixed Arabic/English content. */
.text-ltr { direction: ltr; text-align: left; unicode-bidi: isolate; }
.text-rtl { direction: rtl; text-align: right; unicode-bidi: isolate; }

/* English-led text that may contain isolated inline Arabic runs. */
.mixed-text { direction: ltr; text-align: left; unicode-bidi: isolate; }

/* Friendly empty/unsupported states inside the activity player. */
.empty-activity-message {
  direction: ltr; text-align: left;
  color: var(--muted); font-style: italic;
  background: #F6F1E7; border: 1px dashed var(--line);
  border-radius: 10px; padding: 0.7rem 1rem;
}

/* An inline run of Arabic inside an English sentence (produced by the
   mixed() helper in activities.js). Isolated so it cannot reorder the
   surrounding English, and shown in the Arabic font with enough
   line-height that harakat never clip. */
.ar-run {
  font-family: var(--font-ar);
  font-size: 1.3em;
  line-height: 1.6;
  unicode-bidi: isolate;
}

/* Grammar activity blocks. */
.grammar-explanation { direction: ltr; text-align: left; font-size: 1.05rem; }
.grammar-example-ar {
  direction: rtl; text-align: right;
  font-family: var(--font-ar);
}
.grammar-example-en {
  direction: ltr; text-align: left;
  color: var(--muted); font-size: 0.95rem;
  list-style: none; margin-bottom: 0.4rem;
}
.grammar-tip { direction: ltr; text-align: left; }

/* Feedback and tips are English-led mixed text. */
.q-feedback, .q-tip { direction: ltr; text-align: left; }

.player-body .instructions { color: var(--muted); margin-top: 0; }
.completed-banner {
  background: var(--ok-bg); color: var(--ok); font-weight: 700;
  border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 0.8rem;
}

/* Flashcards — one at a time, tap to flip */
.flashcard-stage { text-align: center; }
.flashcard {
  width: 100%; max-width: 420px; min-height: 220px; margin: 0 auto;
  border: 2px solid var(--navy); border-radius: var(--radius);
  background: var(--paper); cursor: pointer; padding: 1.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; font: inherit;
}
.flashcard:hover { background: var(--cream); }
.flashcard-arabic { font-family: var(--font-ar); font-size: 2.4rem; line-height: 2; color: var(--navy); }
.flashcard-english { font-size: 1.4rem; font-weight: 700; }
.flashcard-translit { color: var(--muted); font-style: italic; }
.flashcard-hint { color: var(--muted); font-size: 0.85rem; }
.flashcard img { max-width: 150px; max-height: 120px; border-radius: 8px; }
.flashcard-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap;
}
.card-counter { font-weight: 700; color: var(--muted); min-width: 70px; }
.reviewed-dot { color: var(--ok); font-weight: 800; }
.forms-panel { max-width: 420px; margin: 0.8rem auto 0; text-align: right; }
.forms-panel summary { cursor: pointer; font-weight: 700; text-align: center; }
.forms-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.forms-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.forms-table .form-label { color: var(--muted); font-size: 0.9rem; text-align: left; }
.forms-table .form-value { font-family: var(--font-ar); font-size: 1.5rem; line-height: 2; direction: rtl; }
.forms-note { color: var(--muted); font-size: 0.92rem; }

/* Matching — two tap-to-pair columns */
.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.match-col { display: flex; flex-direction: column; gap: 0.6rem; }
.match-card {
  border: 2px solid var(--line); border-radius: 10px; background: var(--paper);
  padding: 0.6rem 0.8rem; font: inherit; cursor: pointer; text-align: center;
}
.match-card .ar { font-family: var(--font-ar); }
.match-card.selected { border-color: var(--navy); background: #EEF2FB; }
.match-card.matched { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); cursor: default; }
.match-card.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Questions */
.q-block { border-top: 1px solid var(--line); padding: 1rem 0; }
.q-prompt { font-weight: 700; font-size: 1.1rem; }
.q-prompt bdi { font-family: var(--font-ar); font-size: 1.6rem; line-height: 2; }
.q-image { max-width: 220px; max-height: 180px; display: block; margin: 0.5rem 0; border-radius: 10px; }
.q-options { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.q-option {
  display: flex; align-items: center; gap: 0.6rem; border: 2px solid var(--line);
  border-radius: 10px; padding: 0.55rem 0.8rem; cursor: pointer; background: var(--paper);
  font: inherit; text-align: left;
}
.q-option bdi { font-family: var(--font-ar); font-size: 1.5rem; line-height: 2; }
.q-option.chosen { border-color: var(--navy); background: #EEF2FB; }
.q-option.right { border-color: var(--ok); background: var(--ok-bg); }
.q-option.wrongpick { border-color: var(--bad); background: var(--bad-bg); }
.q-input {
  font: inherit; font-family: var(--font-ar); font-size: 1.6rem; line-height: 2;
  padding: 0.5rem 0.8rem; border: 2px solid var(--line); border-radius: 10px;
  width: 100%; max-width: 380px; background: #fff;
}
.q-feedback { margin-top: 0.5rem; font-weight: 700; border-radius: 8px; padding: 0.45rem 0.7rem; }
.q-feedback.good { background: var(--ok-bg); color: var(--ok); }
.q-feedback.bad  { background: var(--bad-bg); color: var(--bad); }
.q-feedback bdi { font-family: var(--font-ar); font-size: 1.35rem; }
.q-tip { color: var(--gold-dark); font-size: 0.95rem; margin-top: 0.3rem; }
.score-banner {
  background: var(--navy); color: var(--gold); font-weight: 800; font-size: 1.15rem;
  border-radius: 10px; padding: 0.7rem 1rem; margin: 1rem 0; text-align: center;
}

/* Sentence-builder tiles — assemble RIGHT-TO-LEFT */
.tile-tray, .tile-answer {
  display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem;
  border-radius: 10px; min-height: 62px;
  direction: rtl;                 /* tiles flow and assemble right-to-left */
}
.tile-tray { background: #F3ECDD; }
.tile-answer { border: 2px dashed var(--navy-soft); background: var(--paper); margin-bottom: 0.5rem; }
.tile {
  font-family: var(--font-ar); font-size: 1.6rem; line-height: 1.9;
  padding: 0.25rem 0.9rem 0.35rem; border: 2px solid var(--navy);
  border-radius: 10px; background: var(--paper); cursor: pointer;
  unicode-bidi: isolate;
}
.tile:hover { background: var(--gold); }

/* Reading / listening */
.reading-text {
  font-family: var(--font-ar); direction: rtl;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; white-space: pre-line;
}
.listen-box {
  background: #EEF2FB; border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.8rem;
}
.listen-box audio { width: 100%; margin-top: 0.4rem; }

/* Speaking */
.frame-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.frame-line {
  font-family: var(--font-ar); direction: rtl; background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 0.4rem 0.9rem;
}
.model-phrase { display: flex; justify-content: space-between; align-items: center;
  gap: 0.8rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 0.45rem 0; }
.model-phrase bdi { font-family: var(--font-ar); font-size: 1.6rem; line-height: 2; }
.model-phrase span { color: var(--muted); }

/* Writing */
.writing-area {
  width: 100%; min-height: 160px; font-family: var(--font-ar);
  font-size: 1.6rem; line-height: 2.1; direction: rtl;
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 0.8rem 1rem; background: #fff;
}
.word-bank { display: flex; flex-wrap: wrap; gap: 0.5rem; direction: rtl; margin: 0.6rem 0; }
.copy-item { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.4rem 0; }
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.25rem 0; }
.model-answer {
  background: #FFF9E9; border: 1.5px solid var(--gold); border-radius: 10px;
  padding: 0.8rem 1rem; font-family: var(--font-ar); font-size: 1.6rem;
  line-height: 2.1; direction: rtl; margin-top: 0.6rem;
}
.writing-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.save-status { color: var(--ok); font-weight: 700; align-self: center; }

/* ---- Teacher / admin ------------------------------------------------------------------------- */
.tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; border-bottom: 2px solid var(--line);
  margin: 1rem 0 1.2rem; }
.tab { padding: 0.55rem 1rem; text-decoration: none; font-weight: 700; color: var(--muted);
  border-radius: 10px 10px 0 0; }
.tab.active { background: var(--navy); color: var(--gold); }

.unit-details { background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; margin: 0.5rem 0; padding: 0.15rem 0.9rem; }
.unit-details summary { cursor: pointer; padding: 0.55rem 0; font-size: 1rem; }
.lesson-control-list { display: grid; gap: 0.4rem; padding-bottom: 0.7rem; }
.lesson-control-row {
  display: grid; gap: 0.5rem; align-items: center;
  grid-template-columns: 5.2rem 1fr 8.5rem minmax(140px, 1.4fr) auto;
}
.lcr-code { font-weight: 800; color: var(--terracotta-dark); }
.lcr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcr-status, .lcr-note, .quick-select, .admin-form input, .admin-form select, .admin-form textarea {
  font: inherit; padding: 0.45rem 0.6rem; border: 1.5px solid var(--line);
  border-radius: 8px; background: #fff;
}
.status-select-current { background: #FFF9E9; border-color: var(--gold-dark); }
.status-select-open { background: var(--ok-bg); }

.data-table { width: 100%; border-collapse: collapse; background: var(--paper);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); font-size: 0.98rem; }
.data-table th { background: var(--navy); color: var(--cream); text-align: left;
  padding: 0.55rem 0.7rem; }
.data-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); }
.data-table tr:last-child td { border-bottom: 0; }

.admin-form { display: grid; gap: 0.6rem; padding: 0.4rem 0 0.9rem; max-width: 720px; }
.admin-form label { font-weight: 700; font-size: 0.95rem; display: grid; gap: 0.2rem; }
.admin-form .checkbox-label { display: flex; align-items: center; gap: 0.5rem; }
.form-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.inline-form { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0.2rem 0 0.8rem; }
.user-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.user-actions input { max-width: 150px; font: inherit; padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--line); border-radius: 8px; }
.writing-review { margin: 0.6rem 0; }
.student-writing { font-family: var(--font-ar); font-size: 1.5rem; line-height: 2.1; }

/* My account */
.account-details { text-align: left; margin-top: 1rem; }
.account-details p { margin: 0.3rem 0; }

/* Users tab */
.unassigned-badge { color: var(--bad); font-weight: 700; }
.user-filter-bar { align-items: flex-end; margin: 0.6rem 0 0.9rem; }
.user-filter-bar label { font-weight: 700; font-size: 0.92rem; display: grid; gap: 0.2rem; }
.user-filter-bar select { font: inherit; padding: 0.45rem 0.6rem; border: 1.5px solid var(--line);
  border-radius: 8px; background: #fff; }

/* Import Lesson tab */
.import-errors ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.import-errors li { color: var(--bad); padding: 0.15rem 0; }
.import-preview h4 { margin-bottom: 0.3rem; }
.import-modes { border: 1.5px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; }
.import-modes .checkbox-label { align-items: flex-start; padding: 0.3rem 0; }
.import-modes input[type="radio"] { margin-top: 0.35rem; }

.quick-select-label { font-weight: 700; display: block; margin-top: 0.8rem; }
.quick-select { max-width: 100%; margin: 0.3rem 0 0.6rem; }

/* ---- Report ------------------------------------------------------------------------------------ */
.report-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0 1.2rem; }
.report-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-bottom: 3px solid var(--gold); padding-bottom: 0.8rem; }
.report-head h1 { margin: 0; }
.report-tagline { color: var(--terracotta-dark); font-weight: 600; }
.report-meta p { margin: 0.2rem 0; }
.report-foot { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 0.7rem;
  color: var(--muted); font-size: 0.92rem; text-align: center; }

/* ---- Responsive --------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Weekly card + unit tracker: stack vertically, full width. */
  .current-strip-row, .current-strip-row.solo { grid-template-columns: 1fr; }
  .current-strip-cards .lesson-card { height: auto; }
  .lesson-control-row { grid-template-columns: 1fr 1fr; }
  .lcr-title { grid-column: 1 / -1; white-space: normal; }
  .lcr-note { grid-column: 1 / -1; }
  .match-board { gap: 0.5rem; }
  h1 { font-size: 1.45rem; }
  .player-inner { margin-top: 0; }
  .data-table { display: block; overflow-x: auto; }
}

/* ---- Print (progress report) ---------------------------------------------------------------------- */
@media print {
  .no-print, .site-header, .site-footer, .main-nav, .report-actions,
  .gentle-reminder, .skip-link { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main.wrap { padding: 0; max-width: none; }
  .report { border: none; box-shadow: none; padding: 0; }
  .data-table th { background: #eee !important; color: #000 !important; }
  .data-table th, .data-table td { border: 1px solid #999; }
  h2 { page-break-after: avoid; }
  tr { page-break-inside: avoid; }
}