/* Rendered markdown for Playbook pages. Self-contained (the app has no Tailwind
   Typography plugin), so this restores block styling that preflight strips. */
.playbook-content { color: #374151; line-height: 1.65; font-size: 0.925rem; }
.playbook-content > :first-child { margin-top: 0; }
.playbook-content > :last-child { margin-bottom: 0; }

.playbook-content h1,
.playbook-content h2,
.playbook-content h3,
.playbook-content h4 { font-weight: 600; color: #111827; line-height: 1.3; margin: 1.4em 0 0.5em; }
.playbook-content h1 { font-size: 1.5rem; }
.playbook-content h2 { font-size: 1.25rem; padding-bottom: 0.2em; border-bottom: 1px solid #f3f4f6; }
.playbook-content h3 { font-size: 1.1rem; }
.playbook-content h4 { font-size: 1rem; }

.playbook-content p { margin: 0.7em 0; }
.playbook-content a { color: #c2410c; text-decoration: underline; text-underline-offset: 2px; }
.playbook-content a:hover { color: #9a3412; }
.playbook-content strong { font-weight: 600; color: #111827; }
.playbook-content em { font-style: italic; }

.playbook-content ul,
.playbook-content ol { margin: 0.7em 0; padding-left: 1.4em; }
.playbook-content ul { list-style: disc; }
.playbook-content ol { list-style: decimal; }
.playbook-content li { margin: 0.3em 0; }
.playbook-content li > ul,
.playbook-content li > ol { margin: 0.3em 0; }

.playbook-content blockquote {
  margin: 0.9em 0; padding: 0.2em 1em; border-left: 3px solid #fdba74;
  color: #6b7280; background: #fff7ed;
}

.playbook-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em;
  background: #f3f4f6; padding: 0.15em 0.35em; border-radius: 4px; color: #be123c;
}
.playbook-content pre {
  background: #1f2937; color: #f9fafb; padding: 1em; border-radius: 8px;
  overflow-x: auto; margin: 0.9em 0;
}
.playbook-content pre code { background: transparent; color: inherit; padding: 0; }

.playbook-content table {
  width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.875rem;
  display: block; overflow-x: auto;
}
.playbook-content th,
.playbook-content td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; vertical-align: top; }
.playbook-content th { background: #f9fafb; font-weight: 600; color: #111827; }
.playbook-content tr:nth-child(even) td { background: #fafafa; }

.playbook-content hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
.playbook-content img { max-width: 100%; height: auto; border-radius: 8px; }
.playbook-content .text-red-600 { color: #dc2626; }

/* Ask Arabisk chat fills the page height (plain CSS so it works without a Tailwind rebuild) */
.playbook-chat-shell { height: calc(100vh - 11rem); min-height: 28rem; }

/* "Arabisk is thinking…" animated ellipsis */
.assistant-dots::after { content: ""; animation: assistant-dots 1.4s infinite steps(1, end); }
@keyframes assistant-dots {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; }
}