/**
 * ShotPay brand palette for Material.
 *
 * Values are copied from frontend/src/styles/theme.css so the docs and the app
 * stay one brand. Material's own base tokens come from `scheme: default`; only
 * the primary and accent sets are replaced here.
 *
 * Contrast rule carried over from the app: brand red (#ff3c00) is 3.6:1 on white
 * and may only fill a shape. Red that sets text is #a92a03.
 */

:root {
    --shotpay-black: #090909;
    --shotpay-white: #fafafa;
    --shotpay-red: #ff3c00;

    --shotpay-neutral-50: #f5f5f5;
    --shotpay-neutral-100: #ececec;
    --shotpay-neutral-200: #dfdfdf;
    --shotpay-neutral-800: #656565;
    --shotpay-neutral-850: #484848;
    --shotpay-neutral-900: #2b2b2b;

    --shotpay-red-50: #faebe6;
    --shotpay-red-700: #a92a03;
    --shotpay-red-800: #902504;
}

[data-md-color-primary=custom] {
    --md-primary-fg-color: var(--shotpay-black);
    --md-primary-fg-color--light: var(--shotpay-neutral-900);
    --md-primary-fg-color--dark: #000000;
    --md-primary-bg-color: var(--shotpay-white);
    --md-primary-bg-color--light: #fafafab3;
}

[data-md-color-accent=custom] {
    --md-accent-fg-color: var(--shotpay-red-700);
    --md-accent-fg-color--transparent: #a92a031a;
    --md-accent-bg-color: var(--shotpay-white);
    --md-accent-bg-color--light: #fafafab3;
}

[data-md-color-scheme=default] {
    /* Defaults to the primary colour, which is now black — links would be
       indistinguishable from body text. */
    --md-typeset-a-color: var(--shotpay-red-700);

    --md-default-bg-color: var(--shotpay-white);
    --md-code-bg-color: var(--shotpay-neutral-50);
}

/* Material's default measure leaves the Swagger embed about 45rem to draw an
   operation table in. The reference drops its table of contents on top of this;
   the navigation stays, because a page that loses the sidebar reads as a
   different site. */
.md-grid {
    max-width: 66rem;
}

/* Headlines run Medium, matching the app's h1–h3 treatment. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    color: var(--shotpay-black);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Method names head every section on the SDK pages. Inline code carries a fill
   and horizontal padding, which insets a heading a few pixels from the prose
   beneath it — close enough to alignment to read as a mistake. Drop the chip
   and keep the monospace. */
.md-typeset h2 code,
.md-typeset h3 code {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
}

/* Fill-only uses of brand red, where contrast rules do not apply. */
.md-typeset .md-button--primary {
    background-color: var(--shotpay-red);
    border-color: var(--shotpay-red);
    color: var(--shotpay-black);
}

.md-typeset table:not([class]) th {
    background-color: var(--shotpay-black);
    color: var(--shotpay-white);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Field names lead every table in the API reference, and Material lets them
   break mid-token — `order_refer` above `ence`. Tables already scroll
   horizontally when they need the room. */
.md-typeset table:not([class]) td:first-child code {
    white-space: nowrap;
}

/* --- Admonitions --------------------------------------------------------
   Material ships these in its own palette — amber warnings, blue notes, green
   tips — which is the loudest off-brand thing left on a page. Repainted onto
   the three brand colours: neutral for an aside, red for a caution, black for
   a confirmation. */

.md-typeset .admonition,
.md-typeset details {
    border-width: 0 0 0 4px;
    border-radius: 2px;
    box-shadow: none;
    font-size: 0.75rem;
}

/* Material qualifies each flavour one class deeper than the block above —
   `.md-typeset .admonition.warning` for the rule, `.warning > .admonition-title`
   for the title wash and the icon — so the repaint has to match that shape or it
   loses the cascade and the amber stays. */

.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset details.note,
.md-typeset details.info,
.md-typeset details.abstract {
    background-color: var(--shotpay-neutral-50);
    border-color: var(--shotpay-neutral-850);
}

.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .abstract > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > summary,
.md-typeset .abstract > summary {
    background-color: transparent;
    color: var(--shotpay-neutral-850);
    font-weight: 500;
}

.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .abstract > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > summary::before,
.md-typeset .abstract > summary::before {
    background-color: var(--shotpay-neutral-850);
}

.md-typeset .note > summary::after,
.md-typeset .info > summary::after,
.md-typeset .abstract > summary::after {
    color: var(--shotpay-neutral-850);
}

.md-typeset .admonition.warning,
.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.caution,
.md-typeset details.warning,
.md-typeset details.danger,
.md-typeset details.failure,
.md-typeset details.caution {
    background-color: var(--shotpay-red-50);
    border-color: var(--shotpay-red);
}

.md-typeset .warning > .admonition-title,
.md-typeset .danger > .admonition-title,
.md-typeset .failure > .admonition-title,
.md-typeset .caution > .admonition-title,
.md-typeset .warning > summary,
.md-typeset .danger > summary,
.md-typeset .failure > summary,
.md-typeset .caution > summary {
    background-color: transparent;
    color: var(--shotpay-red-700);
    font-weight: 500;
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .danger > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .caution > .admonition-title::before,
.md-typeset .warning > summary::before,
.md-typeset .danger > summary::before,
.md-typeset .failure > summary::before,
.md-typeset .caution > summary::before {
    background-color: var(--shotpay-red-700);
}

.md-typeset .warning > summary::after,
.md-typeset .danger > summary::after,
.md-typeset .failure > summary::after,
.md-typeset .caution > summary::after {
    color: var(--shotpay-red-700);
}

.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset .admonition.example,
.md-typeset details.tip,
.md-typeset details.success,
.md-typeset details.example {
    background-color: var(--shotpay-neutral-50);
    border-color: var(--shotpay-black);
}

.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title,
.md-typeset .example > .admonition-title,
.md-typeset .tip > summary,
.md-typeset .success > summary,
.md-typeset .example > summary {
    background-color: transparent;
    color: var(--shotpay-black);
    font-weight: 500;
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .example > .admonition-title::before,
.md-typeset .tip > summary::before,
.md-typeset .success > summary::before,
.md-typeset .example > summary::before {
    background-color: var(--shotpay-black);
}

.md-typeset .tip > summary::after,
.md-typeset .success > summary::after,
.md-typeset .example > summary::after {
    color: var(--shotpay-black);
}

/* --- Grid cards ---------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
    border-color: var(--shotpay-neutral-200);
    border-radius: 2px;
    box-shadow: none;
    transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--shotpay-black);
    box-shadow: 0 1px 2px 0 rgb(9 9 9 / 0.06);
}

.md-typeset .grid.cards > ul > li > hr {
    display: none;
}

.md-typeset .grid.cards .twemoji {
    color: var(--shotpay-red-700);
    height: 1.4rem;
    width: 1.4rem;
}

/* --- Endpoint banner -----------------------------------------------------
   The method-and-path line that opens every API reference page. */

.md-typeset .shotpay-endpoint {
    align-items: center;
    background-color: var(--shotpay-neutral-50);
    border: 1px solid var(--shotpay-neutral-200);
    border-radius: 2px;
    display: flex;
    gap: 0.6em;
    margin: 0 0 1.2em;
    overflow-x: auto;
    padding: 0.6em 0.8em;
}

.md-typeset .shotpay-endpoint code {
    background-color: transparent;
    color: var(--shotpay-black);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0;
    white-space: nowrap;
}

/* Method colours stay conventional rather than brand. GET blue, POST green
   holds across Swagger, Redoc, Postman and Stripe, and a reference is scanned
   by that colour before the verb is read — the same call made for the Swagger
   chips these replace. Everything around them is brand. */
.md-typeset .shotpay-method {
    border-radius: 2px;
    color: #fafafa;
    flex: none;
    font-family: var(--md-code-font-family);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    min-width: 4.2em;
    padding: 0.3em 0.6em;
    text-align: center;
}

.md-typeset .shotpay-method--get {
    background-color: #3b7ddd;
}

.md-typeset .shotpay-method--post {
    background-color: #2f9e63;
}

/* Teal is the conventional PATCH, but Swagger's #50e3c2 sits at 1.5:1 against
   this chip's near-white text. Darkened to match the other two. */
.md-typeset .shotpay-method--patch {
    background-color: #1f9488;
}

/* --- Coming-soon badge --------------------------------------------------- */

.md-typeset .shotpay-badge {
    background-color: var(--shotpay-neutral-100);
    border-radius: 2px;
    color: var(--shotpay-neutral-850);
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.2em 0.6em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* --- Tabs and task lists ------------------------------------------------- */

.md-typeset .tabbed-labels > label {
    font-weight: 400;
}

.md-typeset .tabbed-set > input:checked + label {
    border-color: var(--shotpay-red);
    color: var(--shotpay-black);
    font-weight: 500;
}

.md-typeset .task-list-control .task-list-indicator::before {
    background-color: var(--shotpay-neutral-200);
}

.md-typeset .task-list-control [type=checkbox]:checked + .task-list-indicator::before {
    background-color: var(--shotpay-black);
}

/* --- Mermaid -------------------------------------------------------------
   Material derives every mermaid node from `--md-accent-fg-color`, which here
   means red text on a translucent red fill for each participant. A sequence
   diagram is structure rather than emphasis, so it is redrawn in the neutral
   ramp with black actors, leaving red for the numbering and the loop.

   Scoped to the diagram rather than `:root`: Material declares its own defaults
   on `:root > *`, so a plain `:root` block here is shadowed by the copy sitting
   on `body`. */

.md-typeset .mermaid {
    --md-mermaid-node-bg-color: var(--shotpay-neutral-50);
    --md-mermaid-node-fg-color: var(--shotpay-black);
    --md-mermaid-label-bg-color: var(--shotpay-white);
    --md-mermaid-label-fg-color: var(--shotpay-neutral-900);
    --md-mermaid-edge-color: var(--shotpay-neutral-850);
    --md-mermaid-sequence-actor-bg-color: var(--shotpay-black);
    --md-mermaid-sequence-actor-fg-color: var(--shotpay-white);
    --md-mermaid-sequence-actor-border-color: var(--shotpay-black);
    --md-mermaid-sequence-message-line-color: var(--shotpay-neutral-850);
    --md-mermaid-sequence-message-fg-color: var(--shotpay-neutral-900);
    --md-mermaid-sequence-note-bg-color: var(--shotpay-red-50);
    --md-mermaid-sequence-note-fg-color: var(--shotpay-black);
    --md-mermaid-sequence-note-border-color: var(--shotpay-red);
    --md-mermaid-sequence-label-bg-color: var(--shotpay-neutral-100);
    --md-mermaid-sequence-label-fg-color: var(--shotpay-neutral-900);
    --md-mermaid-sequence-loop-bg-color: var(--shotpay-white);
    --md-mermaid-sequence-loop-border-color: var(--shotpay-red);
    --md-mermaid-sequence-loop-fg-color: var(--shotpay-neutral-900);
}