/* =============================================================================
   styles.css — ثيم navy/red، RTL أولاً، شاشات الدخول، الشريط، لوحة الملاحظات،
   المخططات، التظليلات، والتجاوب.  Theme + RTL + gate + panel + diagrams + marks.
   ============================================================================= */

/* =============================================================================
   لوحة عصرية: رمادي محايد نظيف + أحمر واثق + كروم فحمي + خط IBM Plex العصري.
   Modern palette: clean neutral grays, a confident red, charcoal chrome,
   one modern sans family (IBM Plex Sans Arabic) across the whole UI.
   (أسماء الرموز --navy/--red محفوظة للاستقرار؛ قيمها صارت محايدة/عصرية.)
   ============================================================================= */
:root {
  --navy: #1f1f23;            /* فحمي محايد — بنية وكروم / neutral charcoal (chrome & structure) */
  --navy-2: #2c2c31;          /* فحمي مرفوع / raised charcoal */
  --red: #c5372e;             /* أحمر واثق نظيف (≈5.5:1 على الأبيض) / confident clean red */
  --red-2: #db5249;           /* أحمر أفتح للمساحات الكبيرة / lighter red, large accents */
  --teal: #2c8a7f;            /* أخضر مزرقّ للدروس / teal for lessons */
  --gold: #b8862f;            /* كهرماني لاقتباس الملاحظة / amber for note-quote */
  --bg: #f5f5f4;             /* رمادي فاتح نظيف محايد / clean neutral light ground */
  --surface: #ffffff;        /* أبيض للبطاقات / white surfaces */
  --ink: #1c1c1e;            /* أسود حديث للنصّ / modern near-black text */
  --muted: #66666b;          /* رمادي محايد — AA على الأرضية والسطح؛ بيانات ثانوية فقط
                                neutral gray; AA on bg/surface; metadata only */
  --line: #e5e4e2;           /* خيط فاتح نظيف / clean light hairline */
  --mark: #ffe27a;           /* تظليل الملاحظات (أصفر) / note highlight */
  --mark-active: #ffc94d;
  --lesson: #a8e6b8;          /* تظليل الدروس (أخضر) / lesson highlight */
  --lesson-active: #6fd189;
  /* أسطح ودلالات مشتقّة / derived neutral surfaces & accents */
  --surface-2: #f3f3f1;      /* صفوف بديلة وأسطح خفيفة / zebra rows, subtle fills */
  --surface-warm: #ededeb;   /* شرائح وأشرطة تبديل / chips & toggle tracks */
  --navy-pale: #e7e7ea;      /* تعبئة باهتة محايدة / pale neutral fill */
  --code-bg: #f5f5f4;        /* كتلة أوامر / code surface */
  --code-head: #ebebe9;
  --code-border: #e2e2e0;
  --red-deep: #97271f;       /* أحمر داكن لحالات الخطر / deep red for danger hover */
  --radius: 10px;
  --shadow: 0 4px 16px rgba(20,20,22,.06), 0 1px 3px rgba(20,20,22,.08);
  --font: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --display: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
}
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
/* أيقونات SVG خطّية / line-icon base */
.ic { flex: 0 0 auto; display: block; }

/* ---- شاشات البوابة / gate screens ---------------------------------------- */
/* صفحة عنوان تحريرية على ورق / editorial title-page on parchment */
.gate-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 24px; z-index: 50;
}
.gate-sheet {
  max-width: 480px; width: 100%; text-align: center;
  padding: clamp(20px, 5vw, 48px) 24px;
}
.gate-colophon {
  font-family: var(--font); color: var(--muted);
  font-size: 12.5px; letter-spacing: .02em; margin: 0 0 18px;
}
.gate-title {
  font-family: var(--display); color: var(--ink);
  font-size: clamp(30px, 6vw, 46px); font-weight: 700; line-height: 1.2;
  margin: 0; text-wrap: balance;
}
.gate-rule { width: 56px; height: 3px; background: var(--red); border-radius: 2px; margin: 22px auto; }
.gate-sub {
  color: var(--ink); font-weight: 500;
  font-size: clamp(15px, 2.2vw, 17px); margin: 0 0 6px;
}
.gate-note { color: var(--muted); font-size: 14px; margin: 8px 0 28px; }
.gate-error { color: var(--red); font-size: 14px; min-height: 20px; margin-top: 14px; word-break: break-word; }
.btn-google {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #3c4043; border: 1px solid #dadce0;
  border-radius: 8px; padding: 12px 20px; font-size: 15px; font-weight: 500;
  width: 100%; justify-content: center; transition: background .15s, box-shadow .15s;
}
.gate-sheet .btn-google { max-width: 320px; margin-inline: auto; }
.btn-google:hover { background: #f8f9fa; box-shadow: 0 2px 10px rgba(44,38,32,.08); }
.btn-google:disabled { opacity: .5; cursor: not-allowed; }
.spinner {
  width: 44px; height: 44px; border: 4px solid rgba(44,38,32,.14);
  border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-secondary {
  background: var(--navy); color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-weight: 500;
}
.btn-secondary.tiny { padding: 6px 12px; font-size: 13px; }

/* ---- الشريط العلوي / topbar ---------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--navy); color: #fff; flex-wrap: wrap;
  /* تحترم نتوء الشاشة في الوضع الأفقي / respect the notch in landscape */
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.topbar-start, .topbar-center, .topbar-end { display: flex; align-items: center; gap: 10px; }
.topbar-center { flex-wrap: wrap; }
.topbar-title { font-weight: 700; }
.icon-btn {
  background: rgba(255,255,255,.12); color: #fff; border: none;
  border-radius: 8px; padding: 7px 10px; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
}
.icon-btn:hover { background: rgba(255,255,255,.22); }
.badge {
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 1px 7px; font-weight: 700;
}
.lang-toggle { display: flex; background: rgba(255,255,255,.1); border-radius: 8px; padding: 3px; }
.lang-toggle.small { background: rgba(255,255,255,.06); }
.seg {
  background: transparent; color: #c9c9cf; border: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; font-size: 14px; font-weight: 500;
}
.lang-toggle.small .seg { padding: 5px 10px; font-size: 13px; }
.seg.active { background: #fff; color: var(--navy); font-weight: 700; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 14px; max-width: 180px; }
.user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* ---- المكتبة / library ----------------------------------------------------- */
.library { max-width: 1000px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px 80px; }
.library-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.library-head h1 { font-family: var(--display); color: var(--ink); font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
.library-head h1::after { content: ""; display: block; width: 52px; height: 3px; background: var(--red); border-radius: 2px; margin: 16px auto 0; }
.library-head p { color: var(--muted); margin: 0; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.lib-card {
  display: flex; gap: 14px; text-align: start; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s;
  font-family: inherit;
}
.lib-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--red); }
.lib-card-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--surface-2); color: var(--red);
}
.lib-card-body { min-width: 0; }
.lib-title { font-family: var(--display); color: var(--ink); font-size: 20px; margin: 0 0 6px; line-height: 1.35; text-wrap: balance; }
.lib-sub { color: var(--muted); font-size: 13px; margin: 0 0 10px; line-height: 1.6; }
.lib-meta { display: inline-block; background: var(--surface-warm); color: #6e5d49; font-size: 12px; padding: 2px 9px; border-radius: 999px; } /* #6e5d49 ≈ 5.3:1 على البيج / on the beige chip */

/* تبديل ظهور المكتبة مقابل عرض المستند / library vs document-view visibility */
.layout { display: none; align-items: flex-start; }
body.doc-open .library { display: none; }
body.doc-open .layout { display: flex; }
body:not(.doc-open) .doc-only { display: none !important; }
.doc {
  flex: 1 1 auto; min-width: 0;
  max-width: 900px; margin: 0 auto; padding: 32px 28px 120px;
}
.notes-panel {
  flex: 0 0 360px; width: 360px;
  position: sticky; top: 56px; align-self: stretch;
  height: calc(100vh - 56px); overflow-y: auto;
  background: var(--surface); border-inline-start: 1px solid var(--line);
  display: none;
}
body.panel-open .notes-panel { display: block; }

/* ---- رأس المستند / document head ----------------------------------------- */
.doc-head { border-bottom: 2px solid var(--red); padding-bottom: 22px; margin-bottom: 32px; }
.doc-title { font-family: var(--display); color: var(--red); font-size: clamp(28px, 4.5vw, 42px); margin: 0 0 10px; line-height: 1.2; text-wrap: balance; }
.doc-subtitle { color: var(--muted); font-weight: 500; font-size: clamp(15px, 2.2vw, 18px); margin: 0 0 12px; }
.doc-meta { color: var(--red-2); font-weight: 700; margin: 4px 0; }
.doc-version { color: var(--muted); font-size: 14px; margin: 2px 0; }

/* ---- الكتل / blocks ------------------------------------------------------- */
.block { margin: 18px 0; }
.lang-pane { display: block; }
.blk-heading { font-family: var(--display); color: var(--ink); line-height: 1.3; text-wrap: balance; }
h1.blk-heading { color: var(--red); font-size: clamp(22px, 3vw, 28px); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 36px 0 14px; }
h2.blk-heading { color: var(--red); font-size: clamp(19px, 2.4vw, 22px); margin: 28px 0 10px; }
h3.blk-heading { color: var(--ink); font-size: 18px; margin: 20px 0 8px; }
.blk-p { margin: 8px 0; text-wrap: pretty; }
.blk-list { margin: 8px 0; padding-inline-start: 22px; }
.blk-list li { margin: 5px 0; }
/* قياس قراءة مريح للنصّ الجاري (~68 محرفاً)؛ الجداول/الأوامر/المخططات تبقى بعرض كامل
   comfortable reading measure for running prose (~68ch); tables/code/diagrams stay full-width */
.blk-p, .blk-list, .blk-note { max-width: 68ch; }
/* تنبيه داخل المستند: غلاف دافئ + إطار ذهبي رفيع كامل (لا شريط جانبي)
   in-document callout: warm wash + full thin gold hairline, no side-stripe */
.blk-note {
  background: #fdf4e6; border: 1px solid #e7cfa1;
  padding: 12px 16px; border-radius: 8px; color: #5b4a2e; font-size: 15px;
}

/* ---- الجداول / tables ----------------------------------------------------- */
.blk-table-scroll { overflow-x: auto; margin: 10px 0; border-radius: 8px; border: 1px solid var(--line); }
.blk-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); min-width: 480px; }
.blk-table th { background: var(--navy); color: #fff; text-align: start; padding: 10px 12px; font-weight: 600; }
.blk-table td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.blk-table tbody tr:nth-child(even) { background: var(--surface-2); }

/* ---- كتل الأوامر / code blocks -------------------------------------------- */
.blk-code { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 8px; margin: 12px 0; overflow: hidden; }
.blk-code-label { background: var(--code-head); color: var(--navy); font-weight: 700; font-size: 13px; padding: 7px 12px; }
.blk-code pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.blk-code code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; line-height: 1.6; }

/* ---- المخططات / diagrams -------------------------------------------------- */
.blk-diagram { margin: 18px 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.diagram-title { text-align: center; color: var(--navy); font-weight: 700; font-size: 16px; margin-bottom: 14px; }
.diagram-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.diagram-box {
  background: var(--navy); color: #fff; border-radius: 8px; padding: 12px 16px;
  text-align: center; font-size: 13.5px; font-weight: 500; min-width: 120px; max-width: 260px;
  display: flex; flex-direction: column; gap: 2px;
}
.diagram-box.kind-start, .diagram-box.kind-terminal { background: var(--teal); border-radius: 22px; }
.diagram-box.kind-decision { background: var(--gold); border-radius: 4px; transform: none; }
.diagram-box.kind-alt { background: var(--navy-pale); color: var(--navy); }
.diagram-box.kind-invalid { background: var(--red); }
.diagram-arrow { display: flex; flex-direction: column; align-items: center; color: var(--muted); margin: 4px 0; }
.arrow-glyph { font-size: 20px; line-height: 1; color: var(--navy); }
.arrow-label { font-size: 12px; color: var(--muted); }
.diagram-caption { text-align: center; color: var(--muted); font-style: italic; font-size: 13px; margin-top: 12px; }

/* ---- إظهار/إخفاء اللغة / language visibility ------------------------------ */
[data-lang="all"] { display: block; }
body.lang-ar [data-lang="en"] { display: none; }
body.lang-en [data-lang="ar"] { display: none; }
/* span داخلي ثنائي اللغة يبقى ظاهراً حسب الوضع */
.diagram-box span[data-lang], .diagram-title span[data-lang],
.diagram-caption span[data-lang], .doc-title span[data-lang],
.doc-subtitle span[data-lang], .arrow-label[data-lang] { display: block; }
body.lang-ar .arrow-label[data-lang="en"],
body.lang-en .arrow-label[data-lang="ar"] { display: none; }

/* وضع الاثنين — عمودين / both mode — side-by-side columns */
body.lang-both.both-cols .block { display: flex; gap: 28px; align-items: flex-start; }
body.lang-both.both-cols .block > .lang-pane { flex: 1 1 0; min-width: 0; }
body.lang-both.both-cols .block > .lang-pane[data-lang="all"] { flex-basis: 100%; }
/* وضع الاثنين — متداخل / both mode — stacked */
body.lang-both.both-stack .block > .lang-pane[data-lang="en"] {
  margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); opacity: .92;
}

/* ---- التظليلات / highlight marks ------------------------------------------ */
mark.note-mark {
  background: var(--mark); color: inherit; border-radius: 3px;
  padding: 0 1px; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(201,138,43,.4);
}
mark.note-mark.active { background: var(--mark-active); box-shadow: inset 0 -2px 0 var(--red); }
/* تظليل الدروس بلون مختلف / lesson marks in a distinct color */
mark.note-mark.lesson { background: var(--lesson); box-shadow: inset 0 -2px 0 rgba(47,143,134,.5); }
mark.note-mark.lesson.active { background: var(--lesson-active); box-shadow: inset 0 -2px 0 var(--teal); }

/* ظهور التظليل فوق الخلفيات الملوّنة (الأوامر/المخططات السماوية) */
/* keep marks visible over colored backgrounds (code / diagram blocks) */
.blk-code mark.note-mark, .blk-diagram mark.note-mark {
  color: #1f2733; border-radius: 3px; padding: 0 2px;
  outline: 1px solid rgba(0,0,0,.15);
}
.diagram-box mark.note-mark {
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); font-weight: 700;
}

/* قائمة التحديد العائمة / floating selection menu */
.add-note-menu {
  position: absolute; z-index: 40;
  background: var(--navy); border-radius: 10px; padding: 4px;
  box-shadow: var(--shadow); display: none; gap: 2px;
}
.add-note-menu .menu-btn {
  background: transparent; color: #fff; border: none; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.add-note-menu .menu-btn:hover { background: rgba(255,255,255,.16); }

/* ---- لوحة الملاحظات / notes panel ----------------------------------------- */
.panel-head {
  position: sticky; top: 0; background: var(--surface); z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 17px; color: var(--navy); margin: 0; flex: 1; }
.panel-head .icon-btn { background: var(--surface-2); color: var(--ink); }
.panel-tabs { display: flex; flex: 1; gap: 4px; background: var(--surface-warm); border-radius: 9px; padding: 3px; }
.panel-tabs .seg { color: var(--muted); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.panel-tabs .seg.active { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tab-count { background: rgba(0,0,0,.08); border-radius: 999px; font-size: 11px; padding: 0 6px; margin-inline-start: 2px; }
.panel-tabs .seg.active .tab-count { background: var(--red); color: #fff; }
.panel-subhead {
  position: sticky; top: 53px; z-index: 2; background: var(--surface);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--line);
}
.panel-subhead .resolved-filter { margin-inline-start: auto; }
.resolved-filter { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.notes-list { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.notes-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 20px; }

.note-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; box-shadow: 0 1px 3px rgba(44,38,32,.05); cursor: pointer; transition: border-color .15s;
}
.note-card:hover { border-color: var(--gold); }
.note-card.active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(179,50,47,.15); }
/* المحلولة تنحسر بصرياً بسطح باهت ونصّ مكتوم — لا شفافية تُسقط التباين دون AA
   resolved cards recede via a muted surface + muted body, not opacity that drops text under AA */
.note-card.resolved { background: var(--surface-2); }
.note-card.resolved .note-body { color: var(--muted); }
.note-card.composer { border-color: var(--navy); cursor: default; }
.note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.note-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.note-author { font-weight: 700; font-size: 13px; color: var(--navy); }
.note-time { font-size: 11px; color: var(--muted); }
.note-quote {
  margin: 0 0 8px; padding: 6px 10px; background: #fff8e6;
  border-inline-start: 3px solid var(--gold); border-radius: 4px;
  font-size: 13px; color: #6b5526; max-height: 80px; overflow: auto;
}
.note-body { margin: 0 0 8px; font-size: 14px; white-space: pre-wrap; }
.composer-input, .reply-input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-family: inherit; font-size: 14px; resize: vertical;
}
.composer-input { min-height: 70px; margin-bottom: 8px; }

.replies { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding-inline-start: 8px; border-inline-start: 2px solid var(--line); }
.reply { font-size: 13px; }
.reply-author { font-weight: 700; color: var(--navy); margin-inline-end: 6px; }
.reply-time { font-size: 11px; color: var(--muted); }
.reply-body { margin: 2px 0 0; white-space: pre-wrap; }
.reply-form { display: flex; gap: 6px; margin-top: 8px; }
.reply-form .reply-input { flex: 1; }

.note-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
/* أزرار إجراءات أيقونية مع تلميح (title) عند المرور / icon action buttons w/ hover tooltip */
.note-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted);
  transition: background .15s, color .15s;
}
.note-act:hover { background: var(--surface-2); color: var(--ink); }
.note-act.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-deep); }
.note-act:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* زر إرسال الرد أيقوني / icon send button for replies */
.reply-send {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: none; border-radius: 9px;
  background: var(--navy); color: #fff; transition: background .15s;
}
.reply-send:hover { background: var(--navy-2); }
.reply-send:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.btn-mini { background: var(--navy); color: #fff; border: none; border-radius: 7px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.btn-mini:hover { background: var(--navy-2); }
.btn-mini:disabled { opacity: .6; }
.btn-link { background: none; border: none; color: var(--red); font-size: 13px; padding: 6px 0; display: inline-flex; align-items: center; gap: 5px; }
.btn-link.danger { color: var(--red-deep); }

/* زر الطيّ + الحالة المطويّة / collapse toggle + collapsed state */
.collapse-btn {
  background: none; border: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; line-height: 1; padding: 0; flex: 0 0 auto;
}
.collapse-btn:hover { color: var(--navy); }
.note-card.collapsed .note-collapsible { display: none; }
.note-card.collapsed .note-head { margin-bottom: 0; }

/* بطاقة الدرس وبطاقة الملاحظة العامة / lesson & general cards */
/* هوية النوع عبر إطار رفيع كامل بلون باهت، لا شريط جانبي
   card-type identity via a full soft-tinted hairline, not a side-stripe */
.note-card.lesson { border-color: #8fc6bf; }
.note-card.lesson.active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(47,143,134,.18); }
.note-card.general { border-color: #e0c48f; }
.general-badge {
  margin-inline-start: auto; align-self: flex-start;
  background: var(--gold); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 1px 8px;
}
.note-card.composer.lesson { border-color: var(--teal); }

/* مجموعة ملاحظات مترابطة: العامة، أو عدّة ملاحظات على نفس النص
   a linked group of notes: general, or several notes on the same text */
.note-group {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: 10px;
  border-inline-start: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.note-group.same-text {
  border-inline-start-color: var(--red);
  background: color-mix(in srgb, var(--red) 4%, transparent);
}
.note-group.general { border-inline-start-color: var(--gold); }
.note-group-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
/* بطاقات داخل المجموعة أهدأ بصرياً من المنفردة / in-group cards recede a touch */
.note-group .note-card { box-shadow: none; }

/* تمييز كتلة «وصلت هنا» / current reading-position block */
.block.at-progress { position: relative; }
.block.at-progress::before {
  content: ""; position: absolute; inset-inline-start: -20px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}
.block.at-progress > .lang-pane { border-inline-start: 3px solid var(--teal); padding-inline-start: 10px; }
@keyframes progressFlash {
  0%, 100% { background: transparent; }
  30% { background: rgba(47,143,134,.18); }
}
.block.at-progress-flash { animation: progressFlash 1.4s ease; border-radius: 8px; }
#continue-btn { color: var(--teal); font-weight: 700; }

/* ---- نافذة الإعدادات / settings modal (<dialog> أصلي) --------------------- */
/* dialog أصلي: الطبقة العليا والتركيز وEscape يديرها المتصفّح / native top-layer,
   focus trap & Escape handled by the browser. نملأ الشاشة كي يُغلق نقر الخلفية. */
.modal { border: none; padding: 20px; background: transparent; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
dialog.modal[open] { display: flex; align-items: center; justify-content: center; }
.modal::backdrop { background: rgba(20,28,46,.55); }
.modal-card { background: var(--surface); border-radius: 14px; width: 100%; max-width: 480px; max-height: 85vh; overflow: auto; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-family: var(--display); font-size: 19px; color: var(--ink); margin: 0; }
.modal-head .icon-btn { background: var(--surface-2); color: var(--ink); }
.allow-form { display: flex; gap: 8px; padding: 16px 18px 6px; flex-wrap: wrap; }
.allow-form input, .allow-form select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 14px; }
.allow-form input { flex: 1; min-width: 160px; }
#settings-error { padding: 0 18px; }
.allow-list { list-style: none; margin: 8px 0 0; padding: 0 18px 12px; display: flex; flex-direction: column; gap: 8px; }
.allow-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-radius: 8px; }
.allow-info { display: flex; flex-direction: column; min-width: 0; }
.allow-email-txt { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.allow-role-badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; align-self: flex-start; margin-top: 2px; }
.role-owner { background: var(--red); color: #fff; }
.role-viewer { background: var(--navy-pale); color: var(--navy); }
.allow-remove { background: none; border: none; color: var(--red); font-size: 16px; }
.modal-foot { padding: 0 18px 16px; color: var(--muted); font-size: 12px; }

/* ---- التجاوب / responsive ------------------------------------------------- */
@media (max-width: 820px) {
  .notes-panel {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: 100%; height: 70vh; border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,.18); z-index: 30;
  }
  /* مساحة آمنة أسفل القائمة فوق شريط المنزل / safe area below the list over the home bar */
  .notes-list { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .doc { padding: 20px 16px 100px; }
  .topbar-center { order: 3; width: 100%; justify-content: center; }
  body.lang-both.both-cols .block { flex-direction: column; gap: 4px; }
  .user-chip span { display: none; }
}

/* ---- إتاحة الوصول: تركيز مرئي + أداة إخفاء بصري / a11y: focus + sr utility -- */
/* عنصر مخفي بصرياً لكن متاح لقارئات الشاشة (تسميات الحقول) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* حلقة تركيز واضحة لكل العناصر التفاعلية / clear focus ring everywhere */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* على الشريط الكحلي والقوائم الداكنة نحتاج حلقة فاتحة / light ring on dark chrome */
.topbar :focus-visible, .add-note-menu :focus-visible { outline-color: #fff; }
/* التظليلات قابلة للتركيز والتفعيل بلوحة المفاتيح / marks are keyboard-operable */
mark.note-mark { outline-offset: 1px; }
mark.note-mark:focus-visible { outline: 2px solid var(--red); }
mark.note-mark.lesson:focus-visible { outline-color: var(--teal); }

/* ---- التنبيهات العابرة / toasts ------------------------------------------- */
.toast-region {
  position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 16px; pointer-events: none; z-index: 70;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  max-width: 460px; background: var(--navy); color: #fff;
  border-radius: 10px; padding: 11px 14px; box-shadow: var(--shadow);
  font-size: 14px; opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.toast-in { opacity: 1; transform: none; }
.toast.toast-out { opacity: 0; transform: translateY(8px); }
.toast.toast-error { background: var(--red); }
.toast-text { flex: 1; line-height: 1.5; word-break: break-word; }
.toast-close {
  background: rgba(255,255,255,.18); color: #fff; border: none;
  border-radius: 6px; width: 24px; height: 24px; line-height: 1; flex: 0 0 auto;
}
.toast-close:hover { background: rgba(255,255,255,.3); }

/* ---- نافذة التأكيد / confirm dialog --------------------------------------- */
.confirm-dialog { border: none; padding: 20px; background: transparent; }
.confirm-dialog::backdrop { background: rgba(20,28,46,.55); }
.confirm-card {
  background: var(--surface); border-radius: 14px; padding: 22px 24px;
  max-width: 400px; box-shadow: var(--shadow);
}
.confirm-message { margin: 0 0 18px; font-size: 15px; color: var(--ink); line-height: 1.6; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn-mini.confirm-danger { background: var(--red); }
.btn-mini.confirm-danger:hover { background: var(--red-deep); }

/* ---- أهداف اللمس: 44px على أجهزة اللمس فقط / touch targets on coarse pointers -- */
/* نستهدف نوع المؤشّر لا عرض الشاشة، كي يستفيد اللمس على أي مقاس وتبقى الفأرة مدمجة.
   target the pointer type, not the viewport, so touch benefits at any size and
   mouse keeps its compact density. */
@media (pointer: coarse) {
  .seg, .icon-btn, .btn-mini, .btn-secondary.tiny, .menu-btn, .btn-link, .btn-google {
    min-height: 44px;
  }
  .note-act { width: 44px; height: 44px; }
  .reply-send { width: 44px; height: 44px; }
  .seg, .icon-btn, .btn-mini, .btn-secondary.tiny, .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-link { display: inline-flex; align-items: center; padding-inline: 4px; }
  .icon-btn { min-width: 44px; }
  .collapse-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .allow-remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .resolved-filter { min-height: 44px; }
  .toast-close { width: 34px; height: 34px; }
}

/* على أجهزة اللمس لا تعلق حالة hover بعد اللمسة / don't let hover-lift stick after a tap */
@media (hover: none) {
  .lib-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
}

/* ---- تقليل الحركة (غير اختياري) / reduced motion (not optional) ----------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}