/* =============================================================================
   sq-components.css — chrome, reading surface, prose.
   -----------------------------------------------------------------------------
   Ported from css/reading.css, which already targeted the real class vocabulary,
   and re-expressed in the sq token system with the palette the owner chose in the
   design bake-off (design/proto/b-edition).

   THE BIG CHANGE: reading.css declared a SECOND set of token names under
   .manuscript (--parchment, --ink-warm, --lapis) for things :root already had.
   That duplication is the reason it needed ~120 lines of hand-written overrides to
   make the same components work on the article page. Those names are gone; the
   article page is now just [data-ground="paper"], and sq-theme.css derives it in
   both light and dark from one declaration.

   No hex literals below except inside @media print, where #fff/#000 are correct.
   Everything else reads a token.

   The عمود (couplet) rules are a CONTRACT with stored content and with
   includes/reading-normalizer.php, whose class whitelist is
   /poetry|poem|verse|table-scroll/i. Never use substring matching on those names:
   a broad [class*="poem"] selector once caught the inner hemistich elements and
   shattered every couplet into stacked boxes (fixed in b8cca74).
   ========================================================================== */

/* ==========================================================================
   SefrQays — reading.css (reader design system: article, home, era, listing…)
   Arabic-first RTL. Palette + type from the competitive design study (Thamanyah,
   Getty, Public Domain Review, Safahat). Type = authentic Saudi Ministry of Culture
   fonts (Al-Awwal display / Saudi UI) + naskh body; Amiri accent-only.
   NOTE: no CSS size budget — beauty and craft come first; keep it well-organized.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   Dima Naskh is the site's own (previously dead) text face; Noto Naskh Arabic
   (loaded from Google Fonts in the template head) is the fallback chain. */
/* Saudi Ministry of Culture fonts (engage.moc.gov.sa/e/fonts) — official & free.
   Al-Awwal: first-Hijri-century inscriptional character → heritage DISPLAY/impression.
   Saudi: modern, made for legibility → headings + UI (and optional body). */
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.wrap { max-inline-size: var(--measure); margin-inline: auto; padding-inline: 1.25rem; }
/* wider canvas for directories/grids — prose keeps the reading measure.
   Declared ONCE, here. It was previously also declared further down at
   var(--maxw); the later one won silently and 62rem was dead. */
.wrap-wide { max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Reader preference switcher ------------------------------------------ */
.pref-group { display: flex; align-items: center; gap: 0.25rem; }
.pref-btn {
  appearance: none; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); border-radius: 0.5rem; cursor: pointer;
  padding: 0.25rem 0.6rem; font-family: var(--f-ui);
  font-size: 0.8125rem; line-height: 1.6;
}
.pref-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pref-btn:hover { border-color: var(--accent); }

/* ---- The reading surface now lives in sq-edition.css ----------------------
   Everything that used to sit here — .article-head, .article-title, .kicker,
   .byline, .cover, .toc, .prose, .sources, .author-card, .related — described the
   pre-bake-off reader: a single centred column with rounded cards and a collapsed
   contents drawer. The approved identity is «النسخة المحقَّقة», whose whole concept
   is that the margin is a REAL column carrying the apparatus, and those rules
   fought it: `.kicker` alone was still painting an 8%-accent background behind the
   edition's hairline-and-tick kicker.

   Two stylesheets defining one selector is the duplicate-declaration problem this
   project has been bitten by repeatedly (.topbar, .wrap-wide, .sec-note), so these
   are removed rather than overridden. sq-edition.css owns them now.
   ------------------------------------------------------------------------- */

/* ---- Comments moved to sq-edition.css -------------------------------------
   They were defined here against the pre-bake-off reader. sq-edition.css now
   carries them in the edition's idiom — the author card reuses the byline's
   sigil, the thread opens on the 2px ink rule. Removed rather than overridden:
   two sheets defining one selector is the duplicate-rule problem this project
   keeps getting bitten by.
   ------------------------------------------------------------------------- */

/* ---- Listing pages (browse-view / era-view) ------------------------------- */
.listing { padding-block-start: 1rem; }
.listing-head { padding-block: clamp(1.5rem, 4vw, 2.5rem) 0.5rem; }
.listing-title { font-size: var(--t-title); line-height: 1.4; margin: 0 0 0.4rem; }
.listing-sub { font-size: var(--t-xs); color: var(--ink-soft); margin: 0; }
.listing-empty { color: var(--ink-soft); padding-block: 2rem; }
.section-title { font-size: var(--t-xl); margin: 2rem 0 1rem; }
.era-years bdi { font-variant-numeric: tabular-nums; }

.listing-tools { display: flex; justify-content: flex-end; margin-block: 0.5rem 1rem; }
.sort-tabs { display: flex; gap: 0.25rem; }
.sort-tab {
  font-size: 0.8125rem; color: var(--ink-soft); border-radius: 0.5rem; padding: 0.25rem 0.7rem;
}
.sort-tab.active { background: var(--line); color: var(--ink); font-weight: 600; }
.sort-tab:hover { text-decoration: none; color: var(--accent-deep); }

.card-list { display: grid; gap: 1rem; }
.card {
  /* No box. A listing is a list, and a page of identical bordered rectangles is the
     specific habit that made this site read as a template. Rows separated by a
     hairline, thumb kept small, hierarchy carried by the title. */
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding-block: var(--sp-5);
  border-block-end: var(--hair) solid var(--line);
}
.listing .card:last-child { border-block-end: 0; }
.card:hover .card-title a { color: var(--accent); }
.card-thumb { flex: 0 0 7.5rem; align-self: center; }
.card-thumb img { inline-size: 7.5rem; block-size: 5.25rem; object-fit: cover; border-radius: 0.5rem; display: block; }
.card-body { min-inline-size: 0; }
.card-era {
  display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 2rem; padding: 0.05rem 0.6rem; margin-block-end: 0.35rem;
}
.card-title { font-size: var(--t-lg); line-height: 1.55; margin: 0 0 0.35rem; font-weight: 700; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--accent-deep); text-decoration: none; }
.card-excerpt {
  font-size: var(--t-xs); line-height: 1.8; color: var(--ink-soft); margin: 0 0 0.5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; font-size: 0.8125rem; color: var(--ink-faint); }
.cm-author { color: var(--ink-soft); font-weight: 600; }
.card-meta .dot::before { content: '·'; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-block: 2rem; font-size: var(--t-xs); }
.pager-link { font-weight: 600; }
.pager-info { color: var(--ink-faint); }

/* ---- Homepage (home-view) -------------------------------------------------- */
.hero {
  /* warm parchment hero — a faint gold glow, not a muddy lapis-grey band */
  background: radial-gradient(ellipse at 50% -25%,
    color-mix(in srgb, var(--brass) 12%, var(--bg)) 0%, var(--bg) 62%);
  border-block-end: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  padding-block: clamp(2.75rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.hero::before {                     /* small gilt ornament above the wordmark */
  content: "\2766"; display: block; color: var(--brass);
  font-family: var(--f-lit); font-size: 1.5rem; line-height: 1; margin-block-end: 0.75rem;
}
.hero-title {
  font-family: var(--f-display); color: var(--accent);   /* Al-Awwal wordmark */
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.25; margin: 0 0 0.5rem; letter-spacing: 0;
}
.hero-sub {
  font-size: var(--t-lg); line-height: 1.9; color: var(--ink-soft);
  max-inline-size: 36rem; margin: 0 auto 1.5rem;
}
.hero-stats {
  display: flex; justify-content: center; align-items: center; gap: 0.6rem;
  font-size: var(--t-xs); color: var(--ink-soft); margin: 0 0 1.5rem;
}
.hero-stats .dot::before { content: '·'; color: var(--ink-faint); }
.hero-stats bdi { font-weight: 700; color: var(--ink); }
.hero-ctas { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.btn-primary, .btn-secondary {
  display: inline-block; font-weight: 700; font-size: var(--t-xs);
  border-radius: 0.6rem; padding: 0.65rem 1.6rem;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); text-decoration: none; }
.btn-secondary { background: var(--card); color: var(--accent-deep); border: 1px solid var(--accent); }
.btn-secondary:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 8%, var(--card)); }

.section-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-more { font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }

.era-strip {
  display: flex; gap: 0.6rem; overflow-x: auto; padding-block: 0.25rem 0.75rem;
  scrollbar-width: thin; margin-block-end: 1.5rem;
}
.era-stop {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem;
  padding: 0.6rem 0.9rem; min-inline-size: 9.5rem;
}
.era-stop:hover { border-color: var(--accent); text-decoration: none; }
.es-name { font-weight: 700; color: var(--ink); font-size: 0.9375rem; white-space: nowrap; }
.es-years { font-size: 0.75rem; color: var(--ink-faint); white-space: nowrap; }
.es-years bdi { font-variant-numeric: tabular-nums; }
.es-count { font-size: 0.75rem; color: var(--accent-deep); }

/* ---- Search highlight ------------------------------------------------------
   All that survives of the old search chrome: search-results-view.php is on the
   edition's own parts now (.headnote + .idx-rec + .reg + .rel in sq-edition.css),
   but it still MARKS the match inside the title and the passage, which is the
   whole point of showing a result rather than asserting one. */
mark.hl { background: var(--mark); color: inherit; padding: 0 0.08em; border-radius: 0.2em; }

/* ---- Small screens -------------------------------------------------------- */
@media (max-width: 40rem) {
  .wrap { padding-inline: 1rem; }
  .author-card { flex-direction: column; }
  .card { flex-direction: column; gap: 0.75rem; }
  .card-thumb, .card-thumb img { inline-size: 100%; block-size: auto; }
  .card-thumb img { max-block-size: 11rem; }
  .comment-reply { margin-inline-start: 1.1rem; }
}

/* ---- Print ---------------------------------------------------------------- */
@media print {
  /* Hide the chrome and the navigation, keep the evidence. The apparatus is the
     point of this design, so it PRINTS — a study taken to paper should carry its
     record, its sources and its documentation state with it. */
  .rail, .masthead, .band, .mast-nav, .pref-group, .read-progress,
  .app-block--sticky, .comments, .colophon, .flash-zone { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet { display: block; max-inline-size: none; }
  .text, .apparatus, .endmatter { max-inline-size: none; }
  .apparatus { break-before: page; }
  .text a, .apparatus a { color: #000; text-decoration: none; }
  .text h2, .text h3 { break-after: avoid; }
  .text .poem-verse, .app-block { break-inside: avoid; }
}

/* ==========================================================================
   Manuscript illumination layer  (scoped to .manuscript — the article page)
   Restores the Andalusian/Abbasid book-arts soul on the clean foundation:
   parchment ground, gold + lapis, Amiri calligraphy for display, illuminated
   headpiece, ornamental dividers, illuminated poetry. Beauty is the point.
   ========================================================================== */
/* The dark variant that used to live here is gone: sq-theme.css derives the
   paper ground from tokens in both themes, so one declaration covers both. */
.manuscript .topbar { background: color-mix(in srgb, var(--bg) 86%, transparent); border-block-end-color: color-mix(in srgb, var(--brass) 28%, transparent); }
.manuscript .brand { color: var(--accent); font-family: var(--f-lit); }

/* ---- The «manuscript» overlay is gone -------------------------------------
   A parallel set of reader rules — illuminated headpiece, gilt poem frame,
   ornamental divider, gilt apparatus rule — layered on top of .prose when the
   body carried .manuscript. It was a second, competing decoration system, and the
   ornament in the approved design is ONE cited motif (the sebka band), used in
   four specific places and never behind running text. Removed with the reader
   rules above; sq-edition.css is the single source for the reading surface.
   ------------------------------------------------------------------------- */

/* =============================================================================
   404 — a page readers reach by accident, usually from a stale link or a search
   result. Useful beats apologetic, so it offers the eras and a search box.
   ========================================================================== */
.nf { max-inline-size: var(--measure); margin-inline: auto; padding-block: var(--sp-8) var(--sp-9); }
.nf-code {
  font-family: var(--f-display); font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1; color: var(--brass); margin: 0 0 var(--sp-3);
}
.nf-title { font-family: var(--f-display); font-size: var(--t-2xl); color: var(--ink); margin-block-end: var(--sp-3); }
.nf-lede  { font-family: var(--f-body); font-size: var(--t-lg); color: var(--ink-soft);
            max-inline-size: 34rem; margin-block-end: var(--sp-6); }

.nf-search { margin-block-end: var(--sp-7); }
.nf-search-label { display: block; font-family: var(--f-ui); font-size: var(--t-2xs);
                   color: var(--ink-faint); margin-block-end: var(--sp-2); }
.nf-search-row { display: flex; gap: var(--sp-2); max-inline-size: 30rem; }
.nf-search input {
  flex: 1; min-inline-size: 0;
  padding: var(--sp-3); font-family: var(--f-ui); font-size: var(--t-ui);
  background: var(--card); color: var(--ink);
  border: var(--hair) solid var(--line-strong); border-radius: var(--r-1);
}
.nf-search button {
  padding-inline: var(--sp-5); font-family: var(--f-ui); font-size: var(--t-ui);
  background: var(--accent); color: var(--on-accent);
  border: var(--hair) solid var(--accent); border-radius: var(--r-1);
  transition: background var(--dur-2) var(--ease);
}
.nf-search button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.nf-sub { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
          font-weight: 400; margin-block-end: var(--sp-3); }
/* Rows with a hairline between, not a grid of boxes: an era list is an index,
   and an index reads better as a list than as cards. */
.nf-era-list { list-style: none; margin: 0; padding: 0; }
.nf-era-list li { border-block-end: var(--hair) solid var(--line); }
.nf-era-list li:last-child { border-block-end: 0; }
.nf-era-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding-block: var(--sp-3); text-decoration: none; color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.nf-era-list a:hover { color: var(--accent); }
.nf-era-name  { font-family: var(--f-body); font-size: var(--t-lg); }
.nf-era-years { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }

.nf-back { margin-block-start: var(--sp-7); font-family: var(--f-ui); font-size: var(--t-sm); }

/* =============================================================================
   Document pages — privacy, terms, and any other long-form static prose.
   One shared vocabulary. These pages previously carried two parallel sets of
   class names (.privacy-* and .terms-*) doing identical work, each with its own
   ~150-line inline <style>.
   ========================================================================== */
.doc { max-inline-size: var(--measure); margin-inline: auto; padding-block: var(--sp-7) var(--sp-9); }
.doc-head { margin-block-end: var(--sp-6); padding-block-end: var(--sp-5);
            border-block-end: var(--hair) solid var(--line); }
.doc h1 { font-family: var(--f-display); font-size: var(--t-2xl); color: var(--ink);
          line-height: var(--lh-2xl); margin-block-end: var(--sp-3); }
.doc-date { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }

.doc-toc h2 { font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 700;
             margin-block: 0 var(--sp-3); }
.doc-toc { margin-block-end: var(--sp-7); padding: var(--sp-5); background: var(--bg-2);
           border-inline-start: var(--hair-2) solid var(--brass); border-radius: var(--r-1); }
.doc-toc ul { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin-block-end: var(--sp-1); }
.doc-toc li, .doc-toc a {
  font-family: var(--f-ui); font-size: var(--t-sm); line-height: var(--lh-sm);
}
.doc-toc a { color: var(--ink-soft); text-decoration: none; }
.doc-toc a:hover { color: var(--accent); text-decoration: underline; }
.doc h2 { font-family: var(--f-display); font-size: var(--t-xl); color: var(--ink);
          line-height: var(--lh-xl); margin-block: var(--sp-6) var(--sp-3); }
.doc h3 { font-family: var(--f-ui); font-weight: 700; font-size: var(--t-lg); color: var(--ink);
          margin-block: var(--sp-5) var(--sp-2); }
.doc p, .doc li { font-family: var(--f-body); font-size: var(--t-base);
                  line-height: var(--lh-base); color: var(--ink); }
.doc p { margin-block-end: var(--sp-prose); }
.doc ul { margin-block-end: var(--sp-prose); padding-inline-start: var(--sp-5); }
.doc li { margin-block-end: var(--sp-2); }
.doc strong { font-weight: 700; color: var(--ink); }
.doc a { color: var(--accent); text-underline-offset: .18em; }
.doc a:hover { color: var(--accent-deep); }

/* =============================================================================
   Topbar and footer — the chrome the shell emits.
   These class names were introduced by includes/layout/page.php and initially had
   no rules at all, so every migrated page rendered its nav as four labels jammed
   together and its footer as a run-on line of red links. Caught in review.
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: var(--hair) solid var(--line);
}
.topbar-inner {
  max-inline-size: var(--maxw); margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  display: flex; align-items: baseline; gap: var(--sp-5);
}
.topbar-nav { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.topbar-link {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-soft);
  text-decoration: none; padding-block: var(--sp-1);
  border-block-end: var(--hair-2) solid transparent;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.topbar-link:hover { color: var(--accent); }
.topbar-link.is-current { color: var(--ink); border-block-end-color: var(--accent); }
.brand { font-weight: 700; font-size: 1.125rem; color: var(--ink); letter-spacing: 0; }
.brand:hover { text-decoration: none; color: var(--accent-deep); }
/* The preference controls sit at the far end, away from navigation. */
.pref-group { margin-inline-start: auto; display: flex; gap: var(--sp-1); }

.site-foot {
  margin-block-start: var(--sp-9);
  padding-block: var(--sp-7) var(--sp-6);
  border-block-start: var(--hair) solid var(--line);
  background: var(--bg-2);
}
.site-foot .wrap { max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.foot-brand {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink);
  margin-block-end: var(--sp-4);
}
/* A row of links needs separators or it reads as one long string. Flex gap plus a
   hairline divider does that without inserting punctuation into the markup. */
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) 0; margin-block-end: var(--sp-5); }
.foot-nav a {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-soft);
  text-decoration: none; padding-inline: var(--sp-3);
  border-inline-end: var(--hair) solid var(--line-strong);
  transition: color var(--dur-1) var(--ease);
}
.foot-nav a:first-child { padding-inline-start: 0; }
.foot-nav a:last-child  { border-inline-end: 0; padding-inline-end: 0; }
.foot-nav a:hover { color: var(--accent); }
.foot-fine { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }

@media (max-width: 40rem) {
  .topbar-inner { flex-wrap: wrap; gap: var(--sp-3); }
  .topbar-nav { gap: var(--sp-3); }
  .pref-group { margin-inline-start: 0; }
}

/* --- Colophon ------------------------------------------------------------- */
.colo-item:last-child { border-block-end: 0; }

/* =============================================================================
   HOMEPAGE — composition.
   The old homepage was one narrow centred column in which "مختارات" and "أحدث"
   rendered as identical cards, so the editorial judgement was invisible and the
   canvas was unused at 1440. Hierarchy here comes from scale and placement, not
   from labels, and almost nothing is boxed.
   ========================================================================== */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Masthead: quiet. The wordmark already sits in the topbar; repeating it huge
       was the loudest thing on a page whose job is to show studies. --- */
.home-masthead { padding-block: var(--sp-8) var(--sp-6); border-block-end: var(--hair) solid var(--line); }
.mast-kicker { font-family: var(--f-display); font-size: var(--t-2xl); line-height: var(--lh-2xl);
               color: var(--ink); margin-block-end: var(--sp-2); }
.mast-sub { font-family: var(--f-body); font-size: var(--t-lg); color: var(--ink-soft);
            max-inline-size: 38rem; margin-block-end: var(--sp-5); }
.mast-search { display: flex; gap: var(--sp-2); max-inline-size: 32rem; margin-block-end: var(--sp-3); }
.mast-search input {
  flex: 1; min-inline-size: 0; padding: var(--sp-3);
  font-family: var(--f-ui); font-size: var(--t-ui);
  background: var(--card); color: var(--ink);
  border: var(--hair) solid var(--line-strong); border-radius: var(--r-1);
}
.mast-search button {
  padding-inline: var(--sp-5); font-family: var(--f-ui); font-size: var(--t-ui);
  background: var(--accent); color: var(--on-accent);
  border: var(--hair) solid var(--accent); border-radius: var(--r-1);
}
.mast-search button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.mast-stats { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }

/* --- Lead study: the one thing that is allowed to be big. --- */
.lead-band { padding-block: var(--sp-8); border-block-end: var(--hair) solid var(--line); }
.lead-media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-1); }
.lead-era { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); text-decoration: none; }
.lead-stand { font-family: var(--f-body); font-size: var(--t-lg); line-height: 1.75;
              color: var(--ink-soft); margin-block-end: var(--sp-4); }

/* --- Section heads --- */
.home-sec { padding-block: var(--sp-8); border-block-end: var(--hair) solid var(--line); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between;
            gap: var(--sp-4); margin-block-end: var(--sp-4); }
.sec-title { font-family: var(--f-display); font-size: var(--t-xl); color: var(--ink); }
.sec-more { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); text-decoration: none; }
.sec-note { font-family: var(--f-body); font-size: var(--t-base); color: var(--ink-soft);
            max-inline-size: 44rem; margin-block-end: var(--sp-5); }

/* --- Ruled rows, not cards --- */
.row-list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; gap: var(--sp-5); align-items: flex-start;
       padding-block: var(--sp-5); border-block-end: var(--hair) solid var(--line); }
.row:last-child { border-block-end: 0; }
.row-main { flex: 1; min-inline-size: 0; }
.row-era { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent); }
.row-title { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.5;
             color: var(--ink); margin-block: var(--sp-1) var(--sp-2); }
.row-title a { text-decoration: none; color: inherit; }
.row-title a:hover { color: var(--accent); }
.row-meta { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.row-thumb img { inline-size: 9rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-1); }

/* --- Era index: the taxonomy as an index, not a scroll strip --- */
.era-index { list-style: none; margin: 0; padding: 0; }
.era-index li { border-block-end: var(--hair) solid var(--line); }
.era-index li:last-child { border-block-end: 0; }
.era-index a {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-4);
  align-items: baseline; padding-block: var(--sp-3);
  text-decoration: none; color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.era-index a:hover { color: var(--accent); }
/* An era with nothing in it is still part of the sequence. Dimmed, never hidden:
   the gap is information. */
.era-index a.is-empty { color: var(--ink-faint); }
.ei-name  { font-family: var(--f-body); font-size: var(--t-lg); }
.ei-years { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint); }
.ei-count { font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
            min-inline-size: 7rem; text-align: end; }

.btn {
  font-family: var(--f-ui); font-size: var(--t-ui); padding: var(--sp-3) var(--sp-5);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  border-radius: var(--r-1);
}
.btn:hover { background: var(--accent-deep); }
.btn-quiet { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink); text-decoration: underline; }

@media (max-width: 52rem) {
  .lead { grid-template-columns: 1fr; gap: var(--sp-5); }
  .era-index a { grid-template-columns: 1fr auto; }
  .ei-count { grid-column: 1 / -1; text-align: start; }
  .row-thumb img { inline-size: 6rem; }
}

/* =============================================================================
   AUTH — login, register, password reset, email verification.
   -----------------------------------------------------------------------------
   These five pages were each on includes/header.php with their own inline CSS;
   login.php alone carried 475 lines of it, including an illustration panel with a
   floating animated icon, a gradient overlay and a feature list. None of that told
   anyone anything about signing in. What replaces it is a single narrow column:
   the field, its label, and one action. A sign-in form is a doorway, not a
   landing page.
   ========================================================================== */
.auth {
  max-inline-size: 26rem;
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-9);
  padding-inline: 1.25rem;
}
.auth-head { margin-block-end: var(--sp-6); }
/* The headnote idiom: a rubricated kicker rule, the title in the display face,
   then the standfirst — the same opening a study and a document get, at the
   scale a doorway deserves. */
.auth-head::before {
  content: ""; display: block; inline-size: 1.4rem; block-size: var(--hair);
  background: var(--accent); margin-block-end: var(--e-3);
}
.auth-head h1 {
  font-family: var(--f-display); font-size: var(--t-2xl); line-height: var(--lh-2xl);
  color: var(--ink); margin-block-end: var(--e-2);
}
.auth-head p {
  font-family: var(--f-body); font-size: var(--t-mid); line-height: var(--lh-mid);
  color: var(--ink-soft);
}

.field { margin-block-end: var(--sp-5); }
.field-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-block-end: var(--sp-2);
}
.field label, .field > .field-label {
  display: block; margin-block-end: var(--sp-2);
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 700; color: var(--ink);
}
.field-row label { margin-block-end: 0; }
/* input[type="date"] is here rather than in a second block of its own: the refine
   panel on search-results-view.php needs two date bounds, and a date input that
   does not inherit this face is a differently-shaped control sitting inside the
   same form — the exact drift this two-layer sheet exists to prevent. */
.field input[type="text"], .field input[type="email"],
.field input[type="password"], .field input[type="url"], .field input[type="date"],
.field select, .field textarea {
  inline-size: 100%;
  font-family: var(--f-ui);
  /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on focus,
     which then leaves the page scrolled sideways after the keyboard closes. */
  font-size: var(--t-ui);
  line-height: 1.5;
  color: var(--ink); background: var(--card);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-2);
  padding: 0.6rem 0.75rem;
  transition: border-color var(--dur-1) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  outline: var(--hair-2) solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 1px;
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-hint {
  margin-block-start: var(--sp-2);
  font-family: var(--f-ui); font-size: var(--t-xs); line-height: 1.6; color: var(--ink-faint);
}
.field-link { font-family: var(--f-ui); font-size: var(--t-xs); color: var(--accent); text-decoration: none; }
.field-link:hover { color: var(--accent-deep); text-decoration: underline; }

.field-check { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.field-check input { inline-size: 1rem; block-size: 1rem; accent-color: var(--accent); margin: 0; }
.field-check label {
  margin: 0; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 400; color: var(--ink-soft);
}

.auth-submit {
  inline-size: 100%;
  font-family: var(--f-ui); font-size: var(--t-ui); font-weight: 700;
  color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: var(--r-2); padding: 0.7rem 1rem;
  transition: background var(--dur-1) var(--ease);
}
.auth-submit:hover { background: var(--accent-deep); }

.auth-alt {
  margin-block-start: var(--sp-6); padding-block-start: var(--sp-5);
  border-block-start: var(--hair) solid var(--line);
  font-family: var(--f-body); font-size: var(--t-sm); color: var(--ink-soft);
}
.auth-alt a { color: var(--accent); }
.auth-alt a:hover { color: var(--accent-deep); }

/* The errors list inside a .flash on the auth pages. */
.auth .flash ul { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-5); }
.auth .flash li { margin-block-end: var(--sp-1); }

/* =============================================================================
   MEMBER SURFACES — دراساتي, the profile, settings, bookmarks, notifications.
   -----------------------------------------------------------------------------
   Shared vocabulary so the six pages behind login do not each grow their own.
   my-articles.php alone carried ~820 lines of inline CSS plus a script that
   animated its statistics up from zero on every load; the figures are the point,
   and animating them only delays them.
   ========================================================================== */
.member-main { padding-block: var(--sp-7) var(--sp-9); }

.member-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-block-end: var(--e-4); padding-block-end: var(--e-2);
  border-block-end: 2px solid var(--ink);
}
.member-head h1 {
  font-family: var(--f-display); font-size: var(--t-2xl); line-height: var(--lh-2xl); color: var(--ink);
}
.member-sub {
  font-family: var(--f-body); font-size: var(--t-sm); color: var(--ink-soft);
  margin-block-start: var(--sp-2);
}

/* Figures as a ruled tally, not as cards. Five boxes with drop shadows for five
   numbers is the single most common way an admin page starts looking like a
   dashboard template. */
.tally {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0 0 var(--sp-6); padding: 0;
  border-block: var(--hair) solid var(--line);
}
.tally-item {
  flex: 1 1 7rem; padding: var(--sp-4) var(--sp-5);
  border-inline-start: var(--hair) solid var(--line);
}
.tally-item:first-child { border-inline-start: 0; }
.tally-item dt {
  font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--accent);
  margin-block-end: var(--e-1);
}
.tally-item dd {
  margin: 0; font-family: var(--f-display); font-size: var(--t-2xl);
  font-weight: 400; color: var(--ink); line-height: 1;
}

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-end: var(--sp-5); }
.filter {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-soft);
  text-decoration: none; padding-block: var(--sp-2);
  border-block-end: var(--hair-2) solid transparent;
}
.filter:hover { color: var(--accent); }
.filter.is-on { color: var(--ink); border-block-end-color: var(--accent); }
.filter-n { color: var(--ink-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.sortbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-family: var(--f-ui); font-size: var(--t-xs); color: var(--ink-faint);
  margin-block-end: var(--sp-3);
}
.sortbar-count { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sortbar-opts { display: flex; gap: var(--sp-3); }
.sortbar-opt { color: var(--ink-faint); text-decoration: none; }
.sortbar-opt:hover { color: var(--accent); }
.sortbar-opt.is-on { color: var(--ink); font-weight: 700; }

/* Ruled rows. A study in progress is a line in a ledger, not a product card. */
.mine { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--ink); }
.mine-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  padding-block: var(--sp-5); border-block-end: var(--hair) solid var(--line);
}
.mine-main { min-inline-size: 0; }
.mine-status {
  font-family: var(--f-ui); font-size: var(--t-2xs); margin-block-end: var(--sp-2);
  color: var(--ink-faint);
}
.mine-status.status-published { color: var(--ok); }
.mine-status.status-pending   { color: var(--brass); }
.mine-status.status-rejected  { color: var(--danger); }
.mine-title {
  font-family: var(--f-display); font-size: 1.2rem; line-height: 1.6; color: var(--ink);
}
.mine-title a { text-decoration: none; color: inherit; }
.mine-title a:hover { color: var(--accent); }
.mine-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
  margin-block-start: var(--sp-2);
}
.mine-notes {
  margin-block-start: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--danger) 5%, var(--bg-2));
  border-inline-start: var(--hair-2) solid var(--danger);
  border-radius: var(--r-1);
}
.mine-notes-h {
  font-family: var(--f-ui); font-size: var(--t-2xs); font-weight: 700;
  color: var(--danger); margin-block-end: var(--sp-1);
}
.mine-notes p { font-family: var(--f-body); font-size: var(--t-sm); line-height: var(--lh-base); color: var(--ink); }
.mine-acts { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.mine-acts form { margin: 0; }

.btn-danger {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--danger);
  text-decoration: underline; text-underline-offset: .18em;
  background: none; border: 0; padding: 0;
}
.btn-danger:hover { color: var(--ink); }

.empty {
  padding: var(--sp-8) 0; border-block-start: var(--hair) solid var(--line);
  font-family: var(--f-body); font-size: var(--t-base); color: var(--ink);
}
.empty p { margin-block-end: var(--sp-4); }
.empty-note { font-size: var(--t-sm); color: var(--ink-soft); max-inline-size: 38rem; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5);
  margin-block-start: var(--sp-7);
  font-family: var(--f-ui); font-size: var(--t-sm);
}
.pager a { color: var(--accent); text-decoration: none; }
.pager a:hover { color: var(--accent-deep); text-decoration: underline; }
.pager-at { color: var(--ink-faint); font-size: var(--t-xs); }

/* bookmarks.php filters on TWO independent axes (era and category) where
   my-articles.php had one, so two identical .filters rows sit above each other
   and neither says which axis it is. This names them. */
.filters-axis {
  align-self: center;
  font-family: var(--f-ui); font-size: var(--t-2xs); color: var(--ink-faint);
}

/* notifications.php: a notification is a sentence, not a heading. .mine-title is
   display type at h3 size, which turns "علّق فلان على دراستك" into a headline;
   this is the same row slot in body type at caption size. */
.mine-msg {
  font-family: var(--f-body); font-size: var(--t-sm); line-height: var(--lh-base);
  color: var(--ink);
}
.mine-msg a { text-decoration: none; color: inherit; }
.mine-msg a:hover { color: var(--accent); text-decoration: underline; }

/* An unread notice must be findable at a glance. A rule on the start edge does it
   without a coloured dot that a screen reader would read as nothing and that would
   need its own dark-theme value. */
.mine-row.is-unread {
  border-inline-start: var(--hair-2) solid var(--accent);
  padding-inline-start: var(--sp-4);
}

@media (max-width: 40rem) {
  .mine-row { flex-direction: column; gap: var(--sp-3); }
  .tally-item { flex-basis: 50%; }
}

/* ---- Settings -------------------------------------------------------------
   Four panels selected by ?tab=, not four accordions and not a wizard. Each is a
   short form; the tab strip reuses .filters so it behaves like every other set of
   tabs on the member pages. */
.settings-panel { max-inline-size: 34rem; }
.settings-h {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink);
  margin-block: var(--sp-6) var(--sp-3);
  padding-block-end: var(--sp-2); border-block-end: var(--hair) solid var(--line);
}
.settings-h:first-child { margin-block-start: 0; }
.settings-avatar {
  inline-size: 6rem; block-size: 6rem; border-radius: 50%; object-fit: cover;
  background: var(--bg-2); margin-block-end: var(--sp-5);
}
.pref-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-block: var(--sp-3); border-block-end: var(--hair) solid var(--line);
}
.pref-row input { inline-size: 1rem; block-size: 1rem; margin-block-start: 0.25rem; accent-color: var(--accent); flex: none; }
.pref-row label {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink);
  margin: 0; display: block;
}
.pref-row .field-hint { margin-block-start: var(--sp-1); }
.field textarea { resize: vertical; min-block-size: 6rem; font-family: var(--f-body); }
.field input[type="file"] {
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--ink-soft);
  inline-size: 100%;
}