/* Rich-text description — readonly prose + Quill Snow chrome overrides.
   Kept separate from app.css so both files stay ≤200 lines. */

/* Readonly HTML (no Tailwind Typography plugin on CDN). */
.desc-content {
  /* Long content scrolls inside the card instead of extending it off-screen.
     Horizontal clipping prevents long URLs / code from escaping the card. */
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
.desc-content :where(h1, h2, h3) { font-weight: 600; margin: 0.4em 0 0.3em; }
.desc-content h1 { font-size: 1.25rem; }
.desc-content h2 { font-size: 1.1rem; }
.desc-content h3 { font-size: 1rem; }
.desc-content p { margin: 0 0 0.5em; unicode-bidi: plaintext; }

/* Quill 2 serialises BOTH ordered and bulleted lists as <ol>, distinguished
   per-<li> via a data-list attribute. list-style on <ol>/<ul> alone would
   render bullets as numbers. Render markers manually via ::before instead.
   `direction: rtl` on an rtl list-item naturally flips the ::before to the
   right-hand side. */
.desc-content ul, .desc-content ol {
  list-style: none;
  padding-inline-start: 1.5em;
  margin: 0 0 0.5em;
  counter-reset: desc-li;
}
.desc-content li { margin: 0.1em 0; unicode-bidi: plaintext; }
.desc-content ul > li:not([data-list])::before { content: '• '; opacity: 0.85; }
.desc-content li[data-list="bullet"]::before { content: '• '; opacity: 0.85; }
.desc-content li[data-list="ordered"] { counter-increment: desc-li; }
.desc-content li[data-list="ordered"]::before {
  content: counter(desc-li) '. ';
  opacity: 0.85;
}
.desc-content blockquote {
  border-inline-start: 3px solid color-mix(in oklch, var(--color-primary) 50%, transparent);
  padding-inline-start: 0.75em;
  margin: 0 0 0.5em;
  opacity: 0.85;
}
.desc-content a { color: var(--color-primary); text-decoration: underline; }

/* Explicit direction — only flip reading order, NOT text-align. Quill stores
   alignment as a separate `.ql-align-*` class; forcing text-align: right here
   used to beat those classes and lock the paragraph to right-align only. */
.desc-content :where(p, h1, h2, h3, li, blockquote)[dir="rtl"],
.desc-content :where(p, h1, h2, h3, li, blockquote).ql-direction-rtl {
  direction: rtl; unicode-bidi: isolate;
}
.desc-content :where(p, h1, h2, h3, li, blockquote)[dir="ltr"] {
  direction: ltr; unicode-bidi: isolate;
}

/* Quill's own alignment classes, mirrored into the readonly view so the
   text-align= choice the user made in the editor renders on save. */
.desc-content .ql-align-center { text-align: center; }
.desc-content .ql-align-right  { text-align: right; }
.desc-content .ql-align-justify { text-align: justify; }

/* Quill Snow chrome — match DaisyUI border + primary tint. */
.ql-toolbar.ql-snow {
  border-color: color-mix(in oklch, var(--color-primary) 35%, var(--color-base-300));
  border-start-start-radius: 0.5rem;
  border-start-end-radius: 0.5rem;
  background: var(--color-base-100);
}
.ql-container.ql-snow {
  border-color: color-mix(in oklch, var(--color-primary) 35%, var(--color-base-300));
  border-end-start-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
  font: inherit;
}
.ql-editor { min-height: inherit; overflow-wrap: anywhere; }

/* Auto-detect direction per block for mixed AR/EN content. Explicit direction
   classes override this so Quill's RTL toggle still works — without locking
   text-align, so .ql-align-center / .ql-align-justify still win. */
.ql-editor :where(p, h1, h2, h3, li, blockquote) { unicode-bidi: plaintext; }
.ql-editor :where(p, h1, h2, h3, li, blockquote).ql-direction-rtl {
  direction: rtl; unicode-bidi: isolate;
}