/* Cloudhouse Alchemy docs theme.
   Values below are taken from the production Flare output:
     Alchemy Docs/<tier>/Content/Resources/Stylesheets/MainStyles.css
     Alchemy Docs/<tier>/Content/Resources/Stylesheets/StylesForHomePage.css
     Alchemy Docs/<tier>/Content/Resources/Tablestyles/*.css
     Alchemy Docs/<tier>/Skins/{Fluid,Default}/Stylesheets/*.css
   The three tiers' stylesheets are byte-identical apart from one media-query
   breakpoint, so one copy of this file serves all three sections.
   Departures from production are commented inline. */

/* ---- Fonts -----------------------------------------------------------------
   Production serves Segoe UI from Microsoft's CDN, local() first so Windows
   users get the installed face and everyone else downloads it. */
@font-face {
  font-family: 'Segoe UI';
  src: local('Segoe UI Light'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: local('Segoe UI Semilight'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: local('Segoe UI'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: local('Segoe UI Semibold'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Segoe UI';
  src: local('Segoe UI Bold'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
       url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff');
  font-weight: 700;
  font-display: swap;
}

/* ---- Brand tokens ---------------------------------------------------------
   Production's own custom properties, verbatim from MainStyles.css :root. The
   home page also pulls in StylesForHomePage.css, which adds --hover-text and
   the tile colours; those are only used there, so they are not restated. */
:root {
  --CH-Color: #3dda85;
  --CH-2nd-color: #0D2839;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #0D2839;
  --md-primary-fg-color--light: #1B3B50;
  --md-primary-fg-color--dark:  #02242E;
  --md-accent-fg-color:         #3DDA85;
  --md-accent-fg-color--transparent: rgba(61, 218, 133, 0.10);
  /* MainStyles body { background-color: #fff } - topic pages are white. The
     home page is navy, and gets that from StylesForHomePage.css. */
  --md-default-bg-color:        #ffffff;
  --md-default-fg-color:        #404040;   /* MainStyles body color */
  /* MainStyles a:link - production links are blue and bold, not green. */
  --md-typeset-a-color:         #2D8DCC;
  --md-text-font: 'Segoe UI', 'Open Sans', Arial, Roboto, 'Ubuntu Sans';
}

/* ---- Topic page typography (MainStyles.css) ------------------------------ */
.md-typeset { line-height: 1.7em; }

/* Production h1 is black at 2em, not green. */
.md-typeset h1 {
  color: #000000;
  font-size: 2em;
  font-weight: bolder;
  margin-top: 30px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.md-typeset h2 {
  color: #000000;
  font-size: 1.5em;
  font-weight: bolder;
  margin-top: 20px;
  margin-bottom: 4px;
}
.md-typeset h3,
.md-typeset h4 {
  color: #0D2839;
  font-weight: bolder;
  margin-bottom: 4px;
}

/* Production's header shows the logo and tier links only - no site-name text -
   so Material's header title is hidden. Kept in the DOM for screen readers. */
.md-header__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* Note on assets/flare/: the two production stylesheets are copied verbatim, but
   only the images their *matched* selectors need are. `div.topic-hero1` and
   `div.topic-hero-3` are alternative banners this markup never uses, and their
   images run to 4.9 MB, so they are not carried - an unmatched selector never
   requests its background.

   =========================================================================== */

/* ===========================================================================
   HOME PAGE
   The home page's appearance comes from production's own stylesheets, loaded
   verbatim by overrides/home.html (MainStyles.css + StylesForHomePage.css).
   Only what those files cannot cover lives here:
     - Material's page chrome, which Flare has no equivalent for
     - the search bar, whose Flare rules live in the skin's Styles.css
     - making the tiles keyboard-reachable
   No Flare values are re-derived below. In particular `div.cta` is defined in
   both production stylesheets with conflicting width, background and border;
   loading them in production's order is what resolves it, so do not try to
   re-derive that button's values here.
   =========================================================================== */

/* Undo Material's content cap and padding so the hero and info band go
   full-bleed, matching production's
   `.off-canvas-content .main-section > .outer-row { max-width:100%; padding:0 }` */
body:has(.ch-home) .md-main__inner { margin-top: 0; }
/* Only the content grid goes full-bleed. `.md-header__inner` also carries
   `.md-grid`, and releasing its cap too pushed the logo and the tier links out
   to the window edges, where production keeps them on the 80% row. */
body:has(.ch-home) .md-main__inner.md-grid { max-width: 100%; }
body:has(.ch-home) .md-content { margin: 0; padding: 0; }

/* StylesForHomePage.css sets `body { background-color: #142839 }`. Material's
   own body rule is equally specific and loads first, so the cascade already
   lands on production's navy - but the page can flash white before the Flare
   sheet arrives, so it is set here too. */
body:has(.ch-home) { background-color: #142839; }

/* Production hides the header search on the home page in favour of the big one
   below the hero. */
body:has(.ch-home) .md-header .md-search { display: none; }

/* Tiles: production uses an onclick attribute, which no keyboard can reach.
   A real link is nested in the tile instead and stretched across it, leaving
   Flare's own box rules untouched. */
.ch-home .home-tiles > div { position: relative; }
.ch-home .home-tiles > div > a { display: block; text-decoration: none; }
.ch-home .home-tiles > div > a::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.ch-home .home-tiles > div > a:focus-visible {
  outline: 3px solid var(--CH-Color);
  outline-offset: 3px;
}

/* The scope filter is off by default (see extra.search_filter in mkdocs.yml):
   no Alchemy export ships a Data/Filters.js, and production renders the bar
   without a filter control, so the field runs up to the submit button. */
.ch-search .search-bar:not(.has-filter) .search-field { padding-right: 66px; }

/* ---- Home search bar -----------------------------------------------------
   Ported from Skins/Default/Stylesheets/Components/Styles.css
   (the ._Skins_SearchHome rules) because the skin stylesheet as a whole
   carries too much Flare-specific baggage to load wholesale. */
.ch-home .search-container { position: relative; z-index: 1; }

.ch-home .ch-search {
  width: 50%;            /* MadCap|searchBarProxy */
  margin: 0 auto;
  position: relative;
}
.ch-home .ch-search .search-bar {
  width: 100%;
  position: relative;
  margin: 0 auto;
}
.ch-home .ch-search .search-field {
  width: 100%;
  height: 3em;
  padding-left: 10px;
  padding-right: 110px;    /* clear the filter and submit buttons */
  margin: 0;
  border: none;
  border-radius: 20px;
  background: #fafcfb;
  color: #5F5F5F;
  font: inherit;
  box-sizing: border-box;
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.ch-home .ch-search .search-field::placeholder { color: #5F5F5F; }
.ch-home .ch-search .search-field::-webkit-search-cancel-button { display: none; }

.ch-home .ch-search .search-filter-wrapper {
  position: absolute;
  top: 0;
  right: 56px;
  font-size: 1em;
}
.ch-home .ch-search .search-filter {
  float: left;
  width: 45px;
  height: 3em;
  box-sizing: border-box;
  border-top: none;
  border-bottom: none;
  border-left: solid 1px #000000;
  border-right: solid 1px #000000;
  background: #fafcfb url('../images/filter-outline.png') no-repeat center center;
  cursor: pointer;
}
.ch-home .ch-search .search-filter.selected {
  background-image: url('../images/filter.png');
}

.ch-home .ch-search .search-filter-content {
  display: none;
  position: absolute;
  right: 0;
  top: 3em;
  z-index: 2;
  border-radius: 0 0 4px 4px;
  line-height: normal;
  text-align: left;
  overflow: auto;
  white-space: nowrap;
  color: #043c4d;
  background-color: #fafcfb;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
}
.ch-home .ch-search .search-filter-wrapper.open .search-filter-content {
  display: block;
}
.ch-home .ch-search .search-filter-content ul {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.ch-home .ch-search .search-filter-content ul li { padding: 0; margin: 0; }
.ch-home .ch-search .search-filter-content ul li button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ch-home .ch-search .search-filter-content ul li button:hover,
.ch-home .ch-search .search-filter-content ul li button:focus {
  font-weight: bold;
}

.ch-home .ch-search .search-submit-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1em;
}
.ch-home .ch-search .search-submit {
  width: 56px;
  height: 3em;
  padding: 0;
  border: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: var(--CH-Color) url('../images/search-icon.png') no-repeat center center;
  cursor: pointer;
  box-sizing: border-box;
}

/* Flare's visually-hidden helper. */
.ch-home .invisible-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Material sets `html { font-size: 125% }` (137.5% on wide viewports), but the
   Flare stylesheets were written against the browser default of 16px, and they
   are almost entirely em-based. Left at 125% every Flare dimension renders 25%
   oversized. Reset to 100% on the home page so production's em maths lands on
   production's pixels. Specificity (0,1,1) beats Material's bare `html`
   selector in every media query.

   Do NOT lift this to a global rule: Material's `.md-typeset` is `.8rem`, which
   against the 125% root already equals production's 16px base, so a global
   reset shrinks every topic page by 20%. */
html:has(.ch-home) { font-size: 100%; }

/* MainStyles.css sets `img { border: solid 1px #d3d3d3 }` for content images
   (Flare opts out per-image with .no-border). That rule now reaches Material's
   chrome, boxing the header logo, so exclude chrome images. */
.ch-home .md-header img,
.ch-home .md-footer img,
body:has(.ch-home) .md-header img,
body:has(.ch-home) .md-footer img { border: none; }

/* ===========================================================================
   TOP NAVIGATION - the tier switcher
   Ported from Skins/Fluid/Stylesheets/Styles.css (ul.navigation rules). It sits
   inside the header row (overrides/partials/header.html) because production puts
   the logo and the tier links on one navy bar; as a separate bar underneath it
   read as a doubled strip. Flare opens sub-menus with JS on mouseenter; CSS
   :hover / :focus-within does the same job, so no script is needed.
   =========================================================================== */

/* Production's header: nav.title-bar has 10px padding top and bottom, and its
   nav rows are line-height 45px + 10px padding = 65px, so the navy bar is ~85px
   tall. The inner row is Flare's .outer-row (max-width 80%, 1em sides) - the
   same band as the content columns below it; Material's default 61rem grid cap
   made the header narrower than everything else. */
.md-header__inner {
  max-width: 80%;
  min-height: 85px;
  padding: 10px 1em;
  align-items: center;
}

/* The three-column layout shares that band. Material caps .md-grid at 61rem,
   which held the text column narrower than production's and made lines wrap
   earlier. */
.md-main__inner {
  max-width: 80%;
}

/* The logo asset is 201x23 and production renders it 1:1
   (Skins/Fluid .title-bar-layout a.logo { width: 201px; height: 23px }).
   Sizing it in rem scaled it against Material's 125% root, which upscaled a
   23px-tall bitmap and left it visibly soft. Pinned to native pixels. */
.md-header__button.md-logo { padding: 0; }
.md-header__button.md-logo img {
  width: 201px;
  height: 23px;
  max-width: none;
}

/* Below the drawer breakpoint Material hides the logo and shows the site name
   instead - but the site name is hidden here, to match production's header, so
   that left the narrow header with no branding at all. Production keeps the logo
   beside its off-canvas menu button, so it is kept here too. */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo { display: block; order: -1; }
  .md-header__button.md-logo img { width: 150px; height: 17px; }
}

.ch-topnav {
  margin-left: auto;            /* .navigation-wrapper justifies to flex-end */
  flex: 0 1 auto;
  min-width: 0;
}

.ch-topnav ul.navigation {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  color: #FAF9F6;
  font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
}

.ch-topnav ul.navigation li {
  position: relative;
  list-style: none;
  margin: 0;
  color: #FAF9F6;
}
.ch-topnav ul.navigation > li { display: block; }

.ch-topnav ul.navigation a {
  text-decoration: none;
  color: #FAF9F6;
  font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
}
.ch-topnav ul.navigation li > a {
  display: block;
  /* Skins/Fluid: line-height 45px, padding 10px 15px. */
  line-height: 45px;
  padding: 10px 15px;
  color: #FAF9F6;
}

/* The tier you are in is marked, as Flare marks the active TOC branch. */
.ch-topnav ul.navigation > li.is-current > a {
  font-weight: bold;
  box-shadow: inset 0 -3px 0 var(--CH-Color);
}

/* Sub-menus animate in via opacity/visibility, as the skin does. */
.ch-topnav ul.navigation ul {
  z-index: 1000;
  width: auto;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  background-color: #043c4d;
  transition: all 100ms ease-in;
  visibility: hidden;
  opacity: 0;
  max-height: 70vh;
  overflow-y: auto;
}
.ch-topnav ul.navigation > li.has-children::after {
  content: ' ';
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  bottom: 0;
  left: 50%;
  margin-left: -8px;
  border-bottom-color: #043c4d;
  transition: all 100ms ease-in;
  visibility: hidden;
  opacity: 0;
}
.ch-topnav ul.navigation li:hover > ul,
.ch-topnav ul.navigation li:focus-within > ul,
.ch-topnav ul.navigation > li.has-children:hover::after,
.ch-topnav ul.navigation > li.has-children:focus-within::after {
  visibility: visible;
  opacity: 1;
}

.ch-topnav ul.navigation li li { padding: 0 10px; }
.ch-topnav ul.navigation ul > li { line-height: 15px; }
.ch-topnav ul.navigation ul > li > a {
  padding: 10px;
  text-align: left;
  line-height: 15px;
  color: #FAF9F6;
}
.ch-topnav ul.navigation ul > li > a:hover {
  color: #FAF9F6;
  font-weight: bold;
}

/* The last items would otherwise open past the right edge. */
.ch-topnav ul.navigation > li:nth-last-child(-n+3) > ul { left: auto; right: 0; }

@media screen and (max-width: 76.1875em) {
  /* Material switches to its drawer here, as production switches to off-canvas.
     Hide the bar rather than let it wrap. */
  .ch-topnav { display: none; }
}

/* ---- Search results page ------------------------------------------------- */
.ch-search-page .search-container { margin: 2rem 0 2.5rem; }

/* Reuse the home search bar styling, which lives under .ch-home, on this page
   too - the bar is identical in production. */
.ch-search-page .ch-search {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  position: relative;
}
.ch-search-page .ch-search .search-bar { width: 100%; position: relative; }
.ch-search-page .ch-search .search-field {
  width: 100%;
  height: 3em;
  padding-left: 10px;
  padding-right: 110px;
  border: solid 1px #d3d3d3;
  border-radius: 20px;
  background: #fafcfb;
  color: #5F5F5F;
  font: inherit;
  box-sizing: border-box;
}
.ch-search-page .ch-search .search-field::-webkit-search-cancel-button { display: none; }
.ch-search-page .ch-search .search-filter-wrapper { position: absolute; top: 0; right: 56px; }
.ch-search-page .ch-search .search-filter {
  float: left;
  width: 45px;
  height: 3em;
  box-sizing: border-box;
  border-left: solid 1px #000000;
  border-right: solid 1px #000000;
  background: #fafcfb url('../images/filter-outline.png') no-repeat center center;
  cursor: pointer;
}
.ch-search-page .ch-search .search-filter.selected { background-image: url('../images/filter.png'); }
.ch-search-page .ch-search .search-filter-content {
  display: none;
  position: absolute;
  right: 0;
  top: 3em;
  z-index: 2;
  border-radius: 0 0 4px 4px;
  text-align: left;
  white-space: nowrap;
  color: #043c4d;
  background-color: #fafcfb;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
}
.ch-search-page .ch-search .search-filter-wrapper.open .search-filter-content { display: block; }
.ch-search-page .ch-search .search-filter-content ul { list-style: none; margin: 0; padding: 6px; }
.ch-search-page .ch-search .search-filter-content ul li { margin: 0; padding: 0; }
.ch-search-page .ch-search .search-filter-content ul li button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ch-search-page .ch-search .search-filter-content ul li button:hover,
.ch-search-page .ch-search .search-filter-content ul li button:focus { font-weight: bold; }
.ch-search-page .ch-search .search-submit-wrapper { position: absolute; top: 0; right: 0; }
.ch-search-page .ch-search .search-submit {
  width: 56px;
  height: 3em;
  padding: 0;
  border: none;
  border-radius: 0 20px 20px 0;
  background: var(--CH-Color) url('../images/search-icon.png') no-repeat center center;
  cursor: pointer;
  box-sizing: border-box;
}
.ch-search-page .invisible-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.md-typeset ul.ch-results { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.md-typeset ul.ch-results > li {
  margin: 0 0 1.6rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid #e4e4e4;
}
.md-typeset ul.ch-results > li:last-child { border-bottom: none; }
.md-typeset .ch-result__title { font-size: 1.1em; font-weight: bold; }
.md-typeset .ch-result__path {
  color: #17A35F;
  font-size: 0.75em;
  margin: 2px 0 6px;
}
.md-typeset .ch-result__snippet { margin: 0; color: #5a5a5a; }
.md-typeset .ch-result__snippet mark {
  background: rgba(61, 218, 133, 0.28);
  color: inherit;
}

/* ===========================================================================
   TOPIC PAGES
   Ported from MainStyles.css. Topic pages keep Material's `.md-typeset`
   wrapper (unlike the home page), and Material's typeset base is
   `font-size: .8rem` against its 125% root = 16px, which already matches
   production's 1rem base - so em values here land on production's pixels and
   the root must NOT be reset globally.
   =========================================================================== */

/* MainStyles: a:link { color: #2d8dcc; font-weight: bold } */
.md-typeset a { font-weight: bold; }
.md-typeset h5 { color: #0d0d0d; }
.md-typeset h6 { color: #0d0d0d; }

/* MainStyles: img { max-width: 100%; border: solid 1px #d3d3d3 }
   Flare opts individual images out with .no-border. */
.md-typeset img {
  max-width: 100%;
  border: solid 1px #d3d3d3;
}
.md-typeset img.no-border { border: solid 2px transparent; }

/* Tables. Flare generated a stylesheet per table style and the converter
   stripped the classes; tools/mkdocs_hooks.py re-applies them from
   tools/table_styles.<section>.json (recorded from production, in document
   order). Values from Content/Resources/Tablestyles/:
     DescriptionSettings  head #00d084 on #ffffff text, 2px #c0c0c0 rule under
                          it; Body1 rows #ededed, Body2 rows transparent; no row
                          separators; 3px cell padding; 3px radius
     Known Issues         table #f5f5f5, head has no fill, 2px #c0c0c0 under the
                          head, 1px #a9a9a9 between rows; 2px padding; 5px radius
     Known Issues-Heading as above with a #dcdcdc head fill
     Basic                Flare's built-in style. One table uses it, and the
                          exports ship no Basic.css for it, so production
                          renders that table with no fill and no zebra - which
                          is what the base rules below give it.
   Untagged tables fall back to the DescriptionSettings look, which is what most
   of the content uses. */
.md-typeset table:not([class]),
.md-typeset table[class^="ts-"] {
  border-collapse: separate;
  /* Flare sets cellspacing per table style: 2 on DescriptionSettings and Basic
     (223 and 2 tables), 0 on both Known Issues styles (150). At 0 throughout, a
     row of cells reads as one continuous block - the glossary's A-Z strip became
     a single grey bar instead of 26 separate ones. */
  border-spacing: 2px;
  /* MainStyles `table { padding: 2px }`, which applies to every table there. */
  padding: 2px;
  font-size: inherit;
  box-shadow: none;
  border: none;
  border-radius: 3px;
}
.md-typeset table.ts-known-issues,
.md-typeset table.ts-known-issues-heading { border-spacing: 0; }
.md-typeset table:not([class]) th,
.md-typeset table[class^="ts-"] th {
  text-align: left;
  font-weight: bold;
  padding: 3px 8px;
}
.md-typeset table:not([class]) td,
.md-typeset table[class^="ts-"] td {
  border: none;
  padding: 3px 8px;
  vertical-align: top;
}

/* DescriptionSettings' mcTableColumnStyle sets Column1 to 30%, and Flare puts
   that same Column1 class on every <col> of every table - all 375 across the
   three exports, never a Column2. So the 30% governs every column, not just the
   first, and the browser scales them to fill the table: two columns land at
   50/50, three at thirds. Scoping it to the first column left the others auto,
   which rendered two-column tables at 30/70 - visible on the release notes,
   where production splits Release Date and Version Number evenly.

   The 143 tables that also carry inline per-<col> px widths agree with that:
   of the 41 with a width on every column, every one is within 0.3pp of equal.
   There is no per-table variation left to reproduce.

   Known Issues and Known Issues-Heading set no Column1 width at all, so those
   tables stay content-sized and are deliberately not covered here. */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td,
.md-typeset table.ts-descriptionsettings:not(.ch-cols) th,
.md-typeset table.ts-descriptionsettings:not(.ch-cols) td { width: 30%; }

/* 100 tables carry production's own per-table column widths instead, restored
   as a <colgroup> by mkdocs_hooks.py, which marks them .ch-cols. A width on the
   cells would compete with the colgroup, so the default above stands down for
   them - see tools/generate_table_columns.py for where the widths come from. */
/* Every table in the Flare exports carries an inline `width: 100%` - 363 of the
   375 across the three tiers, and the rest declare no width at all - so
   production's tables fill the content column.

   Material declares `display: inline-block` for its own tables and then
   overrides it back to `display: table` in a later rule. Only the first half was
   restated here, which left the Flare-tagged tables shrink-to-fit: a two-column
   release-notes table collapsed to about a third of the column, wrapping
   "Release Date" onto two lines and "5th March 2026" onto three. Both halves are
   stated now, and for the untagged tables too - Material leaves those at
   shrink-to-fit as well, since its `width: 100%` only applies to the
   `.md-typeset__table` wrapper, which these pages do not have. */
.md-typeset table:not([class]),
.md-typeset table[class^="ts-"] {
  display: table;
  width: 100%;
  max-width: 100%;
  touch-action: auto;
}

/* First-column code spans are left to wrap. They were held unbreakable here, to
   stop the auto table layout splitting an option name mid-token ("AcceptEul" /
   "a") when the column collapsed to its narrowest fit. Restoring production's
   column widths above removes the reason: the column now has a width of its own,
   and an option name fits inside it.

   Keeping the nowrap actively broke three things, because a nowrapped cell's
   min-content width beats any column width the table is given. Production has no
   such rule. The Docker page is the clearest case - 82%/15% here against
   production's even split, its Description column squeezed to a word a line -
   and it also forced the scroll container on screen and clipped every row off
   the right of the page in print. Material's own `word-break: break-word` on
   code handles a path that carries no spaces to break at. */

/* DescriptionSettings (and the fallback). */
.md-typeset table:not([class]) th,
.md-typeset table.ts-descriptionsettings th {
  background-color: #00d084;
  color: #ffffff;
  border-bottom: solid 2px #c0c0c0;
}
.md-typeset table:not([class]) tbody tr:nth-child(odd),
.md-typeset table.ts-descriptionsettings tbody tr:nth-child(odd) { background-color: #ededed; }
.md-typeset table:not([class]) tbody tr:nth-child(even),
.md-typeset table.ts-descriptionsettings tbody tr:nth-child(even) { background-color: transparent; }

/* Known Issues / Known Issues-Heading - grey, used by the release notes. */
.md-typeset table.ts-known-issues,
.md-typeset table.ts-known-issues-heading {
  background-color: #f5f5f5;
  border-radius: 5px;
}
.md-typeset table.ts-known-issues th,
.md-typeset table.ts-known-issues-heading th {
  color: #0d0d0d;
  border-bottom: solid 2px #c0c0c0;
  padding: 2px 8px;
}
.md-typeset table.ts-known-issues-heading th { background-color: #dcdcdc; }
.md-typeset table.ts-known-issues td,
.md-typeset table.ts-known-issues-heading td {
  border-bottom: solid 1px #a9a9a9;
  padding: 2px 8px;
}

.md-typeset table[class^="ts-"] tbody tr:hover,
.md-typeset table:not([class]) tbody tr:hover { background-color: #e6f7ef; }

/* Breadcrumbs. Production: "You are here: Troubleshooting Packages >
   Troubleshooting Errors" in small italics (MainStyles MadCap|breadcrumbsProxy:
   font-size .7em, italic). An absolute size is used because Material's .md-path
   is already reduced, so a further .7em compounded into unreadably small text.
   0.7em of production's 16px base = 11.2px. */
.md-path {
  font-size: 11.2px;
  font-style: italic;
  margin: 0;
}
.md-path::before { content: "You are here: "; }

/* Material 9.5.50 ships no `.md-path` rules - `navigation.path` arrived later -
   so the trail is styled from scratch here. Without this the <ol> renders as a
   numbered list. */
.md-path__list {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-path__item {
  display: inline;
  font-style: italic;
}
.md-path__item + .md-path__item::before {
  content: " > ";
  font-style: normal;
}
/* MainStyles a:link - the trail's ancestors are blue links, the current topic
   is plain text. */
.md-path__link { font-weight: normal; }
.md-path__link[href] { color: #2d8dcc; }
.md-path__link:not([href]) { color: inherit; }

/* ---- Callouts (Note / Tip / Warning) -------------------------------------
   MainStyles.css p.note, p.note-green and p.warning. Flare generated the
   leading label with `mc-auto-number-format`; the conversion inlined it as
   bold text instead, which is visually equivalent, so the label stays in the
   content and only the box is styled here. tools/mkdocs_hooks.py adds the
   class at render time. Icons are production's own. */
.md-typeset p.callout {
  border-radius: 6px;
  line-height: 18px;
  overflow: hidden;
  padding: 15px 15px 15px 75px;
  background-position: 18px 50%;
  background-repeat: no-repeat;
  background-size: 40px;
}
.md-typeset p.callout--note {
  background-color: #f0f7fb;
  border: solid 1px #3498db;
  background-image: url('../flare/Images/Assets/Icons/note_icon.png');
}
.md-typeset p.callout--tip {
  background-color: #e6f7e6;
  border: solid 1px #80d880;
  background-image: url('../flare/Images/Assets/Icons/tip.png');
}
.md-typeset p.callout--warning,
.md-typeset p.callout--important,
.md-typeset p.callout--caution {
  background-color: #ffb3b3;
  border: solid 1px #ff4d4d;
  background-image: url('../flare/Images/Assets/Icons/warning.png');
}

/* Tables fill the content column, so a cell that cannot be made narrow enough
   would push the table out over the "On This Page" panel. The table itself
   cannot scroll - `overflow` on a table needs `display: block`, which shrink-
   wraps its columns - so mkdocs_hooks.py wraps each one in this. Only a table
   that actually exceeds the column shows a scrollbar. */
.md-typeset .ch-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
/* Production carries a print button, and a scroll container clips what it cannot
   show on paper - so the wrapper stops being one. */
@media print {
  .md-typeset .ch-table-scroll { overflow-x: visible; }
  /* Nothing to relax here any more: the first-column nowrap is gone, so
     Material's own `@media print { code { white-space: pre-wrap } }` applies. */
}

/* Material's `table:not([class]) + *` margin no longer reaches past the wrapper.
   It only ever applied to the 9 untagged tables, never the 355 Flare-styled
   ones, and production gives a table no margin at all - separation comes from
   the paragraphs around it - so all 364 now space alike, which is production's
   behaviour rather than Material's. */

/* Search-hit highlighting. Arriving from a result, ch-search.js marks the query
   in the topic body the way production does, wrapping each hit in
   span.SearchHighlight plus a per-term SearchHighlightN. MainStyles gives
   SearchHighlight and all ten numbered variants the same #ffd226, so one rule
   covers them; the number is kept only for the same markup shape. */
.md-typeset span[class*="SearchHighlight"] {
  background: #ffd226;
}

/* Flare badges. Production marks a topic with a small coloured span; the
   conversion dropped it and mkdocs_hooks.py puts it back with production's own
   class name, so these values port straight across from MainStyles.

   `highlight-round-red` opens with `background: #add0aa` - green - and then sets
   `background-color: #b22222` after it, so the red is what applies. Same
   copy-paste as div.cta's undefined `--CH-primary-color`; the effective result
   is what is reproduced.

   MainStyles also defines -green and -blue. No topic in any of the three
   exports uses them, so they are not carried. */
.md-typeset span.highlight-round,
.md-typeset span.highlight-round-red,
.md-typeset span.highlight-round-black { font-weight: bold; }
.md-typeset span.highlight-round {
  background-color: #d5d3d3;
  border-radius: 8px;
  padding: 5px;
}
.md-typeset span.highlight-round-red {
  background-color: #b22222;
  color: #f5f5f5;
  border-radius: 5px;
  padding: 2px;
}
.md-typeset span.highlight-round-black {
  background-color: #494949;
  color: #ffffff;
  border-radius: 8px;
  padding: 5px;
}

/* MainStyles: span.bold { font-weight: bold } - font-weight only, no darker
   colour, unlike the Guardian stylesheet. The conversion kept these spans in
   places, so the rule is needed for that text to read as bold at all. */
.md-typeset span.bold { font-weight: bold; }

/* ===========================================================================
   TOPIC PAGE CHROME
   Sidebar, search bar and toolbar shaped to match production's Flare layout.
   =========================================================================== */

/* ---- Left sidenav -------------------------------------------------------
   overrides/partials/nav.html renders this tier's sections; this matches their
   look. Flare sets data-mc-include-indicator="False", so the expand chevrons
   Material draws are hidden. */
.ch-sidenav .md-nav__icon { display: none; }

/* Material repeats the site name at the top of the sidebar; production does
   not. Hidden on desktop only - below the drawer breakpoint it is the drawer's
   own header and must stay. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .ch-sidenav > .md-nav__title { display: none; }
}

/* Production's active topic is green; ancestors stay dark. */
.md-nav__link--active,
.md-nav__link--active > span,
.md-nav__item .md-nav__link--active {
  color: #0D8F4F;
  font-weight: 700;
}
/* Production's sidenav sets its inactive rows in grey, with only the active
   topic picked out. */
.ch-sidenav .md-nav__link { font-weight: normal; color: #999999; }
.ch-sidenav .md-nav__link:hover { color: #0D2839; }
.ch-sidenav .md-nav__item--active > .md-nav__link,
.ch-sidenav .md-nav__container > .md-nav__link { color: #999999; }

/* ---- Per-topic feedback footer -----------------------------------------
   Production closes every topic with a feedback question and a Contact Support
   button (overrides/partials/ch-topic-footer.html). The row sits below the three
   columns and spans the same outer row as the search bar, so it reuses that
   width; the cells are MainStyles' div.NewRowClass5 widths, which line up with
   the sidenav / content / "On This Page" columns above them.

   The row is outside .md-typeset, so Material's typography does not reach it.
   .8rem against Material's 125% root is 16px, production's body size. */
.ch-topic-feedback {
  background-color: var(--md-default-bg-color);
  padding: 1rem 0 2rem;
}
.ch-topic-feedback__inner {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 1em;
  display: flex;
  font-size: .8rem;
  line-height: 1.7em;
}
.ch-topic-feedback__spacer { width: 16.667%; }
.ch-topic-feedback__ask { width: 41.667%; }
.ch-topic-feedback__help { width: 33.333%; }
.ch-topic-feedback p { margin: 0 0 .6em; }
.ch-topic-feedback span.bold { font-weight: bold; }

/* MainStyles `button`, scoped to these two so Material's own controls - the
   search reset, the code copy button - keep their own styling. */
.ch-topic-feedback .feedback-button {
  background: #ffffff;
  color: #0D2839;
  font-family: 'Segoe UI Light', 'Leelawadee UI Semilight', sans-serif, Arial;
  border: solid 3px #0D2839;
  padding: 10px;
  border-radius: 17px;
  min-width: 4.5em;
  cursor: pointer;
}
.ch-topic-feedback .feedback-button + .feedback-button { margin-left: .5em; }
.ch-topic-feedback .feedback-button:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: scale(1.01);
}

/* MainStyles `div.cta` as it resolves on a topic page, where StylesForHomePage
   is not loaded. Production's rule opens with `background: var(--CH-primary-
   color)`, a variable it never defines, so the `background-color: #ffffff` that
   follows is what applies - white with a navy border. The conflicting div.cta
   the README warns about is StylesForHomePage's, which only the home page
   loads; these selectors are scoped to this row and cannot reach it. */
.ch-topic-feedback a.cta { text-decoration: none; }
.ch-topic-feedback div.cta {
  padding: 2px 0;
  width: 162px;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
  font-weight: normal;
  color: #0D2839;
  background-color: #ffffff;
  border: solid 3px #0D2839;
  border-radius: 25px;
  font-family: 'Segoe UI Light', Arial;
  text-align: center;
}
.ch-topic-feedback div.cta p { margin: 0; }
.ch-topic-feedback div.cta:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  transform: scale(1.01);
}

/* ---- Topic page search bar ---------------------------------------------
   Production spans it the full outer row, above the three columns - it runs over
   the sidenav too, not just the content column. */
.ch-topic-search {
  background-color: var(--md-default-bg-color);
  padding: 1rem 0 .2rem;
}
.ch-topic-search__inner {
  /* Flare's .outer-row: max-width 80% of the viewport, centred, 1em side
     padding (Skins/Fluid/Stylesheets/Styles.css). Viewport-relative, not a
     fixed width - at a fixed rem width it aligned with nothing. */
  max-width: 80%;
  margin: 0 auto;
  padding: 0 1em;
}

/* The bar itself reuses the home-page rules, which are scoped to .ch-home, so
   they are restated here for this context. */
.ch-topic-search .ch-search { width: 100%; position: relative; margin: 0; }
.ch-topic-search .ch-search .search-bar { width: 100%; position: relative; }
.ch-topic-search .ch-search .search-field {
  width: 100%;
  height: 3em;
  padding-left: 10px;
  padding-right: 110px;
  border: solid 1px #d3d3d3;
  border-radius: 20px;
  background: #fafcfb;
  color: #5F5F5F;
  font: inherit;
  box-sizing: border-box;
}
.ch-topic-search .ch-search .search-field::-webkit-search-cancel-button { display: none; }
.ch-topic-search .ch-search .search-filter-wrapper { position: absolute; top: 0; right: 56px; }
.ch-topic-search .ch-search .search-filter {
  float: left;
  width: 45px;
  height: 3em;
  box-sizing: border-box;
  border-left: solid 1px #000000;
  border-right: solid 1px #000000;
  background: #fafcfb url('../images/filter-outline.png') no-repeat center center;
  cursor: pointer;
}
.ch-topic-search .ch-search .search-filter.selected { background-image: url('../images/filter.png'); }
.ch-topic-search .ch-search .search-filter-content {
  display: none;
  position: absolute;
  right: 0;
  top: 3em;
  z-index: 6;
  border-radius: 0 0 4px 4px;
  text-align: left;
  white-space: nowrap;
  color: #043c4d;
  background-color: #fafcfb;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
}
.ch-topic-search .ch-search .search-filter-wrapper.open .search-filter-content { display: block; }
.ch-topic-search .ch-search .search-filter-content ul { list-style: none; margin: 0; padding: 6px; }
.ch-topic-search .ch-search .search-filter-content ul li { margin: 0; padding: 0; }
.ch-topic-search .ch-search .search-filter-content ul li button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ch-topic-search .ch-search .search-filter-content ul li button:hover,
.ch-topic-search .ch-search .search-filter-content ul li button:focus { font-weight: bold; }
.ch-topic-search .ch-search .search-submit-wrapper { position: absolute; top: 0; right: 0; }
.ch-topic-search .ch-search .search-submit {
  width: 56px;
  height: 3em;
  padding: 0;
  border: none;
  border-radius: 0 20px 20px 0;
  background: var(--CH-Color) url('../images/search-icon.png') no-repeat center center;
  cursor: pointer;
  box-sizing: border-box;
}
.ch-topic-search .invisible-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Material's header search is redundant now that every page carries the Flare
   bar, and production's header search is the same component. */
.md-header .md-search { display: none; }

/* "On This Page" mini-TOC: production renders its links green. */
.md-nav--secondary .md-nav__title { font-size: .72rem; font-weight: 700; color: #0D2839; }
.md-nav--secondary .md-nav__link { color: #17A35F; }

/* Production rules the "On This Page" panel off from the content column. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary { border-left: solid 1px #e4e4e4; }
}

/* ---- Breadcrumb row + Flare topic toolbar --------------------------------
   Production's div.top-bar puts the toolbar first and the breadcrumb trail
   after it, both inside the content column. Icons are production's own
   (Skins/Default/.../printer.png etc.), which are byte-identical in the
   Guardian and Alchemy exports. */
.ch-pathbar-band {
  background-color: var(--md-default-bg-color);
  padding: .2rem 0 0;
}
.ch-pathbar-band__inner {
  /* Same Flare .outer-row geometry as the search bar, with the rule production
     draws between this row and the columns. */
  max-width: 80%;
  margin: 0 auto;
  padding: 0 1em .5rem;
  border-bottom: solid 1px #e4e4e4;
}
.ch-pathbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ch-pathbar .md-path { flex: 1 1 auto; }

.ch-topic-tools {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
}
.ch-topic-tool {
  display: block;
  width: 26px;
  height: 22px;
  padding: 0;
  border: solid 1px #d3d3d3;
  border-radius: 3px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 15px 15px;
  cursor: pointer;
}
.ch-topic-tool:hover { border-color: var(--CH-Color); }
.ch-topic-tool--clear-highlight { background-image: url('../images/icon-highlight.png'); }
.ch-topic-tool--print { background-image: url('../images/icon-print.png'); }
.ch-topic-tool--prev  { background-image: url('../images/icon-prev.png'); }
.ch-topic-tool--next  { background-image: url('../images/icon-next.png'); }
.ch-topic-tool.is-disabled { opacity: .35; cursor: default; }
.ch-topic-tool.is-disabled:hover { border-color: #d3d3d3; }

@media print {
  .ch-topic-tools,
  .ch-topic-search,
  .ch-pathbar-band,
  .ch-topnav { display: none; }
}

/* ---- Top spacing above the content --------------------------------------
   Material stacks ~60px above the first heading that production does not have:
   .md-main__inner margin-top 1.5rem (30px at the 125% root), .md-content__inner
   padding-top .6rem (12px), and a ::before spacer of .4rem (8px). Production's
   equivalent is just `.main-section > .outer-row { padding-top: 1em }` plus the
   h1's own 30px margin, so the stack is removed here and the h1 margin (already
   matched to MainStyles) provides the gap. */
.md-main__inner { margin-top: 0; }
.md-content__inner { padding-top: 0; }
.md-content__inner::before { display: none; }

/* Production's outer row carries 1em of top padding; mirror it once on the
   column band rather than per column. Pinned in px because em here would
   resolve against Material's 20px root, not production's 16px base. */
.md-main { padding-top: 16px; }

/* The sidenav sat lower than production's for the same reason. */
.md-sidebar { padding-top: .3rem; }

/* The first heading should not add its 30px on top of the band padding when it
   is the very first thing in the column. */
.md-typeset > h1:first-child { margin-top: .4rem; }