/* ============================================================
   DOCS — the documentation shell.

   Three columns on a wide screen: the section list, the page, and the
   list of what is on it. The page itself is set for reading: a measure
   of about seventy characters, the site's own type and colours, code in
   an ink panel. Everything is scoped to .docs so it borrows the V8 skin
   without changing it.
   ============================================================ */

/* --- the section tabs, under the site header ---------------------------- */
.docs-tabs {
    position: sticky; top: 68px; z-index: 40;
    background: color-mix(in srgb, var(--cream) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.docs-tabs-in {
    display: flex; gap: 6px;
    /* 51px tall and pulled 1px over the bar's border, so the active tab's
       underline covers that line without the tabs overflowing the row */
    height: 51px; margin-bottom: -1px;
    /* on a narrow screen the row becomes a slider: it scrolls sideways, snaps
       to the tabs, and fades at the right edge while there is more to see
       (js/docs.js sets is-overflowing and is-at-end). overflow-y stays hidden
       so the row can only be dragged left and right, never up and down */
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.docs-tabs-in::-webkit-scrollbar { display: none; }
.docs-tabs-in > a { scroll-snap-align: start; }
.docs-tabs-in.is-overflowing:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.docs-tabs a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 14px;
    font-size: 0.9375rem; font-weight: 700; color: var(--body); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.docs-tabs a svg { width: 17px; height: 17px; flex: none; }
.docs-tabs a:hover { color: var(--ink); }
.docs-tabs a.is-on { color: var(--ink); border-bottom-color: var(--brand-magenta); }

.docs { padding: 36px 0 96px; }
.docs-grid {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 200px;
    gap: 56px;
    align-items: start;
}

/* --- the section list ------------------------------------------------------ */
.docs-side { position: sticky; top: 142px; max-height: calc(100vh - 160px); overflow: auto; }
.docs-side-toggle { display: none; }
.docs-side-group { margin-bottom: 22px; }
.docs-side-h {
    margin: 0 0 6px 12px;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted);
}
.docs-side a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 10px;
    font-size: 0.9375rem; font-weight: 600; color: var(--body); text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
}
.docs-side a:hover { background: var(--soft); color: var(--ink); }
.docs-side a.is-on { background: var(--pink-wash); color: var(--pink-deep); }
.docs-side a .ext { width: 15px; height: 15px; margin-left: auto; color: var(--muted); flex: none; }
.docs-side-help { padding-top: 16px; border-top: 1px solid var(--line); }

/* --- the page --------------------------------------------------------------- */
.docs-main { min-width: 0; max-width: 720px; }
.docs-eyebrow {
    margin: 0 0 12px;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pink-deep);
}
.docs-main h1 {
    font-size: 2.75rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.025em;
    color: var(--ink); text-wrap: balance;
}
.docs-lede { margin-top: 14px; font-size: 1.125rem; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.docs-body { margin-top: 32px; }
.docs-body h2 {
    margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--line);
    font-size: 1.5rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.018em; color: var(--ink);
    scroll-margin-top: 150px;
}
.docs-body > h2:first-child, .docs-body > p:first-child + h2 { border-top: 0; padding-top: 0; }
.docs-body h3 { margin: 26px 0 8px; font-size: 1.125rem; font-weight: 700; color: var(--ink); scroll-margin-top: 150px; }
.docs-body p { margin: 0 0 14px; line-height: 1.65; }
.docs-body ul, .docs-body ol { margin: 0 0 16px; padding-left: 22px; }
.docs-body li { margin-bottom: 7px; line-height: 1.6; }
.docs-body li b, .docs-body p b { font-weight: 700; color: var(--ink); }
.docs-body a { color: var(--brand-blue); text-decoration: none; border-bottom: 1px solid rgba(76, 107, 238, 0.35); }
.docs-body a:hover { border-bottom-color: var(--brand-blue); }
.docs-body a .ext { width: 15px; height: 15px; margin-left: 3px; vertical-align: -3px; }
.docs-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em; padding: 2px 6px; border-radius: 5px;
    background: #F1EFF5; color: var(--ink);
}
.docs-body em { font-style: italic; color: var(--ink); }

/* numbered steps, the way the how it works section counts */
.docs-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 18px; }
.docs-steps > li { position: relative; padding-left: 46px; margin-bottom: 18px; }
.docs-steps > li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink); color: #fff;
    font-size: 0.8125rem; font-weight: 800;
}

/* --- code --------------------------------------------------------------------- */
.dc-code {
    margin: 14px 0 22px; border-radius: 14px; overflow: hidden;
    background: #16121A; color: #F3EEF2;
    box-shadow: 0 18px 36px -28px rgba(22, 18, 26, 0.6);
}
.dc-code-bar {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 8px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dc-tab, .dc-lang {
    padding: 8px 12px; border: 0; background: none;
    font-size: 0.8125rem; font-weight: 700; color: rgba(255, 255, 255, 0.55);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dc-tab { cursor: pointer; }
.dc-tab:hover { color: #fff; }
.dc-tab.is-on { color: #fff; border-bottom-color: var(--brand-magenta); }
.dc-copy {
    position: relative; margin-left: auto; margin-bottom: 6px;
    padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem; font-weight: 700;
}
.dc-copy:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.dc-copy-d { display: none; color: #B7F0C6; }
.dc-copy.is-copied .dc-copy-t { display: none; }
.dc-copy.is-copied .dc-copy-d { display: inline; }
.dc-code pre {
    margin: 0; padding: 16px 18px; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem; line-height: 1.65; font-weight: 500;
}
.dc-code pre[hidden] { display: none; }
.dc-code--wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* a marker highlight for the one sentence a reader must not miss: the same
   pink wash and magenta the active sidebar link uses, so it reads as brand,
   not as a link (links are blue) */
.dc-hl { font-weight: 700; color: var(--pink-deep); background: var(--pink-wash); padding: 1px 5px; margin: 0 -1px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* a placeholder inside an app path, e.g. Workflows → Your workflow → Settings */
.dc-ph { display: inline-block; padding: 0 5px; border: 1px dashed var(--muted); border-radius: 6px; color: var(--muted); font-size: 0.9em; line-height: 1.35; white-space: nowrap; }
.dc-code code { font: inherit; padding: 0; background: none; color: inherit; }

/* --- callouts, cards, tables ------------------------------------------------- */
.dc-note {
    display: flex; gap: 12px; margin: 18px 0 22px;
    padding: 14px 16px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand-blue);
    font-size: 0.9375rem; line-height: 1.55;
}
.dc-note--warn { border-left-color: var(--brand-orange); }
/* the info card: the site's own surfaces rather than a blue tint. A white
   card with a hairline, the icon in a soft magenta disc, and, when it
   carries a picture of the app, the picture in a cream well (.dc-shot). */
.dc-note--tint {
    align-items: flex-start; gap: 14px;
    padding: 18px 20px; border-radius: 16px;
    /* a whisper of the brand's pink-violet rather than plain white */
    background: linear-gradient(135deg, #FDF8FC, #FAF8FE); border: 1px solid var(--line); border-left-width: 1px;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 14px 32px -28px rgba(22, 18, 26, 0.22);
}
.dc-note-ico {
    flex: 0 0 auto; width: 30px; height: 30px; margin-top: 0; border-radius: 50%;
    display: grid; place-items: center;
    /* the same fill as the well the picture sits in */
    background: #F3EEF3; color: var(--pink-deep);
}
html[data-theme="dark"] .dc-note-ico { background: #100D14; }
.dc-note-ico svg { display: block; width: 16px; height: 16px; }
/* the text sits beside the icon; only the picture wraps to its own row */
.dc-note--tint > div:not(.dc-shot) { flex: 1 1 200px; min-width: 0; padding-top: 4px; }
.dc-note--tint > .dc-shot { flex: 0 0 100%; margin-top: 16px; padding: 12px; border-radius: 14px; background: #F3EEF3; }
/* the same well on its own in the page, not inside a card */
.docs-body > .dc-shot { margin: 16px 0 22px; padding: 12px; border-radius: 14px; background: #F3EEF3; }
html[data-theme="dark"] .dc-shot { background: #241D2C; }
html[data-theme="dark"] .dc-note--tint { background: var(--surface); box-shadow: none; }
.dc-note b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--ink); }

.dc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 26px; }
.dc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* three narrow cards: the title stays on one line and the new-tab mark
   moves to the corner so it does not eat the title's width */
.dc-cards--3 .dc-card { position: relative; padding: 16px 16px 14px; }
.dc-cards--3 .dc-card b { white-space: nowrap; padding-right: 18px; }
.dc-cards--3 .dc-card b .ext { position: absolute; top: 14px; right: 14px; margin: 0; }
.dc-card {
    display: block; padding: 18px 18px 16px;
    border: 1px solid #D8D0CD; border-radius: 16px; background: #fff;
    text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.04), 0 14px 32px -28px rgba(22, 18, 26, 0.18);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.28s ease;
}
.docs-body .dc-card { border-bottom: 1px solid #D8D0CD; }
.dc-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05), 0 26px 48px -30px rgba(22, 18, 26, 0.28); }
.dc-card b { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.dc-card b .ext { width: 15px; height: 15px; color: var(--muted); }
.dc-card-logo { width: 18px; height: 18px; flex: none; }
svg.dc-card-logo { color: var(--ink); }
.dc-card span { display: block; margin-top: 5px; font-size: 0.875rem; line-height: 1.5; color: var(--body); }

.dc-scroll { overflow-x: auto; margin: 0 0 22px; }
.dc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.5; }
.dc-table th {
    text-align: left; padding: 8px 10px;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.dc-table td { padding: 10px; border-bottom: 1px solid #EFEDF3; vertical-align: top; }
.dc-table td:first-child { white-space: nowrap; color: var(--ink); font-weight: 600; }

/* --- on this page ------------------------------------------------------------- */
.docs-toc { position: sticky; top: 142px; }
.docs-toc-h { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.docs-toc a {
    display: block; padding: 5px 0 5px 12px;
    border-left: 2px solid var(--line);
    font-size: 0.8125rem; line-height: 1.4; color: var(--muted); text-decoration: none;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.docs-toc a.sub { padding-left: 24px; }
.docs-toc a:hover { color: var(--ink); }
.docs-toc a.is-on { border-left-color: var(--brand-magenta); color: var(--ink); font-weight: 600; }

/* --- previous and next ------------------------------------------------------ */
.docs-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.docs-pn a {
    display: block; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
    text-decoration: none; color: inherit;
    transition: border-color 0.2s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.docs-pn a:hover { border-color: var(--ink); transform: translateY(-2px); }
.docs-pn a.next { text-align: right; }
.docs-pn small { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.docs-pn b { display: block; margin-top: 4px; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }

/* --- narrower ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .docs-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
    .docs-toc { display: none; }
}
@media (max-width: 860px) {
    .docs { padding: 20px 0 72px; }
    .docs-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .docs-side { position: static; max-height: none; overflow: visible; }
    .docs-side-toggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
        font-size: 0.9375rem; font-weight: 700; color: var(--ink);
    }
    .docs-side-toggle-l { display: inline-flex; align-items: center; gap: 10px; }
    .docs-side-toggle .tg-ico { width: 18px; height: 18px; flex: none; }
    .docs-side-toggle .tg-chev { width: 14px; height: 14px; flex: none; transition: transform 0.2s ease; }
    .docs-side-toggle[aria-expanded="true"] .tg-chev { transform: rotate(180deg); }
    .docs-side-in { display: none; padding: 12px 0 0; }
    .docs-side.is-open .docs-side-in { display: block; }
    .docs-main h1 { font-size: 2.125rem; }
    .dc-cards, .dc-cards--3 { grid-template-columns: minmax(0, 1fr); }
    .docs-pn { grid-template-columns: minmax(0, 1fr); }
    .docs-pn a.next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-card, .docs-pn a { transition: none; }
    .dc-card:hover, .docs-pn a:hover { transform: none; }
}

/* ============================================================
   THEME — the docs can be read in dark.

   The page sets data-theme (the resolved theme) and data-theme-pref
   (System, Light or Dark; System is the default and follows the
   device) on <html> before paint, see the inline script in each docs
   head. The control in the tab bar changes the preference and
   js/docs.js remembers it. Only the docs load this file, so
   the override is docs-only by construction: the rest of the site
   never sees these tokens.

   The dark palette is the brand's own: ink as the ground, the on-dark
   tints from the brand page (blue #7F97FF, magenta #FF5EFF, orange
   #FFB086) for links, accents and the logo, and warm greys for text.
   ============================================================ */

/* --- the theme control: System, Light, Dark --------------------------- */
/* the bar is the scrolling row of tabs plus the control, which stays put */
.docs-tabs .wrap { display: flex; align-items: center; gap: 12px; }
.docs-tabs-in { flex: 1 1 auto; min-width: 0; }
.docs-theme { position: relative; flex: none; display: flex; align-items: center; }
/* on a wide screen the three options are the control itself */
.docs-theme-cur { display: none; }
.docs-theme-opts {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
}
.docs-theme-opts button {
    display: inline-grid; place-items: center;
    width: 30px; height: 26px; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: var(--muted);
    transition: color 0.16s ease, background 0.16s ease;
}
.docs-theme-opts button:hover { color: var(--ink); }
.docs-theme-opts button svg { width: 16px; height: 16px; }
/* the pressed one is the saved choice; System is pressed until one is made */
.docs-theme-opts button[aria-pressed="true"] { background: var(--soft); color: var(--ink); }
.docs-theme-opts button:focus-visible, .docs-theme-cur:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.docs-theme-lbl { display: none; }
/* the circle shows the icon of the current choice */
.docs-theme-ico { display: none; }
.docs-theme-ico svg { width: 17px; height: 17px; display: block; }
html[data-theme-pref="system"] .docs-theme-ico[data-ico="system"],
html[data-theme-pref="light"] .docs-theme-ico[data-ico="light"],
html[data-theme-pref="dark"] .docs-theme-ico[data-ico="dark"] { display: block; }
/* on a phone: one circle, fixed beside the sliding tabs, and a dropdown */
@media (max-width: 600px) {
    .docs-theme-cur {
        display: grid; place-items: center;
        width: 34px; height: 34px; padding: 0; border-radius: 50%;
        border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    }
    .docs-theme-opts {
        display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
        flex-direction: column; align-items: stretch; gap: 2px; min-width: 156px;
        padding: 6px; border-radius: 14px;
        box-shadow: 0 18px 40px -16px rgba(22, 18, 26, 0.28), 0 2px 6px -2px rgba(22, 18, 26, 0.1);
    }
    .docs-theme.is-open .docs-theme-opts { display: flex; }
    .docs-theme-opts button {
        display: flex; align-items: center; justify-content: flex-start; gap: 10px;
        width: auto; height: 38px; padding: 0 12px; border-radius: 10px;
        font-size: 0.875rem; font-weight: 600; color: var(--body);
    }
    .docs-theme-opts button[aria-pressed="true"] { color: var(--ink); }
    .docs-theme-lbl { display: inline; }
}
html[data-theme="dark"] .docs-theme-opts { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); }

/* --- the logo: the light wordmark on dark ----------------------------------- */
/* v8 sets img { display: block }, which beats the hidden attribute, so the
   swap is written out in full for both themes */
.logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: block; }

/* --- the palette ------------------------------------------------------------ */
html[data-theme="dark"] {
    color-scheme: dark;
    --cream: #151119;          /* the page */
    --surface: #1D1823;        /* cards, panels, the toggle */
    --soft: #272030;           /* hover fills */
    --ink: #F6F2F5;            /* headings and strong text */
    --body: #CFC7D3;
    --muted: #9089A0;
    --line: #2E2637;
    --pink-wash: #2B1D2E;      /* the active side link */
    --pink-surface: #4A2A4C;
    --pink-deep: #FF5EFF;
    --brand-magenta: #FF5EFF;
    --brand-blue: #7F97FF;
    --brand-orange: #FFB086;
    --shadow-low: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* --- what the tokens do not reach: hard-coded whites and inks --------------- */
html[data-theme="dark"] .skip-link { color: #16121A; }
html[data-theme="dark"] .btn-primary { color: #16121A; }
html[data-theme="dark"] .btn-primary:hover { background: #E8E1EC; }
html[data-theme="dark"] .btn-outline { background: var(--surface); }
html[data-theme="dark"] .nav-dd-inner { background: var(--surface); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .nav-dd-icon { color: var(--ink); }
html[data-theme="dark"] .nav-menu-panel { box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .nav-menu::backdrop { background: rgba(0, 0, 0, 0.5); }

html[data-theme="dark"] .docs-body a { border-bottom-color: rgba(127, 151, 255, 0.4); }
html[data-theme="dark"] .docs-body code { background: #2A2334; }
html[data-theme="dark"] .dc-code code { background: none; }
html[data-theme="dark"] .docs-steps > li::before { color: #16121A; }

/* code sits a shade below the page, with a rule instead of a shadow */
html[data-theme="dark"] .dc-code { background: #0E0B12; border: 1px solid var(--line); box-shadow: none; }
html[data-theme="dark"] .dc-code-bar { border-bottom-color: var(--line); }

html[data-theme="dark"] .dc-note { background: var(--surface); }

html[data-theme="dark"] .dc-card,
html[data-theme="dark"] .docs-body .dc-card { background: var(--surface); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .dc-card:hover { border-color: var(--muted); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .dc-table td { border-bottom-color: var(--line); }
html[data-theme="dark"] .docs-pn a { background: var(--surface); }
html[data-theme="dark"] .docs-pn a:hover { border-color: var(--muted); }
html[data-theme="dark"] .docs-side-toggle { background: var(--surface); }
html[data-theme="dark"] ::selection { background: rgba(255, 94, 255, 0.28); }

/* ============================================================
   ASK YOUR AGENT — the panel under every lede. The reader can take
   the page into Claude or ChatGPT, copy it as Markdown, or open the
   Markdown twin. On the two section overviews it hands over the
   whole documentation instead (docs/llms-full.txt). Built by
   tools/build-docs-md.py; the styles live here.
   ============================================================ */
.docs-ask {
    margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px;
    background: linear-gradient(135deg, var(--pink-wash), #F5F3FF 55%, var(--surface));
}
.docs-ask-marks { display: flex; flex: none; }
.docs-ask-mark {
    width: 26px; height: 26px; padding: 5px; box-sizing: content-box;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center;
}
.docs-ask-mark + .docs-ask-mark { margin-left: -9px; }
.docs-ask-marks img { width: 26px; height: 26px; display: block; }
.docs-ask-text { flex: 1 1 200px; min-width: 0; }
.docs-ask-h { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.docs-ask-p { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.docs-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-ask-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: 0.8125rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(22, 18, 26, 0.05);
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.docs-ask-btn:hover { box-shadow: var(--shadow-low); border-color: #DCD3D0; }
.docs-ask-btn img, .docs-ask-btn svg { width: 15px; height: 15px; flex: none; }
.docs-ask-t, .docs-ask-d { display: inline-flex; align-items: center; gap: 7px; }
.docs-ask-d { display: none; color: #1F6B49; }
.docs-ask-copy.is-copied .docs-ask-t { display: none; }
.docs-ask-copy.is-copied .docs-ask-d { display: inline-flex; }
html[data-theme="dark"] .docs-ask { background: linear-gradient(135deg, #2B1D2E, #1F1A2E 55%, var(--surface)); }
html[data-theme="dark"] .docs-ask-mark { background: var(--soft); }
html[data-theme="dark"] .docs-ask-btn:hover { border-color: var(--muted); }
html[data-theme="dark"] .docs-ask img[src*="chatgpt"], html[data-theme="dark"] .ask-options img[src*="chatgpt"] { filter: invert(1); }
html[data-theme="dark"] .docs-ask-d { color: #B7F0C6; }
@media (max-width: 600px) {
    .docs-ask { padding: 14px; gap: 12px; }
    .docs-ask-btns { width: 100%; }
    .docs-ask-btn { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 0 10px; }
}

/* ============================================================
   API SETTINGS MOCK — the Askpilot app's Settings › Company › API
   screen, drawn as it is at app.askpilot.com, inside the API note
   on the Developers overview. Fixed light colours on purpose: it is
   a picture of the app, so it stays the same in both docs themes.
   ============================================================ */
.dc-note { flex-wrap: wrap; }
.dc-note .api-mock { flex-basis: 100%; margin-top: 0; }
.api-mock {
    display: flex; height: 300px; overflow: hidden;
    border: 1px solid #E5E7EB; border-radius: 12px; background: #fff;
    color: #111827; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11px; line-height: 1.35; text-align: left; letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 10px 24px -16px rgba(17, 24, 39, 0.3);
    color-scheme: light;
}
.api-mock svg { width: 13px; height: 13px; flex: none; display: block; }
/* the search field and the button centre their text on the same line as their icons */
.am-search, .api-mock .am-btn { line-height: 1; box-sizing: border-box; }
.am-search svg, .api-mock .am-btn svg { position: relative; top: 0; }
.api-mock p { margin: 0; }
/* the note's own <b> rule (block, ink colour) must not reach the picture */
.api-mock b { display: inline; margin: 0; color: #111827; font-weight: 600; }
.api-mock, .api-mock span { font-weight: 400; }
/* the app sidebar */
.am-side { flex: 0 0 158px; display: flex; flex-direction: column; background: #F9F9FB; border-right: 1px solid #ECECEF; padding: 10px 8px 0; min-width: 0; }
.am-org { display: flex; align-items: center; gap: 7px; padding: 2px 2px 8px; font-weight: 700; font-size: 11.5px; }
.am-logo { width: 24px; height: 24px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.16); display: grid; place-items: center; flex: none; }
.am-logo img { width: 15px; height: 15px; display: block; }
.am-org b { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-collapse { display: inline-flex; color: #111827; }
.am-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.am-nav span, .am-sub > span, .am-sub-h { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; font-size: 11px; font-weight: 500; color: #111827; white-space: nowrap; }
.am-nav span.is-on, .am-sub > span.is-on { background: #ECEDF0; }
.am-lists { display: flex; gap: 9px; padding: 10px 8px 4px; font-size: 11px; color: #111827; }
.am-lists b { font-weight: 700; }
.am-lists span { font-weight: 500; }
.am-sessions { list-style: none; margin: 0; padding: 0 6px; flex: 1; overflow: hidden; }
.am-sessions li { padding: 4px 2px 3px; }
.am-sessions span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111827; font-size: 10.5px; font-weight: 500; }
.am-sessions small { display: block; font-size: 8.5px; color: #6B7280; margin-top: 1px; }
.am-user { display: flex; align-items: center; gap: 7px; padding: 8px 8px; margin: 0 -8px; border-top: 1px solid #ECECEF; font-size: 11px; }
.am-avatar { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid #E5E7EB; display: grid; place-items: center; font-size: 8px; font-weight: 700; color: #111827; }
/* the settings column */
.am-sub { flex: 0 0 150px; border-right: 1px solid #ECECEF; padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; }
.am-sub-h { color: #9CA3AF; padding-bottom: 6px; }
/* the page */
.am-main { flex: 1; min-width: 0; padding: 20px 18px; }
.am-h1 { font-size: 17px; font-weight: 600; color: #111827; letter-spacing: -0.01em; }
.am-lede { margin-top: 4px; font-size: 10.5px; color: #6B7280; }
.am-lede u { color: #4F46E5; text-decoration: underline; text-underline-offset: 2px; }
.am-tabs { display: flex; gap: 14px; margin-top: 16px; border-bottom: 1px solid #E5E7EB; font-size: 10.5px; color: #374151; }
.am-tabs span { padding: 0 6px 6px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.api-mock .am-tabs span.is-on { color: #111827; font-weight: 600; border-bottom-color: #5B5BF5; }
.am-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 10px; border-bottom: 1px solid #ECECEF; line-height: 1; }
.am-search { display: inline-flex; align-items: center; gap: 6px; width: 46%; height: 24px; padding: 0 8px; border: 1px solid #E5E7EB; border-radius: 7px; color: #9CA3AF; font-size: 10.5px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); }
.api-mock .am-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border: 1px solid #D1D5DB; border-radius: 7px; background: #fff; color: #111827; font-weight: 600; font-size: 10.5px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); }
.am-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0; color: #6B7280; font-size: 10.5px; font-weight: 500; }
/* the app's own filled icon: the circle is part of the glyph, so no backing disc */
.am-empty-ico { display: inline-flex; color: #9CA3AF; }
.am-empty-ico svg { width: 16px; height: 16px; }
/* skeleton rows for everything that is not on the way to the API screen */
.am-sk-ico { display: inline-block; width: 13px; height: 13px; border-radius: 4px; background: #E5E7EB; flex: none; }
.am-sk-bar { display: inline-block; height: 8px; border-radius: 4px; background: #E5E7EB; }
.am-sk { cursor: default; }
.am-fill { flex: 1; }
.api-mock .am-avatar.am-sk-ico { width: 22px; height: 22px; border-radius: 50%; border: 0; }
@media (max-width: 640px) { .api-mock { height: 300px; } }
@media (max-width: 420px) { .am-sub { display: none; } }

/* the Ask AI page: the panel's four options, each as a card with its button.
   The card and body rules for links and spans must not restyle the button. */
.ask-options .dc-card { display: flex; flex-direction: column; align-items: flex-start; }
.ask-options .dc-card:hover { transform: none; border-color: #D8D0CD; }
.ask-options .dc-card > span { flex: 1; }
.ask-options .docs-ask-btn { margin-top: 14px; }
.docs-body .ask-options a.docs-ask-btn { color: var(--ink); border-bottom: 1px solid var(--line); }
.docs-body .ask-options a.docs-ask-btn:hover { border-bottom-color: #DCD3D0; }
.ask-options .dc-card .docs-ask-btn span { display: inline-flex; margin: 0; font-size: inherit; color: inherit; line-height: 1; }
.ask-options .dc-card .docs-ask-btn .docs-ask-d { display: none; color: #1F6B49; }
.ask-options .dc-card .docs-ask-copy.is-copied .docs-ask-t { display: none; }
.ask-options .dc-card .docs-ask-copy.is-copied .docs-ask-d { display: inline-flex; }
html[data-theme="dark"] .ask-options .dc-card:hover { border-color: var(--line); }
html[data-theme="dark"] .docs-body .ask-options a.docs-ask-btn:hover { border-bottom-color: var(--muted); }
html[data-theme="dark"] .ask-options .dc-card .docs-ask-btn .docs-ask-d { color: #B7F0C6; }
/* a page with no headings has nothing to list on the right */
.docs-toc:not(:has(a)) { display: none; }

/* a section with one page and nothing to list: the page alone, centred */
.docs-grid--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.docs-grid--solo .docs-main { width: 100%; }

/* the two agent cards carry a whisper of their brand colour: Claude's
   terracotta, and blue for ChatGPT */
.ask-options .dc-card--claude { background: linear-gradient(135deg, #FDF1EA, #FFF8F4); border-color: #F3D9CB; }
.ask-options .dc-card--chatgpt { background: linear-gradient(135deg, #EAF1FF, #F5F8FF); border-color: #CFDDF9; }
.ask-options .dc-card--claude:hover { border-color: #E8BFA8; }
.ask-options .dc-card--chatgpt:hover { border-color: #AEC6F5; }
html[data-theme="dark"] .ask-options .dc-card--claude { background: linear-gradient(135deg, #2A1C17, #211A1F); border-color: #4A2E24; }
html[data-theme="dark"] .ask-options .dc-card--chatgpt { background: linear-gradient(135deg, #171F36, #1B1A2B); border-color: #2C3A66; }
html[data-theme="dark"] .ask-options .dc-card--claude:hover { border-color: #6B4335; }
html[data-theme="dark"] .ask-options .dc-card--chatgpt:hover { border-color: #3E5296; }

/* ============================================================
   PICTURES WITH A DARK VERSION
   A picture is light by default in both themes. It only switches when a
   dark version exists:
   - a drawn mock carries the class `has-dark` and a palette below;
   - a real image pair is written as two <img> tags inside .dc-shot,
     one with class shot-light and one with class shot-dark; the dark
     one shows only in dark mode, the light one shows everywhere else.
   ============================================================ */
.dc-shot img.shot-dark { display: none; }

/* ---- Workflows list mock (docs/developers/workflows.html): a drawing of the
   app's Workflows screen without the left sidebar, measured from
   app-dev.askpilot.com on 2026-09-10 (Geist 14px, ink #141C20, header rules
   #E6EBED, muted #9EAEB5) and scaled to about three quarters ---- */
.wf-mock {
    display: block; padding: 18px 12px 8px; overflow: hidden;
    border: 1px solid #E5E7EB; border-radius: 12px; background: #fff;
    color: #141C20; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10px; line-height: 1.3; text-align: left; letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 10px 24px -16px rgba(17, 24, 39, 0.3);
    color-scheme: light;
}
.wf-mock p { margin: 0; }
.wf-mock svg { display: block; flex: none; }
.wf-mock img { display: block; flex: none; width: 12px; height: 12px; }
.wm-h1 { font-size: 18px; font-weight: 500; color: #141C20; letter-spacing: -0.01em; padding-left: 4px; }
.wm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 4px 20px; line-height: 1; }
.wm-search { display: inline-flex; align-items: center; gap: 7px; width: 190px; max-width: 60%; height: 24px; padding: 0 9px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 8px; color: #9EAEB5; font-size: 10.5px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.wm-search svg { width: 12px; height: 12px; color: #9EAEB5; }
.wm-btn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; box-sizing: border-box; border: 1px solid #BFC6C9; border-radius: 8px; background: #fff; color: #141C20; font-weight: 600; font-size: 10.5px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.wm-btn svg { width: 10px; height: 10px; }
.wm-table { display: grid; grid-template-columns: 24fr 17fr 38fr 21fr 26px 24px; }
.wm-row { display: contents; }
.wm-c { display: flex; align-items: center; gap: 6px; height: 42px; padding-left: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 9.5px; color: #141C20; }
.wm-c.r { justify-content: flex-end; padding-right: 8px; }
.wm-head .wm-c { height: 42px; border-top: 1px solid #E6EBED; border-bottom: 1px solid #E6EBED; font-weight: 600; font-size: 10.5px; }
.wm-c .ell { overflow: hidden; text-overflow: ellipsis; }
.wm-name b { font-weight: 600; color: #141C20; }
.wm-name svg, .wm-c > svg { width: 12px; height: 12px; color: #141C20; }
.wm-none { color: #9EAEB5; }
/* a person with access: the app's 30px avatar with initials, scaled */
.wm-person { gap: 6px; }
.wm-person > i { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 9px; background: #F4F6FF; border: 1px solid #CFD8DC; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); font-style: normal; font-size: 7.5px; font-weight: 600; color: #141C20; }
.wm-c em { font-style: normal; color: #7C8B91; margin-left: 2px; }
.wm-swc { padding-left: 8px; }
.wm-sw { display: inline-flex; align-items: center; width: 21px; height: 12px; padding: 0 1.5px; box-sizing: border-box; border-radius: 500px; background: #9EAEB5; }
.wm-sw > i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.wm-sw.is-on { background: #141C20; justify-content: flex-end; }
.wm-dots { justify-content: center; padding: 0; }
.wm-dots svg { width: 10px; height: 10px; }
@media (max-width: 640px) {
    .wm-table { grid-template-columns: 1fr 1fr 26px 24px; }
    .wm-row > .wm-c:nth-child(2), .wm-row > .wm-c:nth-child(4) { display: none; }
    .wm-search { width: 150px; }
}
html[data-theme="dark"] .wf-mock.has-dark {
    color-scheme: dark; background: #121316; color: #E6E8EC; border-color: #2A2D33;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .wf-mock.has-dark .wm-h1, html[data-theme="dark"] .wf-mock.has-dark .wm-c, html[data-theme="dark"] .wf-mock.has-dark .wm-name b, html[data-theme="dark"] .wf-mock.has-dark .wm-name svg, html[data-theme="dark"] .wf-mock.has-dark .wm-c > svg { color: #E6E8EC; }
html[data-theme="dark"] .wf-mock.has-dark .wm-head .wm-c { border-color: #2A2D33; }
html[data-theme="dark"] .wf-mock.has-dark .wm-search { background: #191B20; border-color: #33373F; color: #6B7280; box-shadow: none; }
html[data-theme="dark"] .wf-mock.has-dark .wm-search svg { color: #6B7280; }
html[data-theme="dark"] .wf-mock.has-dark .wm-btn { background: #2B2E35; border-color: #3D414A; color: #FFFFFF; box-shadow: none; }
html[data-theme="dark"] .wf-mock.has-dark .wm-none { color: #7A8290; }
html[data-theme="dark"] .wf-mock.has-dark .wm-person > i { background: #2B2E35; border-color: #3D414A; color: #E6E8EC; box-shadow: none; }
html[data-theme="dark"] .wf-mock.has-dark .wm-c em { color: #9CA3AF; }
html[data-theme="dark"] .wf-mock.has-dark .wm-sw { background: #3D414A; }
html[data-theme="dark"] .wf-mock.has-dark .wm-sw > i { background: #E6E8EC; box-shadow: none; }
html[data-theme="dark"] .wf-mock.has-dark .wm-sw.is-on { background: #E6E8EC; }
html[data-theme="dark"] .wf-mock.has-dark .wm-sw.is-on > i { background: #121316; }

html[data-theme="dark"] .dc-shot:has(img.shot-dark) img.shot-light { display: none; }
html[data-theme="dark"] .dc-shot img.shot-dark { display: block; }

/* the API settings screen, as the app draws it in its own dark mode */
html[data-theme="dark"] .api-mock.has-dark {
    color-scheme: dark;
    background: #121316; color: #E6E8EC; border-color: #2A2D33;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .api-mock.has-dark b { color: #E6E8EC; }
html[data-theme="dark"] .api-mock.has-dark .am-sub { background: #16181C; border-right-color: #2A2D33; }
html[data-theme="dark"] .api-mock.has-dark .am-sub > span, html[data-theme="dark"] .api-mock.has-dark .am-nav span { color: #E6E8EC; }
html[data-theme="dark"] .api-mock.has-dark .am-sub-h { color: #7A8290; }
html[data-theme="dark"] .api-mock.has-dark .am-sub > span.is-on, html[data-theme="dark"] .api-mock.has-dark .am-nav span.is-on { background: #2C2F35; }
html[data-theme="dark"] .api-mock.has-dark .am-sk-ico, html[data-theme="dark"] .api-mock.has-dark .am-sk-bar { background: #2E323A; }
html[data-theme="dark"] .api-mock.has-dark .am-h1 { color: #FFFFFF; }
html[data-theme="dark"] .api-mock.has-dark .am-lede { color: #A3A9B5; }
html[data-theme="dark"] .api-mock.has-dark .am-lede u { color: #8B9CFF; }
html[data-theme="dark"] .api-mock.has-dark .am-tabs { border-bottom-color: #2A2D33; color: #CDD2DA; }
html[data-theme="dark"] .api-mock.has-dark .am-tabs span.is-on { color: #FFFFFF; border-bottom-color: #6366F1; }
html[data-theme="dark"] .api-mock.has-dark .am-bar { border-bottom-color: #2A2D33; }
html[data-theme="dark"] .api-mock.has-dark .am-search { background: #191B20; border-color: #33373F; color: #6B7280; box-shadow: none; }
html[data-theme="dark"] .api-mock.has-dark .am-btn { background: #2B2E35; border-color: #3D414A; color: #FFFFFF; box-shadow: none; }
html[data-theme="dark"] .api-mock.has-dark .am-empty { color: #9CA3AF; }
html[data-theme="dark"] .api-mock.has-dark .am-empty-ico { color: #6B7280; }