/* ============================================================
   ScriptAbility Stack — Sandbox (redesigned)
   Self-contained: marketing fonts (Geist + Manrope) + JetBrains
   Mono for output, marketing design tokens, and a left API rail
   + workspace shell. Styles the sandbox's EXISTING class names
   so all sandbox.js hooks stay intact.
   Loaded directly by public/sandbox.html.
============================================================ */

/* ---- Fonts ---- */
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/geist-variable.woff2") format("woff2-variations"),
      url("/assets/fonts/geist-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("/assets/fonts/manrope-variable.woff2") format("woff2-variations"),
      url("/assets/fonts/manrope-variable.woff2") format("woff2");
}
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root{
  --bg:#fafaf7; --bg-soft:#f3f3ee; --bg-card:#ffffff;
  --line:rgba(15,15,20,0.08); --line-strong:rgba(15,15,20,0.14);
  --ink:#0e0e12; --ink-dim:#5a5a64; --ink-mute:#8c8c95;
  --purple:#8F53A1; --purple-deep:#6f3d80; --purple-rgb:143,83,161;
  --turquoise:#24A2B1; --turquoise-deep:#1d7e8a; --turquoise-rgb:36,162,177;
  --orange:#e1850a; --orange-deep:#d17a04; --orange-rgb:225,133,10;
  --green:#8cae1c; --green-deep:#80a100; --green-rgb:140,174,28;
  --red:#D51F2F; --red-rgb:213,31,47;
  /* Button surface + label colour — mirrors index.css. All four track the base
     accent, so a brand button always matches the accent used elsewhere on the
     page. The seam stays so a button can be retuned without moving the token. */
  --purple-btn:var(--purple);       --purple-btn-fg:#ffffff;
  --turquoise-btn:var(--turquoise); --turquoise-btn-fg:#ffffff;
  --orange-btn:var(--orange);       --orange-btn-fg:#ffffff;
  --green-btn:var(--green);         --green-btn-fg:#ffffff;
  /* sandbox brand aliases (existing markup references these) */
  --brand-purple:#8F53A1; --brand-turquoise:#24A2B1; --brand-orange:#e1850a;
  --brand-green:#8cae1c; --brand-mint:#24A2B1; --brand-mint-dark:#1d7e8a;
  --brand-purple-light:#8F53A1; --charcoal:#0e0e12;
  /* surfaces + component bases (re-pointed in dark mode) */
  --surface-elevated:#ffffff;
  --card-inset:rgba(255,255,255,0.6);
  --fill-subtle:rgba(15,15,20,0.04);
  --fill-subtle-strong:rgba(15,15,20,0.08);
  --tip-bg:var(--ink);
  --tip-fg:#ffffff;
  --font-display:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",monospace;
  --rail-w:280px;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"]{
  --bg:#252527; --bg-soft:#272729; --bg-card:#2a2a2c;
  --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.16);
  --ink:#f5f5f7; --ink-dim:#cccccc; --ink-mute:#9a9aa0;
  --purple:#b06fc4; --purple-deep:#cf8ce4; --purple-rgb:176,111,196;
  --turquoise:#2f93a0; --turquoise-deep:#53b2c0; --turquoise-rgb:47,147,160;
  --orange:#e1850a; --orange-deep:#ec8f21; --orange-rgb:225,133,10;
  --green:#8cae1c; --green-deep:#8eb121; --green-rgb:140,174,28;
  --red:#ef4452; --red-rgb:239,68,82;
  --purple-btn:var(--purple);       --purple-btn-fg:#ffffff;
  --turquoise-btn:var(--turquoise); --turquoise-btn-fg:#ffffff;
  --orange-btn:var(--orange);       --orange-btn-fg:#ffffff;
  --green-btn:var(--green);         --green-btn-fg:#ffffff;
  --brand-purple:#b06fc4; --brand-turquoise:#2f93a0; --brand-orange:#e1850a;
  --brand-green:#8cae1c; --brand-mint:#2f93a0; --brand-mint-dark:#2a8590;
  --brand-purple-light:#b06fc4; --charcoal:#f5f5f7;
  --surface-elevated:#333335;
  --card-inset:transparent;
  --fill-subtle:rgba(255,255,255,0.05);
  --fill-subtle-strong:rgba(255,255,255,0.10);
  --tip-bg:#f5f5f7;
  --tip-fg:#252527;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.55; min-height:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@keyframes ti-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
i.ti-loader-2{display:inline-block;animation:ti-spin .8s linear infinite;}
@media (prefers-reduced-motion:reduce){ i.ti-loader-2{animation:none;} }


/* ============================================================
   APP SHELL — left rail + workspace
============================================================ */
#sandboxApp{ position:relative; z-index:1; }
.app{ position:relative; z-index:1; display:flex; align-items:flex-start; width:100%; min-height:100vh; }

/* ---- Sidebar (built from .sandbox-header brand + .api-selector) ---- */
.rail{
  position:sticky; top:0; flex:none; width:280px; min-width:0; height:100vh;
  display:flex; flex-direction:column; padding:18px 14px 16px;
  background:var(--bg-card); box-shadow:1px 0 0 var(--line);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  transition:width .16s cubic-bezier(.2,.8,.2,1), background .16s ease, box-shadow .16s ease;
}
.rail::-webkit-scrollbar{display:none;}

/* brand */
.rail-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 6px 16px 8px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.rail-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.rail-brand .logo-icon, .rail-brand img{ flex-shrink:0; }
.rail-brand img{ width:36px; height:36px; transition:scale .35s ease, filter .35s ease; }
.rail-brand:hover img{ scale:1.08; filter:drop-shadow(0 6px 14px rgba(var(--purple-rgb),0.32)); }
.rail-brand .logo-text{ min-width:0; overflow:hidden; }
.rail-brand .logo-text h1{ font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.005em; line-height:1.05; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-brand .logo-text p{ margin-top:1px; line-height:1.2; font-family:var(--font-display); font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--ink-dim); }
.rail-collapse{ flex-shrink:0; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; color:var(--ink-mute); border:0; background:transparent; transition:color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.rail-collapse i{ font-size:20px; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.rail-collapse:hover{ color:var(--ink); }
.rail-collapse:active{ transform:scale(0.9); }

.rail-eyebrow{ padding:0 8px; margin-bottom:6px; white-space:nowrap; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }

/* ---- API rail items (from .api-selector / .api-card) ---- */
.api-selector{ display:block; }
.api-selector-container{ display:block; }
.api-nav-arrow{ display:none !important; }   /* carousel arrows not used in the rail */
.api-selector-inner{ display:flex; flex-direction:column; gap:2px; overflow:visible; padding:0 4px; }
.api-group{ display:flex; flex-direction:column; gap:2px; }
.api-group + .api-group{ margin-top:16px; }

.api-card{
  --c:var(--purple);
  display:flex; align-items:center; gap:4px; width:100%; min-width:42px; text-align:left;
  padding:5px; border-radius:10px; border:1px solid transparent;
  height:42px; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.api-card:not(:disabled):hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); }
.api-card:disabled{ --c:var(--ink-dim); cursor:not-allowed; opacity:.5; }
/* Bare icons: no tile. Grey in lists; the selected API's icon takes its colour. */
.api-card-icon{
  flex-shrink:0; width:32px; height:32px; display:grid; place-items:center;
  color:var(--ink-mute); transition:color .2s ease;
}
.api-card-icon i{ font-size:19px; }
.api-card-content{ display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
.api-card-name{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink-dim); line-height:1.2; white-space:nowrap; }
.api-card-coming-soon .api-card-content{ flex-direction:row; align-items:center; gap:6px; overflow:visible; }
.api-card-badge{
  flex-shrink:0; padding:2px 5px; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--bg-soft); color:var(--ink-dim); font-size:11px; font-weight:600; line-height:1.2; white-space:nowrap;
}
.api-card.active{
  background:color-mix(in srgb, var(--c) 10%, var(--surface-elevated));
  border-color:color-mix(in srgb, var(--c) 22%, transparent);
}
.api-card.active .api-card-icon{ color:var(--c); }

/* per-card color via existing --api-color (set in markup) */
.api-card[data-api="sig-normalizer"]{ --c:var(--purple); }
.api-card[data-api="ndc-analysis"]{ --c:var(--turquoise); }
.api-card[data-api="medcast"]{ --c:var(--turquoise); }
.api-card[data-api="pill-identifier"]{ --c:var(--purple); }
.api-card[data-api="rxcode"]{ --c:var(--orange); }
.api-card[data-api="medspeak-tts"]{ --c:var(--green); }
.api-card[data-api="translation-plus"]{ --c:var(--turquoise); }
.api-card[data-api="standard-translation"]{ --c:var(--turquoise); }
.api-card[data-api="video-api"]{ --c:var(--turquoise); }

/* ---- Rail bottom group: MCP + Back + Logout ---- */
.rail-foot-group{ margin-top:auto; padding:0; }
.rail-sep{ height:1px; background:var(--line); margin:10px 8px; }
.rail-util{
  display:flex; align-items:center; gap:4px; width:100%; text-align:left;
  padding:8px; border-radius:11px; border:1px solid transparent; min-height:46px; cursor:pointer;
  transition:background .18s ease;
}
.rail-util:hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); }
.rail-util .util-icon{
  flex-shrink:0; width:32px; height:32px; display:grid; place-items:center; font-size:19px;
  color:var(--ink-mute); transition:color .2s ease;
}
.rail-util .util-label{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:-0.005em; color:var(--ink-dim); white-space:nowrap; }
/* active (selected) MCP highlight — matches the api-card active treatment */
.rail-util.active{ background:color-mix(in srgb, var(--purple) 10%, var(--surface-elevated)); border-color:color-mix(in srgb, var(--purple) 22%, transparent); box-shadow:0 8px 22px rgba(15,15,20,0.05); }
#mcpToolsBtn.rail-util.active .util-icon{ color:var(--purple); }
#mcpToolsBtn.rail-util.active .util-label{ color:var(--purple-deep); }
/* .rail-util sets display:flex, so keep [hidden] utilities (Credits for internal
   sessions, Logout before auth) actually hidden */
.rail-util[hidden]{ display:none; }
/* Credits balance for API key / SOAR logins; select to refresh */
/* Amount sits right after the label; the refresh spinner takes the right edge */
.rail-credits .util-label{ display:flex; flex:1; align-items:center; gap:8px; min-width:0; }
.rail-credits__value{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.rail-credits.is-loading .rail-credits__value{ color:var(--ink-mute); }
/* Spinner beside the amount while a new balance is on its way */
/* .rail-credits prefix outranks the shared i.ti-loader-2 display rule */
.rail-credits .rail-credits__spinner{ display:none; margin-left:auto; font-size:13px; color:var(--green-deep); }
.rail-credits.is-refreshing .rail-credits__spinner{ display:inline-block; }
.rail-credits.is-refreshing .rail-credits__value{ color:var(--ink-dim); }
.rail-credits.is-unavailable .rail-credits__value{ color:var(--ink-mute); font-family:var(--font-body); font-size:12px; }
/* Coming Soon utilities (MCP Tools for now) mirror the disabled Live Translation card */
.rail-util:disabled{ cursor:not-allowed; opacity:.5; }
.rail-util:disabled:hover{ background:transparent; }
.rail-util-coming-soon .util-label{ display:inline-flex; align-items:center; gap:6px; }
#sandboxLogoutBtn.rail-util:hover .util-icon{ color:var(--red); }
#sandboxLogoutBtn.rail-util:hover .util-label{ color:var(--red); }
.sandbox-back-btn:hover .util-icon{ color:var(--ink); }
.sandbox-back-btn:hover .util-label{ color:var(--ink); }

/* ---- Workspace column ---- */
.main{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.sandbox-workspace{ padding:40px 44px 70px; }
.workspace-inner{ max-width:1400px; margin:0 auto; }

.api-workspace[hidden]{ display:none; }
.api-workspace{ position:relative; --c:var(--purple); --c-btn:var(--purple-btn); --c-btn-fg:var(--purple-btn-fg); opacity:1; animation:panelIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes panelIn{ from{transform:translateY(8px);} to{transform:none;} }
@media (prefers-reduced-motion:reduce){ .api-workspace, .docs-content{animation:none;} }
.api-workspace[data-product="sig-normalizer"]{ --c:var(--purple); --c-btn:var(--purple-btn); --c-btn-fg:var(--purple-btn-fg); }
.api-workspace[data-product="ndc-analysis"]{ --c:var(--turquoise); --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); }
.api-workspace[data-product="medcast"]{ --c:var(--turquoise); --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); }
.api-workspace[data-product="pill-identifier"]{ --c:var(--purple); --c-btn:var(--purple-btn); --c-btn-fg:var(--purple-btn-fg); }
.api-workspace[data-product="rxcode"]{ --c:var(--orange); --c-btn:var(--orange-btn); --c-btn-fg:var(--orange-btn-fg); }
.api-workspace[data-product="medspeak-tts"]{ --c:var(--green); --c-btn:var(--green-btn); --c-btn-fg:var(--green-btn-fg); }
.api-workspace[data-product="translation-plus"]{ --c:var(--turquoise); --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); }
.api-workspace[data-product="standard-translation"]{ --c:var(--turquoise); --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); }
.api-workspace[data-product="standard-translation"] [hidden]{ display:none; }
.api-workspace[data-product="standard-translation"] .sandbox-hint,
.api-workspace[data-product="standard-translation"] .optional-tag{ color:var(--ink-dim); }
.api-workspace[data-product="standard-translation"] .sandbox-input::placeholder,
.api-workspace[data-product="standard-translation"] .sandbox-textarea::placeholder{ color:var(--ink-dim); opacity:1; }
.api-workspace[data-product="video-api"]{ --c:var(--turquoise); --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); }
.api-workspace[data-product="mcp"]{ --c:var(--purple); --c-btn:var(--purple-btn); --c-btn-fg:var(--purple-btn-fg); }

/* ---- The orb field ---------------------------------------------------
   One definition, two surfaces. The sandbox and the docs want the same
   scatter at different sizes and strengths, so the geometry is written
   once here and each surface sets --orb-scale and --orb-alpha. Dark paper
   only has to move --orb-alpha.

   Eight orbs across four repeating bands, two per band. Bands rather than
   fixed positions because a percentage position in a full-height box
   drifts apart as an article grows: the five orbs that sat 285px apart on
   a short docs page sat 800px apart on a long one, which left whole
   screenfuls empty. A band holds the density steady at any length.

   The four heights share no factor above 30, so the set only realigns
   after several hundred thousand pixels. Each band repeats on its own,
   but never visibly — the other three are always over it at a different
   phase.

   The orbs are deliberately large enough to overlap. An isolated blob has
   one radius at which its tint rounds down to bare paper, and that radius
   is a circle — on dark paper a 1-level step is ~7x the relative contrast
   it has on light, so those circles were visible in dark mode only. Once
   the orbs overlap, the places that still reach bare paper are irregular
   pockets between them rather than clean arcs. This is why marketing's
   820-900px blobs read clean and a field of tight ones does not.

   Every orb paints the accent itself, no per-orb hue offset. Rotating each
   one a few degrees did make overlaps blend, but it also meant most orbs
   were not the brand colour: at +/-35 orange (hue 34) reached red and
   yellow-green, and even +/-7 read as warmer and cooler patches. Blur and
   overlap do the blending now, and the accent stays exact.

   --orb-phase then slides the whole field per product, so no two APIs and
   no two docs pages open on the same arrangement.

   No orb peaks between 38% and 62%, so nothing sits under the text
   column — the colour reads from the margins inward.

   Vertical and horizontal clearance are not the same problem. Every orb
   clears its own band's top and bottom by 0.75x its radius at both
   scales, because a gradient stops at its tile edge and an orb
   overhanging one would cut against the next tile's copy — a seam in the
   middle of the page, with content either side of it to give it away.
   Sideways there is no such bound: the only horizontal cut is at the
   window edge, where a cut is exactly what you want it to look like. So
   the orbs are free to run right off the sides, which is also what keeps
   them off the middle.

   The falloff is (1 - d^2)^2 sampled at 8 stops. It matters that it
   reaches zero with zero slope: the old three-segment ramp still had
   2-4 levels on it when it hit its own radius, and a blob that is still
   visible where it ends draws a circle. The last stop here is under a
   hundredth of a level. The shallow ramps still contour on 8-bit output,
   which is what the grain below is for. */
#sandboxApp::before,
.docs-app::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  --orb-c:var(--c);
  background-image:
    radial-gradient(calc(285px * var(--orb-scale)) calc(235px * var(--orb-scale)) at 8% 11.8%,
      color-mix(in srgb, var(--orb-c) calc(12% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(11.39% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(9.67% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(7.11% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(4.18% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.56% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.28% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(225px * var(--orb-scale)) calc(190px * var(--orb-scale)) at 46% 37%,
      color-mix(in srgb, var(--orb-c) calc(10% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(9.49% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.06% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.92% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.49% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.3% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.24% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(325px * var(--orb-scale)) calc(265px * var(--orb-scale)) at 84% 62.1%,
      color-mix(in srgb, var(--orb-c) calc(11% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(10.44% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.86% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(6.52% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.83% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.43% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.26% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(250px * var(--orb-scale)) calc(210px * var(--orb-scale)) at 59% 87.3%,
      color-mix(in srgb, var(--orb-c) calc(9% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(8.55% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(7.25% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.33% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.14% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.17% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.21% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(340px * var(--orb-scale)) calc(280px * var(--orb-scale)) at 52% 16.4%,
      color-mix(in srgb, var(--orb-c) calc(9% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(8.55% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(7.25% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.33% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.14% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.17% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.21% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(240px * var(--orb-scale)) calc(205px * var(--orb-scale)) at 20% 41.1%,
      color-mix(in srgb, var(--orb-c) calc(11% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(10.44% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.86% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(6.52% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.83% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.43% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.26% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(300px * var(--orb-scale)) calc(250px * var(--orb-scale)) at 71% 65.7%,
      color-mix(in srgb, var(--orb-c) calc(10% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(9.49% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.06% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.92% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.49% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.3% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.24% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(270px * var(--orb-scale)) calc(225px * var(--orb-scale)) at 94% 90.4%,
      color-mix(in srgb, var(--orb-c) calc(12% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(11.39% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(9.67% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(7.11% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(4.18% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.56% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.28% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(315px * var(--orb-scale)) calc(255px * var(--orb-scale)) at 39% 10.5%,
      color-mix(in srgb, var(--orb-c) calc(10% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(9.49% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.06% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.92% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.49% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.3% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.24% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(235px * var(--orb-scale)) calc(195px * var(--orb-scale)) at 64% 36.1%,
      color-mix(in srgb, var(--orb-c) calc(9% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(8.55% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(7.25% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.33% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.14% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.17% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.21% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(330px * var(--orb-scale)) calc(270px * var(--orb-scale)) at 14% 61.8%,
      color-mix(in srgb, var(--orb-c) calc(11% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(10.44% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.86% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(6.52% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.83% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.43% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.26% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(255px * var(--orb-scale)) calc(220px * var(--orb-scale)) at 89% 87.5%,
      color-mix(in srgb, var(--orb-c) calc(10% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(9.49% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.06% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.92% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.49% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.3% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.24% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(295px * var(--orb-scale)) calc(240px * var(--orb-scale)) at 43% 15.6%,
      color-mix(in srgb, var(--orb-c) calc(9% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(8.55% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(7.25% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.33% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.14% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.17% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.21% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(265px * var(--orb-scale)) calc(220px * var(--orb-scale)) at 78% 38.9%,
      color-mix(in srgb, var(--orb-c) calc(11% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(10.44% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.86% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(6.52% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.83% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.43% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.26% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(310px * var(--orb-scale)) calc(255px * var(--orb-scale)) at 56% 62.3%,
      color-mix(in srgb, var(--orb-c) calc(10% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(9.49% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(8.06% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(5.92% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(3.49% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.3% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.24% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%),
    radial-gradient(calc(280px * var(--orb-scale)) calc(235px * var(--orb-scale)) at 26% 85.7%,
      color-mix(in srgb, var(--orb-c) calc(12% * var(--orb-alpha)), transparent) 0%,
      color-mix(in srgb, var(--orb-c) calc(11.39% * var(--orb-alpha)), transparent) 16%,
      color-mix(in srgb, var(--orb-c) calc(9.67% * var(--orb-alpha)), transparent) 32%,
      color-mix(in srgb, var(--orb-c) calc(7.11% * var(--orb-alpha)), transparent) 48%,
      color-mix(in srgb, var(--orb-c) calc(4.18% * var(--orb-alpha)), transparent) 64%,
      color-mix(in srgb, var(--orb-c) calc(1.56% * var(--orb-alpha)), transparent) 80%,
      color-mix(in srgb, var(--orb-c) calc(0.28% * var(--orb-alpha)), transparent) 92%,
      rgb(from var(--orb-c) r g b / 0) 100%);
  background-size:
    100% 3380px,
    100% 3380px,
    100% 3380px,
    100% 3380px,
    100% 4260px,
    100% 4260px,
    100% 4260px,
    100% 4260px,
    100% 5260px,
    100% 5260px,
    100% 5260px,
    100% 5260px,
    100% 6420px,
    100% 6420px,
    100% 6420px,
    100% 6420px;
  background-position:0 var(--orb-phase, 0px);
  background-repeat:repeat-y;
  /* The one property that actually erases a boundary. The hero and the login
     aurora both blur their orb layer 14px; the marketing page wash does not,
     but its orbs are 820-900px at two to three times this dark-mode
     amplitude. This field is the only one that is small-orbed, unblurred and
     sitting near the 8-bit floor at once — a dark orb peaks at ~5 levels, so
     its whole tail quantises into concentric arcs that read as the blob's
     edge. Hero and login can use 14px because they run their orbs at 0.20-0.38 alpha,
     which packs the contours tightly. This field peaks around 7 levels over a
     ~500px radius, so its rings sit ~70px apart and 14px only rounds their
     shoulders. The kernel has to be comparable to that spacing.

     The -48px overscan is why the blur does not simply move the seam to the
     layer's own edge: the feather happens outside the window. Same reason
     the login layer runs inset:-10% -10% 0. Bottom stays at 0 so the page
     does not gain scrollable height. */
  filter:blur(52px);
  /* No edge mask, deliberately — same as the marketing page's body::before.
     A blob that runs past the window is meant to be cut by the window; that
     is what reads as "it continues off-screen". Fading it to nothing over
     the last 72px instead draws a halo just inside the edge, which is the
     one thing that looks wrong. Band seams are handled by the clearance
     above, not by masking, so nothing here depended on it. */
}
/* Bleeds into .sandbox-workspace's 44px padding so it reaches the column
   edges rather than starting at the content box. What keeps the sandbox
   quiet is not alpha but occlusion — the input and output cards are
   opaque --bg-card, so most of this layer is covered and the colour
   surfaces in the gutters. Docs has no cards: body text sits directly on
   it, so it runs about two-thirds as strong. */

/* The field now lives on the app root, so the active product's accent has
   to reach it — sandbox-orbs.js mirrors data-product up from the visible
   workspace. .docs-app already carried its own. */
#sandboxApp[data-product="sig-normalizer"]{ --c:var(--purple); }
#sandboxApp[data-product="ndc-analysis"]{ --c:var(--turquoise); }
#sandboxApp[data-product="medcast"]{ --c:var(--turquoise); }
#sandboxApp[data-product="pill-identifier"]{ --c:var(--purple); }
#sandboxApp[data-product="rxcode"]{ --c:var(--orange); }
#sandboxApp[data-product="medspeak-tts"]{ --c:var(--green); }
#sandboxApp[data-product="translation-plus"]{ --c:var(--turquoise); }
#sandboxApp[data-product="standard-translation"]{ --c:var(--turquoise); }
#sandboxApp[data-product="mcp"]{ --c:var(--purple); }

/* Grain over the field. The ramps are shallow enough that 8-bit output
   contours them into visible rings — one 1/255 step every 15-28px. Noise
   at this opacity is invisible on its own and breaks the contours up.
   Same technique the marketing page uses for the same reason.

   ::after paints after ::before, so this sits over the orbs and under the
   content, which is raised to z-index 1. */
#sandboxApp::after,
.docs-app::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.020;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
:root[data-theme="dark"] #sandboxApp::after,
:root[data-theme="dark"] .docs-app::after{ opacity:.062; }

/* Clips the orb layer's -48px overscan. clip rather than hidden: it
   does not create a scroll container, so the sticky rail still resolves
   against the viewport. */
#sandboxApp{ overflow-x:clip; }
#sandboxApp::before{ inset:-170px -170px 0; --orb-scale:1.32; --orb-alpha:.92; }
/* Dark paper needs less: the accents are already brighter tokens there,
   so the same mix percentage lands heavier against #252527. */
/* Dark paper wants a lifted accent, not the raw token. Only --purple and
   --red carry dark variants; --turquoise, --orange and --green are the same
   value in both themes, and a saturated dark orange at 6-9% over #252527
   composites to mud rather than to a glow. The marketing aurora sidesteps
   this by hardcoding lightened colours for dark — rgba(240,170,70) against
   the light page's rgba(225,133,10). Mixing 70% toward white reproduces
   those: turquoise lands at luma 165 and orange at 177, against marketing's
   165 and 179. The lift also raises the delta from paper, so --orb-alpha
   comes down to hold the strength steady — this changes the hue, not the
   weight. */
:root[data-theme="dark"] #sandboxApp::before{ --orb-c:color-mix(in srgb, var(--c) 70%, #fff); --orb-alpha:.63; }

/* .api-workspace runs a transform animation on entry, which makes it a
   stacking context while playing and not afterwards — so the content is
   raised explicitly rather than relying on the bloom sitting at z-index
   -1 behind a parent whose stacking behaviour changes mid-animation. */
.workspace-header, .workspace-cards{ position:relative; z-index:1; }

/* ---- Workspace header (from .workspace-header / .workspace-title) ---- */
/* Header spans both cards so long descriptions use the full width */
.workspace-header{ margin:0 0 22px 2px; }
.workspace-title{ display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.workspace-title i{ flex-shrink:0; font-size:30px; line-height:1; color:var(--ink); }
.workspace-title h2{ font-family:var(--font-display); font-size:clamp(26px,2.6vw,30px); font-weight:600; letter-spacing:-0.025em; line-height:1.08; color:var(--ink); }
.workspace-description{ font-family:var(--font-body); color:var(--ink-dim); font-size:15px; line-height:1.55; letter-spacing:-0.005em; }

/* ---- Cards ---- */
.workspace-cards{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }
.workspace-cards-wide{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
@media (max-width:1080px){ .workspace-cards, .workspace-cards-wide{ grid-template-columns:minmax(0,1fr); } }

.input-card, .output-card{
  --c:inherit;
  position:relative; background:var(--bg-card); border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius:14px; overflow:hidden;
  box-shadow:0 0 0 1px var(--card-inset) inset;
}
.output-card{ position:sticky; top:28px; }
@media (max-width:1080px){ .output-card{ position:relative; top:0; } }

.card-header{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 0; }
.card-label{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.card-label::before{ content:""; width:3px; height:14px; border-radius:2px; background:var(--c); }
.card-body{ position:relative; z-index:1; padding:16px 22px 22px; }
.card-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.output-meta{ display:flex; align-items:center; gap:10px; }

/* ---- Form fields ---- */
.form-group{ margin-bottom:18px; }
.form-group:last-child{ margin-bottom:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-group-full{ grid-column:1/-1; }

.sandbox-label{ display:block;  margin-bottom:9px; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-dim); }
.required{ color:var(--orange); }
.optional-tag{ font-weight:600; letter-spacing:0.04em; color:var(--ink-mute); margin-left:6px; text-transform:none; }

.sandbox-input, .sandbox-textarea, select.sandbox-input{
  width:100%; padding:13px 14px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--c) 16%, transparent);
  background:color-mix(in srgb, var(--c) 5%, var(--surface-elevated));
  font-family:var(--font-body); font-size:15px; color:var(--ink); letter-spacing:-0.005em;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sandbox-input::placeholder, .sandbox-textarea::placeholder{ color:var(--ink-mute); }
.sandbox-input:focus, .sandbox-textarea:focus, select.sandbox-input:focus{
  outline:none; background:var(--surface-elevated); border-color:var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent);
}
.sandbox-textarea{ resize:vertical; min-height:100px; line-height:1.5; }
.sandbox-textarea.mono{ font-family:var(--font-mono); font-size:13px; }
select.sandbox-input{ appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238c8c95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }

/* ---- Custom dropdown (themed replacement for native <select>) ---- */
.cs{ position:relative; }
.cs .cs-native{ position:absolute; width:1px; height:1px; padding:0; margin:0; border:0; opacity:0; pointer-events:none; }
.cs-trigger{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer; }
.cs-trigger.is-placeholder .cs-value{ color:var(--ink-mute); }
.cs-trigger:disabled{ cursor:not-allowed; opacity:0.55; }
.cs-arrow{ flex:none; font-size:18px; color:var(--ink-mute); transition:transform .2s ease; }
.cs-trigger[aria-expanded="true"] .cs-arrow{ transform:rotate(180deg); color:var(--c); }

.cs-menu{
  position:fixed; z-index:9998; padding:6px;
  background:var(--bg-card); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:0 18px 48px rgba(15,15,20,0.16);
  max-height:280px; overflow-y:auto; scrollbar-width:thin;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.cs-menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.cs-option{
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  padding:9px 11px; border-radius:9px; cursor:pointer; letter-spacing:-0.005em;
  transition:background .12s ease;
}
.cs-option.is-active{ background:color-mix(in srgb, var(--c) 12%, var(--surface-elevated)); }
.cs-option[aria-selected="true"]{ background:color-mix(in srgb, var(--c) 16%, var(--surface-elevated)); color:var(--ink); font-weight:600; }
.cs-option[aria-selected="true"].is-active{ background:color-mix(in srgb, var(--c) 22%, var(--surface-elevated)); }
.cs-option.is-disabled{ color:var(--ink-mute); cursor:not-allowed; }
.cs-option.is-disabled:hover{ background:transparent; }
@media (prefers-reduced-motion: reduce){
  .cs-menu{ transition:opacity .12s ease; transform:none; }
  .cs-arrow{ transition:none; }
}
.sandbox-hint{ font-size:11.5px; color:var(--ink-mute); margin-top:7px; line-height:1.4; }
.file-input{ padding:9px; border:1px dashed var(--line-strong); border-radius:12px; background:color-mix(in srgb, var(--c) 5%, var(--surface-elevated)); font-size:13.5px; color:var(--ink-dim); cursor:pointer; }
.file-input::file-selector-button{ padding:8px 14px; margin-right:12px; border:1px solid var(--line); border-radius:999px; background:var(--bg-card); color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:12.5px; cursor:pointer; }

/* ---- Video catalog + playback ---- */
.video-collection-filters{ min-width:0; margin:0; padding:0; border:0; }
.video-collection-filters legend{ margin-bottom:6px; padding:0; }
.video-filter-options{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.video-catalog-card{ container-type:inline-size; }
.video-filter-option{ display:inline-flex; align-items:center; gap:8px; min-height:30px; color:var(--ink-dim); font-size:13px; cursor:pointer; }
.video-filter-option input{ width:16px; height:16px; margin:0; accent-color:var(--c); }
.api-workspace[data-product="video-api"] .sandbox-input::placeholder{ color:var(--ink-dim); opacity:1; }
.video-search-group{ margin:16px 0 12px; }
.video-catalog-count{ flex:none; color:var(--ink-dim); font-size:12px; font-variant-numeric:tabular-nums; }
.video-status{ min-height:1.4em; margin:10px 0 0; color:var(--ink-dim); font-size:12px; line-height:1.45; }
.video-status:empty{ min-height:0; margin-top:0; }
.video-status[data-state="success"]{ color:var(--green-deep); }
.video-status[data-state="error"]{ color:var(--red); }
.video-retry-btn{ margin-top:12px; }
.video-result-list{ max-height:min(58vh,640px); overflow:auto; margin:12px 0 0; list-style:none; border-top:1px solid var(--line); overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
.video-result-list::-webkit-scrollbar{ width:10px; height:10px; }
.video-result-list::-webkit-scrollbar-track{ background:transparent; }
.video-result-list::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 22%, transparent); border:2px solid transparent; background-clip:padding-box; border-radius:999px; }
.video-result-list::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--c) 58%, var(--ink)); background-clip:padding-box; }
.video-result-list::-webkit-scrollbar-corner{ background:transparent; }
.video-result-item + .video-result-item{ border-top:1px solid var(--line); }
.video-result{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:14px 10px; border-radius:8px; text-align:left; transition:background .15s ease; }
.video-result:hover{ background:color-mix(in srgb, var(--c) 5%, var(--surface-elevated)); }
.video-result:focus-visible{ outline:2px solid var(--c); outline-offset:-2px; }
.video-result[aria-pressed="true"]{ background:color-mix(in srgb, var(--c) 9%, var(--surface-elevated)); }
.video-result-content{ display:grid; gap:4px; min-width:0; }
.video-result-title{ overflow:hidden; color:var(--ink); font-size:14px; font-weight:650; line-height:1.35; text-overflow:ellipsis; }
.video-result-meta{ color:var(--ink-dim); font-size:12px; line-height:1.4; }
.video-result-arrow{ flex:none; color:var(--ink-mute); font-size:16px; }
.video-skeleton-stack{ display:grid; gap:8px; margin-top:14px; }
.video-skeleton-row{ display:block; height:55px; border-radius:8px; background:linear-gradient(90deg, var(--fill-subtle) 25%, var(--fill-subtle-strong) 50%, var(--fill-subtle) 75%); background-size:200% 100%; animation:video-skeleton-shimmer 1.5s ease-in-out infinite; }
@keyframes video-skeleton-shimmer{ to{ background-position-x:-200%; } }
.video-empty-state{ margin:12px 0 0; padding:18px 14px; border-radius:10px; background:var(--fill-subtle); color:var(--ink-dim); font-size:13px; line-height:1.5; }
.video-pagination{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; width:100%; min-width:0; margin:14px auto 0; }
.video-pagination[hidden], .video-retry-btn[hidden], .video-skeleton-stack[hidden]{ display:none; }
.video-pagination > .video-page-direction{ display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:44px; padding:8px 12px; font-size:12px; white-space:nowrap; }
.video-pagination > .video-page-direction:first-child{ justify-self:end; }
.video-pagination > .video-page-direction:last-child{ justify-self:start; }
.video-page-direction i{ font-size:15px; }
.video-pagination .btn:disabled, .video-playback-link .btn:disabled{ cursor:not-allowed; opacity:.48; }
.video-pagination .video-current-page{ display:flex; flex:0 0 44px; align-items:center; justify-content:center; justify-self:center; width:44px; min-width:44px; height:44px; border:1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius:9px; background:color-mix(in srgb, var(--c) 10%, var(--surface-elevated)); color:var(--ink); font-size:13px; font-variant-numeric:tabular-nums; }
@container (max-width:480px){
  .video-pagination{ gap:4px; }
  .video-pagination > .video-page-direction{ width:36px; height:44px; padding:0; }
  .video-pagination-label{ display:none; }
  .video-pagination .video-current-page{ flex-basis:30px; width:30px; min-width:30px; height:44px; }
}
.video-selection-empty{ display:grid; justify-items:start; gap:8px; padding:14px 0 18px; color:var(--ink-dim); }
.video-selection-empty[hidden], .video-selected-details[hidden]{ display:none; }
.video-selection-empty > i{ display:block; margin-bottom:4px; color:var(--ink-mute); font-size:26px; line-height:1; }
.video-selection-empty strong{ color:var(--ink); font-size:14px; font-weight:650; }
.video-selection-empty span{ color:var(--ink-dim); font-size:12px; }
.video-selected-title{ margin:0 0 8px; color:var(--ink); font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.2; overflow-wrap:anywhere; }
.video-selected-description{ color:var(--ink-dim); font-size:13px; line-height:1.5; }
.video-metadata{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px 18px; margin:18px 0 8px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.video-metadata > div{ min-width:0; }
.video-metadata dt{ margin-bottom:4px; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-dim); }
.video-metadata dd{ color:var(--ink); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.video-play-actions{ margin:14px 0 8px; }
.video-player{ display:block; width:100%; aspect-ratio:16 / 9; margin-top:14px; border-radius:11px; background:#111; object-fit:contain; }
.video-player[hidden]{ display:none; }
.video-playback-link{ display:grid; gap:8px; min-width:0; margin-top:14px; }
.video-playback-link[hidden]{ display:none; }
.video-playback-link .sandbox-label{ margin:0; }
.video-playback-link-actions{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; min-width:0; }
.video-playback-url{ min-width:0; width:100%; min-height:100px; max-height:160px; overflow:auto; resize:vertical; overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; line-height:1.45; font-size:11.5px; }
.video-playback-link .btn{ justify-content:center; padding-inline:14px; }
@media (max-width:520px){
  .video-metadata{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .video-result{ padding:13px 6px; }
  .video-catalog-card .card-body, .video-player-card .card-body{ padding-right:16px; padding-left:16px; }
  .video-playback-link-actions{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .video-playback-url{ grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce){ .video-skeleton-row{ animation:none; } }

/* ---- RxCode sections ---- */
.rxcode-section{ margin-bottom:28px; }
.rxcode-section:last-of-type{ margin-bottom:0; }
.rxcode-section-label{ margin:0 0 18px; padding-bottom:11px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.rxcode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rxcode-grid .form-group{ margin-bottom:0; }
.rxcode-grid .form-group-full{ grid-column:1/-1; }
@media (max-width:520px){ .rxcode-grid{ grid-template-columns:1fr; } }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:-0.005em; border:1px solid transparent; white-space:nowrap; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease; }
.btn i{ font-size:16px; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
/* Falls back to --c before the purple default, so any scope that sets an accent
   but not --c-btn (e.g. a modal appended to <body>) still paints its own colour
   instead of an unrelated purple.
   The white label is deliberate, accepted below AA on the lighter accents. */
.btn-primary{ background:var(--c-btn, var(--c, var(--purple-btn))); color:var(--c-btn-fg, #fff); box-shadow:inset 0 1px 0 rgba(255,255,255,0.16); }
.btn-primary:hover:not(:disabled){ filter:brightness(1.06); transform:translateY(-1px); }
.btn-secondary{ background:var(--ink); color:var(--bg); }
.btn-secondary:hover:not(:disabled){ filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost{ background:var(--fill-subtle); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover:not(:disabled){ background:var(--fill-subtle-strong); border-color:var(--line-strong); }
.btn-icon{ width:36px; height:36px; padding:0; border-radius:10px; display:grid; place-items:center; background:var(--fill-subtle); border:1px solid var(--line); color:var(--ink-dim); }
.btn-icon:hover{ color:var(--ink); border-color:var(--line-strong); }
.btn-demo-inline{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:color-mix(in srgb, var(--c) 10%, var(--surface-elevated)); border:1px solid color-mix(in srgb, var(--c) 24%, transparent); color:color-mix(in srgb, var(--c) 70%, var(--ink)); font-size:11.5px; font-weight:700; }
.btn-demo-inline i{ font-size:14px; }
.btn-demo-inline:hover{ background:var(--c-btn, var(--purple-btn)); border-color:var(--c-btn, var(--purple-btn)); color:var(--c-btn-fg, #fff); }
.medcast-job-action[hidden]{ display:none; }

/* ---- Latency / status badges ---- */
.latency-badge{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--green-deep); background:color-mix(in srgb, var(--green) 12%, var(--surface-elevated)); border:1px solid color-mix(in srgb, var(--green) 26%, transparent); border-radius:999px; padding:3px 9px; }
.status-badge{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0; }
.status-badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.status-badge[data-status="disconnected"]{ background:rgba(var(--red-rgb),0.10); color:var(--red); }
.status-badge[data-status="disconnected"]::before{ background:var(--red); }
.status-badge[data-status="connected"]{ background:rgba(var(--green-rgb),0.14); color:var(--green-deep); }
.status-badge[data-status="connected"]::before{ background:var(--green); }

/* ---- Output / result ---- */
/* Loading visual for MedCast (two voices taking turns) and MedSpeak (one
   voice); built by src/js/sandbox/ui/voiceWave.js. It takes the result box's
   place, so the empty box below it stays hidden. */
.voice-wave{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:150px; padding:24px; border-radius:14px; background:color-mix(in srgb, var(--c) 5%, var(--surface-elevated)); border:1px solid color-mix(in srgb, var(--c) 16%, transparent); }
.voice-wave__voices{ display:flex; align-items:center; gap:18px; height:52px; }
.voice-wave__voice{ display:flex; align-items:center; gap:3px; height:44px; --tone:var(--c); }
.voice-wave--duet .voice-wave__voice:first-child{ --tone:var(--purple); }
.voice-wave--duet .voice-wave__voice:last-child{ --tone:var(--turquoise); }
.voice-wave__voice i{ display:block; width:4px; height:6px; border-radius:4px; background:var(--tone); opacity:.35; }
.voice-wave--solo .voice-wave__voice i{ animation:voice-solo 1.3s ease-in-out infinite; animation-delay:calc(var(--i) * -0.08s); }
.voice-wave--duet .voice-wave__voice:first-child i{ animation:voice-turn-a 3.2s ease-in-out infinite; animation-delay:calc(var(--i) * 0.09s); }
.voice-wave--duet .voice-wave__voice:last-child i{ animation:voice-turn-b 3.2s ease-in-out infinite; animation-delay:calc(var(--i) * 0.09s); }
@keyframes voice-solo{ 0%,100%{ height:6px; opacity:.4; } 50%{ height:calc(8px + var(--h) * 0.9px); opacity:1; } }
@keyframes voice-turn-a{ 0%,48%{ height:calc(8px + var(--h) * 0.9px); opacity:1; } 24%{ height:calc(4px + var(--h) * 0.4px); } 50%,100%{ height:6px; opacity:.3; } }
@keyframes voice-turn-b{ 0%,50%{ height:6px; opacity:.3; } 52%,98%{ height:calc(8px + var(--h) * 0.9px); opacity:1; } 75%{ height:calc(4px + var(--h) * 0.4px); } 100%{ height:6px; opacity:.3; } }
@media (prefers-reduced-motion:reduce){ .voice-wave__voice i{ animation:none !important; height:calc(6px + var(--h) * 0.5px); opacity:.85; } }
.medspeak-skeleton-label{ font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink-dim); }
.medspeak-skeleton ~ #outputMedcast:empty,
.medspeak-skeleton ~ #outputMedspeak:empty{ display:none; }
.sandbox-pre{ background:color-mix(in srgb, var(--c) 5%, var(--surface-elevated)); border:1px solid color-mix(in srgb, var(--c) 16%, transparent); border-radius:14px; font-family:var(--font-mono); font-size:13px; line-height:1.65; color:var(--ink); white-space:pre-wrap; word-break:break-word; min-height:120px; max-height:440px; overflow:auto; padding:16px 18px; margin:0; }
/* empty-state placeholder inside the output pre — an API icon + hint, replaced
   automatically the moment the handler writes real output */
.output-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:150px; text-align:center; }
.output-placeholder .op-icon{ display:grid; place-items:center; color:var(--ink-mute); opacity:.7; }
.output-placeholder .op-icon i{ font-size:34px; }
/* simple variant — a small "ⓘ" before the text (for APIs without a distinctive symbol) */
.card-divider{ border:0; border-top:1px solid var(--line); margin:20px 0; }
/* JSON syntax highlighting in output */
.sandbox-pre .json-key, .docs-pre .json-key{ color:var(--turquoise-deep); }
.sandbox-pre .json-string, .docs-pre .json-string{ color:var(--purple-deep); }
.sandbox-pre .json-number, .docs-pre .json-number{ color:var(--orange-deep); }
.sandbox-pre .json-boolean, .docs-pre .json-boolean{ color:var(--green-deep); }
.sandbox-pre .json-null, .docs-pre .json-null{ color:var(--ink-mute); }
.docs-pre .tok-str{ color:var(--purple-deep); }
.docs-pre .tok-key{ color:var(--turquoise-deep); }
.docs-pre .tok-num{ color:var(--orange-deep); }
.docs-pre .tok-com{ color:var(--ink-mute); font-style:italic; }
.sandbox-pre .json-error, .docs-pre .json-error{ color:var(--red); font-family:var(--font-body); }

/* ---- MedSpeak ---- */
.speed-selector{ display:inline-flex; gap:4px; padding:4px; background:var(--fill-subtle); border:1px solid var(--line); border-radius:999px; }
.speed-option{ padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink-dim); transition:all .2s ease; }
.speed-option.active{ background:var(--bg-card); color:color-mix(in srgb, var(--c) 65%, var(--ink)); box-shadow:0 1px 4px rgba(15,15,20,0.10); }
.medspeak-audio-container{ margin-bottom:16px; }
.medspeak-audio-player{ width:100%; }
.medspeak-pronunciations{ margin-bottom:14px; font-size:12.5px; color:var(--ink-dim); background:rgba(var(--green-rgb),0.08); border:1px solid color-mix(in srgb, var(--green) 22%, transparent); border-radius:10px; padding:10px 14px; }
.medspeak-pronunciations summary{ cursor:pointer; font-weight:700; color:var(--green-deep); }
.medspeak-pronunciation-list{ margin:8px 0 0; padding-left:18px; }

/* ---- Translation summary ---- */
.translation-summary{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.translation-summary-item{ display:flex; flex-direction:column; gap:3px; padding:13px 15px; border-radius:10px; background:linear-gradient(135deg, color-mix(in srgb, var(--c) 8%, transparent), color-mix(in srgb, var(--purple) 5%, transparent)); border:1px solid var(--line); }
.translation-summary-label{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-dim); }
.translation-summary-value{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--ink); }

/* ============================================================
   Example Response modal
============================================================ */
/* ---- Confirm dialog ---- */
.confirm-modal{ position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px; }
.confirm-modal__overlay{ position:absolute; inset:0; background:rgba(15,15,20,0.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .2s ease; }
.confirm-modal.is-visible .confirm-modal__overlay{ opacity:1; }
.confirm-modal__content{
  position:relative; width:100%; max-width:420px; text-align:center;
  background:var(--bg-card); border:1px solid var(--line); border-radius:22px;
  padding:32px 30px 26px;
  box-shadow:0 40px 90px rgba(15,15,20,0.30), 0 0 0 1px var(--card-inset) inset;
  transform:scale(0.95); opacity:0; transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.confirm-modal.is-visible .confirm-modal__content{ transform:scale(1); opacity:1; }
.confirm-modal__icon{
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px; font-size:32px; line-height:1; color:var(--ink);
}
.confirm-modal.tone-danger .confirm-modal__icon{ color:var(--red); }
.confirm-modal__title{ font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.confirm-modal__message{ font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--ink-dim); margin:10px 0 0; }
.confirm-modal__actions{ display:flex; gap:10px; margin-top:24px; }
.confirm-modal__actions button{ flex:1; padding:11px 16px; border-radius:12px; font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.confirm-modal__cancel{ background:var(--bg-card); border:1px solid var(--line-strong); color:var(--ink); }
.confirm-modal__cancel:hover{ background:color-mix(in srgb, var(--ink) 4%, var(--surface-elevated)); }
.confirm-modal__confirm{ background:var(--ink); border:1px solid var(--ink); color:var(--bg); }
.confirm-modal__confirm:hover{ background:color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.confirm-modal.tone-danger .confirm-modal__confirm{ background:var(--red); border-color:var(--red); }
.confirm-modal.tone-danger .confirm-modal__confirm:hover{ background:color-mix(in srgb, var(--red) 86%, #000); }
@media (prefers-reduced-motion: reduce){
  .confirm-modal__overlay, .confirm-modal__content{ transition:opacity .15s ease; }
  .confirm-modal__content{ transform:none; }
}

.ex-modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.ex-modal__overlay{ position:absolute; inset:0; background:rgba(15,15,20,0.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ex-modal__content{
  position:relative; width:100%; max-width:600px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px rgba(15,15,20,0.30), 0 0 0 1px var(--card-inset) inset;
  transform:scale(0.95); transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.ex-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line); }
.ex-modal__head h3{ font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.ex-modal__head h3 span{ color:var(--ink-mute); font-weight:500; }
.ex-modal__close{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; font-size:22px; line-height:1; color:var(--ink-mute); transition:background .2s ease, color .2s ease; }
.ex-modal__close:hover{ background:var(--fill-subtle); color:var(--ink); }
.ex-modal__body{ padding:22px; display:flex; flex-direction:column; gap:20px; max-height:62vh; overflow-y:auto; }
.ex-modal__label{ display:block;  margin-bottom:10px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.ex-modal__code{ background:color-mix(in srgb, var(--purple) 5%, var(--surface-elevated)); border:1px solid color-mix(in srgb, var(--purple) 15%, transparent); border-radius:12px; padding:14px 16px; font-family:var(--font-mono); font-size:13px; line-height:1.6; color:var(--ink); white-space:pre-wrap; word-break:break-word; margin:0; max-height:260px; overflow:auto; }
.ex-modal__media{ background:color-mix(in srgb, var(--purple) 5%, var(--surface-elevated)); border:1px solid color-mix(in srgb, var(--purple) 15%, transparent); border-radius:12px; padding:14px; text-align:center; }
.ex-modal__media img{ max-width:100%; max-height:170px; border-radius:8px; margin:0 auto 8px; }
.ex-modal__cap{ font-family:var(--font-mono); font-size:12px; color:var(--ink-dim); }
.ex-modal__audio{ width:100%; margin-bottom:12px; }
.ex-modal__actions{ display:flex; gap:8px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--line); }
.ex-modal__copy{ display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:999px; background:var(--ink); color:var(--bg); font-family:var(--font-body); font-size:13.5px; font-weight:600; transition:transform .25s ease; }
.ex-modal__copy i{ font-size:15px; }
.ex-modal__copy:hover{ transform:translateY(-1px); }
.ex-modal__close-btn{ padding:10px 18px; border-radius:999px; background:var(--fill-subtle); border:1px solid var(--line); color:var(--ink); font-family:var(--font-body); font-size:13.5px; font-weight:600; transition:all .2s ease; }
.ex-modal__close-btn:hover{ background:var(--fill-subtle-strong); border-color:var(--line-strong); }

/* ============================================================
   RxCode QR modal
============================================================ */
.rxcode-modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,15,20,0.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.rxcode-modal-content{
  --c:var(--orange); --c-btn:var(--orange-btn); --c-btn-fg:var(--orange-btn-fg);
  position:relative; width:100%; max-width:460px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px rgba(15,15,20,0.30), 0 0 0 1px var(--card-inset) inset;
  animation:rxcodeModalPop .2s cubic-bezier(.2,.8,.2,1);
}
.rxcode-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line); }
.rxcode-modal-header h3{ font-family:var(--font-display); font-size:18px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); }
.rxcode-modal-close{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; font-size:22px; line-height:1; color:var(--ink-mute); transition:background .2s ease, color .2s ease; }
.rxcode-modal-close:hover{ background:var(--fill-subtle); color:var(--ink); }
.rxcode-modal-body{ padding:22px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.rxcode-qr-image{ width:100%; max-width:360px; aspect-ratio:1/1; border-radius:12px; background:#fff; padding:14px; }
.rxcode-modal-hint{ font-family:var(--font-body); font-size:13px; color:var(--ink-dim); text-align:center; line-height:1.5; margin:0; }
.rxcode-modal-footer{ display:flex; gap:8px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--line); }
@keyframes rxcodeModalPop{ from{ transform:scale(0.95); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .rxcode-modal-content{ animation:none; } }

/* RxCode inline preview inside the result card */
.rxcode-result{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:6px 0; }
.rxcode-result__qr{ width:100%; max-width:240px; aspect-ratio:1/1; background:#fff; border-radius:14px; padding:14px; box-shadow:0 10px 28px rgba(15,15,20,0.22); }
.rxcode-result__msg{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--green-deep); }
.rxcode-result__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ============================================================
   Collapsed rail (icon-only) — toggled by JS adding .rail-collapsed
   to .app; everything keeps its expanded position, labels hide.
============================================================ */
/* themed tooltip — body-appended, fixed so it escapes overflow contexts */
.app-tip{
  position:fixed; z-index:9999;
  background:var(--tip-bg); color:var(--tip-fg);
  font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:-0.005em;
  padding:7px 11px; border-radius:9px; white-space:nowrap;
  box-shadow:0 12px 28px rgba(15,15,20,0.20);
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.app-tip.is-visible{ opacity:1; }
.app-tip::before{ content:""; position:absolute; width:8px; height:8px; background:var(--tip-bg); border-radius:2px; }
.app-tip[data-placement="right"]{ transform:translateY(-50%); }
.app-tip[data-placement="right"]::before{ left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); }
.app-tip[data-placement="top"]{ transform:translate(-50%,-100%); }
.app-tip[data-placement="top"]::before{ bottom:-4px; left:50%; transform:translateX(-50%) rotate(45deg); }
.app-tip[data-placement="bottom"]{ transform:translateX(-50%); }
.app-tip[data-placement="bottom"]::before{ top:-4px; left:50%; transform:translateX(-50%) rotate(45deg); }

/* expand glyph is hidden by default everywhere */
.rail-brand .brand-expand{ display:none; }

/* Collapsed behavior is DESKTOP-ONLY. On mobile the rail is a full off-canvas
   drawer (see below), so .rail-collapsed must NOT hide its contents there —
   the drawer always shows the full, expanded sidebar. */
@media (min-width:861px){
  .app.rail-collapsed .rail{ width:80px; background:transparent; box-shadow:none; }
  .app.rail-collapsed .rail-top{ border-bottom-color:transparent; padding-left:8px; }
  .app.rail-collapsed .rail-collapse{ display:none; }
  .app.rail-collapsed .rail-brand .logo-text{ display:none; }
  .app.rail-collapsed .rail-eyebrow{ visibility:hidden; }
  .app.rail-collapsed .api-card-content{ display:none; }
  .app.rail-collapsed .rail-util .util-label{ display:none; }
  /* labels hide; icons stay left-anchored (already ~rail-center) so they don't slide during the width transition */
  .app.rail-collapsed .api-selector-inner{ padding:0 4px; }
  .app.rail-collapsed .api-card{ gap:0; width:44px; padding:5px; }
  .app.rail-collapsed .rail-util{ gap:0; }
  .app.rail-collapsed .rail-brand img{ width:36px; height:36px; }

  /* collapse/expand affordance: logo swaps to expand glyph on hover when collapsed */
  .app.rail-collapsed .rail-brand{ position:relative; cursor:pointer; }
  .app.rail-collapsed .rail-brand .logo-icon{ position:relative; }
  .app.rail-collapsed .rail-brand .brand-expand{ display:grid; position:absolute; inset:0; place-items:center; font-size:20px; color:var(--ink); opacity:0; transition:opacity .2s ease; }
  .app.rail-collapsed .rail-brand img{ transition:opacity .2s ease; }
  .app.rail-collapsed .rail-brand:hover img{ opacity:0; scale:1; filter:none; }
  .app.rail-collapsed .rail-brand:hover .brand-expand{ opacity:1; }
}

/* Touch devices can't hover, so the expand chevron must PERSIST when collapsed —
   otherwise the user only ever sees the logo and has no way to know it expands. */
@media (min-width:861px) and (hover: none){
  .app.rail-collapsed .rail-brand img{ opacity:0; }
  .app.rail-collapsed .rail-brand .brand-expand{ opacity:1; }
}

/* ============================================================
   Mobile — rail becomes an off-canvas drawer
============================================================ */
.rail-backdrop{ display:none; }
.rail-toggle-m{ display:none; }

@media (max-width:1080px){
  .sandbox-workspace{ padding-bottom:18px; }
}

@media (max-width:860px){
  .app{ z-index:auto; }
  .rail{ position:fixed; top:0; left:0; bottom:0; width:280px; height:100vh; z-index:60; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); box-shadow:0 22px 60px rgba(15,15,20,0.16); }
  body.rail-open .rail{ transform:translateX(0); }
  /* drawer is always full width + fully expanded, even if .rail-collapsed is set */
  .app.rail-collapsed .rail{ width:280px; }
  /* collapsing is a desktop affordance — in the drawer you just close it */
  .rail-collapse{ display:none; }
  .rail-backdrop{ display:block; position:fixed; inset:0; background:rgba(15,15,20,0.30); z-index:55; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  body.rail-open .rail-backdrop{ opacity:1; pointer-events:auto; }
  .rail-toggle-m{ display:inline-grid; position:fixed; top:14px; left:14px; z-index:50; width:42px; height:42px; place-items:center; border-radius:999px; background:color-mix(in srgb, var(--bg-card) 88%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--line); color:var(--ink); box-shadow:0 6px 18px rgba(15,15,20,0.08); }
  .sandbox-workspace{ padding:64px 20px 12px; }
}

/* ============================================================
   Sandbox API Docs
============================================================ */
.docs-app{ position:relative; --c:var(--turquoise); --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); --docs-header-h:0px; }
.docs-article[data-product="sig-normalizer"], .docs-nav-item[data-product="sig-normalizer"], .docs-ov-row[data-product="sig-normalizer"], .docs-app[data-product="sig-normalizer"]{ --c:var(--purple); }
.docs-article[data-product="ndc-analysis"], .docs-nav-item[data-product="ndc-analysis"], .docs-ov-row[data-product="ndc-analysis"], .docs-app[data-product="ndc-analysis"]{ --c:var(--turquoise); }
.docs-article[data-product="medcast"], .docs-nav-item[data-product="medcast"], .docs-ov-row[data-product="medcast"], .docs-app[data-product="medcast"]{ --c:var(--turquoise); }
.docs-article[data-product="pill-identifier"], .docs-nav-item[data-product="pill-identifier"], .docs-ov-row[data-product="pill-identifier"], .docs-app[data-product="pill-identifier"]{ --c:var(--purple); }
.docs-article[data-product="rxcode"], .docs-nav-item[data-product="rxcode"], .docs-ov-row[data-product="rxcode"], .docs-app[data-product="rxcode"]{ --c:var(--orange); }
.docs-article[data-product="medspeak-tts"], .docs-nav-item[data-product="medspeak-tts"], .docs-ov-row[data-product="medspeak-tts"], .docs-app[data-product="medspeak-tts"]{ --c:var(--green); }
.docs-article[data-product="translation-plus"], .docs-nav-item[data-product="translation-plus"], .docs-ov-row[data-product="translation-plus"], .docs-app[data-product="translation-plus"]{ --c:var(--turquoise); }
.docs-article[data-product="standard-translation"], .docs-nav-item[data-product="standard-translation"], .docs-ov-row[data-product="standard-translation"], .docs-app[data-product="standard-translation"]{ --c:var(--turquoise); }
.docs-article[data-product="mcp-sig-normalize"], .docs-nav-item[data-product="mcp-sig-normalize"], .docs-ov-row[data-product="mcp-sig-normalize"], .docs-app[data-product="mcp-sig-normalize"]{ --c:var(--purple); }
.docs-article[data-product="mcp-ndc-analysis"], .docs-nav-item[data-product="mcp-ndc-analysis"], .docs-ov-row[data-product="mcp-ndc-analysis"], .docs-app[data-product="mcp-ndc-analysis"]{ --c:var(--turquoise); }
/* Button surfaces track the same per-product accent as the --c map above, so the
   "Try in Sandbox" CTA matches the article it sits in. Grouped by colour. */
.docs-article[data-product="sig-normalizer"], .docs-app[data-product="sig-normalizer"],
.docs-article[data-product="pill-identifier"], .docs-app[data-product="pill-identifier"],
.docs-article[data-product="mcp-sig-normalize"], .docs-app[data-product="mcp-sig-normalize"]{ --c-btn:var(--purple-btn); --c-btn-fg:var(--purple-btn-fg); }
.docs-article[data-product="ndc-analysis"], .docs-app[data-product="ndc-analysis"],
.docs-article[data-product="medcast"], .docs-app[data-product="medcast"],
.docs-article[data-product="translation-plus"], .docs-app[data-product="translation-plus"],
.docs-article[data-product="standard-translation"], .docs-app[data-product="standard-translation"],
.docs-article[data-product="mcp-ndc-analysis"], .docs-app[data-product="mcp-ndc-analysis"]{ --c-btn:var(--turquoise-btn); --c-btn-fg:var(--turquoise-btn-fg); }
.docs-article[data-product="rxcode"], .docs-app[data-product="rxcode"]{ --c-btn:var(--orange-btn); --c-btn-fg:var(--orange-btn-fg); }
.docs-article[data-product="medspeak-tts"], .docs-app[data-product="medspeak-tts"]{ --c-btn:var(--green-btn); --c-btn-fg:var(--green-btn-fg); }

.docs-rail-toggle{ display:none; }
.docs-app .rail-backdrop{ display:none; }

.docs-shell{ position:relative; z-index:1; display:flex; align-items:flex-start; }
.docs-sidenav{
  position:sticky; top:0; flex:none; width:280px; height:100vh; min-height:0;
  display:flex; flex-direction:column; padding:18px 14px 16px;
  background:var(--bg-card); box-shadow:1px 0 0 var(--line);
  overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  transition:width .16s cubic-bezier(.2,.8,.2,1), background .16s ease, box-shadow .16s ease;
}
.docs-sidenav::-webkit-scrollbar{display:none;}
.docs-rail-top{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; height:57px; padding:4px 6px 16px 8px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.docs-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.docs-brand-icon{ position:relative; flex:none; width:36px; height:36px; }
.docs-brand-icon img{ width:36px; height:36px; max-width:none; transition:scale .35s ease, filter .35s ease, opacity .2s ease; }
.docs-brand:hover img{ scale:1.08; filter:drop-shadow(0 6px 14px rgba(var(--purple-rgb),0.32)); }
.docs-brand-expand{ display:none; }
.docs-brand-text{ min-width:0; overflow:hidden; }
.docs-brand-text, .docs-nav-group h2, .docs-nav-link span, .docs-util-label{ transition:none; animation:none; transform:none; }
.docs-brand-text strong{ display:block; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.005em; line-height:1.05; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docs-brand-text span{ display:block; margin-top:1px; line-height:1.2; font-family:var(--font-display); font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--ink-dim); }
.docs-rail-collapse{ flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; color:var(--ink-mute); border:0; background:transparent; cursor:pointer; transition:color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.docs-rail-collapse i{ font-size:20px; }
.docs-rail-collapse:hover{ color:var(--ink); }
.docs-rail-collapse:active{ transform:scale(0.9); }
.docs-search{ position:fixed; top:18px; right:24px; z-index:40; width:264px; }
.docs-search__input{
  width:100%; height:42px; padding:0 64px 0 38px; border-radius:12px;
  border:1px solid var(--line); color:var(--ink);
  background:color-mix(in srgb, var(--bg-card) 90%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  font-family:var(--font-body); font-size:13px; letter-spacing:-0.005em;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.docs-search__input::placeholder{ color:var(--ink-mute); }
.docs-search__input:focus{
  outline:none; border-color:color-mix(in srgb, var(--purple) 45%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--purple) 14%, transparent);
}
.docs-search__icon{ position:absolute; left:14px; top:21px; transform:translateY(-50%); z-index:1; font-size:16px; color:var(--ink-mute); pointer-events:none; }
.docs-search__kbd{
  position:absolute; right:12px; top:21px; transform:translateY(-50%);
  display:grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:6px;
  border:1px solid var(--line); background:var(--surface-elevated);
  font-family:var(--font-body); font-size:11px; font-weight:700; color:var(--ink-mute);
}
.docs-search__clear{
  position:absolute; right:9px; top:21px; transform:translateY(-50%);
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--ink-mute); cursor:pointer; transition:color .15s ease, background .15s ease;
}
.docs-search__clear:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.docs-search__kbd[hidden], .docs-search__clear[hidden], .docs-sr[hidden]{ display:none; }

.docs-sr{
  position:absolute; top:calc(100% + 8px); right:0; width:min(360px, calc(100vw - 48px));
  max-height:min(62vh, 480px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(15,15,20,0.18); padding:6px;
  display:flex; flex-direction:column; gap:2px; z-index:41;
}
.docs-sr-hit{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid transparent; transition:background .15s ease, border-color .15s ease; }
.docs-sr-hit:hover, .docs-sr-hit.is-active{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.docs-sr-hit.is-active{ border-color:var(--line); }
.docs-sr-hit__icon{ flex:none; font-size:16px; color:var(--ink-mute); }
.docs-sr-hit__main{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.docs-sr-hit__label{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docs-sr-hit__crumb{ font-family:var(--font-body); font-size:11px; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docs-sr-hit mark{ background:color-mix(in srgb, var(--purple) 24%, transparent); color:inherit; border-radius:3px; padding:0 1px; }
mark.docs-hl{
  background:color-mix(in srgb, var(--c) 30%, transparent); color:inherit; border-radius:3px; padding:0 2px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent);
}
mark.docs-hl.is-flash{ animation:docsHlFlash 1.7s ease-out; }
@keyframes docsHlFlash{
  0%{ background:color-mix(in srgb, var(--c) 75%, transparent); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 26%, transparent); }
  100%{ background:color-mix(in srgb, var(--c) 30%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent); }
}
@media (prefers-reduced-motion:reduce){ mark.docs-hl.is-flash{ animation:none; } }
.docs-sr__empty, .docs-sr__more{ font-family:var(--font-body); color:var(--ink-mute); }
.docs-sr__empty{ padding:10px 14px; font-size:12.5px; }
.docs-sr__more{ padding:8px 12px 4px; font-size:11.5px; }

.docs-to-top{
  position:fixed; right:24px; bottom:24px; z-index:40;
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink);
  background:color-mix(in srgb, var(--bg-card) 90%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 8px 22px rgba(15,15,20,0.10); font-size:20px; cursor:pointer;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, background .18s ease, border-color .18s ease;
}
.docs-to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.docs-to-top:hover{ border-color:var(--line-strong); background:var(--bg-card); }
@media (prefers-reduced-motion:reduce){ .docs-to-top{ transition:opacity .2s ease; transform:none; } }

.docs-sidenav-foot{ flex:none; display:flex; flex-direction:column; gap:2px; padding:0; }
.docs-rail-sep{ height:1px; background:var(--line); margin:10px 8px; }
.docs-util{
  display:flex; align-items:center; gap:4px; width:100%; text-align:left;
  padding:8px; border-radius:11px; border:1px solid transparent; min-height:46px; cursor:pointer;
  transition:background .18s ease;
}
.docs-util:hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); }
.docs-util-icon{
  flex:none; width:32px; height:32px; display:grid; place-items:center; font-size:19px;
  color:var(--ink-mute); transition:color .2s ease;
}
.docs-util-label{ display:block; min-width:0; overflow:hidden; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:-0.005em; color:var(--ink-dim); white-space:nowrap; }
.docs-util--accent:hover .docs-util-icon{ color:var(--turquoise); }
.docs-util--back:hover .docs-util-icon{ color:var(--ink); }
.docs-util--back:hover .docs-util-label{ color:var(--ink); }
.docs-util--logout:hover .docs-util-icon{ color:var(--red); }
.docs-util--logout:hover .docs-util-label{ color:var(--red); }
@media (min-width:921px){
  .docs-app.rail-collapsed .docs-sidenav{ width:80px; background:transparent; box-shadow:none; }
  .docs-app.rail-collapsed .docs-rail-top{ border-bottom-color:transparent; padding-left:8px; }
  .docs-app.rail-collapsed .docs-rail-collapse{ display:none; }
  .docs-app.rail-collapsed .docs-brand{ gap:0; cursor:pointer; }
  .docs-app.rail-collapsed .docs-brand-text{ display:none; }
  .docs-app.rail-collapsed .docs-brand-expand{ display:grid; position:absolute; inset:0; place-items:center; font-size:20px; color:var(--ink); opacity:0; transition:opacity .2s ease; }
  .docs-app.rail-collapsed .docs-brand:hover img{ opacity:0; scale:1; filter:none; }
  .docs-app.rail-collapsed .docs-brand:hover .docs-brand-expand{ opacity:1; }
  .docs-app.rail-collapsed .docs-nav-group h2{ visibility:hidden; }
  .docs-app.rail-collapsed .docs-nav-link{ gap:0; width:44px; padding:5px; }
  .docs-app.rail-collapsed .docs-nav-link span{ display:none; }
  .docs-app.rail-collapsed .docs-nav{ overflow:visible; padding:6px 4px 10px; }
  .docs-app.rail-collapsed .docs-util{ gap:0; }
  .docs-app.rail-collapsed .docs-util-label{ display:none; }
}
/* Anchored to .docs-main rather than .docs-content so only one element
   has to be raised above the field — .docs-content's children are
   generated markup of varying shape, and blanket-positioning them would
   create containing blocks that anything absolutely positioned inside the
   docs could trip over. --c comes from .docs-app, so docs read turquoise
   throughout. */
.docs-main{ flex:1 1 auto; min-width:0; position:relative; }
/* Clips the orb layer's -48px overscan. clip rather than hidden: it
   does not create a scroll container, so the sticky rail still resolves
   against the viewport. */
.docs-app{ overflow-x:clip; }
.docs-app::before{ inset:-170px -170px 0; --orb-scale:1; --orb-alpha:.64; }
:root[data-theme="dark"] .docs-app::before{ --orb-c:color-mix(in srgb, var(--c) 70%, #fff); --orb-alpha:.40; }

.docs-content{ position:relative; z-index:1; min-width:0; max-width:1100px; margin:0 auto; padding:34px 48px 96px; animation:panelIn .4s cubic-bezier(.2,.8,.2,1); }
.docs-onthispage{
  position:sticky; top:var(--docs-header-h); flex:none; width:216px; height:calc(100vh - var(--docs-header-h));
  overflow-y:auto; padding:104px 20px 28px; display:flex; flex-direction:column; gap:2px;
}
.docs-otp__title{ padding-left:16px;  margin-bottom:9px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.docs-otp__list{ position:relative; display:flex; flex-direction:column; gap:2px; }
.docs-otp__marker{
  position:absolute; left:0; top:0; width:3px; height:16px; border-radius:999px;
  background:var(--c); opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, background-color .2s ease;
}
.docs-onthispage.has-active .docs-otp__marker{ opacity:1; }
.docs-onthispage a{ color:var(--ink-mute); font-size:12.5px; line-height:1.4; padding:5px 0 5px 16px; transition:color .15s ease; }
.docs-onthispage a:hover{ color:var(--ink); }
.docs-onthispage a.active{ color:color-mix(in srgb, var(--c) 72%, var(--ink)); font-weight:700; }
.docs-ov-group{ margin-top:36px; }
.docs-ov-group__title{ margin:0 0 14px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.docs-ov-list{ display:flex; flex-direction:column; }
.docs-ov-row{ display:flex; align-items:center; gap:8px; padding:18px 10px; border-bottom:1px solid var(--line); transition:background .15s ease; }
.docs-ov-row:hover{ background:color-mix(in srgb, var(--c) 6%, var(--surface-elevated)); }
.docs-ov-row__icon{ flex:none; width:32px; display:grid; place-items:center; font-size:24px; color:var(--ink-mute); }
.docs-ov-row__meta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.docs-ov-row__name{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.docs-ov-row__desc{ font-size:13px; color:var(--ink-dim); line-height:1.45; }
.docs-ov-row__tag{ flex:none; font-size:11px; font-weight:600; color:var(--ink-mute); }
.docs-ov-row__chev{ flex:none; font-size:18px; color:var(--ink-mute); transition:transform .15s ease, color .15s ease; }
.docs-ov-row:hover .docs-ov-row__chev{ color:color-mix(in srgb, var(--c) 70%, var(--ink)); transform:translateX(2px); }
.docs-pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; }
.docs-pager__link{ display:flex; flex-direction:column; gap:5px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card); transition:transform .18s ease, border-color .18s ease; }
.docs-pager__link--next{ align-items:flex-end; text-align:right; }
.docs-pager__link:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 40%, var(--line)); }
.docs-pager__dir{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-mute); font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0; }
.docs-pager__title{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-0.01em; color:color-mix(in srgb, var(--c) 72%, var(--ink)); }
.docs-intro{ margin-bottom:34px; max-width:780px; }
.docs-intro__eyebrow{ color:color-mix(in srgb, var(--c) 72%, var(--ink)); font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.docs-intro h1{
  font-family:var(--font-display); font-size:clamp(34px,4vw,52px); font-weight:600;
  line-height:1.02; letter-spacing:-0.02em; margin:7px 0 14px;
}
.docs-intro p{ color:var(--ink-dim); font-size:16px; max-width:720px; }
.docs-intro code{ font-family:var(--font-mono); }
.docs-auth-strip{
  display:inline-flex; align-items:center; gap:12px; margin-top:20px; padding:7px 8px 7px 14px;
  border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb, var(--ink) 4%, var(--surface-elevated));
}
.docs-auth-strip__pair{ display:inline-flex; align-items:baseline; gap:12px; }
.docs-auth-strip__pair > span{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-dim); }
.docs-auth-strip code{ font-family:var(--font-body); font-weight:600; font-size:13px; text-transform:none; color:color-mix(in srgb, var(--c) 70%, var(--ink)); }

.docs-nav{ flex:1 0 auto; overflow:visible; display:flex; flex-direction:column; gap:14px; padding:6px 4px 10px; }
.docs-nav-group h2{ padding:0 10px 5px; white-space:nowrap; overflow:hidden; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.docs-nav-item{ margin:0 0 1px; }
.docs-nav-link{
  display:flex; align-items:center; gap:4px; min-width:42px; height:42px; padding:5px; border-radius:10px;
  border:1px solid transparent; font-size:13px; font-weight:600; color:var(--ink-dim);
  white-space:nowrap; transition:background .18s ease, border-color .18s ease, color .15s ease;
}
.docs-nav-link span{ display:block; min-width:0; overflow:hidden; text-overflow:clip; white-space:nowrap; }
.docs-nav-link:hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); color:var(--ink); }
.docs-nav-item.active .docs-nav-link{
  background:color-mix(in srgb, var(--c) 10%, var(--surface-elevated));
  border-color:color-mix(in srgb, var(--c) 22%, transparent);
  color:color-mix(in srgb, var(--c) 72%, var(--ink)); font-weight:700;
}
.docs-nav-link i{
  flex:none; width:32px; height:32px; display:grid; place-items:center;
  font-size:19px; color:var(--ink-mute); transition:color .2s ease;
}
.docs-nav-item.active .docs-nav-link i{ color:var(--c); }
/* Coming Soon docs (MCP tools for now) mirror the disabled sandbox rail items */
.docs-nav-link.is-coming-soon, .docs-ov-row.is-coming-soon{ opacity:.5; cursor:not-allowed; }
.docs-nav-link.is-coming-soon:hover{ background:transparent; color:var(--ink-dim); }
.docs-ov-row.is-coming-soon:hover{ background:transparent; }
.docs-nav-link.is-coming-soon .api-card-badge{ flex:none; margin-left:2px; }
.docs-ov-row.is-coming-soon .api-card-badge{ flex:none; }

.docs-article{
  scroll-margin-top:calc(var(--docs-header-h) + 18px); padding:30px 0 42px;
}
.docs-article__head{ max-width:820px; padding-bottom:28px; border-bottom:1px solid var(--line); scroll-margin-top:calc(var(--docs-header-h) + 18px); }
.docs-article__head + .docs-section{ margin-top:44px; }
.docs-article__head h2{
  margin:14px 0 10px; font-family:var(--font-display); font-size:clamp(28px,3vw,40px);
  line-height:1.08; font-weight:600; letter-spacing:-0.02em;
}
.docs-article__heading{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"eyebrow eyebrow" "icon title" "desc desc"; column-gap:16px; row-gap:7px;
  align-items:center;
}
.docs-article__icon{
  grid-area:icon; flex:none; display:grid; place-items:center;
  font-size:34px; line-height:1; color:var(--ink);
}
.docs-article__heading h2{ grid-area:title; margin:0; }
.docs-article__eyebrow{ grid-area:eyebrow; justify-self:start; color:color-mix(in srgb, var(--c) 70%, var(--ink)); opacity:0.8; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; }
.docs-article__eyebrow-crumb{ color:var(--ink-mute); }
.docs-article__eyebrow-sep{ margin:0 7px; color:var(--ink-mute); opacity:0.6; }
.docs-article__lead{ grid-area:desc; margin:4px 0 0; max-width:680px; line-height:1.55; }
.docs-article__head p, .docs-section p{ color:var(--ink-dim); }
.docs-section{ scroll-margin-top:calc(var(--docs-header-h) + 18px); margin-top:80px; }
.docs-section h3{
  font-family:var(--font-display); font-size:24px; font-weight:600; margin:0 0 12px;
  letter-spacing:-0.02em;
}
.docs-section__head{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin:0 0 16px; }
.docs-section__head h3{ margin:0; flex:none; display:inline-flex; align-items:center; gap:11px; }
.docs-section__head h3::before{ content:""; flex:none; width:5px; height:1.05em; border-radius:999px; background:var(--c); }
.docs-section__action{ margin-left:auto; flex:none; }
.docs-section__link{
  position:absolute; right:100%; top:50%; transform:translateY(-50%);
  margin-right:8px; flex:none; z-index:1;
  display:grid; place-items:center; width:26px; height:26px;
  border-radius:7px; color:var(--ink-mute); font-size:15px; text-decoration:none;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, color .15s ease, background .15s ease;
}
.docs-section__head::after{ content:""; position:absolute; top:0; right:100%; width:36px; height:100%; }
.docs-section__head:hover .docs-section__link,
.docs-section__head:focus-within .docs-section__link,
.docs-section__link:hover,
.docs-section__link:focus-visible{ opacity:1; pointer-events:auto; }
.docs-section__link:hover{ color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); }
.docs-section__link:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
@media (max-width:920px){ .docs-section__link, .docs-section__head::after{ display:none; } }
.docs-section h4{ font-size:13px; font-weight:800; color:var(--ink); margin:0 0 10px; }

.docs-endpoint-stack{ display:flex; flex-direction:column; gap:44px; }
.docs-band__top{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border:1px solid var(--line); border-radius:10px;
  background:color-mix(in srgb, var(--ink) 4%, var(--surface-elevated));
  transition:border-color .15s ease;
}
.docs-band__top:hover{ border-color:var(--line-strong); }
.docs-band__top:hover .docs-copy{ color:var(--ink); }
.docs-band__url{
  flex:1 1 auto; min-width:0; color:var(--ink); font-family:var(--font-body);
  font-size:13px; line-height:1.4; overflow-wrap:anywhere;
}
.docs-band__url-base{ color:var(--ink-mute); }
.docs-band__url-path{ color:var(--ink); font-weight:500; }
.docs-band__top .docs-copy{ flex:none; }
.docs-copy.docs-copy--icon{ width:32px; height:32px; min-height:0; padding:0; border-radius:9px; justify-content:center; background:transparent; border:0; color:var(--ink-mute); font-size:16px; }
.docs-copy.docs-copy--icon:hover{ background:transparent; border:0; color:var(--ink); }
.docs-band__body{ padding:0; }
.docs-band__desc{ display:flex; align-items:flex-start; gap:9px; margin:18px 0 0 79px; color:var(--ink); font-size:14px; line-height:1.65; }
.docs-band__desc i{ flex:none; color:var(--ink-mute); font-size:16px; line-height:1.65; }
.docs-specs{ margin:12px 0 0 79px; }
.docs-spec{ display:flex; gap:22px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line); }
.docs-spec dt{ flex:none; min-width:124px;  white-space:nowrap; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink-dim); }
.docs-spec dd{ margin:0; flex:1; min-width:0; color:var(--ink); font-size:13px; overflow-wrap:anywhere; }
.docs-spec dd code{ font-family:inherit; color:color-mix(in srgb, var(--c) 72%, var(--ink)); }
:root[data-theme="dark"] .docs-band__top{ border-width:0.5px; }
.docs-method{
  display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:5px 8px;
  border-radius:999px; background:var(--fill-subtle); color:var(--ink-dim); font-family:var(--font-body);
  font-size:11px; font-weight:700; flex:none;
}
.docs-method[data-method="GET"]{ background:color-mix(in srgb, var(--green) 24%, var(--surface-elevated)); color:color-mix(in srgb, var(--green) 68%, var(--ink)); }
.docs-method[data-method="POST"]{ background:color-mix(in srgb, var(--turquoise) 24%, var(--surface-elevated)); color:color-mix(in srgb, var(--turquoise) 68%, var(--ink)); }
.docs-method[data-method="PUT"], .docs-method[data-method="PATCH"]{ background:color-mix(in srgb, var(--orange) 24%, var(--surface-elevated)); color:color-mix(in srgb, var(--orange) 68%, var(--ink)); }
.docs-method[data-method="DELETE"]{ background:color-mix(in srgb, var(--red) 24%, var(--surface-elevated)); color:color-mix(in srgb, var(--red) 68%, var(--ink)); }

.docs-codestack{ display:flex; flex-direction:column; gap:18px; }
.docs-codecard{
  min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px;
  background:var(--bg-card); box-shadow:0 0 0 1px var(--card-inset) inset;
}
.docs-codecard__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px 8px 12px; border-bottom:1px solid var(--line);
}
.docs-codecard__head--end{ justify-content:flex-end; }
.docs-codecard__body{
  position:relative; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 4%, var(--surface-elevated));
}
.docs-codecard__body .docs-copy{ position:absolute; top:8px; right:10px; z-index:2; opacity:0; transition:opacity .15s ease; }
.docs-codecard__body:hover .docs-copy, .docs-codecard__body .docs-copy:focus-visible{ opacity:1; }
/* Touch devices can't hover — keep the copy button visible so it stays tappable */
@media (hover: none){ .docs-codecard__body .docs-copy{ opacity:1; } }
.docs-codecard__label{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.docs-codecard__label i{ flex:none; font-size:16px; color:var(--c); }
.docs-codecard__tabs{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--fill-subtle); }
.docs-codetab{
  appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px;
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:0.01em;
  color:var(--ink-mute); background:transparent; transition:color .15s ease, background .15s ease;
}
.docs-codetab i{ font-size:14px; }
.docs-codetab:hover{ color:var(--ink); }
.docs-codetab.is-active{
  color:color-mix(in srgb, var(--c) 70%, var(--ink));
  background:var(--bg-card); box-shadow:0 1px 3px rgba(15,15,20,0.10);
}
.docs-copy{
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:6px 9px;
  border-radius:999px; color:var(--ink-dim); background:var(--fill-subtle); border:1px solid var(--line);
  font-size:11px; font-weight:800; letter-spacing:0; cursor:pointer;
}
.docs-copy:hover{ color:var(--ink); border-color:var(--line-strong); }
.docs-pre{
  margin:0; max-height:460px; overflow:auto;
  display:flex; align-items:flex-start;
  background:color-mix(in srgb, var(--ink) 4%, var(--surface-elevated));
  color:var(--ink); font-family:var(--font-mono); font-size:12.5px; line-height:1.65;
  tab-size:2;
}
.docs-pre__nums{
  position:sticky; left:0; z-index:1; flex:none;
  user-select:none; -webkit-user-select:none;
  padding:16px 14px 16px 18px; text-align:right; white-space:pre;
  color:color-mix(in srgb, var(--ink) 32%, transparent);
  background:color-mix(in srgb, var(--ink) 4%, var(--surface-elevated));
}
.docs-pre__code{ flex:none; padding:16px 18px 16px 16px; white-space:pre; }
.docs-pre code{ font-family:inherit; }
.docs-codecard .docs-pre{ display:none; }
.docs-codecard .docs-pre.is-active{ display:flex; }

/* themed scrollbars for docs scroll areas (replace the default ones) */
.docs-pre, .docs-nav, .docs-onthispage{
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--ink) 26%, transparent) transparent;
}
.docs-pre::-webkit-scrollbar, .docs-nav::-webkit-scrollbar, .docs-onthispage::-webkit-scrollbar{ width:10px; height:10px; }
.docs-pre::-webkit-scrollbar-track, .docs-nav::-webkit-scrollbar-track, .docs-onthispage::-webkit-scrollbar-track{ background:transparent; }
.docs-pre::-webkit-scrollbar-thumb, .docs-nav::-webkit-scrollbar-thumb, .docs-onthispage::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ink) 22%, transparent);
  border:2px solid transparent; background-clip:padding-box; border-radius:999px;
}
.docs-pre::-webkit-scrollbar-thumb:hover, .docs-nav::-webkit-scrollbar-thumb:hover, .docs-onthispage::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--c) 58%, var(--ink)); background-clip:padding-box;
}
.docs-pre::-webkit-scrollbar-corner, .docs-nav::-webkit-scrollbar-corner, .docs-onthispage::-webkit-scrollbar-corner{ background:transparent; }
.docs-notes-stack{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; align-items:start; }
.docs-notes{
  padding:6px 18px 14px; border:1px solid var(--line); border-radius:14px; background:var(--bg-card);
  box-shadow:0 0 0 1px var(--card-inset) inset;
}
.docs-notes--errors{ border-color:color-mix(in srgb, var(--red) 26%, var(--line)); background:color-mix(in srgb, var(--red) 4%, var(--bg-card)); }
.docs-notes .docs-notes__title{ display:inline-flex; align-items:center; gap:8px;  margin:14px 0 2px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.docs-notes__title i{ flex:none; font-size:18px; }
.docs-notes--limits .docs-notes__title i{ color:var(--c); }
.docs-notes--errors .docs-notes__title i{ color:color-mix(in srgb, var(--red) 70%, var(--ink)); }
.docs-notes__list{ list-style:none; margin:0; padding:0; }
.docs-notes__row{ display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-top:1px solid var(--line); color:var(--ink-dim); font-size:14px; line-height:1.5; }
.docs-notes--errors .docs-notes__row{ display:block; }
.docs-note-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--c); margin-top:8px; }
.docs-note-code{ display:inline-flex; align-items:center; vertical-align:middle; white-space:nowrap; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; }
.docs-note-code--4xx{ background:color-mix(in srgb, var(--orange) 20%, var(--surface-elevated)); color:color-mix(in srgb, var(--orange) 60%, var(--ink)); }
.docs-note-code--5xx{ background:color-mix(in srgb, var(--red) 20%, var(--surface-elevated)); color:color-mix(in srgb, var(--red) 60%, var(--ink)); }

/* Light-mode readability: muted grays + accent text read too light on the near-white bg */
:root[data-theme="light"] .docs-app{ --ink-mute:#6c6c76; }
:root[data-theme="light"] .docs-article__eyebrow,
:root[data-theme="light"] .docs-intro__eyebrow,
:root[data-theme="light"] .docs-pager__title,
:root[data-theme="light"] .docs-auth-strip code,
:root[data-theme="light"] .docs-spec dd code,
:root[data-theme="light"] .docs-onthispage a.active,
:root[data-theme="light"] .docs-nav-item.active .docs-nav-link,
:root[data-theme="light"] .docs-codetab.is-active{
  color:color-mix(in srgb, var(--c) 56%, var(--ink));
}
:root[data-theme="light"] .docs-article__eyebrow{ opacity:1; }
:root[data-theme="light"] .docs-method[data-method="GET"]{ color:color-mix(in srgb, var(--green) 50%, var(--ink)); }
:root[data-theme="light"] .docs-method[data-method="POST"]{ color:color-mix(in srgb, var(--turquoise) 52%, var(--ink)); }
:root[data-theme="light"] .docs-method[data-method="PUT"],
:root[data-theme="light"] .docs-method[data-method="PATCH"]{ color:color-mix(in srgb, var(--orange) 52%, var(--ink)); }
:root[data-theme="light"] .docs-method[data-method="DELETE"]{ color:color-mix(in srgb, var(--red) 54%, var(--ink)); }
:root[data-theme="light"] .docs-note-code--4xx{ color:color-mix(in srgb, var(--orange) 52%, var(--ink)); }
:root[data-theme="light"] .docs-note-code--5xx{ color:color-mix(in srgb, var(--red) 54%, var(--ink)); }

@media (max-width:1180px){
  .docs-onthispage{ display:none; }
}
@media (max-width:980px){
  .docs-content{ padding:30px 30px 84px; }
}
@media (max-width:920px){
  .docs-rail-toggle{
    display:inline-grid; position:fixed; top:14px; left:14px; z-index:50; width:42px; height:42px;
    place-items:center; border-radius:999px; background:color-mix(in srgb, var(--bg-card) 88%, transparent);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--line);
    color:var(--ink); box-shadow:0 6px 18px rgba(15,15,20,0.08); font-size:18px;
  }
  .docs-rail-collapse{ display:none; }
  .docs-shell{ display:block; }
  .docs-sidenav{
    position:fixed; top:0; left:0; z-index:60; height:100vh; width:280px;
    transform:translateX(-100%); transition:transform .3s ease; background:var(--bg-card);
    box-shadow:0 24px 60px rgba(15,15,20,0.18);
  }
  body.rail-open .docs-sidenav{ transform:translateX(0); }
  .docs-app .rail-backdrop{ display:block; position:fixed; inset:0; background:rgba(15,15,20,0.32); z-index:55; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  body.rail-open .docs-app .rail-backdrop{ opacity:1; pointer-events:auto; }
  .docs-content{ max-width:none; padding:64px 22px 72px; }
  .docs-search{ top:13px; right:14px; width:min(240px, calc(100vw - 76px)); }
}
@media (max-width:680px){
  .docs-ov-grid{ grid-template-columns:minmax(0,1fr); }
  .docs-pager{ grid-template-columns:minmax(0,1fr); }
  .docs-pager__link--next{ align-items:flex-start; text-align:left; }
  .docs-intro h1{ font-size:32px; }
  .docs-auth-strip{ display:flex; align-items:flex-start; flex-direction:column; gap:5px; }
  .docs-band__top{ flex-wrap:wrap; }
  .docs-specs{ grid-template-columns:minmax(0,1fr); }
}