/* Neutral header: page background instead of the primary color, dark text */
.md-header,
.md-tabs {
  --md-primary-fg-color: var(--md-default-bg-color);
  --md-primary-bg-color: var(--md-default-fg-color);
  --md-primary-bg-color--light: var(--md-default-fg-color--light);
}

/* Rule off the bottom of the tab bar, not between the title and the tabs */
.md-tabs {
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
}

/* The tab bar (and its border) scrolls away, so once Material flags the header as
   scrolled, give it that border instead of the shadow it wants to draw */
.md-header--shadow {
  border-bottom: 2px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

/* Below this width Material hides the tabs, so the header carries the line */
@media screen and (max-width: 76.234375em) {
  .md-header {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
  }
}

/* The translucent-black search fill is invisible on a light header */
@media screen and (min-width: 60em) {
  .md-search__form {
    background-color: var(--md-default-fg-color--lightest);
  }

  .md-search__form:hover {
    background-color: var(--md-default-fg-color--lighter);
  }
}

/* With the logo gone, the title's 1rem margin sits .4rem right of the first
   tab (.2rem list margin + .6rem item padding); match them up */
@media screen and (min-width: 76.25em) {
  [dir="ltr"] .md-header__title {
    margin-left: 0.6rem;
  }
}

/* Site name links home; keep it looking like the title, not a link */
.md-header__topic > a.md-ellipsis {
  color: inherit;
}

/* No logo in the header */
.md-header__button.md-logo {
  display: none;
}

/* Mobile drawer: same neutral treatment as the header, no logo, and no empty
   band where the logo used to sit (5.6rem tall with a 3rem top padding) */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    --md-primary-fg-color: var(--md-default-bg-color);
    --md-primary-bg-color: var(--md-default-fg-color);
    height: 3.2rem;
    padding-top: 0.6rem;
  }

  .md-nav--primary .md-nav__title .md-logo {
    display: none;
  }

  /* Material draws a hairline under the title as an inset shadow on the list */
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    box-shadow: none;
  }
}

/* Footer sits on the page background instead of its own dark bar, pinned to the
   bottom of the window so the PDF link is always in reach. It only holds the
   thin meta bar (the prev/next nav needs the navigation.footer feature), so it
   costs little room.

   Sticky rather than fixed: it still rides the bottom of the window while the
   page scrolls, but it keeps its place in the flow as the last child of
   .md-container, so a long page ends above the footer instead of behind it. On
   a page shorter than the window .md-container still grows to full height, so
   the footer lands on the bottom edge either way. */
.md-footer {
  --md-footer-bg-color: var(--md-default-bg-color);
  --md-footer-bg-color--dark: var(--md-default-bg-color);
  --md-footer-fg-color: var(--md-default-fg-color);
  --md-footer-fg-color--light: var(--md-default-fg-color--light);
  --md-footer-fg-color--lighter: var(--md-default-fg-color);
  bottom: 0;
  position: sticky;
  z-index: 3;
}

/* Breathing room between the end of the content and the footer it now stops
   above; the content's own 1.2rem bottom margin alone reads as a collision */
.md-content__inner {
  padding-bottom: 1.6rem;
}

/* The nav and ToC are sticky columns that Material sizes to reach the bottom of
   the window, so their last entries sat under the footer too. An inline height
   from its JS beats a height set here, but not a max-height: the columns start
   3.6rem down (2.4rem sticky offset + 1.2rem sidebar padding), so ending them
   6rem short of the bottom clears the ~2.1rem footer. The primary nav is
   skipped below 76.25em, where it is the full-height drawer instead. */
@media screen and (min-width: 60em) {
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    max-height: calc(100vh - 6rem);
  }
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    max-height: calc(100vh - 6rem);
  }
}

/* Sidebar rows sat .625em apart, which packs tightly now that every section is a
   collapsed target of its own. Space the list items rather than the links: the
   link margin is what Material zeroes on a section-index row (.md-nav__container
   > .md-nav__link), so spacing there would break those rows or fight that rule.

   Two rhythms rather than one even column. `navigation.tabs` lifts the tab's own
   row out of the list, so level 1 is the section rows - the whole of the menu
   while everything is collapsed - and they carry the wider gap. The pages inside
   an open section sit closer to each other than their section sits to the next
   one, so an expanded section reads as a group instead of dissolving back into
   the list. */
.md-sidebar--primary .md-nav__item {
  margin-top: 0.7rem;
}

.md-sidebar--primary .md-nav[data-md-level="1"] > .md-nav__list > .md-nav__item {
  margin-top: 1.1rem;
}

.md-sidebar--primary .md-nav__link {
  margin-top: 0;
}

/* Above 45em Material drops .md-copyright to width:auto, so it hugs its text and
   space-between parks it on the left — center the flex row itself instead */
.md-footer-meta__inner {
  justify-content: center;
}

.md-copyright {
  color: var(--md-default-fg-color);
  font-size: 0.55rem;
  text-align: center;
}

/* Material dims footer links via `html .md-footer-meta.md-typeset a`, which
   outranks a plain `.md-copyright a` — match its specificity to take the color */
html .md-footer-meta.md-typeset a,
html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Without the ToC the content column fits three 16rem tracks, so two cards left
   an empty third and looked left-aligned; cap the grid at two and center it */
.md-typeset .grid.cards.dt-home {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}

/* Home page cards: centered title over a full-width image, no frame or hover */
.md-typeset .grid.cards.dt-home > ul > li,
.md-typeset .grid.cards.dt-home > ul > li:focus-within,
.md-typeset .grid.cards.dt-home > ul > li:hover {
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

/* Cards are equal height (grid stretch), so the image block takes the leftover
   space under the title and centers the image in it both ways */
.md-typeset .grid.cards.dt-home > ul > li {
  display: flex;
  flex-direction: column;
}

.md-typeset .grid.cards.dt-home > ul > li > p {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  margin: 0;
}

.md-typeset .grid.cards.dt-home > ul > li img {
  display: block;
  max-width: 100%;
}

/* Section hubs: the landing page of every nav section, whose cards are that
   section's own children (built in overrides/partials/hub.html). Two fixed
   columns rather than Material's auto-fit tracks, so a section with three
   pages reads as a grid and not as one wide row. */
.md-typeset .grid.dt-hub {
  gap: 0.6rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 1.2em 0;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .grid.dt-hub {
    grid-template-columns: 1fr;
  }
}

/* Quiet cells: a rounded outline that stays put, since the whole grid is a menu
   and lifting one card on hover would be the only motion on the page. The cell
   is one link, so its padding belongs to the anchor, which fills the height
   grid stretching gave the cell. */
.md-typeset .grid.dt-hub > ul > li,
.md-typeset .grid.dt-hub > ul > li:focus-within,
.md-typeset .grid.dt-hub > ul > li:hover {
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  box-shadow: none;
  padding: 0;
}

.md-typeset .grid.dt-hub > ul > li > a,
.md-typeset .grid.dt-hub > ul > li > a:focus,
.md-typeset .grid.dt-hub > ul > li > a:hover {
  align-items: center;
  color: var(--md-default-fg-color);
  display: flex;
  font-size: 0.7rem;
  font-weight: 400;
  height: 100%;
  justify-content: center;
  padding: 0.8rem;
  text-align: center;
}

/* The lathe is nearly square (1.07) next to the probe (1.50), so at full width it
   towers over everything — hold it back on the card and on its own page */
.md-typeset img[src$="dyna-turn-102.webp"] {
  max-width: 80%;
}


/* Headings are black site-wide (Material dims h1 and h5), and a heading that is
   a link keeps that color instead of turning blue on hover */
.md-typeset :is(h1, h2, h3, h4, h5, h6),
.md-typeset :is(h1, h2, h3, h4, h5, h6) a,
.md-typeset :is(h1, h2, h3, h4, h5, h6) a:focus,
.md-typeset :is(h1, h2, h3, h4, h5, h6) a:hover {
  color: var(--md-default-fg-color);
}


/* --------------------------------------------------------------------------
   TP1 Family section: TP1 touch probe manual
   -------------------------------------------------------------------------- */

/* Status LED swatches, redrawn from the manual's legend. A steady diode is a
   filled circle; a flashing one is the same fill as a 12-point starburst. */
.dt-led {
  border: 1px solid var(--md-default-fg-color);
  border-radius: 50%;
  display: inline-block;
  height: 0.85rem;
  vertical-align: -0.15rem;
  width: 0.85rem;
}

.dt-led + .dt-led {
  margin-left: 0.15rem;
}

.dt-led--off     { background-color: #fff; }
.dt-led--green   { background-color: #00a651; }
.dt-led--red     { background-color: #ed1c24; }
.dt-led--yellow  { background-color: #fff200; }
.dt-led--blue    { background-color: #7accef; }

.dt-led--flashing {
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    50.0% 0.0%, 57.8% 21.0%, 75.0% 6.7%, 71.2% 28.8%, 93.3% 25.0%, 79.0% 42.2%,
    100.0% 50.0%, 79.0% 57.8%, 93.3% 75.0%, 71.2% 71.2%, 75.0% 93.3%, 57.8% 79.0%,
    50.0% 100.0%, 42.2% 79.0%, 25.0% 93.3%, 28.8% 71.2%, 6.7% 75.0%, 21.0% 57.8%,
    0.0% 50.0%, 21.0% 42.2%, 6.7% 25.0%, 28.8% 28.8%, 25.0% 6.7%, 42.2% 21.0%
  );
  height: 1rem;
  width: 1rem;
}

/* Indicator tables read as a legend, so the swatch column stays narrow and the
   rows stay tight rather than stretching to the full content width */
.md-typeset .dt-indicators table:not([class]) th:first-child,
.md-typeset .dt-indicators table:not([class]) td:first-child {
  text-align: center;
  white-space: nowrap;
  width: 6rem;
}

/* The cover page's capability list: two columns of short phrases instead of one
   long ragged column */
.md-typeset .dt-features ul {
  columns: 2;
  column-gap: 2rem;
  margin-left: 0;
  padding-left: 1.2em;
}

.md-typeset .dt-features li {
  break-inside: avoid;
  margin-bottom: 0.3em;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .dt-features ul {
    columns: 1;
  }
}

/* Figures: white-background drawings from the manual, unframed, and centered to
   suit the drawings' own margins. The white fill stays: the scans carry no
   background of their own, so the line work needs it to stay legible. */
.md-typeset .dt-figure {
  margin: 1.2em 0;
  text-align: center;
}

.md-typeset .dt-figure img {
  background-color: #fff;
  padding: 0.6rem;
}

/* Markdown folds the caption into the image's own paragraph, so the caption is a
   descendant `em` rather than a child — display:block breaks it onto its own line */
.md-typeset .dt-figure figcaption,
.md-typeset .dt-figure em {
  color: var(--md-default-fg-color--light);
  display: block;
  font-size: 0.7rem;
  font-style: normal;
  margin-top: 0.5em;
}

/* Side-by-side figures (the probe variants): one row whatever the count, so the
   transmitter sits beside its receiver and the three wired designs read as one
   family. Equal auto columns rather than auto-fit tracks, which wrapped the
   third drawing onto a line of its own once the content column narrowed. Below
   45em a row would leave the callout numbers unreadable, so it stacks. */
.md-typeset .dt-figure-row {
  display: grid;
  gap: 0.8rem;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin: 1.2em 0;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset .dt-figure-row {
    grid-auto-flow: row;
  }
}

.md-typeset .dt-figure-row .dt-figure {
  margin: 0;
}

/* Inline legend symbols lifted from the manual sit on the text baseline */
.md-typeset img.dt-symbol {
  vertical-align: middle;
}

/* Wire-colour swatches in the wire-marking lists */
.dt-wire {
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 2px;
  display: inline-block;
  height: 0.7rem;
  margin-right: 0.3rem;
  vertical-align: -0.05rem;
  width: 1.4rem;
}

.dt-wire--white  { background-color: #fff; }
.dt-wire--brown  { background-color: #5b3a29; }
.dt-wire--yellow { background-color: #fff200; }
.dt-wire--green  { background-color: #00c000; }
.dt-wire--blue   { background-color: #0000ee; }
.dt-wire--pink   { background-color: #ffb0c8; }
.dt-wire--gray   { background-color: #b8b8b8; }

/* Parts callout tables mirror the numbers printed on the exploded views, so the
   number column stays narrow and the part name carries the width */
.md-typeset .dt-parts table:not([class]) th:first-child,
.md-typeset .dt-parts table:not([class]) td:first-child {
  text-align: center;
  width: 4rem;
}


/* --------------------------------------------------------------------------
   Dyna Turn 102 section: Dyna Turn 102 CNC lathe users' manual
   -------------------------------------------------------------------------- */

/* The cutting-process route map is an unnumbered boxed sequence in the manual,
   so the list drops its markers and becomes a column of steps joined by arrows */
.md-typeset .dt-flow ol {
  list-style: none;
  margin: 1.2em auto;
  max-width: 22rem;
  padding: 0;
}

.md-typeset .dt-flow li {
  border: 1px solid var(--md-default-fg-color--light);
  border-radius: 2px;
  margin: 0;
  padding: 0.6em 0.8em;
  position: relative;
  text-align: center;
}

/* Arrow into each box after the first: an absolutely positioned stem (::before)
   reaching up into the gap, capped by a rotated chevron head (::after). Both sit
   outside the box, which absolute positioning allows and a background would not. */
.md-typeset .dt-flow li + li {
  margin-top: 1.6em;
}

.md-typeset .dt-flow li + li::before {
  background-color: var(--md-default-fg-color--light);
  content: "";
  height: 1.6em;
  left: 50%;
  position: absolute;
  top: -1.6em;
  transform: translateX(-50%);
  width: 1px;
}

.md-typeset .dt-flow li + li::after {
  border-left: 1px solid var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--light);
  content: "";
  height: 0.4em;
  left: 50%;
  position: absolute;
  top: -0.35em;
  transform: translateX(-50%) rotate(225deg);
  width: 0.4em;
}

/* Door-interlock matrix: the possible/not-possible marks are the content, so
   the mark columns stay narrow and centered */
.md-typeset .dt-matrix table:not([class]) th:not(:first-child),
.md-typeset .dt-matrix table:not([class]) td:not(:first-child) {
  text-align: center;
  width: 6rem;
}

/* Filled circles redrawn from the manual's legend */
.dt-mark {
  align-items: center;
  background-color: var(--md-default-fg-color);
  border-radius: 50%;
  color: var(--md-default-bg-color);
  display: inline-flex;
  font-size: 0.7rem;
  height: 1.1rem;
  justify-content: center;
  line-height: 1;
  width: 1.1rem;
}