/*!
 * @file custom.css
 * @brief STMicroelectronics custom styles for Shibuya Sphinx theme
 * @author STMicroelectronics
 * @copyright Copyright (c) 2026 STMicroelectronics.
 *            All rights reserved.
 *            This software is licensed under SLA0044 terms that can be found at:
 *            https://www.st.com/SLA0044
 *            or in the LICENSE.md file in the root directory of this software component.
 */

/* ============================================================
   Light Theme (default)
============================================================ */
:root {
  /* ==== Brand Colors ==== */
  --color-primary: #0047b2;
  --color-primary-dark: #003399;
  --color-accent: #3cb4e6;

  /* ==== Text Colors ==== */
  --color-heading: #03234b;
  --color-text: #03234b;

  /* ==== Backgrounds ==== */
  --color-bg: #ffffff;
  --color-code-bg: #f0f0f0;  /* Light gray for code blocks (more visible than GitHub's #f6f8fa) */
  --color-caption-bg: #e8f6fc;

  /* ==== Font ==== */
  --font-heading: "Helvetica Now Display", sans-serif;
  --font-text: "Helvetica Now Display", sans-serif;

  /* ==== Theme Variables Override ==== */
  --yue-c-link-border: var(--color-primary);
  --sy-c-link-hover: var(--color-primary);
  --sy-c-link: var(--color-primary);

  --yue-c-heading: var(--color-heading);
  --sy-c-text: var(--color-text);
  --yue-c-code-text: var(--color-text);
  --yue-c-bold: var(--color-heading);

  --yue-c-code-background: var(--color-code-bg);
  --code-block-caption-background: var(--color-caption-bg);
  --code-block-background: var(--color-code-bg);
}

/* ============================================================
   Dark Theme

   Theme Selection Flow:
   ---------------------
   1. OS Level (Windows):
      - User sets Windows theme to Light/Dark in Settings > Personalization > Colors
      - Browser detects this via CSS media query: @media (prefers-color-scheme: dark)

   2. Sphinx Site Level (Shibuya theme):
      - Theme toggle button (moon/sun icon) has 3 modes:
        * Auto: follows OS/browser preference (prefers-color-scheme)
        * Light: forces light mode regardless of OS
        * Dark: forces dark mode regardless of OS
      - User's choice is stored in localStorage._theme

   3. What Shibuya's JavaScript Does (both elements coexist):
      a) Sets data-color-mode="auto|light|dark" ATTRIBUTE on <html>
         Role: JavaScript state tracking only (NOT used for CSS styling)

      b) Adds class="dark" or class="light" CLASS to <html> element
         Role: CSS styling hook (THIS is what controls appearance)

   CSS Selector Requirements:
   --------------------------
   CRITICAL: Must use html.dark selector, NOT [data-color-mode="dark"]

   Why class selector, not attribute selector?
   - BOTH attribute AND class are present in the HTML simultaneously
   - The CLASS is the CSS styling hook (higher specificity)
   - The ATTRIBUTE is for JavaScript logic only
   - Using html.dark ensures our custom variables override Shibuya's defaults
   - Using [data-color-mode="dark"] would have lower specificity and fail

   Result when user switches to dark mode (or Auto + OS is dark):
   --------------------------------------------------------------
   HTML: <html class="dark" data-color-mode="dark">
                  ↑                    ↑
              CSS hook          JS state storage

   CSS:  html.dark { --color-text: #d2e0f0; }  ← Activates light colors
============================================================ */
html.dark {
  /* Brand Colors for Dark Mode - Lighter variants for contrast */
  --color-primary: #5da8ff;        /* Light blue for links - visible on dark bg */
  --color-primary-dark: #2c7ae0;   /* Darker blue for hover states */
  --color-accent: #49c8ef;         /* Accent color for highlights */

  /* Text Colors - Light variants for readability on dark backgrounds */
  --color-heading: #e8f3ff;        /* Nearly white for headings */
  --color-text: #d2e0f0;           /* Light gray-blue for body text */

  /* Background Colors - Dark variants */
  --color-bg: #0d1117;             /* Main dark background */
  --color-code-bg: #1b1f27;        /* Slightly lighter for code blocks */
  --color-caption-bg: #152032;     /* Blue-tinted for captions/notes */

  /* Override Shibuya/Yue theme variables for links */
  --yue-c-link-border: var(--color-primary);
  --sy-c-link-hover: var(--color-primary-dark);
  --sy-c-link: var(--color-primary);

  /* Override Shibuya/Yue theme variables for text */
  --yue-c-heading: var(--color-heading);
  --sy-c-text: var(--color-text);
  --sy-c-heading: var(--color-heading);  /* Shibuya heading color */
  --yue-c-code-text: var(--color-text);
  --yue-c-bold: var(--color-heading);

  /* Override code block backgrounds */
  --yue-c-code-background: var(--color-code-bg);
  --code-block-caption-background: var(--color-caption-bg);
  --code-block-background: var(--color-code-bg);
}

/* Apply background and text globally for dark theme
   This ensures the entire page uses dark mode colors */
html.dark body {
  background-color: var(--color-bg);
  color: var(--color-text);
}


::selection {
  background-color: #b3d4fc; /* Background color on selection */
  color: #03234B; /* Selected text color */
}


/* ============================================================
   Video containers (sphinxcontrib-video)
   ─────────────────────────────────────────────────────────
   The Shibuya CSS reset applies `height: auto` to all <video> elements for
   responsive scaling.  Unlike <img>, browsers do NOT automatically derive
   aspect-ratio from <video> width/height HTML attributes — the space is
   allocated only after the video's metadata has loaded.  This causes a
   Cumulative Layout Shift (CLS) when an anchor target sits just below a
   video: the browser scrolls to the anchor, then the video expands and
   pushes the target out of view.
   Fix: declare an explicit `aspect-ratio` matching the authoring convention
   (600×400 = 3/2) so the browser reserves the correct height before the
   video loads.  Combined with `max-width:100%; height:auto` the video still
   scales responsively on narrow viewports.
============================================================ */

.sphinx-contrib-video-container video {
  aspect-ratio: 600 / 400; /* 3:2 — matches :width: 600 :height: 400 in RST */
}

/* ============================================================
   404 Redirect Message
============================================================ */

#st-404-redirect-msg {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  z-index: 10000;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  text-align: center;
  max-width: 90%;
}

#st-404-redirect-msg strong {
  display: block;
}

#st-404-redirect-msg .st-redirect-subtitle {
  font-size: 0.75rem;
  opacity: 0.9;
  display: block;
  margin-top: 0.25rem;
}

/* ============================================================
   Article Header - Save as PDF Button
============================================================ */

/* Desktop: button floats right */
@media (min-width: 768px) {
  .content-header {
    float: right;
    margin-left: 1rem;
  }

  /* Prevent h1 text from overlapping with button */
  article.yue > h1:first-child,
  article.yue > section:first-child > h1:first-child {
    margin-right: 200px;
  }
}

/* Mobile: button stacks above title */
@media (max-width: 767px) {
  .content-header {
    width: 100%;
    margin-bottom: 1rem;
  }

  .save-pdf-btn {
    width: 100%;
  }
}

/* Save as PDF button */
.save-pdf-btn {
  padding: 0.5em 1.5em;
  background-color: #03234B;
  color: #fff;
  border: 2px solid #03234B;
  border-top-left-radius: 12px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.save-pdf-btn:hover {
  background-color: #E0ECFF;
  color: #03234B;
  border-color: #03234B;
}

.save-pdf-btn:active {
  background-color: #FFF;
  color: #03234B;
  border-color: #03234B;
}

/* ── PRINT PAGE SETUP ────────────────────────────────────────────────────────
   Declaring @page gives Chrome a fixed printable rectangle so that `100vh`
   resolves to the *print page* height instead of the screen viewport height.
   Without this, Chrome uses the screen viewport (~1080px) for vh calculations,
   so any rule like `min-height: calc(100vh - 4rem)` evaluates to ~1044px even
   inside @media print.
   ─────────────────────────────────────────────────────────────────────────── */
@page {
  size: A4 portrait;
  margin: 1.5cm 2cm;
}

@media print {

  /* ── 1. UNIVERSAL RESET ───────────────────────────────────────────────────
     Target every element regardless of the theme's class names.  This is
     intentionally broad so that theme refactoring does not break print.

     overflow: visible
       Sphinx's basic.css sets `pre { overflow: auto }`.  Chrome's print
       paginator treats any element with overflow != visible as
       break-inside: avoid, so code blocks get pushed to the next page and
       leave a blank page behind them.  Resetting overflow on * fixes this
       without knowing Shibuya's exact class names.

     min-height: 0 / max-height: none
       Collapses `min-height: calc(100vh - 4rem)` on the flex container that
       wraps the article.  That container uses `justify-content: space-between`
       so any leftover height is distributed as gaps between its children (.
       content-header, article, .back-to-top).  With min-height: 0 the
       container is exactly as tall as its content — no gaps, no blank pages.
     ───────────────────────────────────────────────────────────────────────── */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html,
  body {
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 0;
    background: #ffffff !important;
    color: #03234b !important;
  }

  /* ── 2. HIDE INTERACTIVE / NAVIGATION ELEMENTS ───────────────────────────
     Explicit display:none for things that must never appear on paper.
     These are listed by role/name so the rule is resilient to theme changes. */
  .save-pdf-btn,
  .content-header,
  .back-to-top,
  .copybtn {
    display: none !important;
  }

  /* ── 3. STABLE POSITIONING ───────────────────────────────────────────────
     Fixed and sticky elements (nav bars, cookie banners…) are printed at
     their on-screen position, which means they repeat on every page or
     overlap content.  Force them to static so they flow naturally. */
  header,
  footer,
  nav {
    position: static !important;
  }

  /* ── 4. BREAK CONTROL ────────────────────────────────────────────────────
     Do not over-constrain page breaks: if an element is taller than a page
     and break-inside:avoid is set, Chrome produces a blank page upstream and
     cannot paginate the element at all.  Use `auto` everywhere and let the
     browser decide where to break. */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: auto;
    break-after: auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  section, li, p, dd, dt {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* ── 5. CSS VARIABLE RESET ───────────────────────────────────────────────
     Shibuya drives inline-code backgrounds via custom properties with
     !important.  Resetting the variables to transparent at :root means any
     descendant rule that reads --yue-c-code-background inherits transparent
     instead of a grey value.  Specificity fixes in section 6 below handle
     the more stubborn selectors. */
  :root,
  html,
  html.light,
  html.dark {
    --yue-c-code-background: transparent;
    --code-block-background: transparent;
  }

  /* ── 6. LIGHT MODE COLOURS FOR DARK THEMES ──────────────────────────────
     When the user has dark mode active, all colour tokens are overridden to
     their light-mode equivalents so the printed page does not come out black. */
  html.dark {
    --color-text: #03234b;
    --color-heading: #03234b;
    --color-bg: #ffffff;
    --color-code-bg: #f0f0f0;
    --color-caption-bg: #e8f6fc;
    --color-accent: #3cb4e6;
    --yue-c-heading: #03234b;
    --yue-c-code-text: #03234b;
    --sy-c-text: #03234b;
  }

  html.dark body {
    background-color: #ffffff !important;
    color: #03234b !important;
  }

  /* Disable dark-mode image inversion filters */
  html.dark img,
  html.dark figure img,
  html.dark object[type="image/svg+xml"] {
    filter: none !important;
    opacity: 1 !important;
  }

  /* ── 7. INLINE CODE ──────────────────────────────────────────────────────
     Shibuya's `.yue code` rule sets `background: var(--yue-c-code-background)`
     with `!important` at (.yue code) specificity.  We match that specificity
     so our transparent override wins by source order.  The bare selectors act
     as a fallback for code outside the .yue wrapper.

     span.pre: basic.css sets `span.pre { white-space: nowrap }`.  Multi-span
     inline code (multiple <span class="pre"> per <code>) cannot wrap and pushes
     lines off-page in narrow print columns; reset to normal here. */
  .yue code.docutils.literal,
  .yue code.docutils.literal.notranslate,
  code.docutils.literal,
  code.docutils.literal.notranslate {
    color: #03234b !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: inline !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .yue code.docutils.literal .pre,
  .yue code.docutils.literal.notranslate .pre,
  code.docutils.literal .pre,
  code.docutils.literal.notranslate .pre {
    background: transparent !important;
    background-color: transparent !important;
    white-space: normal !important;
  }

  /* ── 8. CODE BLOCKS ──────────────────────────────────────────────────────
     Replace the theme's grey/dark background with white + border for print
     legibility.  pre-wrap ensures long lines wrap instead of creating a
     scrollable area (which would just be clipped in print). */
  .highlight,
  pre.literal-block {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 0 !important;
  }

  .highlight pre,
  pre.literal-block {
    background-color: #ffffff !important;
    color: #03234b !important;
    white-space: pre-wrap !important;
  }

  html.dark .highlight,
  html.dark pre.literal-block {
    color: #03234b !important;
  }

  html.dark .highlight * {
    color: inherit !important;
    background: transparent !important;
  }

  /* ── 9. TABLES ───────────────────────────────────────────────────────────
     page-break-inside:avoid keeps short tables whole.  For tables that span
     multiple pages, thead { display: table-header-group } makes the header row
     repeat at the top of every page automatically.  tfoot gets the equivalent
     treatment.  tbody tr { break-inside: avoid } prevents individual rows from
     being split in half at a page boundary. */
  .yue .table-wrapper {
    page-break-inside: avoid;
  }

  .yue .table-wrapper td {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .yue table thead {
    display: table-header-group; /* repeat header on every page */
  }

  .yue table tfoot {
    display: table-footer-group; /* repeat footer on every page */
  }

  .yue table tbody tr {
    break-inside: avoid;
    page-break-inside: avoid; /* never split a row across pages */
  }

  /* ── 10. IMAGES ──────────────────────────────────────────────────────────
     max-width:100% prevents images wider than the print column from being
     clipped.  break-inside:avoid keeps each image on a single page rather than
     being sliced in half at a page boundary. */
  img,
  figure img,
  .yue img,
  .yue figure img {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── 11. TYPOGRAPHY ──────────────────────────────────────────────────────
     Points (pt) are the canonical unit for print output: 1pt = 1/72 inch,
     independent of screen resolution or viewport size.  Using pt here ensures
     body text and headings render at a consistent physical size regardless of
     the user's screen DPI or zoom level at the moment they open the print
     dialog.  Rem/px units scale with viewport or font settings; pt does not. */
  body {
    font-size: 12pt;
    line-height: 1.6;
  }

  h1 { font-size: 20pt; }
  h2 { font-size: 17pt; }
  h3 { font-size: 14pt; }
  h4 { font-size: 12pt; }
  h5, h6 { font-size: 11pt; }
}

/* Download PDF button (placeholder - disabled) */
.download-btn {
  padding: 0.5em 1em;
  background-color: var(--color-muted);
  color: var(--color-text-secondary);
  border: none;
  border-radius: 4px;
  cursor: not-allowed;
  font-weight: 600;
  opacity: 0.5;
}

.download-btn:disabled {
  cursor: not-allowed;
}

/* ============================================================
   Admonitions (Notes)
============================================================ */
.admonition.note {
  margin: 0;
  padding: 0;
  border-left: 4px solid var(--color-accent);
  border-radius: 6px;
  background-color: var(--color-caption-bg);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   Unified Admonition Styling
   We normalize all admonitions to share the same box model and
   vary only the accent color via a local custom property.
   Supported Sphinx/RST types mapped below.
============================================================ */
.admonition {
  margin: 1.2em 0;
  padding: 0;
  border-left: 4px solid var(--_admonition-color, var(--color-accent));
  border-radius: 6px;
  background-color: var(--color-caption-bg);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* ensure rounded corner clipping */
}

/* Base content spacing inside admonitions */
.yue .admonition > * {
  margin: 0;
  padding: 0.5rem;
  background-color: var(--color-bg);
}

/* Title bar */
.admonition p.admonition-title {
  padding: 0.5rem;
  margin: 0;
  color: var(--color-heading);
  font-weight: 800;
  border-radius: 6px 6px 0 0;
  background-color: var(--color-caption-bg);
}

/* Dark mode adjustments */
[data-color-mode="dark"] .admonition p.admonition-title {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Remove legacy note-only rules (kept above but overridden) */

/* Add spacing between consecutive admonitions (avoids a systematic gap before the next element) */
.admonition + .admonition {
  margin-top: 1rem;
}

/* Variant color mapping using local custom property */
.admonition.note { --_admonition-color: var(--color-accent); }
.admonition.warning { --_admonition-color: #ff9800; }
.admonition.caution { --_admonition-color: #ff9800; }
.admonition.attention { --_admonition-color: #ff9800; }
.admonition.danger { --_admonition-color: #e53935; }
.admonition.error { --_admonition-color: #e53935; }
.admonition.important { --_admonition-color: #673ab7; }
.admonition.tip { --_admonition-color: #4caf50; }
.admonition.hint { --_admonition-color: #4caf50; }
.admonition.seealso { --_admonition-color: #2196f3; }
.admonition.todo { --_admonition-color: #607d8b; }

/* Pseudo-elements often inserted by themes; ensure removed for clean look */
.admonition::before,
.admonition::after {
  content: none;
}

/* ============================================================
   Tables
============================================================ */
.yue .table-wrapper {
  border: none;
  border-radius: 6px;
  overflow: hidden; /* default vertical clipping retained */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.2);
}

/* Enable horizontal scrolling only when width exceeds container */
.yue div.table-wrapper.docutils.container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Emphasize horizontal scrollbar for better visibility - following Shibuya's scrollbar pattern */
.yue div.table-wrapper.docutils.container::-webkit-scrollbar {
  height: 0.75rem;
}

.yue div.table-wrapper.docutils.container::-webkit-scrollbar-track {
  background-color: transparent;
}

.yue div.table-wrapper.docutils.container::-webkit-scrollbar-thumb {
  border-radius: 0.625rem;
}

.yue div.table-wrapper.docutils.container:hover::-webkit-scrollbar-thumb {
  background-color: var(--gray-a3);
  background-clip: content-box;
  border: 0.1875rem solid transparent;
}

/* Firefox scrollbar styling */
.yue div.table-wrapper.docutils.container {
  scrollbar-width: auto;
  scrollbar-color: var(--gray-a3) transparent;
}

.yue .table-wrapper th {
  background-color: rgba(0, 0, 0, 0.07);
}

[data-color-mode="dark"] .yue .table-wrapper th {
  background-color: rgba(255, 255, 255, 0.07);
}

.yue .table-wrapper caption {
  text-align: left;
  background-color: var(--color-caption-bg);
}

.yue .table-wrapper caption .caption-text {
  color: var(--color-heading);
  font-weight: 800;
}

/* Ensure table cells with code blocks are top-aligned vertically and left-aligned horizontally */
.yue .table-wrapper td {
  vertical-align: top;
}

.yue .table-wrapper td .highlight,
.yue .table-wrapper td pre {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* ============================================================
   Code Blocks
============================================================ */
.literal-block-wrapper.docutils.container {
  border-left: 4px solid var(--color-accent);
  border-radius: 6px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.14),
    0 2px 1px -1px rgba(0, 0, 0, 0.2);
}

.code-block-caption {
  color: var(--color-heading);
  font-weight: 800;
}


.search-results-list {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}

.search-result-item {
  margin-bottom: 1.2em;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.8em;
}

.search-result-title {
  font-weight: 700;
  color: var(--sy-c-link, #0047b2);
  text-decoration: none;
}

.search-result-title:hover {
  text-decoration: underline;
}

.search-result-snippet {
  display: block;
  margin-top: 0.3em;
  font-size: 0.95em;
  color: #444;
  line-height: 1.4;
}

/* ============================================================
   Navigation Sidebar Code Wrapping

   Breathe-generated TOC links contain <code><span class="pre">
   elements which inherit white-space:pre or white-space:nowrap,
   preventing text wrapping. This causes long function/structure
   names to overflow or get clipped in both left and right sidebars.

   Override to allow normal wrapping for better readability.
============================================================ */
.globaltoc code,
.globaltoc span.pre,
.localtoc code,
.localtoc span.pre {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ============================================================
   Hide Doxygen Group Titles

   Doxygen groups (e.g., FLASH_Exported_Functions_Group1) are
   internal organizational structures that should not be visible
   to end users. These rules hide the group name elements while
   keeping the actual function/type/constant content visible.

   Structure: <span class="target" id="...group__..."></span>
              <em><span class="pre">group</span></em>
              <span class="sig-name descname"><span class="pre">FLASH_ITF_Exported_Constants</span></span>

   IMPORTANT: Only hide elements where the entire dt.sig contains "group" text,
   to avoid hiding legitimate function/type/constant targets that happen to have
   "group__" in their ID path.
============================================================ */

/* Hide the Doxygen group title text (em and sig-name) while keeping the
   parent dt and .target span visible for anchor navigation to work */
dt.sig:has(> em > .pre) > em,
dt.sig:has(> em > .pre) > .sig-name.descname {
    display: none;
}

/* Custom styling for HAL migration docs
   - .removed-feature: red, bold
   - .added-feature: green, bold
   - .hal1-code / .hal2-code: semantic classes for inline code
   - Additional utility color classes for future use
*/

.removed-feature {
  color: #c00; /* red */
  font-weight: 700;
}
/* Strengthen specificity and protect against theme overrides */
.yue .removed-feature,
.yue span.removed-feature {
  color: #c00 !important;
  font-weight: 700;
}

.added-feature {
  color: #2e7d32; /* accessible green */
  font-weight: 700;
}
/* Strengthen specificity */
.yue .added-feature,
.yue span.added-feature {
  color: #2e7d32 !important;
  font-weight: 700;
}
/* Ensure inline role classes always apply */
span.removed-feature { color: #c00 !important; font-weight: 700; }
span.added-feature   { color: #2e7d32 !important; font-weight: 700; }/* added specificity to guarantee color */

/* Hal inline code roles */
.hal1-code {
  color: #c62828;
  font-weight: 700;
}
/* Strengthen specificity */
.yue .hal1-code,
.yue span.hal1-code,
span.hal1-code {
  color: #c62828 !important;
  font-weight: 700;
}
.hal2-code {
  color: #2e7d32;
  font-weight: 700;
}
/* Accessibility: ensure sufficient contrast for bold labels */
.removed-feature, .added-feature { font-size: 0.95em; }
/* Strengthen specificity */
.yue .hal2-code,
.yue span.hal2-code,
span.hal2-code {
  color: #2e7d32 !important;
  font-weight: 700;
}

/* ============================================================
   Dark Mode: Image and Icon Color Inversion

   Problem: Most images/icons are designed for light backgrounds
   and become invisible or hard to see on dark backgrounds.

   Solution: Invert colors while preserving hue
   - invert(1): Flip dark → light, light → dark
   - hue-rotate(180deg): Restore original color (e.g., blue stays blue)
   - opacity: 0.9: Slightly reduce brightness for softer appearance

   Applies to:
   - Regular images (<img> tags)
   - Figure images
   - PlantUML diagrams (rendered as <img> or <object>)
   - Draw.io diagrams (rendered as <img> or <object>)

   Excluded:
   - Logos (light-logo/dark-logo classes)
   - Images with no-invert class (for photos, color-sensitive content)

   To exclude an image from inversion in RST:
      .. image:: path/to/photo.png
         :class: no-invert
         :alt: Description
============================================================ */
html.dark .yue img:not(.light-logo):not(.dark-logo):not(.no-invert),
html.dark .yue figure img:not(.light-logo):not(.dark-logo):not(.no-invert),
html.dark .yue object[type="image/svg+xml"]:not(.no-invert),
html.dark .yue figure object[type="image/svg+xml"]:not(.no-invert) {
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.9;
}

/* ============================================================
   ST Logo CLS prevention (A9OD-606)
   Reserve space for the logo container before the SVG loads.
   min-width derived from SVG aspect ratio (62x34) at height 28px: 28*(62/34)≈51px.
   rem units keep this proportional at any font scale.
============================================================ */
.sy-head-brand {
  min-width: 3.2rem;
  min-height: 1.75rem;
}

/* ============================================================
   Support Button (ST Online Support portal link in header)
   Fixed dimensions prevent layout shift while SVG loads.
   The button is positioned in the sy-head-actions bar.
============================================================ */
.sy-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.sy-support-btn:hover {
  opacity: 1;
}

.sy-support-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  /* Small upward nudge to compensate for the visual weight of the SVG artwork;
     em unit keeps this proportional at any font scale or zoom level. */
  transform: translateY(-0.1em);
}

/* Dark mode: invert the support icon (dark navy fill → light) */
html.dark .sy-support-icon {
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.9;
}

@media print {
  .sy-support-btn {
    display: none;
  }
}

/* ============================================================
   PDF rendering marker class
============================================================ */

/*
 * .pdf-linearize is applied by RST authors to list-table directives that
 * contain images or code blocks in side-by-side columns and cannot render
 * correctly inside constrained LaTeX table cells.
 *
 * The docbuild-core --latex-patches option detects this class on the Sphinx
 * doctree and dissolves the table into a flat sequential block flow for PDF
 * output only.
 *
 * In HTML this class is intentionally inert: no visual rule is defined.
 * The empty rule below is kept solely to document this intent and to prevent
 * "undeclared class" questions during code review.
 */
.pdf-linearize {}

/*
 * .pdf-force-h is applied by RST authors to figure directives that must stay
 * exactly at their declaration point in the PDF (strict LaTeX [H] placement).
 *
 * The docbuild-core --latex-patches pipeline detects this class on the Sphinx
 * doctree and emits the figure with \begin{figure}[H] in LaTeX output.
 *
 * In HTML this class is intentionally inert: no visual rule is defined.
 * The empty rule below is kept solely to document this intent and to prevent
 * "undeclared class" questions during code review.
 */
.pdf-force-h {}

/*
 * .pdf-force-htbp is applied by RST authors to figure directives that may
 * float in the PDF (flexible LaTeX [htbp] placement). It is the symmetric
 * counterpart of .pdf-force-h, mainly useful together with the --force-h CLI
 * option (which switches the global default to strict [H]) to exempt one
 * specific figure and let it float again.
 *
 * The docbuild-core pipeline detects this class on the Sphinx doctree and
 * emits the figure with \begin{figure}[htbp] in LaTeX output, regardless of
 * the active global figure placement policy.
 *
 * In HTML this class is intentionally inert: no visual rule is defined.
 * The empty rule below is kept solely to document this intent and to prevent
 * "undeclared class" questions during code review.
 */
.pdf-force-htbp {}

/*
 * .pdf-landscape is applied by RST authors to table directives that must be
 * rotated to landscape-oriented pages in PDF output (wide tables, e.g. only
 * 2 columns but very long content).
 *
 * The docbuild-core pipeline detects this class on the Sphinx doctree and
 * wraps the table with \begin{landscape}/\end{landscape} in LaTeX output.
 * The same rotation also applies automatically to tables whose content is
 * wide enough when --auto-landscape is enabled.
 *
 * In HTML this class is intentionally inert: no visual rule is defined.
 * The empty rule below is kept solely to document this intent and to prevent
 * "undeclared class" questions during code review.
 */
.pdf-landscape {}

/*
 * .pdf-portrait opts a table out of the --auto-landscape heuristic, even
 * though its measured content width would otherwise trigger automatic
 * landscape rotation. Has no effect when --auto-landscape is not enabled.
 *
 * In HTML this class is intentionally inert: no visual rule is defined.
 * The empty rule below is kept solely to document this intent and to prevent
 * "undeclared class" questions during code review.
 */
.pdf-portrait {}