/* MYCURE Pxp guide: Apple-style reading surface on top of MkDocs Material.
   Grayscale palette with one accent (link blue). Status colours (green check,
   orange warning) always sit next to an icon and a label. */

/* ---------- Tokens ---------- */

:root,
[data-md-color-scheme="default"] {
  --guide-fg: #1d1d1f;
  --guide-fg-2: #6e6e73;             /* secondary text: 5.07:1 on white */
  --guide-bg: #ffffff;
  --guide-elev: #f5f5f7;             /* grouped surfaces */
  --guide-elev-hover: #ebebef;
  --guide-sep: #d2d2d7;              /* hairlines (decorative) */
  --guide-chevron: #86868b;
  --guide-accent: #006385;          /* brand blue #0099cc (hsl 195 100% 40%), deepened for text: 6.72:1 on white, 5.65:1 on hover panels */
  --guide-ok: #248a3d;
  --guide-warn: #b64400;
  --guide-bar: rgb(251 251 253 / 80%);
  --guide-bar-solid: #fbfbfd;
  --guide-img-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 6%);
  --guide-r: 12px;

  --md-default-fg-color: var(--guide-fg);
  --md-default-fg-color--light: var(--guide-fg-2);
  --md-default-bg-color: var(--guide-bg);
  --md-typeset-color: var(--guide-fg);
  --md-typeset-a-color: var(--guide-accent);
  --md-typeset-table-color: var(--guide-sep);
  --md-primary-fg-color: var(--guide-bar-solid);
  --md-primary-fg-color--light: var(--guide-elev);
  --md-primary-fg-color--dark: var(--guide-fg);
  --md-primary-bg-color: var(--guide-fg);
  --md-primary-bg-color--light: var(--guide-fg-2);
  --md-accent-fg-color: var(--guide-accent);
  --md-footer-bg-color: var(--guide-elev);
  --md-footer-bg-color--dark: var(--guide-elev);
  --md-footer-fg-color: var(--guide-fg);
  --md-footer-fg-color--light: var(--guide-fg-2);
  --md-footer-fg-color--lighter: var(--guide-fg-2);
}

/* Dark is its own palette, not an inversion: black page, lighter raised surfaces. */
[data-md-color-scheme="slate"] {
  --guide-fg: #f5f5f7;
  --guide-fg-2: #a1a1a6;
  --guide-bg: #000000;
  --guide-elev: #1c1c1e;
  --guide-elev-hover: #2c2c2e;
  --guide-sep: #38383a;
  --guide-chevron: #8e8e93;
  --guide-accent: #33ccff;          /* brand blue, lightened (hsl 195 100% 60%): 7.45:1 or more on every dark surface */
  --guide-ok: #30d158;
  --guide-warn: #ff9f0a;
  --guide-bar: rgb(22 22 23 / 80%);
  --guide-bar-solid: #161617;
  --guide-img-shadow: none;

  --md-default-fg-color: var(--guide-fg);
  --md-default-fg-color--light: var(--guide-fg-2);
  --md-default-fg-color--lighter: #86868b;
  --md-default-fg-color--lightest: var(--guide-sep);
  --md-default-bg-color: var(--guide-bg);
  --md-typeset-color: var(--guide-fg);
  --md-typeset-a-color: var(--guide-accent);
  --md-typeset-table-color: var(--guide-sep);
  --md-primary-fg-color: var(--guide-bar-solid);
  --md-primary-fg-color--light: var(--guide-elev);
  --md-primary-fg-color--dark: var(--guide-fg);
  --md-primary-bg-color: var(--guide-fg);
  --md-primary-bg-color--light: var(--guide-fg-2);
  --md-accent-fg-color: var(--guide-accent);
  --md-footer-bg-color: var(--guide-elev);
  --md-footer-bg-color--dark: var(--guide-elev);
  --md-footer-fg-color: var(--guide-fg);
  --md-footer-fg-color--light: var(--guide-fg-2);
  --md-footer-fg-color--lighter: var(--guide-fg-2);
}

/* Sizes shared by both schemes: one type scale (5 sizes, 2 weights) and one
   height for every control in the top bar. */
:root {
  --guide-t-caption: 13px;   /* breadcrumbs, sidebar labels, footer, search excerpts */
  --guide-t-ui: 15px;        /* sidebar, contents, tables, notes, search */
  --guide-t-body: 17px;      /* reading text, step titles, card titles */
  --guide-t-section: 21px;   /* section headings, the line under the title */
  --guide-t-title: 28px;     /* page title */
  --guide-control: 36px;     /* logo, title line, buttons and search in the top bar */
}

/* Continuous (squircle) corners where the browser supports them. */
@supports (corner-shape: squircle) {
  :root { --guide-r: 18px; }

  .md-typeset img,
  .md-typeset table:not([class]),
  .md-typeset .admonition,
  .md-typeset details,
  .md-typeset .see,
  .md-typeset p.meta + p.meta,
  .md-typeset .grid.cards > ul > li,
  .md-typeset .group ul {
    corner-shape: squircle;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:root :focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: 2px;
}

/* ---------- Header: a frosted bar that content scrolls beneath ---------- */

.md-header,
.md-header--shadow {
  background-color: var(--guide-bar-solid);
  color: var(--guide-fg);
  box-shadow: 0 1px 0 var(--guide-sep);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .md-header {
    background-color: var(--guide-bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (prefers-reduced-motion: reduce) {
  .md-header {
    background-color: var(--guide-bar-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Every item in the bar is one control height and sits on the bar's centre line. */
/* The bar, the footer and the page share one left and one right edge: 16px in. */
.md-header__inner {
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
}

/* Logo: the same height as the controls, close to the guide's name. */
.md-header__button.md-logo {
  margin: 0;
  padding: 0;
}

.md-header__button.md-logo :is(img, svg) {
  display: block;
  width: auto;
  height: var(--guide-control);
}

[dir] .md-header__title {
  height: var(--guide-control);
  margin-right: 8px;
  margin-left: 10px;
  line-height: var(--guide-control);
}

.md-header__topic,
.md-header__topic:first-child {
  font-size: var(--guide-t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Icon buttons (menu, light/dark switch, search on small screens): a 36px round
   button with a hover fill. The tap area reaches 44px around it. */
.md-header__button.md-icon {
  position: relative;
  box-sizing: border-box;
  width: var(--guide-control);
  height: var(--guide-control);
  margin: 0 4px;
  padding: 7px;
  border-radius: 50%;
  transition: background-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.md-header__button.md-icon::after {
  position: absolute;
  inset: -4px;
  content: "";
}

.md-header__button.md-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* The last item before the edge sits on it, like the logo on the left. */
.md-header__inner > .md-header__button.md-icon:last-child {
  margin-right: 0;
}

/* "Skip to content" (shown on keyboard focus) and "Back to top" use the scale too. */
.md-skip {
  font-size: var(--guide-t-caption);
}

.md-top {
  font-size: var(--guide-t-ui);
}

@media (hover: hover) {
  .md-header__button.md-icon:hover {
    background-color: var(--guide-elev-hover);
    opacity: 1;
  }
}

/* ---------- Search ---------- */

/* Large screens: a filled, rounded field in the bar. Opening it keeps the same
   height and shape and adds a focus ring; results float below in a panel. */
@media screen and (min-width: 60em) {
  .md-search__inner {
    width: 234px;
    padding: 0;
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    width: 420px;
  }

  .md-search__form,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    height: var(--guide-control);
    border-radius: 10px;
    background-color: var(--guide-elev);
    box-shadow: none;
    transition: background-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .md-search__form:hover {
    background-color: var(--guide-elev-hover);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background-color: var(--guide-bg);
    box-shadow: 0 0 0 1px var(--guide-sep), 0 0 0 4px color-mix(in srgb, var(--guide-accent) 28%, transparent);
  }

  /* The typed text and the theme's grey completion behind it share padding and size. */
  [dir] :is(.md-search__input, .md-search__suggest) {
    padding-left: 38px;
    padding-right: 36px;
    font-size: var(--guide-t-ui);
  }

  .md-search__icon[for="__search"] {
    top: 50%;
    left: 10px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
  }

  .md-search__options {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }

  .md-search__input,
  .md-search__input::placeholder,
  .md-search__input ~ .md-search__icon,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input + .md-search__icon {
    color: var(--guide-fg-2);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__input {
    color: var(--guide-fg);
  }

  /* The field shows the focus ring, so the input's own outline is left off. */
  .md-search__input:focus-visible {
    outline: none;
  }

  .md-search__output,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__output {
    top: calc(var(--guide-control) + 8px);
    border-radius: var(--guide-r);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__output {
    border: 1px solid var(--guide-sep);
    background: var(--guide-bg);
    box-shadow: 0 12px 40px rgb(0 0 0 / 12%);
  }

  .md-search__scrollwrap,
  [data-md-toggle="search"]:checked ~ .md-header .md-search__scrollwrap {
    width: 100%;
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__scrollwrap {
    max-height: min(70vh, 640px);
  }
}

/* Large screens: the page dims only a little behind open search. */
@media screen and (min-width: 60em) {
  [data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
    background-color: rgb(0 0 0 / 18%);
  }

  [data-md-color-scheme="slate"] [data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
    background-color: rgb(0 0 0 / 50%);
  }
}

/* Results: page title, then matching sections, each with a short excerpt.
   Matches are tinted, not underlined. */
[dir] .md-search-result__meta {
  padding: 10px 16px;
  border-bottom: 1px solid var(--guide-sep);
  background: transparent;
  color: var(--guide-fg-2);
  font-size: var(--guide-t-caption);
  line-height: 1.4;
}

.md-search-result__icon {
  display: none;
}

.md-search-result__article,
[dir] .md-search-result__article {
  padding: 10px 16px;
}

.md-search-result__article > :first-child,
.md-search-result__article > .md-search-result__icon + * {
  margin-top: 0;
}

.md-search-result .md-typeset :is(h1, h2) {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--guide-fg);
  font-size: var(--guide-t-ui);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.md-search-result__article--document + .md-search-result__article,
.md-search-result__link + .md-search-result__link .md-search-result__article {
  padding-top: 6px;
}

.md-search-result .md-typeset h2 {
  font-weight: 400;
}

/* Excerpts are caption text in secondary grey. Text from tables and
   definition lists arrives bare in the article (the search index keeps only
   paragraphs, lists and code), with the matched words as inline marks.
   Two classes, to win over Material's `.md-search-result .md-typeset`. */
.md-search-result .md-search-result__article {
  color: var(--guide-fg-2);
  font-size: var(--guide-t-caption);
  line-height: 1.45;
}

/* Every excerpt stops after two lines. */
.md-search-result__article > :is(p, ul, ol, pre) {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--guide-fg-2);
  font-size: var(--guide-t-caption);
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: calc(2 * 1.45em);   /* lists don't clamp by lines */
}

.md-search-result__article :is(ul, ol) > li {
  margin-top: 0;                   /* whole lines only under the cap above */
  margin-bottom: 0;
}

/* Bare text has no element of its own to clamp, so the article stops after
   its heading plus two lines. The clipped lines would still show through the
   bottom padding, so that space is a margin instead. */
.md-search-result__article:not(:has(> :is(p, ul, ol, pre))) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

[dir] .md-search-result__article:not(:has(> :is(p, ul, ol, pre))) {
  margin-bottom: 10px;
  padding-bottom: 0;
}

.md-search-result mark {
  padding: 0 2px;
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--guide-accent) 16%, transparent);
  color: var(--guide-fg);          /* grey on the tint is under 4.5:1 */
  text-decoration: none;
}

.md-search-result__link:is(:hover, :focus) {
  background-color: var(--guide-elev);
}

.md-search-result__item {
  border-bottom: 1px solid var(--guide-sep);
  box-shadow: none;
}

.md-search-result__more > summary > div,
[dir] .md-search-result__more > summary > div {
  padding: 8px 16px;
  color: var(--guide-accent);
  font-size: var(--guide-t-caption);
}

.md-search-result__more > summary:is(:hover, :focus) > div {
  background-color: var(--guide-elev);
  color: var(--guide-accent);
}

/* Small screens: search opens full screen under the bar. The bar's blur would
   make it the frame for that full-screen panel (squashing it to the bar's
   height), so the bar is solid while search is open. */
@media screen and (max-width: 59.984375em) {
  [data-md-toggle="search"]:checked ~ .md-header {
    background-color: var(--guide-bar-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .md-search__form {
    height: 52px;
  }

  :is(.md-search__input, .md-search__suggest) {
    font-size: var(--guide-t-body);
  }

  .md-search__scrollwrap {
    background-color: var(--guide-bg);
  }
}

/* ---------- Reading text ---------- */

.md-typeset {
  font-size: var(--guide-t-body);
  line-height: 1.53;
  letter-spacing: -0.011em;
}

/* Two weights only: regular (400) and semibold (600). The theme's bold (700) becomes semibold. */
.md-typeset :is(strong, b, th),
.md-nav__item--section > .md-nav__link,
.md-nav__title {
  font-weight: 600;
}

/* Keep lines a comfortable length; pictures and tables keep their own width. */
.md-typeset > :is(p:not(:has(img)), ul, ol, h1, h2, h3, .admonition, details) {
  max-width: 44em;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* Title ramp: semibold, tight tracking at large sizes. */
.md-typeset h1 {
  margin: 0 0 12px;
  color: var(--guide-fg);
  font-size: var(--guide-t-title);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  margin: 48px 0 16px;
  font-size: var(--guide-t-section);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Each numbered step starts a new block, divided by a hairline. */
.md-typeset h3 {
  margin: 36px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--guide-sep);
  font-size: var(--guide-t-body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.md-typeset h2 + h3 {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

@media screen and (max-width: 44.984375em) {
  .md-typeset h2 { margin-top: 40px; }
}

.md-path {
  font-size: var(--guide-t-caption);
}

.md-path__link {
  color: var(--guide-fg-2);
}

/* ---------- The top of each page ---------- */

/* The sentence under the title says what the page is for. */
.md-typeset h1 + p.meta,
.md-typeset p.lead {
  color: var(--guide-fg-2);
  font-size: var(--guide-t-section);
  line-height: 1.38;
  letter-spacing: -0.005em;
}

/* "Time · You'll need" sits on its own grouped surface so it isn't skipped. */
.md-typeset p.meta + p.meta {
  padding: 12px 16px;
  border-radius: var(--guide-r);
  background: var(--guide-elev);
  color: var(--guide-fg);
  font-size: var(--guide-t-ui);
}

/* ---------- Steps ---------- */

/* "You should see:" — what the screen looks like when the step worked. */
.md-typeset .see {
  position: relative;
  padding: 12px 16px 12px 44px;
  border-radius: var(--guide-r);
  background: var(--guide-elev);
}

.md-typeset .see::before {
  position: absolute;
  top: 15px;
  left: 16px;
  width: 18px;
  height: 18px;
  content: "";
  background-color: var(--guide-ok);
  -webkit-mask-image: var(--md-admonition-icon--success);
  mask-image: var(--md-admonition-icon--success);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Screenshots: a hairline and a soft shadow so white app screens don't melt
   into the page. Every picture here is a full iPhone screen, so it is shown
   at about phone size with the phone's rounded corners. */
.md-typeset img:not(.twemoji):not([src$=".svg"]) {
  display: block;
  max-width: min(340px, 100%);
  margin: 16px 0 24px;
  border: 1px solid var(--guide-sep);
  border-radius: 34px;
  box-shadow: var(--guide-img-shadow);
}

/* A narrower screenshot for a single sheet, menu or dialog: ![...](x.png){ .shot-sm } */
.md-typeset img.shot-sm {
  max-width: min(280px, 100%);
}

/* ---------- Tips, warnings and notes ---------- */

/* One quiet grouped surface for every kind; the icon carries the kind. */
.md-typeset .admonition,
.md-typeset details {
  margin: 24px 0;
  padding: 0 16px 4px;
  border: 0;
  border-radius: var(--guide-r);
  background: var(--guide-elev);
  box-shadow: none;
  font-size: var(--guide-t-ui);
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  margin: 0 -16px;
  padding: 14px 16px 2px 44px;
  border: 0;
  background: transparent;
  font-weight: 600;
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  top: 15px;
  left: 16px;
  width: 18px;
  height: 18px;
  background-color: var(--guide-accent);
}

.md-typeset :is(.admonition.warning, .admonition.danger, details.warning) > :is(.admonition-title, summary)::before {
  background-color: var(--guide-warn);
}

.md-typeset .admonition > :last-child {
  margin-bottom: 12px;
}

/* ---------- Tables ---------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--guide-sep);
  border-radius: var(--guide-r);
  font-size: var(--guide-t-ui);
  line-height: 1.45;
}

.md-typeset table:not([class]) th {
  background: var(--guide-elev);
  font-weight: 600;
}

.md-typeset table:not([class]) :is(th, td) {
  padding: 10px 14px;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: transparent;
  box-shadow: none;
}

/* ---------- Welcome page ---------- */

/* "Start here": two raised tiles. */
.md-typeset .grid.cards > ul > li {
  padding: 20px;
  border: 0;
  border-radius: var(--guide-r);
  background: var(--guide-elev);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:hover {
  border: 0;
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li > p:first-child {
  margin-top: 0;
  font-size: var(--guide-t-body);
  letter-spacing: -0.01em;
}

.md-typeset .grid.cards .lg {
  color: var(--guide-accent);
}

.md-typeset .grid.cards hr {
  display: none;
}

/* "Read the overview ›": the chevron is decoration, hidden from screen readers. */
.md-typeset a.more::after {
  content: "\00a0\203a" / "";
}

/* "The guides": Settings-style grouped lists, one per section. */
.md-typeset .groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px 32px;
}

.md-typeset .group h3 {
  margin: 16px 0 8px;
  padding: 0;
  border: 0;
  font-size: var(--guide-t-body);
}

.md-typeset .group h3 .twemoji {
  margin-right: 4px;
  color: var(--guide-accent);
}

.md-typeset .group ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--guide-r);
  background: var(--guide-elev);
  list-style: none;
}

.md-typeset .group ul li {
  position: relative;
  margin: 0;
}

/* Inset separators between rows, as in a grouped list. */
.md-typeset .group ul li + li::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  border-top: 1px solid var(--guide-sep);
  content: "";
}

.md-typeset .group:not(.plain) ul li > a,
.md-typeset .group.plain ul li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 16px;
}

.md-typeset .group:not(.plain) ul li > a {
  gap: 12px;
  justify-content: space-between;
  outline-offset: -2px;
  transition: background-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.md-typeset .group:not(.plain) ul li > a::after {
  flex: none;
  color: var(--guide-chevron);
  font-size: var(--guide-t-section);
  line-height: 1;
  content: "\203a" / "";
}

.md-typeset .group ul li > a:hover {
  text-decoration: none;
}

@media (hover: hover) {
  .md-typeset .group:not(.plain) ul li > a:hover {
    background-color: var(--guide-elev-hover);
  }
}

.md-typeset .group.plain ul li {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .group ul li > a {
    transition: none;
  }
}

/* ---------- Sidebar and contents ---------- */

/* One rhythm: every link is one row height, sections are spaced evenly, and
   text is full contrast. Section labels are small and semibold, so they read as
   labels rather than links. */
.md-nav {
  font-size: var(--guide-t-ui);
  line-height: 1.35;
}

.md-nav__link {
  margin-top: 0;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--guide-fg);
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--guide-accent);
}

/* The page you're on: a soft fill behind the accent-coloured name. */
.md-sidebar--primary .md-nav__link--active {
  background: var(--guide-elev);
  font-weight: 400;
}

@media (hover: hover) {
  .md-sidebar--primary .md-nav__link[href]:hover {
    background: var(--guide-elev);
    color: var(--guide-fg);
  }
}

@media screen and (min-width: 76.25em) {
  /* The guide's name is already in the top bar. */
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  .md-nav--primary > .md-nav__list {
    margin-left: -10px;
  }

  .md-nav__item--section {
    margin: 20px 0 0;
  }

  .md-nav__item--section > .md-nav__link,
  .md-nav__item--section > .md-nav__link[for] {
    margin-bottom: 2px;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--guide-fg-2);
    font-size: var(--guide-t-caption);
    letter-spacing: 0.01em;
  }

  .md-nav__item--section > .md-nav {
    margin-left: 0;
  }
}

/* The slide-out menu on an iPad or phone uses the same sizes and weights. */
.md-nav--primary :is(.md-nav__title, .md-nav__item),
.md-nav--primary .md-nav__title[for="__drawer"] {
  font-size: var(--guide-t-ui);
  font-weight: inherit;
}

.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for="__drawer"] {
  font-weight: 600;
}

/* Contents on the right: the same row height, at caption size. */
.md-sidebar--secondary .md-nav {
  font-size: var(--guide-t-caption);
}

.md-sidebar--secondary .md-nav__title {
  padding: 0 10px 6px;
  color: var(--guide-fg);
  font-size: var(--guide-t-caption);
  box-shadow: none;
  background: var(--guide-bg);   /* the title stays pinned while the list scrolls: it needs a solid background */
}

.md-sidebar--secondary .md-nav__link {
  padding: 4px 10px;
}

/* Contents hierarchy: a thin guide line on the left. Sections are dark text;
   the steps inside them are grey and indented. The part you're reading is in the
   accent colour, with a bar on the guide line. */
.md-sidebar--secondary .md-nav--secondary > .md-nav__list {
  border-left: 1px solid var(--guide-chevron);
}

[dir] .md-sidebar--secondary .md-nav__item > .md-nav {
  margin-left: 0;
}

.md-sidebar--secondary .md-nav__link {
  position: relative;
  margin: 0;
  border-radius: 0;
  padding-left: 12px;
  color: var(--guide-fg);
}

.md-sidebar--secondary .md-nav__item .md-nav__item > .md-nav__link {
  padding-left: 24px;
  color: color-mix(in srgb, var(--guide-fg) 80%, var(--guide-bg));
}

.md-sidebar--secondary .md-nav__item .md-nav__link--active,
.md-sidebar--secondary .md-nav__item .md-nav__item > .md-nav__link--active {
  color: var(--guide-accent);
}

.md-sidebar--secondary .md-nav__link--active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background: var(--guide-accent);
  content: "";
}

@media (hover: hover) {
  .md-sidebar--secondary .md-nav__link:hover {
    color: var(--guide-accent);
  }
}

/* On an iPad or phone, every row in the menu is a 44px target. */
@media (pointer: coarse) {
  .md-nav__link {
    min-height: 44px;
    align-items: center;
  }
}

/* ---------- Footer ---------- */

/* Previous and Next line up with the top bar's edges; each label sits directly
   above its page name. Both lines of small print share one size and colour. */
.md-footer {
  border-top: 1px solid var(--guide-sep);
  color: var(--guide-fg);
}

.md-footer__inner {
  justify-content: space-between;
  padding: 16px;
}

.md-footer__link {
  align-items: center;
  gap: 12px;
  max-width: calc(50% - 12px);
  padding: 8px 0;
  margin: 0;
}

/* Long page names wrap instead of being cut off. */
.md-footer__title .md-ellipsis {
  white-space: normal;
}

.md-footer__link--prev {
  padding-left: 0;
}

.md-footer__link--next {
  justify-content: flex-end;
  padding-right: 0;
}

.md-footer__button.md-icon {
  margin: 0;
  padding: 0;
  color: var(--guide-fg-2);
}

.md-footer__title,
.md-footer__link--prev .md-footer__title {
  display: block;
  flex-grow: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: var(--guide-t-body);
  font-weight: 600;
  line-height: 1.35;
}

.md-footer__link--next .md-footer__title {
  text-align: right;
}

.md-footer__direction,
[dir] .md-footer__direction {
  position: static;
  display: block;
  margin: 0 0 2px;
  padding: 0;
  color: var(--guide-fg-2);
  font-size: var(--guide-t-caption);
  font-weight: 400;
  opacity: 1;
}

.md-footer-meta {
  border-top: 1px solid var(--guide-sep);
  background: var(--guide-elev);
}

.md-footer-meta__inner {
  padding: 14px 16px;
}

.md-copyright {
  margin: 0;
  padding: 0;
  color: var(--guide-fg-2);
  font-size: var(--guide-t-caption);
  line-height: 1.5;
}

.md-copyright__highlight {
  display: inline;
  color: inherit;
}

.md-copyright__highlight::after {
  content: " · " / "";
}

.md-copyright a {
  color: inherit;
}

.md-copyright a:hover {
  color: var(--guide-fg);
  text-decoration: underline;
}