/* =====================================================================
   custom/css/main.css
   ---------------------------------------------------------------------
   Loaded via @import from the top of layout-custom-style.css, which is
   stylesheet #13 on every topic page. Two consequences of that position:

     - We land AFTER theme1.css (#4), so plain rules already beat it at
       equal specificity. theme1.css hides the masthead with
       `.site-header{display:none}` (no !important), so no !important is
       needed to bring it back. Where theme1.css wins it is on
       SPECIFICITY, not order -- those rules are matched selector-for-
       selector below rather than reached for with !important.
     - We land BEFORE layout-custom-style.css's own rules and the
       appended zoomin-look.css block, in the same file. Anything those
       also set needs !important here. Each one is marked.

   Contents:
     0.  Open Sans, self-hosted (overrides the Google Fonts @import)
     1.  Masthead shell
     2.  Logo in the masthead
     3.  #navbar -- container for search + switcher
     3b. The navy sub-header (injected by custom/js/main.js)
     3c. Masthead links (injected by custom/js/main.js)
     4.  Language switcher
     5.  One logo only -- hide the sidebar copy
     6.  Navbar search (injected by custom/js/main.js, into 3b)
     7.  Left nav: centre the expander chevrons
     8.  Hide the feedback panel
     9.  Hide the sidebar search
     9b. Let the sidebar follow the page direction
     9c. Right-to-left: mirror the Paligo layout
     10. Right panel ("ON THIS TOPIC") position + centre-column bleed
     11. Narrow screens
     11b. The topic title
     12. Notices above the topic title (injected by custom/js/main.js)
     13. Document toolbar under the title (injected by custom/js/main.js)

   12 and 13 sit after "Narrow screens" rather than in numeric place
   because they carry their own responsive rules; keeping each block
   whole beats keeping the media queries together.
   ===================================================================== */

/* =====================================================================
   0. OPEN SANS, SELF-HOSTED
   ---------------------------------------------------------------------
   layout-custom-style.css opens with

       @import url("https://fonts.googleapis.com/css2?family=Open+Sans...");
       @import url(".../custom/css/main.css");          <- this file

   so Google's @font-face rules land immediately BEFORE ours. Same family,
   same weights, same unicode-ranges, later in the cascade -- so these win
   and the browser resolves the glyphs against our own woff2 instead of
   going out to fonts.gstatic.com.

   Three reasons, in the order they matter:

     1. A third-party font CDN on pages that carry a consent banner is a
        question we should not have to answer. Serving the files ourselves
        removes it.
     2. gstatic is a cross-origin connection on top of an @import chain
        that is already two levels deep -- DNS, TLS and a fetch before a
        single glyph is drawn.
     3. Same origin means these files can be PRELOADED from the topic
        page's <head>. sourceTweaks/chromePreload.js does exactly that,
        picking the one subset the page's language needs.

   The files are the same Google Open Sans woff2 subsets digest-generator
   already ships to /custom/fonts/ for the generated pages (see its
   lib/customAssets.js), and the unicode-ranges below are copied from that
   module's src/templates/site.css. ADDING A SCRIPT MEANS A FILE THERE AND
   A RULE IN BOTH PLACES -- there is no shared stylesheet, by the same
   convention that keeps shared/ unimported across this repo.

   The @import to googleapis still fires; killing that request means
   editing the Paligo layout asset, which this file cannot reach.
   ===================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/custom/fonts/opensans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/custom/fonts/opensans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/custom/fonts/opensans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/custom/fonts/opensans-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  /* 100px, which is what the front page's .topbar measures. The bar used
     to be 64px; the two are meant to be indistinguishable now. */
  --ms-navbar-h:        100px;
  --ms-navbar-h-sm:     72px;
  /* The navy band under the masthead (section 3b). Both bars are fixed,
     so the body and the sidebar have to be pushed down by the SUM --
     that is --ms-chrome-h, and it is the only place the two are added
     together. Change a bar's height and the offsets follow.

     100px, matching the reference portal's #zDocsSubHeader exactly
     (measured 1440x900: y=100, h=100). It was 64px, which made the band
     visibly shallower than the portal's and left no room for the 50px
     search control the front page already uses. */
  --ms-subheader-h:     100px;
  --ms-subheader-h-sm:  72px;
  /* A calc over the other two, not a third number: the narrow-screen
     media query redefines --ms-navbar-h and --ms-subheader-h at :root,
     and custom properties resolve where they are USED, so this follows
     on its own. A hand-written --ms-chrome-h-sm would be a fourth
     number to keep in step and would drift the first time one changed. */
  --ms-chrome-h:        calc(var(--ms-navbar-h) + var(--ms-subheader-h));
  --ms-navbar-bg:       #FFFFFF;
  --ms-navbar-rule:     #D6D6D6;
  /* 221x50 -- the rendered size of /custom/img/milestone-logo.png on the
     front page. The file is 442x100 so it stays sharp on a 2x display. */
  --ms-logo-width:      221px;
  --ms-logo-height:     50px;
  --ms-logo-width-sm:   160px;
  --ms-navy:            #023853;
  --ms-blue:            #0099DA;
  --ms-blue-dark:       #007AAD;
  --ms-blue-tint:       #E0F4FC;
  /* The reference portal's one dropdown-row hover, measured on both its
     language menu and its Save-PDF menu: rgb(240, 246, 255).
     --ms-blue-tint is a stronger cyan, kept for buttons and chips, which
     are meant to read as pressed. */
  --ms-hover:           #F0F6FF;
  /* The reference portal's grey chip, as on its "This publication" search scope. */
  --ms-chip-bg:         #EEEEEE;
  --ms-text:            #1B2A3B;
  --ms-muted:           #5A6672;
  --ms-font:            'Open Sans', 'Inter', sans-serif;

  /* Notices above the topic title (section 12). A pale blue callout
     rather than amber or red: "machine translation" and "not in your
     language" are both caveats about the page, not errors in it.
     --ms-notice-text is about 8:1 on --ms-notice-tint. */
  --ms-notice-accent:   #1A9BD7;
  --ms-notice-tint:     #F2F7FA;
  --ms-notice-text:     #3D4F5C;
  --ms-notice-link:     #0B6FA0;

  /* Breadcrumb toolbar height. MUST match --zdc-bar-h in zoomin-look.css
     (currently 64px) -- section 10 stacks the right panel below both
     bars, so if they drift the panel misaligns. */
  --ms-bar-h:           64px;

  /* Right panel width. MUST match --zdc-sec-width (currently 250px). */
  --ms-sec-width:       250px;

  /* The fixed desktop table-of-contents rail, as set by zoomin-look.css. */
  --ms-sidebar-width:   380px;

  /* The reference portal's input group -- input + search-tips + submit --
     measures 538px. We have no search-tips box, so 490px puts our input
     and submit at the same width its input and submit occupy. */
  --ms-search-width:    490px;

  /* corporate-logo.png is pure-white artwork (verified: every opaque
     pixel is #FFFFFF) meant for Paligo's navy rail. On a white masthead
     it would vanish, so it is recoloured to --ms-blue with a filter.
     Same chain zoomin-look.css already uses for the sidebar logo.
     If you ever ship a blue-on-transparent PNG/SVG, delete this and the
     `filter` line that uses it -- a real asset always beats a filter. */
  --ms-logo-to-blue: brightness(0) saturate(100%) invert(45%) sepia(93%)
                     saturate(1852%) hue-rotate(168deg) brightness(97%)
                     contrast(101%);
}

/* =====================================================================
   1. MASTHEAD SHELL
   ---------------------------------------------------------------------
   theme1.css hides .site-header and, because it is hidden, never
   reserves space for it: there is no body{padding-top}. The navbar is
   .navbar-fixed-top (position:fixed; z-index:1030) and the sidebar is
   position:fixed;top:0;z-index:1000. So bringing the bar back means
   also pushing the body and the sidebar down by its height, or the bar
   floats over both.
   ===================================================================== */

header.site-header {
  display: block;
}

.site-header-navbar.navbar {
  /* z-index above .site-sidebar's 1000 so the bar wins over the rail */
  z-index: 1040;
  min-height: var(--ms-navbar-h);
  height: var(--ms-navbar-h);
  margin-bottom: 0;
  background-color: var(--ms-navbar-bg);
  /* No rule under it. The front page's .topbar has none -- the navy band
     below provides all the separation the bar needs, and a grey line on
     top of it read as a seam the front page does not have. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* The front page is Open Sans; this bar was inheriting Paligo's Roboto,
     which is the difference you see before you can name it. */
  font-family: var(--ms-font);
}

/* Logo left, links + picker right, all vertically centred. Padding matched
   to the front page's .topbar: 16px 24px. */
.site-header-navbar .navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--ms-navbar-h);
  padding: 16px 24px;
}

/* Reserve BOTH bars' height. Paligo never set this, so no !important. */
body {
  padding-top: var(--ms-chrome-h);
}

/* SAME OFFSET, FOR ANCHOR JUMPS.
   content-theme2.css sets `html{scroll-padding-top:80px}` -- written for
   Paligo's own chrome, and 120px short of ours. Land on a #section-id
   and the browser stops with the heading at y=80, i.e. behind the navy
   band, so the reader sees the middle of the section and no title.

   We win on order, not specificity: both rules are `html` (0,0,1), and
   layout-custom-style.css @imports this file after content-theme2.css.

   calc over --ms-chrome-h, not a literal, so the 767px media query that
   shrinks both bars carries the anchor offset with it -- same reason
   section 1 never hard-codes 200px. The +24px is breathing room, so the
   heading clears the band instead of touching it. */
html {
  scroll-padding-top: calc(var(--ms-chrome-h) + 24px);
}

/* The rail is position:fixed;top:0 in theme1.css -- start it below the
   bar instead. !important: zoomin-look.css restyles aside.site-sidebar
   after us, and Paligo also sets rail geometry from theme1-colors.css. */
aside.site-sidebar {
  top: var(--ms-chrome-h) !important;
}

/* =====================================================================
   2. LOGO IN THE MASTHEAD
   ---------------------------------------------------------------------
   The <img> is 4007x714 and NOTHING in Paligo's CSS sizes it in this
   context (theme1.css only has `.site-sidebar .logo{max-width:160px}`,
   which does not match here). Unsized it renders at full intrinsic
   width as invisible white artwork across the page.

   NOTE: both the masthead <img> and the sidebar <img> carry
   id="logotype-pageheader" -- a duplicate ID in Paligo's own markup.
   Every rule here stays scoped to its ancestor for that reason; a bare
   #logotype-pageheader selector would hit an arbitrary one of the two.
   ===================================================================== */

.site-header-navbar .navbar-header {
  display: flex;
  align-items: center;
  float: none;
  margin: 0;
}

/* Kill the .pull-left float so flex centring applies. */
.site-header-navbar #logotype-container.pull-left {
  float: none;
  margin: 0;
  display: flex;
  align-items: center;
}

/* .navbar-brand is height:50px;padding:14px 15px in theme1.css. */
.site-header-navbar .navbar-brand {
  display: flex;
  align-items: center;
  float: none;
  height: auto;
  padding: 0;
  margin: 0;
}

/* THE REAL LOGO, NOT A RECOLOURED ONE.
   custom/js/main.js swaps the src to /custom/img/milestone-logo.png -- the
   same asset the front page uses -- and adds .ms-logo-swapped. The filter
   chain below is kept only for the moment before that runs, and for a page
   where this script never does: Paligo's own artwork is white and would be
   invisible on a white bar. A real asset always beats a filter.
   Hidden until swapped, so no recoloured logo flashes first; it fades in
   with the rest of the bar. */
.site-header-navbar #logotype-pageheader.logo {
  filter: var(--ms-logo-to-blue);
  width: var(--ms-logo-width);
  height: auto;
  max-width: none;
  display: block;
  padding: 0;
  margin: 0;
}

.site-header-navbar #logotype-pageheader.logo.ms-logo-swapped {
  filter: none;
  width: var(--ms-logo-width);
  height: var(--ms-logo-height);
}

/* --- WANT A BLUE BAR WITH A WHITE LOGO INSTEAD? ----------------------
   Set --ms-navbar-bg to #023853 in :root and delete the `filter` line
   above. You will also want --ms-navy -> #FFFFFF for the switcher and
   search text. Nothing else needs to move.
   ------------------------------------------------------------------- */

/* Hamburger bars are white artwork too -- invisible on a white bar.
   Only shows under 768px; Bootstrap hides .navbar-toggle above that. */
.site-header-navbar .navbar-toggle {
  float: none;
  margin: 0 12px 0 0;
  border-color: var(--ms-navbar-rule);
}

.site-header-navbar .navbar-toggle .icon-bar {
  background-color: var(--ms-navy);
}

/* =====================================================================
   3. #navbar -- CONTAINER FOR SEARCH + SWITCHER
   ---------------------------------------------------------------------
   #navbar is .navbar-collapse.collapse. Bootstrap 3 gives .collapse
   display:none under 768px and .navbar-collapse.collapse
   display:block!important above it, plus a 200px max-height and a
   padding/border/box-shadow intended for the stacked mobile panel.
   We want an inline row at every width, so force flex and strip the
   panel chrome. !important beats Bootstrap's own !important (our
   #navbar is also higher specificity, but be explicit).

   overflow:visible matters: the search results dropdown and the
   language menu both escape this box.
   ===================================================================== */

.site-header-navbar #navbar {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  /* 0.5rem, the front page's .topbar-nav gap. */
  gap: 8px;
  flex: 1 1 auto;
  width: auto;
  max-height: none !important;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: visible;
  box-shadow: none;
  background: none;
}

/* =====================================================================
   3b. THE NAVY SUB-HEADER
   ---------------------------------------------------------------------
   Injected by custom/js/main.js as <div class="ms-subheader">, straight
   after header.site-header. It holds the search box and nothing else,
   which is what the reference portal's #023852 band does and what our
   own generated landing pages already did; topic pages had the search
   crammed into the white bar beside the language picker.

   Fixed, directly under the masthead, because the masthead is
   .navbar-fixed-top and a band in normal flow underneath it would scroll
   away from the bar it belongs to. z-index just under the masthead's
   1040, so the search results panel can never cover the logo.

   100px, the same as the reference portal's #zDocsSubHeader, so the two
   bands read as the same band.

   WHAT THAT COSTS, because it is not free. The portal's two bands are
   position:relative and scroll away; ours are fixed, so 100+100 is 200px
   of PERMANENT chrome -- a fifth of a 900px laptop viewport, on a page
   meant for reading. The band was 64px for exactly that reason. Matching
   the portal was the explicit ask (2026-09-06), so the height wins and
   the cost is recorded here rather than argued away.

   If the 200px ever needs winning back, the fix is to make these two
   scroll with the page as the portal's do, not to shave the band again:
   the offsets all come off --ms-chrome-h, so unfixing them is a local
   change, whereas a shallower band puts us back out of step.

   .ms-search-host is what section 6 styles the form through: main.js
   puts it on whichever container it appended the form to, so the same
   27 rules apply here and in the masthead fallback.
   ===================================================================== */

.ms-subheader {
  position: fixed;
  top: var(--ms-navbar-h);
  left: 0;
  right: 0;
  z-index: 1035;
  height: var(--ms-subheader-h);
  background-color: var(--ms-navy);
}

/* Right-aligned, like the reference portal: on a topic page the band's
   left half is empty. overflow:visible so the results panel escapes. */
.ms-subheader-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding: 0 20px;
  overflow: visible;
}

/* The field used to drop its border to transparent here, on the theory
   that a grey hairline is invisible on navy. It is not: the portal keeps
   #D6D6D6 on its own navy band and so does our front page, and with the
   input and the submit button now joined into one pill (section 6) the
   hairline is what draws the field's three open edges. Section 6 styles
   it and nothing overrides it. */

/* =====================================================================
   3c. MASTHEAD LINKS
   ---------------------------------------------------------------------
  Publications, injected by main.js to the left of the language picker.
  Matched to the generated pages' top bar: 14px
   bold blue, and an INVERTING hover -- white on --ms-blue -- which is
   what the reference portal does with its own top-bar links.
   ===================================================================== */

.site-header-navbar .ms-masthead-links {
  float: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.site-header-navbar .ms-masthead-links > li {
  list-style: none;
}

.site-header-navbar .ms-masthead-links > li > a {
  display: block;
  padding: 8px 12px;
  color: var(--ms-blue);
  font-family: var(--ms-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 4px;
  transition: all .2s;
}

.site-header-navbar .ms-masthead-links > li > a:hover,
.site-header-navbar .ms-masthead-links > li > a:focus {
  color: #FFFFFF;
  background-color: var(--ms-blue);
  text-decoration: none;
}


/* =====================================================================
   3d. THE TOP BAR'S LINKS AND PICKER
   ---------------------------------------------------------------------
   PORTED FROM digest-generator/src/templates/site.css, deliberately and
   with the same class names. custom/js/main.js gives #navbar the class
   .topbar-nav and appends bare <a> children plus a
   <details class="langpicker">, which is exactly the structure the
   generated pages render -- so these selectors are the same selectors,
   and the two bars are one design rather than two that resemble each
   other.

   THE DUPLICATION IS REAL AND IS THE POINT OF THIS COMMENT. site.css is
   inlined into pages this repo generates; this file is a blob fetched by
   pages Paligo generates. There is no build step joining them and no way
   to share one file across both. If you change a value here, change it
   there. The measured source for every number is the table in
   docs/front-page-parity-plan.md.

   "> a" and not "a": the picker lives inside .topbar-nav, so a descendant
   selector also styles all twenty of its menu rows -- and since the hover
   below sets colour AND background while the picker's sets only
   background, it would paint every row white on pale blue.
   ===================================================================== */

.site-header-navbar .topbar-nav > a {
  padding: 12px;
  color: var(--ms-blue);
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 1px;
  transition: all .2s;
}

.site-header-navbar .topbar-nav > a:hover,
.site-header-navbar .topbar-nav > a:focus {
  color: #FFFFFF;
  background-color: var(--ms-blue);
  text-decoration: none;
}

/* inline-block with the link's own line-height: left inline, the arrow
   glyph comes from a fallback font with a taller box and made the link
   45px against Publications' 43px. */
.site-header-navbar .topbar-nav > a[data-external]::after {
  content: "\002197 ";
  display: inline-block;
  margin-left: 4px;
  font-size: .75em;
  font-weight: 400;
  line-height: 19px;
  vertical-align: top;
}

/* --- the language picker, a <details> exactly as on the front page --- */

.site-header-navbar .langpicker {
  position: relative;
}

.site-header-navbar .langpicker > summary {
  display: flex;
  align-items: center;
  gap: 4px;                     /* the portal's own margin-right on the globe */
  padding: 12px;
  color: var(--ms-blue);
  background: #FFFFFF;
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  white-space: nowrap;
  border-radius: 1px;
  cursor: pointer;
  list-style: none;
  transition: all .2s;
}

.site-header-navbar .langpicker > summary::-webkit-details-marker {
  display: none;
}

/* 15x15, the size the portal renders its globe at. No chevron: its
   language button is globe + name and nothing else. */
.site-header-navbar .langpicker > summary .icon {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
  stroke: none;
}

.site-header-navbar .langpicker > summary:hover,
.site-header-navbar .langpicker[open] > summary {
  color: #FFFFFF;
  background: var(--ms-blue);
}

/* An EXPLICIT width, not shrink-to-fit: this box is absolutely positioned
   inside .langpicker, whose own width is just the button, so shrink-to-fit
   caps it at ~140px and the column wrap below can never start a second
   column. 3 x 140px = 420px, which is what the portal's menu measures. */
.site-header-navbar .langpicker-menu {
  position: absolute;
  inset-inline-end: 0;          /* right in LTR, left in RTL: opens back across the page */
  top: 100%;
  z-index: 1050;
  width: 420px;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

/* A DEFINITE height, not max-height: a wrapping column flex container needs
   a resolved height to know where to break. 7 rows x 45px = 315px, and
   twenty languages over seven rows is three 140px columns. */
.site-header-navbar .langpicker-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 315px;
  align-content: flex-start;
}

/* flex: none is what makes the wrap happen -- a flex item shrinks before
   its container wraps, so without it twenty 45px rows quietly squeeze
   themselves into the 315px height and the menu stays one column. */
.site-header-navbar .langpicker-list a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex: none;
  width: 140px;
  height: 45px;
  padding: 10px;
  padding-inline-start: 20px;
  color: #000000;
  font-family: var(--ms-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.site-header-navbar .langpicker-list a:hover,
.site-header-navbar .langpicker-list a:focus {
  background: var(--ms-hover);
  color: #000000;
  text-decoration: none;
}

/* The current language is ticked, which is what the portal reserves its
   45px of left padding for. */
.site-header-navbar .langpicker-list a.current {
  font-weight: 700;
  padding-inline-start: 0;
}

.site-header-navbar .langpicker-list a.current::before {
  content: "\002713 ";
  width: 20px;
  flex: none;
  text-align: center;
  color: var(--ms-blue);
}

.site-header-navbar .langpicker-list a[data-external]::after {
  content: "\002197 ";
  margin-inline-start: auto;
  font-size: .75em;
  color: var(--ms-muted);
}

/* =====================================================================
   3e. THE FADE
   ---------------------------------------------------------------------
   Every label in this bar and in the navy band comes from
   /site-chrome.json, one request after first paint. Rather than render
   English and visibly swap it, the parts that depend on that file start
   invisible and fade in together once it resolves -- 150ms, which reads
   as the page settling rather than as something appearing.

   The LOGO and the bar itself are not faded: they need no data and are
   there immediately, so the bar never collapses or jumps. Only the
   right-hand items and the search box wait.

   The logo WAS in the faded set until 2026-09-22, contradicting the
   paragraph above. It made sense when custom/js/main.js swapped the src
   after load -- fading hid the swap. The publish pipeline now emits the
   right logo (sourceTweaks `masthead`), so the element is correct at
   first paint, and fading it would have been strictly worse than before:
   the reader would see the correct logo, then main.js would run and hide
   it, then it would fade back. Removed.

   The rule is "ready shows", not "pending hides". It WAS "pending
   hides" until 2026-10-01, and that flashed English on every translated
   page: main.js is injected by a script at the end of <body> and sets
   its class at DOM-ready, by which time the browser has already painted
   Paligo's English. This file is @imported from a <head> stylesheet, so
   a rule here is in force from the first paint; a class set by main.js
   never can be.

   .ms-chrome-ready is set by custom/js/main.js once /site-chrome.json
   has resolved, whether it succeeded or not. If the script never runs at
   all, the ms-chrome-failsafe animation shows everything after 3s, in
   Paligo's English -- late text beats no text. Once .ms-chrome-ready is
   set the selector stops matching, the animation goes with it, and the
   transition below does the fade.

   The BREADCRUMB joined the set on 2026-10-01. main.js inserts a Home
   crumb at DOM-ready (initBreadcrumbHome), and its text is nav.home, so
   it read English "Home" until the strings arrived -- "Home" ->
   "Startseite" on every German page. Only that crumb needs the strings,
   but the whole list fades: Bootstrap draws the separators as
   li + li::before, so hiding the Home crumb alone would leave a stray
   "/" in front of the publication, and the other crumbs would still jump
   right when it was inserted.
   ===================================================================== */

html:not(.ms-chrome-ready) .site-header-navbar #navbar,
html:not(.ms-chrome-ready) .ms-subheader-inner,
html:not(.ms-chrome-ready) aside.site-sidebar ul.nav-site-sidebar::before,
html:not(.ms-chrome-ready) aside.section-nav-container::before,
html:not(.ms-chrome-ready) ul.breadcrumb {
  opacity: 0;
  animation: ms-chrome-failsafe 0s 3s forwards;
}

@keyframes ms-chrome-failsafe {
  to { opacity: 1; }
}

.site-header-navbar #navbar,
.ms-subheader-inner,
aside.site-sidebar ul.nav-site-sidebar::before,
aside.section-nav-container::before,
ul.breadcrumb {
  transition: opacity .15s ease-in;
}

/* A reader who has asked for less motion gets the text without the fade --
   but still not the English it replaces. This used to set opacity: 1 while
   pending, which showed exactly that swap. */
@media (prefers-reduced-motion: reduce) {
  .site-header-navbar #navbar,
  .ms-subheader-inner,
  aside.site-sidebar ul.nav-site-sidebar::before,
  aside.section-nav-container::before,
  ul.breadcrumb {
    transition: none;
  }
}

/* "TABLE OF CONTENTS" / "ON THIS TOPIC": Paligo generates both as ::before
   content, in English. main.js puts the translated strings (siteContent.json
   nav.tableOfContents / nav.onThisTopic) in these two custom properties and
   sets .ms-column-headings; without it Paligo's English stands. */
/* PALIGO-OVERRIDE layout-custom-style.css: aside.site-sidebar ul.nav-site-sidebar::before { content: "TABLE OF CONTENTS" } */
.ms-column-headings aside.site-sidebar ul.nav-site-sidebar::before {
  content: var(--ms-heading-toc);
}

/* PALIGO-OVERRIDE layout-custom-style.css: aside.section-nav-container::before { content: "ON THIS TOPIC" } */
.ms-column-headings aside.section-nav-container::before {
  content: var(--ms-heading-on-this-topic);
}

/* =====================================================================
   4. LANGUAGE SWITCHER
   ---------------------------------------------------------------------
   Injected into .site-header-navbar #navbar by custom/js/main.js as
   <ul class="nav navbar-nav navbar-right language-switcher">. Bootstrap
   3 supplies the open/close behaviour (bootstrap.min.js is already on
   every topic page); these rules only theme it.
   ===================================================================== */

.site-header-navbar .language-switcher {
  float: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.site-header-navbar .language-switcher > .dropdown {
  position: relative;
  float: none;
  list-style: none;
}

.site-header-navbar .language-switcher > .dropdown > .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--ms-navy);
  background: none;
  font-family: var(--ms-font);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.site-header-navbar .language-switcher > .dropdown > .dropdown-toggle:hover,
.site-header-navbar .language-switcher > .dropdown > .dropdown-toggle:focus,
.site-header-navbar .language-switcher > .dropdown.open > .dropdown-toggle {
  color: var(--ms-blue);
  background-color: var(--ms-blue-tint);
  text-decoration: none;
}

/* Bootstrap toggles this to display:block when .dropdown gets .open. */
.site-header-navbar .language-switcher .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 4px 0;
  background-color: #FFFFFF;
  border: 1px solid #DDE1E7;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(27, 42, 59, .15);
  list-style: none;
  z-index: 1050;
}

.site-header-navbar .language-switcher .dropdown-menu > li > a {
  display: block;
  padding: 8px 16px;
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

/* Background only, and the portal's own pale blue. Recolouring the text
   as well made a plain menu row read like a button. */
.site-header-navbar .language-switcher .dropdown-menu > li > a:hover,
.site-header-navbar .language-switcher .dropdown-menu > li > a:focus {
  background-color: var(--ms-hover);
  color: var(--ms-text);
}

/* The site-language picker marks the reader's current preference with
   li.active (main.js). Bootstrap 3's own .dropdown-menu>.active>a is
   white-on-blue, which is too loud for "this is what you already
   picked" -- and the menu includes an "Automatic" entry that is active
   by default, so it would be shouting on every first visit. */
.site-header-navbar .language-switcher .dropdown-menu > li.active > a,
.site-header-navbar .language-switcher .dropdown-menu > li.active > a:hover,
.site-header-navbar .language-switcher .dropdown-menu > li.active > a:focus {
  background-color: transparent;
  color: var(--ms-blue-dark);
  font-weight: 600;
}

/* =====================================================================
   5. ONE LOGO ONLY -- HIDE THE SIDEBAR COPY
   ---------------------------------------------------------------------
   zoomin-look.css put a blue logo in the sidebar masthead because the
   top bar was hidden. The bar is back and owns the branding now.

   Only the <a> wrapper is hidden, not .site-sidebar-header itself: that
   header also contains .navbar-toggle, which is the sidebar's open/close
   control under 768px. Hiding the whole band would strip mobile nav.

   !important: zoomin-look.css sets both of these after us.
   ===================================================================== */

aside.site-sidebar .site-sidebar-header > a {
  display: none !important;
}

aside.site-sidebar .site-sidebar-header {
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 20px !important;
}

/* With the logo gone the band is just a hamburger, which is hidden above
   768px -- collapse the leftover empty strip on desktop. */
@media (min-width: 768px) {
  aside.site-sidebar .site-sidebar-header {
    padding: 0 !important;
    border-bottom: 0 !important;
  }
}

/* =====================================================================
   6. NAVBAR SEARCH
   ---------------------------------------------------------------------
   Injected into #navbar by initNavbarSearch() in custom/js/main.js:

     form.navbar-search
       input.navbar-search-input
       button.navbar-search-button
       div.navbar-search-panel          (results dropdown)
         div.navbar-search-status       (loading / error / no results)
         a.navbar-search-result         (one per hit)
           span.navbar-search-result-title
           span.navbar-search-result-snippet
           span.navbar-search-result-meta
         a.navbar-search-all            ("See all N results")

   SHAPE: one joined pill, which is what both the reference portal and our
   own generated pages already draw. Measured on the portal at 1440x900
   and matched number for number against .hero-search in the generated
   pages' site.css, because those two agree and this was the odd one out:

     50px tall, not 36            (portal input 438x50, submit 50x50)
     no gap between the two       (they were 6px apart)
     input: 16px/500, #000, 0 14px padding, 1px #D6D6D6 with NO right
            edge, rounded 4px on its left corners only
     submit: a 50x50 blue square, rounded 4px on its RIGHT corners, with
            a magnifier glyph instead of the word Search

   The seam is the point: border-right:0 on the input plus the two
   half-rounded corners make the pair read as one control rather than as
   a field with a button next to it.

   The panel is absolutely positioned inside the form, so .navbar-search
   needs position:relative and every ancestor up to .navbar-container
   needs overflow:visible (handled in section 3).
   ===================================================================== */

.ms-search-host .navbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 var(--ms-search-width);
  min-width: 0;   /* let it shrink inside the flex row instead of pushing */
  margin: 0;
}

.ms-search-host .navbar-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  color: #000000;
  background-color: #FFFFFF;
  border: 1px solid var(--ms-navbar-rule);
  /* Logical sides, so a right-to-left page rounds the outer corners and seams the inner edge. */
  border-inline-end: 0;              /* the submit button closes this edge */
  border-radius: 0;
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  box-shadow: none;
}

.ms-search-host .navbar-search-input::placeholder {
  color: var(--ms-muted);
  font-weight: 400;
}

/* TCOM-1606: the "This publication x" chip at the start of the box on a topic page. It takes over
   the input's outer edge and rounded corners, so the chip, field and button stay one pill. */
.ms-search-host .navbar-search-scope {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 50px;
  padding-inline-start: 8px;
  background-color: #FFFFFF;
  border: 1px solid var(--ms-navbar-rule);
  border-inline-end: 0;
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}

.ms-search-host .navbar-search-scope + .navbar-search-input {
  border-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.ms-search-host .navbar-search-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 6px;
  padding-inline: 20px 8px;
  color: var(--ms-text);
  background-color: var(--ms-chip-bg);
  border-radius: 4px;
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}

.ms-search-host .navbar-search-scope-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--ms-text);
  background: none;
  border: 0;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ms-search-host .navbar-search-scope-remove:hover {
  background-color: var(--ms-navbar-rule);
}

.ms-search-host .navbar-search-scope-remove:focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 0;
}

/* An untranslated (English) placeholder on a right-to-left page: kept in reading order, so its
   trailing dots stay at the end, and still aligned to the right. */
[dir="rtl"] .ms-search-host .navbar-search-input::placeholder {
  unicode-bidi: plaintext;
  text-align: right;
}

/* An INSET outline, not a border colour and a spread shadow. The old
   focus style recoloured the border and painted a 3px halo, both of
   which broke the seam -- the halo drew down the edge the button is
   meant to close. Drawn inside the box, the ring cannot change the
   control's size or leak into the joint. */
.ms-search-host .navbar-search-input:focus {
  outline: 2px solid var(--ms-blue);
  outline-offset: -2px;
}

/* Kill the WebKit search decorations so the field matches the /search
   page's plain box. */
.ms-search-host .navbar-search-input::-webkit-search-decoration,
.ms-search-host .navbar-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* A square, not a text button: the portal's submit is a 50x50 blue block
   with a magnifier, and so is the generated pages'. main.js puts the
   localised label in a .visually-hidden span inside it, so the button
   still has an accessible name in the page's own language. */
.ms-search-host .navbar-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #FFFFFF;
  background-color: var(--ms-blue);
  border: 0;
  border-radius: 0;
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  cursor: pointer;
}

.ms-search-host .navbar-search-button:hover,
.ms-search-host .navbar-search-button:focus {
  background-color: var(--ms-blue-dark);
  color: #FFFFFF;
}

.ms-search-host .navbar-search-button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

/* Stroked, like every other icon main.js injects. */
.ms-search-host .navbar-search-button .icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* main.js injects a .visually-hidden span for the button's label, and
   Paligo's stylesheets have no such class. */
.ms-search-host .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- results dropdown ------------------------------------------------ */
/* main.js toggles .is-open on the form. */

.ms-search-host .navbar-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  /* Edge to edge with the search box above it, chip and button included. */
  right: 0;
  left: 0;
  max-height: 70vh;
  overflow-y: auto;
  padding: 4px 0;
  background-color: #FFFFFF;
  border: 1px solid #DDE1E7;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(27, 42, 59, .18);
  z-index: 1060;   /* above the language menu's 1050 */
}

.ms-search-host .navbar-search.is-open .navbar-search-panel {
  display: block;
}

.ms-search-host .navbar-search-status {
  padding: 12px 16px;
  color: var(--ms-muted);
  font-family: var(--ms-font);
  font-size: 14px;
}

.ms-search-host .navbar-search-result {
  display: block;
  padding: 10px 16px;
  border-bottom: 1px solid #EEF1F4;
  color: var(--ms-text);
  font-family: var(--ms-font);
  text-decoration: none;
}

.ms-search-host .navbar-search-result:last-of-type {
  border-bottom: 0;
}

/* .is-active is set by main.js for arrow-key navigation, so keyboard and
   mouse highlighting look identical. */
.ms-search-host .navbar-search-result:hover,
.ms-search-host .navbar-search-result:focus,
.ms-search-host .navbar-search-result.is-active {
  background-color: var(--ms-blue-tint);
  text-decoration: none;
  outline: none;
}

.ms-search-host .navbar-search-result-title {
  display: block;
  color: var(--ms-blue-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.ms-search-host .navbar-search-result-snippet {
  display: block;
  margin-top: 2px;
  color: var(--ms-text);
  font-size: 13px;
  line-height: 1.4;
}

.ms-search-host .navbar-search-result-meta {
  display: block;
  margin-top: 3px;
  color: var(--ms-muted);
  font-size: 12px;
  line-height: 1.3;
}

/* The API returns <mark> inside titleHighlight. main.js escapes the
   response and re-allows only <mark>, so this is the one tag to theme. */
.ms-search-host .navbar-search-panel mark {
  background-color: #FFF3BF;
  color: inherit;
  padding: 0 1px;
}

.ms-search-host .navbar-search-all {
  display: block;
  padding: 10px 16px;
  border-top: 1px solid #DDE1E7;
  color: var(--ms-blue-dark);
  font-family: var(--ms-font);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.ms-search-host .navbar-search-all:hover,
.ms-search-host .navbar-search-all:focus {
  background-color: var(--ms-blue-tint);
  text-decoration: none;
}

/* =====================================================================
   7. LEFT NAV -- CENTRE THE EXPANDER CHEVRONS
   ---------------------------------------------------------------------
   theme1.css positions them from the TOP of the row:

     .toc .glyphicon              { position:absolute; top:0; right:8px;
                                    margin-top:4px; padding:6px }
     .toc>li>.topic-link>.glyphicon { margin-top:8px }

   The rows are `display:flex; align-items:center` with min-height 60px
   (zoomin-look.css), so a fixed 4-8px top offset sits noticeably high.
   Anchor to the middle instead.

   SPECIFICITY, not order, is the problem here: `.toc>li>.topic-link>
   .glyphicon` is (0,4,0), so our selectors are built to outrank it
   rather than using !important. First selector below is (0,3,2), second
   is (0,4,4) -- both win.
   ===================================================================== */

aside.site-sidebar ul.nav-site-sidebar .glyphicon,
aside.site-sidebar ul.nav-site-sidebar > li > a.topic-link > .glyphicon {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

/* =====================================================================
   7b. LEFT NAV -- INDENT LEVEL 4 AND DEEPER
   ---------------------------------------------------------------------
   layout-custom-style.css (the Paligo layout, not this repo) steps the
   rows 20px / 40px / 60px, but its last step is

     aside.site-sidebar ul.nav-site-sidebar ul ul > li > a.topic-link
       { padding-left: 60px }

   which matches level 3 AND everything below it, so level 4 sits flush
   with its parent. Continue the 20px step. Each selector adds a `ul`,
   so it outranks that rule on specificity whatever the load order.
   ===================================================================== */

aside.site-sidebar ul.nav-site-sidebar ul ul ul > li > a.topic-link {
  padding-left: 80px;
}

aside.site-sidebar ul.nav-site-sidebar ul ul ul ul > li > a.topic-link {
  padding-left: 100px;
}

aside.site-sidebar ul.nav-site-sidebar ul ul ul ul ul > li > a.topic-link {
  padding-left: 120px;
}

/* =====================================================================
   8. HIDE THE FEEDBACK PANEL
   ---------------------------------------------------------------------
   Markup is <div class="feedback-panel"> holding "Was this helpful?",
   the Yes/No .btn-group and a #email-feedback mailto block.

   !important: the Yes/No handlers reveal #email-feedback by setting an
   inline style. Hiding the container without !important still works
   today, but an inline display on the panel itself would beat a plain
   rule -- this is cheap insurance against that.
   ===================================================================== */

.feedback-panel {
  display: none !important;
}

/* =====================================================================
   9. HIDE THE SIDEBAR SEARCH
   ---------------------------------------------------------------------
   <form class="site-sidebar-search"> holding #search.search-field, the
   navy band under the rail masthead.

   !important: zoomin-look.css sets a background on this element after
   us, and would otherwise repaint a 0-height navy strip.

   TRADE-OFF, worth knowing: this was Paligo's fuse.js search, which is
   instant but scoped to the CURRENT PUBLICATION only. The navbar search
   in section 6 is site-wide via the Azure endpoint. You are giving up
   offline/instant in-publication search for cross-product reach. If you
   want both, delete this block -- nothing else depends on it.
   ===================================================================== */

aside.site-sidebar form.site-sidebar-search {
  display: none !important;
}

/* =====================================================================
   9b. LET THE SIDEBAR FOLLOW THE PAGE DIRECTION
   ---------------------------------------------------------------------
   Paligo hardcodes <div dir="ltr" class="sidebar">, which pins it
   left-to-right even on an RTL page. `inherit` beats the dir attribute's
   UA mapping, so the sidebar takes its direction from its parent.
   ===================================================================== */

article div.sidebar[dir="ltr"] {
  direction: inherit;
}

/* =====================================================================
   9c. RIGHT-TO-LEFT: MIRROR THE PALIGO LAYOUT (TCOM-1592/1570/1569/1568)
   ---------------------------------------------------------------------
   layout-custom-style.css (Paligo's, not this repo) and 7b above use
   physical left/right only, so Arabic, Hebrew and Persian pages kept
   left-hand indents, bars and icons. Each rule mirrors one of those.

   :dir(rtl), not [dir="rtl"] on an ancestor: it matches the element's own
   direction, so an English island in an RTL page (a EULA's appended
   original carries dir="ltr") keeps its left-to-right layout, and no
   left-to-right page can match at all.

   Every rule here is tagged PALIGO-OVERRIDE with the upstream rule it
   corrects. They belong in the Paligo layout itself, so the page arrives
   right; delete each one here once its fix ships from Paligo.
   ===================================================================== */

/* PALIGO-OVERRIDE layout-custom-style.css: --zdc-toc-row-pad: 20px 16px 20px 20px */
aside.site-sidebar ul.nav-site-sidebar > li > a.topic-link:dir(rtl) {
  padding: 20px 20px 20px 16px;
}

/* PALIGO-OVERRIDE layout-custom-style.css: --zdc-toc-sub-pad: 16px 16px 16px 40px */
aside.site-sidebar ul.nav-site-sidebar ul > li > a.topic-link:dir(rtl) {
  padding: 16px 40px 16px 16px;
}

/* PALIGO-OVERRIDE layout-custom-style.css: aside.site-sidebar ul.nav-site-sidebar ul ul > li > a.topic-link { padding-left: 60px } */
aside.site-sidebar ul.nav-site-sidebar ul ul > li > a.topic-link:dir(rtl) {
  padding-right: 60px;
}

/* Mirrors 7b above (ours, not Paligo's). */
aside.site-sidebar ul.nav-site-sidebar ul ul ul > li > a.topic-link:dir(rtl) {
  padding-right: 80px;
}

/* PALIGO-OVERRIDE layout-custom-style.css: .nav-site-sidebar ul ul ul ul a { padding-left: 80px !important }
   (!important only to cancel theirs). */
aside.site-sidebar ul.nav-site-sidebar ul ul ul ul > li > a.topic-link:dir(rtl) {
  padding-right: 100px;
  padding-left: 16px !important;
}

/* PALIGO-OVERRIDE layout-custom-style.css: .nav-site-sidebar ul ul ul ul a { padding-left: 80px !important } */
aside.site-sidebar ul.nav-site-sidebar ul ul ul ul ul > li > a.topic-link:dir(rtl) {
  padding-right: 120px;
  padding-left: 16px !important;
}

/* PALIGO-OVERRIDE theme1.css / content-theme2.css: .toc .glyphicon { right: 8px | 10px }; chevron points the reading way. */
aside.site-sidebar ul.nav-site-sidebar li > a.topic-link > .glyphicon:dir(rtl) {
  right: auto;
  left: 10px;
  transform: translateY(-50%) scaleX(-1);
}

/* PALIGO-OVERRIDE layout-custom-style.css: #topic-content .note, .tip, .caution, .warning, .important
   { border-left-width: var(--zdc-admon-bar); padding: 14px 16px 14px 48px; background-position: 12px 16px } */
#topic-content :is(.note, .tip, .caution, .warning, .important):dir(rtl) {
  border-left-width: 0;
  border-right-width: var(--zdc-admon-bar);
  border-right-style: solid;
  padding: 14px 48px 14px 16px;
  background-position: right 12px top 16px;
}

/* PALIGO-OVERRIDE layout-custom-style.css: #topic-content .note|.tip|.caution|.warning|.important { border-left-color: var(--zdc-*-accent) } */
#topic-content .note:dir(rtl) { border-right-color: var(--zdc-note-accent); }
#topic-content .tip:dir(rtl) { border-right-color: var(--zdc-tip-accent); }
#topic-content .caution:dir(rtl) { border-right-color: var(--zdc-caution-accent); }
#topic-content .warning:dir(rtl) { border-right-color: var(--zdc-warning-accent); }
#topic-content .important:dir(rtl) { border-right-color: var(--zdc-important-accent); }

/* PALIGO-OVERRIDE layout-custom-style.css: #topic-content table th { text-align: left };
   #topic-content .table > .title, #topic-content table caption { text-align: left } */
#topic-content table th:dir(rtl),
#topic-content :is(.table > .title, table caption):dir(rtl) {
  text-align: start;
}

/* PALIGO-OVERRIDE layout-custom-style.css: #topic-content ul, ol, .itemizedlist > ul, .orderedlist > ol,
   .procedure > ol { padding: 0 0 0 40px }; .procedure > ol, ol.procedure, .substeps > ol { padding-left: 40px }.
   Never the toolbar's menus (see 13). */
#topic-content :is(ul, ol):not(.dropdown-menu):dir(rtl) {
  padding-left: 0;
  padding-right: 40px;
}

/* SWAP THE TWO SIDE PANELS. The TOC rail belongs on the reading-start side (right) and
   "On this topic" on the left. Both are position:fixed on physical sides, so the page
   direction alone never moves them. html[dir="rtl"], not :dir(rtl): these are page chrome,
   positioned once per page, and an LTR island inside the article has no say over them.
   The gutter that clears the "On this topic" panel is mirrored in 10. */

/* PALIGO-OVERRIDE theme1.css: .site-sidebar { left: 0 }; layout-custom-style.css: aside.site-sidebar { border-right: 1px solid } */
html[dir="rtl"] aside.site-sidebar {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--zdc-toc-rule);
}

/* PALIGO-OVERRIDE theme1.css: .site-content { float: left; margin-left: 25% | 16.67% } (min-width: 768px);
   layout-custom-style.css: .site-content { margin-left: var(--zdc-toc-width) !important } (!important only to cancel theirs). */
@media (min-width: 768px) {
  html[dir="rtl"] .site-content {
    float: right;
    margin-left: 0 !important;
    margin-right: var(--zdc-toc-width) !important;
  }
}

/* PALIGO-OVERRIDE theme1.css: .page-toc .section-nav-container { right: 0; padding-left: 3px } */
html[dir="rtl"] .page-toc aside.section-nav-container {
  right: auto;
  left: 0;
  padding-left: 0;
  padding-right: 3px;
}

/* PALIGO-OVERRIDE layout-custom-style.css: aside.section-nav-container ul.section-nav a { padding: 8px 0 8px 10px } */
html[dir="rtl"] aside.section-nav-container ul.section-nav a {
  padding: 8px 10px 8px 0;
}

/* PALIGO-OVERRIDE layout-custom-style.css: aside.section-nav-container ul.section-nav ul.nav a { padding-left: 24px } */
html[dir="rtl"] aside.section-nav-container ul.section-nav ul.nav a {
  padding-left: 0;
  padding-right: 24px;
}

/* PALIGO-OVERRIDE layout-custom-style.css: ul.section-nav a::before and its li.active state { left: -4px }.
   The active selector is repeated so it outranks Paligo's body[class*="theme"] one. */
html[dir="rtl"] aside.section-nav-container ul.section-nav a::before,
html[dir="rtl"] body[class*="theme"] aside.section-nav-container ul.section-nav.nav li.active > a::before {
  left: auto;
  right: -4px;
}

/* BREADCRUMB SEPARATOR. --zdc-crumb-sep is a chevron drawn pointing right, which in RTL points
   back at the crumb it follows. Mirrored rather than given a second SVG, so the two cannot drift.
   Its margins are symmetric (0 8px), so nothing else needs swapping. */
ul.breadcrumb a,
ul.breadcrumb a:visited,
ul.breadcrumb a:hover,
ul.breadcrumb a:focus {
  color: #838486 !important;
}

/* PALIGO-OVERRIDE layout-custom-style.css: .site-content > .toolbar ul.breadcrumb > li + li::before { background-image: var(--zdc-crumb-sep) } */
html[dir="rtl"] .site-content > .toolbar ul.breadcrumb > li + li::before {
  transform: scaleX(-1);
}

/* =====================================================================
   10. RIGHT PANEL ("ON THIS TOPIC") + CENTRE-COLUMN BLEED
   ---------------------------------------------------------------------
   theme1.css: `.page-toc .section-nav-container{position:fixed;
   right:0; top:64px; bottom:0}`, shown only at min-width:992px.

   position:fixed is viewport-relative, so body{padding-top} from
   section 1 does NOT move it. With the masthead restored, top:64px puts
   the panel level with the bottom of the masthead -- i.e. straight over
   the breadcrumb toolbar. That is the overlap in the screenshot.

   Correct top is masthead + breadcrumb bar. zoomin-look.css keeps its
   own 24px top padding, which lands the heading about level with the
   topic title.

   The bleed is separate: `.site-content > .toolbar` is full-width with
   `padding: 0 32px`, so the breadcrumb runs under the fixed panel.
   Reserving the width on .site-content clears the toolbar, the article,
   the pager and the footer in one go, since the panel is out of flow.
   Scoped to min-width:992px to match the breakpoint that shows it.
   ===================================================================== */

.page-toc aside.section-nav-container {
  top: calc(var(--ms-chrome-h) + var(--ms-bar-h));
}

/* CONTENT WIDTH (TCOM-1508). layout-custom-style.css capped #topic-content at 847px and theme1's
   grid shrank the article to 66-83% of the column, leaving a wide gap before the right panel.
   The text now fills the column with the same 7% gutter on both sides.
   html:root outranks that file's :root, which is read after this one (it @imports us first). */
/* PALIGO-OVERRIDE layout-custom-style.css: :root { --zdc-content-width: 847px } */
html:root {
  --zdc-content-width: none;
}

/* CODE TEXT CONTRAST (TCOM-1579). Inline code, literals and file names were #838486 on the #F1F1F1
   chip: 3.3:1, under WCAG AA's 4.5:1 for normal text. --ms-muted on the same chip is 5.2:1. */
/* PALIGO-OVERRIDE layout-custom-style.css: :root { --zdc-code-text: #838486 } */
html:root {
  --zdc-code-text: var(--ms-muted);
}

/* Reading width: running text and code blocks stop at 90 characters; tables and images keep the full
   column. Capped per paragraph, not per list: Paligo wraps each list item's text in a <p>, and a step
   can hold a screenshot that must not shrink with it. Code is capped on .paligocode-wrapper (Paligo's
   jquery.paligocode.js wraps every <pre> in it, with the copy button): it keeps the text font, so
   90ch there equals the paragraphs' 90ch, where on the monospace <pre> it would come out narrower. */
#topic-content p:not(:is(td, th) p):not(:has(img, table, pre, svg)),
#topic-content .paligocode-wrapper:not(:is(td, th) *) {
  max-width: 90ch;
}

/* Boxes (admonitions, the translation notice) pin their END edge to the reading width instead of
   capping their own width. A max-width cap moved the edge with the box's indent (a tip in a list
   item ended 40px further out than a top-level note) and with its font (the 14px notice is a <p>,
   so its 90ch came out 100px short). A block's end edge is the column's end minus its end margin,
   whatever its start indent, so every box lands on the line where top-level text stops.
   The width is registered as a <length> so 90ch resolves once, at #topic-content's 16px, and
   inherits as px. Logical margin: in right-to-left the shared edge is the left one.
   Not inside table cells: 100cqi reads the whole column, not the cell, and would crush the box. */
@property --ms-reading-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

#topic-content {
  --ms-reading-width: 90ch;
  container-type: inline-size;
}

/* PALIGO-OVERRIDE content-theme2.css: .warning, .note, .important, .caution, .tip
   { margin-left: 0 !important; margin-right: 0 !important } */
#topic-content :is(.note, .tip, .important, .warning, .caution):not(:is(td, th) *):not(:has(img, table)),
#topic-content .ms-doc-notices {
  max-width: none;
  margin-inline-end: max(0px, 100cqi - var(--ms-reading-width)) !important;
}

#topic-content .ms-doc-notice {
  max-width: none;
}

/* The panel's real width: theme1's `.page-toc .section-nav-container` (18%, then 13.6% from 1200px)
   outranks layout-custom-style.css's 250px. */
@media (min-width: 992px) {
  :root {
    --ms-sec-width: 18vw;
  }
}

@media (min-width: 1200px) {
  :root {
    --ms-sec-width: 13.6vw;
  }
}

@media (min-width: 992px) {
  /* PALIGO-OVERRIDE theme1.css: .page-toc main article, .pager, .site-footer { width: 75% | 83.3333% } */
  .theme1.page-toc main article,
  .theme1.page-toc .pager,
  .theme1.page-toc .site-footer {
    width: 100%;
  }

  /* PALIGO-OVERRIDE theme1.css: .page-toc main article { padding-right: 40px };
     mirrors layout-custom-style.css's `.theme1.page-toc main article { padding-left: 7% }`. */
  .theme1.page-toc main article {
    padding-right: 7%;
  }

  .page-toc .site-content {
    width: calc(100% - var(--ms-sidebar-width));
    padding-right: var(--ms-sec-width);
  }

  /* THE BREADCRUMB BAR SPANS THE GUTTER; ONLY THE ARTICLE IS INSET.
     The rule above reserves 250px on .site-content so the fixed "ON THIS
     TOPIC" panel has somewhere to sit. That clears the article, the pager
     and the footer -- but it also stopped the toolbar 250px short of the
     right edge, so its background and its bottom rule ended in mid-air.
     Giving that width back with a negative margin makes the bar run the
     full width the way the reference portal's does.

     TCOM-1581: the breadcrumb uses that width too, so only a long trail
     wraps (the padding is in the 768px block below).

     Safe against the panel: the panel is position:fixed and starts at
     masthead + bar height, which is exactly where the toolbar ends, so
     the two touch rather than overlap. */
  .page-toc .site-content > .toolbar {
    margin-right: calc(-1 * var(--ms-sec-width));
  }

  /* RTL: the panel sits on the left (9c), so the gutter and the bleed move there with it. */
  html[dir="rtl"] .page-toc .site-content {
    padding-right: 0;
    padding-left: var(--ms-sec-width);
  }

  html[dir="rtl"] .page-toc .site-content > .toolbar {
    margin-right: 0;
    margin-left: calc(-1 * var(--ms-sec-width));
  }
}

/* TCOM-1581: from the width the TOC rail shows, the breadcrumb starts where the title starts (the
   article's 7% gutter, measured against the same containing width, so the same pixels) and runs to
   32px from the far edge. */
@media (min-width: 768px) {
  .page-toc .site-content > .toolbar {
    padding-left: 7%;
    padding-right: 32px;
  }

  html[dir="rtl"] .page-toc .site-content > .toolbar {
    padding-left: 32px;
    padding-right: 7%;
  }

  /* PALIGO-OVERRIDE theme1.css/content-theme2.css: .toolbar-tools. An empty #navbar with a 2em
     margin, plus print/search/menu icons that are all hidden at these widths, took ~60px before the trail. */
  .page-toc .site-content > .toolbar .toolbar-tools {
    display: none;
  }
}

/* NO BOX-SHADOW. Paligo's own .toolbar rule draws
     0 0 1px 1px, 0 0 2px 2px, 0 0 5px 1px
   on ALL FOUR sides. Inset by the gutter above, the right-hand edge of
   that shadow rendered as a vertical grey line down the page -- which is
   what it was, not a border and not a width bug. zoomin-look.css had
   already replaced the shadow's job with a bottom rule but left the
   shadow itself in place. Confirmed with CSS.getMatchedStylesForNode
   rather than guessed. */
.site-content > .toolbar {
  box-shadow: none;
}

/* =====================================================================
   11. NARROW SCREENS
   ===================================================================== */

/* Tablet: the right panel is gone (<992px) but the navbar is tight.
   Drop the search button label to an icon-width box. */
@media (max-width: 991px) {
  :root {
    --ms-search-width: 360px;
  }
}

@media (max-width: 767px) {
  :root {
    --ms-navbar-h: var(--ms-navbar-h-sm);
    --ms-subheader-h: var(--ms-subheader-h-sm);
  }

  .ms-subheader-inner {
    padding: 0 12px;
  }

  .site-header-navbar #logotype-pageheader.logo {
    width: var(--ms-logo-width-sm);
  }

  .site-header-navbar .navbar-container {
    padding: 0 12px;
    gap: 8px;
  }

  .site-header-navbar .language-switcher > .dropdown > .dropdown-toggle {
    padding: 6px 8px;
  }

  /* Give the input the remaining room. The button used to be hidden here
     to buy that room back from the word "Search"; now that it is a 44px
     glyph it costs almost nothing and is the obvious tap target on a
     phone, so it stays. */
  .ms-search-host .navbar-search {
    flex: 1 1 auto;
  }

  .ms-search-host .navbar-search-input {
    height: 44px;
    font-size: 15px;
  }

  .ms-search-host .navbar-search-scope {
    height: 44px;
    padding-inline-start: 4px;
  }

  /* Leaves the field most of a phone's width to type in. */
  .ms-search-host .navbar-search-scope-chip {
    gap: 4px;
    padding-block: 4px;
    padding-inline: 8px 4px;
    font-size: 14px;
  }

  .ms-search-host .navbar-search-button {
    width: 44px;
    height: 44px;
  }
}
/* =====================================================================
   11b. THE TOPIC TITLE
   ---------------------------------------------------------------------
   The reference portal's topic heading measures

     color: #000;  font: 700 34px/40px "Open Sans";  letter-spacing: normal

   Ours was 28px/34px at weight 600 in Roboto's grey, from zoomin-look.css:

     #topic-content .titlepage h3.title {
       font-size: 28px; line-height: 34px; font-weight: 600;
       color: var(--zdc-text); margin: 28px 0 14px;
     }

   !important, and the same selector rather than a heavier one. That block
   is appended AFTER this file inside layout-custom-style.css (see the
   header at the top), so order cannot win and specificity alone cannot
   either -- which is exactly the case the header says !important is for.
   Reusing their selector verbatim also means this affects precisely the
   elements they styled: no more, no fewer.

   MARGINS ARE LEFT ALONE. Only the four properties asked for are set;
   changing the spacing would move every topic on the site, and the
   reference portal's own margins sit inside a different layout anyway.

   The font family is --ms-font, whose first family is Open Sans -- the
   same face, with a real fallback stack behind it instead of the bare
   "serif" the portal happens to compute.
   ===================================================================== */

/* h5.title picks up `h5, .h5 { text-transform: uppercase }` from
   theme1.css -- matched here on the same selector to override without
   raising specificity beyond what the section already uses.

   h1, h2 and h6 joined the list when section 11c arrived. The scale has
   to hand every level the same face, weight and colour or "the same
   size" still will not read as the same heading: h1.title was Paligo's
   41px/500 and h2.title their 34px/700. Both now take the family here
   and their size from 11c.

   line-height is unitless so it follows the size down instead of leaving
   a 23px h4 sitting in a 40px line box. 34px * 1.18 is the 40px the
   reference portal measures, so the top title is unchanged. */
#topic-content .titlepage h1.title,
#topic-content .titlepage h2.title,
#topic-content .titlepage h3.title,
#topic-content .titlepage h4.title,
#topic-content .titlepage h5.title,
#topic-content .titlepage h6.title {
  color: #000000 !important;
  font-family: var(--ms-font) !important;
  font-size: 34px !important;  /* fallback where pow() is missing -- see 11c */
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* =====================================================================
   11c. ONE HEADING SCALE, WHATEVER LEVEL THE TOPIC STARTS AT
   ---------------------------------------------------------------------
   Paligo numbers a topic's headings by its depth in the publication, not
   by where it sits on the page. license-mechanism.html opens at h2.title
   and nests h3 and h4 under it; index.html opens at h1.title. With 11b
   handing every level the same 34px, a topic read as one flat wall of
   identical headings and the nesting was invisible.

   So: pin the *first* heading level that is actually present to --ms-h-max
   and step every level below it down by a constant ratio. The top title is
   34px on every page, whether that title is an h1, an h2 or an h3.

   --ms-h-first is that first level, found with :has() on the topic article.
   Scoped to article.topic deliberately -- aside.site-sidebar carries an
   h2.publication-title and article#search-result-wrapper an h2 of its own,
   so the same question asked at :root is answered by the page chrome, and
   sizing bare h1-h6 would resize the rail and the search results too.

   Only .titlepage titles are counted, and only they are sized. Paligo heads
   an admonition with a bare `div.note > h3.title`, no .titlepage around it.
   That is a label on a box, not a rung on the ladder: it must not be
   measured here and must not be resized. Same reasoning as 11b's "precisely
   the elements they styled: no more, no fewer".

   Each heading carries its own level as --ms-h-level so one formula can
   serve all six. pow() has been Baseline since mid-2024; where it is
   missing the whole declaration is dropped at parse time and 11b's flat
   34px stands, which is what the site did before this section. The max()
   floor keeps the deepest rungs from falling under body text.
   ===================================================================== */

article.topic {
  --ms-h-max: 34px;    /* the top title, whichever level that turns out to be */
  --ms-h-ratio: 0.82;  /* each level below is 82% of the one above it */
  --ms-h-min: 16px;    /* never smaller than body text */
  --ms-h-first: 1;     /* highest .titlepage level present, unless told otherwise below */
}

article.topic:not(:has(.titlepage h1.title)):has(.titlepage h2.title) { --ms-h-first: 2; }
article.topic:not(:has(.titlepage :is(h1, h2).title)):has(.titlepage h3.title) { --ms-h-first: 3; }
article.topic:not(:has(.titlepage :is(h1, h2, h3).title)):has(.titlepage h4.title) { --ms-h-first: 4; }
article.topic:not(:has(.titlepage :is(h1, h2, h3, h4).title)):has(.titlepage h5.title) { --ms-h-first: 5; }
article.topic:not(:has(.titlepage :is(h1, h2, h3, h4, h5).title)):has(.titlepage h6.title) { --ms-h-first: 6; }

#topic-content .titlepage h1.title { --ms-h-level: 1; }
#topic-content .titlepage h2.title { --ms-h-level: 2; }
#topic-content .titlepage h3.title { --ms-h-level: 3; }
#topic-content .titlepage h4.title { --ms-h-level: 4; }
#topic-content .titlepage h5.title { --ms-h-level: 5; }
#topic-content .titlepage h6.title { --ms-h-level: 6; }

/* Same selector shape as 11b and after it, so the tie goes this way.
   !important for the reason 11b documents: Paligo's own
   #topic-content .titlepage hN.title is appended after this file. */
#topic-content .titlepage :is(h1, h2, h3, h4, h5, h6).title {
  font-size: max(
    var(--ms-h-min),
    calc(var(--ms-h-max) * pow(var(--ms-h-ratio), var(--ms-h-level) - var(--ms-h-first)))
  ) !important;
}

/* =====================================================================
   12. NOTICES ABOVE THE TOPIC TITLE
   ---------------------------------------------------------------------
   Injected by custom/js/main.js as
   <div class="ms-doc-notices"><p class="ms-doc-notice ...">, immediately
   before the topic's .titlepage. Two kinds today:

     .ms-doc-notice-machine-translation  "Machine translation"
     .ms-doc-notice-unavailable          "Sorry - Not available in your
                                          language"

   Both are caveats about the page rather than failures, so they share
   one quiet callout: a tinted band with an accent rule on the reading-
   start edge and a "translate" glyph. They are also both raised
   asynchronously (one waits on a fetch of the publication root, the
   other on a HEAD probe), which is why the container is always in the
   DOM and empty until it is needed -- an empty container must not push
   the title down.

   Every selector is scoped under #topic-content: the notices are <p>s
   inside it, and the theme's "#topic-content p" sets font-size and
   color with an id, which no class-only rule can beat.

   Sizes are px, not rem: the theme sets the root font-size to 10px, so
   0.875rem would be 8.75px.

   Right-to-left: the rule, padding and rounded corners use logical
   properties, and the glyph is a flex item, so all of them follow the
   notice's own direction. That matters for the "unavailable" notice,
   which carries its own dir= (an Arabic apology can sit above English
   prose), so the page's direction is not the one to follow.
   ===================================================================== */

#topic-content .ms-doc-notices:empty {
  display: none;
}

#topic-content .ms-doc-notices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Width comes from the reading-width end margin (see CONTENT WIDTH). */
  margin-block: 0 28px;
  margin-inline-start: 0;
}

#topic-content .ms-doc-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  margin: 0;
  padding-block: 10px;
  padding-inline: 12px 14px;
  border: 0;
  border-inline-start: 3px solid var(--ms-notice-accent);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  box-shadow: none;
  background-color: var(--ms-notice-tint);
  color: var(--ms-notice-text);
  /* The prose's stack, not --ms-font: --ms-font drops straight from Open
     Sans to generic sans-serif, so an Arabic or Hebrew notice (which Open
     Sans has no glyphs for) came out in a different face from the page. */
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

/* The "translate" glyph (Material's 文A), drawn as a mask so it takes
   the accent colour. Not mirrored in right-to-left: it is a picture of
   two scripts, not an arrow. */
#topic-content .ms-doc-notice::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background-color: var(--ms-notice-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#topic-content .ms-doc-notice a {
  color: var(--ms-notice-link);
  text-decoration: underline;
}

@media (max-width: 600px) {
  #topic-content .ms-doc-notice {
    padding-block: 8px;
    padding-inline: 10px 12px;
    font-size: 13px;
  }
}

@media print {
  #topic-content .ms-doc-notice {
    background: none;
    border-inline-start-color: #999999;
  }
  #topic-content .ms-doc-notice::before {
    background-color: #999999;
  }
}


/* =====================================================================
   13. DOCUMENT TOOLBAR UNDER THE TITLE
   ---------------------------------------------------------------------
   <div class="ms-doc-toolbar">, baked by publisher-paligo-to-blob
   (shared/sourceTweaks/chromeContainers.js) immediately after the
   topic's .titlepage, and filled by custom/js/main.js. It reads as
   doc.milestonesys.com's does:

     Version: [2026r1  v] | Last Updated: Sep 2, 2026 | (clock) 4 min read | ((globe) English v)
     (XProtect Access) (Operator guide)

   with the prev/next arrows and the PDF button lifted out of the row and
   set beside the title.

   THE ORDER IS SET HERE, not by the markup. Every published page has the
   baked order meta, versions, languages, taxonomies; `order` below gives
   Zoomin's from the first paint, with no republish and no DOM moves to
   watch. Nothing in the meta line is focusable, so tab order is
   unchanged.

   A picker with only one option is not shown: main.js empties its slot,
   and an empty slot collapses.
   ===================================================================== */

/* --- nothing in the row is seen until it is final ---------------------

   The same "ready shows" rule as the masthead (section 3e), for the same
   reasons. Until main.js has applied the reader's strings and settled
   both pickers, the row would show the baked English (or page-language)
   text, and tags that are about to become dropdowns or disappear. So the
   meta line and the slots are invisible from the first paint until
   main.js sets .ms-doc-toolbar-ready on the toolbar.

   opacity + visibility rather than display: the row keeps its height, so
   the topic below it does not move when it appears. visibility keeps the
   hidden controls out of the tab order and away from the pointer. If
   main.js never runs, the failsafe shows the baked row after 3s.

   The arrows and the PDF button are not held back: they are baked, they
   never change, and they sit beside the title, not in the row. */

.ms-doc-toolbar:not(.ms-doc-toolbar-ready) > :is(.ms-doc-meta, .ms-doc-toolbar-slot) {
  opacity: 0;
  visibility: hidden;
  animation: ms-doc-toolbar-failsafe 0s 3s forwards;
}

@keyframes ms-doc-toolbar-failsafe {
  to { opacity: 1; visibility: visible; }
}

.ms-doc-toolbar > :is(.ms-doc-meta, .ms-doc-toolbar-slot) {
  transition: opacity .15s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .ms-doc-toolbar > :is(.ms-doc-meta, .ms-doc-toolbar-slot) {
    transition: none;
  }
}

/* --- order and the | separators ---------------------------------------

   The rows hold 35px whatever main.js decides: .ms-doc-meta is always
   there and is as tall as the language pill, so hiding both pickers does
   not make the first line shorter. The chips' line is reserved the same
   way, on any page whose <head> has the meta tags main.js builds them
   from (collectTaxonomies; keep the two in step). */

.ms-doc-toolbar-versions   { order: 1; }
.ms-doc-meta               { order: 2; }
.ms-doc-toolbar-languages  { order: 3; }
.ms-doc-toolbar-taxonomies { order: 5; }

html:has(meta[name="product" i], meta[name^="assettype" i]) .ms-doc-toolbar-taxonomies {
  display: flex;
  min-height: 34px;
}

/* A 20px rule before every item that has one before it, 8px from the
   text either side as Zoomin spaces its "|" (the row's own gap is 8px).
   Drawn as an element rather than a border so it is the same height
   beside the 30px version box as beside text, and the same as the
   border between the meta line's own two items. */
.ms-doc-toolbar:has(> .ms-doc-toolbar-versions:not(:empty)) > .ms-doc-meta::before,
.ms-doc-toolbar-languages:not(:empty)::before {
  content: "";
  flex: none;
  width: 1px;
  height: 20px;
  margin-inline-end: 8px;
  background-color: var(--ms-navbar-rule);
}

/* --- last updated | reading time ---------------------------------------

   Baked by publisher-paligo-to-blob (shared/sourceTweaks/docMeta.js) as
   the toolbar's first child; shown second (see the order above).

   Paligo's own footer date is hidden only on a page that carries this
   line's date, so a page published before the line existed keeps its
   footer date rather than losing it. */

.ms-doc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  min-height: 35px;
  color: var(--ms-muted);
  font-family: var(--ms-font);
  font-size: 14px;
  line-height: 1.4;
}

.ms-doc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ms-doc-meta-item + .ms-doc-meta-item {
  margin-inline-start: 8px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid #D6D6D6;
}

.ms-doc-meta-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

body:has(.ms-doc-meta-updated) .date-modified {
  display: none;
}

.ms-doc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid #E4E8EC;
}

.ms-doc-toolbar-slot:empty {
  display: none;
}

.ms-doc-toolbar-slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Pushes the PDF button to the right-hand end whatever else is present,
   including when every other slot is empty. */
.ms-doc-toolbar .pdf-btn-wrapper {
  position: relative;
  margin-left: auto;
}

/* --- the PDF button beside the title, not in the row -------------------

   On a topic (the toolbar right after .titlepage) the button is lifted out
   of the row and set at the end of the title's last line, where
   doc.milestonesys.com keeps its PDF / share / print icons. That leaves
   the row to the meta line and the two pickers, which then fit on one
   line at desktop width in every site language; with the button in the
   row they were ~20px too wide in English and more in translation.

   CSS only, on purpose: the button stays in the toolbar's markup, which
   is where main.js (wirePdfControl) wires it and what format-converter's
   stripInjections matches.

   The title-to-row gap is fixed at 20px so the offset is a constant.
   Paligo's heading margin collapsed with .title's and gave 24px under an
   h2 title and 34px under an h1. The offset puts the 32px button's middle
   on the middle of the title's last line: 20 (gap) + 20 (half the 40px
   line) - 16 (half the button) = 24px on paper, 21px measured, because
   the glyphs sit low in the line box. The title keeps 96px clear at its
   end so a long one wraps before reaching the button. */

/* !important and the #topic-content shape for the reason 11b documents:
   Paligo's own #topic-content .titlepage hN.title, which sets the heading
   margin, is appended after this file. */
.titlepage:has(+ .ms-doc-toolbar) .title,
.titlepage:has(+ .ms-doc-toolbar) .title > :is(h1, h2, h3, h4, h5, h6),
#topic-content .titlepage:has(+ .ms-doc-toolbar) :is(h1, h2, h3, h4, h5, h6).title {
  margin-bottom: 0 !important;
}

.titlepage:has(+ .ms-doc-toolbar .pdf-btn-wrapper) .title > :is(h1, h2, h3, h4, h5, h6) {
  padding-inline-end: 96px;
}

.titlepage + .ms-doc-toolbar {
  position: relative;
  margin-top: 20px;
}

.titlepage + .ms-doc-toolbar .pdf-btn-wrapper {
  position: absolute;
  bottom: calc(100% + 21px);
  inset-inline-end: 0;
  margin: 0;
}

/* --- prev / next arrows, just before the PDF button --------------------

   <nav class="ms-doc-pager"> is baked into the toolbar by
   publisher-paligo-to-blob (chrome-containers) from Paligo's own pager, as
   two real links -- the < > doc.milestonesys.com shows beside its PDF
   button. Lifted out of the row the same way the PDF button is, and set
   just before it.

   The PDF button is 80px wide wherever its label is "PDF", which is every
   site language except Arabic ("ملف PDF"); the offset is that width plus
   the 8px gap, with Arabic measured separately. Two 32px arrows and their
   4px gap add 76px to the title's reserved end space. */
.titlepage:has(+ .ms-doc-toolbar .ms-doc-pager) .title > :is(h1, h2, h3, h4, h5, h6) {
  padding-inline-end: 172px;
}

.titlepage + .ms-doc-toolbar .ms-doc-pager {
  position: absolute;
  bottom: calc(100% + 21px);
  inset-inline-end: 88px;
  display: flex;
  gap: 4px;
}

html[lang|="ar"] .titlepage:has(+ .ms-doc-toolbar .ms-doc-pager) .title > :is(h1, h2, h3, h4, h5, h6) {
  padding-inline-end: 200px;
}

html[lang|="ar"] .titlepage + .ms-doc-toolbar .ms-doc-pager {
  inset-inline-end: 116px;
}

/* The same grey pill as the PDF button, which is what button.btn.btn-default
   (below) makes it, as a 32px circle. */
/* #topic-content for the reason the menus below give: the theme's
   #topic-content a rules (colour, underline, focus outline) outrank a
   class pair. */
#topic-content .ms-doc-toolbar .ms-doc-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: #f3f3f3;
  color: var(--ms-text);
  font-size: 13px;
  text-decoration: none;
}

#topic-content .ms-doc-toolbar a.ms-doc-pager-btn:hover,
#topic-content .ms-doc-toolbar a.ms-doc-pager-btn:focus {
  background-color: var(--ms-blue-tint);
  color: var(--ms-blue-dark);
  text-decoration: none;
  outline: none;
}

/* Keyboard focus keeps a ring, in the toolbar's blue. */
#topic-content .ms-doc-toolbar a.ms-doc-pager-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--ms-blue);
}

#topic-content .ms-doc-toolbar .ms-doc-pager-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

/* A chevron points the way the page turns, which in a right-to-left
   language is the other way. */
html[dir="rtl"] .ms-doc-pager .fa {
  transform: scaleX(-1);
}

/* The arrows replace Paligo's text pagers, but only on a page that has
   them: one published before the arrows existed keeps its pager. */
body:has(.ms-doc-pager) :is(#top-pager, #bottom-pager) {
  display: none;
}

/* --- the two pickers ------------------------------------------------- */

.ms-doc-toolbar .ms-doc-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* "Version:" in the meta line's grey, as Zoomin has it. No fixed width
   any more: the row is not shown until main.js has rewritten the caption
   into the reader's language, so the rewrite cannot move anything. The
   colon is the reader's language's own (" :" in French, "：" in Chinese
   and Japanese), set by main.js as --ms-label-colon. */
.ms-doc-toolbar .ms-doc-picker-caption {
  color: var(--ms-muted);
  font-family: var(--ms-font);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.ms-doc-toolbar .ms-doc-picker-caption::after {
  content: var(--ms-label-colon, ":");
}

/* The language pill has no caption, as on Zoomin: the globe says what it
   is, and the toggle's aria-label still reads "Language: English". */
.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-caption {
  display: none;
}

/* Bootstrap's .btn sets font-family:inherit, and inside a topic body
   that inherits the serif-ish content font. Name the font explicitly.

   .ms-doc-picker-tag is the one-option form of the toggle (baked by
   publisher-paligo-to-blob): the same box, with no menu behind it. */
.ms-doc-toolbar .ms-doc-picker-toggle,
.ms-doc-toolbar .ms-doc-picker-tag,
.ms-doc-toolbar .pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ms-navbar-rule);
  border-radius: 16px;
  background-color: #FFFFFF;
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* The caret's room is held open, so the tag is exactly as wide as the
   toggle it turns into: 12px of padding, Bootstrap's 8px .caret and the
   toggle's 6px gap before it. Measured, not derived — the caret's own 2px
   margin does not add to the gap in a flex row. */
.ms-doc-toolbar .ms-doc-picker-tag {
  padding-inline-end: 26px;
  cursor: default;
}

/* The tag and the caption are SPANS, and the Paligo theme's
   `#topic-content span { font-family: var(--zdc-font) }` outranks the
   class rules above; the toggle is a <button>, which it does not list.
   Latin text looks the same either way (both stacks start with Open
   Sans), but Hebrew, Arabic and CJK fall through to a different font, so
   the tag measured 2.4px wider than the toggle it turns into on a Hebrew
   page. */
#topic-content .ms-doc-toolbar .ms-doc-picker-caption,
#topic-content .ms-doc-toolbar .ms-doc-picker-tag {
  font-family: var(--ms-font);
}

.ms-doc-toolbar .ms-doc-picker-toggle:hover,
.ms-doc-toolbar .ms-doc-picker-toggle:focus,
.ms-doc-toolbar .ms-doc-picker.open > .ms-doc-picker-toggle,
.ms-doc-toolbar .pdf-btn:hover,
.ms-doc-toolbar .pdf-btn:focus,
.ms-doc-toolbar .pdf-btn-wrapper.open > .pdf-btn {
  border-color: var(--ms-blue);
  background-color: var(--ms-blue-tint);
  color: var(--ms-blue-dark);
  outline: none;
}

button.btn.btn-default,
button.btn.btn-default:hover,
button.btn.btn-default:focus {
  border: none;
  background-color: #f3f3f3;
}

/* --- Version: a select box ---------------------------------------------

   doc.milestonesys.com's version control, measured with Playwright
   (2026-10-03): white, 1px #D6D6D6 border, 4px corners, 145 x 30px,
   black 14px text, a grey chevron at the end.

   100px here, not 145: our content column is ~745px against Zoomin's
   ~1000, and the 45px is what keeps the language pill on the first line
   in every site language (Bulgarian, the widest, measured 743 of 743 on
   2026-10-03). A row that does wrap is still correct, just two lines.

   Three classes so it outranks button.btn.btn-default above; its
   :hover/:focus form (0,3,1) needs the four-class rules below. */
.ms-doc-toolbar .ms-version-picker .ms-doc-picker-toggle,
.ms-doc-toolbar .ms-version-picker .ms-doc-picker-tag {
  justify-content: space-between;
  gap: 12px;
  min-width: 100px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--ms-navbar-rule);
  border-radius: 4px;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
}

/* Zoomin leaves 3px between "Version:" and the box. */
.ms-doc-toolbar .ms-doc-picker.ms-version-picker {
  gap: 4px;
}

.ms-doc-toolbar .ms-version-picker .ms-doc-picker-toggle:hover,
.ms-doc-toolbar .ms-version-picker .ms-doc-picker-toggle:focus,
.ms-doc-toolbar .ms-version-picker.open > .ms-doc-picker-toggle {
  border: 1px solid var(--ms-blue);
  background-color: #FFFFFF;
  color: #000000;
}

/* Bootstrap's triangle redrawn as a chevron: two sides of a box, turned.
   It points up while the menu is open, as Zoomin's does. */
.ms-doc-toolbar .ms-version-picker .caret {
  width: 7px;
  height: 7px;
  margin: 0 2px 3px;
  border: solid var(--ms-muted);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.ms-doc-toolbar .ms-version-picker.open .caret {
  margin: 3px 2px 0;
  transform: rotate(-135deg);
}

/* --- Language: a blue-on-grey pill with a globe ------------------------

   Zoomin's: #F3F3F3, its blue text, 24px corners, 35px tall, a 15px globe
   8px before the label. The globe is the masthead picker's
   (MS_GLOBE_PATH in main.js) drawn as a mask in currentColor, so it is
   on the baked tag from the first paint as well as on the dropdown, and
   follows the text colour on hover. */
.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-toggle,
.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-tag {
  gap: 8px;
  height: 35px;
  padding: 0 12px;
  border: 0;
  border-radius: 24px;
  background-color: #F3F3F3;
  color: var(--ms-blue);
  font-size: 14px;
  font-weight: 400;
}

.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-toggle:hover,
.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-toggle:focus,
.ms-doc-toolbar .ms-document-language-picker.open > .ms-doc-picker-toggle {
  border: 0;
  background-color: var(--ms-blue-tint);
  color: var(--ms-blue-dark);
}

.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-toggle::before,
.ms-doc-toolbar .ms-document-language-picker .ms-doc-picker-tag::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm82.29 357.6c-3.9 3.88-7.99 7.95-11.31 11.28-2.99 3-5.1 6.7-6.17 10.71-1.51 5.66-2.73 11.38-4.77 16.87l-17.39 46.85c-13.76 3-28 4.69-42.65 4.69v-27.38c1.69-12.62-7.64-36.26-22.63-51.25-6-6-9.37-14.14-9.37-22.63v-32.01c0-11.64-6.27-22.34-16.46-27.97-14.37-7.95-34.81-19.06-48.81-26.11-11.48-5.78-22.1-13.14-31.65-21.75l-.8-.72a114.792 114.792 0 0 1-18.06-20.74c-9.38-13.77-24.66-36.42-34.59-51.14 20.47-45.5 57.36-82.04 103.2-101.89l24.01 12.01C203.48 89.74 216 82.01 216 70.11v-11.3c7.99-1.29 16.12-2.11 24.39-2.42l28.3 28.3c6.25 6.25 6.25 16.38 0 22.63L264 112l-10.34 10.34c-3.12 3.12-3.12 8.19 0 11.31l4.69 4.69c3.12 3.12 3.12 8.19 0 11.31l-8 8a8.008 8.008 0 0 1-5.66 2.34h-8.99c-2.08 0-4.08.81-5.58 2.27l-9.92 9.65a8.008 8.008 0 0 0-1.58 9.31l15.59 31.19c2.66 5.32-1.21 11.58-7.15 11.58h-5.64c-1.93 0-3.79-.7-5.24-1.96l-9.28-8.06a16.017 16.017 0 0 0-15.55-3.1l-31.17 10.39a11.95 11.95 0 0 0-8.17 11.34c0 4.53 2.56 8.66 6.61 10.69l11.08 5.54c9.41 4.71 19.79 7.16 30.31 7.16s22.59 27.29 32 32h66.75c8.49 0 16.62 3.37 22.63 9.37l13.69 13.69a30.503 30.503 0 0 1 8.93 21.57 46.536 46.536 0 0 1-13.72 32.98zM417 274.25c-5.79-1.45-10.84-5-14.15-9.97l-17.98-26.97a23.97 23.97 0 0 1 0-26.62l19.59-29.38c2.32-3.47 5.5-6.29 9.24-8.15l12.98-6.49C440.2 193.59 448 223.87 448 256c0 8.67-.74 17.16-1.82 25.54L417 274.25z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm82.29 357.6c-3.9 3.88-7.99 7.95-11.31 11.28-2.99 3-5.1 6.7-6.17 10.71-1.51 5.66-2.73 11.38-4.77 16.87l-17.39 46.85c-13.76 3-28 4.69-42.65 4.69v-27.38c1.69-12.62-7.64-36.26-22.63-51.25-6-6-9.37-14.14-9.37-22.63v-32.01c0-11.64-6.27-22.34-16.46-27.97-14.37-7.95-34.81-19.06-48.81-26.11-11.48-5.78-22.1-13.14-31.65-21.75l-.8-.72a114.792 114.792 0 0 1-18.06-20.74c-9.38-13.77-24.66-36.42-34.59-51.14 20.47-45.5 57.36-82.04 103.2-101.89l24.01 12.01C203.48 89.74 216 82.01 216 70.11v-11.3c7.99-1.29 16.12-2.11 24.39-2.42l28.3 28.3c6.25 6.25 6.25 16.38 0 22.63L264 112l-10.34 10.34c-3.12 3.12-3.12 8.19 0 11.31l4.69 4.69c3.12 3.12 3.12 8.19 0 11.31l-8 8a8.008 8.008 0 0 1-5.66 2.34h-8.99c-2.08 0-4.08.81-5.58 2.27l-9.92 9.65a8.008 8.008 0 0 0-1.58 9.31l15.59 31.19c2.66 5.32-1.21 11.58-7.15 11.58h-5.64c-1.93 0-3.79-.7-5.24-1.96l-9.28-8.06a16.017 16.017 0 0 0-15.55-3.1l-31.17 10.39a11.95 11.95 0 0 0-8.17 11.34c0 4.53 2.56 8.66 6.61 10.69l11.08 5.54c9.41 4.71 19.79 7.16 30.31 7.16s22.59 27.29 32 32h66.75c8.49 0 16.62 3.37 22.63 9.37l13.69 13.69a30.503 30.503 0 0 1 8.93 21.57 46.536 46.536 0 0 1-13.72 32.98zM417 274.25c-5.79-1.45-10.84-5-14.15-9.97l-17.98-26.97a23.97 23.97 0 0 1 0-26.62l19.59-29.38c2.32-3.47 5.5-6.29 9.24-8.15l12.98-6.49C440.2 193.59 448 223.87 448 256c0 8.67-.74 17.16-1.82 25.54L417 274.25z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- the dropdown menus ----------------------------------------------

   Bootstrap 3 toggles display:block on .open.

   A MENU INSIDE THE TOPIC BODY IS CHROME, NOT PROSE. The toolbar is
   injected after .titlepage, which puts it inside #topic-content, and
   the Paligo theme styles the prose there with

     #topic-content ul { margin: 12px 0; padding: 0 0 0 40px }
     #topic-content ul { list-style-type: disc }
     #topic-content li { margin: 0 0 10px }

   A .dropdown-menu is a <ul> of <li>, so every menu the toolbar opens --
   version, language and PDF alike -- came out as a bulleted, 40px-
   indented list with 10px between the rows. Bootstrap's own
   list-style:none lost because an ID selector (1,0,1) outranks a class
   pair (0,2,0), which is also why the plain .ms-doc-toolbar rules below
   could not undo it. Confirmed with CSS.getMatchedStylesForNode rather
   than inferred: guessing at specificity is how you write a fix that
   loses again.

   So the reset is written at #topic-content .dropdown-menu (1,1,0),
   which wins, and is deliberately about "any Bootstrap menu injected
   into the body" rather than about the PDF button -- the next widget
   dropped in there gets the same protection for free. The theme is a
   vendor stylesheet we cannot edit, so this has to be an override rather
   than a narrowing of theirs. */
#topic-content .dropdown-menu,
#topic-content .dropdown-menu > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Matched to the reference portal's Save-PDF menu (Playwright computed
   styles, 2026-09-05): white, 10px top and bottom, 4px radius, a soft
   5px shadow, no border at all. The 6px radius, 1px border and heavy
   16px drop shadow that stood here were ours. */
.ms-doc-toolbar .dropdown-menu,
#topic-content .ms-doc-toolbar .dropdown-menu {
  min-width: 160px;
  max-height: 320px;
  margin-top: 4px;
  padding: 10px 0;
  overflow-y: auto;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  background-color: #FFFFFF;
  z-index: 1050;
}

/* 30px rows, 14px/20px, black. A flex row rather than a block, so the
   text centres in the row height the way the portal's does. */
.ms-doc-toolbar .dropdown-menu > li > a,
#topic-content .ms-doc-toolbar .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 5px 10px;
  color: #000000;
  font-family: var(--ms-font);
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
  white-space: nowrap;
  text-decoration: none;
}

/* Background only. The portal does not recolour the text and does not
   underline it; the blue-on-tint we had made a menu row look pressed. */
.ms-doc-toolbar .dropdown-menu > li > a:hover,
.ms-doc-toolbar .dropdown-menu > li > a:focus,
#topic-content .ms-doc-toolbar .dropdown-menu > li > a:hover,
#topic-content .ms-doc-toolbar .dropdown-menu > li > a:focus {
  background-color: var(--ms-hover);
  color: #000000;
  text-decoration: none;
}

/* The current version / language in blue with no fill, as Zoomin marks
   it and as the masthead picker already does. Bootstrap's own .active is
   a solid #337AB7 bar, which put the black text on dark blue. */
.ms-doc-toolbar .dropdown-menu > li.active > a,
#topic-content .ms-doc-toolbar .dropdown-menu > li.active > a,
#topic-content .ms-doc-toolbar .dropdown-menu > li.active > a:focus {
  background-color: transparent;
  color: var(--ms-blue-dark);
  font-weight: 600;
}

#topic-content .ms-doc-toolbar .dropdown-menu > li.active > a:hover {
  background-color: var(--ms-hover);
  color: var(--ms-blue-dark);
}

/* --- taxonomy chips --------------------------------------------------- */

/* The product and the asset type, after the language pill on its line
   where they fit and on the next line where they do not, in
   Zoomin's blue-on-grey -- but labels, not links, so no hover and no
   pointer. Asset types arrive lower-case ("operator guide"); the first
   letter is raised to match Zoomin's "User guide". The chips are spans,
   so the #topic-content span font rule (see the tag above) has to be
   outranked here too.

   Every chip is shown. The first line is reserved at 34px before main.js
   runs (see the order block); a page whose chips need more lines -- a
   Husky page lists seven products -- pushes the topic down by those
   lines when they are filled. Accepted (Steve, 2026-10-03) over leaving
   chips out. */
.ms-doc-taxonomies {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.ms-doc-taxonomy,
#topic-content .ms-doc-toolbar .ms-doc-taxonomy {
  display: inline-block;
  max-width: 220px;
  padding: 6px 13px;
  overflow: hidden;
  border-radius: 24px;
  background-color: #F3F3F3;
  color: var(--ms-blue);
  font-family: var(--ms-font);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.ms-doc-taxonomy::first-letter {
  text-transform: uppercase;
}

/* --- PDF button ------------------------------------------------------- */

/* The label is a <span> beside an <i class="fa"> glyph. Font Awesome is
   not guaranteed to be loaded on every layout, and a bare <i> falls back
   to the browser's italic default -- which is what put the old button's
   label in italics. Pin the whole subtree upright; the icon font does
   not depend on font-style.

   The Paligo theme's `#topic-content i { font-style: italic }` outranks
   the class pair, and slanted the PDF glyph and the pager's chevrons, so
   the #topic-content shape is needed too. */
.ms-doc-toolbar .pdf-btn,
.ms-doc-toolbar .pdf-btn *,
#topic-content .ms-doc-toolbar .pdf-btn *,
#topic-content .ms-doc-toolbar .ms-doc-pager .fa {
  font-style: normal;
}

.ms-doc-toolbar .pdf-btn-label {
  font-family: var(--ms-font);
  font-size: 13px;
  font-weight: 600;
}

/* An icon font that failed to load leaves an empty inline box that still
   claims the flex gap. Collapse it so the button reads "PDF v", not
   "  PDF v". */
.ms-doc-toolbar .pdf-btn .fa:empty {
  display: inline-block;
  min-width: 0;
}

/* --- narrow screens --------------------------------------------------- */

@media (max-width: 767px) {
  .ms-doc-toolbar {
    gap: 8px;
  }

  /* The captions are the first thing to go: "Version"/"Language" is
     already implied by the value shown on the toggle. */
  .ms-doc-toolbar .ms-doc-picker-caption {
    display: none;
  }

  /* Stacked, with no "|" rules: the version, then the date and the
     reading time a line each, then the language pill, then the chips.
     A fixed shape on purpose -- letting the meta line wrap where its
     text happens to run out made the row's height depend on the
     language, and so change when main.js translated it. */
  .ms-doc-meta {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }

  .ms-doc-meta-item + .ms-doc-meta-item {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .ms-doc-toolbar:has(> .ms-doc-toolbar-versions:not(:empty)) > .ms-doc-meta::before,
  .ms-doc-toolbar-languages:not(:empty)::before {
    content: none;
  }

  /* The chips come last (order 5). The PDF button and, below, the
     arrows close the pickers' line, before them. */
  .ms-doc-toolbar .pdf-btn-wrapper {
    order: 4;
  }

  /* Beside the title the arrows would leave a phone's title one word a
     line. Here they sit at the end of the toolbar row instead, and the
     title keeps only the PDF button's room. */
  .titlepage + .ms-doc-toolbar .ms-doc-pager {
    position: static;
    order: 4;
    margin-inline-start: auto;
  }

  html[lang] .titlepage:has(+ .ms-doc-toolbar .ms-doc-pager) .title > :is(h1, h2, h3, h4, h5, h6) {
    padding-inline-end: 96px;
  }
}

a.xref:not([href]),
a.xref:not([href]):hover {
    color: inherit !important;
    text-decoration: none !important;
    cursor: default !important;
}

.breadcrumb-node .phrase {
  margin-inline: 0.25em;
}