/* Self-hosted, per CLAUDE.md → web client specifics. A webfont fetched from a
   third party is a dependency that can disappear, and Arabic rendering
   degrading to a system fallback is not a cosmetic failure — ligatures break,
   and the text a user is asked to trust looks wrong.

   Amiri is a Naskh face with full ligature coverage, OFL-licensed; OFL.txt
   ships beside it. */
@font-face {
  font-family: "Amiri";
  src: url("fonts/Amiri-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("fonts/Amiri-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #1a1a1a;
  --muted: #5c5c5c;
  --rule: #ddd8d0;
  --paper: #fbfaf7;
  --card: #ffffff;
  --accent: #2f5d50;
  --warn-bg: #fdf6e3;
  --warn-ink: #6b5518;
  --max: 52rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.muted { color: var(--muted); font-size: 0.875rem; }

/* --- scope disclosure ----------------------------------------------------
   Sticky and always present. There is no dismiss control and no collapsed
   state; it is part of the product's identity rather than a notice. */
.scope {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  padding: 0.75rem 1rem;
}
.scope-line { max-width: var(--max); margin: 0 auto; font-size: 0.875rem; }
.scope-detail {
  max-width: var(--max); margin: 0.25rem auto;
  font-size: 0.8125rem; color: var(--muted);
}

main { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem 8rem; }

/* --- asking --------------------------------------------------------------- */
.ask {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card); border-top: 1px solid var(--rule);
  padding: 0.75rem 1rem;
}
.ask textarea {
  display: block; width: 100%; max-width: var(--max); margin: 0 auto;
  font: inherit; padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule); border-radius: 6px; resize: vertical;
  /* Arabic typed into the box must render correctly too, and `dir="auto"` on
     the element handles direction; the font stack handles the glyphs. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Amiri", sans-serif;
}
.controls {
  max-width: var(--max); margin: 0.5rem auto 0;
  display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem;
}
.controls label { color: var(--muted); }
.controls select { font: inherit; padding: 0.25rem; }
.controls button {
  margin-inline-start: auto; font: inherit; padding: 0.4rem 1.1rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  cursor: pointer;
}
.controls button[disabled] { opacity: 0.5; cursor: default; }

/* --- turns ---------------------------------------------------------------- */
.turn { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 1.5rem; }
.turn:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.question { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; }
/* Stated, not warned. This is a standing attribution — the same fact on every
   answer over this corpus — so it must not look like the yellow boxes, which
   mean "something is off with this particular result". A reader who learns to
   dismiss warnings would learn to dismiss this. */
.rendering-note {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
  border-inline-start: 3px solid var(--rule);
  padding-block: 0.3rem;
  padding-inline-start: 0.6rem;
}
.rendering-note:empty { display: none; }

.answer { margin: 0.5rem 0 1.5rem; }
.answer p { margin: 0 0 0.75rem; }
.answer ul { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; }
.answer li { margin-bottom: 0.35rem; }
.answer h4 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: #f0ede8; padding: 0.05em 0.3em; border-radius: 3px;
}
/* Arabic inside the answer, not only inside a source card. The model quotes
   passages inline, and at Latin body size Naskh is unreadable. */
.answer bdi { font-family: "Amiri", serif; font-size: 1.15em; line-height: 1.9; }
.answer:empty { display: none; }

/* Retrieval progress. Each step reveals as it happens rather than a spinner
   sitting for six seconds. */
.progress { font-size: 0.875rem; color: var(--muted); margin-bottom: 0.75rem; }
.progress .step { display: none; }
.progress .step.active { display: inline; }
.progress[hidden] { display: none; }

.warnings:empty, .empty-state:empty { display: none; }
.warning {
  background: var(--warn-bg); color: var(--warn-ink);
  border-inline-start: 3px solid #c9a227;
  padding: 0.5rem 0.75rem; margin-bottom: 0.5rem;
  font-size: 0.8125rem; border-radius: 0 4px 4px 0;
}
.empty-state {
  border: 1px solid var(--rule); background: var(--card);
  padding: 1rem; border-radius: 6px; margin-bottom: 1rem;
}

/* --- source cards --------------------------------------------------------- */
.sources-heading { font-size: 0.875rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.75rem; }
.sources-heading:empty { display: none; }
/* The coloured edge is the card's half of the [S1] pairing — same hue as the
   badge and as the chip in the prose. It identifies which source, not how good
   it is: equal saturation and lightness across the palette, so no card reads as
   more authoritative than its neighbours. */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--accent-source, var(--rule));
  border-radius: 6px; padding: 0.9rem 1rem; margin-bottom: 0.75rem;
  transition: box-shadow 0.3s ease;
}
.card.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-source) 30%, transparent); }
.card-head { display: flex; align-items: baseline; gap: 0.5rem; }
.ref { font-weight: 600; }

/* Says out loud what the answer refers to the card by. Without it the prose
   cites [S1] and the reader has to count cards. */
.badge {
  display: inline-block; flex: none;
  background: var(--accent-source, var(--muted)); color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem; border-radius: 4px;
}

/* The citation marker in the prose, in the matching hue.
 *
 * **`unicode-bidi: isolate` is the load-bearing line here, not the colour.**
 * `S1` is a Latin run, and in an Arabic answer it sits inside an RTL paragraph
 * where an un-isolated LTR island reorders the neutral characters around it —
 * brackets, commas, the spaces either side. `في [S1]` rendered with the chip
 * detached from the word it belongs to.
 *
 * `direction: ltr` keeps the marker itself reading S1 rather than 1S; `isolate`
 * stops it disturbing anything outside. */
.cite {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
  font-size: 0.75rem; font-weight: 700; text-decoration: none;
  color: var(--accent-source, var(--muted));
  border: 1px solid color-mix(in srgb, var(--accent-source) 45%, transparent);
  background: color-mix(in srgb, var(--accent-source) 10%, transparent);
  border-radius: 4px; padding: 0 0.3rem; margin: 0 0.1rem;
  vertical-align: baseline;
}
.cite:hover { background: color-mix(in srgb, var(--accent-source) 22%, transparent); }
.copy {
  margin-inline-start: auto; font: inherit; font-size: 0.75rem;
  background: none; border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.15rem 0.5rem; cursor: pointer; color: var(--muted);
}

/* Neutral weight across every school — CLAUDE.md: no madhhab renders as the
   default with others marked as exceptions. Same size, same colour, same
   border for all four axes. */
/* Chips are coloured **by axis, never by value**.
   `tradition: sunni` and a future `tradition: shia` get the same chip colour;
   so do all four madhhabs. A palette keyed to the value is exactly how one
   school acquires the default colour and the rest become exceptions, which
   CLAUDE.md rules out — the axes are told apart at a glance, the values are
   read. */
.axes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.axis {
  font-size: 0.75rem; line-height: 1.5;
  border: 1px solid transparent; border-radius: 999px; padding: 0.1rem 0.55rem;
}
.axis.tradition { color: #1d4f6c; background: #e3f0f7; border-color: #c2dcea; }
.axis.madhhab   { color: #2f5d3a; background: #e6f2e8; border-color: #c6e0cd; }
.axis.theology  { color: #5a3f6b; background: #f0e9f5; border-color: #dbcbe4; }
.axis.tier      { color: #6b4f18; background: #f7f0dd; border-color: #e6d6ac; }
/* Grading and chapter are attributes of the passage, so they get the chip
   treatment too. Grading is one colour whatever the grade: a red `daif` would
   present one grader's verdict as a warning, and gradings are contested. */
.axis.graded, .axis.grading { color: #6b3f3f; background: #f7ecec; border-color: #e5cccc; }
.axis.chapter { color: #4a4a4a; background: #f1efec; border-color: #ddd8d0; }

/* A bab title is a sentence, not a word — the chip wraps instead of clipping,
   because a chapter heading cut mid-phrase loses the part saying what it is
   about. Arabic needs its own face and size here as everywhere else. */
.axis.arabic-chip {
  font-family: "Amiri", serif;
  font-size: 0.95rem;
  line-height: 1.8;
  white-space: normal;
  display: block;
  padding: 0.2rem 0.55rem;
}

.grading, .bab { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.also-in, .translation-note {
  font-size: 0.8125rem; color: var(--muted); margin-top: 0.35rem;
}
.grading:empty, .also-in:empty, .bab:empty, .translation-note:empty { display: none; }

blockquote {
  margin: 0.6rem 0 0; padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid var(--rule); background: #fcfbf9;
}
blockquote:empty { display: none; }

/* The Arabic block. `dir="rtl"` is on the element; this supplies the face and
   a size that makes Naskh legible — Arabic at the Latin body size is too small
   to read comfortably. Ligatures and contextual forms explicitly on. */
.arabic {
  font-family: "Amiri", serif;
  font-size: 1.35rem;
  line-height: 2;
  /* The passage is always RTL regardless of interface language, so this edge
     is pinned to the physical right rather than a logical side — a logical
     property here would flip it to the wrong side of an Arabic passage inside
     an English page. */
  border-inline-start: 0;
  border-right: 3px solid var(--accent);
  text-align: right;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
}

/* --- bidirectional text ---------------------------------------------------
   Mixed Arabic and English on one line is the common bug on every platform,
   and `<bdi>` is the primitive built for it: it isolates the run so a
   right-to-left fragment cannot reorder the punctuation or the Latin text
   around it. Every interpolated value that could be Arabic is wrapped in one.
   Tested deliberately — see tests/test_web_client.py. */
bdi { unicode-bidi: isolate; }

.searched { margin-top: 0.5rem; }
.searched:empty { display: none; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e6e1; --muted: #a09a90; --rule: #3a3733;
    --paper: #1b1a18; --card: #232220; --accent: #7fb3a1;
    --warn-bg: #2e2818; --warn-ink: #e0c877;
  }
  blockquote { background: #1e1d1b; }
  .answer code { background: #2b2926; }
  /* Same hue relationships, lifted for a dark ground — the light-mode fills are
     unreadable here, and a chip nobody can read is a chip that is not shown. */
  .axis.tradition { color: #a8d4ec; background: #1c2c35; border-color: #2d4453; }
  .axis.madhhab   { color: #a6d6b4; background: #1c2b21; border-color: #2d4636; }
  .axis.theology  { color: #cbb2dc; background: #272030; border-color: #3d3149; }
  .axis.tier      { color: #dcc898; background: #302a1c; border-color: #4a412b; }
  .axis.graded, .axis.grading { color: #e0b3b3; background: #2f2222; border-color: #4a3434; }
  .axis.chapter { color: #cfcac3; background: #2a2825; border-color: #3f3c37; }
}