/* Header colour of the published site.
 *
 * Material only accepts its own palette names for `primary`, so a brand colour
 * has to go in as `primary: custom` plus these variables -- there is no way to
 * write the hex value in mkdocs.yml itself.
 *
 * #e54d0d is the accent of @stefgo/react-ui-components (`--ruic-primary`), the
 * colour the application's own primary buttons use. Keeping the two in sync is
 * the point; if the library's token changes, this value follows it.
 */
:root,
[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #e54d0d;
    --md-primary-fg-color--light: #ff5f1f; /* --ruic-primary-hover */
    --md-primary-fg-color--dark:  #b83c0a;
    --md-primary-bg-color:        #ffffff;
    --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Material derives the body link colour from the primary colour, so making the
 * header orange would repaint every link in the text as well. The request was
 * the header; links stay teal, which is also the safer contrast on both
 * backgrounds.
 */
:root {
    --md-typeset-a-color: #009688;
}

[data-md-color-scheme="slate"] {
    --md-typeset-a-color: #4db6ac;
}

/* Screenshots, generated by `npm run screenshots` (scripts/screenshots/).
 *
 * Captured at 2x, so the intrinsic pixel width is double what is drawn --
 * `width: 100%` is what makes the browser scale them back down instead of
 * rendering them twice as wide.
 *
 * The border is not decoration: several of these pages are almost white in
 * light mode and almost black in dark mode, so without it the screenshot
 * bleeds into the page background and loses its edges.
 */
.md-typeset img[src*="screenshots/"] {
    width: 100%;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
}

/* Captions come in two shapes, because the pages do.
 *
 * index.md is the site root, so a relative path resolves the same for MkDocs
 * and for GitHub: it can use a real <figure>/<figcaption> around the light/dark
 * pair, which Material switches on the #only-light / #only-dark markers in the
 * src. Any deeper page would have that raw src broken by MkDocs' directory
 * URLs, so those use Markdown images -- and a Markdown caption is a separate
 * italic paragraph after the image's own paragraph, hence the `:has()` rule.
 */
.md-typeset figure figcaption,
.md-typeset p:has(> img[src*="screenshots/"]) + p > em {
    display: block;
    max-width: 42rem;
    margin: 0.3rem auto 1.2rem;
    font-size: 0.72rem;
    line-height: 1.5;
    font-style: normal;
    color: var(--md-default-fg-color--light);
}

/* The agent's two pages are one narrow card captured on a 640px canvas.
 * Stretched to the full column they read as a blown-up phone screenshot.
 */
.md-typeset img[src*="screenshots/agent-"] {
    width: auto;
    max-width: min(100%, 460px);
    display: block;
    margin-inline: auto;
}