/*
  Docs page polish shared by hdadmin.com, TopbarPlus and ZonePlus: sidebar
  section headings, the table of contents title, the drawer spacing,
  tables and content tabs. Loaded before each project's own stylesheet,
  which keeps anything that is only theirs
*/

/* Sidebar section headers (Get Started, Using HD Admin) kept being read as
   clickable tabs, so they take a small-caps label with a hairline rule under.
   Nothing interactive is ever set like this, which is what makes it read as
   a heading. Desktop only, because the mobile drawer reuses the same element
   as a real collapse toggle */
@media screen and (min-width: 76.25em) {
  .md-nav__item--section > .md-nav__link {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-default-fg-color--light);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(var(--hd-tint), 0.22);
    border-radius: 0; /* the link's rounded corners were curling the rule's ends */
    cursor: default;
  }

  .md-nav__item--section > .md-nav__link:hover {
    color: var(--md-default-fg-color--light);
  }

  /* A tab with sections of its own (Guide: Get Started, Features. API:
     Developers, Reference) lets those head the list, and the shared theme
     hides the tab's own name row. A tab without any would head the list
     with its own name instead, in the same small caps. Material keeps the
     list open at this width whatever the label's toggle says, so the label
     is a heading only */
  .md-nav--lifted
    > .md-nav__list
    > .md-nav__item--active:not(:has(.md-nav__item--section))
    > .md-nav__link {
    display: flex;
    pointer-events: none;
  }

  /* Material gives every section block a top margin, which the Table of
     contents title on the right never gets, so the first heading on the
     left sat a step lower. Both sidebars start at the same padding, so with
     the margins gone the two headings share a line */
  .md-nav--lifted > .md-nav__list > .md-nav__item--active {
    margin-top: 0;
  }

  .md-nav--lifted
    > .md-nav__list
    > .md-nav__item--active
    > .md-nav
    > .md-nav__list
    > .md-nav__item--section:first-child,
  .md-nav--lifted
    > .md-nav__list
    > .md-nav__item--active
    > .md-nav
    > .md-nav__list
    > .md-nav__item--section:first-child
    > .md-nav__link {
    margin-top: 0;
  }

  /* The Table of contents title on the right takes the same look */
  .md-nav--secondary > .md-nav__title {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-default-fg-color--light);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(var(--hd-tint), 0.22);
  }
}

/* The drawer's rows are already separated by hairline rules, so the desktop
   section margins only showed up as inconsistent dead space, and only on docs
   pages (the home page renders the same nav without sections at all) */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__item--section {
    margin: 0;
  }
}

/* mkdocs stamps draft pages with a corner label in the local preview. Too
   noisy for reviewing, and the public build strips drafts anyway */
.mkdocs-draft-marker {
  display: none;
}

/* Tables inside an nb-fields wrapper share a first column width, so their
   descriptions line up down the page instead of stepping in and out as each
   table sizes itself to its own longest field name */
.md-typeset .nb-fields table:not([class]) {
  table-layout: fixed;
}

.md-typeset .nb-fields table:not([class]) th:first-child,
.md-typeset .nb-fields table:not([class]) td:first-child {
  width: 22%;
}

/* Breaking after the field name is what drops the tags onto their own line,
   so they still sit side by side and only wrap when the column runs out */
.md-typeset .nb-fields td:first-child > code {
  display: block;
  width: fit-content;
}

.md-typeset .nb-fields td:first-child .nb-tag {
  margin: 0.5em 0.15em 0 0;
}

/* Markdown insists on a header row, so a table authored with an empty one
   drops it instead of opening on a blank strip. The first body row then loses
   its top rule, which would otherwise double up with the table's own border */
.md-typeset table:not([class]) thead:not(:has(th:not(:empty))) {
  display: none;
}

.md-typeset table:not([class]) thead:not(:has(th:not(:empty))) + tbody tr:first-child td {
  border-top: none;
}

/* Content tabs read as one panel, so whatever sits under a tab is visibly
   held by it rather than floating loose beneath the labels */
.md-typeset .tabbed-set {
  margin: 1em 0;
  border: 1px solid rgba(var(--hd-tint), 0.25);
  border-radius: 0.4rem;
  background: rgba(var(--hd-tint), 0.04);
}

.md-typeset .tabbed-set > .tabbed-labels {
  margin: 0;
  padding: 0 0.4em;
  border-bottom: 1px solid rgba(var(--hd-tint), 0.2);
  border-radius: 0.4rem 0.4rem 0 0;
  background: rgba(var(--hd-tint), 0.08);
  box-shadow: none;
}

.md-typeset .tabbed-set > .tabbed-content {
  padding: 0.9em;
}

/* The shared theme spaces labels for a full-width tab strip, which is taller
   than this panel needs */
.md-typeset .tabbed-set > .tabbed-labels > label {
  margin: 0.5em 1.1em 0.45em;
}

/* The shared theme draws the active-tab marker as a full-height box filled by
   inset shadows, and its edge shows as a stray vertical line against the label
   row's own background. A plain underline marks the tab with nothing to catch */
.md-typeset .tabbed-set > .tabbed-labels::before,
.js .md-typeset .tabbed-set > .tabbed-labels::before {
  height: 2px;
  box-shadow: none;
  background: var(--hd-accent);
}

/* The panel's own padding does the spacing, so the first and last things in
   a tab don't add their own */
.md-typeset .tabbed-block > :first-child {
  margin-top: 0;
}

.md-typeset .tabbed-block > :last-child {
  margin-bottom: 0;
}

/* Code inside a tab group stops at 20 lines and scrolls the rest, so a long
   example never runs away with the page and switching tabs never lurches it.
   The em value is the fallback for browsers without the lh unit */
.md-typeset .tabbed-set .highlight pre > code {
  max-height: 32em;
  max-height: calc(20lh + 1.6em);
}

/* Clearing the scrollbar that adds, which the copy button would otherwise
   sit on top of */
.md-typeset .tabbed-set .highlight .md-clipboard {
  right: 1.1em;
}