/* =========================================================================
   /docs/api/  ·  Salience design system restyle
   -------------------------------------------------------------------------
   Shipped from this repo, linked in by the deploy in place of the page's
   inline <style> block. Loads after the site stylesheet and carl-extras.css.

   This page is built on the Tailwind v3 CDN, which generates its utility
   classes at RUNTIME — those rules land in <head> after this sheet, so every
   colour remap here carries !important to win the cascade. The shared
   carl-extras.css already forces sharp corners, the mono base font and the
   display-font heading scale; this sheet carries only what is page-specific.

   What was wrong: the page shipped a dark "cyber/midnight" theme only half
   remapped onto white — Tailwind default purples, emeralds and roses for
   syntax and status colours, a radial-gradient wash behind the page,
   rounded-lg on everything, and glue rules (the Tailwind CSS-variable
   defaults, the double-transform fix) buried in the inline block. Colours
   now map to the brand tokens, with the validated chart palette (all >=3:1
   on white) taking the syntax/method roles.
   ========================================================================= */

/* ---- Tailwind v3 CDN glue (keep) ---------------------------------------
   The CDN runs with preflight off, so its transform/filter variable defaults
   never get emitted — restore them or translate/scale utilities no-op. */
*,::before,::after{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;
--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;
--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-grayscale:;--tw-hue-rotate:;
--tw-invert:;--tw-saturate:;--tw-sepia:;--tw-drop-shadow:;
--tw-backdrop-blur:;--tw-backdrop-brightness:;--tw-backdrop-contrast:;
--tw-backdrop-grayscale:;--tw-backdrop-hue-rotate:;--tw-backdrop-invert:;
--tw-backdrop-opacity:;--tw-backdrop-saturate:;--tw-backdrop-sepia:;
--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;
--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}

/* Carl's v4 CSS translates via the native `translate` property; the v3 CDN
   also emits a `transform` for the same classes -> double shift. Keep v4's. */
header nav[aria-label=Primary],[data-panel]{transform:none!important}

/* ---- Page ground -------------------------------------------------------
   Paper only — the radial wash is gone. Base type and headings come from
   carl-extras.css (mono body, display-font headings, shared H1 scale). */
.cp-main{background:var(--color-paper,#fff);background-image:none}
.cp-main .font-mono{font-family:var(--font-mono)!important}
.cp-main pre,.cp-main code{font-family:var(--font-mono)}
.cp-main pre{tab-size:2}

/* Tailwind's font-bold reads heavy in the display face next to the rest of
   the site; settle section headings at the house weight. */
.cp-main h2{font-weight:500}
.cp-main h3{font-weight:500}

/* ---- Sidebar ----------------------------------------------------------- */
.cp-main aside .sticky{
  top:7rem;
  max-height:calc(100vh - 8rem);
  overflow-y:auto;
}

/* ---- Code blocks -------------------------------------------------------
   Light register: accent-soft field, hairline frame, so the multi-colour
   syntax below stays readable. The header bar inside reuses bg-midnight-800
   (also remapped to accent-soft) with a hairline border-b. */
.cp-main .code-block{
  background:var(--color-accent-soft,#f9f8f9)!important;
  border:1px solid var(--color-hairline,#e6e6e6);
  font-family:var(--font-mono);
  font-size:0.8125rem;
}
.cp-main .code-block pre{font-size:0.8125rem;line-height:1.7}
/* Long request lines scroll inside their block instead of widening the page
   on a phone. */
.cp-main .code-block{max-width:100%;overflow-x:auto}
.cp-main pre{overflow-x:auto;max-width:100%}
.cp-main pre code{white-space:pre}

/* Inline code chips (code.bg-midnight-800) sit on white; give the soft field
   a hairline so the chip reads as a chip. */
.cp-main code.bg-midnight-800{border:1px solid var(--color-hairline,#e6e6e6)}

/* ---- Colour remap: cyber (accent role) --------------------------------- */
.cp-main .text-cyber-400{color:var(--color-accent-ink,#2c7a2c)!important}
.cp-main .bg-cyber-500{
  background-color:var(--color-ink,#000)!important;
  color:var(--color-paper,#fff)!important;
}
.cp-main .bg-cyber-500:hover{
  background-color:var(--color-accent,#8cf37a)!important;
  color:var(--color-ink,#000)!important;
}
.cp-main .bg-cyber-500\/20{background-color:rgba(140,243,122,0.2)!important}

/* ---- Colour remap: midnight (neutral roles) ---------------------------- */
.cp-main .text-white{color:var(--color-ink,#000)!important}
.cp-main .hover\:text-white:hover{color:var(--color-ink,#000)!important}
.cp-main .text-midnight-300{color:rgba(0,0,0,0.75)!important}
.cp-main .text-midnight-400,
.cp-main .text-midnight-500{color:var(--color-muted,#6b6b6b)!important}
.cp-main .border-midnight-700,
.cp-main .border-midnight-800{border-color:var(--color-hairline,#e6e6e6)!important}
.cp-main .divide-midnight-700>:not([hidden])~:not([hidden]),
.cp-main .divide-midnight-800>:not([hidden])~:not([hidden]){
  border-color:var(--color-hairline,#e6e6e6)!important;
}
.cp-main .bg-midnight-800{background-color:var(--color-accent-soft,#f9f8f9)!important}
.cp-main .bg-midnight-900,
.cp-main .bg-midnight-950{background-color:transparent!important}
.cp-main .bg-midnight-950\/95{background-color:rgba(255,255,255,0.85)!important}
.cp-main .hover\:bg-midnight-800:hover{background-color:rgba(140,243,122,0.08)!important}

/* ---- Colour remap: syntax / method / status ----------------------------
   Validated chart palette, all >=3:1 on white. Chips take a 0.12-alpha tint
   of the same hex; their text keeps the full-strength hex. */
.cp-main .text-emerald-400{color:#00870a!important}   /* GET, strings */
.cp-main .text-purple-400{color:#00729b!important}    /* POST, numbers */
.cp-main .text-amber-400{color:#bb7900!important}     /* PATCH, warnings */
.cp-main .text-rose-400{color:#8d3522!important}      /* DELETE, error codes */
.cp-main .text-blue-400{color:#00a59e!important}      /* language tags */

.cp-main .bg-emerald-500\/20{background-color:rgba(0,135,10,0.12)!important}
.cp-main .bg-purple-500\/20{background-color:rgba(0,114,155,0.12)!important}
.cp-main .bg-amber-500\/20{background-color:rgba(187,121,0,0.12)!important}
.cp-main .bg-rose-500\/20{background-color:rgba(141,53,34,0.12)!important}
.cp-main .bg-blue-500\/20{background-color:rgba(0,165,158,0.12)!important}

/* ---- Shared-frame container ---------------------------------------------
   The page ran full width (max-w-7xl, 80rem). Pull it into the same 1180px
   frame and gutters as every other page. !important because the CDN's
   utilities are injected after this sheet. */
.cp-main .max-w-7xl{
  max-width:1180px!important;
  padding-left:1.5rem!important;padding-right:1.5rem!important;
}
@media(min-width:640px){.cp-main .max-w-7xl{padding-left:2rem!important;padding-right:2rem!important}}
@media(min-width:1024px){.cp-main .max-w-7xl{padding-left:3rem!important;padding-right:3rem!important}}

/* ---- Rail accordion (behaviour in carl-nav.js) --------------------------
   Same register as the help rail: microlabel group heads with a turning
   chevron, hairline rules, links hidden while the group is closed. */
.cp-main aside .sticky > div{border-bottom:1px solid var(--color-hairline,#e6e6e6);margin:0!important}
.cp-main aside .sticky > div:first-child{border-top:1px solid var(--color-hairline,#e6e6e6)}
.cp-main aside .sticky{display:block}
.cp-main aside h3[data-acc-head]{
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;
  font-size:0.625rem!important;font-weight:500!important;
  letter-spacing:0.14em!important;text-transform:uppercase;
  color:var(--color-muted,#6b6b6b)!important;
  padding:0.85rem 0.25rem;margin:0!important;
  cursor:pointer;user-select:none;transition:color .2s;
}
.cp-main aside h3[data-acc-head]:hover{color:var(--color-ink,#000)!important}
.cp-main aside h3[data-acc-head]::after{
  content:"";flex-shrink:0;width:7px;height:7px;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s;
}
.cp-main aside h3[data-acc-head][aria-expanded="true"]::after{transform:rotate(45deg);margin-top:-3px}
.cp-main aside nav[hidden]{display:none!important}
.cp-main aside nav{padding-bottom:0.75rem}
.cp-main aside nav a{font-size:0.8125rem!important;padding:0.5rem 0.75rem!important}
