@font-face { font-family: 'Noto Naskh Arabic'; src: url('/fonts/NotoNaskhArabic-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Noto Naskh Arabic'; src: url('/fonts/NotoNaskhArabic-Bold.ttf'); font-weight: 700; }

:root {
  --ink: #232019; --paper: #faf7f0; --card: #fffdf8; --line: #e3ddcf;
  --accent: #175e54; --citable: #14682f; --unverified: #9a6700; --invalid: #b42318;
  --muted: #6d675c; --neutral: #8a8478;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: 17px; line-height: 1.9;
}
.top { display: flex; align-items: center; gap: 12px; padding: 8px 22px; border-bottom: 1px solid var(--line); background: var(--card); }
.top h1 { font-size: 1.25rem; margin: 0; color: var(--accent); }
.top .ghost { margin-inline-start: auto; font-size: .8rem; }
.chip { font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.chip.ok::before { content: '● '; color: var(--citable); }
.chip.bad::before { content: '● '; color: var(--invalid); }

.searchbar { display: flex; gap: 8px; padding: 16px 22px 6px; }
.searchbar input { flex: 1; font: inherit; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.searchbar button { font: inherit; padding: 10px 26px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; }
.searchbar button:hover { filter: brightness(1.1); }
.searchbar select { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.mode-toggle { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.mode-toggle label { padding: 9px 14px; cursor: pointer; font-size: .9rem; color: var(--muted); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.mode-toggle label:has(input:checked) { background: var(--accent); color: #fff; }
.mode-toggle input { display: none; }
.mode-hint { font-size: .78rem; color: var(--muted); padding: 0 22px 6px; }
.forms-toggle { display: inline-flex; gap: 6px; align-items: baseline; margin-inline-start: 14px; color: var(--ink); cursor: pointer; }
.forms-toggle small { color: var(--muted); }
.forms-line { font-size: .85rem; color: var(--muted); padding: 2px 22px 6px; }
.forms-line b { color: var(--accent); }

.filters { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 6px 22px 14px; font-size: .85rem; color: var(--muted); align-items: end; }
.filters label { display: flex; flex-direction: column; gap: 2px; }
.filters input, .filters select { font: inherit; font-size: .9rem; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); min-width: 90px; }
.filters .check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.fhint { font-size: .68rem; color: var(--muted); line-height: 1.5; }
/* مرشّح «فيه قولٌ منسوب إلى» أداة مختلفة الجنس عن مرشّحات الكتب —
   يُفصل بصرياً بإطار مميز إثر بلاغ باحث خلط بينه وبين المذهب (٢ سبتمبر) */
.filters .scholar-box { border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
  background: var(--paper); border-radius: 10px; padding: 5px 10px 7px; margin-inline-start: 8px; }

/* القوائم المخصصة بعدّادات الأعمال — الحقل نفسه حقل البحث */
.combo-wrap { position: relative; }
.combo-panel { position: absolute; top: 100%; inset-inline-start: 0; z-index: 40;
  min-width: 250px; max-width: 330px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 22px rgba(30,25,15,.14); overflow: hidden; }
.combo-note { font-size: .72rem; color: var(--muted); padding: 6px 10px; border-bottom: 1px dashed var(--line); background: var(--paper); }
.combo-list { max-height: 330px; overflow-y: auto; }
.combo-item { display: flex; justify-content: space-between; gap: 10px; width: 100%;
  text-align: start; font: inherit; font-size: .88rem; padding: 5px 10px;
  border: 0; background: none; cursor: pointer; color: var(--ink); }
.combo-item:hover { background: var(--paper); color: var(--accent); }
.combo-item small { color: var(--muted); white-space: nowrap; }
.combo-all { color: var(--muted); border-bottom: 1px solid var(--line); }

.layout { display: flex; gap: 14px; padding: 0 22px 40px; align-items: flex-start; }
#results-col { flex: 1; min-width: 0; }
.meta { font-size: .8rem; color: var(--muted); padding: 4px 2px; }

/* ---------- البطاقة: الإحالة رأسٌ، والحالة حدٌّ لوني على جهة البدء ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px 12px; margin-bottom: 10px; }
.card.state-citable    { border-inline-start: 4px solid var(--citable); }
.card.state-unverified { border-inline-start: 4px solid var(--unverified); }
.card.state-invalid    { border-inline-start: 4px solid var(--neutral); }
.card.appended-card { border-style: dashed; border-inline-start-style: solid; }

.cardhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: .98rem; }
.cardhead .mark { font-size: 1rem; }
.cardhead strong { font-size: 1.05rem; }
.state-citable .cardhead .mark, .state-citable .cardhead .ctext { color: var(--citable); }
.state-unverified .cardhead .mark, .state-unverified .cardhead .ctext { color: var(--unverified); }
.state-invalid .cardhead .ctext strong { color: var(--ink); }
/* وسم البطلان الأبرز — بند مراجعة الباحث ٢ (٢ سبتمبر): قيس على المسابير الثلاثين
   فكان نادراً (13/300 خانة، صفر في المركز الأول) — فالعلاج إبراز الوسم لا خفض الترتيب */
.invreason { display: inline-block; color: var(--ink); background: var(--line);
  border: 1px solid var(--neutral); border-radius: 4px; padding: 0 .45em;
  font-size: .88rem; font-weight: 600; }
.headbtns { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.hintnote { font-size: .75rem; color: var(--muted); }
.cardsub { font-size: .8rem; color: var(--muted); margin: 1px 0 6px; }

.copybtn, .addbtn, .fmtbtn { font: inherit; font-size: .8rem; border: 1px solid var(--line);
  background: var(--paper); border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.fmtbtn { border-start-start-radius: 0; border-end-start-radius: 0; padding: 2px 6px; margin-inline-start: -7px; border-inline-start: 0; }
.copybtn:has(+ .fmtbtn) { border-start-end-radius: 0; border-end-end-radius: 0; }
.copybtn:hover, .addbtn:hover, .fmtbtn:hover { border-color: var(--accent); color: var(--accent); }
.addbtn.inb { color: var(--citable); border-color: var(--citable); }

.badge { font-size: .72rem; border-radius: 6px; padding: 1px 7px; border: 1px solid var(--line); color: var(--muted); }
.badge.unv { color: var(--unverified); border-color: var(--unverified); }
.path { font-size: .8rem; color: var(--muted); margin: 2px 0 6px; }
.snippet { white-space: pre-wrap; max-height: 14.5em; overflow: hidden; position: relative; }
.snippet.open { max-height: none; }
.morebtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: .85rem; padding: 0; }
.edline { font-size: .88rem; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.actions button { font: inherit; font-size: .85rem; padding: 4px 14px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; cursor: pointer; }
.actions button:hover { border-color: var(--accent); color: var(--accent); }

/* حلقة التركيز — بلون حالة البطاقة */
.kfocus { outline: 2px solid var(--accent); outline-offset: 1px; }
.card.state-citable.kfocus, tr.state-citable.kfocus { outline-color: var(--citable); }
.card.state-unverified.kfocus, tr.state-unverified.kfocus { outline-color: var(--unverified); }
.card.state-invalid.kfocus, tr.state-invalid.kfocus { outline-color: var(--neutral); }

/* ---------- جدول الاستقصاء اللفظي: فهرس يُمسح بالعين ---------- */
.lextab { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; font-size: .92rem; }
.lextab thead th { font-size: .75rem; color: var(--muted); font-weight: 400;
  text-align: start; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.lexrow { cursor: pointer; border-top: 1px solid #f0ece1; }
.lexrow:hover td { background: var(--paper); }
.lexrow td { padding: 3px 10px; vertical-align: top; line-height: 1.75; }
.lexrow .c-book { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.lexrow .c-book small { color: var(--muted); }
.lexrow .c-loc { white-space: nowrap; color: var(--muted); font-size: .86rem; }
.lexrow .c-snip { color: var(--ink); }
.lexrow .c-mark { width: 2em; text-align: center; }
.state-citable .c-mark { color: var(--citable); }
.state-unverified .c-mark { color: var(--unverified); }
.state-invalid .c-mark { color: var(--neutral); }
/* إحداثيات box-shadow فيزيائية لا منطقية: القيمة السالبة ترسم على اليمين = جهة البدء في RTL */
.lexrow.state-citable    { box-shadow: inset -4px 0 0 var(--citable); }
.lexrow.state-unverified { box-shadow: inset -4px 0 0 var(--unverified); }
.lexrow.state-invalid    { box-shadow: inset -4px 0 0 var(--neutral); }
.lexrow.open td { background: var(--paper); }
.lexexp > td { padding: 6px 10px 10px; background: var(--paper); }
.lexexp .card { margin-bottom: 0; }
mark { background: #f5e28a; color: inherit; padding: 0 1px; border-radius: 2px; }

.lexpager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; font-size: .88rem; color: var(--muted); }
.lexpager button { font: inherit; font-size: .85rem; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 4px 14px; cursor: pointer; }
.lexpager button:disabled { opacity: .35; cursor: default; }

.appended-divider { margin: 26px 0 12px; padding: 10px 14px; border-radius: 10px; background: #fdf6e3; border: 1px dashed var(--unverified); }
.appended-divider span { font-weight: 700; color: var(--unverified); display: block; }
.appended-divider small { color: var(--muted); }

/* ---------- العمود الجانبي: المصوّرة أو السلة (تتبادلان) ---------- */
#pdf-col, #basket-col { position: sticky; top: 10px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#pdf-col { width: 46%; height: calc(100vh - 40px); }
#basket-col { width: 330px; max-height: calc(100vh - 40px); }
#pdf-frame { border: 0; flex: 1; width: 100%; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.pdf-note { padding: 4px 14px; font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.phrase-line { font-weight: 600; }
.ghost { background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); }
.ghost:hover { color: var(--invalid); }

.bk-count { font-size: .8rem; color: var(--muted); margin-inline-start: auto; }
.bk-bar { display: flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); padding: 6px 14px; border-bottom: 1px dashed var(--line); }
.bk-bar label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
.bk-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.bk-item { position: relative; padding: 6px 14px 6px 30px; border-bottom: 1px solid #f0ece1; cursor: pointer; }
.bk-item:hover { background: var(--paper); }
.bk-cite { font-size: .85rem; display: block; }
.bk-cite.s-c { color: var(--citable); }
.bk-cite.s-u { color: var(--unverified); }
.bk-cite.s-i { color: var(--neutral); font-size: .8rem; }
.bk-snip { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.bk-rm { position: absolute; inset-inline-end: auto; left: 8px; top: 8px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .8rem; }
.bk-rm:hover { color: var(--invalid); }
.bk-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.bk-actions button { font: inherit; font-size: .85rem; padding: 4px 12px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; cursor: pointer; }
.bk-actions button:hover:enabled { border-color: var(--accent); color: var(--accent); }
.bk-actions button:disabled { opacity: .4; cursor: default; }
.bk-actions .danger:hover:enabled { border-color: var(--invalid); color: var(--invalid); }

/* شارة السلة العائمة — الزاوية السفلى اليسرى، تومض بآخر ما أُضيف */
#basket-chip { position: fixed; left: 22px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 7px; font: inherit; font-size: .9rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 16px; cursor: pointer;
  box-shadow: 0 3px 14px rgba(30,25,15,.18); transition: border-color .2s; }
#basket-chip:hover { border-color: var(--accent); }
#basket-chip.flash { border-color: var(--citable); }
#chip-n { font-weight: 700; color: var(--accent); }
#chip-msg { font-size: .8rem; color: var(--citable); max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chip-msg:empty { display: none; }

#toast { position: fixed; bottom: 20px; right: 50%; transform: translate(50%, 8px); z-index: 70;
  background: var(--ink); color: var(--paper); font-size: .85rem; padding: 7px 18px;
  border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#toast.show { opacity: .95; transform: translate(50%, 0); }

#fmt-menu { position: absolute; z-index: 65; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 22px rgba(30,25,15,.16); overflow: hidden; }
#fmt-menu button { display: block; width: 100%; text-align: start; font: inherit; font-size: .85rem;
  padding: 6px 14px; border: 0; background: none; cursor: pointer; color: var(--ink); }
#fmt-menu button:hover { background: var(--paper); color: var(--accent); }
#fmt-menu button.on { color: var(--accent); }

/* ---------- الدرج وشاشة الاختصارات ---------- */
.drawer { position: fixed; inset: 0; background: rgba(30,25,15,.45); display: flex; justify-content: flex-start; z-index: 50; }
.drawer-box { background: var(--card); width: min(760px, 94vw); height: 100%; display: flex; flex-direction: column; box-shadow: 0 0 30px rgba(0,0,0,.3); }
.citehead { padding: 6px 16px; border-bottom: 1px dashed var(--line); }
.citehead .cardhead { font-size: .95rem; }
.citehead.state-citable .cardhead .mark, .citehead.state-citable .cardhead .ctext { color: var(--citable); }
.citehead.state-unverified .cardhead .mark, .citehead.state-unverified .cardhead .ctext { color: var(--unverified); }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.pager button { font: inherit; font-size: .85rem; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 3px 12px; cursor: pointer; }
.pager button:disabled { opacity: .4; cursor: default; }
.fulltext { padding: 14px 20px 40px; overflow-y: auto; white-space: pre-wrap; flex: 1; }
.notice { padding: 14px; color: var(--muted); }

.kbd-box { background: var(--card); margin: auto; width: min(430px, 92vw);
  border-radius: 12px; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,.3); }
.kbd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.kbd-table td { padding: 7px 16px; border-top: 1px solid #f0ece1; }
.kbd-table td:first-child { white-space: nowrap; width: 7em; }
kbd { font-family: inherit; font-size: .82rem; background: var(--paper); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; }

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  #pdf-col, #basket-col { position: static; width: 100%; height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  #basket-chip, #toast { transition: none; }
}
[hidden] { display: none !important; }