@import url("baselinestyle.css") print;
:root {
  /* Primary Colors */
  --brand-primary-dark: #231f20;
  --brand-secondary-dark: #58595b;
  --brand-text-grey95: #0d0d0d;
  --brand-light: #58595b; /*#939598;*/
  --brand-white: #ffffff;

  /* Secondary Colors */
  --brand-light: #92acc4;
  --brand-dark-blue: #26373f;

  /*Secondary Colors: Accents */
  --brand-gold: #af8026;
  --brand-cyan:            #00BBD6;
  --brand-cyan-light: rgba(0, 187, 214, 0.16); /* 16 % opacity */
  --brand-cyan-medium: rgba(0, 187, 214, 0.8); /* 80 % opacity */

  --brand-deep: #101923;
  --brand-deep-light: #70757b;

  --brand-orange: #ef6532;

  /* Blues in ascending deh */
  --brand-blue-light: #92acc4; /* light / “sky” */
  --brand-blue-core: #0046a5; /* Mecalc Blue   */
  --brand-blue-navy: #00224b; /* deep navy     */
  --brand-blue-dark: #26373f; /* charcoal-blue */
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* Import Helvetica Narrow for web and PrinceXML */
@font-face {
  font-family: 'HelveticaNarrow';
  src: url('../fonts/helvetica-narrow-webfont.woff2') format('woff2'),
       url('../fonts/helvetica-narrow-webfont.woff') format('woff'),
       local('Helvetica Narrow');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  -prince-pdf-font-stretch: normal;
  -prince-pdf-encoding: auto;
}

@font-face {
  font-family: 'HelveticaNarrow';
  src: url('../fonts/helvetica-narrow-bold-webfont.woff2') format('woff2'),
       url('../fonts/helvetica-narrow-bold-webfont.woff') format('woff'),
       local('Helvetica Narrow Bold');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  -prince-pdf-font-stretch: normal;
  -prince-pdf-encoding: auto;
}


/* 43 Light Extended */
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-LtEx.woff2')  format('woff2'),
       url('../fonts/HelveticaNeueLTStd-LtEx.woff')  format('woff'),
       local('Helvetica Neue LT Std 43 Light Extended'),
       local('HelveticaNeueLTStd-LtEx');
  font-weight: 300;
  font-style:  normal;
  font-display: block;
  -prince-pdf-font-stretch: expanded;
  -prince-pdf-encoding: auto;
}

/* 63 Medium Extended */
@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('../fonts/HelveticaNeueLTStd-MdEx.woff2')  format('woff2'),
       url('../fonts/HelveticaNeueLTStd-MdEx.woff')  format('woff'),
       local('Helvetica Neue LT Std 63 Medium Extended'),
       local('HelveticaNeueLTStd-MdEx');
  font-weight: 600;
  font-style:  normal;
  font-display: block;
  -prince-pdf-font-stretch: expanded;
  -prince-pdf-encoding: auto;
}


/* Import Roboto for web and PrinceXML */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto.woff2') format('woff2'),
       url('../fonts/Roboto-Regular.ttf') format('truetype'),
       local('Roboto');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  -prince-pdf-encoding: auto;
}

/* Base font */
html body {
  font-family: 'HelveticaNarrow', 'Roboto', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0px;
  text-align: justify;
  text-justify: inter-word;
  line-height: 150%;
  -prince-text-replace: none;
  color: var(--brand-text-grey95);
}

@page {
  size: A4;
  margin: 13mm;
  font-family: "Helvetica Narrow", "Roboto", Arial, sans-serif;
  font-size: 11px;
  color: var(--brand-deep-light);
}

@media screen {
  body {
      max-width: 1024px;
      margin: 0 auto;
  }
  body:has(nav) body{
    padding-left: 280px;
  }
  .PrintOnly { display: none; }
}
@media print { .ScreenOnly { display: none; } }

html body p { margin: 1em 0; padding: 0; }

/* style of all italic text used e.g. under tables and figures*/
i, em, figcaption { color: var(--brand-deep-light); }

/* Headings and links */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-deep);
  line-height: 1.3;
  page-break-after: avoid;
  break-after: avoid;
  letter-spacing: 0.8px;
}

th {
  color: var(--brand-deep);
  line-height: 1.3;
  page-break-after: avoid;
  break-after: avoid;
  letter-spacing: 0px;
}

/* Base heading styles */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body table th,
html body table .HeaderInsideTable,
html body table .TableLeftHeader {
  font-size: 17px;
  line-height: 1.25;
  margin: 1.6em 0 0.7em;
  color: var(--brand-deep);
  font-weight: bold;
}

/* H1..H6 sizes (screen) */
html body h1 { font-size: 34px; margin-top: 2.2em; padding-bottom: 0.45rem; }
html body h2 { font-size: 28px; padding-bottom: 0.35rem; }
html body h3 { font-size: 22px; }
html body h4 { font-size: 19px; }
html body h5 { font-size: 17px; }
html body h6 { font-size: 16px; }
html body h1:first-of-type { margin-top: 0.6em; }

/* separation between consecutive headings */
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 1.1em; }

/* ================= Header Banner ================= */
.header-background {
  position: relative;
  isolation: isolate;
  margin-top:50px;
  margin-bottom: 50px;
  padding: clamp(32px, 6vw, 0px) clamp(24px, 5vw, 80px);
  color: var(--brand-deep);
  background: var(--brand-white);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.header-background::after { content: ""; position: absolute; inset: 0; z-index: -1; }

.header-background .title-heading {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-deep);
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Subtitle */
.header-background .subtitle {
  margin-top: 0.8rem;
  font-size: clamp(0.9rem, 2.3vw, 1.2rem);
  color: var(--brand-deep);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Force deep color in banner */
.header-background, .header-background * { color: var(--brand-deep) !important; }
.header-background ::before, .header-background ::after { color: var(--brand-deep) !important; }
.header-background a:hover { color: var(--brand-gold) !important; }

/* ============== Screen-only cover ============== */

.ScreenOnly{ margin-top: 100px; margin-bottom: 100px; }
.ScreenOnly .header-background{
  display:flex; flex-direction:column; align-items:center;
  margin-left: -50px; margin-right: -50px;
}

/* Logo image */
.cover-logo{ width:20%; max-width:240px; margin-top:50px; }

/* Center the image */
.cover-image{ display:flex; justify-content:center; align-items:center; width:100%; margin-top:20px; }
.cover-image img{ max-width:60%; height:auto; display:block; }

/* USER MANUAL title */
.cover-title {
    font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-stretch: expanded;
    font-size: 24px;
    letter-spacing: 30px;
    margin-left: 30px;
    line-height: 50px;
    text-transform: uppercase;
    display: block;
    margin-top: 60px;
    font-weight: 300;  /* Explicitly set to match your Light Extended font */
}

.cover-title strong {
    font-weight: 600;  /* This matches your Medium Extended font */
}


/* ---------- Small screens ---------- */
@media(max-width:768px){
  .cover-image img{
    width:40%;
    margin-top: 70px;
  }
  .cover-title{
    font-size:16px;
    letter-spacing: 10px;
  }
}

/* Table headers and special cases */
html body table th,
html body table .HeaderInsideTable,
html body table .TableLeftHeader {
  font-size: 17px;
  font-weight: bold;
  text-align: left;
  border: none;
  background: none;
}
html body table caption {
  caption-side: top;
  display: table-caption;
  width: 100%;
  text-align: center;
  padding: 0.6em 0.75em;
  background: var(--tbl-header-bg);
  color: var(--brand-deep);
  font-weight: 600;
  border: 1px solid var(--tbl-border);
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 17px;
  position: relative;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
html body table caption::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--tbl-header-accent);
}
html body table:has(caption) { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

/* Navigation-specific heading styles */
#main-nav h2, #main-nav h3, #main-nav h4, #main-nav h5, #main-nav h6 {
  border: none; text-decoration: none; text-transform: none; font-style: normal;
  letter-spacing: normal; margin: 0; padding: 0.5em 0; font-weight: normal;
}

html body a { color: var(--brand-cyan); text-decoration: none; transition: color 0.3s ease, text-decoration 0.3s ease; }
html body a:hover, html body a:focus { color: var(--brand-cyan-dark); text-decoration: underline; }

* { box-sizing: border-box; }

/* Hide the automatic Pandoc title/author */
.title, .author { display: none; }

body { counter-reset: page 1; }
@page {
  @bottom-left {content: " © 2026 Mecalc (Pty) Ltd " ;}
  @bottom-center {content: " SC45 Product Information Sheet, Version 1.2 " ;}
  @bottom-right {content: "pg | " counter(page) " of " counter(pages);}
}

/* .doubleColumnLayout... */
.doubleColumnLayout { columns: 2; column-gap: 24px; margin-top:70px; }
.doubleColumnLayout p:first-of-type { margin-top: 0; }

/* ------------------------------ Tables ------------------------------------------- */
:root {
  --tbl-border: rgba(0, 0, 0, 0.05);
  --tbl-row-alt: rgba(0, 0, 0, 0.025);
  --tbl-header-bg: #f7f8fa;
  --tbl-header-accent: var(--brand-cyan, #00a8c8);
}
html body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  line-height: 1.45;
  background: #fff;
  border: 1px solid var(--tbl-border);
  border-radius: 6px;
  -prince-border-radius: 6px;
  overflow: hidden;
  font-size: 16px;
  margin-top: 20px;
}
html body table th:first-child,
html body table td:first-child {
  min-width: 150px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
html body table td img, html body table th img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
}
@media print {
  html body table th:first-child, html body table td:first-child { min-width: 150px !important; }
}
html body table th,
html body table .HeaderInsideTable,
html body table .TableLeftHeader {
  padding: 0.5em 0.75em; text-align: left; font-weight: 600; background: var(--tbl-header-bg);
  color: var(--brand-deep, #101923); border-bottom: 1px solid var(--tbl-border); position: relative; font-size: 17px;
}
html body table thead tr:first-child th::after,
html body table .HeaderInsideTable::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--tbl-header-accent);
}
html body table td { padding: 0.5em 0.75em; text-align: left; border-bottom: 1px solid var(--tbl-border); }
html body table:has(thead) tbody tr:nth-child(even) td { background-color: var(--tbl-row-alt); }
html body table:not(:has(thead)) tr:nth-child(odd) td { background-color: var(--tbl-row-alt); }
html body table tr td:last-child, html body table th:last-child { border-right: none; }
html body table thead tr:first-child th:first-child { border-top-left-radius: 6px; }
html body table thead tr:first-child th:last-child { border-top-right-radius: 6px; }
html body table tbody tr:last-child td:first-child { border-bottom-left-radius: 6px; }
html body table tbody tr:last-child td:last-child { border-bottom-right-radius: 6px; }

/* Footnotes */
.footnotes { font-size: 0.9em; color: #555; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--tbl-border); }
.footnotes hr { display: none; }
.footnotes ol { margin: 0; padding-left: 1.25rem; }
.footnotes li { margin: 0 0 0.5rem; }
.footnotes p { margin: 0; line-height: 1.45; }
.footnotes a.footnote-back { margin-left: 0.4rem; text-decoration: none; opacity: 0.75; }
.footnotes a.footnote-back:hover { text-decoration: underline; opacity: 1; }
a.footnote-ref, sup a[role="doc-noteref"], sup a[href^="#fn"] {
  text-decoration: none; color: var(--brand-deep, #1a3d6d); font-weight: 600; vertical-align: super; font-size: 0.75em;
}
a.footnote-ref:hover, sup a[role="doc-noteref"]:hover { text-decoration: underline; }
@media screen {
  html body table tbody tr:hover td { background-color: rgba(0, 0, 0, 0.04); transition: background-color 0.12s ease; }
}
html body table .HeaderInsideTable { border-bottom: 1px solid var(--tbl-border); background: var(--tbl-header-bg); }

/* ------------------------------ Navigation (left) ------------------------------------------- */
@media print { nav { display: none; } }
@media screen {
  nav {
    font-size: 16px;
    text-align: left;
    color: var(--brand-text-grey95);
    position: fixed;
    left: 0;
    top: 0;

    background-color: var(--brand-white);
    height: 100vh;
    overflow-y: scroll;
    width: 340px;
    box-shadow: 4px 0 10px rgba(0,0,0,0.08);
    z-index: 1000;

  }
  nav ul { box-sizing: border-box; margin-top: 0; margin-bottom: 2px; padding-left: 2em; list-style: none; padding-inline-start: 12px; }
  nav > ul { margin-left: -20px; margin-top: -12px; }
  nav ul li { list-style-type: none; }
  nav ul > li { margin-top: 0.25em; line-height: 1.4; padding-left: 0; letter-spacing: 0px; word-break: keep-all; }
  nav > ul { margin-left: -20px; margin-top: 30px; }
  nav ul > li > a, nav > ul > li > a strong, nav ul ul li a, nav ul ul li a strong, nav a, nav a strong {
    font-weight: normal !important; letter-spacing: 1px; font-size: 15px;
  }
  nav h2#toc-title { margin: 16px 0 16px 15px; font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 20px;letter-spacing: 5px; }
  .nav-active { background-color: rgba(0, 0, 0, 0.1); }
  #main-nav a:focus, #main-nav a:active, #main-nav a:focus-visible { outline: none !important; box-shadow: none !important; }
  #main-nav a {
    display: block; padding: 12px 25px; color: var(--brand-secondary-dark);
    text-decoration: none; transition: all 0.2s ease; font-size: 18px; font-weight: 500; width: 100%; box-sizing: border-box; position: relative;
  }
  #main-nav a:hover { background-color: #f5f5f5; color: var(--brand-gold); padding-left: 30px; }
  #main-nav a.active, #main-nav li.active > a {
    background-color: #f5f5f5; color: var(--brand-gold); font-weight: 600; border-left: 4px solid var(--brand-gold); padding-left: 21px;
  }
  #main-nav a.active:hover, #main-nav li.active > a:hover { background-color: #f5f5f5; padding-left: 21px; }

  /* Mobile menu container & toggles */
  .mobile-menu-container { display: block; }
  .hamburger { display: block; }
  #main-nav { display: block !important; }

  /* Nested levels */
  #main-nav ul ul > li > a { padding-left: 2em; }
  #main-nav ul ul ul > li > a { padding-left: 3em; }
  #main-nav ul ul li.active > a, #main-nav ul ul a.active { border-left: 4px solid var(--brand-gold); padding-left: calc(2em - 4px); }
  #main-nav ul ul ul li.active > a, #main-nav ul ul ul a.active { padding-left: calc(3em - 4px); }
}

/* Mobile menu base */
.mobile-menu-container { display: none; position: relative; z-index: 1000; }
.nav-toggle { display: none; }
.hamburger { display: none; cursor: pointer; padding: 10px; position: fixed; top: 20px; left: 20px; z-index: 9999; background: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.hamburger .bar { display: block; width: 25px; height: 3px; margin: 5px 0; background-color: var(--brand-deep); transition: all 0.3s ease-in-out; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; opacity: 0; transition: opacity 0.3s ease-in-out; backdrop-filter: blur(2px); }
#main-nav {
  position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: #ffffff;
  z-index: 1000; overflow-y: auto; transition: left 0.3s ease-in-out; box-shadow: 4px 0 15px rgba(0,0,0,0.1); padding: 20px 0; margin: 0; display: block !important;
}
#main-nav ul { list-style: none; padding: 0; margin: 0; width: 100%; box-sizing: border-box; }
#main-nav li { margin: 0; padding: 0 0 0 20px; border-bottom: 1px solid #f0f0f0; width: 100%; display: block; }
#main-nav a {
  display: block; padding: 15px 25px; color: var(--brand-secondary-dark); text-decoration: none; transition: all 0.2s; font-size: 18px; font-weight: 500; width: 100%; box-sizing: border-box;
}
#main-nav a:hover { background-color: #f5f5f5; color: var(--brand-gold); padding-left: 30px; }
.nav-toggle:checked ~ .overlay { display: block; opacity: 1; z-index: 1001; }
.nav-toggle:checked ~ #main-nav { left: 0; z-index: 1001; display: block !important; width: 400px; max-width: 100vw; }
html.menu-open { overflow: auto; }
html.menu-open body { overflow: auto; width: 100%; height: 100%; }
html.menu-open table th, html.menu-open table .HeaderInsideTable, html.menu-open table .TableLeftHeader { position: static !important; z-index: auto !important; }

code{ font-size: 14px; }
html.menu-open .sourceCode{ position: static !important; z-index: auto !important; }

.nav-toggle:checked + .hamburger .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked + .hamburger .bar:nth-child(2) { opacity: 0; }
.nav-toggle:checked + .hamburger .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ────────────────────────────────────────────────────────────────
   Source-code blocks
   ---------------------------------------------------------------- */
:root {
  --code-bg:        #f7fafc;
  --code-inline-bg: #edf2f7;
  --code-fg:        #2d3748;
  --code-border:    #e2e8f0;
  --kw:#d73a49; --co:#6a737d; --st:#032f62; --dv:#005cc5; --fu:#6f42c1;
}
div.sourceCode{
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 18px;
  line-height: 1.45;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
div.sourceCode > pre.sourceCode{ border:none; border-radius:0; padding:0; margin:0; background:transparent; }
p code, li code, td code{
  font-family: "Fira Code", Consolas, "Courier New", monospace;
  font-size: 0.85em;
  background: var(--code-inline-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  white-space: nowrap;
}
/* Inline code (print) — also match normal text size */
@media print {
  p code, li code, td code {
    font-size: 0.85em;             /* ensure parity in PDF */
  }
}
div.sourceCode code{ background:transparent; border:none; padding:0; white-space:inherit; font-size:14px; }
div.sourceCode .line{ display:inline-block; min-width:2.5em; text-align:right; margin-right:1em; color:#718096; user-select:none; }
div.sourceCode .kw{color:var(--kw);} .div.sourceCode .co{color:var(--co);font-style:italic;}
div.sourceCode .st{color:var(--st);} div.sourceCode .dv{color:var(--dv);} div.sourceCode .fu{color:var(--fu);}
table .sourceCode{font-size:16px;}

/* datasheet adjustments */
@media screen and (max-width: 999px) {
  .doubleColumnLayout { columns: 1; column-gap: 0px; margin-top: 70px; }
}

/* Mobile menu responsive */
@media screen and (max-width: 1749px) {
  html body table th, html body table .HeaderInsideTable, html body table .TableLeftHeader { position: sticky; top: 0; z-index: 2; }
  div.sourceCode{ position: static; }
  body > nav { display: none !important; }
  .ScreenOnly{ margin-top: 0px; margin-bottom: 100px; }
  .mobile-menu-container { display: block; }
  .hamburger { display: block; }
  #main-nav nav { display: block !important; position: static; width: 100%; height: auto; padding: 10px; margin-top: 50px; background: transparent; box-shadow: none; overflow: hidden; }
  nav.stick{ margin-top : 50px; }
  #main-nav nav > ul { margin: 0; padding: 0; width: 100%; }
  #main-nav nav > ul > li { margin: 0; padding: 0; }
  #main-nav nav a { padding: 12px 25px; color: var(--brand-text-grey95); text-decoration: none; display: block; }
  html body { padding-left: 20px; padding-right: 20px; }
}
@media screen and (max-width: 1100px) { .ScreenOnly .header-background{ margin:0px; } }

/* ------------------------------ Links ------------------------------------------- */
a { color: #00a1ff; }
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

/* ------------------------------ Images ------------------------------------------- */
figure { text-align: center; margin-bottom: 16px; }
figcaption { text-align: center; font-style: italic; font-size: 16px; color: var(--brand-deep-light); }
p > img { display: block; margin: 0 auto; }
.display-next-to-each-other, .display-next-to-each-other p { margin: 0; padding: 0; font-size: 0; }
.display-next-to-each-other img, .display-next-to-each-other p img { display: inline-block; vertical-align: middle; margin: 0; padding: 0; }
img.centered { -prince-float: page; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100mm; }

/* -------------------------- Footnote ---------------------------- */
@media print{
  .fn { float: footnote; font-size: 13px; font-weight: normal; text-align: center; }
}
@media screen {
  .fn { font-weight: bold; position: relative; cursor: pointer; }
  html:not([data-js]) .fn { vertical-align: super; font-size: 11px; font-weight: 100; cursor: normal; font-style: italic; }
  .fn .tooltip { position: absolute; left: 50%; bottom: 100%; width: max-content; max-width: 200px; background: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); padding: 5px; border-radius: 4px; font-size: 11px; z-index: 1000; white-space: normal; }
  .fn:hover .tooltip { display: block; }
}

/* Glossary tooltip */
.glossary-tooltip { position: relative; cursor: help; border-bottom: 1px dotted #999; }
.glossary-tooltip:hover::after {
  content: attr(data-tooltip); position: absolute; left: 50%; bottom: 120%; transform: translateX(-50%); white-space: nowrap;
  background: rgba(0, 0, 0, 0.8); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.85em; line-height: 1.2; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.glossary-tooltip:hover::before {
  content: ""; position: absolute; left: 50%; bottom: 110%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(0, 0, 0, 0.8); z-index: 1001; opacity: 0; transition: opacity 0.2s ease;
}
.glossary-tooltip:hover::after, .glossary-tooltip:hover::before { opacity: 1; }

/* -----------------------------  Bullet points ---------------------------------------------- */
html body ul, html body ol { list-style-position: outside; padding-left: 0; }
html body ul{ margin-left: 1.5em; }
html body ol{ margin-left: 1.8em; }
@media screen {
  html body ul, html body ol, .markdown-preview ul, .markdown-preview ol { margin-left: 2ch; }
}

/* Nested lists (ALL outputs baseline) */
html body ul ul, ul ol, ol ul, ol ol {
  margin-left: 1em;
  /* CHANGE (2025-10-31): bump HTML nested list font-size to 17px */
  font-size: 17px; /* was 16px */
  margin-top: 0px;
  margin-bottom: 6px;
}
@media screen {
  html body ul ul, ul ol, ol ul, ol ol { margin-left: 1em; }
}

/* Remove extra padding before lists */
html body *:has(+ ol), html body *:has(+ ul) { margin-bottom: 3px; }
html body ol, html body ul { margin-top: 3px; }

/* -------------------------- Full width tables with equal column widths -------------------------- */
.container { width: 100%; }
.full-width-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.full-width-table { font-size: 0; }
.full-width-table td, .full-width-table th  { font-size: initial; }
.full-width-table thead, .full-width-table tbody { width: 100%; display:block; }
.full-width-table thead tr, .full-width-table tbody tr { width: 100%; display:flex; align-items: stretch; }
.full-width-table thead tr th, .full-width-table tbody tr td{ width: 17%; display:inline-block; flex-grow: 1; box-sizing: border-box; }
.full-width-table thead tr th, .full-width-table tbody tr td{ padding: 6px 13px; margin: 0px; }
.full-width-table thead tr, .full-width-table tbody tr{ padding: 0px; margin: 0px; }
.spec-table{ display: table; }
.spec-table, .spec-table colgroup, .spec-table tr { width: 100%; }
.spec-table { margin-bottom: 15px; }

html body .min-max-invisible-table { display: table; table-layout: fixed; width: 100%; border: 0px; margin: 0px; }
html body .min-max-invisible-table tbody tr, html body .min-max-invisible-table tbodycolgroup { width: 100%; }
html body .min-max-invisible-table tbody tr, html body .min-max-invisible-table tbody tr td { text-align: center; border: 0px; padding: 0px; }
html body  table.min-max-invisible-table:has(thead) tr:nth-child(even) td,
html body  table.min-max-invisible-table:not(:has(thead)) tr:nth-child(odd) td { background-color: #ffffff; }

/* -------------------------- Datasheet ------------------------------- */
.datasheet {
  font-family: 'HelveticaNarrow', 'Roboto', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0px;
  text-align: justify;
  text-justify: inter-word;
  line-height: 150%;
  -prince-text-replace: none;
  color: var(--brand-text-grey95);
}
.datasheet h1 { font-size: 26px; }
.datasheet h2 { font-size: 24px; }
.datasheet h3 { font-size: 22px; }
.datasheet h4 { font-size: 20px; }
.datasheet h5 { font-size: 19px; }
.datasheet h6 { font-size: 18px; }

/* -------------------------- Specifications ---------------------------- */
.specifications p, .specifications li { color: var(--brand-deep-light) }
.specifications strong { color: var(--brand-deep-light) }
.specifications h1:first-of-type { margin-block-start: 0; }
.specifications h1, .specifications h2 { margin: 0px; padding: 10px; }
.specifications h3, .specifications h4, .specifications h5, .specifications h6 { margin: 0px; padding: 5px; }
.specifications h1 {
  background-color: var(--brand-deep);
  color: #ffffff !important;
  font-weight: normal;
  font-size: 20px;
  text-transform: uppercase;
  border-radius: 5px;
  text-align: left;
}
.specifications h2 {
  background-color: #ebebeb;
  font-weight: normal;
  font-size: 17px;
  text-transform: uppercase;
  border-radius: 5px;
  text-align: left;
}
.specifications h3 { margin-bottom: 0px; font-size: 18px; font-weight: normal; color: var(--brand-deep) !important; text-align: left; }
.specifications .specheading { color: var(--brand-deep) !important; font-weight: normal; }
.specifications div, .specifications p, .specifications body  { padding-left: 10px; }
html body .specifications hr { display: block; height: 0px; border: 0; border-top: 1px solid var(--tbl-border); padding: 0; margin: 1px 0; }

/* ───── Datasheet hero block ────────────────────────────── */
.ds-hero { display: flex; justify-content: space-between; align-items: stretch; gap: 2rem; margin-bottom: 30px; }
.ds-hero__text { flex: 1 1 50%; text-align: left; }
.ds-hero__kicker {
  font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-stretch: expanded;
  font-size: 16px;
  letter-spacing: 10px;
  text-transform: uppercase;
  display: block;
  margin-top: 60px;
  font-weight: 300;
}
.ds-hero__kicker strong { font-weight: 600; }
.ds-hero__code { font-size: 70px; font-weight: 700; line-height: 1; padding-bottom: 0; opacity: 0.2; }
.ds-hero__blurb { font-size: 16px; font-weight: 300; margin: 0; padding: 0.5rem 0 32px; color: var(--brand-deep-light); line-height: 130%; letter-spacing: 0.5px; }
.ds-hero__blurb_note{ font-size: 16px; font-weight: 300; margin: 0; padding: 0.5rem 0 32px; color: var(--brand-deep-light); line-height: 130%; letter-spacing: 0.5px; font-style: italic; }
.ds-hero__image { flex: 1 1 50%; display: flex; justify-content: center; align-items:   center; }
.ds-hero__image img { width: 100%; height: auto; }
@media (max-width: 640px) { .ds-hero { flex-direction: column; } .ds-hero__text, .ds-hero__image { flex: 1 1 auto; } }

/*------------------Print styling adjustments------------------------- */
@media print {
  html body {
    font-size: 15px;
    letter-spacing: 0px;
  }

  /* Headings (PRINT) */
  html body h1 { font-size: 22px; }
  html body h2 { font-size: 18.5px; }
  html body h3 { font-size: 16px; }
  html body h4 { font-size: 14px; }
  html body h5 { font-size: 13px; }
  html body h6 { font-size: 12px; }

  html body table { font-size: 14px; letter-spacing: 0px; }
  figcaption { font-size: 12px; }

  /* Nested lists (PDF) */
  html body ul ul, ul ol, ol ul, ol ol {
    margin-left: 1em;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 6px;
  }

  html body table th, html body table .HeaderInsideTable, html body table .TableLeftHeader { font-size: 14px; letter-spacing: 0px; }
  html body table caption { font-size: 14px; }

  .ds-hero { margin-bottom: 10px; }
  .ds-hero__blurb, .ds-hero__blurb_note { font-size: 14px; line-height: 100%; letter-spacing: 0.5px; }
  .ds-hero__code { font-size: 40px; }
  .ds-hero__kicker { font-size: 14px; }

  .datasheet {
    font-family: 'HelveticaNarrow', 'Roboto', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0px;
    text-align: justify;
    text-justify: inter-word;
    line-height: 110%;
    -prince-text-replace: none;
    color: var(--brand-text-grey95);
  }

  .doubleColumnLayout { margin-top: 30px; column-count: 2; column-gap: 2rem; }
  .doubleColumnLayout p:first-of-type { margin-top: 0; }
  html body table td { padding: 0.2em 0.75em; }

  /* Datasheet headings (print) */
  .datasheet h1 { font-size: 21px; text-align: left; }
  .datasheet h2 { font-size: 19px; text-align: left; }
  .datasheet h3 { font-size: 17px; text-align: left; }
  .datasheet h4 { font-size: 16px; text-align: left; }
  .datasheet h5 { font-size: 15px; text-align: left; }
  .datasheet h6 { font-size: 14px; text-align: left; }

  /* Keep specification section headings tighter in PDF output */
  .datasheet .specifications h1,
  .datasheet .specifications h2 { padding: 6px 8px; }
  .datasheet .specifications h1 { font-size: 17px; }
  .datasheet .specifications h2 { font-size: 15px; }
  .datasheet .specifications h3 { font-size: 14px; }

  /* CHANGE (2025-10-31): shrink PDF code blocks (e.g., PowerShell) */
  div.sourceCode{
    font-size: 12px;   /* was 13px */
    line-height: 1.35;
  }
  div.sourceCode code{
    font-size: 12px;   /* was 14px */
  }
}

/* Predictable table sizing & wrapping */
html body table { table-layout: fixed; }
html body table th, html body table td {
  white-space: normal; word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
}
html body table td img, html body table th img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
@media print {
  html body table th:first-child, html body table td:first-child { min-width: 42mm !important; }
}

/* -------------------------- Control page breaks ---------------------------- */
ul, ol { page-break-inside: avoid; page-break-before: avoid; }
.keeptogether { page-break-inside: avoid !important; }
.ForcePageBreak{ page-break-after: always; }
.ForceColumnBreak{
  display: block;
  height: 0;
}
@media print {
  .doubleColumnLayout .ForceColumnBreak {
    break-before: column;
    column-break-before: always;
    page-break-before: auto;
  }
}
.figure, table { break-inside: avoid }

/* Floating download button */
#floating-download-btn {
  position: fixed; top: 20px; right: 20px; color: #0e1b2a; padding: 14px;
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; line-height: 1; background: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; z-index: 1000;
}
#floating-download-btn:hover { background-color: #f7fafc; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
#floating-download-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.10); }
#floating-download-btn:focus-visible { outline: 2px solid #00a8c8; outline-offset: 2px; }
#floating-download-btn .download-icon { display: inline-block; }
#floating-download-btn .download-text { letter-spacing: 0.02em; }
@media print { #floating-download-btn { display: none; } }

/* tables with images — alt as captions (print-safe overrides below) */
td > figure.img-with-caption {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 100%; height: 100%; margin: 0; break-inside: avoid;
}
td > figure.img-with-caption > img { max-width: 100%; height: auto; margin-bottom: auto; flex-shrink: 0; }
td > figure.img-with-caption > figcaption { margin-top: 6px; font-style: italic; font-size: 14px; text-align: center; color: var(--brand-deep-light); }

@media print {
  td > figure.img-with-caption > figcaption { outline: 1px dashed #000; }
  table { border-collapse: separate; }
  td, th {  overflow: visible !important; }
  td > figure.img-with-caption, th > figure.img-with-caption { display: block !important; height: auto !important; margin: 0 !important; }
  td > figure.img-with-caption > img, th > figure.img-with-caption > img {
    display: block !important; max-width: 100% !important; height: auto !important; margin: 0 auto 6px auto !important;
  }
  td > figure.img-with-caption > figcaption, th > figure.img-with-caption > figcaption {
    display: block !important; margin: 0 !important; font-style: italic; line-height: 1.2; font-size: 12pt; color: #000 !important; text-align: center;
  }
}

/* Blockquotes */
html body blockquote {
  margin: 1em 0; padding: 0.6em 1em; border-left: 4px solid var(--brand-cyan);
  background: #f9f9fb; color: var(--brand-deep); font-size: 0.95em; line-height: 1.45; border-radius: 3px;
}
html body blockquote strong { color: var(--brand-deep); font-weight: 600; }

.task-list{ margin-left: 30px; }

/* Print vs Screen visibility for cover */
@media screen { .PrintOnly  { display: none; } .ScreenOnly { display: block; } }
@media print  { .PrintOnly  { display: block; } .ScreenOnly { display: none; } }

/* === Pagination polish (Prince) ============================================= */
html body h2, html body h3, html body h4 {
  -prince-keep-with-next: 1;
  page-break-after: avoid;
  break-after: avoid-page;
}
html body ol, html body ul, html body li { page-break-inside: auto; break-inside: auto; }
figure, img { page-break-inside: avoid; break-inside: avoid; }
.keep-with-next-2 { -prince-keep-with-next: 2; page-break-after: avoid; break-after: avoid-page; }



/* TOC logo behaviour */
#TOC .toc-logo {
    position: sticky;
    top: -20px;
    text-align: center;
    background: #ffffff;
    z-index: 2;
    padding: 24px 0 18px;
}

#TOC .toc-logo::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 10px;
    pointer-events: none;
    border-radius: 10px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.12),
        rgba(0, 0, 0, 0)
    );
}

#TOC .toc-logo img {
  max-width: 120px;
  height: auto;
  display: inline-block;
}