/* ============================================================
   IJMA AI — scholarly instrument design system
   Type: Spectral (Latin serif, text + display)
         Spectral small-caps (apparatus / labels — a critical-edition
         convention, replacing the techy monospace)
         Amiri (Arabic Naskh)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500&family=Spectral+SC:wght@400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* paper & ink */
  --paper:    #f4efe4;
  --paper-2:  #efe8d9;
  --paper-3:  #e9e1cf;
  --card:     #faf6ec;
  --ink:      #211c14;
  --ink-2:    #4b4234;
  --ink-3:    #756a55;
  --ink-4:    #9a8e76;
  --rule:     #d7cdb8;
  --rule-2:   #c8bca2;
  --link:     #7a5326;

  /* school identity — muted jewel tones, manuscript ink */
  --hanafi:  #3b4b80;
  --maliki:  #5d6a33;
  --shafii:  #a85a35;
  --hanbali: #863636;
  --zahiri:  #2e6a6e;
  --jafari:  #6d4470;

  /* semantic status */
  --status-ijma:    #2f6a4f;  /* demonstrated consensus */
  --status-major:   #8a6a1f;  /* clear majority */
  --status-ikhtilaf:#7a4a6b;  /* open disagreement */
  --status-claimed: #9a5a22;  /* claimed but contested */

  /* type */
  --serif: 'Spectral', Georgia, serif;
  --arabic: 'Amiri', 'Spectral', serif;
  /* metadata / short running text — normal serif (was monospace) */
  --mono: 'Spectral', Georgia, serif;
  /* the apparatus face — true small-caps Spectral, for labels & tags only */
  --label: 'Spectral SC', 'Spectral', Georgia, serif;

  --maxw: 1240px;
  /* shape language — soft, rounded, un-boxy */
  --r-card: 22px;
  --r-panel: 16px;
  --r-pill: 999px;
  --r-sm: 12px;
  --shadow-card: 0 1px 2px rgba(33,28,20,.04), 0 10px 30px -20px rgba(33,28,20,.30);
  --shadow-soft: 0 1px 2px rgba(33,28,20,.04), 0 12px 34px -22px rgba(33,28,20,.30);
  --shadow-lift: 0 6px 18px -8px rgba(33,28,20,.18), 0 22px 46px -26px rgba(33,28,20,.40);
  --hair: color-mix(in oklab, var(--rule) 55%, transparent);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,253,247,.7), transparent 60%);
  background-attachment: fixed;
}

::selection { background: color-mix(in oklab, var(--link) 22%, var(--paper)); }

/* arabic inline + block */
[lang="ar"], .ar {
  font-family: var(--arabic);
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 400;
}
.ar-inline { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* apparatus labels / eyebrows — small-caps serif (critical-edition style) */
.eyebrow {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: lowercase;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  color: var(--ink-3);
  font-weight: 600;
}
.mono { font-family: var(--mono); }

/* school chip */
.school-chip {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--sc, var(--ink));
  white-space: nowrap;
}
.school-chip .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc, var(--ink));
  flex: none;
}
.school-chip.solid {
  background: color-mix(in oklab, var(--sc) 14%, var(--card));
  border: 1px solid color-mix(in oklab, var(--sc) 30%, transparent);
  padding: .3em .7em; border-radius: 100px;
}

/* hairline rule */
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-strong { height: 1px; background: var(--rule-2); border: 0; }

/* buttons */
.btn {
  font-family: var(--label); font-size: 13px; letter-spacing: .04em; text-transform: lowercase;
  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink);
  padding: .6em 1.25em; border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--paper-2); border-color: var(--ink-4); }
.btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--paper-2); }

/* card */
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
button.card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
button.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); }

/* focus visibility for a11y */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* scrollbar restraint */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 10px; border: 3px solid var(--paper); }

/* entrance kept as a no-op: opacity-based entrances get frozen-at-0 (invisible)
   and transform-based ones confuse capture renderers. Content renders directly. */
.fade-in { }
@keyframes fade-in { from { opacity: 1; } to { opacity: 1; } }