/* In-app help section (Features/Help + Components/Shared/{HelpBrowser,MarkdownView}).
   Palette values come from the --mud-palette-* vars so the help surfaces track the
   active MudBlazor theme (see ThemeDefinitions.cs / app.css). */

/* Layout sizing for the MudStack/MudList-based HelpBrowser (the components carry the
   look; these rules only size the rail vs. content panes and handle scrolling). */
.help-browser {
    min-height: 60vh;
}

.help-browser__nav {
    flex: 0 0 240px;
    overflow-y: auto;
    padding: 4px;
}

.help-browser__content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 28px;
    overflow-y: auto;
}

/* In a HelpButton dialog the rail is narrower and the height bounded. */
.help-dialog .help-browser {
    min-height: 40vh;
    max-height: 65vh;
}

.help-dialog .help-browser__nav {
    flex: 0 0 180px;
}

/* Rendered markdown body. The 70ch measure is a READING width and belongs on the text
   blocks, not on the container — a 16:9 screenshot squeezed into a text column renders as
   a thumbnail. So the body is wide and each text block caps itself, which lets the images
   use the whole pane while the prose stays comfortable to read. */
.markdown-body {
    color: var(--mud-palette-text-primary);
    line-height: 1.6;
    max-width: 1100px;
}

.markdown-body > p,
.markdown-body > ul,
.markdown-body > ol,
.markdown-body > blockquote,
.markdown-body > table,
.markdown-body > h1,
.markdown-body > h2,
.markdown-body > h3 {
    max-width: 70ch;
}

/* Markdig wraps a lone image line in its own <p>, which the rule above would cap at the
   reading width — exempt those so a screenshot spans the pane. */
.markdown-body > p:has(> img) {
    max-width: none;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    margin: 1.4em 0 .5em;
    line-height: 1.25;
}

.markdown-body h1 { font-size: 1.6rem; }
.markdown-body h2 { font-size: 1.3rem; }
.markdown-body h3 { font-size: 1.1rem; }

.markdown-body p { margin: .7em 0; }

.markdown-body ul,
.markdown-body ol { margin: .6em 0; padding-left: 1.5em; }

.markdown-body li { margin: .25em 0; }

.markdown-body a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.markdown-body a:hover { text-decoration: underline; }

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    margin: 1em 0;
    display: block;
}

.markdown-body code {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    padding: .1em .35em;
    font-size: .9em;
}

.markdown-body pre {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
}

.markdown-body pre code {
    background: transparent;
    border: 0;
    padding: 0;
}

.markdown-body blockquote {
    margin: 1em 0;
    padding: .4em 1em;
    border-left: 3px solid var(--mud-palette-primary);
    color: var(--mud-palette-text-secondary);
}

.markdown-body table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--mud-palette-divider);
    padding: 6px 10px;
    text-align: left;
}

/* ── MarkdownDialog ────────────────────────────────────────────────
   The shared markdown-in-a-dialog viewer: release notes, What's new and contextual help.
   The section header (chip + date) is rendered by the component; everything below it is
   Markdig output, so the rest of these rules only tidy what it emits — screenshots above
   all, which are full-page captures and need to sit at content width rather than at their
   natural 2880px.

   Scroll pane: a release history spans several versions, so the body scrolls rather than
   growing the dialog past the viewport. */
.markdown-dialog {
    max-height: 60vh;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.markdown-dialog .markdown-body > :first-child {
    margin-top: 0;
}

.markdown-dialog__section + .markdown-dialog__section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.markdown-dialog__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.markdown-dialog__meta {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.markdown-dialog img {
    display: block;
    /* Height-capped rather than width-stretched, which is what keeps a release note from
       being swallowed by its own screenshot. A wide element crop (one card, ~4.5:1) still
       spans the full width; a whole-page 16:9 capture scales DOWN to ~640px instead of
       eating the entire dialog and pushing the next release off-screen. Prefer a crop —
       see docs/whats-new-policy.md — this cap is the safety net, not the plan. */
    max-height: 360px;
    width: auto;
    max-width: 100%;
    margin: .85rem 0 1.1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

.markdown-dialog ul {
    margin: 0;
    padding-left: 1.15rem;
}

.markdown-dialog li {
    margin-bottom: .45rem;
    line-height: 1.55;
}

.markdown-dialog li:last-child { margin-bottom: 0; }

/* A release that is only "Maintenance release — …" reads as a caption, not a point. */
.markdown-dialog__section > p:only-child {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

/* Stack the rail above content on narrow screens. */
@media (max-width: 720px) {
    .help-browser { flex-direction: column; }
    .help-browser__nav {
        flex-basis: auto;
        border-right: 0;
        border-bottom: 1px solid var(--mud-palette-divider);
    }
}