/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 864px;
  --sidebar-width: 320px;
  --page-width: 1536px;
  --logo-height: 50px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fffcfc;
  --accent-2: #fff8f6;
  --accent-3: #ffebe7;
  --accent-4: #ffdbd3;
  --accent-5: #ffccc2;
  --accent-6: #ffbbb0;
  --accent-7: #faa79a;
  --accent-8: #f28b7d;
  --accent-9: #d71612;
  --accent-10: #c60000;
  --accent-11: #d81813;
  --accent-12: #651a14;

  --accent-a1: #ff000003;
  --accent-a2: #ff390009;
  --accent-a3: #ff2b0018;
  --accent-a4: #ff2f002c;
  --accent-a5: #ff2a003d;
  --accent-a6: #ff24004f;
  --accent-a7: #f3210065;
  --accent-a8: #e61c0082;
  --accent-a9: #d40400ed;
  --accent-a10: #c60000;
  --accent-a11: #d50500ec;
  --accent-a12: #580700eb;

  --accent-contrast: #fff;
  --accent-surface: #fff6f4cc;
  --accent-indicator: #d71612;
  --accent-track: #d71612;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0035 28.83);
      --accent-2: oklch(98.4% 0.0087 28.83);
      --accent-3: oklch(95.5% 0.0236 28.83);
      --accent-4: oklch(92.7% 0.0522 28.83);
      --accent-5: oklch(89.5% 0.0689 28.83);
      --accent-6: oklch(85.5% 0.0836 28.83);
      --accent-7: oklch(80.5% 0.1012 28.83);
      --accent-8: oklch(74.4% 0.1278 28.83);
      --accent-9: oklch(55.9% 0.22 28.83);
      --accent-10: oklch(51.3% 0.22 28.83);
      --accent-11: oklch(56.1% 0.22 28.83);
      --accent-12: oklch(34.2% 0.1079 28.83);

      --accent-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
      --accent-a2: color(display-p3 0.8941 0.2392 0.0235 / 0.036);
      --accent-a3: color(display-p3 0.8745 0.1843 0.0118 / 0.091);
      --accent-a4: color(display-p3 0.8627 0.1882 0.0039 / 0.169);
      --accent-a5: color(display-p3 0.8667 0.1725 0.0039 / 0.232);
      --accent-a6: color(display-p3 0.8706 0.149 0.0039 / 0.299);
      --accent-a7: color(display-p3 0.8275 0.1451 0.0039 / 0.385);
      --accent-a8: color(display-p3 0.7882 0.1216 0.0039 / 0.495);
      --accent-a9: color(display-p3 0.7373 0.0588 0 / 0.859);
      --accent-a10: color(display-p3 0.6784 0.051 0 / 0.902);
      --accent-a11: color(display-p3 0.7373 0.0588 0 / 0.855);
      --accent-a12: color(display-p3 0.298 0.0353 0 / 0.906);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9961 0.9647 0.9608 / 0.8);
      --accent-indicator: oklch(55.9% 0.22 28.83);
      --accent-track: oklch(55.9% 0.22 28.83);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.528);
      --grayscale-track: color(display-p3 0.553 0.553 0.528);
    }
  }
}


.dark {
  --accent-1: #211917;
  --accent-2: #271a18;
  --accent-3: #431814;
  --accent-4: #59120d;
  --accent-5: #681711;
  --accent-6: #78231c;
  --accent-7: #903229;
  --accent-8: #b94136;
  --accent-9: #d71612;
  --accent-10: #c60000;
  --accent-11: #ff9080;
  --accent-12: #ffd1c9;

  --accent-a1: #fa000008;
  --accent-a2: #f80b000f;
  --accent-a3: #fe0b002e;
  --accent-a4: #fd000047;
  --accent-a5: #ff100057;
  --accent-a6: #ff2f1b69;
  --accent-a7: #fe483584;
  --accent-a8: #fe5241b2;
  --accent-a9: #ff1510d3;
  --accent-a10: #ff0000c0;
  --accent-a11: #ff9080;
  --accent-a12: #ffd1c9;

  --accent-contrast: #fff;
  --accent-surface: #341a1480;
  --accent-indicator: #d71612;
  --accent-track: #d71612;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(22.2% 0.0143 28.83);
      --accent-2: oklch(23.5% 0.0215 28.83);
      --accent-3: oklch(27.5% 0.0672 28.83);
      --accent-4: oklch(30.8% 0.1036 28.83);
      --accent-5: oklch(34.4% 0.1155 28.83);
      --accent-6: oklch(38.9% 0.1195 28.83);
      --accent-7: oklch(45.3% 0.1289 28.83);
      --accent-8: oklch(54.2% 0.157 28.83);
      --accent-9: oklch(55.9% 0.22 28.83);
      --accent-10: oklch(51.3% 0.22 28.83);
      --accent-11: oklch(78.4% 0.1844 28.83);
      --accent-12: oklch(90% 0.0554 28.83);

      --accent-a1: color(display-p3 0.9765 0 0 / 0.027);
      --accent-a2: color(display-p3 0.9843 0.1098 0 / 0.049);
      --accent-a3: color(display-p3 0.9961 0.1098 0 / 0.158);
      --accent-a4: color(display-p3 1 0.0588 0 / 0.241);
      --accent-a5: color(display-p3 1 0.1451 0.0235 / 0.302);
      --accent-a6: color(display-p3 1 0.2549 0.1569 / 0.372);
      --accent-a7: color(display-p3 1 0.349 0.2588 / 0.468);
      --accent-a8: color(display-p3 0.9961 0.3922 0.3059 / 0.634);
      --accent-a9: color(display-p3 1 0.2196 0.1529 / 0.747);
      --accent-a10: color(display-p3 1 0.1647 0.0941 / 0.677);
      --accent-a11: color(display-p3 1 0.6196 0.549 / 0.935);
      --accent-a12: color(display-p3 1 0.851 0.8157 / 0.97);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1882 0.102 0.0824 / 0.5);
      --accent-indicator: oklch(55.9% 0.22 28.83);
      --accent-track: oklch(55.9% 0.22 28.83);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(215, 22, 18, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(215, 22, 18, 1);
  --background: rgba(26, 27, 29, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #1a1b1d;
}

@layer ddn-custom {



   /* ====================================================
      STYLES ADDED BY DDN
      ==================================================== */


   /* ===== Page content padding ===== */

   /* Page width is defined in docs.yml */
   .fern-layout-guide {
      --page-padding: 80px !important;
   }

   /* ===== Code block styling ===== */

   /* Code block line height to prevent box characters from having vertical gaps */
   /* The language-none class is added by Fern when "none" is specified for a code block. */
   /* By convention, we should always use "none" for CLI output that contains box characters and tables. */
   .language-none .code-block {
      line-height: 18px !important;
      /* The font specified by Fern seems to be defaulting to Menlo on Mac, which makes the box characters overlap slightly horizontally.
         Changing the font to Courier fixes the issue, but Courier doesn't look as good. One day we should try to find a better font.
         Increasing the letter spacing also fixes the issue of the box characters overlapping, but makes the text look too spread out. */
      /* font-family: 'Courier New', Courier, monospace !important; */
      /* letter-spacing: 0.15em !important; */
   }

   /* ===== Styles to highlight changes ===== */

   /* Define color variables for change highlighting that adapt to light/dark mode */
   :root {
      /* Light mode colors */
      --addition-bg: #d4f4dd;
      --addition-border: #22863a;
      --deletion-bg: #ffeef0;
      --deletion-border: #d73a49;
      --deletion-text: rgba(0, 0, 0, 0.7);
      --deletion-line-color: rgba(215, 58, 73, 0.4);
      --change-bg: #f3e8ff;
      --change-border: #8b5cf6;
   }

   /* Dark mode colors */
   html.dark,
   html[style*="color-scheme: dark"] {
      --addition-bg: rgba(34, 134, 58, 0.2);
      --addition-border: #3fb950;
      --deletion-bg: rgba(215, 58, 73, 0.15);
      --deletion-border: #f85149;
      --deletion-text: rgba(255, 255, 255, 0.6);
      --deletion-line-color: rgba(139, 35, 50, 0.8);
      --change-bg: rgba(139, 92, 246, 0.15);
      --change-border: #a78bfa;
   }

   /* Fallback for system dark mode preference */
   @media (prefers-color-scheme: dark) {

      :root:not(.light) {
         --addition-bg: rgba(34, 134, 58, 0.2);
         --addition-border: #3fb950;
         --deletion-bg: rgba(215, 58, 73, 0.15);
         --deletion-border: #f85149;
         --deletion-text: rgba(255, 255, 255, 0.6);
         --deletion-line-color: rgba(139, 35, 50, 0.8);
         --change-bg: rgba(139, 92, 246, 0.15);
         --change-border: #a78bfa;
      }
   
}

   .addition {
      background-color: var(--addition-bg);
      border-left: 4px solid var(--addition-border);
      padding: 0px 4px 0px 8px;
   }

   .deletion {
      background-color: var(--deletion-bg);
      border-left: 4px solid var(--deletion-border);
      padding: 0px 4px 0px 8px;
      text-decoration: line-through;
      text-decoration-color: var(--deletion-line-color);
      color: var(--deletion-text);
   }

   .change {
      background-color: var(--change-bg);
      border-left: 4px solid var(--change-border);
      padding: 0px 4px 0px 8px;
   }

   /* ===== Nested ordered list styling ===== */

   ol ol > li {
   list-style-type: lower-alpha !important;
   }

   ol ol ol > li {
   list-style-type: lower-roman !important;
   }

   .fern-step > ol > li {
   list-style-type: lower-alpha !important;
   }

   .fern-step > ol ol > li {
   list-style-type: lower-roman !important;
   }

   /* ===== Nested unordered list styling ===== */

   /* Override Fern's bullet content for each nesting level via --tw-content variable */

   /* Level 1: solid circle (default - no change needed) */
   article ul > li::before {
   transform: scale(1.3) !important;
   }

   /* Level 2: open circle */
   article ul ul > li::before {
   --tw-content: '∘' !important;
   transform: scale(1.3) !important;
   }

   /* Level 3: solid square */
   article ul ul ul > li::before {
   --tw-content: '▪' !important;
   transform: scale(1.3) !important;
   }

   /* Level 4: open square */
   article ul ul ul ul > li::before {
   --tw-content: '▫' !important;
   transform: scale(1.5) !important;
   }

   /* Level 5: solid diamond */
   article ul ul ul ul ul > li::before {
   --tw-content: '⬩' !important;
   transform: scale(1.4) !important;
   }

   /* Level 6: open diamond */
   article ul ul ul ul ul ul > li::before {
   --tw-content: '⬫' !important;
   transform: scale(1.2) !important;
   }

   /* ===== Fern Callout Auto-Titles ===== */

   /* Automatically insert title text for callouts without explicit titles */
   /* Based on data-intent attribute used by Fern */

   /* Note callouts */
   .fern-callout[data-intent="note"] h5:empty::before {
   content: "Note";
   }

   /* Info callouts - styled as "Important Info" with purple theme (see below) */
   .fern-callout[data-intent="info"] h5:empty::before {
   content: "Important";
   }

   /* Warning callouts */
   .fern-callout[data-intent="warning"] h5:empty::before {
   content: "Warning";
   }

   /* Error callouts */
   .fern-callout[data-intent="error"] h5:empty::before {
   content: "Error";
   }

   /* Success callouts */
   .fern-callout[data-intent="success"] h5:empty::before {
   content: "Success";
   }

   /* Tip callouts */
   .fern-callout[data-intent="tip"] h5:empty::before {
   content: "Tip";
   }

   /* Check callouts */
   .fern-callout[data-intent="check"] h5:empty::before {
   content: "Check";
   }

   /* Launch callouts */
   .fern-callout[data-intent="launch"] h5:empty::before {
   content: "Launch";
   }

   /* Ensure the generated content is visible and styled appropriately */
   .fern-callout h5:empty::before {
   display: inline-block;
   font-weight: 600;
   }

   /* Prevent empty h5 from collapsing - ensure it displays */
   .fern-callout h5:empty {
   min-height: 1.5em;
   display: block;
   }

   /* ===== Custom Info Callout Styling (Purple "Important" Theme) ===== */
   /* Define purple color variables that adapt to light/dark mode */
   :root {
   /* Light mode purple colors for Info/Important callout */
   --purple-a2: rgba(138, 43, 226, 0.05);
   --purple-a6: rgba(138, 43, 226, 0.35);
   --purple-a11: rgba(75, 0, 130, 0.9);
   }

   /* Dark mode purple colors */
   html.dark,
   html[style*="color-scheme: dark"] {
   --purple-a2: rgba(186, 85, 211, 0.094);
   --purple-a6: rgba(186, 85, 211, 0.498);
   --purple-a11: rgb(216, 180, 254);
   }

   /* Fallback for system dark mode preference */
   @media (prefers-color-scheme: dark) {

   :root:not(.light) {
      --purple-a2: rgba(186, 85, 211, 0.094);
      --purple-a6: rgba(186, 85, 211, 0.498);
      --purple-a11: rgb(216, 180, 254);
   }
   
}

   /* Override default Info callout colors with purple theme for "Important" information */
   .fern-callout[data-intent="info"] {
   background-color: var(--purple-a2) !important;
   border-color: var(--purple-a6) !important;
   color: var(--purple-a11) !important;
   }

   /* Ensure text within Info callout inherits the purple color */
   .fern-callout[data-intent="info"] p,
   .fern-callout[data-intent="info"] li,
   .fern-callout[data-intent="info"] span {
   color: var(--purple-a11) !important;
   }

   /* Style the icon color for Info callout */
   .fern-callout[data-intent="info"] svg {
   color: var(--purple-a11) !important;
   opacity: 0.8;
   }


   /* ===== Inline icon styling for safety symbols and regulatory marks ===== */

   .inline-icon,
   img.inline-icon {
   display: inline-block;
   height: 2.5em;
   width: auto;
   vertical-align: middle;
   margin: 0 0.25rem;
   }

   /* Full-size variant */
   .inline-icon-full-size {
   display: inline-block;
   vertical-align: middle;
   margin: 0 0.35rem;
   }

   /* Right-aligned icon container */
   .right-align {
   text-align: right;
   }

   /* =======================Internal Only Content Styling============================= */
   /* Define color variables for internal only content that adapt to light/dark mode */
   :root {
    --internal-only-text-color: #FF0000;
   /* --internal-only-bg-color: rgba(255, 0, 0, 0.25); /*   /* Semi-transparent red for light backgrounds */
   }

   /* Dark mode colors */
   html.dark,
   html[style*="color-scheme: dark"] {
    --internal-only-text-color: #FF6666;
   /* --internal-only-bg-color: rgba(255, 0, 0, 0.1); /* /* Semi-transparent red for dark backgrounds */
   }

   /* For inline content and "Internal Only" label*/
   .internal-text {
    color: var(--internal-only-text-color);
   }

   /* For block content with background */
   /* .internal-block {
    background-color: var(--internal-only-bg-color);
   } */

   /* ====================================================
      STYLES ADDED BY FERN FOR POC
      ==================================================== */


/* ===== SFA200NV Hardware Documentation Styles ===== */

/* Main TOC Container */
.toc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* TOC Grid Layout */
.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Section Cards */
.toc-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.toc-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}
.toc-section:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}

/* Section Headers */
.toc-section h3 {
  color: #0d6efd;
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Section Icons */
.toc-section h3::before {
  content: "📁";
  font-size: 1.1em;
}

.toc-section[data-section="overview"] h3::before { content: "📋"; }
.toc-section[data-section="components"] h3::before { content: "🔧"; }
.toc-section[data-section="installation"] h3::before { content: "⚙️"; }
.toc-section[data-section="configuration"] h3::before { content: "🔧"; }
.toc-section[data-section="monitoring"] h3::before { content: "📊"; }
.toc-section[data-section="replacement"] h3::before { content: "🔄"; }
.toc-section[data-section="power"] h3::before { content: "⚡"; }
.toc-section[data-section="battery"] h3::before { content: "🔋"; }
.toc-section[data-section="temperature"] h3::before { content: "🌡️"; }
.toc-section[data-section="bmc"] h3::before { content: "🖥️"; }
.toc-section[data-section="vm"] h3::before { content: "💻"; }
.toc-section[data-section="support"] h3::before { content: "🆘"; }

/* Link Lists */
.toc-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-section li {
  margin-bottom: 0.5rem;
}

.toc-section a {
  color: #495057;
  text-decoration: none;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  line-height: 1.4;
  position: relative;
  padding-left: 1.5rem;
}

.toc-section a::before {
  content: "▸";
  position: absolute;
  left: 0.5rem;
  color: #6c757d;
  transition: all 0.2s ease;
}

.toc-section a:hover {
  background-color: #e3f2fd;
  color: #0d6efd;
  transform: translateX(4px);
}
.toc-section a:focus-visible {
  background-color: #e3f2fd;
  color: #0d6efd;
  transform: translateX(4px);
}

.toc-section a:hover::before {
  color: #0d6efd;
  transform: rotate(90deg);
}
.toc-section a:focus-visible::before {
  color: #0d6efd;
  transform: rotate(90deg);
}

/* Responsive Design */
@media (max-width: 768px) {

  .toc-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toc-container {
    padding: 1rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .toc-section {
    padding: 1rem;
  }

}

/* Document Header Styles */
.document-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.version-info {
  text-align: center;
  font-size: 1.1rem;
  color: #495057;
  margin-bottom: 1.5rem;
}

.version-info .version {
  font-weight: 600;
  color: #0d6efd;
}

.version-info .doc-number,
.version-info .revision {
  font-weight: 500;
}

.product-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.variant-group {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.variant-group h4 {
  color: #0d6efd;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.variant {
  font-family: 'Monaco', 'Menlo', monospace;
  background: #f8f9fa;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

.publish-date {
  text-align: center;
  font-size: 1.1rem;
  color: #495057;
  margin-top: 1.5rem;
}

/* TOC Sections Styling */
.toc-sections {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.toc-main-sections,
.toc-appendices {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
}

.toc-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.toc-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.toc-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}
.toc-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #0d6efd;
}

.section-number {
  background: #0d6efd;
  color: white;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.section-title {
  font-weight: 600;
  color: #212529;
  font-size: 1rem;
}

.section-desc {
  font-size: 0.85rem;
  color: #6c757d;
  text-align: right;
}

/* Safety Guidelines */
.safety-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
}

.safety-category h4 {
  color: #856404;
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.safety-category a {
  color: #856404;
  text-decoration: none;
  font-size: 0.9rem;
}

.safety-category a:hover {
  text-decoration: underline;
}
.safety-category a:focus-visible {
  text-decoration: underline;
}

.regulatory-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
}

.regulatory-section h4 {
  color: #0d6efd;
  margin: 1.5rem 0 1rem 0;
}

.certification-logo {
  text-align: center;
  margin: 1rem 0;
}

/* Safety Guidelines */
.safety-guidelines {
  margin: 1rem 0;
}

.safety-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin: 0.75rem 0;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  border-left: 4px solid #28a745;
}

.safety-item.critical {
  background: #fff3cd;
  border-color: #ffeaa7;
  border-left-color: #ffc107;
}

.safety-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.safety-content strong {
  color: #212529;
  display: block;
  margin-bottom: 0.25rem;
}

/* Responsive Design for New Elements */
@media (max-width: 768px) {

  .document-header {
    padding: 1.5rem;
  }
  
  .product-variants {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toc-sections {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .toc-link {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }
  
  .section-desc {
    display: none;
  }
  
  .safety-nav {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

}

/* Print Styles */
@media print {

  .toc-section {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .toc-section a {
    color: #000 !important;
  }
  
  .document-header,
  .safety-guidelines,
  .regulatory-section {
    box-shadow: none;
    border: 1px solid #000;
  }

}

/* ===== DDN Dashboard-Inspired Modern Styling ===== */

   /* CSS Variables for consistent design tokens - Light Mode (default) */
   :root {
   --ddn-accent: #EE2737;
   --ddn-border: #E5E7EB;
   --ddn-surface: #FFFFFF;
   --ddn-bg: #F9FAFB;
   --ddn-text-primary: #0F172A;
   --ddn-text-secondary: #475569;
   --ddn-text-muted: #64748B;
   --accent-tint: rgba(238, 39, 55, 0.04);
   --accent-tint-strong: rgba(238, 39, 55, 0.08);
   --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
   --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 10px 15px -3px rgba(16, 24, 40, 0.1);
   --shadow-lg: 0 10px 20px rgba(16, 24, 40, 0.12), 0 20px 25px -5px rgba(16, 24, 40, 0.1);
   }

   /* Dark Mode Overrides */
   html.dark,
   html[style*="color-scheme: dark"] {
   --ddn-border: #243244;
   --ddn-surface: #0F172A;
   --ddn-bg: #0B1220;
   --ddn-text-primary: #E2E8F0;
   --ddn-text-secondary: #CBD5E1;
   --ddn-text-muted: #94A3B8;
   --accent-tint: rgba(238, 39, 55, 0.12);
   --accent-tint-strong: rgba(238, 39, 55, 0.18);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
   --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 20px rgba(0, 0, 0, 0.35);
   --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.4);
   }

   /* Fallback for system dark mode preference */
   @media (prefers-color-scheme: dark) {

      :root:not(.light) {
         --ddn-border: #243244;
         --ddn-surface: #0F172A;
         --ddn-bg: #0B1220;
         --ddn-text-primary: #E2E8F0;
         --ddn-text-secondary: #CBD5E1;
         --ddn-text-muted: #94A3B8;
         --accent-tint: rgba(238, 39, 55, 0.12);
         --accent-tint-strong: rgba(238, 39, 55, 0.18);
      }
   
}

   /* Clean background for entire site */
   body {
      background-color: var(--ddn-bg) !important;
   }

   /* Button Styling - Neutral with Accent on Hover */
   /* Affects Ask AI and Login/Logout button (which may only matter on the POC site that has password login) */
   .fern-button,
   #fern-auth-button {
      background: transparent !important;
      color: var(--ddn-text-primary) !important;
      border: 1.5px solid var(--ddn-border) !important;
      border-radius: 9999px !important;
      box-shadow: var(--shadow-sm) !important;
      transition: all 0.2s ease !important;
      font-weight: 500 !important;
   }

   .fern-button:hover,
   .fern-button:focus-visible,
   #fern-auth-button:hover,
   #fern-auth-button:focus-visible {
      border-color: var(--ddn-accent) !important;
      background: var(--accent-tint) !important;
      box-shadow: var(--shadow-md) !important;
      transform: translateY(-1px) !important;
   }

   /* Keep page action buttons neutral – remove global border/shadow/hover */
   .fern-page-actions .fern-button {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      color: inherit !important;
      transform: none !important;
   }

   .fern-page-actions .fern-button:hover,
   .fern-page-actions .fern-button:focus-visible {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      transform: none !important;
   }

   /* Respect grouped radius utilities overridden by global pill radius */
   .fern-page-actions .fern-button.rounded-l-none {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
   }

   .fern-page-actions .fern-button.rounded-r-none {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
   }

   /* Header Styling */
   .fern-header-content {
      background: var(--ddn-surface) !important;
      border-bottom: 1px solid var(--ddn-border) !important;
      box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04) !important;
      backdrop-filter: blur(8px) !important;
   }


   /* Ensure search and AI buttons are always visible (fix hydration timing issue) */
   #fern-search-button,
   #fern-ask-ai-button,
   button[aria-label="Search"] {
      opacity: 1 !important;
      visibility: visible !important;
      display: inline-flex !important;
      pointer-events: auto !important;
   }

   /* Navigation Links with Accent on Hover */
   /* Code inspection shows this aria-label used in the header, so it might be for tabs? which we don't have */
   nav[aria-label="Navbar links"] a {
      border: 1px solid transparent !important;
      border-radius: 9999px !important;
      padding: 0.5rem 1rem !important;
      transition: all 0.2s ease !important;
      font-weight: 500 !important;
   }

   nav[aria-label="Navbar links"] a:hover,
   nav[aria-label="Navbar links"] a:focus-visible {
      border-color: var(--ddn-accent) !important;
      background: var(--accent-tint) !important;
      color: var(--ddn-accent) !important;
   }

   /* Link Hover States */
   a {
      transition: color 0.15s ease !important;
   }


}

/* Disable ONLY our custom layer for Ask AI button and search bar */
@supports (all: revert-layer) {

   .fern-header-content #fern-ask-ai-button,
   .fern-header-content #fern-search-button,
   .fern-header-content button[aria-label="Search"],
   .fern-header-content button[aria-label="Ask AI"] {
      all: revert-layer !important;
   }

   /* Add proper padding to Ask AI button */
   .fern-header-content #fern-ask-ai-button,
   .fern-header-content button[aria-label="Ask AI"] {
      padding-inline-start: 1rem !important;
      padding-inline-end: 1rem !important;
   }

}