/* ChargeOn documentation — brand.
   Two things live here:
     1. Material palette mappings (the --cy-* tokens and the two colour schemes) that
        map Material's own components onto the Cyntexa brand.
     2. The brand chrome: scoped copies of the live header/footer rules from the live
        site's single stylesheet, chargeon.css?b79 (fetched 2026-09-04; URL, provenance,
        scoping rules and the numbered deviation list are in overrides/BRAND-SOURCE.md).
        Re-sync from chargeon.css; do not restyle by taste. */

:root {
  --cy-cta:         #3d0743;  /* primary button fill */
  --cy-purple:      #562762;  /* hover, accent, active */
  --cy-dark:        #2b1531;  /* dark hero / section */
  --cy-mid:         #91629c;  /* borders */
  --cy-tint:        rgba(86,39,98,0.19);
  --cy-light-bg:    #f5f5f5;
  --cy-text:        #2a2828;
  --cy-dark-card:   #323232;
  --cy-grad:        linear-gradient(#ff80ad 2.5%, #ffd164 54%);
}

/* Map Material's tokens onto the brand rather than restyling components one by one. */
/* The `[data-md-color-primary]` / `[data-md-color-accent]` qualifiers are load-bearing, not
   decoration. Material emits `data-md-color-primary="indigo"` by default (mkdocs.yml sets no
   `primary:`), and palette.css then sets --md-typeset-a-color and --md-accent-fg-color from
   selectors like `[data-md-color-primary=indigo]:not([data-md-color-scheme=slate])`, which is
   specificity (0,2,0). A plain `[data-md-color-scheme="cyntexa"]` block is (0,1,0) and loses,
   so the brand link and accent colours below were silently inert. (0,2,1) wins. */
body[data-md-color-scheme="cyntexa"][data-md-color-primary][data-md-color-accent] {
  --md-primary-fg-color:        var(--cy-cta);
  --md-primary-fg-color--light: var(--cy-purple);
  --md-primary-fg-color--dark:  var(--cy-dark);
  --md-accent-fg-color:         var(--cy-purple);
  --md-typeset-a-color:         var(--cy-purple);
  --md-default-fg-color:        var(--cy-text);
}
/* Dark mode layers brand accents onto Material's own `slate` scheme (see mkdocs.yml).
   It must NOT be a custom scheme name: a custom name inherits none of Material's dark
   palette, so --md-default-fg-color stayed at the light default (#000000de) over a dark
   background and every text element rendered at 1.21:1 contrast. Overriding only the
   accents here keeps slate's foreground/border/code tokens, which are built for dark. */
/* Same specificity trap as the light block above: palette.css has
   `[data-md-color-scheme=slate][data-md-color-primary=indigo]{--md-typeset-a-color:#5488e8}`
   at (0,2,0), so links rendered Material's default blue instead of the brand colour.
   #c79bd4 on #1a1a1a is 7.4:1, better than the blue it replaces (5.0:1). */
body[data-md-color-scheme="slate"][data-md-color-primary][data-md-color-accent] {
  --md-primary-fg-color:        var(--cy-dark);
  --md-accent-fg-color:         #c79bd4;
  --md-typeset-a-color:         #c79bd4;
  --md-default-bg-color:        #1a1a1a;
  --md-code-bg-color:           var(--cy-dark-card);
}

body, .md-typeset { font-family: "Roboto", system-ui, -apple-system, sans-serif; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: "Raleway", system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

/* =====================================================================================
   Brand chrome — transplanted from chargeon.css?b79
   =====================================================================================
   Scoping: the live stylesheet styles bare `header`, `footer`, `*`, `html`, `body`, `a`,
   `ul`, `li` and would wreck Material, so it is never loaded. Instead:
     - `header {}`  is written as `.cy-chrome--header {}`
     - `footer {}`  is written as `.cy-chrome--footer {}`  (and `footer .x` as `.cy-chrome--footer .x`)
     - the global resets are re-applied under `:where(.cy-chrome)`. `:where()` adds no
       specificity, so `:where(.cy-chrome) a` has the same (0,0,1) weight as the live `a`
       and the live cascade is preserved exactly. The resets come first for that reason.
     - every other class name is the live one (head-content, nav-content, foot-part, …);
       they do not collide with Material's .md-* namespace.
   Units: the live page pins `html { font-size: 16px }`, Material sets `html { font-size:
   125% }` (137.5% / 150% on wide screens). Every rem value copied from chargeon.css is
   therefore written here as px at the live 16px root (1rem = 16px, 1.5rem = 24px,
   0.7rem = 11.2px …) so the chrome renders at its live size. Media queries are px on the
   live site and are copied verbatim.
   Colours are all explicit and no Material scheme variable (--md-*) is referenced: the
   chrome pins its own colours so a Material colour-scheme toggle cannot restyle it. It
   looks the same in both schemes by design.
   ------------------------------------------------------------------------------------- */

/* ---- scoped global resets (live: `*`, `html`, `body`, `div`, `a`, `ul`/`li`) -------- */
:where(.cy-chrome),
:where(.cy-chrome) * {
  margin: 0;
  padding: 0;
}
.cy-chrome {
  /* live html {} + body {} — 16px root, 1.5 line-height, Roboto stack. Material's body is
     0.5rem/10px, so this is what keeps inherited sizes at their live values. */
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}
:where(.cy-chrome) *,
:where(.cy-chrome) *:before,
:where(.cy-chrome) *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
:where(.cy-chrome) div {
  font-family: "Roboto";
}
:where(.cy-chrome) a {
  text-decoration: unset !important;
  margin: 0;
  padding: 0;
}
:where(.cy-chrome) p,
:where(.cy-chrome) span,
:where(.cy-chrome) small,
:where(.cy-chrome) ul,
:where(.cy-chrome) li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* ---- .container (generic live class, scoped because docs CSS may also use the name) --- */
.cy-chrome .container {
  margin: 0 auto;
  max-width: 1280px !important;
  padding: 0 !important;
  width: 100%;
}

/* ---- header ----------------------------------------------------------------------- */
/* live: header { … position: fixed; top: 0; z-index: 999 } with .main-content-wrapper
   { margin-top: 85px } and html { scroll-padding-top: 100px } compensating. Deviation 2
   (rewritten 2026-09-04 for the single-header layout): sticky instead of fixed, so it
   stays in normal flow and needs no compensators; z-index 6 sits above Material's
   sidebars (5) and drawer scrim (5). Height is the --cy-bar-h token (85px at rest, 56px
   once scrolled — html.cy-compact, set by the scroll listener in overrides/main.html).
   margin-bottom grows by exactly what height shrinks, so the bar's in-flow footprint is
   always 85px and compacting never moves the page under it. Colours unchanged. */
.cy-chrome--header {
  height: var(--cy-bar-h);
  margin-bottom: calc(85px - var(--cy-bar-h));
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px 20px;
  position: sticky;
  top: 0;
  z-index: 6;
  color: #000; /* the live bar inherits the UA default; pinned so a Material colour-scheme toggle cannot recolour it */
  transition: height 0.2s ease, margin-bottom 0.2s ease, box-shadow 0.2s ease;
}

.head-content {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
@media screen and (max-width: 1050px) {
  .head-content {
    padding-top: 12px;
  }
}
@media screen and (max-width: 500px) {
  .head-content {
    height: 100%;
    padding-top: 0px;
  }
}
/* The logo/nav wrapper carries an inline `gap: 2rem` in the live markup; the markup is kept
   byte-exact, so the rem is re-based here (2rem at the live 16px root = 32px). */
.cy-chrome--header .head-content > div:first-child {
  gap: 32px !important;
}

.header-logo {
  text-decoration: none;
  width: 12%;
  height: 12%;
  display: flex;
  align-items: center;
}
.header-logo img {
  width: 100%;
  height: 100%;
}
/* Deviation 11: below 1050px the live site hides the CTA and hands navigation to its JS
   hamburger, so its percentage-width logo keeps a sane size. We keep the CTA (deviation 3)
   and have no hamburger, so the same percentages collapse the logo to 53x16px at 390px —
   illegible. Pin it to a pixel height here and stop it shrinking. Desktop keeps the live
   percentages untouched, so >1050px still renders the live 115x35. */
@media screen and (max-width: 1050px) {
  .header-logo {
    width: auto;
    height: auto;
    flex: 0 0 auto;
  }
  .header-logo img {
    width: auto;
    height: 32px;
  }
}
@media screen and (max-width: 500px) {
  .header-logo img {
    height: 28px;
  }
}

.nav-content {
  display: flex;
  align-items: center;
  gap: 25px;
  padding-left: 15px;
}
@media screen and (max-width: 1050px) {
  .nav-content {
    display: none; /* live breakpoint; below it Material's own mobile nav handles navigation (deviation 3) */
  }
}
.nav-content .nav-inner-content {
  display: flex;
  align-items: center;
  gap: 32px; /* 2rem */
}
.nav-content .nav-inner-content > ul {
  display: flex;
  align-items: center;
}
.nav-content .nav-inner-content > ul > li {
  list-style: none;
}
.nav-content .nav-inner-content > ul > li > a {
  font-weight: 400;
  color: #282828;
  line-height: 1.4;
  text-decoration: none;
  font-size: 16px; /* 1rem */
  padding: 25px 15px;
  cursor: pointer;
}
.nav-content .nav-inner-content > ul > li > button {
  font-weight: 400;
  color: #282828;
  line-height: 1.4;
  text-decoration: none;
  font-size: 16px; /* 1rem */
  padding: 25px 15px;
  cursor: pointer;
  border: none;
  background: none;
}

.head-button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 24px; /* 1.5rem */
}
/* live: @media (max-width: 1050px) { .head-button { display: none } } — the CTA cluster moved
   into the JS-only mobile menu. That menu is not carried over (deviation 3), so the cluster
   stays visible; only "Contact Us" is hidden below the breakpoint so the demo CTA fits beside
   the logo (it is still linked from the footer). */
@media screen and (max-width: 1050px) {
  .head-button > ul:first-child {
    display: none;
  }
}
.head-button > ul > li {
  list-style: none;
}
.head-button > ul > li > a {
  font-weight: 400;
  color: #282828;
  line-height: 1.4;
  font-size: 16px; /* 1rem */
  padding: 25px 15px;
  cursor: pointer;
}
.head-button button,
.head-button .bookDemo_headerBtn {
  background: linear-gradient(180deg, #0d2d40 0%, #1e4860 100%);
  border-radius: 10px;
  padding: 9.6px 20.8px; /* 0.6rem 1.3rem */
  font-weight: 400;
  font-family: "Roboto";
  color: #fff;
  font-size: 16px; /* 1rem */
  transition: all 0.5s ease;
  border: 0px;
  cursor: pointer;
  transition: background 0.5s ease;
}
@media screen and (max-width: 500px) {
  .head-button button,
  .head-button .bookDemo_headerBtn {
    font-size: 14px;
  }
}
.head-button button .head-btn-arrow,
.head-button .bookDemo_headerBtn .head-btn-arrow {
  margin-left: 10px;
  transition: all 0.5s ease;
  display: inline-block !important;
}
.head-button button:hover,
.head-button .bookDemo_headerBtn:hover {
  background: linear-gradient(0deg, #0d2d40 0%, #1e4860 100%);
}
.head-button button:hover > svg,
.head-button .bookDemo_headerBtn:hover > svg {
  transform: translateX(10px);
}

/* desktop dropdowns (Industries, Resources): pure CSS :hover (live) + :focus-within (ours), no JS */
.our-products {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1050px) {
  .our-products {
    display: flex !important;
  }
}
.our-products svg {
  font-size: 11px;
  margin: 5px;
  color: rgb(168, 175, 188);
  fill: #000;
}
@media screen and (max-width: 500px) {
  .our-products svg {
    fill: #000;
  }
}

.head-product {
  position: relative;
}
.head-product:hover + .product-list {
  display: block;
}
/* Not a live rule. Deviation 12, a deliberate improvement: the live site is hover-only, so its
   dropdown <button>s are focusable but inert on Tab + Enter and the submenu links never enter
   the tab order (WCAG 2.1.1 / 4.1.2). Keyboard focus on the button, or on any link inside the
   list, opens the same submenu. The rule sits on the <li> because that is the element that
   contains both the button and the list.
     `.unclickable-pointers` is excluded deliberately: that is the Industries list, whose 8 items
   are `href="#"` with `pointer-events: none` on the live site — real dead links. Opening it on
   focus would pull 8 destination-less links into the tab order, which is worse for a keyboard
   user than skipping them, so only the Resources list (real links) opens on focus. The Industries
   list stays `display: none` unless hovered, and a display:none list is not focusable, so those
   links never reach the keyboard. */
.nav-inner-content > ul > li:focus-within > .product-list:not(.unclickable-pointers) {
  display: block;
}

.product-list {
  background-color: #fff;
  display: none;
  margin: -10px 0px;
  position: absolute;
  border: none;
  border-radius: 6px;
  padding: 10px 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.33);
  z-index: 99;
  list-style-type: none;
}
.product-list:hover {
  display: block;
}
.product-list > li {
  padding: 10px 0px;
}
.product-list > li > a {
  color: #000;
  padding: 7px 15px;
  text-decoration: none;
  font-size: 16px; /* 1rem */
}
.product-list > li > a:hover {
  color: #83a5b9;
}

/* the live site deliberately renders the Industries items non-interactive */
.unclickable-pointers a {
  pointer-events: none;
}

/* ---- footer ----------------------------------------------------------------------- */
.cy-chrome--footer {
  background-color: #062232;
  color: #fff;
}
@media screen and (max-width: 1300px) {
  .cy-chrome--footer {
    padding: 0 16px; /* 0 1rem */
  }
}
@media only screen and (max-width: 900px) {
  .cy-chrome--footer {
    padding: 0 32px; /* 0 2rem */
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer {
    padding: 0 16px; /* 0 1rem */
  }
}
.cy-chrome--footer .container {
  padding: 80px 0 !important;
  padding-top: 0 !important;
  padding-bottom: 30px !important;
}
@media only screen and (max-width: 1500px) {
  .cy-chrome--footer .container {
    width: 100%;
  }
}
@media only screen and (max-width: 1025px) {
  .cy-chrome--footer .container {
    padding-bottom: 50px !important;
  }
}
@media only screen and (max-width: 1000px) {
  .cy-chrome--footer .container {
    width: 100%;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .container {
    gap: 24px; /* 1.5rem */
  }
}
.cy-chrome--footer .footimg-div {
  margin: 0 auto;
  max-width: 1280px !important;
  padding: 40px 0 !important;
  width: 100%;
}
.cy-chrome--footer .footimg-div #footer-img {
  max-width: 200px;
}
@media screen and (max-width: 1100px) {
  .cy-chrome--footer .footimg-div {
    padding: 35px 0 !important;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .footimg-div {
    width: fit-content;
    height: auto;
    margin: unset;
  }
}
.cy-chrome--footer .foot-content {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 900px) {
  .cy-chrome--footer .foot-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px; /* 3rem */
    align-items: start;
  }
}
@media only screen and (max-width: 800px) {
  .cy-chrome--footer .foot-content {
    flex-direction: column;
    gap: 40px;
    align-items: start;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .foot-content {
    gap: 24px; /* 1.5rem */
    grid-template-columns: 1fr !important;
  }
}
.cy-chrome--footer .foot-part {
  width: 20%;
  height: 20%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cy-chrome--footer .foot-part:nth-child(1) {
  width: 35%;
}
.cy-chrome--footer .foot-part .foot-part-heading {
  font-size: 24px; /* 1.5rem */
  font-weight: 500;
  line-height: 26.4px;
  margin-bottom: 20px;
  color: #31617c;
  line-height: 1.4 !important;
}
@media screen and (max-width: 1100px) {
  .cy-chrome--footer .foot-part .foot-part-heading {
    font-size: 20.8px; /* 1.3rem */
  }
}
.cy-chrome--footer .foot-part ul {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 1rem */
}
.cy-chrome--footer .foot-part ul li a {
  text-decoration: none;
  color: #9ba7ad;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.5s;
}
.cy-chrome--footer .foot-part p {
  font-size: 14px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ba7ad;
}

/* newsletter card. Live: a <div> around a JS-submitted form. Here (deviation 6) the same
   class sits on a single <a> to the LinkedIn newsletter, so the card keeps its live look. */
.cy-chrome--footer .foot-part .subscribe-form {
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  background: #102e3f;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.45);
  padding: 15px 20px;
  width: fit-content;
}
@media screen and (min-width: 1025px) {
  .cy-chrome--footer .foot-part .subscribe-form {
    width: 90%;
  }
}
@media screen and (max-width: 1100px) {
  .cy-chrome--footer .foot-part .subscribe-form {
    margin-top: 16px; /* 1rem */
  }
}
@media screen and (max-width: 767px) {
  .cy-chrome--footer .foot-part .subscribe-form {
    width: auto;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .foot-part .subscribe-form {
    margin-bottom: unset;
  }
}
.cy-chrome--footer .foot-part .subscribe-form .sub_head {
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
}
@media screen and (max-width: 767px) {
  .cy-chrome--footer .foot-part .subscribe-form .sub_head {
    text-align: center;
  }
}
@media only screen and (max-width: 1000px) {
  .cy-chrome--footer .foot-part .subscribe-form .sub_head {
    font-size: 14px;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .foot-part .subscribe-form .sub_head {
    justify-content: center;
  }
}
/* deviation 6 styling: the card is now an <a>, and the dropped "Sign Up" button is stood in
   for by a text line using the live button's own values
   (footer .foot-part .subscribe-form .button-Signup button, plus the wrapper's margin-top: 10px).
   The two input rows are gone, so the column is shorter than live. */
.cy-chrome--footer .foot-part .subscribe-link {
  display: block;
  color: #fff;
}
.cy-chrome--footer .foot-part .subscribe-link .subscribe-cta {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20.48px;
  color: #fff;
  text-align: center;
  font-family: Roboto, sans-serif;
  width: 100%;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 0.8px solid #d9d9d9;
  background: transparent;
}

/* social icon row. Live: position:absolute; left:0; bottom:-15px with five breakpoint-specific
   `bottom` offsets tuned to the live column heights. Deviation 8: normal flow. The live box is
   shrink-to-fit, so its `justify-content: space-between` / `center` never had free space to
   distribute — the icons are packed from the left at every width; flex-start reproduces that. */
.cy-chrome--footer .foot-part .foot-icons {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px; /* 1rem */
}
@media only screen and (max-width: 800px) {
  .cy-chrome--footer .foot-part .foot-icons {
    gap: 10px;
  }
}
@media only screen and (max-width: 650px) {
  .cy-chrome--footer .foot-part .foot-icons {
    gap: 10px;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .foot-part .foot-icons {
    justify-content: flex-start;
    gap: 20px;
  }
}
.cy-chrome--footer .foot-part .foot-icons a {
  text-decoration: none;
  color: #99869f;
  font-size: 12px; /* 0.75rem */
  font-weight: 400;
  border-radius: 50%;
  padding: 7px 7px;
  display: flex;
  align-items: center;
}
.cy-chrome--footer .foot-part .foot-icons a svg {
  fill: #fff;
  width: 15px;
  height: 15px;
}
.cy-chrome--footer .foot-part .foot-icons a:hover .foot-icon-svg-path {
  fill: #fff;
}
@media only screen and (max-width: 900px) {
  .cy-chrome--footer .foot-part {
    width: unset !important;
  }
}
@media only screen and (max-width: 800px) {
  .cy-chrome--footer .foot-part {
    width: unset !important;
    height: unset;
  }
}
@media only screen and (max-width: 650px) {
  .cy-chrome--footer .foot-part {
    width: unset;
    height: unset;
  }
}
.cy-chrome--footer .foot-end {
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11.2px; /* 0.7rem */
  letter-spacing: 0.3px;
  font-weight: 400;
  display: flex;
  padding: 15px;
  align-items: center;
  gap: 10px;
}
@media only screen and (max-width: 900px) {
  .cy-chrome--footer .foot-end {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }
}
@media only screen and (max-width: 650px) {
  .cy-chrome--footer .foot-end {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }
}
@media only screen and (max-width: 600px) {
  .cy-chrome--footer .foot-end {
    padding: 15px 0;
  }
}
.cy-chrome--footer .foot-end p {
  line-height: 20px;
  color: #9ba7ad;
}
.cy-chrome--footer .foot-end .foot-end-links {
  display: flex;
  gap: 48px; /* 3rem */
}
@media only screen and (max-width: 1000px) {
  .cy-chrome--footer .foot-end .foot-end-links {
    gap: 16px; /* 1rem */
  }
}
@media only screen and (max-width: 900px) {
  .cy-chrome--footer .foot-end .foot-end-links {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 4.8px; /* 0.3rem */
    width: 100%;
  }
}
@media only screen and (max-width: 650px) {
  .cy-chrome--footer .foot-end .foot-end-links {
    gap: 16px; /* 1rem */
    justify-content: center;
    row-gap: 6.4px; /* 0.4rem */
  }
}
.cy-chrome--footer .foot-end .foot-end-links a {
  text-decoration: none;
  color: #9ba7ad;
  transition: color 0.5s;
}

/* =====================================================================================
   Single-header layout (2026-09-04)
   =====================================================================================
   Nothing in this section is live chargeon.css. It is the glue between the brand bar
   (now the ONLY header) and Material: the compact-on-scroll state, the relocated palette
   and drawer toggles, sidebar offsets under the sticky bar, Material's search restyled
   for the sidebar, and phone-width reading fixes. Design record:
   documentation/AI-agent-code-work/docs-site-single-header-layout/README.md
   Chrome colour rules above and the two palette scheme blocks at the top are untouched.
   ------------------------------------------------------------------------------------- */

/* ---- bar height token -------------------------------------------------------------- */
/* Read by the bar, both sidebars, the back-to-top button and anchor scroll margins, so
   everything that hangs off the bar follows it when it compacts. */
:root {
  --cy-bar-h: 85px;
}
html.cy-compact {
  --cy-bar-h: 56px;
}

/* ---- compact state (deviation 2) --------------------------------------------------- */
/* Material's bundle toggles .md-header--shadow on whatever carries
   data-md-component="header" once the page is scrolled; that shadow is neutralised so the
   bar keeps its live (shadowless) look at rest and gets one hairline only when compact. */
.cy-chrome--header.md-header--shadow {
  box-shadow: none;
}
html.cy-compact .cy-chrome--header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* live: .head-content { padding-top: 12px } below 1050px. In the 56px bar that pushes
   the row 6px off centre, so it is dropped while compact. */
html.cy-compact .head-content {
  padding-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cy-chrome--header,
  .md-sidebar,
  .md-sidebar--primary {
    transition: none;
  }
}

/* ---- .cy-bar-tools: search, palette and drawer toggles (deviation 17) -------------- */
.cy-bar-tools {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  margin-left: 12px;
}
.cy-bar-tools .md-header__button,
.cy-bar-tools__btn {
  margin: 0;
  padding: 10px; /* 24px glyph + 20px = 44px tap target */
  color: #282828; /* same ink as the live nav links */
  cursor: pointer;
  border-radius: 8px;
  line-height: 0;
  transition: background-color 0.2s;
}
.cy-bar-tools .md-header__button:hover,
.cy-bar-tools__btn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.06);
}
.cy-bar-tools .md-icon svg,
.cy-bar-tools__btn svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentcolor;
}
/* desktop: the sidebar (and its search field) is always on screen, so neither label shows.
   Both stay in the DOM: Material's search mount needs `header [for=__search]` to exist. */
.cy-bar-tools__search,
.cy-bar-tools__drawer {
  display: none;
}
.cy-bar-tools__open {
  display: block;
}
.cy-bar-tools__close {
  display: none;
}
@media screen and (max-width: 76.234375em) {
  .cy-bar-tools__search,
  .cy-bar-tools__drawer {
    display: inline-block; /* Material's nav breakpoint: below it the sidebar is a drawer */
  }
  /* #__drawer / #__search are body-level siblings before the bar, so open states can
     restyle the buttons */
  [data-md-toggle="drawer"]:checked ~ .cy-chrome--header .cy-bar-tools__open {
    display: none;
  }
  [data-md-toggle="drawer"]:checked ~ .cy-chrome--header .cy-bar-tools__close {
    display: block;
  }
  [data-md-toggle="search"]:checked ~ .cy-chrome--header .cy-bar-tools__search {
    background-color: rgba(0, 0, 0, 0.08);
  }
}
/* Deviation 3, extended 2026-09-04: the live site hides the whole CTA cluster below 1050px
   (it moves into its JS menu). We kept the demo button; at the live 500px breakpoint and
   below, the logo, the button and three 44px controls cannot share a 320-500px bar, so
   the button yields — the controls are the only route to navigation, search and dark
   mode. Demo Request stays in the footer. */
@media screen and (max-width: 500px) {
  .head-button {
    display: none;
  }
  .cy-bar-tools {
    margin-left: 6px;
    gap: 0;
  }
}

/* ---- Material layout under the sticky bar ----------------------------------------- */
/* Material's bundle measures [data-md-component=header] (now the brand bar) and writes
   the sidebars' top as an inline style once they are mounted, so on desktop these `top`
   values are the pre-JS fallback and the transition is what smooths the JS update. Below
   76.25em the primary sidebar is the drawer and is never mounted, so its rule is live. */
.md-sidebar {
  top: var(--cy-bar-h);
  transition: top 0.2s ease;
}
@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary {
    top: var(--cy-bar-h);
    height: calc(100% - var(--cy-bar-h));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s,
      width 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s ease, height 0.2s ease;
  }
}
.md-top {
  top: calc(var(--cy-bar-h) + 0.8rem);
}
/* Material's 3.6rem assumed its own 2.4rem header. Anchors now land 1.2rem under the bar
   in whichever state it is in at click time; the compact state only ever adds room. */
.md-typeset :target {
  --md-scroll-margin: calc(var(--cy-bar-h) + 1.2rem);
}
/* The design drops the site title (the logo already says ChargeOn). Material shows it
   as the nav title on desktop once navigation.tabs is off, and below 76.25em as the
   drawer's 5.6rem primary-coloured header (site name + Material's book icon, doubling as
   the close control). Both go: the brand bar stays visible above the drawer with the logo
   and an X, and the search row takes the top of the drawer. Nested levels keep their own
   back-arrow titles (those are `.md-nav .md-nav__title`, not direct children). */
.md-nav--primary > .md-nav__title {
  display: none;
}

/* ---- search in the primary sidebar ------------------------------------------------- */
/* Material's search CSS assumes `.md-header .md-search` and drives every open/closed
   state through `[data-md-toggle=search]:checked ~ .md-header …`. None of that matches
   now, so the component is restyled here from scratch, in two modes:
     desktop (>= 76.25em): a bordered field at the top of the sidebar. On focus the
       field grows into a 32rem panel, results drop beneath it and Material's scrim dims
       the rest of the page; click-outside / Escape / Tab close it, as before.
     drawer  (<  76.25em): a full-width field under the drawer title. On focus the drawer
       widens to the viewport (26rem cap), the nav tree steps aside and results fill the
       drawer; the magnifier becomes a back arrow that closes it.
   The open state is always `[data-md-toggle=search]:checked ~ .md-container …`: the
   checkbox is a body-level sibling of .md-container in base.html. */

/* base: neutralise the header-context positioning at every width */
.md-sidebar--primary .md-search {
  position: relative;
  padding: 0;
}
.md-sidebar--primary .md-search__inner {
  position: relative;
  left: auto;
  top: auto;
  float: none;
  width: auto;
  height: auto;
  padding: 0;
  opacity: 1;
  overflow: visible;
  transform: none;
  transition: none;
  z-index: 2;
}
.md-sidebar--primary .md-search__form {
  position: relative;
  height: 1.8rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: none;
  z-index: 2;
  transition: border-color 0.25s, border-radius 0.25s, box-shadow 0.25s;
}
.md-sidebar--primary .md-search__form:hover {
  background-color: var(--md-default-bg-color);
  border-color: var(--md-default-fg-color--light);
}
[data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__form {
  border-color: var(--md-accent-fg-color);
  color: var(--md-default-fg-color);
}
.md-sidebar--primary .md-search__input {
  width: 100%;
  height: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color);
  text-overflow: ellipsis;
}
.md-sidebar--primary .md-search__input::placeholder,
.md-sidebar--primary .md-search__input + .md-search__icon {
  color: var(--md-default-fg-color--light);
}
[data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__input {
  text-overflow: clip;
}
[data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__input::placeholder {
  color: transparent;
}
.md-sidebar--primary .md-search__icon[for="__search"] {
  left: 0.4rem;
  top: 0.25rem; /* (1.8rem − 2 × .05rem border − 1.2rem glyph) / 2 */
}
.md-sidebar--primary .md-search__options {
  right: 0.4rem;
  top: 0.25rem;
}
[data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__input:valid ~ .md-search__options > .md-icon {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.md-sidebar--primary .md-search__suggest {
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 0.7rem;
}
[data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__suggest {
  opacity: 1;
  transition: opacity 0.3s 0.1s;
}
.md-sidebar--primary .md-search__scrollwrap {
  width: auto;
  background-color: var(--md-default-bg-color);
}

/* desktop mode */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-search {
    margin: 0.2rem 0.4rem 0.8rem 0.6rem; /* aligns with .md-nav__list's .6rem indent */
  }
  .md-sidebar--primary .md-search__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 0;
    transform: none;
    opacity: 0;
    background-color: #0000008a;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
    transition: width 0ms 0.25s, height 0ms 0.25s, opacity 0.25s;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__overlay {
    width: 100%;
    height: 200vh;
    opacity: 1;
    transition: width 0ms, height 0ms, opacity 0.25s;
  }
  .md-sidebar--primary .md-search__inner {
    width: 100%;
    transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__inner {
    width: min(32rem, 60vw);
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__form {
    border-radius: 0.2rem 0.2rem 0 0;
    box-shadow: var(--md-shadow-z3);
  }
  .md-sidebar--primary .md-search__icon[for="__search"] {
    pointer-events: none;
  }
  .md-sidebar--primary .md-search__icon[for="__search"] svg:first-child {
    display: block;
  }
  .md-sidebar--primary .md-search__icon[for="__search"] svg:last-child {
    display: none;
  }
  .md-sidebar--primary .md-search__output {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    border-radius: 0 0 0.2rem 0.2rem;
    z-index: 1;
    transition: opacity 0.4s;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__output {
    opacity: 1;
    box-shadow: var(--md-shadow-z3);
  }
  .md-sidebar--primary .md-search__scrollwrap {
    max-height: 0;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__scrollwrap {
    max-height: min(75vh, calc(100vh - var(--cy-bar-h) - 5rem));
  }
  /* let the panel escape the sidebar's scroll clip, and paint the sidebar above the
     table of contents and content while search is open (the bar stays above, at 6) */
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary {
    z-index: 3;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow: visible;
  }
}

/* drawer mode */
@media screen and (max-width: 76.234375em) {
  /* The search row is pinned to the top of the drawer and the nav (an absolute,
     full-height panel in Material's drawer, as is every nested level inside it) is
     pushed down by the row's height, so the field is on top at every level. */
  .md-sidebar--primary .md-search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.6rem 0.6rem 0.5rem; /* + 2.2rem field = 3.3rem row */
    background-color: var(--md-default-bg-color);
    box-shadow: 0 0.05rem 0 var(--md-default-fg-color--lightest);
    z-index: 2;
  }
  .md-sidebar--primary .md-nav--primary {
    top: 3.3rem;
    height: calc(100% - 3.3rem);
  }
  .md-sidebar--primary .md-search__overlay {
    display: none;
  }
  .md-sidebar--primary .md-search__inner {
    position: static;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .md-sidebar--primary .md-search__form {
    flex: 0 0 auto;
    height: 2.2rem; /* 44px tap target */
  }
  .md-sidebar--primary .md-search__input,
  .md-sidebar--primary .md-search__suggest {
    font-size: 0.8rem; /* 16px: below that iOS Safari zooms the page on focus */
  }
  .md-sidebar--primary .md-search__icon[for="__search"] {
    top: 0.45rem;
    left: 0.5rem;
    pointer-events: auto;
  }
  .md-sidebar--primary .md-search__options {
    top: 0.45rem;
    right: 0.5rem;
  }
  /* magnifier while idle, back arrow while open (it closes the search) */
  .md-sidebar--primary .md-search__icon[for="__search"] svg:first-child {
    display: block;
  }
  .md-sidebar--primary .md-search__icon[for="__search"] svg:last-child {
    display: none;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__icon[for="__search"] svg:first-child {
    display: none;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__icon[for="__search"] svg:last-child {
    display: block;
  }
  .md-sidebar--primary .md-search__output {
    display: none;
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    margin: 0.5rem -0.6rem 0;
    opacity: 1;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
  }
  .md-sidebar--primary .md-search__scrollwrap {
    height: 100%;
    max-height: none;
  }
  .md-sidebar--primary .md-search-result__icon {
    display: none;
  }
  .md-sidebar--primary .md-search-result__meta,
  .md-sidebar--primary .md-search-result__article,
  .md-sidebar--primary .md-search-result__more > summary > div {
    padding-left: 0.8rem;
  }
  /* search mode: the drawer slides in whether or not #__drawer is checked (this is what
     the bar's magnifier opens), widens to the viewport (26rem cap), the search row grows
     to the drawer's full height and the nav steps aside so results fill it. Closing search
     (back arrow, Escape, picking a result) slides the drawer back out unless it was opened
     on its own. */
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary {
    width: min(100vw, 26rem);
    transform: translateX(12.1rem);
    box-shadow: var(--md-shadow-z3);
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search {
    bottom: 0;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-search__output {
    display: block;
  }
  [data-md-toggle="search"]:checked ~ .md-container .md-sidebar--primary .md-nav--primary {
    display: none;
  }
}

/* ---- phone reading ------------------------------------------------------------------ */
@media screen and (max-width: 59.984375em) {
  /* Material's admonitions are .64rem (12.8px) at every width, a 20% drop from body text
     that reads as fine print on a phone. 14px keeps them distinct but legible; titles and
     icons scale with it. */
  .md-typeset .admonition,
  .md-typeset details {
    font-size: 0.7rem;
  }
}

/* ---- print ------------------------------------------------------------------------ */
/* Not a live rule. Deviation 14: Material hides its own header, sidebars and footer under
   @media print; the transplanted chrome had no print rule, so every printed page carried the
   85px nav bar and the full navy footer. Hide both. Kept at the end of the file so it wins
   over `.cy-chrome--header { display: flex }` at equal specificity. */
@media print {
  .cy-chrome {
    display: none;
  }
}