/* ONPAD documentation.
 *
 * The shape follows what good documentation sites have settled on — a solid
 * coloured bar, an iconed sidebar, a centred search, a nested contents rail —
 * and every colour in it is ONPAD's own. The bar is the deep end of the brand
 * blue rather than the logo's bright #079fea, because white text on the bright
 * one does not reach a readable contrast.
 *
 * Tokens are copied from the app's onpad-theme.css rather than imported: the
 * docs ship to a different host and must not depend on the app being up.
 */

:root {
    --ink: #0f1b24;
    --muted: #56646f;
    --faint: #8794a0;
    --line: #e3e9ee;
    --rule: #eef2f5;
    --paper: #ffffff;
    --canvas: #f7f9fb;

    /* Brand */
    --bar: #0a6fab;
    --bar-dark: #085c8f;
    --blue: #079fea;
    --blue-deep: #0b6fa8;
    --blue-wash: #e9f5fe;
    --orange: #ff7900;
    --orange-wash: #fff5ea;
    --lime: #b9dc28;
    --green: #0e6b45;
    --green-hover: #0b5a3a;
    --red: #c6383c;

    --code: #0a1b28;
    --code-ink: #cfe4f2;

    --sans: Inter, -apple-system, "Segoe UI", sans-serif;
    --display: Manrope, Inter, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --shadow: 0 1px 2px rgba(11, 43, 38, .04), 0 12px 28px -14px rgba(11, 43, 38, .18);

    /* One column for the whole site. The header, the article and the landing
       page all use these, which is what makes the logo sit directly above the
       sidebar instead of out at the window's edge. */
    --shell-width: 1420px;
    --shell-gutter: 30px;
    --bar-height: 68px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 15.5px/1.68 var(--sans);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- header */

.doc-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bar);
    color: #fff;
}

/* Same width and same side padding as .doc-shell below, so the logo and the
   sidebar share a left edge and the button lines up with the contents rail. */
.doc-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--bar-height);
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 0 var(--shell-gutter);
}

.doc-brand { display: flex; align-items: center; gap: 13px; flex: none; }
.doc-brand:hover { text-decoration: none; }
.doc-brand img { display: block; width: auto; height: 33px; }

.doc-brand span {
    padding-left: 13px;
    border-left: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .72);
    font: 600 15px/1 var(--display);
}

.doc-header-nav { display: flex; align-items: center; gap: 20px; flex: none; }

.doc-header-nav a {
    color: rgba(255, 255, 255, .8);
    font-size: 14.5px;
    font-weight: 500;
}

.doc-header-nav a:hover { color: #fff; text-decoration: none; }

.doc-header-end { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }

.doc-cta {
    padding: 8px 16px;
    border-radius: 9px;
    background: #fff;
    color: var(--bar) !important;
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.doc-cta:hover { background: rgba(255, 255, 255, .9); text-decoration: none; }

/* The menu button only exists where the sidebar collapses. */
.doc-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: -4px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
}

.doc-nav-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.doc-nav-toggle:hover { background: rgba(255, 255, 255, .2); }

/* --------------------------------------------------------------- search */

.doc-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 480px;
    margin: 0 auto;
}

.doc-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    fill: none;
    stroke: rgba(255, 255, 255, .6);
    stroke-width: 1.9;
    stroke-linecap: round;
    pointer-events: none;
}

.doc-search input {
    width: 100%;
    height: 36px;
    padding: 0 68px 0 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: 14px;
}

.doc-search input::placeholder { color: rgba(255, 255, 255, .62); }
.doc-search input::-webkit-search-cancel-button { display: none; }

.doc-search input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .2);
}

.doc-search kbd {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 5px;
    color: rgba(255, 255, 255, .72);
    font: 600 10.5px/1.5 var(--sans);
    letter-spacing: .04em;
    transform: translateY(-50%);
    pointer-events: none;
}

.doc-search:focus-within kbd { display: none; }

.doc-search-results {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 18px 44px rgba(10, 27, 40, .22);
}

.doc-search-results[hidden] { display: none; }

.doc-search-results a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--ink);
}

.doc-search-results a:hover,
.doc-search-results a.active { background: var(--blue-wash); text-decoration: none; }
.doc-search-results strong { display: block; font: 600 14px/1.35 var(--sans); }
.doc-search-results small { display: block; color: var(--muted); font-size: 12.5px; }
.doc-search-empty { padding: 12px; margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------------------------------------------------------------- shell */

.doc-shell {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr) 212px;
    gap: 40px;
    max-width: var(--shell-width);
    margin: 0 auto;
    padding: 30px var(--shell-gutter) 80px;
    align-items: start;
}

/* ------------------------------------------------------------------ nav */

.doc-nav {
    position: sticky;
    top: calc(var(--bar-height) + 26px);
    max-height: calc(100vh - var(--bar-height) - 50px);
    overflow-y: auto;
    padding-right: 10px;
    font-size: 14.5px;
    scrollbar-width: thin;
}

.doc-nav::-webkit-scrollbar { width: 6px; }
.doc-nav::-webkit-scrollbar-thumb { border-radius: 3px; background: #dce3e9; }

.doc-nav-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 26px 0 8px;
    color: var(--ink);
    font: 700 15px/1.3 var(--display);
}

.doc-nav-title:first-child { margin-top: 0; }

.doc-nav-icon { display: block; width: 19px; height: 19px; flex: none; }
.doc-nav-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.doc-nav ul { margin: 0 0 4px; padding: 0 0 0 28px; list-style: none; }

.doc-nav a {
    display: block;
    padding: 5px 11px;
    margin-left: -11px;
    border-radius: 8px;
    color: var(--muted);
    line-height: 1.45;
}

.doc-nav a:hover { background: var(--canvas); color: var(--ink); text-decoration: none; }
.doc-nav a.active { background: var(--blue-wash); color: var(--blue-deep); font-weight: 650; }

/* -------------------------------------------------------------- article */

.doc-crumb { margin: 0 0 14px; color: var(--faint); font-size: 13px; }
.doc-crumb a { color: var(--muted); }
.doc-crumb span { margin: 0 6px; color: #c3ccd3; }

.doc-title { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 34px; }
.doc-title > div { min-width: 0; }

.doc-article h1 {
    margin: 0 0 12px;
    font: 800 40px/1.12 var(--display);
    letter-spacing: -.03em;
    text-wrap: balance;
}

.doc-lede { margin: 0; max-width: 60ch; color: var(--muted); font-size: 18.5px; line-height: 1.58; }

.doc-md {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-top: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.doc-md svg { width: 15px; height: 15px; fill: none; stroke: var(--blue-deep); stroke-width: 1.8; stroke-linejoin: round; }
.doc-md:hover { border-color: var(--blue); color: var(--blue-deep); text-decoration: none; }

.doc-article { max-width: 78ch; }
.doc-article p { margin: 0 0 17px; max-width: 70ch; }

.doc-article h2 {
    margin: 48px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    font: 700 25px/1.3 var(--display);
    letter-spacing: -.02em;
}

.doc-article h3 { margin: 30px 0 10px; font: 700 17.5px/1.4 var(--display); }
.doc-article h4 { margin: 22px 0 8px; font: 650 15.5px/1.4 var(--sans); }
.doc-article ul,
.doc-article ol { margin: 0 0 17px; padding-left: 22px; max-width: 68ch; }
.doc-article li { margin-bottom: 8px; }
.doc-article li::marker { color: var(--orange); }

.doc-article code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--blue-wash);
    color: #0a567f;
    font-family: var(--mono);
    font-size: 13px;
}

.doc-article blockquote {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-left: 4px solid var(--orange);
    border-radius: 0 11px 11px 0;
    background: var(--orange-wash);
    max-width: 70ch;
}

.doc-article blockquote p { margin: 0; color: #8a4e08; }
.doc-article hr { margin: 36px 0; border: 0; border-top: 1px solid var(--rule); }

/* ----------------------------------------------------------------- code */

.doc-code {
    position: relative;
    margin: 0 0 22px;
    border-radius: 11px;
    background: var(--code);
    overflow: hidden;
}

.doc-code:before {
    content: attr(data-language);
    position: absolute;
    top: 10px;
    left: 16px;
    color: rgba(207, 228, 242, .42);
    font: 600 10px/1 var(--sans);
    letter-spacing: .11em;
    text-transform: uppercase;
}

.doc-copy {
    position: absolute;
    top: 7px;
    right: 9px;
    padding: 4px 11px;
    border: 1px solid rgba(207, 228, 242, .22);
    border-radius: 7px;
    background: transparent;
    color: rgba(207, 228, 242, .8);
    font: 500 12px/1.5 var(--sans);
    cursor: pointer;
}

.doc-copy:hover { background: rgba(207, 228, 242, .13); color: #fff; }
.doc-code pre { margin: 0; padding: 34px 17px 17px; overflow-x: auto; }

.doc-code code {
    padding: 0;
    background: none;
    color: var(--code-ink);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.72;
}

/* ---------------------------------------------------------------- table */

.doc-table { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 14.3px; }

.doc-table th {
    padding: 11px 15px;
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font: 650 12px/1.4 var(--sans);
    letter-spacing: .03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.doc-table td { padding: 12px 15px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td code { white-space: nowrap; }

/* ------------------------------------------------------------------ toc */

.doc-toc { position: sticky; top: calc(var(--bar-height) + 26px); font-size: 13.4px; }

.doc-toc p {
    margin: 0 0 10px;
    color: var(--ink);
    font: 700 13.5px/1 var(--display);
}

.doc-toc ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.doc-toc li { margin: 0; }

.doc-toc a {
    display: block;
    padding: 5px 0 5px 13px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--muted);
}

.doc-toc a:hover { color: var(--ink); text-decoration: none; }
.doc-toc a.active { border-left-color: var(--blue); color: var(--blue-deep); font-weight: 650; }

/* ---------------------------------------------------------------- pager */

.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--rule); }

.doc-pager a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    transition: border-color .16s ease;
}

.doc-pager a:hover { border-color: var(--blue); text-decoration: none; }
.doc-pager small { color: var(--orange); font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.doc-pager strong { font: 650 14.8px/1.4 var(--sans); }
.doc-pager-next { text-align: right; }

/* ----------------------------------------------------------------- next */

.doc-next {
    margin-top: 26px;
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--canvas);
}

.doc-next h2 { margin: 0 0 9px; padding: 0; border: 0; font: 700 19px/1.3 var(--display); }
.doc-next p { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; }
.doc-next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.doc-button { padding: 9px 17px; border-radius: 9px; background: var(--green); color: #fff; font-size: 14px; font-weight: 650; }
.doc-button:hover { background: var(--green-hover); text-decoration: none; }
.doc-button.secondary { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.doc-button.secondary:hover { background: var(--canvas); }

.doc-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 30px; color: var(--faint); font-size: 13px; }
.doc-foot p { margin: 0; }
.doc-foot a { color: var(--muted); }

/* ----------------------------------------------------------------- home */

.doc-home { max-width: var(--shell-width); margin: 0 auto; padding: 54px var(--shell-gutter) 80px; }
.doc-home-intro { max-width: 820px; }
.doc-home-intro h1 { margin: 0 0 14px; font: 800 44px/1.1 var(--display); letter-spacing: -.032em; text-wrap: balance; }
.doc-home-intro > p:first-of-type { max-width: 62ch; font-size: 19px; color: var(--muted); line-height: 1.58; }
.doc-home-intro h2 { margin: 38px 0 10px; font: 700 21px/1.3 var(--display); }
.doc-home-intro p { max-width: 68ch; }

/* Three across, so six sections make two tidy rows rather than a full row and
   one card stranded on its own. */
.doc-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1060px;
    margin-top: 36px;
}

/* Below the cards: the shortcuts for people who know what they want, and the
   notes for developers and agents, which no shopkeeper needs to read. */
.doc-home-outro { max-width: 820px; margin-top: 52px; }
.doc-home-outro h2 { margin: 38px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); font: 700 20px/1.3 var(--display); }
.doc-home-outro h2:first-child { margin-top: 0; }
.doc-home-outro p { max-width: 68ch; }
.doc-home-outro ul { margin: 0 0 18px; padding: 0; list-style: none; }

/* Each shortcut is a row, not a bullet: the link is the thing to hit and the
   rest of the line says why you would. */
.doc-home-outro li {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
    font-size: 14.8px;
}

.doc-home-outro li a { font-weight: 650; font-size: 15.5px; }

.doc-home-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    color: var(--ink);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.doc-home-card:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: var(--shadow); text-decoration: none; }
.doc-home-card .doc-nav-icon { width: 24px; height: 24px; margin-bottom: 6px; }
.doc-home-card .doc-nav-icon svg { stroke-width: 1.6; }
.doc-home-card strong { font: 700 16.5px/1.3 var(--display); }
.doc-home-card small { color: var(--muted); font-size: 13.8px; line-height: 1.5; }
.doc-home-card span { margin-top: 6px; color: var(--orange); font-size: 12px; font-weight: 700; }

/* ---------------------------------------------------------------- small */

@media (max-width: 1180px) {
    .doc-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
    .doc-toc { display: none; }
}

@media (max-width: 900px) {
    .doc-header-nav { display: none; }
    .doc-home-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .doc-home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    :root { --bar-height: 60px; --shell-gutter: 16px; }
    .doc-header-inner { gap: 10px; }
    .doc-brand img { height: 26px; }
    .doc-nav-toggle { display: flex; }
    .doc-brand span { display: none; }
    .doc-search { max-width: none; margin: 0; }
    .doc-search input { padding-right: 14px; }
    .doc-search kbd { display: none; }
    .doc-cta { padding: 7px 12px; font-size: 13px; }

    .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px var(--shell-gutter) 48px; }

    /* The sidebar becomes a drawer rather than a block of links the reader has
       to scroll past before reaching the page they opened. */
    .doc-nav {
        position: fixed;
        top: var(--bar-height);
        left: 0;
        bottom: 0;
        z-index: 45;
        width: min(300px, 86vw);
        max-height: none;
        padding: 20px 18px 30px;
        border-right: 1px solid var(--line);
        background: var(--paper);
        box-shadow: 0 20px 50px rgba(10, 27, 40, .2);
        transform: translateX(-102%);
        transition: transform .22s ease;
    }

    .doc-nav.open { transform: translateX(0); }
    .doc-nav-scrim { position: fixed; inset: var(--bar-height) 0 0 0; z-index: 44; background: rgba(10, 27, 40, .34); }
    .doc-nav-scrim[hidden] { display: none; }

    .doc-title { flex-direction: column; gap: 14px; margin-bottom: 26px; }
    .doc-md { margin-top: 0; }
    .doc-article h1 { font-size: 29px; }
    .doc-lede { font-size: 17px; }
    .doc-article h2 { margin-top: 36px; font-size: 21px; }
    .doc-pager { grid-template-columns: 1fr; }
    .doc-pager-next { text-align: left; }
    .doc-next { padding: 20px; }
    .doc-home { padding: 32px var(--shell-gutter) 50px; }
    .doc-home-intro h1 { font-size: 31px; }
    .doc-home-intro > p:first-of-type { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .doc-nav,
    .doc-home-card,
    .doc-pager a { transition: none; }
}

/* ----------------------------------------------------------------- skip */

.doc-skip {
    position: absolute;
    left: 14px;
    top: 10px;
    z-index: 60;
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--paper);
    color: var(--bar) !important;
    font-size: 14px;
    font-weight: 650;
    transform: translateY(-160%);
    transition: transform .15s ease;
}

.doc-skip:focus { transform: translateY(0); outline: 2px solid var(--bar); outline-offset: 2px; text-decoration: none; }
.doc-main:focus { outline: none; }

/* A visible focus ring everywhere, since the whole site is keyboard-navigable
   by design — long sidebar, skip link, search shortcut. */
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.doc-header a:focus-visible,
.doc-nav-toggle:focus-visible { outline-color: #fff; }