/* Palette from payout_merchant/assets/css:
     #3A1768 primary · #330864 deep · #6430B2 bright · #795F95 muted
     #CBB5D4 lavender · #3F9A57 success · #FFC107 warning            */
  :root {
    --brand:#3A1768; --brand-deep:#330864; --brand-bright:#6430B2;
    --brand-muted:#795F95; --lavender:#CBB5D4;

    --ground:#FFFFFF; --raised:#FFFFFF; --sunken:#F7F4FB;
    --ink:#221B2C; --muted:#544C60; --faint:#867C93;
    --rule:#EBE5F1; --rule-strong:#DCD2E6;
    --accent:#6430B2; --accent-ink:#3A1768; --accent-soft:#F1EBF7;
    --masthead:#3A1768; --masthead-ink:#FFFFFF; --masthead-dim:#CBB5D4;

    --get:#3A1768; --post:#3F9A57; --put:#B8860B; --delete:#B0186A;
    --danger:#B0186A; --warn:#8A6100; --edge:rgba(34,17,58,.22);

    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bar: 3.25rem;
  }

  /* Dark: a purple-tinted near-black ground with lavender accents. The brand
     purple is too saturated to sit behind body text, so it moves to the
     masthead and the accents lighten instead of inverting. */
  @media (prefers-color-scheme: dark) {
    :root {
      --ground:#141019; --raised:#1B1622; --sunken:#1F1929;
      --ink:#EDE8F3; --muted:#A79CB5; --faint:#7C7189;
      --rule:#2C2438; --rule-strong:#3D3350;
      --accent:#B08BE0; --accent-ink:#CBB5D4; --accent-soft:#271A3A;
      --masthead:#241338; --masthead-ink:#F2EDF7; --masthead-dim:#A392B5;
      --get:#B08BE0; --post:#5FBF7C; --put:#D3B064; --delete:#E06B9E;
      --danger:#E06B9E; --warn:#D3B064; --edge:rgba(176,139,224,.3);
    }
  }
  :root[data-theme="dark"] {
    --ground:#141019; --raised:#1B1622; --sunken:#1F1929;
    --ink:#EDE8F3; --muted:#A79CB5; --faint:#7C7189;
    --rule:#2C2438; --rule-strong:#3D3350;
    --accent:#B08BE0; --accent-ink:#CBB5D4; --accent-soft:#271A3A;
    --masthead:#241338; --masthead-ink:#F2EDF7; --masthead-dim:#A392B5;
    --get:#B08BE0; --post:#5FBF7C; --put:#D3B064; --delete:#E06B9E;
    --danger:#E06B9E; --warn:#D3B064; --edge:rgba(176,139,224,.3);
  }
  :root[data-theme="light"] {
    --ground:#FFFFFF; --raised:#FFFFFF; --sunken:#F7F4FB;
    --ink:#221B2C; --muted:#544C60; --faint:#867C93;
    --rule:#EBE5F1; --rule-strong:#DCD2E6;
    --accent:#6430B2; --accent-ink:#3A1768; --accent-soft:#F1EBF7;
    --masthead:#3A1768; --masthead-ink:#FFFFFF; --masthead-dim:#CBB5D4;
    --get:#3A1768; --post:#3F9A57; --put:#B8860B; --delete:#B0186A;
    --danger:#B0186A; --warn:#8A6100; --edge:rgba(34,17,58,.22);
  }

  * { box-sizing:border-box; }
  body {
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--sans); font-size:0.9375rem; line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  a { color:var(--accent); text-underline-offset:2px; }
  a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

  /* ---- masthead ---- */
  .bar {
    position:sticky; top:0; z-index:40; height:var(--bar);
    background:var(--masthead); color:var(--masthead-ink);
    display:flex; align-items:center; gap:1.25rem; padding:0 1.25rem;
  }
  .brand { font-weight:700; letter-spacing:-0.015em; color:var(--masthead-ink);
           text-decoration:none; font-size:0.95rem; white-space:nowrap; }
  .brand span { color:var(--lavender); font-weight:400; }
  .bar nav { display:flex; gap:0.2rem; margin-right:auto; }
  .bar nav a {
    font-size:0.8rem; color:var(--masthead-dim); text-decoration:none;
    padding:0.32rem 0.65rem; border-radius:5px;
  }
  .bar nav a:hover { color:var(--masthead-ink); background:rgba(255,255,255,.09); }
  .bar nav a[aria-current="page"] { color:var(--masthead-ink); background:rgba(255,255,255,.14); }

  .toolbtn {
    font-size:0.74rem; background:rgba(255,255,255,.08); color:var(--masthead-dim);
    border:1px solid rgba(255,255,255,.16); border-radius:5px;
    padding:0.32rem 0.6rem; cursor:pointer; font-family:inherit;
  }
  .toolbtn:hover { color:var(--masthead-ink); background:rgba(255,255,255,.16); }
  #search-open { min-width:9rem; display:flex; justify-content:space-between; gap:0.8rem; }
  #search-open kbd { font-family:var(--mono); opacity:.75; }

  /* ---- shell ---- */
  .shell {
    display:grid; grid-template-columns:17rem minmax(0,1fr);
    align-items:start; gap:0;
  }
  .sidenav {
    position:sticky; top:var(--bar); max-height:calc(100vh - var(--bar));
    overflow-y:auto; padding:1.6rem 1rem 3rem 1.5rem;
    border-right:1px solid var(--rule);
  }
  .sidenav h3 {
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em;
    color:var(--brand-muted); margin:1.5rem 0 0.45rem; font-weight:700;
  }
  :root[data-theme="dark"] .sidenav h3 { color:var(--faint); }
  :root[data-theme="dark"] .prose th, :root[data-theme="dark"] .prose ol > li::marker { color:var(--muted); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prose th, :root:not([data-theme="light"]) .prose ol > li::marker { color:var(--muted); }
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidenav h3 { color:var(--faint); } }
  .sidenav h3:first-child { margin-top:0; }
  .sidenav ul { list-style:none; margin:0; padding:0; }
  .sidenav li a {
    display:block; padding:0.26rem 0.6rem; margin-left:-0.6rem; border-radius:5px;
    color:var(--muted); text-decoration:none; font-size:0.845rem;
  }
  .sidenav li a:hover { background:var(--sunken); color:var(--ink); }
  .sidenav li a[aria-current="page"] { background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
  .sidenav .sub { padding-left:0.8rem; border-left:1px solid var(--rule); margin-left:0.35rem; }
  .sidenav .ops { margin:0.15rem 0 0.5rem 0.35rem; padding-left:0.8rem;
                  border-left:1px solid var(--rule-strong); }
  .sidenav .ops a { display:flex; gap:0.45rem; align-items:baseline; font-size:0.79rem; padding:0.2rem 0.5rem; }
  .sidenav .ops .m { font-family:var(--mono); font-size:0.58rem; font-weight:700;
                     letter-spacing:0.04em; min-width:2.1rem; color:var(--faint); }
  .sidenav .ops a:hover .m { color:var(--accent); }

  main { padding:0 0 6rem; min-width:0; }
  /* Content is centred within the area right of the nav, with equal gutters.
     Left-aligning it dumped every spare pixel on the right and read as
     unbalanced next to Stripe. Section rules stay full-bleed. */
  body { --col:52rem; }
  body.api { --col:90rem; }
  .inner { max-width:90rem; margin:0 auto; padding:0 2rem; }
  .page-head { max-width:var(--col); margin:0 auto; padding:2.25rem 2rem 1.25rem; }
  .intro { padding:0 0 2.5rem; }
  main > .prose { max-width:var(--col); margin:0 auto; padding:0 2rem; }
  .eyebrow { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em;
             color:var(--brand-muted); font-weight:700; }
  :root[data-theme="dark"] .eyebrow { color:var(--faint); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color:var(--faint); } }
  h1 { margin:0.35rem 0 0; font-size:1.8rem; font-weight:650; line-height:1.2;
       letter-spacing:-0.025em; text-wrap:balance; color:var(--ink); }

  /* ---- prose ---- */
  .prose > *:first-child { margin-top:0; }
  .prose p, .prose li { color:var(--muted); }
  .prose p { margin:0 0 1rem; }
  .prose h1,.prose h2,.prose h3,.prose h4 {
    font-weight:650; color:var(--ink); letter-spacing:-0.018em; line-height:1.3;
    margin:2rem 0 0.7rem; scroll-margin-top:calc(var(--bar) + 1rem);
  }
  .prose h1 { font-size:1.45rem; } .prose h2 { font-size:1.25rem; }
  .prose h3 { font-size:1.1rem; } .prose h4 { font-size:1rem; }
  .prose h5, .prose h6 { font-size:0.88rem; font-weight:650; color:var(--ink); margin:1.4rem 0 0.5rem; }
  .prose h2 { padding-top:1.4rem; border-top:1px solid var(--rule); margin-top:2.4rem; }
  .prose > h2:first-child, .prose hr + h2 { border-top:0; padding-top:0; }
  .prose hr + h2 { margin-top:0; }
  .prose ul,.prose ol { margin:0 0 1rem; padding-left:1.6rem; }
  .prose li { margin:0.3rem 0; }
  .prose li > p { margin-bottom:0.6rem; }
  .prose li > ul, .prose li > ol { margin:0.3rem 0 0.6rem; }
  .prose li > .cb, .prose li > .alert, .prose li > .table-scroll, .prose li > blockquote { margin-top:0.6rem; }
  .prose ol > li::marker { color:var(--brand-muted); font-weight:600; }
  .prose hr { border:0; border-top:1px solid var(--rule); margin:2rem 0; }
  .prose blockquote {
    margin:0 0 1rem; padding:0.6rem 0.9rem; border-left:3px solid var(--accent);
    background:var(--accent-soft); border-radius:0 5px 5px 0; color:var(--muted);
  }
  .prose blockquote p:last-child { margin-bottom:0; }

  .prose .alert {
    --alert:var(--accent);
    margin:0 0 1.1rem; padding:0.7rem 1rem 0.75rem; border-left:3px solid var(--alert);
    border-radius:0 6px 6px 0; background:color-mix(in srgb, var(--alert) 8%, transparent);
  }
  .prose .alert-tip { --alert:var(--post); }
  .prose .alert-important { --alert:var(--brand-bright); }
  .prose .alert-warning { --alert:var(--warn); }
  .prose .alert-caution { --alert:var(--danger); }
  .prose .alert > :last-child { margin-bottom:0; }
  .prose .alert p { color:var(--ink); }
  .prose .alert .alert-title {
    margin:0 0 0.2rem; font-size:0.72rem; font-weight:700; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--alert);
  }
  .prose img { max-width:100%; height:auto; border-radius:6px; border:1px solid var(--rule); background:#fff; }
  .prose .img-link { display:inline-block; max-width:100%; vertical-align:top; }
  .prose p:has(> .img-link + .img-link) { display:flex; gap:0.75rem; align-items:flex-start; }
  .prose p:has(> .img-link + .img-link) .img-link { flex:1 1 0; min-width:0; }
  .prose table { border-collapse:collapse; width:100%; font-size:0.83rem; }
  .prose th,.prose td { text-align:left; padding:0.55rem 0.9rem 0.55rem 0;
                        border-bottom:1px solid var(--rule); vertical-align:top; color:var(--muted); }
  .prose th { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.09em;
              color:var(--brand-muted); font-weight:700; white-space:nowrap; }
  .prose th code { text-transform:none; letter-spacing:0; font-size:0.78rem; }
  .prose td:first-child { color:var(--ink); }
  .api .prose td:first-child { font-family:var(--mono); }
  .table-scroll {
    overflow-x:auto; margin:0 0 1rem;
    background:
      linear-gradient(to right, var(--ground) 30%, transparent) left / 2rem 100% no-repeat local,
      linear-gradient(to left, var(--ground) 30%, transparent) right / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--edge), transparent) left / .8rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--edge), transparent) right / .8rem 100% no-repeat scroll;
  }

  code { font-family:var(--mono); font-size:0.86em; background:var(--sunken);
         color:var(--accent-ink); padding:0.13em 0.38em; border-radius:4px; }
  pre {
    margin:0 0 1rem; background:var(--sunken); border:1px solid var(--rule);
    border-radius:7px; padding:0.9rem 1rem;
    font-family:var(--mono); font-size:0.79rem; line-height:1.6; color:var(--ink);
    white-space:pre; overflow-x:auto;
  }
  /* always-visible scrollbars, so a long line never looks cut off */
  pre::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height:8px; }
  pre::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb { background:var(--rule-strong); border-radius:4px; }
  .cb pre::-webkit-scrollbar-thumb { background:#3B2D54; }
  @supports not selector(::-webkit-scrollbar) {
    pre, .table-scroll { scrollbar-width:thin; scrollbar-color:var(--rule-strong) transparent; }
    .cb pre { scrollbar-color:#3B2D54 transparent; }
  }
  :not(pre) > code { overflow-wrap:break-word; }
  pre code { background:none; padding:0; font-size:inherit; color:inherit; }
  .codeblock { position:relative; }
  .copy {
    position:absolute; top:0.5rem; right:0.5rem; opacity:0; transition:opacity .12s;
    font-size:0.66rem; letter-spacing:0.03em; font-family:inherit;
    background:var(--raised); color:var(--muted); border:1px solid var(--rule-strong);
    border-radius:4px; padding:0.22rem 0.5rem; cursor:pointer;
  }
  .codeblock:hover .copy, .copy:focus-visible { opacity:1; }

  /* ---- API reference ---- */
  .op { border-top:1px solid var(--rule); padding:3rem 0; margin:0;
        scroll-margin-top:calc(var(--bar) + 1rem); }
  .op-head { display:flex; align-items:baseline; gap:0.7rem; flex-wrap:wrap; margin-bottom:0.4rem; }
  .op-head h2 { margin:0; font-size:1.15rem; font-weight:650; letter-spacing:-0.02em; }
  .verb {
    font-family:var(--mono); font-size:0.64rem; font-weight:700; letter-spacing:0.06em;
    padding:0.17rem 0.42rem; border-radius:4px; color:#fff;
  }
  .verb.get{background:var(--get)} .verb.post{background:var(--post)}
  .verb.put,.verb.patch{background:var(--put)} .verb.delete{background:var(--delete)}
  :root[data-theme="dark"] .verb { color:#141019; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .verb { color:#141019; } }
  .op-path { font-family:var(--mono); font-size:0.83rem; color:var(--accent-ink);
             word-break:break-all; margin-bottom:0.9rem; }
  .op-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:start; }
  .op-grid.stacked { grid-template-columns:minmax(0,1fr); max-width:56rem; }
  .api .intro .prose { max-width:56rem; }
  .panel { position:sticky; top:calc(var(--bar) + 1.5rem); }
  .panel h4, .schema h4 {
    font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em;
    color:var(--brand-muted); font-weight:700; margin:0 0 0.45rem;
  }
  :root[data-theme="dark"] .panel h4, :root[data-theme="dark"] .schema h4 { color:var(--faint); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .panel h4,
    :root:not([data-theme="light"]) .schema h4 { color:var(--faint); }
  }
  .schema { margin:1.3rem 0; }
  .schema.nested {
    margin:0.55rem 0 0.2rem; padding-left:0.9rem;
    border-left:2px solid var(--rule-strong);
  }
  /* Identifier + flag + type on one line, description beneath at full width.
     A three-column grid starved the description once anything nested. */
  .prop { padding:0.6rem 0; border-bottom:1px solid var(--rule); }
  .schema.nested .prop:last-child { border-bottom:0; padding-bottom:0.2rem; }
  .prop-head { display:flex; align-items:baseline; gap:0.5rem; flex-wrap:wrap; }
  .prop-name { font-family:var(--mono); font-size:0.83rem; color:var(--ink); font-weight:600; }
  .prop-type { font-family:var(--mono); font-size:0.75rem; color:var(--accent); }
  .prop-desc { color:var(--muted); font-size:0.83rem; margin-top:0.15rem; max-width:62ch; }
  .prop-desc code { font-size:0.9em; }
  .req { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.06em;
         color:var(--danger); text-transform:uppercase; font-weight:700; }
  .tag { font-family:var(--mono); font-size:0.66rem; color:var(--faint); }
  .op-md {
    margin-left:auto; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.05em;
    color:var(--faint); text-decoration:none; border:1px solid var(--rule);
    border-radius:4px; padding:0.15rem 0.42rem;
  }
  .op-md:hover { color:var(--accent); border-color:var(--accent); }

  /* ---- code panels: dark in both themes, like Stripe ---- */
  .cb { border-radius:8px; margin:0 0 0.9rem; border:1px solid #241A33; }
  .cb-dark { background:#1C1428; }
  .cb-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.42rem 0.8rem; background:#160F20; border-bottom:1px solid #241A33;
    font-family:var(--mono); font-size:0.63rem; text-transform:uppercase;
    letter-spacing:0.11em; color:#9C8DB5;
  }
  .cb pre {
    margin:0; background:transparent; border:0; border-radius:0;
    padding:0.85rem 0.95rem; color:#E4DCF0; font-size:0.765rem; line-height:1.62;
  }
  .cb .copy { background:#241A33; color:#B4A6C9; border-color:#33264a; }
  .t-key  { color:#C4A6FF; }
  .t-str  { color:#8FD9B6; }
  .t-num  { color:#F2B880; }
  .t-lit  { color:#F28FB0; }
  .t-var  { color:#FFC107; }
  .t-cmd  { color:#C4A6FF; font-weight:600; }
  .t-flag { color:#8AA9D6; }
  .t-url  { color:#8FD9B6; text-decoration:underline; text-decoration-color:#3d5a4d; }
  .t-cm   { color:#7B6E90; font-style:italic; }

  /* language tabs inside the code panel header */
  .cb-head { gap:0.75rem; }
  .langs { display:flex; gap:0.15rem; }
  .lang {
    font-family:var(--mono); font-size:0.62rem; letter-spacing:0.04em; cursor:pointer;
    background:transparent; color:#8A7CA3; border:1px solid transparent;
    border-radius:4px; padding:0.14rem 0.4rem; text-transform:none;
  }
  .lang:hover { color:#E4DCF0; }
  .lang.on { background:#2C2140; color:#E4DCF0; border-color:#3B2D54; }
  .lang-pane[hidden] { display:none; }

  /* per-section toolbar: agent affordances */
  .sec-tools { margin-left:auto; display:flex; gap:0.3rem; align-items:center; flex-wrap:wrap; }
  .sec-btn {
    font-size:0.68rem; letter-spacing:0.01em; font-family:inherit; cursor:pointer;
    background:transparent; color:var(--faint); border:1px solid var(--rule);
    border-radius:5px; padding:0.2rem 0.5rem; text-decoration:none; white-space:nowrap;
  }
  .sec-btn:hover { color:var(--accent); border-color:var(--accent); }
  .sec-btn.done { color:var(--post); border-color:var(--post); }

  /* ---- search ---- */
  dialog#search {
    border:1px solid var(--rule-strong); border-radius:11px; padding:0; width:min(38rem,92vw);
    background:var(--raised); color:var(--ink); box-shadow:0 24px 60px rgba(58,23,104,.24);
  }
  dialog#search::backdrop { background:rgba(34,17,58,.45); }
  #search input {
    width:100%; border:0; border-bottom:1px solid var(--rule); background:transparent;
    color:var(--ink); font-family:inherit; font-size:0.95rem; padding:0.95rem 1.05rem; outline:none;
  }
  #results { list-style:none; margin:0; padding:0.4rem; max-height:22rem; overflow-y:auto; }
  #results li a { display:block; padding:0.5rem 0.65rem; border-radius:6px; text-decoration:none; color:var(--ink); }
  #results li a:hover, #results li a.on { background:var(--accent-soft); }
  #results .r-kind { font-family:var(--mono); font-size:0.62rem; text-transform:uppercase;
                     letter-spacing:0.09em; color:var(--brand-muted); }
  #results .r-ctx { color:var(--muted); font-size:0.78rem; }
  #results .empty { padding:1rem; color:var(--faint); font-size:0.85rem; }


  /* status badge, e.g. Beta */
  .badge {
    display:inline-block; font-family:var(--mono); font-size:0.64rem; font-weight:700;
    letter-spacing:0.09em; text-transform:uppercase; padding:0.2rem 0.55rem;
    border-radius:999px; vertical-align:middle;
  }
  .badge-beta { color:#8A6100; background:#FFF6D9; border:1px solid #F0D68A; }
  :root[data-theme="dark"] .badge-beta { color:#F0C34B; background:#2A2313; border-color:#4A3D18; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge-beta { color:#F0C34B; background:#2A2313; border-color:#4A3D18; }
  }
  .prose p:has(> .badge:only-child) { margin-bottom:1.4rem; }

  /* per-client tabs */
  .tabs { margin:0 0 1.6rem; }
  .tab-bar { display:flex; gap:0.1rem; flex-wrap:wrap; border-bottom:1px solid var(--rule); margin-bottom:1.2rem; }
  .tab-bar button {
    font-family:inherit; font-size:0.86rem; cursor:pointer; background:transparent;
    color:var(--muted); border:0; border-bottom:2px solid transparent;
    padding:0.55rem 0.9rem; margin-bottom:-1px; border-radius:0;
  }
  .tab-bar button:hover { color:var(--ink); }
  .tab-bar button[aria-selected="true"] {
    color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600;
  }
  .tab-pane[hidden] { display:none; }

  /* Prose code blocks get the same dark treatment as the API panels, with a
     labelled header -- a washed-out inline block reads as an afterthought next
     to the reference pages. */
  .prose .cb { margin:0 0 1.2rem; }
  .cb-head .cb-lang { color:#9C8DB5; }
  .cb > .cb-head { border-radius:7px 7px 0 0; }
  .cb pre { border-radius:0 0 7px 7px; }
  .cb-actions { position:relative; display:flex; gap:0.15rem; margin-left:auto; }
  .cb-btn {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:1.75rem; height:1.6rem; padding:0; border:0; border-radius:5px; cursor:pointer;
    background:transparent; color:#9C8DB5;
  }
  .cb-btn:hover, .cb-btn[aria-expanded="true"] { color:#E4DCF0; background:#2C2140; }
  .cb-btn.cb-ai { color:#B08BE0; }
  .cb-btn[data-tip]:hover::after, .cb-btn[data-tip]:focus-visible::after, .cb-btn.tip-on::after {
    content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); right:-0.25rem; z-index:5;
    white-space:nowrap; pointer-events:none; padding:0.35rem 0.6rem; border-radius:6px;
    background:#2A3342; color:#fff; font-family:var(--sans); font-size:0.75rem;
    letter-spacing:0; text-transform:none; box-shadow:0 4px 14px rgba(0,0,0,.25);
  }
  .cb-btn[aria-expanded="true"]::after { display:none; }
  .ai-menu {
    position:absolute; top:calc(100% + 6px); right:0; z-index:6; min-width:11rem; display:grid;
    padding:0.3rem; background:var(--raised); border:1px solid var(--rule-strong); border-radius:8px;
    box-shadow:0 12px 30px rgba(34,17,58,.25);
  }
  .ai-menu a {
    padding:0.45rem 0.65rem; border-radius:5px; color:var(--ink); text-decoration:none;
    font-family:var(--sans); font-size:0.82rem; letter-spacing:0; text-transform:none;
  }
  .ai-menu a:hover, .ai-menu a:focus-visible { background:var(--accent-soft); }

  /* ---- guide layout: content plus "On this page" ---- */
  main > .doc { max-width:var(--col); margin:0 auto; padding:0 2rem; }
  .toc { display:none; }
  .toc-title {
    margin:0 0 0.6rem; font-size:0.7rem; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--faint);
  }
  .toc ul { list-style:none; margin:0; padding:0; border-left:1px solid var(--rule); }
  .toc a {
    display:block; margin-left:-1px; padding:0.28rem 0 0.28rem 0.85rem; border-left:2px solid transparent;
    color:var(--muted); text-decoration:none; font-size:0.8rem; line-height:1.4;
  }
  .toc .d1 a { padding-left:1.7rem; font-size:0.78rem; }
  .toc a:hover { color:var(--ink); }
  .toc a[aria-current] { color:var(--accent-ink); border-left-color:var(--accent); font-weight:600; }
  .prose li[id], .prose p[id] { scroll-margin-top:calc(var(--bar) + 1rem); }
  .toc-inline {
    margin:0 0 1.75rem; border:1px solid var(--rule); border-radius:8px; background:var(--sunken);
  }
  .toc-inline summary {
    cursor:pointer; padding:0.6rem 0.9rem; font-size:0.72rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  }
  .toc-inline ul { list-style:none; margin:0; padding:0 0.9rem 0.7rem; }
  .toc-inline a { display:block; padding:0.22rem 0; color:var(--accent); text-decoration:none; font-size:0.85rem; }
  .toc-inline .d1 a { padding-left:0.9rem; }
  @media (min-width:72rem) {
    body.has-toc { --col:72rem; }
    .has-toc .doc { display:grid; grid-template-columns:minmax(0,1fr) 12rem; gap:2.75rem; align-items:start; }
    .toc {
      display:block; position:sticky; top:calc(var(--bar) + 1.5rem);
      max-height:calc(100vh - var(--bar) - 3rem); overflow-y:auto;
    }
    .toc-inline { display:none; }
  }

  /* ---- page end: feedback and help ---- */
  .page-end { margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--rule); }
  .api-end .page-end { max-width:56rem; margin-top:0; }
  .api-end { border-top:1px solid var(--rule); padding-top:1.5rem; }
  .api-end .page-end { border-top:0; padding-top:0; }
  .helpful { display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem 0.9rem; }
  .helpful-q { margin:0 0.4rem 0 0; font-weight:650; font-size:1.05rem; color:var(--ink); }
  .vote {
    display:inline-flex; align-items:center; gap:0.4rem; cursor:pointer;
    font:inherit; font-size:0.85rem; padding:0.32rem 0.75rem; border-radius:6px;
    background:var(--raised); color:var(--ink); border:1px solid var(--rule-strong);
  }
  .vote:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-ink); }
  .vote:disabled { cursor:default; opacity:0.5; }
  .vote.on { opacity:1; border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
  .helpful-done, .helpful-more { flex-basis:100%; margin:0; color:var(--muted); font-size:0.85rem; }
  .help-links {
    list-style:none; display:grid; gap:0.7rem; margin:1.75rem 0 0; padding:1.5rem 0 0;
    border-top:1px solid var(--rule);
  }
  .help-links li { display:flex; align-items:center; gap:0.6rem; color:var(--muted); font-size:0.875rem; }
  .help-links svg { flex:none; color:var(--faint); }

  footer { border-top:1px solid var(--rule); margin-top:0; padding:1.75rem 0 3rem;
           color:var(--faint); font-size:0.79rem; }
  footer div { max-width:var(--col); margin:0 auto; padding:0 2rem; }
  @media (min-width:64.01rem) { footer { margin-left:17rem; } }

  #nav-toggle { display:none; }
  @media (max-width:64rem) {
    .shell { grid-template-columns:minmax(0,1fr); gap:0; }
    .sidenav { position:static; max-height:none; padding:1.25rem 1.25rem;
               border-right:0; border-bottom:1px solid var(--rule); }
    main { padding:0 0 4rem; }
    .inner, main > .prose, footer div { padding:0 1.25rem; }
    .op { padding:2rem 0; }
    .sidenav { display:none; }
    body.nav-open .sidenav { display:block; }
    #nav-toggle { display:inline-flex; }
    .page-head { padding-left:1.25rem; padding-right:1.25rem; }
    .prose ul,.prose ol { padding-left:1.3rem; }
    .bar { gap:0.5rem; padding:0 1rem; }
    .brand { margin-right:auto; }
    #search-open { min-width:0; }
    #search-open kbd { display:none; }
    .prose td:last-child { min-width:11rem; }
    .op-head .sec-tools { flex-basis:100%; margin-left:0; }
    .op-head { flex-wrap:wrap; }
    .cb-head { flex-wrap:wrap; gap:.4rem; }
    .langs { overflow-x:auto; max-width:100%; }
    .op-grid { grid-template-columns:minmax(0,1fr); }
    .panel { position:static; }
    .bar nav { display:none; }
  }
  @media (max-width:26rem) { .brand span { display:none; } }
  @media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
  .ops .toc-group { margin:.75rem 0 .25rem; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .sidenav .nav-label { display:block; padding:.3rem 0; color:var(--faint); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }