/* Default view: plain flowing text. Highlight is opt-in per answer (.answer.show-hl). */
.answer .seg { margin: 0 0 .6em; }
/* Qur'an card: an illuminated frame (double gold border, corner marks, ornament, reference cartouche). */
.answer .seg-quran { position: relative; text-align: center; margin-block: .8em 1.2em; padding: 14px 22px 12px;
  background: var(--quran-bg); border: 1px solid var(--quran-border); border-radius: 14px;
  box-shadow: inset 0 0 0 4px var(--quran-bg), inset 0 0 0 5px var(--quran-border);
  animation: quran-in .5s ease-out both; }
.answer .seg-quran::before, .answer .seg-quran::after { content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--quran-border); pointer-events: none; }
.answer .seg-quran::before { inset-block-start: 9px; inset-inline-start: 9px; border-width: 2px 0 0 2px; border-start-start-radius: 6px; }
.answer .seg-quran::after { inset-block-end: 9px; inset-inline-end: 9px; border-width: 0 2px 2px 0; border-end-end-radius: 6px; }
.answer .seg-quran .orn { display: block; color: var(--quran-border); line-height: 1; }
.answer .seg-quran .orn svg { width: 90px; height: 24px; }
/* DigitalKhatt's own space is 0.1em wide, so words run together: widen the gap here, not in the font. */
.answer .seg-quran .ayah { display: block; font-family: var(--font-ayah); font-size: 1.9rem; line-height: 2.3; word-spacing: .3em; }
.answer .seg-quran .ref { display: inline-block; margin-block-start: 2px; padding: 0 16px; font-size: .8rem; line-height: 1.7;
  color: var(--gold); border: 1px solid var(--quran-border); border-radius: 999px; }
@keyframes quran-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .answer .seg-quran { animation: none; } }
.answer .tafsir-line { margin: 0 0 .1em; font-size: .78rem; line-height: 1.7; color: var(--muted); }
.answer .tafsir-line + .seg-quote { margin-top: 0; }
.answer .seg .run-in { color: var(--amber); font-size: .85em; font-weight: 600; margin-inline-end: .35em; }
.answer .seg .t { white-space: pre-wrap; overflow-wrap: anywhere; }
.answer .src-link { font-size: .8rem; color: var(--gold); margin-inline-start: .6em; text-decoration: underline; }
.answer .based { display: block; font-size: .8rem; color: var(--muted); line-height: 1.8; }
.answer .based button { color: var(--gold); text-decoration: underline; margin-inline-start: .4em; }

.answer.show-hl .seg .t { -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 4px; padding: 0 2px; }
.answer.show-hl .seg-quran .t { background: var(--hl-quran); }
.answer.show-hl .seg-quote .t { background: var(--hl-quote); }
.answer.show-hl .seg-generated .t { background: var(--hl-gen); }
.answer.show-hl .seg-speculative .t { background: var(--hl-spec); }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .78rem; color: var(--muted); margin-block-start: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .l-quran { background: var(--hl-quran); }
.legend .l-quote { background: var(--hl-quote); }
.legend .l-gen { background: var(--hl-gen); }
.legend .l-spec { background: var(--hl-spec); }

/* drawer reading view */
.drawer .passage { white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer .passage mark { background: var(--hl-quote); color: inherit; border-radius: 4px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.drawer .cites .t { background: var(--hl-gen); border-radius: 4px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }