:root {
  color-scheme: light;
  --ink: #1e2b21;
  --muted: #4c5c4e;
  --paper: #f9f7f0;
  --surface: #fffdf7;
  --line: #d5ddc4;
  /* The four supplied colours, darkest first. Each is a fill or a decorative
     tone: none of them reaches 4.5:1 against a light ground, so the text tones
     below are darkened from the same hues rather than taken from these. */
  --green: #537d5d;
  --green-mid: #73946b;
  --sage: #9ebc8a;
  /* 537D5D at 4.1:1 on paper cannot carry small text, so links, badges and
     outline buttons step down to this. */
  --green-deep: #3f6248;
  --green-light: #dfe8d3;
  /* D2D0A0 darkened until small-caps labels clear AA, at 4.9:1. */
  --accent: #6b6a33;
  --error: #a4373a;
  /* Amiri leads for both roles: it is a classical naskh, so the Arabic and the
     display serif come from one family. Georgia stays as the local fallback. */
  --serif: Amiri, Georgia, "Times New Roman", serif;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    /* D2D0A0, faded out: rgba because the stop needs an alpha channel. */
    radial-gradient(circle at 85% 0%, rgba(210, 208, 160, 0.45), transparent 25rem),
    var(--paper);
}

a {
  color: inherit;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.4rem 2rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--green);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

/* U+06DE is an Arabic ornament, drawn against Amiri's Arabic baseline, which
   sits lower in the em box than the Latin wordmark beside it. Both flex items
   are the same height and already centred, so the drop is inside the glyph and
   only an optical lift corrects it. Tune the offset here if the face changes. */
.brand-mark {
  color: var(--green);
  transform: translateY(-0.1em);
}

nav {
  display: flex;
  gap: 1.5rem;
}

nav a,
.clear-link,
.result-summary a {
  color: var(--muted);
  font-size: 0.9rem;
  text-underline-offset: 0.25rem;
}

main,
footer {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.hero {
  max-width: 55rem;
  padding: 7rem 0 5rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2 {
  font-family: var(--serif);
  /* Amiri ships 400 and 700 only, and headings are deliberately not bold, so
     this is the regular weight stated outright rather than a 500 the browser
     quietly rounds down. */
  font-weight: 400;
}

h1 {
  max-width: 52rem;
  margin: 0;
  font-size: clamp(3.15rem, 7.4vw, 6.3rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.lead,
.page-heading > p:last-child {
  max-width: 44rem;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.7;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--green);
  border-radius: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.primary {
  color: white;
  background: var(--green);
}

.secondary {
  color: var(--green-deep);
  background: transparent;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}

.principles article {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--line);
}

.principles article:last-child {
  border: 0;
}

.principles span {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.principles h2 {
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
}

.principles p {
  color: var(--muted);
  line-height: 1.6;
}

/* Attribution to sunnah.com, whose text this is. Given its own band rather
   than a footer line: it is the answer to "where did this come from", which is
   the first thing a reader should be able to check. */
.credit {
  max-width: 44rem;
  padding: 4rem 0 1rem;
}

.credit h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
}

.credit p {
  color: var(--muted);
  line-height: 1.7;
}

.credit-thanks {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.credit-thanks a,
footer a {
  color: var(--green-deep);
  font-weight: 700;
  text-underline-offset: 0.2rem;
}

.page-heading {
  padding: 4.5rem 0 2rem;
}

.page-heading h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
}

.filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
}

.filters label {
  display: grid;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.filters input,
.filters select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  color: var(--ink);
  background: white;
  font: inherit;
}

.filters .button,
.filters .clear-link {
  align-self: end;
}

.form-error {
  margin: 1rem 0 0;
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 700;
}

.result-summary,
.hadith-meta,
.grades {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.result-summary {
  margin: 2rem 0 1rem;
}

.hadith-list {
  display: grid;
  gap: 1rem;
}

.hadith-card,
.empty-state {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
}

.hadith-meta {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 0.8rem;
}

.hadith-meta a {
  margin-left: auto;
}

/* The badge holds a work's published title now, not a slug, so it is set as a
   name rather than shouted: uppercasing "Sahih al-Bukhari" loses the
   capitalisation that makes it read as a title. */
.collection {
  padding: 0.3rem 0.55rem;
  border-radius: 0;
  color: var(--green-deep);
  background: var(--green-light);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.arabic {
  margin: 2rem 0;
  font-family: Amiri, "Noto Naskh Arabic", "Segoe UI", serif;
  /* Fixed rather than viewport-relative: the browse listing shows many
     narrations at once and is read by scanning down them, so the Arabic wants
     a steady size rather than one that swells on a wide screen. The leading
     stays generous — Amiri's diacritics need the room. */
  font-size: 1.4375rem;
  line-height: 2.1;
}

.translation {
  color: #3a4a3c;
  line-height: 1.8;
}

/* The default 1em margin was set for a 1.0 line-height; at 1.8 it opens a gap
   wider than the text is tall and the narration reads as separate quotes
   rather than one continuous account. */
.translation p {
  margin: 0 0 0.7em;
}

.translation p:last-child {
  margin-bottom: 0;
}

.grades {
  justify-content: flex-start;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.pagination-status {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Kept in the flow rather than hidden, so the control does not jump position
   between the first page and the rest. */
.is-disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .pagination {
    flex-direction: column;
  }
}

footer {
  margin-top: 5rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .site-header,
  .result-summary,
  .hadith-meta,
  .grades {
    align-items: flex-start;
    flex-direction: column;
  }

  nav {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hero {
    padding-top: 4rem;
  }

  .principles,
  .filters {
    grid-template-columns: 1fr;
  }

  .principles article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hadith-meta a {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------- Sanad chat
   Scoped under .chat-app so nothing leaks into /search or /hadiths. The page
   shares the site type stack: Amiri for display and Arabic, Inter for UI. */

/* The chat page owns the whole viewport: no site header or footer sits above
   it, so it can size to 100vh and keep its composer pinned. */
body:has(.chat-app) {
  background: var(--paper);
}

.chat-app {
  --sanad-paper: var(--paper);
  --sanad-surface: var(--surface);
  --sanad-green: #537d5d;
  --sanad-accent: #6b6a33;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--sanad-paper);
}

.chat-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid rgba(30, 43, 33, 0.12);
}

.chat-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sanad-green);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}

/* Lifted for the same reason as .brand-mark; keep the two offsets in step. */
.chat-mark {
  color: var(--green);
  transform: translateY(-0.1em);
}

.chat-hero {
  width: min(100% - 2rem, 46rem);
  margin: 0 auto;
  padding: 3.5rem 0 1rem;
  text-align: center;
}

.chat-app[data-chat-state="active"] .chat-hero {
  display: none;
}

.chat-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--sanad-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.chat-hero h1 {
  margin: 0 auto;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.1;
}

.chat-lead {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: var(--muted);
  line-height: 1.7;
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.chat-suggestions button {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--green-mid);
  border-radius: 0;
  background: transparent;
  color: #4c5c4e;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.chat-disclaimer {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.6;
}

/* The scroll container spans the full viewport so the scrollbar rides the
   window edge; the reading column is centred by the turns inside it instead.
   `both-edges` reserves matching gutters so the column does not shift left the
   moment the transcript becomes long enough to scroll. */
.chat-transcript {
  flex: 1;
  width: 100%;
  padding: 1.5rem 1rem 2rem;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 43, 33, 0.28) transparent;
}

.chat-transcript::-webkit-scrollbar {
  width: 0.6rem;
}

.chat-transcript::-webkit-scrollbar-thumb {
  border: 0.18rem solid transparent;
  border-radius: 999px;
  background: rgba(30, 43, 33, 0.28);
  background-clip: content-box;
}

.chat-transcript::-webkit-scrollbar-track {
  background: transparent;
}

/* The hero scrolls with the transcript region rather than above it, so an
   empty chat centres and a busy one does not push the composer off screen. */
.chat-hero {
  flex: none;
}

.chat-turn {
  width: min(100%, 48rem);
  margin: 0 auto 2.5rem;
}

/* A column, not a row: a staged narration reference stacks above the bubble
   rather than sitting beside it. */
.chat-question {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}

.chat-question p {
  max-width: 80%;
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
  color: #ffffff;
  background: var(--sanad-green);
}

.chat-answer h2 {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
}

.chat-answer-body p {
  line-height: 1.75;
}

/* An inline citation, built from the retrieved record rather than written by
   the model. Set as a reference inside the sentence rather than as a button:
   it should be reachable without interrupting the prose. */
.chat-cite {
  padding: 0 0.1rem;
  border: 0;
  border-bottom: 1px solid var(--sage);
  background: none;
  color: var(--green-deep);
  font: inherit;
  font-size: 0.94em;
  font-weight: 700;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.chat-cite:hover,
.chat-cite:focus-visible {
  background: var(--green-light);
  border-bottom-color: var(--green-deep);
}

.chat-answer.is-refusal .chat-answer-body p {
  color: var(--muted);
  font-style: italic;
}

.chat-cite-label {
  margin: 1.5rem 0 0.75rem;
  color: var(--sanad-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* A run of narration references, comma separated, reading as a sentence
   rather than as a list of boxes. */
.chat-references {
  margin: 0;
  line-height: 2;
}

.chat-grade {
  padding: 0.15rem 0.5rem;
  border-radius: 0;
  color: var(--green-deep);
  background: rgba(83, 125, 93, 0.18);
  font-weight: 700;
}

.chat-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sanad-accent);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

/* The drawer is a fixed ~31rem column, so the viewport-relative size the page
   uses overflows it. Fixed at 1.125rem, with the leading Amiri's diacritics
   need at that size. */
.chat-drawer-body .arabic {
  margin: 1rem 0;
  font-size: 1.125rem;
  line-height: 2.2;
}

/* The narration staged for the next question, sitting above the field the way
   a reply preview sits above a message box. The left bar is what makes it read
   as a quotation rather than as a banner. */
/* `display` here beats the `hidden` attribute, which is only a UA rule of
   `display: none`. Without this the staged-narration strip is visible on load
   and after clearing, showing "Asking about" with nothing beside it. */
.chat-reply[hidden] {
  display: none;
}

.chat-reply {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  border-left: 3px solid var(--sage);
  background: var(--surface);
}

.chat-reply-body {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply-label {
  margin-right: 0.4rem;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.chat-reply-clear {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* Carried into the transcript so a turn still shows which narration it was
   about once the composer has been cleared. It is a sibling of the question
   bubble, so the bubble's styling has to be undone rather than inherited. */
.chat-question .chat-question-ref {
  max-width: 80%;
  margin: 0 0 0.35rem;
  padding: 0;
  color: var(--muted);
  background: none;
  font-size: 0.72rem;
}

.chat-composer {
  flex: none;
  width: min(100% - 2rem, 48rem);
  margin: 0 auto;
  padding: 0.75rem 0 1.25rem;
  background: linear-gradient(180deg, rgba(249, 247, 240, 0) 0%, var(--sanad-paper) 30%);
}

/* One field holding both controls, rather than a pill input beside a pill
   button: the border belongs to the composer as a whole, so the send control
   reads as part of the place you type instead of a second thing to aim at. */
.chat-composer-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  border: 1px solid rgba(30, 43, 33, 0.18);
  border-radius: 0;
  background: var(--sanad-surface);
  box-shadow: 0 1px 2px rgba(30, 43, 33, 0.05);
}

/* The focus ring goes on the field, since the input inside it has no edge of
   its own to draw one around. */
.chat-composer-field:focus-within {
  border-color: rgba(83, 125, 93, 0.5);
  box-shadow: 0 0 0 3px rgba(83, 125, 93, 0.14);
}

.chat-composer textarea {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  /* Height is driven from content by chat.js, so neither the drag handle nor a
     scrollbar should appear until the growth cap is reached. */
  resize: none;
  overflow-y: auto;
  max-height: 10rem;
}

.chat-composer textarea:focus {
  outline: none;
}

/* The send control stays with the last line rather than centring against a
   box that grows upward. */
.chat-composer-field {
  align-items: flex-end;
}

.chat-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  background: var(--sanad-green);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.chat-send:disabled {
  cursor: default;
  opacity: 0.45;
}

.chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(24, 33, 25, 0.45);
}

.chat-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 41;
  width: min(31rem, 94vw);
  overflow-y: auto;
  border-left: 1px solid rgba(107, 106, 51, 0.3);
  background: #f3f0e6;
}

.chat-drawer-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid rgba(30, 43, 33, 0.12);
  background: #f3f0e6;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--sanad-green);
}

/* A bare glyph rather than a boxed control: the drawer already has an edge and
   a backdrop, so a second box around the × was one border too many. Centred
   with flex, since a lone character does not sit centred in its own line box. */
.chat-drawer-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.chat-drawer-head button:hover {
  color: var(--ink);
}

.chat-drawer-body {
  padding: 1.5rem 1.3rem 3rem;
}

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

.chat-source {
  color: var(--muted);
  font-size: 0.8rem;
}

.chat-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  color: #ffffff;
  background: #1e2b21;
  font-size: 0.85rem;
}