/* ====================================================================
   components.css — مكوّنات «الهامش»، على رموز static/tokens.css وحدها

   يُحمَّل بعد style.css فيعلو عليه. يغطّي الأصناف القائمة نفسها (btn،
   tag، field، flash…) فتتبنّى الصفحات التي لم تُصمَّم بعدُ الشكلَ الجديد
   دون تعديل قوالبها، ويضيف الإطار وبطاقة الكتاب كما صمّمها المصمّم.

   قيودٌ يحرسها tests/test_design.py:
   · صفر انحناء (var(--radius) وحده) وصفر ظلّ — الخطّ يفصل وحده
   · لا نصّ عربي تحت ١٦px؛ و--size-id للمعرِّفات اللاتينية وحدها
   · خصائص منطقية فقط (inline-start لا left)
   ==================================================================== */

/* ---------- الأساس ---------- */
body{
  background:var(--field);color:var(--ink);
  font-family:var(--f-ui);font-size:var(--size-ui);line-height:1.75;
}
h1,h2,h3,.page-title{font-family:var(--f-display);line-height:1.35;text-wrap:balance;color:var(--ink)}
.page-title{font-size:var(--size-section);font-weight:800;margin:0 0 var(--space-4)}
.subtle{color:var(--ink-2);font-size:var(--size-min)}
a{color:var(--acc);text-underline-offset:3px}
a:hover{color:var(--acc-deep)}
::selection{background:var(--acc);color:var(--on-acc)}
.reading{font-family:var(--f-read);font-size:var(--size-read);line-height:1.9}
/* المتصفّح يعطي الأزرار والحقول خطّه وحجمه (13.3px) لا خطّ الصفحة — فيسقط كل
   زرٍّ بلا صنفٍ تحت الحدّ العربي صامتاً. يُورَّث هنا مرّةً للجميع. */
button,input,select,textarea{font-family:inherit;font-size:var(--size-min)}

/* ---------- الإطار: الهامش والشريط العلوي ---------- */
.shell{display:flex;align-items:stretch;min-height:100vh}
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.shell-main > main{flex:1}

.rail{
  flex:none;inline-size:64px;background:var(--rail);color:var(--rail-ink);
  display:flex;flex-direction:column;align-items:center;padding-block-start:var(--space-4);
  border-inline-end:var(--rule-w) solid var(--rail);
}
.rail-mark{font-family:var(--f-display);font-size:26px;font-weight:900;line-height:1;color:var(--rail-acc)}
.rail-stub{inline-size:2px;block-size:20px;background:var(--rail-rule);margin-block:var(--space-3)}
.rail-label{
  font-family:var(--f-id);font-size:var(--size-id);writing-mode:vertical-lr;
  letter-spacing:.22em;margin-block-end:var(--space-4);direction:ltr;
}
.rail-ruled{
  flex:1;inline-size:100%;
  background:repeating-linear-gradient(to bottom,var(--rail-rule) 0 1px,transparent 1px 24px);
}

.topbar{
  background:var(--rail);color:var(--rail-ink);
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;
  gap:var(--space-2) var(--space-5);padding-inline:28px;
}
.topbar-brand{
  display:flex;align-items:center;padding-block:14px;flex:none;
  font-family:var(--f-display);font-size:var(--size-sub);font-weight:800;line-height:1.35;
  color:var(--rail-ink);text-decoration:none;
}
.topbar-brand:hover{color:var(--rail-acc)}
.topbar-nav{display:flex;align-items:stretch;min-width:0;overflow-x:auto;scrollbar-width:none}
.topbar-nav::-webkit-scrollbar{display:none}
.topbar-nav > a,.topbar-nav summary{
  display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;cursor:pointer;
  padding:16px 16px 12px;font-size:var(--size-ui);color:var(--rail-ink);text-decoration:none;
  border-block-end:4px solid transparent;list-style:none;
}
.topbar-nav summary::-webkit-details-marker{display:none}
.topbar-nav summary::after{content:"▾";font-size:var(--size-min);color:var(--rail-acc)}
.topbar-nav > a:hover,.topbar-nav summary:hover{
  background:color-mix(in srgb,var(--rail-acc) 14%,transparent);color:var(--rail-ink);
}
.topbar-nav > a[aria-current="page"]{font-weight:600;border-block-end-color:var(--rail-acc)}
.nav-dot{inline-size:8px;block-size:8px;background:var(--rail-acc);border-radius:50%;display:inline-block}

.nav-menu{position:relative;display:flex}
.nav-menu-panel{
  position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:50;
  min-inline-size:240px;display:flex;flex-direction:column;
  background:var(--surface);color:var(--ink);
  border:var(--rule-w) solid var(--rule-hard);border-radius:var(--radius);
}
.nav-menu-panel a{
  padding:10px 16px;min-block-size:var(--touch);display:flex;align-items:center;gap:var(--space-2);
  color:var(--ink);text-decoration:none;font-size:var(--size-min);
  border-block-end:1px solid var(--rule);
}
.nav-menu-panel a:hover{background:var(--sunken);color:var(--ink)}
.nav-menu-panel hr{border:0;border-block-start:var(--rule-w) solid var(--rule-hard);margin:0}
.nav-badge{
  font-size:var(--size-min);font-weight:600;padding:0 7px;
  background:var(--acc);color:var(--on-acc);border-radius:var(--radius);
  font-variant-numeric:tabular-nums;
}

.topbar-end{display:flex;align-items:center;gap:var(--space-3);padding-block:12px;flex:none}
.topbar .theme-toggle{
  inline-size:var(--touch);block-size:var(--touch);display:grid;place-items:center;
  background:transparent;color:var(--rail-ink);cursor:pointer;font-size:20px;
  border:var(--rule-w) solid var(--rail-rule);border-radius:var(--radius);
}
.topbar .theme-toggle:hover{border-color:var(--rail-acc)}
.whoami{display:flex;flex-direction:column;line-height:1.3;font-size:var(--size-min);color:var(--rail-ink)}
.whoami small{font-size:var(--size-min);color:var(--rail-acc)}
.topbar .logout-link{
  color:var(--rail-ink) !important;font-size:var(--size-min);padding:10px 12px;
  min-block-size:var(--touch);display:flex;align-items:center;
  border:var(--rule-w) solid var(--rail-rule);
}
.topbar .logout-link:hover{border-color:var(--rail-acc);background:transparent !important}

.shell-main > main.wrap{inline-size:100%;max-inline-size:1180px;margin-inline:auto;padding:28px}
.site-footer{
  border-block-start:1px solid var(--rule);background:var(--surface);
  color:var(--ink-3);font-size:var(--size-min);margin-block-start:var(--space-5);
}
.site-footer .wrap{max-inline-size:1180px;margin-inline:auto;padding:18px 28px}
.cloud-banner{
  background:var(--warn-tint);color:var(--ink);font-size:var(--size-min);
  border-block:var(--rule-w) solid var(--warn);padding:10px 28px;
}
.cloud-dot{color:var(--warn)}

@media (max-width:720px){
  .rail{inline-size:26px}
  .rail-mark,.rail-stub,.rail-label{display:none}
  .topbar{padding-inline:14px}
  .topbar-nav{order:3;inline-size:100%}
  .whoami{display:none}
  .shell-main > main.wrap{padding:16px 14px}
}

/* ---------- الأزرار: أساسي · ثانوي · خطر · شبح ---------- */
.btn,.btn-accent,button[type="submit"]:not(.img-tool-btn):not(.theme-toggle):not(.btn-ghost):not(.btn-danger){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-block-size:var(--touch);padding:10px 18px;white-space:nowrap;cursor:pointer;
  font-family:var(--f-ui);font-size:var(--size-min);font-weight:600;text-decoration:none;
  background:var(--acc);color:var(--on-acc);
  border:var(--rule-w) solid var(--acc);border-radius:var(--radius);
}
.btn:hover,.btn-accent:hover,button[type="submit"]:not(.img-tool-btn):not(.theme-toggle):not(.btn-ghost):not(.btn-danger):hover{
  background:var(--acc-deep);border-color:var(--acc-deep);color:var(--on-acc);
}
.btn-ghost,.btn.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-block-size:var(--touch);padding:10px 18px;white-space:nowrap;cursor:pointer;
  font-family:var(--f-ui);font-size:var(--size-min);font-weight:500;text-decoration:none;
  background:transparent;color:var(--ink);
  border:var(--rule-w) solid var(--rule-hard);border-radius:var(--radius);
}
.btn-ghost:hover,.btn.btn-ghost:hover{background:var(--sunken);color:var(--ink)}
.btn-danger,.btn.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-block-size:var(--touch);padding:10px 18px;white-space:nowrap;cursor:pointer;
  font-family:var(--f-ui);font-size:var(--size-min);font-weight:600;text-decoration:none;
  background:transparent;color:var(--bad);
  border:var(--rule-w) solid var(--bad);border-radius:var(--radius);
}
.btn-danger:hover,.btn.btn-danger:hover{background:var(--bad-tint);color:var(--bad)}
.btn-rail,.btn.btn-rail{background:var(--rail-acc);color:var(--rail);border-color:var(--rail-acc)}
.btn-rail:hover,.btn.btn-rail:hover{background:var(--rail-ink);border-color:var(--rail-ink);color:var(--rail)}
.btn[disabled],button[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- الحقول ---------- */
input[type="text"],input[type="search"],input[type="number"],input[type="password"],
input[type="email"],input[type="url"],input:not([type]),select,textarea{
  font-family:var(--f-ui);font-size:var(--size-ui);color:var(--ink);
  background:var(--field);min-block-size:var(--touch);padding:10px 14px;
  border:1px solid var(--rule-hard);border-radius:var(--radius);
}
textarea{font-family:var(--f-read);line-height:1.9;min-block-size:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--acc);outline:2px solid var(--acc);outline-offset:1px;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--acc);inline-size:22px;block-size:22px}
.field label,.field > span{font-size:var(--size-min);font-weight:600;color:var(--ink)}

/* ---------- الوسوم ---------- */
.tag{
  display:inline-block;font-size:var(--size-min);font-weight:500;line-height:1.6;
  padding:2px 10px;border:0;border-radius:var(--radius);
  background:var(--sunken);color:var(--ink-2);overflow-wrap:anywhere;
}
.tag-madhab{background:var(--ok-tint);color:var(--ok)}
.tag-status{background:var(--info-tint);color:var(--info)}
.tag-condition{background:var(--warn-tint);color:var(--warn)}
.tag-pending{background:var(--bad-tint);color:var(--bad)}
.tag-class{background:var(--sunken);color:var(--ink);font-variant-numeric:tabular-nums}
/* رمز الرفّ: مصمتٌ بلون قسمه — الرمز هو ما يقول القسم، فاللون حيث المعلومة */
.tag-shelf{
  background:var(--sec,var(--sec-amm));color:var(--sec-ink);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- الرسائل ---------- */
.flash{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:12px 16px;margin-block-end:var(--space-3);font-size:var(--size-min);
  background:var(--info-tint);color:var(--ink);
  border:var(--rule-w) solid var(--info);border-radius:var(--radius);
}
.flash-ok,.flash-success{background:var(--ok-tint);border-color:var(--ok)}
.flash-error,.flash-danger{background:var(--bad-tint);border-color:var(--bad)}
.flash-warn,.flash-warning{background:var(--warn-tint);border-color:var(--warn)}

/* ---------- الحالات الفارغة ---------- */
.empty-state{
  text-align:center;padding:40px 24px;color:var(--ink-2);background:var(--surface);
  border:var(--rule-w) dashed var(--rule-hard);border-radius:var(--radius);
}
.empty-state .empty-icon{font-family:var(--f-display);font-size:var(--size-section);color:var(--acc);margin:0}

/* ---------- الصناديق والجداول ---------- */
.notes-box{
  background:var(--surface);border:1px solid var(--rule);
  border-inline-start:4px solid var(--acc);border-radius:var(--radius);
}
.table-scroll{overflow-x:auto}
.browse-table{
  inline-size:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--rule);font-size:var(--size-min);
}
.browse-table th{
  background:var(--sunken);text-align:start;font-weight:600;white-space:nowrap;
  padding:12px 16px;border-block-end:var(--rule-w) solid var(--rule-hard);
}
.browse-table td{padding:12px 16px;border-block-end:1px solid var(--rule);vertical-align:top}
.browse-table tbody tr:hover{background:var(--sunken)}

/* ---------- ترقيم الصفحات ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-block-start:var(--space-6)}
.pager a,.pager span.pg{
  min-inline-size:var(--touch);min-block-size:var(--touch);padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--size-min);font-variant-numeric:tabular-nums;text-decoration:none;
  color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);
}
.pager a:hover{background:var(--sunken)}
.pager span.pg-now{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:600}
.pager .pager-info{color:var(--ink-3);font-size:var(--size-min);padding-inline:var(--space-3)}

/* ---------- أدوات الصورة ---------- */
.img-tools{display:flex;gap:0;margin-block-start:var(--space-2)}
.img-tool-btn{
  min-inline-size:var(--touch);min-block-size:var(--touch);padding:0 12px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--f-ui);font-size:var(--size-min);
  background:var(--surface);color:var(--ink);
  border:var(--rule-w) solid var(--rule-hard);border-radius:var(--radius);
}
.img-tools form + form .img-tool-btn,.img-tools form + .img-tool-btn{border-inline-start-width:0}
.img-tool-btn:hover{background:var(--sunken)}

/* ====================================================================
   الفهرس — الدفعة الثانية
   ==================================================================== */

.search-band{
  background:var(--sunken);border-block-end:1px solid var(--rule);
  margin:-28px -28px 0;padding:20px 28px;
}
.search-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.search-row input[type="search"]{flex:1 1 260px;min-inline-size:0;min-block-size:48px;padding:11px 16px}
.search-row button{min-block-size:48px}
.filters{
  display:grid;gap:10px;margin-block-start:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.filters label{display:block;min-inline-size:0}
.filters label > span{display:block;font-size:var(--size-min);font-weight:600;color:var(--ink-2);margin-block-end:4px}
.filters select{inline-size:100%;font-size:var(--size-min)}
.filters-toggle{display:none}
.active-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-block-start:14px;font-size:var(--size-min)}
.active-filters .lbl{color:var(--ink-3)}
.chip{
  display:inline-flex;gap:8px;align-items:center;padding:4px 8px 4px 12px;
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-hard);
  border-radius:var(--radius);text-decoration:none;font-size:var(--size-min);
}
.chip:hover{border-color:var(--acc);color:var(--ink)}
.chip .x{color:var(--acc)}

.results-head{
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  padding-block:20px 0;margin-block-end:20px;
}
.results-head h1{font-size:var(--size-section);font-weight:800;margin:0}
.results-meta{font-size:var(--size-min);color:var(--ink-2);font-variant-numeric:tabular-nums;display:flex;gap:var(--space-4);flex-wrap:wrap}

.book-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,212px),1fr))}

.book-card{
  display:flex;flex-direction:column;min-inline-size:0;overflow:hidden;
  background:var(--surface);color:var(--ink);text-decoration:none;
  border:var(--rule-w) solid var(--rule);border-radius:var(--radius);
}
.book-card:hover{border-color:var(--rule-hard);color:var(--ink)}
.book-card:hover .bc-title{color:var(--acc)}
.bc-cover{
  position:relative;flex:none;aspect-ratio:3/4;overflow:hidden;
  background:var(--sunken);border-block-end:1px solid var(--rule);
}
.bc-cover img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* كتابٌ بلا غلاف: كعبٌ مرسوم بلون قسمه يحمل العنوان والرمز — يبدو كتاباً على
   الرفّ لا خانةً فارغة */
.bc-spine{
  position:absolute;inset-block:0;inset-inline:21%;
  background:var(--sec,var(--sec-amm));color:var(--sec-ink);
  border-inline-start:6px solid rgb(0 0 0 / .24);border-inline-end:1px solid rgb(0 0 0 / .2);
  display:flex;flex-direction:column;justify-content:space-between;padding:14px 8px;
}
.bc-spine .t{
  font-family:var(--f-display);font-size:var(--size-card);line-height:1.35;text-align:center;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.bc-spine .c{
  font-size:var(--size-min);font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
  border-block-start:1px solid rgb(255 255 255 / .35);padding-block-start:6px;
}
.bc-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-inline-size:0}
/* ثلاثة أسطر ثم نقاط، والارتفاع ثابت: ٣ × ٢٠px × ١٫٣٥ = ٨١px فلا ينكسر الصفّ */
.bc-title{
  font-family:var(--f-display);font-size:var(--size-card);line-height:1.35;font-weight:700;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-block-size:81px;
}
.bc-author{
  font-size:var(--size-min);line-height:1.75;color:var(--ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-block-size:56px;
}
.bc-author.none{color:var(--ink-3)}
.bc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:auto}
.bc-meta{
  display:flex;justify-content:space-between;gap:10px;font-size:var(--size-min);color:var(--ink-3);
  border-block-start:1px solid var(--rule);padding-block-start:8px;
}
.bc-meta .on-loan{color:var(--warn);font-weight:600}
.bc-meta .pending{color:var(--bad);font-weight:600}

@media (max-width:720px){
  .search-band{margin:-16px -14px 0;padding:16px 14px}
  .filters{display:none}
  .filters-open .filters{display:grid}
  .filters-toggle{
    display:flex;align-items:center;inline-size:100%;margin-block-start:12px;min-block-size:48px;
    padding:10px 16px;font-size:var(--size-min);cursor:pointer;
    justify-content:flex-start;background:var(--field);color:var(--ink);
    border:1px solid var(--rule-hard);font-weight:600;
  }
  .book-grid{grid-template-columns:1fr;gap:12px}
  .book-card{flex-direction:row}
  /* align-self: وإلا مدّ flex الغلافَ فأبطل نسبته ٣:٤ */
  .bc-cover{inline-size:104px;align-self:flex-start;border-block-end:0;border-inline-end:1px solid var(--rule)}
  .bc-body{padding:12px 14px}
}

/* «الهامش»: التذييل سطرٌ واحد بلا زخرفة */
.site-footer::before{content:none}

/* بقايا بطاقة التصميم السابق في style.css: «كعبٌ جلدي» أحمر بعرض ٧px على
   الحافّة، وحشوةٌ داخلية تمنع الغلاف من ملء عرض البطاقة. «الهامش» لا يعرفهما. */
.book-card{padding:0}
.book-card::before,.book-card::after{content:none}

/* ====================================================================
   صفحة الكتاب — الدفعة الثالثة
   ==================================================================== */

.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--size-min);color:var(--ink-3);margin-block-end:var(--space-4)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--acc)}
.crumb-code{color:var(--ink);font-variant-numeric:tabular-nums}

/* السجلّ: رأسٌ بعرض الصفحة، ثم عمودان — الغلاف وما يلحقه، ثم الحقول */
.record{background:transparent;border:0;padding:0;box-shadow:none;display:block}
.record-head{margin-block-end:22px}
.record-title{font-family:var(--f-display);font-size:clamp(var(--size-sub),4vw,var(--size-section));line-height:1.35;font-weight:800;margin:0;text-wrap:pretty}
.record-author{font-size:var(--size-read);line-height:1.75;color:var(--ink-2);margin:10px 0 0;max-inline-size:80ch}
.record-author.none{color:var(--ink-3)}
/* شريط الوسوم: خانةٌ متّصلة لا رقائق متفرّقة، والرمز أوّلها بلون قسمه */
.record-strip{
  display:flex;flex-wrap:wrap;margin-block-start:16px;inline-size:fit-content;max-inline-size:100%;
  border:1px solid var(--rule-hard);
}
.record-strip > span{padding:6px 14px;font-size:var(--size-min);color:var(--ink);border-inline-start:1px solid var(--rule-hard)}
.record-strip > span:first-child{border-inline-start:0}
.record-strip .rs-shelf{background:var(--sec,var(--sec-amm));color:var(--sec-ink);font-weight:600;font-variant-numeric:tabular-nums}
.record-strip .rs-bad{background:var(--bad-tint);color:var(--bad);font-weight:600}

.record-cols{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.record-side{flex:0 1 300px;min-inline-size:0;display:flex;flex-direction:column;gap:14px}
.record-main{flex:1 1 320px;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-5)}

.record-cover{
  position:relative;inline-size:100%;max-inline-size:300px;aspect-ratio:3/4;overflow:hidden;
  background:var(--sunken);border:var(--rule-w) solid var(--ink);
}
.record-cover img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.cover-flag{
  position:absolute;inset-inline:0;inset-block-end:0;padding:6px 10px;
  background:var(--warn);color:var(--field);font-size:var(--size-min);font-weight:600;
}
.rc-spine{
  position:absolute;inset-block:0;inset-inline:14%;
  background:var(--sec,var(--sec-amm));color:var(--sec-ink);
  border-inline-start:9px solid rgb(0 0 0 / .3);
  display:flex;flex-direction:column;justify-content:space-between;padding:20px 12px;
}
.rc-spine .t{font-family:var(--f-display);font-size:var(--size-sub);line-height:1.35;text-align:center;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.rc-spine .c{font-size:var(--size-ui);font-weight:600;text-align:center;font-variant-numeric:tabular-nums;
  border-block-start:1px solid rgb(255 255 255 / .35);padding-block-start:8px}
.side-note{font-size:var(--size-min);color:var(--ink-3);margin:-6px 0 0;max-inline-size:300px}

/* أدوات الصورة: شريطٌ متّصل بثلاث خانات، والقصّ يُبرَز حين تكون الصورة عَرضية */
.img-tools-labeled{display:flex;max-inline-size:300px;border:var(--rule-w) solid var(--rule-hard);margin:0}
.img-tools-labeled form{display:flex;flex:1}
.img-tools-labeled .img-tool-btn{flex:1;border:0;border-inline-start:1px solid var(--rule-hard);gap:6px}
.img-tools-labeled form:first-child .img-tool-btn{border-inline-start:0}
.img-tools-labeled .img-tool-btn span{font-size:20px}
.img-tool-crop.is-due{background:var(--acc);color:var(--on-acc)}
.img-tool-crop.is-due:hover{background:var(--acc-deep)}

.record-actions{display:flex;flex-wrap:wrap;max-inline-size:300px;gap:0;border:var(--rule-w) solid var(--ink)}
.record-actions > .btn,.record-actions form{flex:1 1 auto;margin:0}
.record-actions .btn{inline-size:100%;border:0;border-inline-start:1px solid var(--rule-hard)}
.record-actions > :first-child{border-inline-start:0}
.record-actions form .btn{border-inline-start:1px solid var(--rule-hard)}

.loan-box{
  max-inline-size:300px;padding:0;margin:0;background:var(--surface);
  border:var(--rule-w) solid var(--rule-hard);border-radius:var(--radius);
}
.loan-box > h4{margin:0;padding:8px 12px;font-family:var(--f-ui);font-size:var(--size-min);font-weight:600;
  background:var(--sunken);color:var(--ink)}
.loan-box > :not(h4){margin:12px}
.loan-box-active{border-color:var(--warn)}
.loan-box-active > h4{background:var(--warn);color:var(--field)}
.loan-box-locked > h4{background:var(--ink);color:var(--field)}
.loan-form{display:flex;flex-direction:column;gap:8px}
.loan-history summary{cursor:pointer;color:var(--ink-2);font-size:var(--size-min)}

/* الحقول: شبكةٌ بخطوط، والفارغ «—» باهتاً فلا تنهار المحاذاة */
.record-fields{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));
  border-block-start:var(--rule-w) solid var(--ink);border-inline-start:1px solid var(--rule);
}
.rf{padding:10px 14px;min-inline-size:0;border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--rule)}
.rf-k{display:block;font-size:var(--size-min);color:var(--ink-3)}
.rf-v{display:block;font-size:var(--size-ui);color:var(--ink);overflow-wrap:anywhere}
.rf-empty .rf-v{color:var(--ink-3)}

/* الأقسام تحت السجلّ: عنوانٌ وتحته خطّ حبرٍ ٢px، والصفوف بخطٍّ ١px */
.work-section,.prov-section,.fawaid-section,.related-section{
  background:transparent;border:0;padding:0;margin-block-start:var(--space-6);box-shadow:none;
}
.work-section > h2,.prov-section > h2,.fawaid-head h2,.related-title{
  font-family:var(--f-display);font-size:var(--size-sub);line-height:1.35;font-weight:800;margin:0;
}
.work-section > h2,.prov-section > h2,.fawaid-head{
  padding-block-end:10px;border-block-end:var(--rule-w) solid var(--ink);margin-block-end:0;
}
.fawaid-head{display:flex;gap:16px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.count{color:var(--ink-3);font-family:var(--f-ui);font-size:var(--size-min);font-weight:400}
.work-current,.prov-item,.faida-item{
  background:transparent;border:0;border-block-end:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:none;padding:12px 0;margin:0;
}
.faida-list,.prov-list{list-style:none;margin:0;padding:0}
.faida-text,.prov-text{font-family:var(--f-read);font-size:var(--size-read);line-height:1.9;color:var(--ink);margin:6px 0}
.faida-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--size-min);color:var(--ink-3)}
.faida-topic{background:var(--sunken);color:var(--ink-2);padding:0 8px;border-radius:var(--radius)}
.faida-empty{border:1px dashed var(--rule-hard);padding:22px;margin-block-start:12px;color:var(--ink-2)}
.work-suggest{border:1px dashed var(--rule-hard);padding:14px;margin-block-start:12px}
.related-title{font-size:var(--size-card);margin-block:var(--space-5) var(--space-3)}
.related-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.related-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:12px 14px;text-decoration:none;color:var(--ink);box-shadow:none;
}
.related-card:hover{border-color:var(--rule-hard);color:var(--acc)}
.faida-form,.prov-form,.work-form,.add-work-box{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:none;
}
.faida-thumb{border:1px solid var(--rule);border-radius:var(--radius)}

@media (max-width:720px){
  .record-side,.record-cover,.img-tools-labeled,.record-actions,.loan-box{max-inline-size:none}
  .record-cover{max-inline-size:220px}
}

/* رمز الرفّ عربيّ — يبقى معزولاً اتجاهياً (ident) لكن بخطّ الواجهة: خطّ المونو
   لا عربية فيه فيسقط إلى بديلٍ صامت. والأرقام متحاذية. */
.ident.code-ar,.code-ar{font-family:var(--f-ui);font-size:inherit;font-variant-numeric:tabular-nums;font-weight:600}

/* العنوان: قاعدةٌ أقدم في style.css (.book-detail h1) أخصّ من صنفٍ مفرد */
.record .record-title{font-family:var(--f-display);color:var(--ink);font-weight:800}

/* أزرار السجلّ في صفٍّ واحد متّصل */
.record-actions > .btn,.record-actions > form{flex:1 1 0;min-inline-size:max-content}
.record-actions .btn{inline-size:100%}

/* ---------- أداة القصّ ----------
   بها تُصلَح الأغلفة العَرضية (كتابٌ قائم في صورةٍ عَرضية)، وتُستعمل على الجوّال
   غالباً — فالمقبض بحجم لمسٍ كامل لا 26px. التعتيم حول المنطقة في style.css. */
.cropper-overlay{background:color-mix(in srgb,var(--rail) 88%,transparent)}
.cropper-box{
  background:var(--surface);border:var(--rule-w) solid var(--ink);border-radius:var(--radius);
  border-block-start:6px solid var(--acc);padding:var(--space-4);
}
.cropper-hint{font-size:var(--size-min);color:var(--ink-2);line-height:1.75}
.cropper-sel{border:2px solid var(--rail-acc)}
.cropper-handle{
  inline-size:var(--touch);block-size:var(--touch);line-height:var(--touch);font-size:22px;
  background:var(--rail-acc);color:var(--rail);border-radius:var(--radius);
}
.cropper-actions .btn,.cropper-actions button{min-inline-size:120px}

/* ====================================================================
   تصفّح بالترتيب — ترويسةٌ بلون القسم كلّما تغيّر، فيُقرأ الجدول كالمشي أمام الرفوف
   ==================================================================== */
.page-tools{display:flex;gap:10px;flex-wrap:wrap;margin-block:-8px var(--space-4)}
.page-tools form{margin:0}
.sec-jump{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-block-end:14px}
.sec-jump .lbl{font-size:var(--size-min);color:var(--ink-3)}
.sec-jump a{
  display:inline-flex;align-items:center;gap:6px;min-block-size:var(--touch);padding:0 12px;
  font-size:var(--size-min);color:var(--ink);text-decoration:none;
  border:1px solid var(--rule-hard);border-radius:var(--radius);background:var(--surface);
}
.sec-jump a:hover{border-color:var(--ink)}
.sec-jump .sw{inline-size:12px;block-size:12px;background:var(--sec,var(--sec-amm))}
.sec-jump .n{color:var(--ink-3);font-variant-numeric:tabular-nums}
.browse-table{min-inline-size:680px;border:1px solid var(--rule-hard)}
.browse-table th{border-block-end-color:var(--ink)}
.browse-table tr.sec-row td{
  background:var(--sec,var(--sec-amm));color:var(--sec-ink);font-weight:600;padding:9px 14px;
  scroll-margin-block-start:16px;
}
.browse-table tr.sec-row .cont{font-weight:400;opacity:.85}
.browse-table tr.sec-row:hover{background:transparent}
.browse-table td.code{white-space:nowrap}
.browse-table td.bt{font-family:var(--f-display);font-size:var(--size-read);line-height:1.35}
.browse-table td.bt a{color:var(--ink);text-decoration:none}
.browse-table td.bt a:hover{color:var(--acc);text-decoration:underline}
.browse-table td.au{color:var(--ink-2)}
.browse-table td.n{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ====================================================================
   الرفّ — «الإحصاءات» تقول كم، وهذه تقول أين
   ==================================================================== */
.shelf-head{display:grid;gap:var(--space-3);margin-block-end:var(--space-5);
  padding-block-end:var(--space-5);border-block-end:var(--rule-w) solid var(--ink)}
.shelf-head .page-title{margin:0}
.shelf-head .lede{font-family:var(--f-read);font-size:var(--size-read);line-height:1.9;color:var(--ink-2);margin:0;max-inline-size:72ch}
.shelf-head .btn{justify-self:start}

.shelves{display:flex;flex-direction:column}
.shelves.as-print .sb-fill,.shelves.as-print .sb-name{filter:grayscale(1)}
.shelf-bar{
  display:flex;align-items:stretch;gap:12px;min-block-size:52px;
  color:var(--ink);text-decoration:none;border-block-end:1px solid var(--rule);
}
.shelf-bar:hover{background:var(--sunken);color:var(--ink)}
.shelf-bar.is-open{background:var(--sunken)}
.sb-name{flex:none;inline-size:112px;display:flex;align-items:center;padding-inline-start:12px;font-size:var(--size-ui);font-weight:500}
.shelf-bar.is-open .sb-name{font-weight:700}
.sb-n{flex:none;inline-size:44px;display:flex;align-items:center;color:var(--ink-3);font-size:var(--size-min);font-variant-numeric:tabular-nums}
.sb-track{flex:1;min-inline-size:0;display:flex;align-items:center;padding-block:9px}
/* كل خطٍّ رفيع كتاب: شبكةٌ بعدد كتب القسم (--n) فوق لونه */
.sb-fill{
  block-size:100%;min-block-size:34px;background-color:var(--sec,var(--sec-amm));
  background-image:repeating-linear-gradient(to left,rgb(255 255 255 / .34) 0 1px,transparent 1px calc(100% / var(--n,1)));
}
.shelf-bar.is-open .sb-fill{border-inline-start:4px solid var(--acc)}

.shelf-facts{display:flex;flex-wrap:wrap;margin-block-start:var(--space-5);border-block-start:var(--rule-w) solid var(--ink)}
.shelf-facts .fact{flex:1 1 200px;min-inline-size:0;padding:16px 18px 16px 0;border-inline-end:1px solid var(--rule);display:grid;gap:2px}
.shelf-facts .fact:last-child{border-inline-end:0}
.fk{font-family:var(--f-id);font-size:var(--size-id);color:var(--ink-3);letter-spacing:.08em;direction:ltr;text-align:end}
.fv{font-family:var(--f-display);font-size:26px;font-weight:800;line-height:1.35}
.fn{font-size:var(--size-min);color:var(--ink-2)}

.shelf-open{margin-block-start:28px;border:var(--rule-w) solid var(--ink);background:var(--surface);scroll-margin-block-start:16px}
.so-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:12px 16px;background:var(--sec,var(--sec-amm));color:var(--sec-ink)}
.so-head h2{margin:0;font-family:var(--f-display);font-size:var(--size-sub);font-weight:800;color:var(--sec-ink)}
.so-range{font-size:var(--size-min);font-variant-numeric:tabular-nums}
.so-codes{display:flex;flex-wrap:wrap;margin:16px;border-block-start:1px solid var(--rule);border-inline-start:1px solid var(--rule)}
.so-codes a{
  min-block-size:var(--touch);display:flex;align-items:center;padding:0 12px;
  font-size:var(--size-min);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--ink);text-decoration:none;border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--rule);
}
.so-codes a:hover{background:var(--sec,var(--sec-amm));color:var(--sec-ink)}
.so-note,.so-empty{margin:0 16px 16px;color:var(--ink-3);font-size:var(--size-min);max-inline-size:72ch}
.so-empty{font-family:var(--f-read);font-size:var(--size-read);line-height:1.9;color:var(--ink-2);margin:16px}

@media (max-width:720px){ .sb-name{inline-size:76px} }

/* ---------- صفحة الدخول: أوّل ما يُرى — على أرضية الهامش الداكنة ---------- */
.login-body{background:var(--rail)}
.login-card{
  background:var(--surface);color:var(--ink);border:var(--rule-w) solid var(--ink);
  border-block-start:6px solid var(--acc);border-radius:var(--radius);box-shadow:none;
}
.login-mark{font-family:var(--f-read);color:var(--ink-2)}
.login-card h1{font-family:var(--f-display);font-weight:800;color:var(--ink)}
.login-card input{border:1px solid var(--rule-hard);border-radius:var(--radius);background:var(--field)}
.login-card input:focus{outline:2px solid var(--acc);border-color:var(--acc)}

/* ---------- كل الأدوات: مدخلٌ يُكتشف منه، لا فهرسٌ يُحفظ ---------- */
.tool-group{margin-block-end:var(--space-6)}
.tool-group h2{font-family:var(--f-display);font-size:var(--size-sub);font-weight:800;margin:0;
  padding-block-end:10px;border-block-end:var(--rule-w) solid var(--ink)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  border-inline-start:1px solid var(--rule)}
.tool-card{display:grid;gap:4px;padding:16px;text-decoration:none;color:var(--ink);
  border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--rule);background:var(--surface)}
.tool-card:hover{background:var(--sunken);color:var(--ink)}
.tool-card:hover .tc-name{color:var(--acc)}
.tc-name{font-family:var(--f-display);font-size:var(--size-card);font-weight:700;line-height:1.35}
.tc-what{font-size:var(--size-min);color:var(--ink-2)}
.nav-menu-panel .nav-all{font-weight:600;color:var(--acc)}