/* ══════════════════════════════════════════════════════════════════════════
     Kinimatic Developer Portal — documentation design system.

     This is an EXTERNAL product surface, not the internal app, so it follows
     docs-site conventions rather than the dashboard's: a light navigation rail
     (light mode) instead of the app's #111 well, a wider measure, a real type
     scale, and one accent — brand blue — carrying every interactive state.
     Brand identity rides on the mark and the accent, not on chrome weight.
     ══════════════════════════════════════════════════════════════════════════ */
  :root{
    /* surfaces */
    --background:#ffffff;          /* page */
    --card:#ffffff;                /* raised panels */
    --subtle:#f7f8fa;              /* wells, inline code, table heads */
    --rail:#fcfcfd;                /* navigation rail */
    --rail-text:#404652;
    --rail-text-dim:#7b8496;
    --rail-border:#e8eaee;

    /* ink */
    --text:#101319;
    --grey-strong:#3d434f;         /* body prose */
    --color-grey:#6b7382;          /* meta, captions */

    /* lines */
    --color-border:#e7e9ee;
    --border-strong:#d3d7e0;

    /* accents */
    --color-blue:#3859fd; --color-blue-10:#3859fd0f; --color-blue-20:#3859fd26;
    --color-green:#12945a; --color-green-10:#12945a14;
    --color-yellow:#a8861f;
    --color-orange:#c2680c; --color-orange-10:#c2680c14;
    --color-red:#d92d20;  --color-red-15:#d92d2014;
    --color-purple:#7c4ddb; --color-purple-10:#7c4ddb14;

    /* code surface — neutral slate ink, never pure black */
    --code-bg:#0f1219; --code-bg-h:#161a23; --code-text:#e4e8f1;
    --code-line:#252b38; --code-dim:#8a93a6;

    --radius:10px; --radius-md:7px; --radius-sm:4px;
    --top-h:57px; --rail-w:290px;
    --shadow-sm:0 1px 2px rgba(16,19,25,.05);
    --shadow:0 1px 3px rgba(16,19,25,.06), 0 12px 28px -18px rgba(16,19,25,.22);
    --shadow-lg:0 24px 64px -20px rgba(16,19,25,.35);
    --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --background:#0c0e13; --card:#12151c; --subtle:#181c25; --rail:#0a0c10;
      --rail-text:#c2c9d6; --rail-text-dim:#7c8698; --rail-border:#1d222c;
      --text:#f2f4f8; --grey-strong:#c8cedb; --color-grey:#8d97a8;
      --color-border:#1e232e; --border-strong:#2c3341;
      --color-blue:#6b85ff; --color-blue-10:#6b85ff1c; --color-blue-20:#6b85ff33;
      --color-green:#3ecf8e; --color-green-10:#3ecf8e18;
      --color-yellow:#d6c168;
      --color-orange:#f0a04b; --color-orange-10:#f0a04b1a;
      --color-red:#ff6b63;  --color-red-15:#ff6b631f;
      --color-purple:#b18aff; --color-purple-10:#b18aff1a;
      --code-bg:#080a0e; --code-bg-h:#0e1116; --code-line:#1c212b;
      --shadow-sm:0 1px 2px rgba(0,0,0,.4);
      --shadow:0 1px 3px rgba(0,0,0,.5), 0 12px 28px -18px rgba(0,0,0,.8);
      --shadow-lg:0 24px 64px -20px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --background:#0c0e13; --card:#12151c; --subtle:#181c25; --rail:#0a0c10;
    --rail-text:#c2c9d6; --rail-text-dim:#7c8698; --rail-border:#1d222c;
    --text:#f2f4f8; --grey-strong:#c8cedb; --color-grey:#8d97a8;
    --color-border:#1e232e; --border-strong:#2c3341;
    --color-blue:#6b85ff; --color-blue-10:#6b85ff1c; --color-blue-20:#6b85ff33;
    --color-green:#3ecf8e; --color-green-10:#3ecf8e18;
    --color-yellow:#d6c168;
    --color-orange:#f0a04b; --color-orange-10:#f0a04b1a;
    --color-red:#ff6b63;  --color-red-15:#ff6b631f;
    --color-purple:#b18aff; --color-purple-10:#b18aff1a;
    --code-bg:#080a0e; --code-bg-h:#0e1116; --code-line:#1c212b;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 3px rgba(0,0,0,.5), 0 12px 28px -18px rgba(0,0,0,.8);
    --shadow-lg:0 24px 64px -20px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--background); color:var(--text);
    font-family:var(--font-sans); font-size:15px; line-height:1.68;
    letter-spacing:-.006em; -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  code,.mono,pre,kbd{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
  a{color:var(--color-blue)}
  :focus-visible{outline:2px solid var(--color-blue); outline-offset:2px; border-radius:var(--radius-sm)}
  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
  ::selection{background:var(--color-blue-20)}

  /* thin scrollbars — a fat native bar inside a code panel is the loudest
     "unfinished mockup" tell there is */
  .side,pre,.tw,.scen{scrollbar-width:thin}
  .side::-webkit-scrollbar,pre::-webkit-scrollbar,.tw::-webkit-scrollbar,
  .scen::-webkit-scrollbar{width:8px; height:8px}
  .side::-webkit-scrollbar-thumb,.tw::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px}
  pre::-webkit-scrollbar-thumb,.scen::-webkit-scrollbar-thumb{background:#2f3746; border-radius:8px}
  .side::-webkit-scrollbar-track,pre::-webkit-scrollbar-track{background:transparent}

  .shell{display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh}

  /* ─────────────────────────── navigation rail ─────────────────────────── */
  .side{
    background:var(--rail); border-right:1px solid var(--rail-border);
    color:var(--rail-text); display:flex; flex-direction:column; gap:2px;
    padding:0 0 24px; position:sticky; top:0; align-self:start;
    height:100vh; overflow-y:auto; overscroll-behavior:contain;
  }
  .brand{
    display:flex; align-items:center; gap:11px; padding:0 20px;
    height:var(--top-h); flex:none; position:sticky; top:0; z-index:3;
    background:var(--rail); border-bottom:1px solid var(--rail-border);
  }
  .brand .logo{display:block; width:96px; height:15px; color:var(--text); flex:none}
  .brand span{
    font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    color:var(--color-blue); background:var(--color-blue-10);
    padding:2px 7px; border-radius:100px; white-space:nowrap;
  }

  /* search — every docs site has one; its absence is felt immediately */
  .search{position:relative; padding:16px 14px 10px; flex:none}
  .search svg{position:absolute; left:26px; top:50%; transform:translateY(-3px);
              width:14px; height:14px; color:var(--color-grey); pointer-events:none}
  .search input{
    width:100%; font:inherit; font-size:13.5px; color:var(--text);
    background:var(--subtle); border:1px solid var(--color-border);
    border-radius:var(--radius-md); padding:7px 46px 7px 32px;
  }
  .search input::placeholder{color:var(--color-grey)}
  .search input:focus{outline:none; border-color:var(--color-blue); background:var(--card);
                      box-shadow:0 0 0 3px var(--color-blue-10)}
  .search kbd{
    position:absolute; right:24px; top:50%; transform:translateY(-3px);
    font-size:10.5px; font-weight:600; color:var(--color-grey);
    background:var(--card); border:1px solid var(--color-border);
    border-bottom-width:2px; border-radius:4px; padding:1px 5px; pointer-events:none;
  }

  .grp{padding:0 10px; display:flex; flex-direction:column; gap:1px; margin-top:14px}
  /* display:flex beats the [hidden] UA rule, so search-filtered groups need this */
  .grp[hidden]{display:none}
  .grp h3{
    font-size:10.5px; letter-spacing:.075em; text-transform:uppercase;
    color:var(--rail-text-dim); margin:0 0 5px; font-weight:650;
    display:flex; align-items:center; gap:6px; cursor:pointer;
    padding:5px 10px; border-radius:var(--radius-sm); user-select:none;
  }
  .grp h3:hover{color:var(--text); background:var(--subtle)}
  .grp h3::after{
    content:""; width:5px; height:5px; margin-left:auto; opacity:.55;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-1px); transition:transform .16s ease;
  }
  .grp.closed h3::after{transform:rotate(-45deg) translateX(-1px)}
  .grp.closed .nav{display:none}
  .nav{
    display:flex; align-items:center; gap:9px; width:100%; text-align:left;
    background:none; border:0; padding:6px 10px; border-radius:var(--radius-md);
    color:var(--rail-text); font:inherit; font-size:13.5px; cursor:pointer;
    line-height:1.4; position:relative; transition:background .12s ease, color .12s ease;
  }
  .nav:hover{background:var(--subtle); color:var(--text)}
  /* selected state: tinted, not a saturated slab. Twenty solid blue bars down a
     rail is what made the old rail read as a toolbar rather than a contents list. */
  .nav[aria-selected="true"]{background:var(--color-blue-10); color:var(--color-blue); font-weight:600}
  .nav[aria-selected="true"]::before{
    content:""; position:absolute; left:-10px; top:5px; bottom:5px;
    width:2px; border-radius:0 2px 2px 0; background:var(--color-blue);
  }
  .nav .ct{
    margin-left:auto; font-family:var(--font-mono); font-size:11.5px; font-style:normal;
    color:var(--color-grey); flex:none;
  }
  .nav[aria-selected="true"] .ct{color:var(--color-blue); opacity:.8}

  /* method labels — quiet tinted type, not filled blocks */
  .verb{
    font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.04em;
    padding:2px 0; border-radius:3px; width:42px; text-align:left; flex:none;
    text-transform:uppercase;
  }
  .v-get{color:var(--color-green)} .v-post{color:var(--color-blue)}
  .v-put{color:var(--color-orange)} .v-patch{color:var(--color-purple)}
  .nav[aria-selected="true"] .verb{opacity:.95}

  .side-foot{
    margin-top:auto; padding:16px 20px 0; display:flex; flex-direction:column; gap:8px;
    border-top:1px solid var(--rail-border); margin-left:10px; margin-right:10px;
  }
  .side-foot a{color:var(--color-grey); font-size:13px; text-decoration:none}
  .side-foot a:hover{color:var(--color-blue)}
  .side .empty{padding:8px 20px; font-size:13px; color:var(--color-grey)}

  /* ───────────────────────────── top bar ───────────────────────────── */
  .top{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:0 32px; height:var(--top-h);
    /* solid, not translucent: backdrop-filter on a sticky bar creates a new
       containing block and drops paints in some engines */
    background:var(--background);
    border-bottom:1px solid var(--color-border);
    position:sticky; top:0; z-index:20;
  }
  .who{display:flex; align-items:center; gap:9px; margin-right:auto; min-width:0}
  .who b{font-size:13.5px; font-weight:600; white-space:nowrap}
  .who span{
    font-family:var(--font-mono); font-size:11px; color:var(--color-grey);
    background:var(--subtle); border:1px solid var(--color-border);
    padding:1px 6px; border-radius:100px; white-space:nowrap;
  }
  .base{
    font-family:var(--font-mono); font-size:12px; color:var(--color-grey);
    background:var(--subtle); border:1px solid var(--color-border);
    padding:4px 10px; border-radius:100px; white-space:nowrap;
  }
  .seg{
    display:inline-flex; background:var(--subtle); border:1px solid var(--color-border);
    border-radius:var(--radius-md); padding:2px; gap:2px;
  }
  .seg button{
    font:inherit; font-size:12.5px; font-weight:550; background:none; color:var(--color-grey);
    border:0; padding:4px 12px; border-radius:5px; cursor:pointer; transition:all .12s ease;
  }
  .seg button:hover{color:var(--text)}
  .seg button[aria-pressed="true"]{
    background:var(--card); color:var(--text); font-weight:600; box-shadow:var(--shadow-sm);
  }

  /* ───────────────────────────── panels ───────────────────────────── */
  .panel[hidden]{display:none}
  .wrap{padding:44px 40px 96px; max-width:1080px}
  .phead{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:8px}
  h1{
    font-size:31px; line-height:1.2; font-weight:640; letter-spacing:-.026em;
    margin:0; text-wrap:balance;
  }
  .lede{
    color:var(--grey-strong); font-size:16.5px; line-height:1.62;
    margin:10px 0 34px; max-width:66ch; letter-spacing:-.008em;
  }
  h2.sec{
    font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--color-grey);
    margin:40px 0 14px; font-weight:650;
    padding-bottom:9px; border-bottom:1px solid var(--color-border);
  }

  .card{
    background:var(--card); border:1px solid var(--color-border);
    border-radius:var(--radius); margin-bottom:20px; overflow:hidden;
  }
  .card-h{
    display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:14px 20px;
    border-bottom:1px solid var(--color-border); background:var(--card);
  }
  .card-h h2{font-size:14.5px; font-weight:600; margin:0; letter-spacing:-.012em}
  .card-h .grow{margin-left:auto; display:flex; gap:8px}
  .card-b{padding:20px}

  /* ── badges ── */
  .pill{
    display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
    letter-spacing:.02em; padding:2px 8px; border-radius:100px; white-space:nowrap;
    border:1px solid transparent;
  }
  .p-ok{background:var(--color-green-10); color:var(--color-green); border-color:var(--color-green-10)}
  .p-warn{background:var(--color-orange-10); color:var(--color-orange)}
  .p-crit{background:var(--color-red-15); color:var(--color-red)}
  .p-mute{background:var(--subtle); color:var(--color-grey); border-color:var(--color-border)}
  .p-acc{background:var(--color-blue-10); color:var(--color-blue)}
  .dot{width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}

  .scope{
    display:inline-block; font-family:var(--font-mono); font-size:11.5px;
    background:var(--subtle); color:var(--grey-strong);
    border:1px solid var(--color-border); padding:2px 7px; border-radius:var(--radius-sm);
  }
  .chips{display:flex; flex-wrap:wrap; gap:6px}

  /* ── buttons ── */
  .btn{
    font:inherit; font-size:13px; font-weight:550; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--border-strong); background:var(--card); color:var(--text);
    padding:6px 13px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
    transition:background .12s ease, border-color .12s ease, transform .06s ease;
  }
  .btn:hover{background:var(--subtle); border-color:var(--color-grey)}
  .btn:active{transform:translateY(.5px)}
  .btn.primary{
    background:var(--color-blue); border-color:var(--color-blue); color:#fff; font-weight:600;
    box-shadow:0 1px 2px rgba(56,89,253,.28);
  }
  .btn.primary:hover{background:color-mix(in srgb,var(--color-blue) 88%,#000); border-color:transparent}
  .btn.danger{color:var(--color-red); border-color:var(--color-red-15); background:var(--color-red-15)}
  .btn.danger:hover{background:var(--color-red); color:#fff; border-color:var(--color-red)}
  .btn.ghost{
    background:rgba(255,255,255,.07); border-color:#2c3341; color:var(--code-text);
    box-shadow:none;
  }
  .btn.ghost:hover{background:rgba(255,255,255,.13); border-color:#3c4453}
  .btn:disabled{opacity:.5; cursor:not-allowed}

  /* ── definition lists ── */
  dl.kv{display:grid; grid-template-columns:auto 1fr; gap:11px 26px; margin:0}
  dl.kv dt{
    font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--color-grey); font-weight:650; align-self:center;
  }
  dl.kv dd{margin:0; font-family:var(--font-mono); font-size:13px; align-self:center}

  /* ── secrets ── */
  .secret{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:12px 15px; background:var(--subtle);
  }
  .secret + .secret{margin-top:9px}
  .secret .val{font-family:var(--font-mono); font-size:13px}
  .secret .meta{margin-left:auto; display:flex; align-items:center; gap:11px}
  .secret .age{font-family:var(--font-mono); font-size:11.5px; color:var(--color-grey)}
  .secret.fresh{border-left:3px solid var(--color-green)}
  .secret.retiring{border-left:3px solid var(--color-orange)}

  .overlap{display:flex; align-items:center; gap:11px; margin-top:14px; font-size:12.5px; color:var(--color-grey)}
  .bar{
    flex:1; height:6px; background:var(--subtle); border:1px solid var(--color-border);
    border-radius:100px; overflow:hidden; min-width:110px;
  }
  .bar i{display:block; height:100%; background:var(--color-orange); border-radius:100px}
  .bar.acc i{background:var(--color-blue)}

  /* ── callouts ── */
  .note{
    display:flex; gap:11px; background:var(--subtle);
    border:1px solid var(--color-border); border-left:3px solid var(--color-blue);
    padding:13px 16px; border-radius:var(--radius-md); margin:0 0 24px;
    font-size:14px; line-height:1.62; color:var(--grey-strong);
  }
  .note b{color:var(--text)}
  .note.warn{border-left-color:var(--color-orange); background:var(--color-orange-10)}
  .note-in{margin:18px 0 0}

  /* ══════════ API EXPLORER (Swagger UI) ══════════
     Real Swagger UI, inlined — the same renderer the Confluence "<Domain> — API" pages use via the
     `swagger-integration` macro. A bespoke operation browser was built here first and thrown away:
     it was a worse version of a thing everyone already recognises, and it would have had to be
     maintained. The only CSS below is what fits Swagger UI into this portal's shell and dark theme. */
  .swx{background:var(--card); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden}
  .swx .swagger-ui{font-family:inherit; color:var(--text)}
  .swx .swagger-ui .info,
  .swx .swagger-ui .scheme-container{display:none}   /* the portal's own header already says this */
  .swx .swagger-ui .wrapper{padding:0 18px; max-width:none}
  .swx .swagger-ui .opblock-tag{font-family:inherit; font-size:16px}
  .swx .swagger-ui .opblock .opblock-summary-path{font-family:var(--font-mono)}

  .mockflag{
    font-size:11px; font-weight:600; color:var(--color-orange);
    background:var(--color-orange-10); padding:2px 7px; border-radius:4px;
  }


  /* ── tables ── */
  .tw{
    overflow-x:auto; background:var(--card); border:1px solid var(--color-border);
    border-radius:var(--radius); margin-bottom:20px;
  }
  table{border-collapse:collapse; width:100%; min-width:560px}
  th{
    text-align:left; font-size:10.5px; letter-spacing:.075em; text-transform:uppercase;
    color:var(--color-grey); font-weight:650; padding:11px 18px;
    border-bottom:1px solid var(--color-border); background:var(--subtle); white-space:nowrap;
  }
  td{padding:12px 18px; border-top:1px solid var(--color-border); vertical-align:top; font-size:13.5px}
  tbody tr:first-child td{border-top:0}
  tbody tr:hover td{background:var(--subtle)}
  td.f{font-family:var(--font-mono); font-size:12.5px; white-space:nowrap}
  td.t{font-family:var(--font-mono); font-size:11.5px; color:var(--color-grey); white-space:nowrap}
  td.num{text-align:right; font-family:var(--font-mono)}
  .req{color:var(--color-red); font-weight:700; font-size:11px; margin-left:4px}
  .s2{color:var(--color-green); font-weight:600} .s4{color:var(--color-orange); font-weight:600}
  .s5{color:var(--color-red); font-weight:600}
  .muted{color:var(--color-grey)}
  .desc-sm{font-size:12.5px; color:var(--color-grey)}

  /* ── metrics ── */
  .meters{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:1px; background:var(--color-border);
  }
  .meter{background:var(--card); padding:17px 20px; display:flex; flex-direction:column; gap:5px}
  .meter .lab{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-grey); font-weight:650}
  .meter .big{
    font-family:var(--font-sans); font-size:27px; font-weight:600; letter-spacing:-.03em;
    line-height:1.15; font-variant-numeric:tabular-nums;
  }
  .meter .big.w{color:var(--color-orange)}
  .meter .foot{font-size:12px; color:var(--color-grey)}
  .spark{display:block; width:100%; height:46px}

  /* ─────────────────── API reference: two-column ─────────────────── */
  .doc{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,540px);
    align-items:start; gap:44px; max-width:1500px;
  }
  .doc .left{padding:36px 0 96px 40px; min-width:0; max-width:760px}
  .doc .right{
    padding:36px 40px 96px 0; position:sticky; top:var(--top-h); min-width:0;
    max-height:calc(100vh - var(--top-h)); overflow-y:auto; scrollbar-width:thin;
  }
  @media (max-width:1240px){
    .doc{grid-template-columns:minmax(0,1fr); gap:0; max-width:900px}
    .doc .left{padding:36px 40px 8px}
    .doc .right{position:static; padding:0 40px 72px; max-height:none; overflow:visible}
  }
  @media (max-width:900px){
    .shell{grid-template-columns:1fr}
    .side{
      flex-direction:row; align-items:center; overflow-x:auto; overflow-y:visible;
      padding:10px 16px; gap:12px; height:auto; position:sticky; top:0; z-index:21;
      border-right:0; border-bottom:1px solid var(--rail-border);
    }
    .side-foot,.grp h3,.search{display:none}
    .brand{height:auto; padding:0 6px 0 0; border:0; position:static; background:none}
    .grp{flex-direction:row; gap:4px; margin:0; padding:0}
    .grp.closed .nav{display:flex}
    .nav{white-space:nowrap; width:auto}
    .nav[aria-selected="true"]::before{display:none}
    .top{padding:0 18px}
    .wrap,.doc .left,.doc .right{padding-left:18px; padding-right:18px}
    .wrap{padding-top:28px}
  }

  /* signature */
  .crumb{
    display:flex; align-items:center; gap:8px; font-size:12.5px;
    color:var(--color-grey); margin-bottom:20px;
  }
  .crumb a{color:var(--color-grey); text-decoration:none}
  .crumb a:hover{color:var(--color-blue)}
  .sig{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
    background:var(--subtle); border:1px solid var(--color-border);
    border-radius:var(--radius-md); padding:8px 12px; width:fit-content; max-width:100%;
  }
  .sig .verb{
    font-size:10.5px; padding:3px 8px; width:auto; text-align:center; border-radius:var(--radius-sm);
    color:#fff;
  }
  .sig .v-get{background:var(--color-green)} .sig .v-post{background:var(--color-blue)}
  .sig .v-put{background:var(--color-orange)} .sig .v-patch{background:var(--color-purple)}
  .sig .path{
    font-family:var(--font-mono); font-size:14.5px; font-weight:600;
    word-break:break-all; letter-spacing:-.01em;
  }

  /* ── code panel ── */
  .code{
    background:var(--code-bg); border:1px solid var(--code-line);
    border-radius:var(--radius); overflow:hidden; margin-bottom:16px;
    box-shadow:var(--shadow);
  }
  .code-h{
    display:flex; align-items:center; gap:10px; padding:9px 12px;
    border-bottom:1px solid var(--code-line); background:var(--code-bg-h);
  }
  .code-h span.lbl{
    font-size:10.5px; letter-spacing:.085em; text-transform:uppercase;
    color:var(--code-dim); font-weight:650;
  }
  .code-h .grow{margin-left:auto; display:flex; align-items:center; gap:7px}
  pre{
    margin:0; padding:16px 18px; overflow-x:auto; color:var(--code-text);
    font-size:12.5px; line-height:1.75; white-space:pre; tab-size:2;
  }
  pre .k{color:#89b4ff} pre .s{color:#8fe0ae} pre .n{color:#f5c67a}
  pre .c{color:#6b7488; font-style:italic} pre .m{color:#cba6f7; font-weight:700}
  .status{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    border-bottom:1px solid var(--code-line); background:var(--code-bg-h);
    font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  }
  .s-2xx{color:#5fd39b} .s-4xx{color:#f0b661} .s-5xx{color:#ff7a70}
  .ms{margin-left:auto; color:var(--code-dim); font-size:11.5px; font-weight:400}

  /* language switcher — a real segmented control. The native <select> that
     used to sit here was the single loudest un-designed element on the page. */
  .langs{display:inline-flex; align-items:center; gap:6px}
  .langtabs{
    display:inline-flex; gap:1px; background:rgba(255,255,255,.06);
    border-radius:var(--radius-sm); padding:2px;
  }
  .langtabs button{
    font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.01em;
    background:none; border:0; color:var(--code-dim); padding:3px 8px;
    border-radius:3px; cursor:pointer; transition:all .12s ease; white-space:nowrap;
  }
  .langtabs button:hover{color:var(--code-text)}
  .langtabs button[aria-selected="true"]{background:rgba(255,255,255,.13); color:#fff}
  .copy{
    font:inherit; font-size:11px; font-weight:600; cursor:pointer;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11);
    color:var(--code-dim); padding:3px 9px; border-radius:var(--radius-sm);
    transition:all .12s ease;
  }
  .copy:hover{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.2)}

  /* scenario tabs inside the code rail */
  .scen{
    display:flex; gap:2px; overflow-x:auto; padding:7px 9px;
    border-bottom:1px solid var(--code-line); background:var(--code-bg-h);
  }
  .scen button{
    font:inherit; font-size:12px; font-weight:550; white-space:nowrap; background:none;
    border:0; color:var(--code-dim); padding:4px 10px; border-radius:5px; cursor:pointer;
    transition:all .12s ease;
  }
  .scen button:hover{color:var(--code-text)}
  .scen button[aria-selected="true"]{background:rgba(255,255,255,.11); color:#fff}
  .sample[hidden]{display:none}

  /* response scenario tabs in the prose column */
  .resp-tabs{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap}
  .resp-tabs button{
    font:inherit; font-size:12px; font-weight:550; cursor:pointer;
    background:var(--card); border:1px solid var(--color-border); color:var(--color-grey);
    padding:4px 11px; border-radius:100px; transition:all .12s ease;
  }
  .resp-tabs button:hover{border-color:var(--border-strong); color:var(--text)}
  .resp-tabs button[aria-selected="true"]{
    border-color:var(--color-blue); color:var(--color-blue);
    background:var(--color-blue-10); font-weight:600;
  }

  /* ── parameter rows ── */
  .params-h{display:flex; align-items:center; gap:10px; margin:40px 0 2px}
  .params-h .lbl{font-size:14.5px; font-weight:600; color:var(--text)}
  .params-h .fmt{
    font-family:var(--font-mono); font-size:10.5px; color:var(--color-grey);
    border:1px solid var(--color-border); background:var(--subtle);
    padding:1px 7px; border-radius:100px;
  }
  .params-h .exp{
    margin-left:auto; font:inherit; font-size:12.5px; font-weight:550; cursor:pointer;
    background:none; border:0; color:var(--color-blue); padding:2px 0;
  }
  .params-h .exp:hover{text-decoration:underline}

  .params{border-top:1px solid var(--color-border); margin-top:12px}
  .param{border-bottom:1px solid var(--color-border); padding:15px 0 15px 22px; position:relative}
  .param .car{
    position:absolute; left:-2px; top:15px; width:18px; height:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; color:var(--color-grey); background:none; border:0;
    padding:0; cursor:pointer; line-height:1; border-radius:var(--radius-sm);
    transition:transform .16s ease, background .12s ease, color .12s ease;
  }
  .param .car:hover{background:var(--subtle); color:var(--text)}
  .param.open > .car{transform:rotate(90deg)}
  .param .nm{
    font-family:var(--font-mono); font-size:13.5px; font-weight:600;
    color:var(--text); letter-spacing:-.01em;
  }
  .param .ty{font-size:12.5px; color:var(--color-grey)}
  .param .ty b{font-weight:600; color:var(--grey-strong)}
  .param .ty b.rq{color:var(--color-orange)}
  .param .ty b.op{color:var(--color-grey); font-weight:550}
  .param p{margin:5px 0 0; font-size:14px; line-height:1.62; color:var(--grey-strong); max-width:68ch}
  .param ul{margin:8px 0 0; padding-left:19px; font-size:13.5px; color:var(--grey-strong)}
  .param li{margin:3px 0}
  .nested{margin:14px 0 0; padding-left:16px; border-left:2px solid var(--color-border)}
  .nested[hidden]{display:none}
  .nested .param{padding:13px 0 13px 22px}
  .nested .param:last-child{border-bottom:0; padding-bottom:2px}
  .enum{
    display:inline-block; font-family:var(--font-mono); font-size:11.5px;
    background:var(--subtle); color:var(--grey-strong);
    border:1px solid var(--color-border); padding:1px 6px;
    border-radius:var(--radius-sm); margin:0 4px 3px 0;
  }

  .spin{
    width:11px; height:11px; border:2px solid rgba(255,255,255,.22);
    border-top-color:#fff; border-radius:50%; animation:sp .6s linear infinite;
    display:inline-block; flex:none;
  }
  @keyframes sp{to{transform:rotate(360deg)}}

  /* ── modal ── */
  .ov{
    position:fixed; inset:0; background:rgba(8,10,14,.6);
    backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center;
    padding:24px; z-index:50; animation:fade .14s ease;
  }
  @keyframes fade{from{opacity:0}}
  .ov[hidden]{display:none}
  .modal{
    background:var(--card); border:1px solid var(--color-border); border-radius:14px;
    box-shadow:var(--shadow-lg); width:100%; max-width:540px;
    max-height:90vh; overflow-y:auto; animation:pop .16s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes pop{from{opacity:0; transform:translateY(6px) scale(.99)}}
  .modal-h{display:flex; align-items:center; padding:18px 22px; border-bottom:1px solid var(--color-border)}
  .modal-h h2{margin:0; font-size:16px; font-weight:620; letter-spacing:-.015em}
  .modal-h button{
    margin-left:auto; background:none; border:0; color:var(--color-grey);
    font-size:20px; cursor:pointer; line-height:1; padding:0 2px; border-radius:var(--radius-sm);
  }
  .modal-h button:hover{color:var(--text)}
  .modal-b{padding:22px}
  .modal-f{
    display:flex; gap:9px; justify-content:flex-end; padding:16px 22px;
    border-top:1px solid var(--color-border); background:var(--subtle);
  }
  .fld{display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
  .fld label{
    font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--color-grey); font-weight:650;
  }
  .fld input{
    font:inherit; font-size:14px; padding:9px 12px; border-radius:var(--radius-md);
    border:1px solid var(--border-strong); background:var(--background); color:var(--text);
  }
  .fld input:focus{outline:none; border-color:var(--color-blue); box-shadow:0 0 0 3px var(--color-blue-10)}
  .fld .hint{font-size:12.5px; color:var(--color-grey); line-height:1.55}
  .scopes{display:flex; flex-direction:column; gap:9px}
  .scopes label{
    display:flex; align-items:flex-start; gap:9px; font-size:14px;
    text-transform:none; letter-spacing:0; color:var(--text); font-weight:400;
    border:1px solid var(--color-border); border-radius:var(--radius-md);
    padding:10px 12px; cursor:pointer; transition:border-color .12s ease, background .12s ease;
  }
  .scopes label:hover{border-color:var(--border-strong); background:var(--subtle)}
  .scopes input{width:16px; height:16px; margin:3px 0 0; accent-color:var(--color-blue); flex:none}
  .scopes code{font-size:12px; color:var(--color-grey); display:block; margin-top:1px}
  .reveal{
    background:var(--code-bg); border:1px solid var(--code-line); border-radius:var(--radius);
    padding:15px; margin-bottom:16px;
  }
  .reveal .lab{
    font-size:10.5px; letter-spacing:.085em; text-transform:uppercase;
    color:var(--code-dim); font-weight:650; margin-bottom:5px;
  }
  .reveal .val{
    font-family:var(--font-mono); font-size:13px; color:var(--code-text);
    word-break:break-all; margin-bottom:14px;
  }
  .reveal .val:last-child{margin-bottom:0}