/* ============================================================
   CyberSentriq developer hub — reference.css (Scalar page only)

   The /reference page mounts Scalar's standalone bundle in the LIGHT DOM
   (#scalar-reference). The shared colors_and_type.css / guides.css carry
   GLOBAL element selectors (h1-h6, p, a, a:hover, code, pre, the `*` reset,
   body) that would cascade into Scalar's own headings, paragraphs, links and
   code and override its typography. So /reference deliberately does NOT load
   those two sheets; it loads only this one, which carries:

     1. the design tokens (:root custom properties), so the page's inline
        <style> can map --scalar-* onto the brand --cs-* tokens, and
     2. the header / footer chrome classes it reuses from the guides layout
        (.skip-link, header.band + .nav*, .navlink*, .btn*, footer + .fbot*).

   There are NO global element rules here (no bare h1-h6/p/a/code/pre, no `*`
   reset), so Scalar fully controls the typography of everything it renders.

   The token block is a verbatim copy of the :root block in
   /_/css/colors_and_type.css; the chrome rules are copied verbatim from
   /_/css/guides.css. Keep them in sync if those sources change. Served from
   the reserved /_/ asset prefix.
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("/_/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
}

:root {
  /* ---------- BRAND (primary) ---------- */
  --cs-sky-blue:        #00AAFF;   /* logo accent / "IQ" mark / hero gradient cap */
  --cs-cobalt-blue:     #0058F5;   /* primary brand colour, marketing CTA */
  --cs-midnight-blue:   #002362;   /* deepest cobalt, brand depth */
  --cs-cyan-blue:       #E2F5FF;   /* lightest brand tint, soft backgrounds */
  --cs-deep-grey:       #272A38;   /* primary text/dark surface */
  --cs-storm-grey:      #6C7089;   /* secondary text */
  --cs-night:           #060A16;   /* brand black, cover backgrounds */
  --cs-white:           #FFFFFF;

  /* ---------- IN-PRODUCT NEUTRALS (greys 1-9) ----------
     Used wall-to-wall in the platform UI; ramp goes near-white -> near-black. */
  --cs-grey-50:         #F0F2FA;   /* surface-1 / hover-on-white */
  --cs-grey-100:        #E4E6EF;   /* divider / disabled fill */
  --cs-grey-200:        #DADDE8;   /* secondary button rest */
  --cs-grey-300:        #C8CBD6;   /* secondary button hover */
  --cs-grey-400:        #B5B9C6;   /* secondary button pressed */
  --cs-grey-500:        #868AA0;   /* disabled text, focus ring outer */
  --cs-grey-600:        #6C7089;   /* secondary text */
  --cs-grey-700:        #565A6D;
  --cs-grey-800:        #3F4254;   /* PRIMARY BUTTON rest (in-product) */
  --cs-grey-850:        #32354A;   /* primary button hover */
  --cs-grey-900:        #272A38;   /* primary button pressed / heading text */
  --cs-grey-950:        #1A1A28;   /* deepest text */
  --cs-grey-1000:       #181D27;

  /* ---------- SYSTEM (status) ----------
     500 = solid badge / icon tone · 300 = soft/hover tone */
  --cs-warning:         #EEBB40;   /* warning-500 — amber */
  --cs-warning-300:     #F3CF79;   /* warning-300 — soft amber */
  --cs-warning-fg:      #8A5A0F;   /* darker readable foreground on light tints */
  --cs-success:         #4ABB89;   /* success-500 — green */
  --cs-success-300:     #80CFAC;   /* success-300 — soft green */
  --cs-success-fg:      #0F4F2D;
  --cs-error:           #E0625C;   /* error-500 — destructive primary */
  --cs-error-300:       #E9918D;   /* error-300 — soft red */
  --cs-error-hover:     #CC4F49;
  --cs-error-pressed:   #B03D38;
  --cs-info:            #88A3E0;   /* info badge */
  --cs-insight:         #C378DA;   /* insight badge */
  --cs-archive:         #DADDE8;   /* archive badge (same as grey-200) */

  /* ---------- SECONDARY (dashboards, charts, labels & badges) ---------- */
  --cs-secondary-magenta:   #BB1697;
  --cs-secondary-periwinkle:#7A89F5;
  --cs-secondary-teal:      #33DBD3;
  --cs-secondary-lavender:  #C378DA;

  /* ---------- BRANDING (customer customisation, extra data-viz) ---------- */
  --cs-branding-purple:     #9C74F0;
  --cs-branding-orange:     #F9B958;
  --cs-branding-green:      #93C572;
  --cs-branding-blue:       #88A3E0;
  --cs-branding-yellow:     #F5D76E;

  /* Legacy aliases — kept temporarily for cards built before the palette
     refresh. Prefer the --cs-secondary-* / --cs-branding-* tokens above. */
  --cs-purple:          var(--cs-secondary-magenta);
  --cs-green:           var(--cs-branding-green);
  --cs-indigo:          var(--cs-secondary-periwinkle);

  --cs-orange:          var(--cs-branding-orange);
  --cs-yellow:          var(--cs-branding-yellow);
  --cs-fern:            var(--cs-branding-green);
  --cs-violet:          var(--cs-branding-purple);
  --cs-pink:            var(--cs-secondary-lavender);
  --cs-teal:            var(--cs-secondary-teal);

  /* ---------- DASHBOARD PALETTE 2 (neutral data viz) ---------- */
  --cs-data-1:          #71E6E0;
  --cs-data-2:          #DD8BCB;
  --cs-data-3:          #868AA0;
  --cs-data-4:          #C378DA;   /* insight badge */

  /* ---------- SEMANTIC ALIASES ---------- */
  --bg:                 var(--cs-white);
  --bg-subtle:          var(--cs-grey-50);
  --bg-muted:           var(--cs-grey-100);
  --surface:            var(--cs-white);
  --surface-raised:     var(--cs-white);
  --surface-inverse:    var(--cs-grey-900);

  --fg:                 var(--cs-grey-950);     /* heading / primary text */
  --fg-1:               var(--cs-grey-900);     /* body */
  --fg-2:               var(--cs-grey-600);     /* secondary text */
  --fg-3:               var(--cs-grey-500);     /* disabled / placeholder */
  --fg-inverse:         var(--cs-white);
  --fg-brand:           var(--cs-cobalt-blue);
  --fg-link:            var(--cs-cobalt-blue);

  --border:             var(--cs-grey-100);
  --border-strong:      var(--cs-grey-200);
  --border-focus:       var(--cs-grey-500);     /* focus ring outer */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:       "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:          "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ----------
     Caption  12 / 16     Inter
     Body Base 16 / 24    Inter   <- default body, buttons
     Body Lg  18 / 28     Inter   <- larger nav, dropdowns
     Subtitle 20 / 24     Inter   <- accordion/dashboard page titles
     H3       24 / 28     Inter   <- larger page subtitles, dashboard numbers
     H2       30 / 36     Inter   <- modal, banner titles
     H1       36 / 44     Inter   (Montserrat on marketing)
     H1-XL    48 / 56     Inter   <- documentation H1
     Display  96 / 120    Montserrat <- hero / cover slide  */
  --fs-caption:    12px;
  --lh-caption:    16px;
  --fs-body:       16px;
  --lh-body:       24px;
  --fs-body-lg:    18px;
  --lh-body-lg:    28px;
  --fs-subtitle:   20px;
  --lh-subtitle:   24px;
  --fs-h3:         24px;
  --lh-h3:         28px;
  --fs-h2:         30px;
  --lh-h2:         36px;
  --fs-h1:         36px;
  --lh-h1:         44px;
  --fs-h1-xl:      48px;
  --lh-h1-xl:      56px;
  --fs-display:    96px;
  --lh-display:    120px;
  --fs-hero:       160px;     /* cover slide hero */
  --lh-hero:       150px;

  /* ---------- SPACING (4-base) ---------- */
  --space-0:        0;
  --space-1:        2px;
  --space-2:        4px;
  --space-3:        8px;
  --space-4:        12px;
  --space-5:        16px;
  --space-6:        20px;
  --space-7:        24px;
  --space-8:        32px;
  --space-9:        40px;
  --space-10:       48px;
  --space-11:       64px;
  --space-12:       80px;
  --space-13:       96px;
  --space-14:       128px;

  /* ---------- RADIUS ---------- */
  --radius-xs:      4px;          /* radius-xs / small chips */
  --radius-sm:      6px;          /* small/medium buttons */
  --radius-md:      8px;          /* default button, input */
  --radius-lg:      12px;         /* cards, modals, banners */
  --radius-xl:      16px;
  --radius-2xl:     24px;
  --radius-full:    9999px;       /* pills, avatars */

  /* ---------- SHADOWS (tokens) ----------
     Use sm on inputs, md on cards/tiles, lg on dropdowns/hover, xl on modals. */
  --shadow-xs:      0 1px 2px rgba(24,28,50,0.04);
  --shadow-sm:      0 1px 3px rgba(24,28,50,0.10), 0 1px 2px -1px rgba(24,28,50,0.10);
  --shadow-md:      0 4px 8px -2px rgba(24,28,50,0.10), 0 2px 4px -2px rgba(24,28,50,0.06);
  --shadow-lg:      0 12px 16px -4px rgba(24,28,50,0.10), 0 4px 6px -2px rgba(24,28,50,0.06);
  --shadow-xl:      0 24px 48px -12px rgba(24,28,50,0.18);

  /* Focus ring: 2px white inner + 4px grey-500 outer. */
  --focus-ring:     0 0 0 2px var(--cs-white), 0 0 0 4px var(--cs-grey-500);

  /* Brand gradient strip used on documentation page headers */
  --brand-strip:    var(--cs-sky-blue);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  120ms;
  --duration-base:  180ms;
  --duration-slow:  280ms;
}

/* ============================================================
   Page baseline (scoped to html/body only — deliberately NOT the
   `h1-h6/p/a/code/pre` element rules from colors_and_type.css, so nothing
   here overrides Scalar's own typography inside #scalar-reference).
   ============================================================ */
html, body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keep the viewport scrollbar present and unchanged while Scalar's "Test
   Request" modal is open. The modal locks scroll with `body { overflow: hidden }`.
   Because the browser propagates the body's overflow to the viewport when
   `html` is `overflow: visible`, that lock removes the viewport scrollbar
   entirely — reflowing the page wider AND swapping the active scrollbar for an
   empty track (a visible width shift + colour change). `scrollbar-gutter: stable`
   alone does NOT fix this: it is bypassed by the same propagation. Forcing
   `overflow-y: scroll` on `html` makes `html` the definitive scroll container,
   so the body's `overflow: hidden` no longer propagates to the viewport and the
   scrollbar stays put (same width, same thumb) whether or not the modal is open.
   scrollbar-gutter is kept as belt-and-braces. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Border-box + margin reset, scoped to the reused header/footer chrome only
   (guides.css applies these via a global `*` reset we intentionally omit here).
   These selectors never reach #scalar-reference, which lives in <main>. */
header.band, header.band *,
footer, footer *,
.skip-link { box-sizing: border-box; margin: 0; }

/* ---------- Header (solid brand band, mirrors the landing) ---------- */
/* Keyboard skip link, visible only when focused. */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--cs-cobalt-blue); color: #fff; padding: 9px 14px;
  border-radius: var(--radius-md); font-size: 14px; font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* z-index 100 keeps our sticky header above Scalar's sticky sidebar/topbar
   (Scalar uses z-index 10). Paired with --scalar-custom-header-height: 68px in
   reference.html, which offsets Scalar's sticky elements to start below this
   68px header — so they neither overlap nor hide under it. The skip-link
   (z-index 200) stays above the header when focused. */
header.band { background: var(--cs-grey-950); position: sticky; top: 0; z-index: 100; }
/* Nav rules are scoped under `header.band` so Scalar's injected global CSS
   (which bleeds onto bare selectors like `.nav`/`.navlink`/`.nav-actions` and
   previously broke the centering) can't override the header. The higher
   specificity keeps the nav full-width and its links styled on /reference. */
header.band .nav { padding: 15px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header.band .nav .logo { display: inline-flex; align-items: center; }
header.band .nav .logo img { height: 26px; display: block; }
header.band .nav-actions { display: flex; align-items: center; gap: 18px; }
header.band .navlink { font-size: 14px; font-weight: 500; color: var(--cs-cyan-blue); opacity: .85; padding: 8px 2px; transition: .15s; text-decoration: none; }
header.band .navlink:hover { opacity: 1; color: #fff; }
header.band .navlink-active { opacity: 1; color: #fff; box-shadow: inset 0 -2px 0 var(--cs-sky-blue); }
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.2; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: none; transition: .15s; white-space: nowrap; text-decoration: none; }
.btn-pri { background: #2563eb; color: #fff; }
.btn-pri:hover { background: #1d4ed8; }

@media (max-width: 900px) {
  header.band .navlink { display: none; }
  header.band .navlink-active { display: inline-block; }
}

/* ---------- Footer ---------- */
/* No margin-top here (guides.css uses 60px to breathe after prose): on the
   reference page Scalar's app fills the column, so the footer butts directly
   under it — the 60px would otherwise leave a ~61px gap above the footer. */
footer { border-top: 1px solid var(--border); margin-top: 0; background: #fff; }
.fbot { max-width: 1180px; margin: 0 auto; padding: 22px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; }
.fbot p { font-size: 12.5px; color: var(--cs-storm-grey); }
.fbot a { color: var(--cs-storm-grey); text-decoration: none; }
.fbot a:hover { color: var(--cs-cobalt-blue); }

/* ---------- "Declare reliance" affordance (Task 15) ----------
   Lives in the header nav, hidden by default and revealed by
   declare-affordance.js only for a signed-in visitor (see reference.html).
   Every rule below is scoped under .declare-affordance / .declare-panel /
   .declare-signin-hint, so — like the rest of this file — nothing here can
   bleed into Scalar's own light-DOM markup. */
.declare-affordance { position: relative; }

.btn-sec {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35);
}
.btn-sec:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }

.declare-signin-hint {
  font-size: 14px; font-weight: 500; color: var(--cs-cyan-blue); opacity: .85;
  text-decoration: underline; text-underline-offset: 2px;
}
.declare-signin-hint:hover { opacity: 1; color: #fff; }

.declare-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 110;
  width: min(380px, calc(100vw - 32px));
  background: var(--surface); color: var(--fg-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); padding: 18px 20px;
}
.declare-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.declare-panel-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cs-midnight-blue); margin: 0; }
.declare-close {
  font-family: var(--font-body); font-size: 20px; line-height: 1; color: var(--fg-2);
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm);
}
.declare-close:hover { color: var(--fg-1); background: var(--bg-subtle); }
.declare-panel-lede { font-size: 13px; color: var(--fg-2); margin: 0 0 14px; }

.declare-panel form { display: flex; flex-direction: column; gap: 12px; }
.declare-panel .field { display: flex; flex-direction: column; gap: 5px; }
.declare-panel label { font-size: 12px; font-weight: 600; color: var(--cs-storm-grey); }
.declare-panel input, .declare-panel select {
  font-family: var(--font-body); font-size: 14px; color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 8px 10px; background: var(--bg);
}
.declare-panel input:focus, .declare-panel select:focus {
  outline: none; border-color: var(--cs-cobalt-blue); box-shadow: 0 0 0 3px var(--cs-cyan-blue);
}
.declare-panel-actions { display: flex; justify-content: flex-end; margin-top: 2px; }

.declare-status { font-size: 13px; margin-top: 12px; color: var(--cs-success-fg); }
.declare-status-error { color: var(--cs-error); }

@media (max-width: 640px) {
  .declare-panel { position: fixed; top: auto; right: 12px; left: 12px; bottom: 12px; width: auto; }
}