/* ===== مِرقاة — الدرس الأول من «كيف تتقن النحو؟» ===== */

@font-face {
  font-family: "Cairo";
  src: url("assets/fonts/Cairo-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("assets/fonts/Amiri-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("assets/fonts/Amiri-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --green-900: #12362a;
  --green-700: #1b5040;
  --green-500: #2c6f5a;
  --green-050: #e8f0ec;
  --gold-700: #785a1b;
  --gold-500: #b08d3f;
  --gold-200: #e6d5ad;
  --gold-050: #f7efdd;
  --ink: #24211c;
  --ink-soft: #5a534a;
  --paper: #fcf9f3;
  --card: #ffffff;
  --line: #e2dbcd;
  --ok: #2f6b4f;
  --warn: #9a4b2a;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(36, 33, 28, .06), 0 6px 18px rgba(36, 33, 28, .05);
}

* { box-sizing: border-box; }
/* لازم: قواعد display في .btn وغيرها تتغلّب على [hidden] الافتراضية */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.95;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, .amiri { font-family: "Amiri", "Cairo", serif; }
h1, h2, h3 { line-height: 1.6; margin: 0 0 .5rem; color: var(--green-900); }
a { color: var(--green-700); }

:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }

/* ---------- الترويسة ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--green-900);
  color: var(--gold-050);
  border-bottom: 3px solid var(--gold-500);
}
.header-inner {
  max-width: 62rem; margin: 0 auto;
  padding: .7rem 1.1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand img {
  width: 46px; height: 46px; object-fit: contain;
  background: var(--paper); border: 2px solid var(--gold-500);
  border-radius: 50%; padding: 3px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name { font-family: "Amiri", serif; font-size: 1.45rem; font-weight: 700; color: #fff; }
.brand-sub { font-size: .8rem; color: var(--gold-200); }

.header-facts {
  margin: 0 auto 0 0; display: flex; gap: 1.4rem;
}
.header-facts > div { text-align: center; }
.header-facts dt { font-size: .8rem; color: var(--gold-200); margin: 0; }
.header-facts dd {
  margin: 0; font-family: "Amiri", serif; font-size: 1.15rem;
  font-weight: 700; color: #fff; line-height: 1.4;
}

.progress-rail { height: 4px; background: rgba(255,255,255,.14); }
.progress-fill { height: 100%; width: 0; background: var(--gold-500); transition: width .35s ease; }

/* ---------- التخطيط ---------- */
main { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.1rem 4rem; }

.lesson-title {
  font-size: 1.9rem; text-align: center;
  padding-bottom: .6rem; margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--gold-200);
}

/* ---------- الفهرس ---------- */
.toc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 1.6rem;
}
.toc > summary {
  cursor: pointer; padding: .8rem 1.1rem; font-weight: 700;
  display: flex; align-items: center; gap: .6rem; list-style: none;
  border-radius: var(--radius);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
  content: "▾"; margin-inline-start: auto; color: var(--gold-700);
  transition: transform .2s ease;
}
.toc[open] > summary::after { transform: rotate(180deg); }
.toc-hint { font-size: .82rem; font-weight: 400; color: var(--ink-soft); }
.toc-list { list-style: none; margin: 0; padding: 0 .6rem .7rem; }
.toc-list li { border-top: 1px dashed var(--line); }
.toc-list a {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .55rem; text-decoration: none; color: var(--ink);
  border-radius: 8px;
}
.toc-list a:hover { background: var(--green-050); }
.toc-list .n { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 1.6rem; }
.toc-list .t { font-weight: 600; }
.toc-list .d { margin-inline-start: auto; font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.toc-list .tick { color: var(--ok); font-weight: 700; }
.toc-list .tick.off { color: var(--line); }

/* ---------- بطاقة العنوان ---------- */
.item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 1.6rem; overflow: hidden;
  scroll-margin-top: 5.5rem;
}
.item-head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: 1rem 1.2rem .7rem;
  border-bottom: 1px solid var(--line);
  /* صار الرأس زرَّ طيٍّ وفتح: تُلغى هيئة الزرّ ويبقى الشكل كما هو */
  width: 100%; background: none; border-inline: 0; border-top: 0;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.item-head:hover { background: #fdfbf6; }

.item-state { color: var(--ok); font-weight: 700; }
.item-caret {
  margin-inline-start: auto; color: var(--gold-700); font-size: 1.1rem;
  transition: transform .2s ease;
}
.item-head[aria-expanded="true"] .item-caret { transform: rotate(180deg); }

/* البطاقة المطويّة: رأسٌ وحده، بلا فيديو ولا تنزيل ولا أدوات تعلّم */
.item.collapsed .item-head { border-bottom: 0; padding-bottom: 1rem; }
.item.collapsed .item-title { color: var(--ink); }
.item-num {
  font-family: "Cairo", sans-serif; font-size: .78rem; font-weight: 700;
  background: var(--green-900); color: var(--gold-050);
  border-radius: 999px; padding: .1rem .6rem; flex: 0 0 auto;
}
.item-title { font-size: 1.42rem; margin: 0; flex: 1 1 auto; }
.item-time {
  font-family: "Cairo", sans-serif; font-size: .82rem;
  color: var(--gold-700); background: var(--gold-050);
  border: 1px solid var(--gold-200); border-radius: 999px;
  padding: .1rem .65rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
  /* مدى التوقيت يُقرأ من اليسار كالمعتاد، فيُعزل عن اتجاه الصفحة */
  direction: ltr; unicode-bidi: isolate;
}
.item.done .item-num { background: var(--ok); }

/* ---------- المشغّل ---------- */
.player { padding: 1rem 1.2rem 0; }
.player-frame {
  position: relative; background: #0d1f19;
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 10;
  /* الفيديو ٧٦٨×٤٨٠، فلا يُمدّ فوق حجمه الأصلي ولا تطول البطاقة بلا فائدة */
  max-width: 640px; margin-inline: auto;
}
.player-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d1f19; }
.player-poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; background: var(--green-900); color: var(--gold-050);
  border: 0; width: 100%; cursor: pointer;
  font-family: "Cairo", sans-serif; font-size: .95rem;
}
.player-poster:hover { background: #16412f; }
.player-poster .play-ring {
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px solid var(--gold-500); color: var(--gold-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; padding-inline-start: .2rem;
}
.player-poster .label { font-size: .88rem; color: var(--gold-200); }

.player-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem 0 0;
}
.player-bar .note { margin: 0; }
.replay { margin-inline-start: auto; }

/* ---------- الأزرار ---------- */
.btn {
  font-family: "Cairo", sans-serif; font-size: .95rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: 10px;
  border: 1px solid var(--green-700); background: var(--green-700); color: #fff;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--green-500); }
.btn.ghost { background: transparent; color: var(--green-700); }
.btn.ghost:hover { background: var(--green-050); }
.btn.gold { background: var(--gold-500); border-color: var(--gold-700); color: #241d06; }
.btn.gold:hover { background: var(--gold-200); }
.btn.small { font-size: .85rem; padding: .35rem .75rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- تبويبات التعلّم ---------- */
.tabs {
  display: grid; gap: .45rem; padding: .9rem 1.2rem 0;
  grid-template-columns: repeat(5, 1fr);
}
.tab {
  font-family: "Cairo", sans-serif; font-size: .9rem; font-weight: 600;
  padding: .5rem .3rem; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; text-align: center; line-height: 1.5;
}
.tab:hover { border-color: var(--green-500); background: #f7fbf9; }
.tab[aria-expanded="true"] { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.tab .dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); margin-inline-end: .25rem; vertical-align: middle; }

.panel { padding: .9rem 1.2rem 1.2rem; }
.panel[hidden] { display: none; }
.panel-inner {
  border: 1px solid var(--line); border-radius: 10px;
  background: #fdfbf6; padding: 1rem 1.1rem;
}
.panel h4 {
  font-family: "Amiri", serif; font-size: 1.18rem; margin: 0 0 .6rem;
  color: var(--green-900);
}

/* شارات المصدر */
.src {
  display: inline-block; font-size: .82rem; font-family: "Cairo", sans-serif;
  color: var(--gold-700); background: var(--gold-050);
  border: 1px solid var(--gold-200); border-radius: 999px;
  padding: .1rem .6rem; margin: .15rem .35rem .15rem 0;
  white-space: nowrap; vertical-align: middle;
}
.src.book { color: var(--green-700); background: var(--green-050); border-color: #c9ded5; }

.teacher-text, .book-text { font-family: "Amiri", serif; font-size: 1.24rem; line-height: 2.15; }
.teacher-text p, .book-text p { margin: 0 0 .8rem; }
.teacher-text p:last-child, .book-text p:last-child { margin-bottom: 0; }
.book-text ul { margin: .3rem 0; padding-inline-start: 1.4rem; }
.book-text li { padding: .2rem 0; }
.book-text hr { border: 0; border-top: 1px solid var(--line); margin: .9rem 0; }
.book-text b { color: var(--green-900); }
.ex { color: var(--green-700); font-weight: 700; }

.note { font-size: .86rem; color: var(--ink-soft); font-family: "Cairo", sans-serif; line-height: 1.85; }
.callout {
  border-inline-start: 4px solid var(--gold-500); background: var(--gold-050);
  border-radius: 8px; padding: .6rem .85rem; margin: .8rem 0 0;
}

.tool-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }

.page-thumb {
  margin-top: .9rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; padding: .5rem; text-align: center;
}
.page-thumb img { max-width: 100%; height: auto; max-height: 340px; border-radius: 6px; cursor: zoom-in; }

/* افهم */
.idea {
  font-family: "Amiri", serif; font-size: 1.28rem; line-height: 2.1;
  background: #fff; border-inline-start: 5px solid var(--green-500);
  border-radius: 8px; padding: .7rem 1rem; margin-bottom: .9rem;
}
.mini-h { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin: .9rem 0 .3rem; font-family: "Cairo", sans-serif; }
ul.plain { list-style: none; padding-inline-start: 0; margin: .2rem 0; }
ul.plain > li { padding: .35rem 0; border-bottom: 1px dashed var(--line); font-family: "Amiri", serif; font-size: 1.15rem; line-height: 2; }
ul.plain > li:last-child { border-bottom: 0; }

/* ---------- الأسئلة ---------- */
.q { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .9rem 1rem; margin-bottom: .8rem; }
.q-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.q-num { font-size: .78rem; color: var(--ink-soft); }
.origin {
  font-size: .74rem; border-radius: 999px; padding: .05rem .5rem;
  background: var(--green-050); color: var(--green-700); border: 1px solid #c9ded5;
}
.origin.drill { background: #f2eee5; color: var(--ink-soft); border-color: var(--line); }
.q-ctx { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.q-text { font-family: "Amiri", serif; font-size: 1.26rem; line-height: 1.9; color: var(--green-900); margin: 0 0 .7rem; }

.opts { display: grid; gap: .45rem; }
.opt {
  display: flex; align-items: center; gap: .55rem; text-align: start; width: 100%;
  font-family: "Cairo", sans-serif; font-size: .98rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: .55rem .75rem; cursor: pointer; line-height: 1.7;
}
.opt:hover:not([disabled]) { border-color: var(--green-500); background: #f7fbf9; }
.opt .mark { flex: 0 0 auto; width: 1.5rem; text-align: center; font-weight: 700; color: var(--ink-soft); }
.opt.correct { border-color: var(--ok); background: #eef7f1; }
.opt.correct .mark { color: var(--ok); }
.opt.wrong { border-color: var(--warn); background: #fbf0eb; }
.opt.wrong .mark { color: var(--warn); }

.fill-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: "Amiri", serif; font-size: 1.2rem; }
.fill-row input {
  font-family: "Amiri", serif; font-size: 1.15rem;
  border: 1px solid var(--line); border-bottom: 2px solid var(--gold-500);
  border-radius: 8px; padding: .3rem .7rem; min-width: 11rem; background: #fff; color: var(--ink);
}
.fill-row input.correct { border-color: var(--ok); background: #eef7f1; }
.fill-row input.wrong { border-color: var(--warn); background: #fbf0eb; }

.match-grid { display: grid; gap: .5rem; }
.match-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; background: #fff; }
.match-row .lft { font-family: "Amiri", serif; font-size: 1.14rem; color: var(--green-900); flex: 1 1 9rem; }
.match-row select {
  font-family: "Cairo", sans-serif; font-size: .92rem;
  border: 1px solid var(--line); border-radius: 8px; padding: .35rem .5rem;
  background: #fff; color: var(--ink); flex: 1 1 10rem; max-width: 100%;
}
.match-row.correct { border-color: var(--ok); background: #eef7f1; }
.match-row.wrong { border-color: var(--warn); background: #fbf0eb; }

.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.order-list li {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; background: #fff;
  font-family: "Amiri", serif; font-size: 1.12rem;
}
.order-list li.correct { border-color: var(--ok); background: #eef7f1; }
.order-list li.wrong { border-color: var(--warn); background: #fbf0eb; }
.order-list .rank { font-family: "Cairo", sans-serif; font-size: .8rem; color: var(--ink-soft); min-width: 1.4rem; }
.order-list .mv { display: flex; gap: .25rem; margin-inline-start: auto; }
.order-list .mv button {
  font-family: "Cairo", sans-serif; font-size: .9rem; line-height: 1;
  border: 1px solid var(--line); background: #fff; color: var(--green-700);
  border-radius: 7px; padding: .3rem .5rem; cursor: pointer;
}
.order-list .mv button:hover:not([disabled]) { background: var(--green-050); }

.feedback {
  margin-top: .7rem; padding: .7rem .85rem; border-radius: 10px;
  border-inline-start: 5px solid var(--green-500); background: #f2f7f5;
}
.feedback.bad { border-inline-start-color: var(--warn); background: #fbf2ee; }
.feedback p { margin: 0 0 .35rem; }
.feedback p:last-child { margin: 0; }
.feedback .quote { font-family: "Amiri", serif; font-size: 1.12rem; color: var(--green-900); line-height: 2; }

.score {
  background: var(--gold-050); border: 1px solid var(--gold-200);
  border-radius: 10px; padding: .6rem .9rem; margin-bottom: .8rem;
  font-family: "Amiri", serif; font-size: 1.15rem; color: var(--green-900);
}

/* ---------- استدعِ بلا نظر ---------- */
.recall-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .9rem 1rem; margin-bottom: .8rem; }
.recall-prompt { font-family: "Amiri", serif; font-size: 1.26rem; color: var(--green-900); margin: 0 0 .7rem; line-height: 1.95; }
.recall-answer { font-family: "Amiri", serif; font-size: 1.18rem; line-height: 2.1; background: #f2f7f5; border-inline-start: 5px solid var(--green-500); border-radius: 8px; padding: .7rem .9rem; margin: .6rem 0; }
.rate-row { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }
.rate {
  font-family: "Cairo", sans-serif; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: .4rem .85rem; cursor: pointer;
}
.rate:hover { border-color: var(--green-500); background: #f7fbf9; }
.rate[aria-pressed="true"].good { background: #eef7f1; border-color: var(--ok); color: var(--ok); }
.rate[aria-pressed="true"].mid  { background: var(--gold-050); border-color: var(--gold-500); color: var(--gold-700); }
.rate[aria-pressed="true"].bad  { background: #fbf0eb; border-color: var(--warn); color: var(--warn); }

.empty { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- نافذة الصفحة ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(18, 54, 42, .93);
  display: flex; flex-direction: column;
}
.lightbox[hidden] { display: none; }
.lightbox-bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1rem; color: var(--gold-050);
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: .9rem;
}
.lightbox-bar #lightbox-close { margin-inline-start: auto; color: var(--gold-050); border-color: var(--gold-200); }
.lightbox-bar #lightbox-close:hover { background: rgba(255,255,255,.12); }
.lightbox-body { flex: 1; overflow: auto; padding: 1rem; text-align: center; }
.lightbox-body img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; }

.site-footer {
  border-top: 1px solid var(--line); background: #f6f1e7;
  padding: 1.2rem 1.1rem; text-align: center; font-size: .85rem; color: var(--ink-soft);
}

/* ---------- الهاتف ---------- */
@media (max-width: 720px) {
  .tabs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .header-inner { padding: .6rem .8rem; gap: .6rem; }
  .brand img { width: 40px; height: 40px; }
  .brand-name { font-size: 1.2rem; }
  .brand-sub { font-size: .8rem; }
  .header-facts { gap: .9rem; width: 100%; justify-content: space-between; margin: 0; }
  .header-facts dd { font-size: 1rem; }
  main { padding: 1rem .7rem 3rem; }
  .lesson-title { font-size: 1.42rem; }
  .item-head, .player, .tabs, .panel { padding-inline: .8rem; }
  .panel-inner { padding: .8rem .8rem; }
  /* على الهاتف: الرقم والتوقيت في سطر، والعنوان تحتهما بعرض البطاقة */
  .item-head { gap: .5rem .6rem; }
  .item-num { order: 1; }
  .item-time { order: 2; }
  .item-state { order: 3; }
  .item-caret { order: 4; margin-inline-start: auto; }
  .item-title { order: 5; flex: 1 1 100%; font-size: 1.24rem; margin-top: .1rem; }
  .tabs { grid-template-columns: repeat(2, 1fr); }
  .tab { font-size: .88rem; }
  .teacher-text, .book-text { font-size: 1.18rem; }
  .q-text { font-size: 1.14rem; }
  .idea { font-size: 1.16rem; }
  .match-row select { flex-basis: 100%; }
  .fill-row input { min-width: 100%; }
  .player-frame { aspect-ratio: 16 / 11; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .tabs, .player, .toc, .lightbox { display: none; }
  .panel { display: block !important; }
}