/* The BCL help centre theme (docs.bcl.my, Starlight 0.42), so the API
   reference and the help centre look like one site: the BCL yellow, the warm
   greys, Arial for text, Inter for headings, and the same dark top bar.
   Scalar's own theme is off (theme: 'none'), so every colour comes from here. */
/* Source of the values: the unlayered :root and [data-theme=light] tokens in
   docs.bcl.my/_astro/common.BCfc3ici.css. The live pages use this yellow set.
   The blue set (#3369ff, #3d50f5) in the same file is the Starlight default,
   and the yellow set overrides it (28 Oct 2026). */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./inter-latin-wght-normal.woff2') format('woff2-variations');
}

/* The top bar is dark in both themes, as on docs.bcl.my (--on-header).
   Thus its colours are on :root and do not change with the theme. */
:root {
  --scalar-custom-header-height: var(--bc-header-height);
  --scalar-font: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --scalar-font-code: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --bc-display: 'Inter Variable', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --scalar-radius: 6px;
  --scalar-radius-lg: 8px;
  --scalar-radius-xl: 10px;
  --bc-header: #222222;
  --bc-header-ink: #EDEBE2;
  --bc-header-ink-2: #CFCDC4;
  --bc-header-line: #403E38;
  --bc-header-hover: #34332E;
  --bc-header-accent: #FED600;
  /* The page surface for the Copy page button and its menu, before Scalar
     sets .light-mode or .dark-mode on <body>. */
  --bc-panel: #1E1D1A;
  --bc-panel-ink: #F4F2EA;
  --bc-panel-ink-2: #CFCDC4;
  --bc-panel-line: #403E38;
  --bc-panel-hover: #2B2A26;
}

/* Light: white page, warm greys, #7A5E00 (dark yellow) for links and the
   current item. The sidebar is #F7F6F1. */
.light-mode {
  --bc-panel: #FFFFFF;
  --bc-panel-ink: #303028;
  --bc-panel-ink-2: #5A5A50;
  --bc-panel-line: #E6E4DA;
  --bc-panel-hover: #F2F1EB;
  --bc-rule: #CFCBBE;
  --bc-nav-bg: #F8F8F8;
  --bc-top-bar: #E0B800;
  --bc-code-inline: #F2F1EB;
  --bc-scroll-thumb: #D9D6CB;
  --bc-scroll-thumb-hover: #A5A396;

  --scalar-color-1: #303028;
  --scalar-color-2: #5A5A50;
  --scalar-color-3: #666658;
  --scalar-color-accent: #7A5E00;
  --scalar-background-1: #FFFFFF;
  --scalar-background-2: #F7F6F1;
  --scalar-background-3: #F2F1EB;
  --scalar-background-accent: #FDF3CE;
  --scalar-border-color: #E6E4DA;

  --scalar-sidebar-background-1: #F7F6F1;
  --scalar-sidebar-color-1: #303028;
  --scalar-sidebar-color-2: #5A5A50;
  --scalar-sidebar-border-color: #F2F1EB;
  --scalar-sidebar-item-hover-background: #F2F1EB;
  --scalar-sidebar-item-hover-color: #303028;
  --scalar-sidebar-item-active-background: #FDF3CE;
  --scalar-sidebar-color-active: #7A5E00;
  --scalar-sidebar-search-background: #FFFFFF;
  --scalar-sidebar-search-border-color: #E6E4DA;
  --scalar-sidebar-search-color: #666658;

  /* Strong buttons: the BCL yellow with dark text, as the yellow buttons on
     docs.bcl.my ("Watch the steps"). */
  --scalar-button-1: #FED600;
  --scalar-button-1-hover: #F0C900;
  --scalar-button-1-color: #222222;
}

/* Dark: warm near-black #1E1D1A, the sidebar #2B2A26, yellow #FED600. */
/* The page ground before Scalar paints, so a reload in dark mode does not
   flash white. */
body.dark-mode { background: #1E1D1A; }
body.light-mode { background: #FFFFFF; }

.dark-mode {
  --bc-panel: #1E1D1A;
  --bc-panel-ink: #F4F2EA;
  --bc-panel-ink-2: #CFCDC4;
  --bc-panel-line: #403E38;
  --bc-panel-hover: #2B2A26;
  --bc-rule: #5A574E;
  --bc-nav-bg: #2B2A26;
  --bc-top-bar: #FED600;
  --bc-code-inline: #34332E;
  --bc-scroll-thumb: #4A4842;
  --bc-scroll-thumb-hover: #6F6D62;

  --scalar-color-1: #F4F2EA;
  --scalar-color-2: #CFCDC4;
  --scalar-color-3: #A5A396;
  --scalar-color-accent: #FED600;
  --scalar-background-1: #1E1D1A;
  --scalar-background-2: #2B2A26;
  --scalar-background-3: #34332E;
  --scalar-background-accent: #3A3212;
  --scalar-border-color: #403E38;

  --scalar-sidebar-background-1: #2B2A26;
  --scalar-sidebar-color-1: #F4F2EA;
  --scalar-sidebar-color-2: #CFCDC4;
  --scalar-sidebar-border-color: #1E1D1A;
  --scalar-sidebar-item-hover-background: #34332E;
  --scalar-sidebar-item-hover-color: #F4F2EA;
  --scalar-sidebar-item-active-background: #3A3212;
  --scalar-sidebar-color-active: #FED600;
  --scalar-sidebar-search-background: #1E1D1A;
  --scalar-sidebar-search-border-color: #403E38;
  --scalar-sidebar-search-color: #A5A396;

  --scalar-button-1: #FED600;
  --scalar-button-1-hover: #FDE24D;
  --scalar-button-1-color: #222222;
}

/* Headings: Inter 700, -0.02em, as on the help centre. */
.scalar-app :is(h1, h2, .section-header) {
  font-family: var(--bc-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---- Header, the same as docs.bcl.my -------------------------------------
   Fixed, not sticky: <body> has height 100%, so a sticky bar scrolled away
   after the first screen. Measured from docs.bcl.my (28 Oct 2026): 64px high,
   12px 24px padding, background #222222, logo 28px, search 352 x 40 at
   x = 336, links 14px Arial. In dark mode the bar is #222222, as on
   docs.bcl.my. In light mode the bar is white with the bcl.my logo from
   main.bcl.my (Hanny, 28 Oct 2026). */
:root { --bc-header-height: 64px; }
.bc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--bc-header-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--bc-header);
  border-bottom: 1px solid var(--bc-header-line);
  font-family: var(--scalar-font);
  font-size: 14px;
}
#app { padding-top: var(--bc-header-height); }
.bc-brand { display: flex; align-items: center; flex: 0 0 auto; width: 296px; text-decoration: none; }
.bc-brand img { height: 28px; width: auto; display: block; }
/* Dark bar: the logo with white letters (logo-on-dark.png). Light bar: the
   bcl.my logo with dark letters (logo.svg, from main.bcl.my). Before Scalar
   sets the theme class on <body>, the bar is dark (28 Oct 2026). */
.bc-brand .bc-logo-light { display: none; }
.bc-brand .bc-logo-dark { display: block; }
body.light-mode .bc-brand .bc-logo-light { display: block; }
body.light-mode .bc-brand .bc-logo-dark { display: none; }
/* Light bar colours: the light page tokens of docs.bcl.my. The accent is the
   light-mode accent, because #FED600 on white is too pale to read. */
body.light-mode {
  --bc-header: #FFFFFF;
  --bc-header-ink: #303028;
  --bc-header-ink-2: #5A5A50;
  --bc-header-line: #E6E4DA;
  --bc-header-hover: #F2F1EB;
  --bc-header-accent: #7A5E00;
}

.bc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 352px;
  height: 40px;
  box-sizing: border-box;
  padding: 1px 8px 1px 12px;
  border: 1px solid var(--bc-header-line);
  border-radius: 8px;
  background: var(--bc-header);
  color: var(--bc-header-ink-2);
  font: inherit;
  cursor: pointer;
}
.bc-search:hover { border-color: color-mix(in srgb, var(--bc-header-accent) 30%, var(--bc-header-line)); color: var(--bc-header-ink); }
.bc-search-label { flex: 1; text-align: left; }
.bc-kbd { display: flex; gap: 4px; padding: 0 6px; border-radius: 4px; background: var(--bc-header-hover); color: var(--bc-header-ink-2); font-family: var(--scalar-font); font-size: 12px; line-height: 21px; }
.bc-kbd kbd { font: inherit; }
.bc-cmd, .bc-mac .bc-ctrl { display: none; }
.bc-mac .bc-cmd { display: inline; }

.bc-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.bc-nav a { color: var(--bc-header-ink); text-decoration: none; font-size: 14px; font-weight: 400; white-space: nowrap; }
.bc-nav a:hover { color: var(--bc-header-accent); }
/* The current site, in the yellow of the docs.bcl.my site title. */
.bc-nav a[aria-current="page"] { color: var(--bc-header-accent); }
.bc-divider { width: 1px; height: 32px; background: var(--bc-header-line); }
.bc-theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--bc-header-ink);
  cursor: pointer;
}
.bc-theme:hover { background: var(--bc-header-hover); }
.bc-theme .bc-i-sun { display: none; }
.dark-mode .bc-theme .bc-i-sun { display: block; }
.dark-mode .bc-theme .bc-i-moon { display: none; }
:is(.bc-search, .bc-theme, .bc-nav a, .bc-brand):focus-visible { outline: 2px solid var(--bc-header-accent); outline-offset: 2px; }

/* The header has the search, so the search box at the top of Scalar's sidebar
   is hidden. Its button stays in the page: the header search presses it. */
aside.t-doc__sidebar > div:has(.sidebar-search-placeholder) { display: none; }

/* The header has the theme button, so the row with "Powered by Scalar" and
   Scalar's light and dark switch is hidden (Hanny, 27 Oct 2026). The switch
   stays in the page: the header theme button presses it. */
.darklight-reference > div:has(button[class*="group/toggle"]) { display: none; }

/* "Open API Client": on the grey light sidebar it had the same grey as the
   panel and looked flat. Now it has the page colour and a border, as the
   Copy page button on docs.bcl.my (BCL colours, 28 Oct 2026). */
.light-mode .open-api-client-button { background: #FFFFFF; border: 1px solid #E6E4DA; color: #303028; }
.light-mode .open-api-client-button:hover { background: #F2F1EB; border-color: #8B887B; }
.dark-mode .open-api-client-button { background: #1E1D1A; border: 1px solid #403E38; color: #F4F2EA; }
.dark-mode .open-api-client-button:hover { background: #34332E; border-color: #6F6D62; }
.open-api-client-button { border-radius: 8px; }

/* Client library icons in each language's own colour (Hanny, 27 Oct 2026).
   The light value is the brand colour, the dark value is a lighter shade of it
   where the brand colour is too dark on #1E1D1A. */
.light-mode {
  --bc-lang-shell: #2E7D32; --bc-lang-ruby: #CC342D; --bc-lang-node: #417E38;
  --bc-lang-php: #777BB4; --bc-lang-python: #3776AB; --bc-lang-go: #007D9C;
  --bc-lang-java: #E76F00; --bc-lang-c: #5C6BC0; --bc-lang-csharp: #9B4F96;
  --bc-lang-kotlin: #7F52FF; --bc-lang-swift: #F05138; --bc-lang-dart: #0175C2;
  --bc-lang-js: #B59A00; --bc-lang-r: #276DC3; --bc-lang-powershell: #2671BE;
  --bc-lang-objc: #438EFF; --bc-lang-ocaml: #EC6813; --bc-lang-clojure: #5881D8;
  --bc-lang-rust: #B7410E;
}
.dark-mode {
  --bc-lang-shell: #4EAA25; --bc-lang-ruby: #E5534B; --bc-lang-node: #5FA04E;
  --bc-lang-php: #8892BF; --bc-lang-python: #FFD43B; --bc-lang-go: #00ADD8;
  --bc-lang-java: #F89820; --bc-lang-c: #A8B9CC; --bc-lang-csharp: #B57BB3;
  --bc-lang-kotlin: #A97BFF; --bc-lang-swift: #F05138; --bc-lang-dart: #40C4FF;
  --bc-lang-js: #F7DF1E; --bc-lang-r: #4F8FE0; --bc-lang-powershell: #5391FE;
  --bc-lang-objc: #6AA6FF; --bc-lang-ocaml: #EC6813; --bc-lang-clojure: #91DC47;
  --bc-lang-rust: #DEA584;
}
.client-libraries-icon__shell { color: var(--bc-lang-shell); }
.client-libraries-icon__ruby { color: var(--bc-lang-ruby); }
.client-libraries-icon__node, .client-libraries-icon__js { color: var(--bc-lang-node); }
.client-libraries-icon__js { color: var(--bc-lang-js); }
.client-libraries-icon__php { color: var(--bc-lang-php); }
.client-libraries-icon__python { color: var(--bc-lang-python); }
.client-libraries-icon__go { color: var(--bc-lang-go); }
.client-libraries-icon__java { color: var(--bc-lang-java); }
.client-libraries-icon__c { color: var(--bc-lang-c); }
.client-libraries-icon__csharp { color: var(--bc-lang-csharp); }
.client-libraries-icon__kotlin { color: var(--bc-lang-kotlin); }
.client-libraries-icon__swift { color: var(--bc-lang-swift); }
.client-libraries-icon__dart { color: var(--bc-lang-dart); }
.client-libraries-icon__r { color: var(--bc-lang-r); }
.client-libraries-icon__powershell { color: var(--bc-lang-powershell); }
.client-libraries-icon__objc { color: var(--bc-lang-objc); }
.client-libraries-icon__ocaml { color: var(--bc-lang-ocaml); }
.client-libraries-icon__clojure { color: var(--bc-lang-clojure); }
.client-libraries-icon__rust { color: var(--bc-lang-rust); }
/* Scalar dims the icons of the tabs that are not selected. Keep the colour. */
.client-libraries [class^="client-libraries-icon__"] { opacity: 1; filter: none; }

/* The version badges at the top ("v1.0.0", "OpenAPI 3.1.0"): the soft accent
   colour, not the grey of the page, so they read as labels (Hanny, 27 Oct
   2026). With BCL, the accent is yellow (28 Oct 2026). */
.scalar-app .badge {
  background: var(--scalar-background-accent);
  border-color: color-mix(in srgb, var(--scalar-color-accent) 35%, transparent);
  /* !important: Scalar's text-c-2 class on the badge wins otherwise. */
  color: var(--scalar-color-accent) !important;
  font-weight: 600;
}

/* Space round the page title: the badges, the title and the download link
   touched each other (Hanny, 27 Oct 2026). */
.introduction-section .section-header.tight { margin-top: 14px; margin-bottom: 16px !important; }

/* ---- "Copy page", the same as the help centre (.on-copy on docs.bcl.my) ----
   A split button with the turning gold ring, and a menu: copy or view the
   reference as Markdown, or open an AI with it. The ring colours are the same
   on docs.bcl.my. The button has the page colour (--bc-panel), not the colour
   of the top bar (28 Oct 2026). */
@property --bc-ring { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes bc-ring { to { --bc-ring: 360deg; } }
.bc-copy {
  --bc-gold: #F6C66B; --bc-gold-hot: #FFF4CF; --bc-ember: #8A5A12; --bc-void: var(--bc-panel-line);
  --bc-ring-paint: conic-gradient(from var(--bc-ring),
    var(--bc-void) 0deg, var(--bc-ember) 50deg, var(--bc-gold) 80deg, var(--bc-gold-hot) 92deg,
    var(--bc-gold) 104deg, var(--bc-ember) 140deg, var(--bc-void) 200deg, var(--bc-void) 360deg);
  position: relative; display: flex; flex: none;
  padding: 1px; border-radius: 7px;
  background: var(--bc-ring-paint);
  box-shadow: 0 0 6px -3px rgb(246 198 107 / 0.25);
  animation: bc-ring 4.5s linear infinite;
}
.dark-mode .bc-copy { --bc-void: #1A1408; }
.bc-copy-main, .bc-copy-more summary {
  display: flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--bc-panel-ink-2);
  background: var(--bc-panel); border: 0; padding: 0 10px;
}
.bc-copy-main { border-radius: 6px 0 0 6px; }
.bc-copy-more { display: flex; }
.bc-copy-more summary { border-radius: 0 6px 6px 0; border-inline-start: 1px solid var(--bc-panel-line); list-style: none; padding: 0 7px; }
.bc-copy-more summary::-webkit-details-marker { display: none; }
.bc-copy-main:hover, .bc-copy-more summary:hover { color: var(--bc-panel-ink); background: var(--bc-panel-hover); }
.bc-copy-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1001; width: 16rem;
  display: flex; flex-direction: column; padding: 5px;
  line-height: 1.75; /* the same line height as the help centre menu */
  border: 1px solid transparent; border-radius: 8px;
  background: linear-gradient(var(--bc-panel), var(--bc-panel)) padding-box, var(--bc-ring-paint) border-box;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  animation: bc-ring 4.5s linear infinite;
}
.bc-copy-menu > * {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  padding: 7.2px 9.6px; border: 0; border-radius: 5px; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--bc-panel-ink); text-decoration: none; margin: 0;
}
.bc-copy-menu > *:hover { background: var(--bc-panel-hover); }
.bc-copy-menu small { color: var(--bc-panel-ink-2); font-size: 13px; }
.bc-copy-menu > .bc-ai { flex-direction: row; align-items: center; gap: 10px; }
.bc-ai img { flex: none; width: 16px; height: 16px; border-radius: 3px; }
.light-mode .bc-ai img { box-shadow: 0 0 0 1px var(--bc-panel-line); }
.bc-copy-grp { cursor: default; padding: 9.6px 9.6px 3.2px; font-size: 13px; color: var(--bc-panel-ink-2); border-top: 1px solid var(--bc-panel-line); margin-top: 4px; border-radius: 0; }
.bc-copy-menu > .bc-copy-grp:hover { background: none; }
.bc-copy :focus-visible { outline: 2px solid var(--scalar-color-accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .bc-copy, .bc-copy-menu { animation: none; --bc-ring: 300deg; } }
/* "Copy page" at the bottom of the sidebar: full width, and the menu opens
   upward, because the button is at the bottom of the screen. */
.darklight-reference .bc-copy { font-family: var(--scalar-font); }
.darklight-reference .bc-copy-main { flex: 1; justify-content: center; }
.darklight-reference .bc-copy-menu { top: auto; bottom: calc(100% + 6px); max-height: calc(100vh - var(--bc-header-height) - 80px); overflow-y: auto; }
/* Inside the title row, the button and its menu keep the text font, not the
   heading font of the title. */
.section-header .bc-copy { font-family: var(--scalar-font); font-weight: 400; letter-spacing: normal; }
.section-header .bc-copy b { font-weight: 600; }
/* Environments table: "Environment" and "Production" broke in the middle
   of the word in the narrow first column. */
.introduction-section table :is(th, td):first-child { white-space: nowrap; }
/* The title row: the title on the left, "Copy page" on the right. */
.introduction-section .section-header:has(.bc-copy) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Phones: the label is hidden visually only; the button keeps its name. */
@media (max-width: 800px) {
  .bc-copy-main .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

}

/* Narrower screens: as on the help centre, the links go first, then the
   search box becomes an icon. */
@media (max-width: 1100px) {
  /* Only "Help centre" (docs.bcl.my) stays, so a reader can always go back
     to the guides. It also stays on phones (Hanny, 28 Oct 2026). */
  .bc-nav a:not(.bc-help), .bc-divider { display: none; }
  .bc-nav { order: 1; margin-left: 0; }
  .bc-brand { width: auto; }
  .bc-search { margin-left: auto; }
  .bc-theme { order: 2; }
}
/* Phones: as docs.bcl.my under 50rem, the bar is 56px high with 16px side
   padding, and the logo is 26px (28 Oct 2026). */
@media (max-width: 800px) {
  :root { --bc-header-height: 56px; }
  .bc-header { padding: 0 16px; gap: 8px; }
  .bc-brand img { height: 26px; }
  .bc-search { width: 36px; height: 36px; padding: 0; justify-content: center; border: 0; background: transparent; color: var(--bc-header-ink); }
  .bc-search-label, .bc-search .bc-kbd { display: none; }
  .bc-search svg { width: 20px; height: 20px; }
}

/* ---- Scrollbars, as on the help centre ------------------------------------ */
.scalar-app ::-webkit-scrollbar { width: 10px; height: 10px; }
.scalar-app ::-webkit-scrollbar-track { background: transparent; }
.scalar-app ::-webkit-scrollbar-thumb {
  background: var(--bc-scroll-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.scalar-app ::-webkit-scrollbar-thumb:hover { background-color: var(--bc-scroll-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  .scalar-app * { scrollbar-color: var(--bc-scroll-thumb) transparent; scrollbar-width: thin; }
}

/* Tables as on the help centre (Hanny, 28 Oct 2026): full width, lines
   between the rows only, a line above and below the header, 14px text, the
   first column flush left. A row with an empty first cell is a group row
   (as "Online banking" in Payment Channels): it gets the shaded fill.
   "body" makes these rules win over the Scalar rules, which load later. */
body .scalar-app .markdown table {
  display: table; width: 100%; table-layout: auto; border: 0; border-radius: 0;
  border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.5;
}
body .scalar-app .markdown :is(th, td) {
  border: 0; border-bottom: 1px solid var(--scalar-border-color);
  padding: 8px 16px; background: none; text-align: start; vertical-align: top;
  border-radius: 0; word-break: normal; overflow-wrap: break-word;
}
body .scalar-app .markdown th { border-top: 1px solid var(--scalar-border-color); font-weight: 600; color: var(--scalar-color-1); }
body .scalar-app .markdown td { color: var(--scalar-color-2); }
body .scalar-app .markdown :is(th, td):first-child { padding-left: 0; }
body .scalar-app .markdown tr:has(> td:first-child:empty) > td {
  background: var(--scalar-background-2); color: var(--scalar-color-1); padding-block: 7px;
}
body .scalar-app .markdown tr:has(> td:first-child:empty) > td:first-child { padding-left: 8px; }
/* A guide section has no code, so its right column is empty: the text uses
   the room, up to the line length of the help centre. */
.section-columns:has(> .section-column:last-child:empty) > .section-column:last-child { display: none; }
.section-columns:has(> .section-column:last-child:empty) > .section-column:first-child { flex: 0 1 760px; max-width: 760px; }
/* Sidebar items: the line height of the help centre sidebar, 21px for the
   14px text (Hanny, 28 Oct 2026). Scalar uses 16px, so a name on 2 lines
   looked cramped. The padding is 2.5px less, so a 1-line item stays 32px. */
body aside.t-doc__sidebar :is(a, button)[class*="group/button"] { line-height: 21px; padding-block: 5.5px; }
/* Content text as on the help centre (Hanny, 28 Oct 2026): 15px on 24px,
   grey body text, white or black headings, and links in the accent colour.
   Inline code is 0.875em on a grey fill (#F2F1EB light, #34332E dark, as
   docs.bcl.my, 28 Oct 2026). Only the guide text and the endpoint
   descriptions change. The parameter lists keep their small text. */
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown { --bc-code-bg: var(--bc-code-inline); }
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown :is(p, li) { font-size: 15px; line-height: 24px; color: var(--scalar-color-2); }
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown strong { font-weight: 700; color: inherit; }
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown h2 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; color: var(--scalar-color-1); }
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown h3 { font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -0.015em; color: var(--scalar-color-1); }
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown :is(p, li, td) code { font-size: 0.875em; background: var(--bc-code-bg); color: var(--scalar-color-1); }
body .scalar-app :is(.section-column, .operation-description, .introduction-description-heading, .introduction-description) > .markdown a { color: var(--scalar-color-accent); font-weight: 400; text-decoration-color: currentColor; }
/* Legal footer at the end of the page, as on the help centre: 13px grey
   text, accent links, the build line in mono. On a wide screen it lines up
   with the content, on the right of the sidebar. */
.bc-foot {
  display: flex; flex-direction: column; gap: 3px;
  padding: 24px 24px 32px; border-top: 1px solid var(--scalar-border-color);
  background: var(--scalar-background-1);
  font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.75; color: var(--scalar-color-3);
}
.bc-foot p { margin: 0; }
.bc-foot a { color: var(--scalar-color-accent); text-decoration: underline; }
.bc-foot .bc-build { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em; white-space: nowrap; }
@media (min-width: 1001px) { .bc-foot { padding-left: calc(var(--refs-sidebar-width, 288px) + 60px); } }
/* Info boxes as on the help centre (Hanny, 28 Oct 2026): "> [!NOTE]",
   "> [!TIP]" and "> [!IMPORTANT]" in the descriptions. The same fill, 4px
   left border, bold title with an icon, and 15px text as the help centre
   Note, Tip and Caution boxes. Scalar gives no title, so CSS adds it. */
/* The colours are the computed .starlight-aside colours on docs.bcl.my.
   Note and Tip did not change. Caution is the BCL yellow (28 Oct 2026).
   The doubled class beats the Scalar rules (4 classes) for the box. */
body .scalar-app .markdown-alert {
  --bc-al-bg: #EAF2FC; --bc-al-line: #2F6FC0; --bc-al-title: #173A66; --bc-al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); --bc-al-name: 'Note';
}
body .scalar-app .markdown .markdown-alert.markdown-alert {
  position: relative; display: block; margin: 16px 0; padding: 14px 16px; border: 0;
  border-left: 4px solid var(--bc-al-line); border-radius: 0 6px 6px 0; background: var(--bc-al-bg);
}
body .scalar-app .markdown-alert-tip { --bc-al-bg: #E6F4EC; --bc-al-line: #1F7A4D; --bc-al-title: #14532F; --bc-al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09'/%3E%3Cpath d='M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05'/%3E%3C/svg%3E"); --bc-al-name: 'Tip'; }
body .scalar-app :is(.markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution) { --bc-al-bg: #FDF3CE; --bc-al-line: #E0B400; --bc-al-title: #4A3900; --bc-al-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
body .scalar-app .markdown-alert-important { --bc-al-name: 'Important'; }
body .scalar-app .markdown-alert-warning { --bc-al-name: 'Warning'; }
body .scalar-app .markdown-alert-caution { --bc-al-name: 'Caution'; }
body.dark-mode .scalar-app .markdown-alert { --bc-al-bg: #16263A; --bc-al-line: #5B9BE6; --bc-al-title: #D3E5FA; }
body.dark-mode .scalar-app .markdown-alert-tip { --bc-al-bg: #15301F; --bc-al-line: #5CC98A; --bc-al-title: #D4F2DF; }
body.dark-mode .scalar-app :is(.markdown-alert-important, .markdown-alert-warning, .markdown-alert-caution) { --bc-al-bg: #3A3212; --bc-al-line: #FED600; --bc-al-title: #FDF3CE; }
body .scalar-app .markdown-alert-icon { display: none; }
body .scalar-app .markdown-alert::before {
  content: ''; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px;
  background: var(--bc-al-title); -webkit-mask: var(--bc-al-icon) center / contain no-repeat; mask: var(--bc-al-icon) center / contain no-repeat;
}
/* The box text has the same size, line height and colour as the content text
   (Hanny, 28 Oct 2026). */
body .scalar-app .markdown .markdown-alert .markdown-alert-content { font-size: 15px; line-height: 24px; color: var(--scalar-color-2); }
body .scalar-app .markdown-alert-content::before {
  content: var(--bc-al-name); display: block; margin-bottom: 4px; padding-left: 28px;
  font-size: 15px; line-height: 24px; font-weight: 700; color: var(--bc-al-title);
}
body .scalar-app .markdown-alert-content code { background: rgb(0 0 0 / 0.08); }
body.dark-mode .scalar-app .markdown-alert-content code { background: rgb(255 255 255 / 0.08); }
/* Scalar 1.75 adds "Generate SDKs & MCP" (sidebar) and "Generate SDK" (code
   panels). Both open Scalar's own paid service: hidden (Hanny, 28 Oct 2026). */
body .explore-scalar-pill,
body .generate-sdk-button,
body .selected-client-row > button[aria-haspopup="dialog"] { display: none !important; }
/* Phones: a wide table (Environments) scrolls inside its own box, as on the
   help centre, so the page does not scroll sideways (28 Oct 2026). */
@media (max-width: 800px) {
  body .scalar-app .markdown table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Scalar 1.75 cuts the text of a collapsed tag section to 7 lines. A guide
   section (Getting Started, Checksum and the others) has no endpoints, so it
   gets no "Show more" button, and Safari shows the cut text and an empty
   space. Always show the full text (Hanny, 28 Oct 2026). Not for the one-line
   response summaries (.markdown-summary): they must stay cut, or the page
   scrolls sideways on a phone. */
body .scalar-app .tag-section-container .markdown[class*="line-clamp"]:not(.markdown-summary) {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Code panels (request and response examples): more space between the lines.
   Scalar uses 1.15 (Hanny, 28 Oct 2026). */
body .scalar-app .scalar-code-block :is(pre, code) {
  line-height: 1.6;
}

/* Back to top with a reading-progress ring, the same as the help centre
   (Hanny, 28 Oct 2026). Below the header and Scalar's mobile menu. The
   colours are from .on-scroll-btn on docs.bcl.my: the nav ground, a warm
   line, and a yellow ring (#E0B800 light, #FED600 dark, 28 Oct 2026). */
.bc-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 5; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--bc-rule); border-radius: 50%;
  background: var(--bc-nav-bg); color: var(--scalar-color-1);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); transition: transform 0.15s ease, background 0.15s ease;
}
.bc-top[hidden] { display: none; }
.bc-top-ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); pointer-events: none; }
.bc-top-ring circle { fill: none; stroke-width: 2.5; }
.bc-top-track { stroke: var(--bc-rule); }
.bc-top-bar { stroke: var(--bc-top-bar); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.1s linear; }
.bc-top:hover { background: var(--bc-panel-hover); transform: translateY(-2px); }
.bc-top:focus-visible { outline: 2px solid #F8D030; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bc-top, .bc-top-bar { transition: none; } .bc-top:hover { transform: none; } }

/* Search box: the help centre search colours (Hanny, 28 Oct 2026). Scalar
   gave the box the page colour, so it did not stand out. Now: a panel, a
   border, and a blurred dark layer behind (blur 12px, more than the help
   centre, Hanny 28 Oct 2026). */
/* On docs.bcl.my the search window is in the
   dark top bar, so it is dark in both themes: panel #34332E, field #222222,
   border #403E38, yellow accent. This file does the same (28 Oct 2026).
   The layer colours are the Starlight --sl-color-backdrop-overlay values. */
body:is(.light-mode, .dark-mode) .scalar-modal-layout {
  background: hsla(225, 9%, 36%, 0.66);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body:is(.light-mode, .dark-mode) .scalar-modal {
  --scalar-background-1: #34332E;
  --scalar-background-2: #222222;
  --scalar-background-3: #403E38;
  --scalar-background-accent: #3A3212;
  --scalar-color-1: #F4F2EA;
  --scalar-color-2: #CFCDC4;
  --scalar-color-3: #A5A396;
  --scalar-color-accent: #FED600;
  --scalar-border-color: #403E38;
  color-scheme: dark;
  border: 1px solid #403E38;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.35);
}
body.dark-mode.dark-mode .scalar-modal-layout { background: hsla(223, 13%, 10%, 0.66); }

/* API client window (Test Request): the same blurred layer as the search box
   (Hanny, 28 Oct 2026). Scalar gave it black at 45% with no blur, under our
   header. The window now goes above the header, so the layer covers it too.
   Scalar's will-change: opacity on the container stopped the blur. */
.scalar .scalar-container.scalar-client--open { z-index: 1002; will-change: auto; }
body:is(.light-mode, .dark-mode) .scalar .scalar-app-exit.scalar-app-exit {
  background: hsla(225, 9%, 36%, 0.66);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.dark-mode.dark-mode .scalar .scalar-app-exit.scalar-app-exit { background: hsla(223, 13%, 10%, 0.66); }
body.dark-mode.dark-mode .scalar-modal { box-shadow: 0 16px 40px rgb(0 0 0 / 0.6); }

/* No zoom when a field gets the cursor (Hanny, 28 Oct 2026). iPhone Safari
   zooms in on a field with text smaller than 16px. Scalar uses 12px and 14px.
   Touch screens get 16px. Pinch zoom stays on. */
@media (hover: none) and (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}