/* 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.
 *
 * #10982d is KASM's accent: server/frontend/src/index.css overrides the library's
 * `--ruic-primary` with it (16 152 45), and the favicon and logo use the same
 * green. Keeping the two in sync is the point; if that override changes, this
 * value follows it.
 */
:root,
[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #10982d;
    --md-primary-fg-color--light: #0ed82a;
    --md-primary-fg-color--dark:  #087a21; /* --ruic-primary-hover */
    --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. Links are
 * blue instead, so a link in the text does not read as part of the green
 * header chrome, and the two shades keep their contrast on both backgrounds.
 */
:root {
    --md-typeset-a-color: #0277bd;
}

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

/* Screenshots, generated by `npm run screenshots` (scripts/screenshots.mjs).
 *
 * 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 both switch on the #gh-light-mode-only / #gh-dark-mode-only
 * 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 and the sign-in form are one narrow card each.
 * Stretched to the full column they read as a blown-up phone screenshot.
 */
.md-typeset img[src*="screenshots/agent-"],
.md-typeset img[src*="screenshots/login-"] {
    width: auto;
    max-width: min(100%, 460px);
    display: block;
    margin-inline: auto;
}