/* Trix editor, themed to match the app's inputs */
trix-editor.trix-content {
    min-height: 10rem;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #0f172a;
    box-shadow: inset 0 0 0 1px #cbd5e1;
}

trix-editor.trix-content:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-brand-600, #7c3aed);
}

trix-toolbar .trix-button-row {
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    background: #f8fafc;
}

trix-toolbar .trix-button {
    color: #334155;
}

trix-toolbar + trix-editor.trix-content {
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Read-only rendering of Trix-authored HTML (lesson content, page bodies, etc.) */
.rich-text h1 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
}

.rich-text p {
    margin-bottom: 0.85rem;
    line-height: 1.7;
}

.rich-text ul,
.rich-text ol {
    margin: 0.75rem 0 0.85rem 1.5rem;
}

.rich-text ul {
    list-style: disc;
}

.rich-text ol {
    list-style: decimal;
}

.rich-text li {
    margin-bottom: 0.25rem;
}

.rich-text a {
    color: #7c3aed;
    text-decoration: underline;
}

.rich-text blockquote {
    margin: 0.85rem 0;
    border-left: 3px solid #e2e8f0;
    padding-left: 1rem;
    color: #64748b;
    font-style: italic;
}

.rich-text pre {
    margin: 0.85rem 0;
    overflow-x: auto;
    border-radius: 0.5rem;
    background: #f1f5f9;
    padding: 0.75rem;
    font-size: 0.8125rem;
}

.rich-text strong {
    font-weight: 600;
}

.rich-text figure {
    margin: 1.5rem 0;
}

.rich-text img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

.rich-text figcaption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}

/* ---------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */

/* <details> used as dropdowns/accordions: hide the default marker */
details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] > summary .details-chevron {
    transform: rotate(180deg);
}

.scrollbar-none {
    scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* Soft dotted texture for hero sections */
.bg-dots {
    background-image: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
}

.bg-dots-dark {
    background-image: radial-gradient(rgb(15 23 42 / 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Hide content until Tailwind's browser build has generated styles, so pages
   don't flash unstyled. The script adds .tw-ready as soon as it has run. */
html:not(.tw-ready) body {
    visibility: hidden;
}

/* Keyboard focus: always visible on links, disclosure toggles and focusable
 * containers, in the workspace's brand colour. Mouse clicks don't show it. */
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-brand-600, #7c3aed);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The skip-link target shouldn't show a ring when focused programmatically. */
main[tabindex='-1']:focus {
    outline: none;
}