/* Central rich-content stylesheet (prefix: mw-content / mw-color / mw-strong).

   THE one place that decides how rich content (wiki pages, info sections, and — later — any shared
   WYSIWYG output) looks. A `.mw-content` wrapper supplies the typography; authors only reach for blocks
   (headings, lists, bold, "bold colored") and never pixel values.

   Variable-driven: every typographic value is a `var(--mw-content-*, <default>)`. The defaults below
   make it work with zero configuration; the tenant "Content styling" settings (Phase 3) inject a
   `:root { --mw-content-*: … }` block at runtime to override them, so tuning is global and instant.

   Colors are NOT typography settings — they come from the MudBlazor theme palette (`--mud-palette-*`)
   and so are automatically theme- and dark-mode-correct. Semantic theme coloring of inline text is
   expressed with the `.mw-color-*` utilities and the `.mw-strong` ("bold colored") class.

   Consumers:
   - the wiki renderer (`MWWikiBlockRenderer` wraps its output in `.mw-content`);
   - ExtraInfo (account render + config preview, now on `.mw-content`);
   - any future shared editor, whose toolbar maps onto these same elements/classes. */

.mw-content {
    font-size: var(--mw-content-body-size, 1.125rem);
    line-height: var(--mw-content-line-height, 1.7);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Headings — themed (the legacy VolunteerInfo colored its headings with the primary color) and scaled
   off the body size so a single body-size slider moves the whole hierarchy proportionally. */
.mw-content h1,
.mw-content h2,
.mw-content h3,
.mw-content h4,
.mw-content h5,
.mw-content h6 {
    color: var(--mw-content-heading-color, var(--mud-palette-primary));
    font-weight: var(--mw-content-heading-weight, 600);
    margin-top: var(--mw-content-heading-spacing, 1rem);
    margin-bottom: 0.25rem;
}

.mw-content h1 {
    font-size: calc(var(--mw-content-body-size, 1.125rem) * var(--mw-content-h1-scale, 2));
}

.mw-content h2 {
    font-size: calc(var(--mw-content-body-size, 1.125rem) * var(--mw-content-h2-scale, 1.5));
}

.mw-content h3 {
    font-size: calc(var(--mw-content-body-size, 1.125rem) * var(--mw-content-h3-scale, 1.25));
}

.mw-content p {
    margin-top: 0;
    margin-bottom: var(--mw-content-paragraph-spacing, 0.75rem);
}

.mw-content ul,
.mw-content ol {
    margin-top: 0;
    margin-bottom: var(--mw-content-paragraph-spacing, 0.75rem);
    padding-left: var(--mw-content-list-indent, 1.5rem);
}

.mw-content li {
    margin-bottom: var(--mw-content-list-spacing, 0.25rem);
}

.mw-content a {
    color: var(--mw-content-link-color, var(--mud-palette-primary));
    text-decoration: underline;
}

/* Block types carried over from the wiki renderer so they live in the central sheet too. */
.mw-content blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding: 0.5em 1.1em;
    margin: 1em 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    border-radius: 0 6px 6px 0;
    color: var(--mud-palette-text-secondary);
}

.mw-content blockquote p:last-child {
    margin-bottom: 0;
}

.mw-content pre {
    background: var(--mud-palette-background-gray);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 0.75em;
}

.mw-content pre code {
    background: none;
    padding: 0;
}

.mw-content code {
    background: var(--mud-palette-background-gray);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

.mw-content hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.5em 0;
}

.mw-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Figures — the renderer wraps an image in <figure class="mw-figure …"> when it has layout attributes
   (align / radius / frame / caption). left/right float with text wrap (the classic wiki thumbnail),
   center is a no-wrap block, full spans the article. The width (px from free resize, % from presets)
   sits on the figure; the img fills it. */
.mw-content .mw-figure {
    margin: 0.5rem 0;
    max-width: 100%;
}

.mw-content .mw-figure img {
    width: 100%;
    display: block;
}

.mw-content .mw-figure--left {
    float: left;
    max-width: 50%;
    margin: 0.25rem 1.5rem 0.75rem 0;
}

.mw-content .mw-figure--right {
    float: right;
    max-width: 50%;
    margin: 0.25rem 0 0.75rem 1.5rem;
}

.mw-content .mw-figure--center {
    margin-left: auto;
    margin-right: auto;
}

.mw-content .mw-figure--full {
    width: 100% !important;
    max-width: 100%;
}

.mw-content .mw-figure--frame {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    padding: 6px;
    border-radius: 6px;
}

.mw-content .mw-figure--radius-rounded img {
    border-radius: 12px;
}

.mw-content .mw-figure--radius-circle img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

.mw-content .mw-figure figcaption {
    font-size: 0.85em;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    padding: 0.35em 0.25em 0;
    line-height: 1.4;
}

/* Floated figures never squeeze the next section: headings and table wrappers clear them. */
.mw-content h1,
.mw-content h2,
.mw-content h3,
.mw-content h4,
.mw-content h5,
.mw-content h6,
.mw-content .mw-table-wrap {
    clear: both;
}

/* Small screens: floats collapse to centered blocks so text never runs in a squeezed column. */
@media (max-width: 640px) {
    .mw-content .mw-figure--left,
    .mw-content .mw-figure--right {
        float: none;
        max-width: 100%;
        margin: 0.5rem auto;
    }
}

/* Editor parity (WYSIWYG) — inside the editor the image sits in the resize node view's container
   (div[data-node='image'], display:flex), which carries the data-image-* layout attrs (synced by
   syncImageNodeViewDom in mw-text-editor.js). The container is the element that participates in block
   layout, so floats and widths go on it; the inner img fills it. An inline px width from free resize
   (on the img) wins over the percent presets. Captions render fully only on the published page. */
.mw-content div[data-node='image'][data-image-align='left'] {
    float: left;
    max-width: 50%;
    margin: 0.25rem 1.5rem 0.75rem 0;
}

.mw-content div[data-node='image'][data-image-align='right'] {
    float: right;
    max-width: 50%;
    margin: 0.25rem 0 0.75rem 1.5rem;
}

.mw-content div[data-node='image'][data-image-align='center'] {
    justify-content: center;
}

.mw-content div[data-node='image'][data-image-align='full'] {
    width: 100%;
}

.mw-content div[data-node='image'][data-image-align='full'] [data-resize-wrapper] {
    width: 100%;
}

.mw-content div[data-node='image'][data-image-size='25']  { width: 25%; }
.mw-content div[data-node='image'][data-image-size='33']  { width: 33%; }
.mw-content div[data-node='image'][data-image-size='50']  { width: 50%; }
.mw-content div[data-node='image'][data-image-size='75']  { width: 75%; }
.mw-content div[data-node='image'][data-image-size='100'] { width: 100%; }

.mw-content div[data-node='image'][data-image-size] [data-resize-wrapper] {
    width: 100%;
}

.mw-content div[data-node='image'][data-image-size] img,
.mw-content div[data-node='image'][data-image-align='full'] img {
    width: 100%;
    height: auto;
}

.mw-content div[data-node='image'][data-image-radius='rounded'] img {
    border-radius: 12px;
}

.mw-content div[data-node='image'][data-image-radius='circle'] img {
    border-radius: 50%;
    aspect-ratio: 1;
    object-fit: cover;
}

.mw-content div[data-node='image'][data-image-frame='true'] [data-resize-wrapper] {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    padding: 6px;
    border-radius: 6px;
}

.mw-content mark {
    background-color: #fff3bf;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

/* Tables — full-width by default with a themed header and bordered cells; the wrapper allows a wide
   table to scroll horizontally instead of overflowing the article. `mw-table--auto` shrinks to content
   (used by centered/right-aligned tables); `--center` / `--right` position an auto-width table. */
.mw-content .mw-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
}

.mw-content table.mw-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95em;
}

.mw-content table.mw-table.mw-table--auto {
    width: auto;
}

.mw-content table.mw-table.mw-table--center {
    margin-left: auto;
    margin-right: auto;
}

.mw-content table.mw-table.mw-table--right {
    margin-left: auto;
    margin-right: 0;
}

.mw-content .mw-table th,
.mw-content .mw-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4em 0.7em;
    text-align: left;
    vertical-align: top;
}

.mw-content .mw-table th {
    background: var(--mud-palette-background-gray);
    font-weight: 600;
}

/* Internal wiki links — dashed underline that fills in on hover. */
.mw-content .mw-wiki-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--mud-palette-primary);
    transition: border-bottom-style 0.15s;
}

.mw-content .mw-wiki-link:hover {
    border-bottom-style: solid;
}

/* Red-link — an internal link whose target page doesn't exist yet (Wikipedia's red links). */
.mw-content .mw-wiki-link--missing {
    color: var(--mud-palette-error);
    border-bottom-color: var(--mud-palette-error);
}

/* Editor template placeholder (`{{ Property }}`) shown as a chip while authoring. */
.mw-content .template-placeholder {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Heading affordances — a hover-revealed ¶ permalink and (opt-in) section-edit pencil, emitted by the
   wiki renderer after the heading text. scroll-margin keeps anchor jumps clear of the app bar. */
.mw-content h1,
.mw-content h2,
.mw-content h3,
.mw-content h4,
.mw-content h5,
.mw-content h6 {
    scroll-margin-top: 80px;
}

.mw-content .mw-heading-anchor,
.mw-content .mw-heading-edit {
    opacity: 0;
    margin-left: 0.4em;
    font-size: 0.7em;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    transition: opacity 0.15s, color 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

.mw-content :is(h1, h2, h3, h4, h5, h6):hover .mw-heading-anchor,
.mw-content :is(h1, h2, h3, h4, h5, h6):hover .mw-heading-edit {
    opacity: 0.75;
}

.mw-content .mw-heading-anchor:hover,
.mw-content .mw-heading-edit:hover {
    opacity: 1;
    color: var(--mud-palette-primary);
}

/* Callouts / admonitions — themed boxed blocks (info | note | tip | success | warning | error). Each
   kind sets --mw-callout-color (a palette var, so dark-mode-correct) and an icon glyph. flow-root
   contains floated images inside the box. */
.mw-content .mw-callout {
    display: flow-root;
    position: relative;
    margin: 1rem 0;
    padding: 0.75em 1em 0.75em 2.7em;
    border-left: 4px solid var(--mw-callout-color, var(--mud-palette-info));
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--mw-callout-color, var(--mud-palette-info)) 8%, transparent);
}

.mw-content .mw-callout::before {
    content: var(--mw-callout-icon, 'ℹ️');
    position: absolute;
    left: 0.8em;
    top: 0.75em;
    font-size: 1em;
    line-height: var(--mw-content-line-height, 1.7);
}

.mw-content .mw-callout > p:last-child,
.mw-content .mw-callout > ul:last-child,
.mw-content .mw-callout > ol:last-child {
    margin-bottom: 0;
}

.mw-content .mw-callout--info    { --mw-callout-color: var(--mud-palette-info);      --mw-callout-icon: 'ℹ️'; }
.mw-content .mw-callout--note    { --mw-callout-color: var(--mud-palette-secondary); --mw-callout-icon: '📝'; }
.mw-content .mw-callout--tip     { --mw-callout-color: var(--mud-palette-tertiary);  --mw-callout-icon: '💡'; }
.mw-content .mw-callout--success { --mw-callout-color: var(--mud-palette-success);   --mw-callout-icon: '✅'; }
.mw-content .mw-callout--warning { --mw-callout-color: var(--mud-palette-warning);   --mw-callout-icon: '⚠️'; }
.mw-content .mw-callout--error   { --mw-callout-color: var(--mud-palette-error);     --mw-callout-icon: '⛔'; }

/* Collapsible sections — the renderer emits a native <details class="mw-collapsible"><summary>; the
   editor renders the same classes on an always-open <div> (native details would toggle shut while
   editing), so these rules are element-agnostic. */
.mw-content .mw-collapsible {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    margin: 1rem 0;
    overflow: hidden;
}

.mw-content .mw-collapsible-summary {
    cursor: pointer;
    padding: 0.5em 1em;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
    list-style-position: inside;
}

.mw-content details.mw-collapsible[open] > .mw-collapsible-summary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-content .mw-collapsible-content {
    padding: 0.75em 1em;
}

.mw-content .mw-collapsible-content > p:last-child {
    margin-bottom: 0;
}

/* Editor variant — the div-based collapsible is always open while editing; mark the summary with a
   chevron so authors recognize it will collapse for readers. */
.mw-content div.mw-collapsible > .mw-collapsible-summary::before {
    content: '▾ ';
    color: var(--mud-palette-text-secondary);
}

.mw-content div.mw-collapsible > .mw-collapsible-summary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: text;
}

/* Task lists — the first selector block styles the renderer's output (.mw-task-list), the
   [data-type="taskList"] twins style TipTap's editor DOM (li > label > input, div). */
.mw-content ul.mw-task-list,
.mw-content ul[data-type='taskList'] {
    list-style: none;
    padding-left: 0.25rem;
}

.mw-content .mw-task-item,
.mw-content ul[data-type='taskList'] > li {
    display: flex;
    gap: 0.55em;
    align-items: baseline;
}

.mw-content .mw-task-item input[type='checkbox'],
.mw-content ul[data-type='taskList'] input[type='checkbox'] {
    accent-color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.mw-content .mw-task-item-body,
.mw-content ul[data-type='taskList'] > li > div {
    flex: 1;
    min-width: 0;
}

.mw-content .mw-task-item-body > p,
.mw-content ul[data-type='taskList'] > li > div > p {
    margin-bottom: 0.25rem;
}

.mw-content .mw-task-item--checked .mw-task-item-body,
.mw-content ul[data-type='taskList'] > li[data-checked='true'] > div {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

/* Footnotes — [n] superscript references plus the generated references list at the article end. The
   .mw-footnote-chip is the editor's placeholder chip ([*], click to edit). */
.mw-content sub,
.mw-content sup {
    line-height: 1;
}

.mw-content .mw-footnote-ref a {
    text-decoration: none;
    font-weight: 600;
}

.mw-content .mw-footnote-chip {
    color: var(--mud-palette-primary);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.mw-content .mw-footnotes {
    margin-top: 2.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 0.75rem;
    font-size: 0.9em;
}

.mw-content .mw-footnotes-title {
    font-weight: 600;
    color: var(--mw-content-heading-color, var(--mud-palette-primary));
    margin-bottom: 0.4rem;
}

.mw-content .mw-footnotes ol {
    padding-left: 1.75rem;
    margin-bottom: 0;
}

.mw-content .mw-footnotes li {
    scroll-margin-top: 80px;
}

.mw-content .mw-footnote-back {
    text-decoration: none;
    margin-right: 0.3em;
}

/* Indentation block — HTML equivalent of a `<div style="margin-left:1rem">` section wrapper.
   `.mw-ei-indent` is the legacy ExtraInfo alias, kept so content authored before the unification
   still indents. */
.mw-content .mw-content-indent,
.mw-content .mw-ei-indent {
    margin-left: 1rem;
}

/* Semantic theme-color utilities — colored inline text whose color is the theme's, picked by name in
   the editor (never a hex value), so it tracks the palette and dark mode automatically. */
.mw-color-primary {
    color: var(--mud-palette-primary);
}

.mw-color-secondary {
    color: var(--mud-palette-secondary);
}

.mw-color-tertiary {
    color: var(--mud-palette-tertiary);
}

.mw-color-info {
    color: var(--mud-palette-info);
}

.mw-color-success {
    color: var(--mud-palette-success);
}

.mw-color-warning {
    color: var(--mud-palette-warning);
}

.mw-color-error {
    color: var(--mud-palette-error);
}

/* Colored bold — the HTML/CSS twin of the <MWStrong> component (MudText Color="Primary" + <strong>),
   i.e. the "bold colored" block. Defined unscoped so it works anywhere rich content is rendered,
   including plain previews. This is the central definition; other content sheets must not redefine it. */
.mw-strong {
    color: var(--mud-palette-primary);
    font-weight: 700;
}