: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;
}

.collection {
  padding: 0.3rem 0.55rem;
  border-radius: 0;
  color: var(--green-deep);
  background: var(--green-light);
  font-weight: 800;
  text-transform: uppercase;
}

.arabic {
  margin: 2rem 0;
  font-family: Amiri, "Noto Naskh Arabic", "Segoe UI", serif;
  /* Amiri sets smaller and taller than Noto Naskh at the same size, so it gets
     a nudge up and extra leading to keep the diacritics clear of each other. */
  font-size: clamp(1.65rem, 3.2vw, 2.3rem);
  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;
}

.chat-question {
  display: flex;
  justify-content: 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;
}

.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;
}

.chat-cards {
  display: grid;
  gap: 0.85rem;
}

.chat-card {
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(30, 43, 33, 0.13);
  border-left: 3px solid var(--sage);
  border-radius: 0.35rem;
  background: var(--sanad-surface);
}

.chat-card-meta,
.chat-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.chat-card-foot {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(30, 43, 33, 0.08);
}

.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 {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--sanad-accent);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.chat-card .arabic {
  margin: 1rem 0;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}

.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 input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
}

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

.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);
}

.chat-drawer-head button {
  border: 1px solid rgba(30, 43, 33, 0.16);
  border-radius: 0;
  width: 2rem;
  height: 2rem;
  background: var(--sanad-surface);
  font: inherit;
  cursor: pointer;
}

.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;
}