/* Colours are named once here and again under prefers-color-scheme, so a page that reads well in
   daylight reads well at night without a switch to click or a script to run. */
:root {
    --docs-header-height: 56px;
    --docs-measure: 44rem;          /* about 70 characters at 16px */

    --docs-bg: #ffffff;
    --docs-bg-soft: #f7f8f9;
    --docs-bg-code: #f4f5f7;
    --docs-text: #31363c;
    --docs-heading: #16191d;
    --docs-muted: #6b7280;
    --docs-border: #e5e7eb;
    --docs-border-soft: #eef0f2;

    /* The brand red, and a darker one for anything a reader has to read. #dc3545 on white is
       3.9:1, which is under the 4.5:1 body text needs. */
    --docs-red: #dc3545;
    --docs-link: #b3202f;
    --docs-accent-soft: #fdf0f1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --docs-bg: #0f1216;
        --docs-bg-soft: #161a20;
        --docs-bg-code: #171b21;
        --docs-text: #c6cbd2;
        --docs-heading: #f0f2f5;
        --docs-muted: #8b939e;
        --docs-border: #262c34;
        --docs-border-soft: #1e232a;
        --docs-link: #ff8a94;
        --docs-accent-soft: #23161a;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--docs-text);
    background: var(--docs-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--docs-link);
    text-decoration-color: color-mix(in srgb, var(--docs-link) 35%, transparent);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-color: currentColor;
}

/* Only things a reader can operate get a focus ring. Blazor moves focus to the heading after it
   swaps a page in, so anything broader draws a box around every page title. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--docs-link);
    outline-offset: 2px;
    border-radius: 3px;
}

.docs-article :focus {
    outline: none;
}

.docs-article a:focus-visible {
    outline: 2px solid var(--docs-link);
    outline-offset: 2px;
}

.docs-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The logo is dark lettering on nothing, so the bar is white and red stays the accent —
   on the links, the active page and the buttons. */
.docs-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 28px;
    min-height: var(--docs-header-height);
    background: color-mix(in srgb, var(--docs-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--docs-border);
}

.docs-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    flex: none;
}

.docs-brand img {
    display: block;
    height: 30px;
    width: auto;
}

.docs-brand-word {
    color: var(--docs-muted);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.docs-header-links {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: auto;
}

.docs-header-links a {
    color: var(--docs-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.docs-header-links a:hover {
    color: var(--docs-red);
}

.docs-search {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 400px;
    margin-left: auto;
}

.docs-search-input {
    flex: 1;
    padding: 7px 13px;
    border: 1px solid var(--docs-border);
    border-radius: 8px;
    background: var(--docs-bg-soft);
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.docs-search-input::placeholder {
    color: var(--docs-muted);
}

.docs-search-input:focus {
    background: var(--docs-bg);
    border-color: color-mix(in srgb, var(--docs-red) 50%, var(--docs-border));
}

.docs-search-button {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: var(--docs-red);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
}

.docs-search-button:hover {
    background: color-mix(in srgb, var(--docs-red) 85%, #000);
}

.docs-body {
    display: flex;
    flex: 1;
    align-items: flex-start;
}

/* The menu follows the reader down the page. --docs-header-height is what the header occupies,
   so both sidebars start below it rather than under it. */
.docs-nav {
    order: -1;
    position: sticky;
    top: var(--docs-header-height);
    align-self: flex-start;
    width: 272px;
    flex: none;
    max-height: calc(100vh - var(--docs-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--docs-border);
    padding: 28px 14px 48px;
    scrollbar-width: thin;
}

.docs-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-nav-list li {
    margin: 4px 0;
}

.docs-nav-list a {
    display: block;
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--docs-muted);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.45;
}

.docs-nav-list a:hover {
    background: var(--docs-bg-soft);
    color: var(--docs-heading);
}

/* The page being read is marked by weight and a rule down its edge. A filled red block shouts
   over the forty entries around it and is the first thing the eye lands on. */
.docs-nav-list a.active {
    color: var(--docs-link);
    background: var(--docs-accent-soft);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--docs-red);
}

.docs-nav-empty {
    color: var(--docs-muted);
    font-size: 13px;
}

.docs-main {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding: 40px 48px 72px;
}

/* Centred, so a wide screen does not leave the words pinned to the left with the contents list
   stranded half a screen away from them. */
.docs-page {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
}

.docs-article {
    flex: 1;
    min-width: 0;
}

.docs-search-pending {
    color: var(--docs-muted);
}

.docs-search-excerpt {
    margin: 2px 0 12px 0;
    color: var(--docs-muted);
    font-size: 13px;
}

/* The header wraps to two rows here, so --docs-header-height no longer says where the page starts
   and a sidebar pinned to it sits behind the header. Neither one follows the reader below this. */
@media (max-width: 1100px) {
    .docs-main {
        padding: 32px 28px 64px;
    }

    .docs-page {
        gap: 32px;
    }
}

@media (max-width: 900px) {
    .docs-header {
        flex-wrap: wrap;
        gap: 10px 20px;
        padding: 10px 20px;
    }

    .docs-header-links {
        flex-wrap: wrap;
        gap: 8px 18px;
        min-width: 0;
    }

    .docs-search {
        max-width: none;
        margin-left: 0;
        order: 3;
        flex-basis: 100%;
    }

    .docs-nav {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* ── The menu as a drawer, on a phone ── */
.docs-menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--docs-border);
    border-radius: 8px;
    background: var(--docs-bg-soft);
    color: var(--docs-heading);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    /* What a thumb has to hit. */
    min-height: 44px;
}

.docs-menu-bars,
.docs-menu-bars::before,
.docs-menu-bars::after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

.docs-menu-bars {
    position: relative;
}

.docs-menu-bars::before,
.docs-menu-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.docs-menu-bars::before {
    top: -5px;
}

.docs-menu-bars::after {
    top: 5px;
}

.docs-nav-backdrop {
    display: none;
}

@media (max-width: 720px) {
    /* .docs-header-links carried the margin that pushed this to the end of the bar, and it is
       hidden at this width, so the button claims the space itself. */
    .docs-menu-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .docs-nav-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 8;
        background: rgb(0 0 0 / 45%);
    }

    /* Off the side until it is asked for, and over the page rather than pushing it down. */
    .docs-menu-ready .docs-nav {
        position: fixed;
        z-index: 9;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(310px, 86vw);
        /* Top and bottom alone left the drawer as tall as its own list, so a menu longer than the
           screen had nothing to scroll: the overflow was the page's, and the page is held still
           while the drawer is open. The height is stated instead, in dvh so it follows the address
           bar sliding away rather than sitting under it. */
        height: 100dvh;
        max-height: none;
        overflow-y: auto;
        background: var(--docs-bg);
        border-right: 1px solid var(--docs-border);
        border-top: none;
        transform: translateX(-100%);
        transition: transform 0.18s ease-out;
        padding: 20px;
    }

    .docs-menu-ready.docs-menu-open .docs-nav {
        transform: translateX(0);
        box-shadow: 0 0 40px rgb(0 0 0 / 18%);
    }

    .docs-menu-open {
        overflow: hidden;
    }
}

/* Held still while the drawer is put back off the side after a page swap. Outside the width query
   as well, because the class is added before the drawer rules are known to apply. */
.docs-menu-still .docs-nav {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .docs-menu-ready .docs-nav {
        transition: none;
    }
}

@media (max-width: 720px) {
    .docs-body {
        flex-direction: column;
    }

    /* Four rows of header before a reader reaches the title. These two are in the footer as
       well, so the phone keeps the logo and the search box. */
    .docs-header-links {
        display: none;
    }

    /* The menu is the whole screen at this width, so it folds away and the page starts with the
       words. Opening it is the browser's own disclosure, which needs no script. */
    /* Below the page, in the order it is written. A phone opens on the words. */
    .docs-nav {
        order: 0;
        width: auto;
        border-right: none;
        border-top: 1px solid var(--docs-border);
        padding: 20px;
    }

    .docs-main {
        padding: 24px 20px 56px;
    }

    .docs-article h1 {
        font-size: 1.75rem;
    }

    .docs-article h2 {
        font-size: 1.25rem;
    }

    /* The title, then the words. A contents list ahead of the heading it belongs to is preamble
       on a screen this size, and the page is short enough to scroll. */
    .docs-contents {
        display: none;
    }

    /* A wide screenshot or a wide table is the one thing that can push the page sideways. */
    .docs-article pre,
    .docs-article table {
        max-width: 100%;
    }
}

/* ── Menu tree ── */
.docs-nav-list .docs-nav-list {
    margin-left: 12px;
    border-left: 1px solid var(--docs-border);
    padding-left: 6px;
}

/* A section opens and shuts with no script, which it has to: the menu is rendered statically. */
.docs-nav-summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    border-radius: 4px;
}

.docs-nav-summary::-webkit-details-marker {
    display: none;
}

.docs-nav-summary > a,
.docs-nav-summary > span {
    flex: 1;
}

.docs-nav > .docs-nav-list > li > .docs-nav-section > .docs-nav-summary > a,
.docs-nav > .docs-nav-list > li > .docs-nav-section > .docs-nav-summary > span,
.docs-nav > .docs-nav-list > li > a {
    color: var(--docs-heading);
    font-weight: 550;
    font-size: 14px;
}

.docs-nav-summary::after {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 10px 0 4px;
    border-right: 1.5px solid var(--docs-muted);
    border-bottom: 1.5px solid var(--docs-muted);
    transform: rotate(-45deg);
}

.docs-nav-section[open] > .docs-nav-summary::after {
    transform: rotate(45deg);
}

.docs-nav-summary:hover {
    background: var(--docs-bg-soft);
}

.docs-nav-summary:hover > a,
.docs-nav-summary:hover > span {
    background: none;
}

/* A section with no page of its own reads the same as one that has a page. The difference is
   whether it can be clicked, and that is not a difference worth shouting in capitals. */
.docs-nav-heading {
    display: block;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--docs-text);
}

/* ── Page ── */
.docs-article {
    line-height: 1.7;
}

/* Screenshots, tables and code blocks keep the full column, so a wide picture is not squeezed
   down to the width of a sentence. */
.docs-article > p:not(:has(> img)),
.docs-article > ul,
.docs-article > ol,
.docs-article > blockquote,
.docs-article > h1,
.docs-article > h2,
.docs-article > h3,
.docs-article > h4,
.docs-article > h5,
.docs-article > h6 {
    max-width: var(--docs-measure);
}

.docs-article p {
    margin: 0 0 1em;
}

.docs-article h1,
.docs-article h2,
.docs-article h3,
.docs-article h4,
.docs-article h5,
.docs-article h6 {
    color: var(--docs-heading);
    font-weight: 650;
    letter-spacing: -0.014em;
    line-height: 1.25;
    /* More room above than below, so a heading belongs to what follows it rather than floating
       between two sections. Below is still wide enough not to crowd the first line under it. */
    margin: 2em 0 0.75em;
    scroll-margin-top: calc(var(--docs-header-height) + 24px);
}

.docs-article h1 {
    margin: 0 0 0.65em;
    font-size: 2.125rem;
    letter-spacing: -0.024em;
}

.docs-article h2 {
    font-size: 1.4rem;
    padding-top: 0.6em;
    border-top: 1px solid var(--docs-border-soft);
}

.docs-article h3 {
    font-size: 1.125rem;
}

.docs-article h4,
.docs-article h5,
.docs-article h6 {
    font-size: 1rem;
}

/* The indent is what makes a wrapped line start under the words rather than under the marker, so
   an item that runs to three lines still reads as one thing. */
.docs-article ul,
.docs-article ol {
    margin: 0 0 1.25em;
    padding-left: 1.75em;
}

.docs-article li {
    margin: 0;
    padding-left: 0.2em;
}

/* The space goes between items, not inside them. Most of these steps run to two or three lines,
   and with the same gap either side they run together into a block of text.
   One value whichever shape the markdown used: whether an item is wrapped in a paragraph depends
   on whether the author left a blank line, which is nothing a reader should be able to see. */
.docs-article li + li {
    margin-top: 0.9em;
}

.docs-article li::marker {
    color: var(--docs-muted);
    font-variant-numeric: tabular-nums;
}

.docs-article ol > li::marker {
    font-weight: 600;
}

/* Markdown gives an item its own paragraph when the list has blank lines between items, and none
   when it does not. Clearing that paragraph's margin is what makes both shapes read the same. */
.docs-article li > p {
    margin: 0;
}

.docs-article li > p + p {
    margin-top: 0.6em;
}

.docs-article li > ul,
.docs-article li > ol {
    margin: 0.7em 0 0;
}

/* Screenshots came from three places at three sizes. Each one sits in the same frame, so the page
   reads as one column of pictures rather than a ragged edge. A picture narrower than the frame is
   centred in it rather than stretched, because seven of the imported wiki shots are small crops
   and blowing those up to full width only blurs them. */
/* The frame holds its height before the picture inside it arrives. Without this the page grows
   as each of a walkthrough's forty screenshots lands, and the words the reader is on move. */
.docs-article p:has(> img) {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid var(--docs-border-soft);
    border-radius: 10px;
    background: var(--docs-bg-soft);
    text-align: center;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A screen shot of the app is shown in one frame wherever it appears, because they were not all
   taken at one window height: brand setup alone carries 1080, 1079, 953, 911 and 910, so a column
   of them stepped in and out as the reader scrolled. The frame is 16:9 and the picture sits inside
   it, which mats the short ones rather than resizing the page around them.

   Which pictures those are is decided by the picture, not by the page it is on — docs-images.js
   measures each one. A crop of a dialog or a 420x140 ESP logo keeps its own size, because one
   shape for those as well would strand them in an empty box. */
.docs-article p.docs-shot {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.docs-article p.docs-shot > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── A checklist ──
   Markdown writes a box and the list still draws its bullet, so every line had both. The bullet
   goes and the box stays, because the box is the one a reader can tick. */
.docs-article ul:has(> .task-list-item) {
    padding-left: 0;
}

.docs-article .task-list-item {
    position: relative;
    padding-left: 1.7em;
    list-style: none;
}

/* The box sits in that space, out of the flow on purpose. Laying the item out as a flex row made
   every <strong> inside the sentence its own column, so "Click Forms Tab" came out as three, and
   put a nested checklist beside the words instead of under them. */
.docs-article .task-list-item input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.34em;
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    accent-color: var(--docs-red);
}

/* A nested checklist steps in from the words above it, not from the edge of the page. */
.docs-article .task-list-item > ul:has(> .task-list-item) {
    padding-left: 0.5em;
    margin-top: 0.6em;
}

.docs-article .task-list-item input[type="checkbox"]:not([disabled]) {
    cursor: pointer;
}

/* Done, and out of the way of what is left to do. */
.docs-article .task-list-item:has(input:checked) {
    color: var(--docs-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.docs-article img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: 6px;
}

/* Long lines wrap rather than run off the side. A block holding one unbroken address, such as the
   webhook URL on the send integration pages, sets the narrowest the column can be, and on a phone
   that pushed the whole page sideways — the words, the headings and all. Scrolling the block does
   not help, because the width is settled before anything can be scrolled.

   pre-wrap so newlines and indenting are still the author's, and anywhere so a word with nothing
   to break on, which is what an address is, breaks anyway. */
.docs-article pre {
    background: var(--docs-bg-code);
    border: 1px solid var(--docs-border-soft);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.6;
}

.docs-article code {
    background: var(--docs-bg-code);
    color: var(--docs-heading);
    padding: 0.12em 0.36em;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    /* An address written inline runs off the side for the same reason a block one does. */
    overflow-wrap: anywhere;
}

.docs-article pre code {
    background: none;
    padding: 0;
}

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

.docs-article th,
.docs-article td {
    border: 0;
    border-bottom: 1px solid var(--docs-border-soft);
    padding: 10px 14px 10px 0;
    text-align: left;
    vertical-align: top;
}

.docs-article th {
    color: var(--docs-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-color: var(--docs-border);
}

/* A table of five columns wants about 410px, and asking for it pushed the whole page sideways on
   a phone — the words and the headings with it. The columns share the screen evenly instead and
   the text inside them wraps. Only at this width: on a desktop a column still takes what it
   needs, so "No" stays narrow and a sentence gets the room. */
@media (max-width: 720px) {
    .docs-article table {
        table-layout: fixed;
        width: 100%;
    }

    .docs-article th,
    .docs-article td {
        padding-right: 10px;
        overflow-wrap: break-word;
    }
}

/* ── On this page ── */
.docs-contents {
    position: sticky;
    top: calc(var(--docs-header-height) + 24px);
    flex: none;
    width: 220px;
    max-height: calc(100vh - var(--docs-header-height) - 48px);
    overflow-y: auto;
    padding: 2px 0 2px 16px;
    border-left: 1px solid var(--docs-border);
    font-size: 13px;
}

.docs-contents-title {
    margin: 0 0 6px 0;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--docs-muted);
}

.docs-contents ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-contents li {
    margin: 0;
}

.docs-contents a {
    display: block;
    padding: 4px 0;
    color: var(--docs-muted);
    text-decoration: none;
}

.docs-contents a:hover {
    color: var(--docs-link);
}

.docs-contents-h3 {
    padding-left: 12px;
}

@media (max-width: 1100px) {
    .docs-page {
        flex-direction: column-reverse;
    }

    .docs-contents {
        position: static;
        width: auto;
        max-height: none;
        align-self: stretch;
        padding: 0 0 0 14px;
    }
}

/* ── Footer ── */
.docs-footer {
    border-top: 1px solid var(--docs-border);
    background: var(--docs-bg);
    padding: 40px 32px 24px 32px;
}

.docs-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    max-width: 1100px;
}

.docs-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-footer-column li {
    margin: 0 0 10px 0;
}

.docs-footer-column a {
    color: var(--docs-text);
    text-decoration: none;
    font-size: 14px;
}

.docs-footer-column a:hover {
    color: var(--docs-red);
}

.docs-footer-title {
    margin: 0 0 14px 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--docs-muted);
}

.docs-footer-talk {
    max-width: 320px;
}

.docs-footer-talk p {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.docs-footer-heading {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.docs-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: 1100px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--docs-border);
}

.docs-footer-legal nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.docs-footer-legal a {
    color: var(--docs-muted);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.docs-footer-legal a:hover {
    color: var(--docs-red);
}

.docs-footer-legal p {
    margin: 0;
    color: var(--docs-muted);
    font-size: 12px;
}