/* This css file is used for theme. See basic.css for layout. */

/* Self-hosted webfonts, matching www.netdevgroup.com (see static/fonts/).
   Subsets and unicode-ranges are copied verbatim from the website's
   /static/css/brands.css so the two properties render identically. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/inter-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;
}

/* Inter Tight is the narrow companion to Inter. The website does not use it;
   it stands in for the condensed face this theme lost when it moved off
   Roboto Condensed. Inter itself has no wdth axis, so font-stretch cannot
   substitute for a real narrow family. */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/inter-tight-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: "Inter Tight";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/inter-tight-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Fonts */
  --ndg-font-normal: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Inter Tight is the narrow companion to Inter, standing in for the old
     Roboto Condensed. Rules that use this token pair it with
     --ndg-tracking-tight; together they land within ~3% of the old width. */
  --ndg-font-condensed: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ndg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ndg-tracking-tight: -0.022em;
  /* Row pitch for the left rail. Default line-height:normal gives only 1.125
     here, which reads as cramped on long release-note trees. */
  --ndg-sidebar-line-height: 1.4;
  --ndg-font-awesome: "Font Awesome 5 Pro"; /* License by NDG */

  --ndg-content-width: 72rem;

  color-scheme: var(--color-scheme, light dark);

  /* Inherited, so every scroller on the page follows the theme instead of
     drawing the browser's own. */
  scrollbar-color: var(--ndg-scrollbar-thumb) var(--ndg-scrollbar-track);

  /* Color Palette */
  --ndg-mid-blue: #005B99;
  /* Brand blue lifted for dark surfaces. #005B99 on a dark ground measures
     2.2:1, which fails even the large-text minimum. This reaches 6.1:1, which
     clears body text and also the 3:1 a marker bar needs as a graphical
     object. Every dark-surface use of the brand goes through
     --ndg-brand-blue-adaptive below. */
  --ndg-mid-blue-dm: #4DA8E6;
  --ndg-light-blue: #DCECF7;
  --ndg-mid-green: #21B89B; /* #1ABC9C; */
  --ndg-light-green: #DBFAF4;
  --ndg-mid-orange: #e86f29; /* #ff7e32; */
  --ndg-light-orange: #FFEDD4;
  --ndg-mid-red: #E81224;
  --ndg-light-red: #FCE4EC;
  --ndg-purple: #693180;

  /* Slate ramp, from the website's tokens.css. Every neutral surface, border
     and muted text in this file is one of these, so a neutral is changed in
     one place rather than hunted for by hex value. */
  --ndg-slate-900: #1A2332;
  --ndg-slate-700: #313A4D;
  --ndg-slate-500: #4A5468;
  --ndg-slate-200: #CDD4DF;
  --ndg-slate-100: #E4E8EF;
  --ndg-slate-50: #EEF2F8;
  --ndg-slate-25: #F7F9FC;

  /* Line colour on dark surfaces, sampled from Sherpa's panel divider. The
     slate ramp cannot supply it: slate-700 is a light-mode body text colour
     first, and against the near-black dark grounds it draws a line brighter
     than either surface it separates. This sits just above them instead, so a
     divider reads as a seam rather than as a drawn rule. */
  --ndg-border-dm: #201F2B;

  /* Brand colors */
  --ndg-brand-blue: var(--ndg-mid-blue);
  /* Brand blue against whichever surface is under it. Used wherever the brand
     has to read as text or as a graphical mark. */
  --ndg-brand-blue-adaptive: light-dark(var(--ndg-brand-blue), var(--ndg-mid-blue-dm));
  /* Header surface. The website gives its header its own surface and hairline
     rather than reusing the page background, so the docs need their own pair
     instead of borrowing --ndg-sidebar-background and --ndg-border. */
  --ndg-header-background: light-dark(#FFFFFF, var(--ndg-slate-900));
  --ndg-header-border: light-dark(var(--ndg-slate-100), var(--ndg-border-dm));
  /* Product name in the wordmark. */
  --ndg-brand-name-color: var(--ndg-brand-blue-adaptive);

  /* Primary text colors */
  --ndg-light-text-color: var(--ndg-slate-700);
  --ndg-dark-text-color: var(--ndg-slate-25);
  --ndg-text-color: light-dark(var(--ndg-light-text-color), var(--ndg-dark-text-color));
  /* Text that should sit back from body text without dropping below 4.5:1. */
  --ndg-muted-fg: light-dark(var(--ndg-slate-500), var(--ndg-slate-200));

  /* Backround colors */
  --ndg-body-background: light-dark(var(--ndg-slate-25), #0A0912);
  --ndg-accent-background: var(--ndg-body-background);

  /* Heading colors */
  --ndg-heading-color: light-dark(var(--ndg-slate-900), var(--ndg-dark-text-color));

  /* Border colors */
  --ndg-border: light-dark(var(--ndg-slate-100), var(--ndg-border-dm));

    /* Sidebar colors */
  --ndg-sidebar-background: var(--ndg-accent-background);
  --ndg-sidebar-color: var(--ndg-text-color);
  /* Same pair as body links. Flat brand blue measures 2.8:1 on the dark
     rail, which fails body text; the adaptive pair reaches 7.6:1 there and
     leaves light mode unchanged at 6.7:1. */
  --ndg-sidebar-link-color: var(--ndg-brand-blue-adaptive);
  /* The bar marking sections that are on screen. */
  --ndg-sidebar-marker: var(--ndg-brand-blue-adaptive);
  /* The rail inherited the body's 16px, so navigation read at the same
     weight as prose. 14px is a navigation size and narrows the auto-width
     rail, which gives the content column the space back. */
  --ndg-sidebar-font-size: 0.875em;
  --ndg-sidebar-marker-width: 3px;
  --ndg-sidebar-marker-fade: 12px;

  /* Document colors */
  --ndg-content-background: light-dark(white, #030306);
  --ndg-content-color: var(--ndg-text-color);
  /* Inline `literal` chips outside an admonition. The admonitions have their
     own *-literal-bg pairs; this is the plain-prose one. */
  --ndg-literal-bg: light-dark(var(--ndg-body-background), #2a2e3b);

  /* Form fields. Left alone, a dark-mode input keeps the browser's own grey
     widget face, which is the one grey object on a blue-black page. The field
     takes the page ground instead, so it reads as a recess in the rail marked
     by its border rather than as a filled chip. A filled chip was tried first
     and clashed with the blue links beside it. */
  --ndg-field-bg: var(--ndg-body-background);
  --ndg-field-fg: var(--ndg-text-color);
  /* A hint, not content. --ndg-muted-fg is a body-text token and reaches 13:1
     on the dark field, bright enough to read as a field that already holds a
     value, so dark fades it halfway toward the ground it sits on. */
  --ndg-field-placeholder: light-dark(
      var(--ndg-muted-fg),
      color-mix(in srgb, var(--ndg-muted-fg), var(--ndg-body-background) 50%));

  /* Scrollbars. Derived, not sampled: no Sherpa screenshot shows a scrollbar.
     These start from the indigo Sherpa puts under its own controls, #1F1D3F,
     and lift toward the muted foreground until the thumb clears the 3:1 a
     control needs -- at that indigo itself a thumb measures 1.2:1 against the
     page and cannot be seen. Rest reaches 3.68:1 against the reading pane and
     hover 6.10:1. The track stays transparent so the scrollbar draws no stripe
     down the edge of the pane. */
  --ndg-scrollbar-track: transparent;
  --ndg-scrollbar-thumb: light-dark(var(--ndg-slate-200), #64667F);
  --ndg-scrollbar-thumb-hover: light-dark(var(--ndg-slate-500), #878B9F);

  /* Links */
  --ndg-link-color: var(--ndg-brand-blue-adaptive);

  /* Button colors */
  --ndg-button-blue: var(--ndg-mid-blue);
  --ndg-button-green: #16A085;
  --ndg-button-red: var(--ndg-mid-red);
  --ndg-button-orange: var(--ndg-mid-orange);
  --ndg-button-gray: #656D78;
  --ndg-button-white: white;
  --ndg-button-help: #4AA3DF;
  --ndg-button-purple: var(--ndg-purple);
  /* Text on a filled brand surface. Not --ndg-button-white, which is a white
     button face rather than the text on a coloured one. */
  --ndg-on-accent: white;

  /* Dragbar colors */
  --ndg-dragbar-background: var(--ndg-accent-background);

  /* Hover fill for the header theme toggle. Copied from --surface-callout in
     the website's tokens.css; the docs palette has no equivalent. */
  --ndg-toggle-hover-background: light-dark(var(--ndg-light-blue), #083344);
  
  /* Note Admonitions */
  --ndg-note-icon: "\f05a";
  --ndg-note-bg: light-dark(var(--ndg-light-blue), #162456);
  --ndg-note-accent-fg: light-dark(var(--ndg-mid-blue), #73D4FF);
  --ndg-note-literal-bg: light-dark(#add9f8,#2f3d73);
  --ndg-note-literal-fg: var(--ndg-note-accent-fg);

  /* Tip Admonitions */
  --ndg-tip-icon: "\f0eb";
  --ndg-tip-bg: light-dark(var(--ndg-light-green), #1A352F);
  --ndg-tip-accent-fg: light-dark(var(--ndg-mid-green), #5EE9B5);
  --ndg-tip-literal-fg: light-dark(var(--ndg-mid-green), #3dd68c);
  --ndg-tip-literal-bg: light-dark(#C0ECDE,#194A3C);

  /* Warning Admonitions */
  --ndg-warning-icon: "\f071";
  --ndg-warning-bg: light-dark(var(--ndg-light-orange), #1e1b4b);
  --ndg-warning-accent-fg: light-dark(var(--ndg-mid-orange), #FFB86A);
  --ndg-warning-literal-bg: light-dark(#ffccae, #312e81);
  /* Deliberately not --ndg-warning-accent-fg: the other three families use
     their accent colour for a literal, but orange on the light warning tint
     is too weak to read, so light falls back to body text. */
  --ndg-warning-literal-fg: light-dark(var(--ndg-text-color), #FFB86A);
  

  /* Danger Admonitions */
  --ndg-danger-icon: "\f06a";
  --ndg-danger-bg: light-dark(var(--ndg-light-red), #4D0218);
  --ndg-danger-accent-fg: light-dark(var(--ndg-mid-red), #FDA5D5);
  --ndg-danger-literal-bg: light-dark(#ffb1cb, #8B0836);
  --ndg-danger-literal-fg: var(--ndg-danger-accent-fg);

  /* Release-note tags. Neutral pair for the date; the other kinds reuse the
     admonition palettes. */
  --ndg-tag-neutral-bg: light-dark(var(--ndg-slate-50), var(--ndg-slate-700));
  --ndg-tag-neutral-fg: light-dark(var(--ndg-slate-500), var(--ndg-slate-200));

  /* Footer colors */

  /* Nav button colors */
  --ndg-nav-button-background: var(--ndg-button-blue);
  --ndg-nav-button-color: var(--ndg-on-accent);
  --ndg-nav-button-hover-background: var(--ndg-mid-blue);

  --content-aside-margin: .4rem;
}

body {
  background-color: var(--ndg-accent-background);
  color: var(--ndg-text-color);
  font-family: var(--ndg-font-normal);
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ndg-heading-color);
  letter-spacing: var(--ndg-tracking-tight);
}

a {
  color: var(--ndg-link-color);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &.reference.external::after {
    font-family: var(--ndg-font-awesome);
    content: " \f360";
    color: var(--ndg-link-color);
    text-decoration: none;
    font-size: .9em;
    vertical-align: baseline;
  }
}

img {
  margin: auto;
  max-width: 100%;
  margin: var(--content-aside-margin);

  &.inline-image {
    margin: 0;
    padding: 0;
    height: 1lh;
    vertical-align: middle;
  }
}

pre {
  font-family: var(--ndg-font-mono);
  font-size: 0.9em;
}

hr {
  height: 1px;
  border: 0;
  background: var(--ndg-border);
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.tight-list p {
  margin: 0;
  padding: 0;
}

i.action {
  color: var(--ndg-heading-color);
}

/* Wordmark, matching .wordmark on the website: extrabold 1.25rem, tight
   tracking, mark at 2em. No coloured block -- the header is one surface. */
.brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: var(--ndg-tracking-tight);
  line-height: 1;
  color: var(--ndg-heading-color);

  & .wordmark-logo {
    display: block;
    height: 2em;
    width: auto;
    flex-shrink: 0;
  }

  /* The two-tone split. The letters follow the theme, the bars stay brand
     blue in both. */
  & .logo-text {
    fill: currentColor;
  }

  & .logo-bar {
    fill: var(--ndg-mid-blue);
  }

  a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* The product name carries the brand colour in a pill on the info/note
     background, so it reads as a label beside the mark rather than as part
     of the logo. The mark's letters stay on currentColor. */
  & .product {
    color: var(--ndg-brand-name-color);
    background-color: var(--ndg-note-bg);
    border-radius: 9999px;
    padding: 0.25em 0.7em;
  }
}

.header {
  background-color: var(--ndg-header-background);
  color: var(--ndg-heading-color);
  font-weight: bold;
  /* Header padding lives in basic.css with the rest of the layout. Declaring
     it here would win anyway -- ndg.css is unlayered, basic.css is @layer
     main -- and silently override it. */
  border-bottom: 1px solid var(--ndg-header-border);

  .breadcrumbs {
    font-size: 1.0em;
  }
}

.sidebarwrapper {
  background-color: var(--ndg-sidebar-background);
}

.sidebar {
  background-color: var(--ndg-sidebar-background);
  color: var(--ndg-sidebar-color);
  font-size: var(--ndg-sidebar-font-size);

  a, a:after {
    /* color links, no underline */
    color: var(--ndg-sidebar-link-color) !important;
    text-decoration: none;

    &:hover {
      /* underline link on hover */
      text-decoration: underline;
    }
  }

  li {
    /* Air between rail items. The marker bar is one line box tall, so this is
       also the height of the bar. */
    line-height: var(--ndg-sidebar-line-height);

    /* Containing block for the marker bar. */
    position: relative;
  }

  li a {
    /* bulleted links */
    font-family: var(--ndg-font-condensed);
    letter-spacing: var(--ndg-tracking-tight);
    padding-left: 4px;
    /* Room for the marker bar and the fade in front of it. When the rail is
       auto-width this is simply a gutter and the longest title stops short of
       the bar. When the rail has been dragged to a fixed width the title
       overflows instead, and the fade is what keeps it off the bar. */
    padding-right: calc(var(--ndg-sidebar-marker-width)
                        + var(--ndg-sidebar-marker-fade));

    /* One block box per row, so the marker bar can take the row's own height.
       An inline <a> would leave the bar on a fixed height, and any row that is
       taller than one plain line -- a release row carrying tags, say -- would
       break the bar with a gap. A parent row's box covers its own line only,
       not the nested list below it. */
    display: block;
    position: relative;

    /* Titles stay on one line, so a title longer than the rail overflows. Cut
       it at the row's edge instead of letting it run across the marker bar and
       on into the page. The fade below stops the cut being abrupt. */
    overflow: hidden;

    /* Overlap each row's box with the next by 1px, taking the space back off
       the margin so the rows still sit where they did. Row heights are
       fractional, so two marker bars that merely abut land on a shared
       half-covered pixel and leave a pale seam. Overlapping them removes it. */
    padding-bottom: 1px;
    margin-bottom: -1px;

    &.active::after {
      /* Marks a section whose heading is on screen. A bar on the right edge
         rather than a tint on the text, so a run of visible sections reads as
         one span instead of a stack of separate pills. */
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: var(--ndg-sidebar-marker-width);
      /* Square ends. A radius rounds every row separately and leaves a seam
         wherever two visible rows meet. */
      background-color: var(--ndg-sidebar-marker);
    }

    &::before {
      /* Fades a title out as it reaches the row's edge. On every row, not just
         the marked ones, so a long title looks the same however you scroll.
         Sits in the padding reserved above, so it covers nothing when the
         title is short enough. */
      content: "";
      position: absolute;
      right: var(--ndg-sidebar-marker-width);
      top: 0;
      bottom: 0;
      width: var(--ndg-sidebar-marker-fade);
      background-image: linear-gradient(to right,
        transparent, var(--ndg-sidebar-background) 85%);
    }
  }

  .toc > ul {
    /* Keeps the rows clear of the marker bar. This has to sit on the <ul>, not
       on its <li>: the bar resolves right:0 against its own <li>'s padding box,
       and padding on the <li> would put the nested rows' bars 0.4em to the left
       of the top-level ones. */
    padding-right: 0.4em;
  }

  .toc > ul > li {
    /* only display the toc for the current document */
    display: none;

    &.current {
      display: list-item;
    }
  }

  .caption {
    /* supress toc captions in the sidebar */
    display: none;
  }
}

/* The thumb is deliberately quiet, so lift it while the pointer is over the
   pane it scrolls. */
.content:hover,
.sidebarwrapper:hover {
  scrollbar-color: var(--ndg-scrollbar-thumb-hover) var(--ndg-scrollbar-track);
}

.dragbar {
  border-left: 1px solid var(--ndg-border);
  border-right: 1px solid var(--ndg-content-background);
  background-color: var(--ndg-content-background);

  &:hover {
    background-color: var(--ndg-dragbar-background);
    border-right: 1px solid var(--ndg-border);
    cursor: ew-resize;
  }

  .grabber {
    color: var(--ndg-border);
    visibility: hidden; /* Hide by default */
    user-select: none; /* Prevent text selection */
    text-align: center;
    font-weight: bold;
    padding: 0;
    width: 100%;
    line-height: 0.8rem;

    &:hover {
      visibility: visible; /* Show on hover */
    }
  }
}

.footer {
  background-color: var(--ndg-accent-background);
  color: var(--ndg-content-color);
  padding: .4em;
  border-top: 1px solid var(--ndg-border);
  text-wrap: nowrap;
}

.lnav {
  background-color: var(--ndg-accent-background);
  color: var(--ndg-content-color);
  border-top: 1px solid var(--ndg-border);
}

.toctree-wrapper {
  ul ul {
    padding-left: .8rem;
    list-style-position: inside;
  }

  .caption {
    color: var(--ndg-heading-color);
    font-size: 1.1em;
    font-weight: bold;
  }
}

/* Header utility slot, mirroring .header-utils on the website: right-aligned,
   flex row, --space-2 gap. */
.header-utils {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding-right: 0.4em;
}

/* Copied from .theme-toggle in the website's components.css: a 36px circle with
   a 1px border and no fill. Border and text use the docs' own tokens so the
   control agrees with the header border beside it. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ndg-header-border);
  border-radius: 9999px;
  background: none;
  color: var(--ndg-heading-color);
  cursor: pointer;

  &:hover {
    background-color: var(--ndg-toggle-hover-background);
    border-color: var(--ndg-mid-blue);
    color: var(--ndg-mid-blue);
  }

  /* One glyph at a time. The visible glyph names the mode the click switches
     TO, which is the website's convention. */
  & .fa-sun {
    display: none;
  }
}

/* Reader made an explicit choice. */
:root[data-color-scheme="dark"] .theme-toggle {
  & .fa-sun { display: inline-block; }
  & .fa-moon { display: none; }
}

/* No explicit choice yet, so follow the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) .theme-toggle {
    & .fa-sun { display: inline-block; }
    & .fa-moon { display: none; }
  }
}

.version {
  padding: 0.5em;
  font-weight: bold;

  & .release {
    font-size: 1.5em;
  }

  & .stable {
    color: var(--ndg-mid-green);
  }

  & .beta {
    color: var(--ndg-mid-orange);
  }

}

.external-link {
  font-size: 0.8em;
  color: var(--ndg-muted-fg);
}

.nav-button {
  /* Geometry copied from .btn / .btn-primary in the website's components.css,
     so the docs footer buttons and www.netdevgroup.com read as one system:
     --radius-full 9999px, --fw-semibold 600, 12px/22px padding, 8px gap. */
  background-color: var(--ndg-nav-button-background);
  color: var(--ndg-nav-button-color);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
  padding: 12px 22px;
  border-radius: 9999px;
  /* Transparent, not none: the website's .btn carries a 1.5px border that
     other variants colour in. Keeping it holds the pill at the same height. */
  border: 1.5px solid transparent;
  text-wrap: nowrap;
  margin-right: 0.5em;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  & i {
    /* The website renders its inline arrow at 10px against 16px text. */
    font-size: 0.625em;
  }

  &:hover {
    background-color: var(--ndg-nav-button-hover-background);
    cursor: pointer;
  }
}

/* Document specific styles */

#root-toc {
  /* Hide the root toc in the root old_guide.md */
  display: none;
}

.content {
  background-color: var(--ndg-content-background);
  line-height: 1.5;
}

.content table {
  padding: 0;
  border-collapse: collapse;
  border: 1px solid var(--ndg-border);
  margin-bottom: 1em;

  tr {
    &:hover {
      background-color: var(--ndg-accent-background);
    }
  }

  th {
    background-color: var(--ndg-accent-background);
    color: var(--ndg-text-color);
    font-weight: bold;
    border: 1px solid var(--ndg-border);
    padding: 0.5em;
  }

  td {
    padding: 0.5em;
    border: none;
    border: 1px solid var(--ndg-border);
  }

  p {
    margin: 0;
    padding: 0;
  }

  .caption-text {
    font-weight: bold;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }
}

.content blockquote {
  background-color: var(--ndg-accent-background);
  padding: 0.5em;
  font-size: 1em;
  margin: 0;
  margin-bottom: 1em;
  border-left: 4px solid var(--ndg-mid-blue);

  p {
    margin: 0;
    padding: 0;
  }
}

/* Styling of {{ home }} page (fa fa-home fa-fw) */
i.home-link {
  background-color: var(--ndg-light-blue);
  color: var(--ndg-mid-blue);
  font-weight: bold;
  font-size: 1em;
  border-radius: 4px;
  border: none;
  padding: 0.2em;
}

/* Backticks and modifiers: `Some literal value` */
.content code.literal {
  background-color: var(--ndg-literal-bg);
  border: none;
  border-radius: 4px;
  /* border: 1px solid var(--ndg-border); */
  font-family: var(--ndg-font-mono);
  font-size: 0.9em;
  padding: 0.05em 0.3em;

  /* Reference to links and page refs: `Some Page`{.link-ref} */
    &.link-ref, &.page-ref {
    background-color: var(--ndg-light-blue);
    color: var(--ndg-mid-blue);
    font-weight: bold;
    font-family: var(--ndg-font-condensed);
    letter-spacing: var(--ndg-tracking-tight);
    font-size: 1em;
    border: none;
  }

  /* Reference to a blue/submit button: `Submit`{.button-ref} */
  &.button {
    background-color: var(--ndg-button-blue);
    color: var(--ndg-on-accent);
    font-family: var(--ndg-font-normal);
    font-size: 0.9em;
    font-weight: 500;
    border: none;

    &.blue, &.primary {
      /* Default button */
    }

    &.white, &.plain {
      background-color: var(--ndg-button-white);
      color: var(--ndg-light-text-color);
      border: 1px solid var(--ndg-border);
    }

    &.help {
      background-color: var(--ndg-button-help);
    }

    &.green, &.secondary {
      background-color: var(--ndg-button-green);
    }

    &.red, &.danger {
      background-color: var(--ndg-button-red);
    }

    /* Reference to a orange/warning button: `Warning`{.button-ref .orange} */
    &.orange, &.warning {
      background-color: var(--ndg-button-orange);
      color: var(--ndg-on-accent);
    }

    &.purple {
      background-color: var(--ndg-button-purple);
      color: var(--ndg-on-accent);
    }

    /* Reference to a gray/dismiss button: `Dismiss`{.button-ref .grey} */
    &.gray, &.grey, &.dismiss {
      background-color: var(--ndg-button-gray);
      color: var(--ndg-on-accent);
    }
  }
}

.content .field-list {
  .colon {
    display: none;
  }

  dt {
    font-weight: bold;
    font-family: var(--ndg-font-condensed);
    letter-spacing: var(--ndg-tracking-tight);
  }
}

.content .list-header {
    color: var(--ndg-heading-color);
    font-size: 1.1em;
}

.hidden {
  display: none;
}

.button-ref {
  background-color: var(--ndg-mid-green);
  color: var(--ndg-on-accent);

  &.green {
    background-color: var(--ndg-mid-green);
    color: var(--ndg-on-accent)
  }
}

.highlight {
  background-color: var(--ndg-accent-background);
  border-radius: 4px;
  padding: 0.5em 0.9em;
  font-size: 1em;
  margin-bottom: 1em;

  pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.fine-print {
  font-family: var(--ndg-font-condensed);
  letter-spacing: var(--ndg-tracking-tight);
}

/* Admonition Blocks */

.admonition {
  border-radius: 4px;
  padding: 0.4em 0.8em;
  color: var(--ndg-text-color);
  margin-bottom: 1em;

  & > * {
    margin-top: 0.5em;
    margin-bottom: 0.5em;

    &:first-child {
      margin: 0;
    }
  }

  p.admonition-title {
    font-weight: bold;
  
    &::before {
      padding-right: 0.4em;
      font-weight: 900;
      font-family: var(--ndg-font-awesome);
    }
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    /* &::after {
      font-weight: normal;
      border: none;
      color: var(--ndg-text-color) !important;
    } */
  }

  &.note {
    background-color: var(--ndg-note-bg);
    .admonition-title {
      color: var(--ndg-note-accent-fg);
      &::before {
        content: var(--ndg-note-icon);
      }
    }

    a {
      color: var(--ndg-note-accent-fg);
      border-bottom: 1px dotted var(--ndg-note-accent-fg);

      &::after {
        color: var(--ndg-note-accent-fg);
      }
    }

    code.literal {
      background: var(--ndg-note-literal-bg);
      color: var(--ndg-note-literal-fg);
    }
  }

  &.tip {
    background-color: var(--ndg-tip-bg);
    .admonition-title {
      color: var(--ndg-tip-accent-fg);
      &::before {
        content: var(--ndg-tip-icon);
      }
    }

    a {
      color: var(--ndg-tip-accent-fg);
      border-bottom: 1px dotted var(--ndg-tip-accent-fg);

      &::after {
        color: var(--ndg-tip-accent-fg);
      }
    }

    code.literal {
      background: var(--ndg-tip-literal-bg);
      color: var(--ndg-tip-literal-fg);
    }

  }

  &.warning {
    background-color: var(--ndg-warning-bg);
    .admonition-title {
      color: var(--ndg-warning-accent-fg);
      &::before {
        content: var(--ndg-warning-icon);
      }
    }

    a {
      color: var(--ndg-warning-accent-fg);
      border-bottom: 1px dotted var(--ndg-warning-accent-fg);

      &::after {
        color: var(--ndg-warning-accent-fg);
      }
    }

    code.literal {
      background: var(--ndg-warning-literal-bg);
      color: var(--ndg-warning-literal-fg);
    }
}

  &.danger {
    background-color: var(--ndg-danger-bg);
    .admonition-title {
      color: var(--ndg-danger-accent-fg);
      &::before {
        content: var(--ndg-danger-icon);
      }
    }

    a {
      color: var(--ndg-danger-accent-fg);
      border-bottom: 1px dotted var(--ndg-danger-accent-fg);

      &::after {
        color: var(--ndg-warning-danger-fg);
      }
    }

    code.literal {
      background: var(--ndg-danger-literal-bg);
      color: var(--ndg-danger-literal-fg);
    }

  }
}

/* Release-note headings, split into a version and tags by the release_tags
   extension. The same nodes render in the page heading and the left rail,
   because Sphinx copies title children into the toctree entry. */

.rel-version {
  font-family: var(--ndg-font-mono);
  letter-spacing: 0;
}

/* A rule between versions. Drawn on the heading rather than written into the
   sources as <hr>, so every version gets one and nobody has to remember. Only
   headings match: .rel-version is also on the rail rows, inside an <a>.
   Geometry matches the hr rule earlier in this file. */
:is(h1, h2, h3, h4, h5, h6):has(> .rel-version) {
  border-top: 1px solid var(--ndg-border);
  padding-top: 1em;
}

.rel-tag {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.5em;
  border-radius: 9999px;
  font-family: var(--ndg-font-mono);
  font-size: 0.8em;
  letter-spacing: 0;
  white-space: nowrap;
}

.rel-tag--rc {
  /* Not --ndg-note-bg: against the rail background that pair measures
     1.15:1, so the tag does not read as a tag at this size. The literal
     pair is a chip on a note surface, which is what this is. */
  background-color: var(--ndg-note-literal-bg);
  color: var(--ndg-note-accent-fg);
}

.rel-tag--beta {
  background-color: var(--ndg-warning-bg);
  color: var(--ndg-warning-accent-fg);
}

.rel-tag--final {
  background-color: var(--ndg-tip-bg);
  color: var(--ndg-tip-accent-fg);
}

.rel-tag--date {
  background-color: var(--ndg-tag-neutral-bg);
  color: var(--ndg-tag-neutral-fg);
}

/* Mono is wide and the rail is narrow, so hold the version back a little.
   The tags need no rule of their own any more: their own 0.8em against the
   rail's 14px lands where the old 0.75em override put them against 16px. */
.sidebar {
  .rel-version {
    font-size: 0.92em;
  }
}