@font-face {
  font-family: "Technohealia Uthmanic Hafs";
  src: url("fonts/UthmanicHafs.woff2") format("woff2");
  font-display: swap;
}

.thd-page-main {
  width: min(100% - 2rem, 980px);
  margin: 0 auto;
}

.thd-reader {
  --thd-accent: var(--thm-accent, #92704a);
  --thd-soft: #f4ede2;
  --thd-border: rgba(90, 66, 43, 0.18);
  --thd-ink: #30271f;
  --thd-muted: #74685e;
  --thd-arabic-size: 2.25rem;
  color: var(--thd-ink);
  max-width: 920px;
  margin: clamp(1rem, 4vw, 3rem) auto 4rem;
}

.thd-hero {
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1rem 2rem;
  background: radial-gradient(circle at top, #fff 0, var(--thd-soft) 78%);
  border: 1px solid var(--thd-border);
  border-radius: 1.5rem;
}

.thd-eyebrow {
  margin: 0 0 .4rem;
  color: var(--thd-accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.thd-hero h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.8rem); line-height: 1.05; }
.thd-subtitle { margin: .6rem 0 0; font: 2rem/1.5 "Technohealia Uthmanic Hafs", serif; direction: rtl; }
.thd-intro { margin: .8rem auto 0; max-width: 38rem; color: var(--thd-muted); }

.thd-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin: 1.25rem 0;
}

.thd-day {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .12rem;
  padding: .6rem .45rem;
  border: 1px solid var(--thd-border);
  border-radius: .85rem;
  background: #fff;
  color: inherit;
  font-size: .84rem;
  text-align: center;
  text-decoration: none;
}

.thd-day:hover, .thd-day:focus-visible { border-color: var(--thd-accent); color: var(--thd-accent); }
.thd-day.is-selected { border-color: var(--thd-accent); background: var(--thd-accent); color: #fff; }
.thd-day small { font-size: .65rem; font-weight: 700; text-transform: uppercase; }

.thd-toolbar {
  position: sticky;
  z-index: 5;
  top: .5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--thd-border);
  border-radius: 1rem;
  background: rgba(255,255,255,.94);
  box-shadow: 0 .5rem 2rem rgba(48,39,31,.08);
  backdrop-filter: blur(12px);
}

.thd-switch { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; cursor: pointer; }
.thd-switch input { accent-color: var(--thd-accent); }
.thd-font-controls { display: flex; gap: .35rem; margin-left: auto; }
.thd-font-controls button {
  min-width: 2.6rem;
  padding: .35rem .5rem;
  border: 1px solid var(--thd-border);
  border-radius: .55rem;
  background: var(--thd-soft);
  color: var(--thd-ink);
  font-weight: 700;
  cursor: pointer;
}

.thd-day-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.thd-day-heading p { margin: 0 0 .2rem; color: var(--thd-muted); font: 1.15rem/1.5 "Technohealia Uthmanic Hafs", serif; direction: rtl; text-align: left; }
.thd-day-heading h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.thd-day-heading > span { color: var(--thd-muted); font-size: .8rem; white-space: nowrap; }
.thd-sections { display: grid; gap: 1rem; }

.thd-section {
  position: relative;
  padding: clamp(1.1rem, 4vw, 2rem);
  border: 1px solid var(--thd-border);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 .35rem 1.3rem rgba(48,39,31,.045);
}

.thd-number {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--thd-soft);
  color: var(--thd-muted);
  font-size: .72rem;
}

.thd-arabic {
  margin: .15rem 0 1.2rem;
  color: #17110c;
  font-family: "Technohealia Uthmanic Hafs", "Noto Naskh Arabic", serif;
  font-size: var(--thd-arabic-size);
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "liga" 1, "rlig" 1, "calt" 1;
  line-height: 2;
  text-align: right;
  text-rendering: optimizeLegibility;
}

.thd-translation { margin: 0; padding-top: 1rem; border-top: 1px solid var(--thd-border); color: #50443a; line-height: 1.75; }
.thd-transcription { margin: 0 0 1rem; padding: .85rem 1rem; border-radius: .75rem; background: var(--thd-soft); color: #594a3d; }
.thd-transcription span { display: block; margin-bottom: .3rem; color: var(--thd-muted); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.thd-transcription p { margin: 0; line-height: 1.65; }
[hidden] { display: none !important; }

.thd-transcription-guide {
  margin: 0 0 1.5rem;
  border: 1px solid var(--thd-border);
  border-radius: 1rem;
  background: var(--thd-soft);
}

.thd-transcription-guide summary {
  position: relative;
  padding: .85rem 2.8rem .85rem 1rem;
  color: var(--thd-ink);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.thd-transcription-guide summary::-webkit-details-marker { display: none; }
.thd-transcription-guide summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--thd-accent);
  font-size: 1.25rem;
}
.thd-transcription-guide[open] summary::after { content: "−"; }
.thd-guide-body { padding: 0 1rem 1rem; }
.thd-guide-body > p { margin: 0 0 .8rem; color: var(--thd-muted); font-size: .86rem; line-height: 1.55; }
.thd-guide-table-wrap { overflow-x: auto; border: 1px solid var(--thd-border); border-radius: .8rem; background: #fff; }
.thd-guide-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .86rem; }
.thd-guide-table th,
.thd-guide-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--thd-border); text-align: left; vertical-align: middle; }
.thd-guide-table tr:last-child td { border-bottom: 0; }
.thd-guide-table th { background: rgba(146,112,74,.08); color: var(--thd-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.thd-guide-table td:first-child { width: 4rem; color: var(--thd-accent); font-size: 1.1rem; font-weight: 700; }
.thd-guide-table td:nth-child(2) { width: 7rem; font: 1.45rem/1.4 "Technohealia Uthmanic Hafs", serif; text-align: center; }

.thd-prev-next { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.thd-prev-next a { color: var(--thd-accent); font-weight: 700; text-decoration: none; }

@media (max-width: 700px) {
  .thd-page-main { width: min(100% - 1rem, 980px); }
  .thd-reader { margin-top: .5rem; }
  .thd-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thd-toolbar { top: .25rem; flex-wrap: wrap; gap: .55rem 1rem; }
  .thd-font-controls { margin-left: 0; }
  .thd-day-heading { align-items: start; flex-direction: column; gap: .25rem; }
  .thd-guide-table th, .thd-guide-table td { padding: .55rem .6rem; }
  .thd-arabic { line-height: 1.9; }
  .thd-prev-next { align-items: stretch; flex-direction: column; }
  .thd-prev-next a:last-child { text-align: right; }
}