/* Cloudhouse Guardian docs theme.
   Values below are taken from the production Flare output:
     Guardian Docs/HTML5/Content/Resources/Stylesheets/MainStyles.css
     Guardian Docs/HTML5/Content/Resources/Stylesheets/StylesForHomePage.css
   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 :root in MainStyles.css) ------------------- */
:root {
  --CH-primary-color: #3DDA85;
  --hover-CH-secondary-color: #0D1C3F;
  --button-text: #043c4d;
}

[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);
  /* Production topic pages are white (MainStyles body background-color: #fff),
     not the cream the earlier build assumed. */
  --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;
  /* Topic pages lead with Segoe UI; the home page flips this (see .ch-home). */
  --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 nav 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;
}


/* ===========================================================================
   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.
   =========================================================================== */

/* 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; }
body:has(.ch-home) .md-grid { max-width: 100%; }
body:has(.ch-home) .md-content { margin: 0; padding: 0; }

/* Production hides the header search on the home page in favour of the big
   one below the hero. Material's stays in the DOM so its index still backs the
   home box (see assets/javascripts/home-search.js). */
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-primary-color);
  outline-offset: 3px;
}

/* ---- 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;
  /* StylesForHomePage.css .search-field */
  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-primary-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. */
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
   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 section 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 search bar and breadcrumbs 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 ~360px narrower than production's and made lines
   wrap earlier - the "tighter text" difference. */
.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 to ~38px against Material's 125% root, which
   upscaled a 23px-tall bitmap by 1.65x - too large and visibly soft. Pinned to
   native pixels so it is crisp and matches production. */
.md-header__button.md-logo { padding: 0; }
.md-header__button.md-logo img {
  width: 201px;
  height: 23px;
  max-width: none;
}

.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;
}

/* 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 few 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-primary-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; }

/* Images stay large inline, but shrink to thumbnails only where a full-size
   image would crowd the text: inline images written inside a note, and images
   in table cells. A screenshot on its own line is always a separate paragraph,
   never part of the preceding note, so it keeps full size. The glightbox plugin
   opens the full image in an overlay on click. */
.md-typeset .callout img,
.md-typeset table img {
  max-height: 120px;
  width: auto;
  cursor: zoom-in;
}

/* 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.json (recorded from production, in document order).
     DescriptionSettings  green header  #00d084 / #faf9f6, body rows #ededed
     Known Issues         grey header   #dcdcdc, body rows #f5f5f5
   Untagged tables fall back to the DescriptionSettings look. */
.md-typeset table:not([class]),
.md-typeset table[class^="ts-"] {
  border-collapse: collapse;
  font-size: inherit;
  box-shadow: none;
  border: none;
  /* Production set width: 100% on every table (411 of 412 in the Flare
     output). Material sizes only table:not([class]), so the tagged tables were
     left at width: auto and each shrank to fit its own content - which is why
     a known issue's heading and detail tables ended up different widths, with
     their right edges out of line. */
  width: 100%;
}
.md-typeset table:not([class]) th,
.md-typeset table[class^="ts-"] th {
  text-align: left;
  font-weight: bold;
  padding: .6em .8em;
}
.md-typeset table:not([class]) td,
.md-typeset table[class^="ts-"] td {
  border: none;
  padding: .6em .8em;
  vertical-align: top;
}

/* DescriptionSettings (and the fallback). Flare draws no rules between these
   cells at all - every generated cell style sets border-right and
   border-bottom to 0px. The separation is a gap, not a line: the table style
   is border-collapse: separate with border-spacing: 2px (the class beats
   MainStyles' `table { border-collapse: collapse }` on specificity, and the
   markup carries cellspacing="2"), so 2px of page background sits between
   every cell. On the #ededed rows that reads as the pale gridlines production
   shows and this was missing - it had one flat 1px #c0c0c0 rule under each row
   instead, which production does not draw. The only real rule is the 2px
   #c0c0c0 beneath the green header. */
.md-typeset table:not([class]),
.md-typeset table.ts-descriptionsettings {
  border-collapse: separate;
  border-spacing: 2px;
}
.md-typeset table:not([class]) th,
.md-typeset table.ts-descriptionsettings th {
  background-color: #00d084;
  color: #faf9f6;
  border-bottom: solid 2px #c0c0c0;
}
/* The stripe goes on the cells, not the row - Flare's row styles are empty and
   it is the cell styles that carry #ededed. It matters here: in the separated
   model a row background paints across the border-spacing and would fill in
   the very gaps that draw the gridlines. */
.md-typeset table:not([class]) tbody tr:nth-child(odd) td,
.md-typeset table.ts-descriptionsettings tbody tr:nth-child(odd) td { background-color: #ededed; }
.md-typeset table:not([class]) tbody tr:nth-child(even) td,
.md-typeset table.ts-descriptionsettings tbody tr:nth-child(even) td { background-color: transparent; }

/* Known Issues / Known Issues-Heading - grey, used by the release notes.
   The values are Flare's own. The body is one flat #f5f5f5 - that colour is
   the table's background and the generated cell styles declare none of their
   own, so nothing alternates; the zebra striping here was ours, and it turned
   every Solution row white. The grey title row sits on a 2px rule and the body
   rows are divided by #a9a9a9, both heavier than the #dcdcdc used before.
   The last row is undivided: Flare closes the heading table with the table's
   own 1px #c0c0c0 border and the detail table with #f5f5f5, i.e. invisibly. */
.md-typeset table.ts-known-issues { background-color: #f5f5f5; }
.md-typeset table.ts-known-issues-heading {
  background-color: #f5f5f5;
  border-bottom: solid 1px #c0c0c0;
}
.md-typeset table.ts-known-issues th,
.md-typeset table.ts-known-issues-heading th {
  background-color: #dcdcdc;
  color: #0d0d0d;
  border-bottom: solid 2px #c0c0c0;
}
.md-typeset table.ts-known-issues td,
.md-typeset table.ts-known-issues-heading td { border-bottom: solid 1px #a9a9a9; }
.md-typeset table.ts-known-issues tbody tr:last-child td,
.md-typeset table.ts-known-issues-heading tbody tr:last-child td { border-bottom: none; }

/* Flare pinned the known-issue pair's first column with a <col>: 458px on the
   heading table (53 of 58 in production) and 115px on the two-column detail
   table (55 of 64). The conversion dropped the <col>s, so the two tables split
   at different points. The widths are absolute, as in production - the content
   band here is the same max-width: 80% as Flare's .outer-row, so they land in
   the same place - and auto table layout shrinks them on a narrow viewport
   rather than overflowing. tools/mkdocs_hooks.py adds .ki-detail; without it
   this would also squeeze the multi-column Known Issues tables, which
   production leaves to size themselves. */
.md-typeset table.ts-known-issues-heading td:first-child { width: 458px; }
.md-typeset table.ts-known-issues.ki-detail td:first-child { width: 115px; }

/* ...and separated the two version cells with a 1px #c0c0c0 rule. Only that
   pair: the heading table's first body cell (Flare's BodyB) carries
   border-right, while the detail table's (BodyE) sets border-right-width: 0,
   so the Problem/Solution rows stay undivided. */
.md-typeset table.ts-known-issues-heading td:first-child {
  border-right: solid 1px #c0c0c0;
}

/* Breadcrumbs. Production: "You are here: User Guide > Inventory" 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-top: 0;
}
.md-path::before { content: "You are here: "; }
.md-path .md-path__item { font-style: italic; }
.md-path a { font-weight: normal; }

/* ---- 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 .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;
}
/* A callout inside a table cell is a <div> the hook wraps around the
   trailing "**Note:**" run (cells cannot hold a block <p>); space it off
   from the text above it. */
.md-typeset td > .callout { margin-top: .6em; }
.md-typeset .callout--note {
  background-color: #f0f7fb;
  border: solid 1px #3498db;
  background-image: url('../flare/Images/Assets/Icons/note_icon.png');
}
.md-typeset .callout--tip {
  background-color: #e6f7e6;
  border: solid 1px #80d880;
  background-image: url('../flare/Images/Assets/Icons/tip.png');
}
.md-typeset .callout--warning,
.md-typeset .callout--important,
.md-typeset .callout--caution {
  background-color: #ffb3b3;
  border: solid 1px #ff4d4d;
  background-image: url('../flare/Images/Assets/Icons/warning.png');
}

/* MainStyles: span.bold { font-weight: bold; color: #0d0d0d } - production's
   bold text is also darker than body text. */
.md-typeset strong { color: #0d0d0d; }

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

/* ---- Left sidenav -------------------------------------------------------
   overrides/partials/nav.html already scopes the pane to the active section;
   this matches its 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, and it was overlapping the section heading. 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;
}
.ch-sidenav .md-nav__link { font-weight: normal; }

/* ---- Topic page search bar ---------------------------------------------
   Production spans it the full content width, above the breadcrumbs. */
.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 96rem it ran nearly edge to edge and 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;
  font-size: 1rem;
  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-primary-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 has none. */
.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; }

/* ---- Breadcrumb row + Flare topic toolbar --------------------------------
   Production puts print / previous / next at the right of the breadcrumb row.
   Icons are production's own (Skins/Default/.../printer.png etc.). */
.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-primary-color); }
.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-topnav { display: none; }
}

/* Breadcrumb band: same Flare .outer-row geometry as the search bar, with the
   rule beneath it that production draws before the three columns. */
.ch-pathbar-band {
  background-color: var(--md-default-bg-color);
  padding: .2rem 0 0;
}
.ch-pathbar-band__inner {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 1em .5rem;
  border-bottom: solid 1px #e4e4e4;
}

/* ---- 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. */
.md-main {
  /* Production's 1em is against a 16px base; em here would resolve against
     Material's 20px root, so this is pinned in px. */
  padding-top: 16px;
}

/* The sidenav sat ~24px 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; }