/* أحلام — Elyoxe. RTL Arabic reference site.
   Identity rules from web/_kit: light type only, burgundy as ink and accent
   and never a saturated field, warm off-white ground, no dark blocks. */

:root {
  --ground: #FCFAF9;
  --ground-2: #FBF3F5;
  --ground-3: #F8F1F3;
  --surface: #FFFFFF;
  --ink: #241A1F;
  --ink-2: #5C4E55;
  --muted: #6B5A62;
  --faint: #A6828F;
  --wine: #8E2547;
  --wine-deep: #5E2138;
  --wine-darkest: #4A1226;
  --wine-tint: #FBF3F5;
  --wine-line: #E3CFD6;
  --rule: #EFE2E6;
  --ar: "Tajawal", system-ui, sans-serif;
  --lat: "Jost", "Century Gothic", system-ui, sans-serif;
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ar);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}

.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }

a { color: var(--wine); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }

h1, h2, h3 { font-weight: 300; line-height: 1.35; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(1.85rem, 5vw, 3rem); }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.9rem); }
h3 { font-size: 1.1rem; }

.label {
  font-family: var(--lat);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── header ────────────────────────────────────────────────────────────── */
.head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.25rem; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-name { font-family: var(--lat); font-weight: 300; font-size: 1.3rem; letter-spacing: .02em; }
.brand-sub {
  font-family: var(--ar); font-weight: 300; font-size: .95rem;
  color: var(--muted); padding-inline-start: .6rem;
  border-inline-start: 1px solid var(--rule);
}
.head nav { display: flex; gap: 1.35rem; font-size: .92rem; }
.head nav a { color: var(--ink-2); }
.head nav a[aria-current="page"] { color: var(--wine); }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2rem, 6vw, 3.5rem) 1.5rem; }
.hero p.lede {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--ink-2); max-inline-size: 58ch; margin-block: 1rem 0;
}

/* ── search ────────────────────────────────────────────────────────────── */
.search { margin-block: 2rem; position: relative; }
.search-field {
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid var(--wine-line);
  border-radius: .6rem; padding: .2rem .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.search-field:focus-within {
  border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-tint);
}
.search-field svg { flex: none; }
#q {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--ar); font-weight: 300; font-size: 1.05rem;
  color: var(--ink); padding-block: .85rem; min-inline-size: 0;
}
#q::placeholder { color: var(--faint); }
.search-note { font-size: .82rem; color: var(--muted); margin-block-start: .6rem; }
#results { margin-block-start: 1rem; }
.res-item {
  display: block; padding: .8rem .95rem; border: 1px solid var(--rule);
  border-radius: .5rem; background: var(--surface); margin-block-end: .5rem;
  color: inherit;
}
.res-item:hover { border-color: var(--wine-line); background: var(--wine-tint); text-decoration: none; }
.res-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.res-sym { font-size: 1.08rem; color: var(--wine-deep); }
.res-meta { font-size: .76rem; color: var(--faint); }
.res-snip {
  font-size: .87rem; color: var(--muted); margin-block-start: .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-empty { color: var(--muted); font-size: .92rem; padding-block: .6rem; }

/* ── stats ─────────────────────────────────────────────────────────────── */
.stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-block: 2rem; }
.stat b {
  display: block; font-family: var(--lat); font-weight: 200;
  font-size: 2.1rem; line-height: 1.1; color: var(--wine-deep);
}
.stat span { font-size: .84rem; color: var(--muted); }

/* ── grids ─────────────────────────────────────────────────────────────── */
.section { padding-block: 2.5rem; border-block-start: 1px solid var(--rule); }
.section > h2 { margin-block-end: .4rem; }
.section > p.sub { color: var(--muted); font-size: .95rem; margin-block: 0 1.5rem; max-inline-size: 60ch; }

.cats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cat {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: .5rem; color: var(--ink);
}
.cat:hover { border-color: var(--wine-line); background: var(--wine-tint); text-decoration: none; }
.cat b { font-weight: 400; font-size: 1rem; }
.cat span { font-family: var(--lat); font-size: .8rem; color: var(--faint); }

.letters { display: flex; flex-wrap: wrap; gap: .4rem; }
.letters a {
  min-inline-size: 2.75rem; text-align: center; padding: .5rem .4rem;
  border: 1px solid var(--rule); border-radius: .4rem;
  background: var(--surface); font-size: 1.05rem; color: var(--wine-deep);
}
.letters a:hover { border-color: var(--wine); background: var(--wine-tint); text-decoration: none; }
.letters a.off { color: var(--faint); opacity: .45; pointer-events: none; }

/* ── entries ───────────────────────────────────────────────────────────── */
.entries { margin-block-start: 1.5rem; }
.entry {
  border-block-end: 1px solid var(--rule);
}
.entry > summary {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .95rem .2rem; cursor: pointer; list-style: none;
}
.entry > summary::-webkit-details-marker { display: none; }
.entry > summary::before {
  content: "+"; font-family: var(--lat); color: var(--faint);
  inline-size: 1rem; flex: none;
}
.entry[open] > summary::before { content: "\2212"; color: var(--wine); }
.entry > summary:hover { background: var(--wine-tint); }
.entry-sym { font-size: 1.12rem; color: var(--wine-deep); }
.entry-badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-inline-start: auto; }
.badge {
  font-size: .68rem; letter-spacing: .04em; padding: .12rem .5rem;
  border: 1px solid var(--wine-line); border-radius: 1rem; color: var(--wine);
  background: var(--wine-tint); white-space: nowrap;
}
.badge.plain { border-color: var(--rule); color: var(--muted); background: transparent; }
.entry-body { padding: 0 .2rem 1.25rem 1.2rem; }

.passage { margin-block-end: 1.1rem; padding-inline-start: .9rem; border-inline-start: 2px solid var(--wine-line); }
.passage:last-child { margin-block-end: 0; }
.passage-src {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--faint); margin-block-end: .3rem;
}
.passage-src b { font-weight: 400; color: var(--wine); }
.passage p { margin: 0; color: var(--ink-2); }
.passage .disputed { color: #9A6B34; }

/* ── source cards ──────────────────────────────────────────────────────── */
.sources { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.source {
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: .5rem;
}
.source h3 { color: var(--wine-deep); font-size: 1.05rem; }
.source .who { font-size: .87rem; color: var(--muted); margin-block: .35rem .75rem; }
.source .note { font-size: .84rem; color: var(--ink-2); margin: 0; }
.source .flag {
  display: inline-block; margin-block-start: .75rem; font-size: .78rem;
  color: #8A5B24; background: #FBF4EA; border: 1px solid #EBD9C2;
  border-radius: .35rem; padding: .35rem .6rem; line-height: 1.6;
}

/* ── notice ────────────────────────────────────────────────────────────── */
.notice {
  border: 1px solid var(--wine-line); background: var(--wine-tint);
  border-radius: .5rem; padding: 1.1rem 1.25rem; margin-block: 2rem;
  font-size: .92rem; color: var(--ink-2);
}
.notice b { font-weight: 500; color: var(--wine-deep); }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { margin-block-start: 3.5rem; background: var(--ground-3); border-block-start: 1px solid var(--rule); }
.foot .wrap { padding-block: 2.5rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.foot p, .foot a { font-size: .86rem; color: var(--muted); }
.foot-links { display: flex; flex-direction: column; gap: .45rem; }
.foot-bottom {
  margin-block-start: 2rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--faint);
}

/* ── breadcrumb ────────────────────────────────────────────────────────── */
.crumb { font-size: .83rem; color: var(--muted); padding-block: 1.25rem 0; }
.crumb a { color: var(--muted); }

.pagehead { padding-block: 1rem 1.75rem; }
.pagehead p { color: var(--ink-2); margin-block: .6rem 0; max-inline-size: 58ch; }

@media (max-width: 34rem) {
  .stats { gap: 1.5rem; }
  .entry-badges { margin-inline-start: 0; inline-size: 100%; }
}

@media print {
  .search, .head nav, .foot { display: none; }
  .entry-body { display: block !important; }
}