/* Help-site styling on top of the Docnote design system.

   Load order (mkdocs.yml extra_css): assets/brand.css (the wiki's, verbatim, do
   not edit) → assets/ds/tokens.css → assets/ds/components.css (both generated by
   scripts/sync-ds.py, do not edit) → this file. Rules here win.

   This file does four things:
   1. Sets Inter (served from assets/ds/fonts, no Google Fonts) as Material's font.
   2. Maps the design-system tokens onto Material's --md-* variables, so the
      header, search overlay, table of contents and admonitions match the DS.
   3. Gives the DS a dark palette for Material's `slate` scheme. The design
      system is light only (dark mode was removed there 2026-10-23), so the dark
      values live here, local to the help site (DEV-1035 option (a)). They reuse
      the DS scales; the only off-scale values are the dark warning callout.
   4. Lays out the help pages the overrides/ templates draw (DEV-1037), and sets
      the root font size back to 16px so DS components render at design size.

   WCAG AA contrast, checked 2026-11-04 (text 4.5:1, UI boundaries and icons 3:1):

   Light (default)                                   ratio
     body bh-600 on white                            10.68
     heading bh-700 on white                         14.01
     muted / TOC / meta bh-500 on white               7.13
     link db-600 on white                             6.35
     link db-600 on code / callout bh-50              5.69
     body bh-600 on code / callout bh-50              9.57
     callout title bh-700 on bh-50                   12.56
     topic card title bh-700 on neutral #F5F5F7      12.87
     topic card desc bh-500 on neutral #F5F5F7        6.55
     search field border bh-400 on white (3:1)        4.60
     search placeholder bh-400 on white               4.60
     search icon bh-500 on white (3:1)                7.13
     focus ring db-400 on white (3:1)                 3.10
     header text white on bh-700                     14.01
     warning text #78350F on #FEF3C7                  8.15
     warning icon #B45309 on #FEF3C7 (3:1)            4.51
     link db-600 on warning #FEF3C7                   5.70

   Dark (slate)
     body bh-100 on bh-900                           14.21
     heading bh-50 on bh-900                         16.92
     muted / TOC / meta bh-200 on bh-900             10.04
     link / TOC active db-300 on bh-900               8.79
     link db-300 on code / topic card bh-800          7.80
     body bh-100 on bh-800                           12.61
     topic card desc bh-200 on bh-800                 8.91
     callout title bh-50 on db-800                   12.17
     callout body bh-100 on db-800                   10.22
     link db-300 on callout db-800                    6.32
     search field border bh-400 on bh-900 (3:1)       4.10
     search placeholder / icon bh-300 on bh-900       6.47
     focus ring db-300 on bh-900 (3:1)                8.79
     header text white on bh-800                     16.76
     warning text #FDE68A on #2B1D06                 13.16
     warning icon #F59E0B on #2B1D06 (3:1)            7.63
     link db-300 on warning #2B1D06                   7.63
     footer muted bh-200 on bh-950                   10.70
*/

/* ─── 1. Font ─── Material's theme.font is false, so it loads nothing; Inter
   comes from the @font-face in assets/ds/tokens.css. */
:root {
  --md-text-font: "Inter Variable";
  --md-code-font: "SF Mono";
}

/* ─── 2. Light: DS tokens → Material ─── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:          var(--color-interactive-primary);  /* header, tabs: bh-700 */
  --md-primary-fg-color--light:   var(--color-bh-600);
  --md-primary-fg-color--dark:    var(--color-bh-800);
  --md-primary-bg-color:          var(--color-white);
  --md-primary-bg-color--light:   var(--color-bh-200);

  --md-accent-fg-color:           var(--color-text-link);            /* hover, active TOC entry */
  --md-accent-fg-color--transparent: var(--color-da-12);
  --md-accent-bg-color:           var(--color-white);

  --md-default-fg-color:          var(--color-text-body);
  --md-default-fg-color--light:   var(--color-text-muted);
  --md-default-fg-color--lighter: var(--color-bh-300);               /* decorative only: rules, header links */
  --md-default-fg-color--lightest: var(--color-bh-100);
  --md-default-bg-color:          var(--color-surface-page);
  --md-default-bg-color--light:   rgba(255, 255, 255, 0.7);

  --md-typeset-color:             var(--color-text-body);
  --md-typeset-a-color:           var(--color-text-link);
  --md-typeset-mark-color:        var(--color-db-100);
  --md-code-fg-color:             var(--color-text-heading);
  --md-code-bg-color:             var(--color-surface-recessed);
  --md-footer-bg-color:           var(--color-bh-800);
  --md-footer-bg-color--dark:     var(--color-bh-900);

  --md-admonition-fg-color:       var(--color-text-body);
  --md-admonition-bg-color:       var(--color-surface-recessed);
  --dn-warn-bg:   var(--status-pending-bg);
  --dn-warn-text: var(--status-pending-text);
  --dn-warn-icon: var(--status-pending-fill);
}

/* ─── 3. Dark: a slate palette for the DS ───
   Semantic tokens first. Derived tokens that the DS resolves on :root (text
   roles, rings, component variables) are restated, or they would keep their
   light values. The second selector outranks Material's own
   [data-md-color-scheme=slate][data-md-color-primary=indigo] link colour. */
[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-hue: 214;

  --color-text-heading:        var(--color-bh-50);
  --color-text-body:           var(--color-bh-100);
  --color-text-muted:          var(--color-bh-200);
  --color-text-muted-on-white: var(--color-bh-200);
  --color-text-overline:       var(--color-bh-200);
  --color-text-link:           var(--color-db-300);
  --color-text-link-secondary: var(--color-bh-50);
  --color-placeholder:         var(--color-bh-300);
  --color-selection-bg:        var(--color-db-800);
  --color-selection-text:      var(--color-white);

  --color-surface-page:        var(--color-bh-900);
  --color-surface-recessed:    var(--color-bh-800);
  --color-surface-neutral:     var(--color-bh-800);

  --color-fill-hover:          var(--color-bh-800);
  --color-fill-hover-recessed: var(--color-bh-700);
  --color-fill-subtle:         var(--color-bh-700);
  --color-fill-accent:         var(--color-db-900);

  --color-border:              var(--color-bh-600);
  --color-border-subtle:       var(--color-bh-700);
  --color-border-control:      var(--color-bh-400);
  --color-card-border:         var(--color-bh-400);
  --color-focus-ring:          var(--color-db-300);

  --status-info-bg:     var(--color-db-800);
  --status-info-border: var(--color-db-500);
  --status-info-icon:   var(--color-db-300);
  --status-info-text:   var(--color-db-100);

  --ring-focus:  3px solid var(--color-db-300);
  --ring-strong: 0 0 0 1.5px var(--color-bh-50);
  --ring-halo:   0 0 0 3px var(--color-da-24);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);

  --text-page-title-color:    var(--color-bh-50);
  --text-page-lead-color:     var(--color-bh-100);
  --text-section-title-color: var(--color-bh-50);
  --text-card-title-color:    var(--color-bh-50);
  --text-item-title-color:    var(--color-bh-50);
  --text-body-color:          var(--color-bh-100);
  --text-body-sm-color:       var(--color-bh-100);
  --text-label-color:         var(--color-bh-50);
  --text-data-label-color:    var(--color-bh-200);
  --text-data-value-color:    var(--color-bh-50);
  --text-meta-color:          var(--color-bh-200);
  --text-overline-color:      var(--color-bh-200);
  --text-figure-color:        var(--color-bh-50);

  --callout-bg:          var(--color-db-800);
  --callout-icon-color:  var(--color-bh-50);
  --callout-title-color: var(--color-bh-50);
  --callout-text-color:  var(--color-bh-100);

  --disclosure-title-color:         var(--color-bh-50);
  --disclosure-chevron-color:       var(--color-bh-300);
  --disclosure-row-divider-color:   var(--color-bh-700);
  --disclosure-panel-divider-color: var(--color-bh-600);
  --disclosure-label-color:         var(--color-bh-200);
  --disclosure-value-color:         var(--color-bh-50);
  --disclosure-header-hover-bg:     var(--color-bh-800);
  --disclosure-focus-ring:          var(--color-db-300);

  /* Material */
  --md-primary-fg-color:          var(--color-bh-800);
  --md-primary-fg-color--light:   var(--color-bh-700);
  --md-primary-fg-color--dark:    var(--color-bh-950);
  --md-primary-bg-color:          var(--color-white);
  --md-primary-bg-color--light:   var(--color-bh-200);

  --md-accent-fg-color:           var(--color-db-300);
  --md-accent-fg-color--transparent: var(--color-da-16);
  --md-accent-bg-color:           var(--color-bh-900);

  --md-default-fg-color:          var(--color-bh-100);
  --md-default-fg-color--light:   var(--color-bh-200);
  --md-default-fg-color--lighter: var(--color-bh-500);
  --md-default-fg-color--lightest: var(--color-bh-700);
  --md-default-bg-color:          var(--color-bh-900);
  --md-default-bg-color--light:   rgba(3, 18, 33, 0.7);

  --md-typeset-color:             var(--color-bh-100);
  --md-typeset-a-color:           var(--color-db-300);
  --md-typeset-mark-color:        var(--color-db-800);
  --md-code-fg-color:             var(--color-bh-50);
  --md-code-bg-color:             var(--color-bh-800);
  --md-footer-bg-color:           var(--color-bh-950);
  --md-footer-bg-color--dark:     var(--color-bh-950);

  --md-admonition-fg-color:       var(--color-bh-100);
  --md-admonition-bg-color:       var(--color-db-800);
  --dn-warn-bg:   #2B1D06;   /* off-scale: the DS has no dark status colours */
  --dn-warn-text: #FDE68A;
  --dn-warn-icon: var(--status-pending-border);
}
/* The page ground outside <body> (overscroll), which sits above Material's scheme attribute. */
html:has(> body[data-md-color-scheme="slate"]) { background: var(--color-bh-900); color-scheme: dark; }

/* Copied DS components that use a raw scale step rather than a semantic
   token: give each its dark equivalent. */
[data-md-color-scheme="slate"] .input,
[data-md-color-scheme="slate"] .topic-card__icon,
[data-md-color-scheme="slate"] .segmented__option--active,
[data-md-color-scheme="slate"] .segmented__thumb,
[data-md-color-scheme="slate"] .onboarding-header,
[data-md-color-scheme="slate"] .app-footer { background: var(--color-bh-900); }
[data-md-color-scheme="slate"] .menu,
[data-md-color-scheme="slate"] .segmented,
[data-md-color-scheme="slate"] .onboarding-header--on-cloud { background: var(--color-bh-800); }
[data-md-color-scheme="slate"] .topic-card__icon { box-shadow: 0 0 0 0.5px var(--color-bh-600); }
[data-md-color-scheme="slate"] .segmented__option--active,
[data-md-color-scheme="slate"] .segmented__thumb { border-color: var(--color-bh-200); }
[data-md-color-scheme="slate"] .search-field__icon,
[data-md-color-scheme="slate"] .search-field__clear,
[data-md-color-scheme="slate"] .search-result__chevron { color: var(--color-bh-300); }
[data-md-color-scheme="slate"] .search-field__clear:hover,
[data-md-color-scheme="slate"] .btn-ghost:hover,
[data-md-color-scheme="slate"] .btn-white:hover { background: var(--color-bh-800); }
[data-md-color-scheme="slate"] .btn-ghost:active,
[data-md-color-scheme="slate"] .btn-white:active,
[data-md-color-scheme="slate"] .onboarding-header__signout:hover,
[data-md-color-scheme="slate"] .onboarding-header__lang:hover,
[data-md-color-scheme="slate"] .onboarding-header__lang[aria-expanded="true"] { background: var(--color-bh-700); }
[data-md-color-scheme="slate"] .btn-outline:hover { background: var(--color-bh-700); }
[data-md-color-scheme="slate"] .prose a:hover { color: var(--color-white); }
[data-md-color-scheme="slate"] .prose hr { border-top-color: var(--color-bh-600); }
[data-md-color-scheme="slate"] .app-footer__row--upper { border-top-color: var(--color-bh-700); }
[data-md-color-scheme="slate"] .app-footer__row--lower { background: var(--color-bh-950); border-top-color: var(--color-bh-800); }

/* ─── Material content in DS type and colour (both schemes) ─── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 { color: var(--color-text-heading); }
.md-typeset h1 { font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.md-typeset h2,
.md-typeset h3 { font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }
:focus-visible { outline-color: var(--color-focus-ring); }

/* Admonitions read as DS callouts: a tinted panel, no coloured frame. note,
   tip, info and the rest share the callout look; warning and danger use the
   DS pending (amber) family. */
.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-radius: var(--radius-surface);
  box-shadow: none;
}
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
  color: var(--color-text-heading);
  font-weight: var(--weight-semibold);
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before { background-color: var(--color-text-heading); }
.md-typeset .admonition:is(.warning, .caution, .attention, .danger, .error),
.md-typeset details:is(.warning, .caution, .attention, .danger, .error) {
  background-color: var(--dn-warn-bg);
  color: var(--dn-warn-text);
}
.md-typeset :is(.warning, .caution, .attention, .danger, .error) > :is(.admonition-title, summary) { color: var(--dn-warn-text); }
.md-typeset :is(.warning, .caution, .attention, .danger, .error) > :is(.admonition-title, summary)::before { background-color: var(--dn-warn-icon); }

/* ═══ 4. Help-site layout (DEV-1037) ═══════════════════════════════════════
   The templates in overrides/ emit the design's markup (HelpHome, HelpViews,
   OnboardingHeader, AppFooter); this part is the page layout around it, the
   same values as the design's *.module.css, plus what Material needs. */

/* Root font size. The design system sizes everything in rem at a 16px root;
   Material sets 125% (137.5% / 150% on wide screens). The root goes back to
   100% so DS components render at design size, and the few Material parts the
   site still uses (search overlay, table of contents, copy and clipboard
   toasts) get their sizes back in px below. */
html { font-size: 100%; }
body {
  font-family: var(--font-inter);
  background: var(--color-surface-page);
  color: var(--color-text-body);
  font-size: var(--font-size-body-md);
  line-height: 1.5;
}

/* Logo files per scheme (a CSS filter is never used on the mark). */
.dn-only-dark { display: none !important; }
[data-md-color-scheme="slate"] .dn-only-light { display: none !important; }
[data-md-color-scheme="slate"] .dn-only-dark { display: block !important; }

/* Phosphor SVGs inlined from overrides/.icons/phosphor carry no size. */
.dn-header svg,
.crumbs svg,
.segmented__icon svg,
.search-field__icon svg,
.disclosure-panel__chevron svg,
.dn-icon-button svg,
.dn-home__start svg { display: block; width: 1em; height: 1em; }

/* ─── Material shell → plain page ─── */
.md-main__inner { display: block; max-width: none; margin: 0; height: auto; }
.md-content { max-width: none; }
.md-main { flex-grow: 1; }

/* ─── Header: OnboardingHeader inside Material's .md-header ─── */
.md-header.dn-header {
  position: relative;
  top: auto;
  height: auto;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: inherit;
  line-height: normal;
}
.md-header.dn-header .onboarding-header { grid-template-columns: 1fr auto 1fr; }
.dn-header .onboarding-header__brand { --brand-logo-h: var(--brand-logo-lg); }
.dn-header svg { font-size: 16px; }
.dn-header .onboarding-header__lang { cursor: default; }
.dn-header .dn-header__search { cursor: pointer; }
.dn-header .dn-header__lang:hover { background: transparent; color: var(--color-text-body); }
.dn-header__palette { display: contents; }
.dn-header .md-header__option { display: flex; max-width: none; opacity: 1; transition: none; }
.dn-header .md-header__option .md-header__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  margin: 0;
  padding: 0;
  color: var(--color-text-body);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.dn-header .md-header__option .md-header__button[hidden] { display: none; }
/* One fixed 44px box per header icon, centred glyph, in both schemes. Material
   shows the active palette label with ".md-option:checked + label { display:
   block }", which outranks the rule above and left the sun or moon glyph in
   the box's top-left corner after a toggle. */
.dn-header .md-header__option > .md-option:checked + .md-header__button:not([hidden]),
.dn-header .md-header__option > .md-header__button:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  margin: 0;
  padding: 0;
  opacity: 1;
  transition: none;
  vertical-align: middle;
}
.dn-header .dn-header__search {
  flex: none;
  box-sizing: border-box;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  justify-content: center;
}
.dn-header .md-header__option .md-header__button svg { width: 16px; height: 16px; fill: currentColor; }
.dn-header .md-header__option .md-header__button:hover,
.dn-header .dn-header__search:hover { color: var(--color-text-heading); background: var(--color-bh-100); }
.dn-header .md-header__option .md-header__button:focus-visible,
.dn-header .dn-header__search:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
[data-md-color-scheme="slate"] .dn-header .md-header__option .md-header__button:hover,
[data-md-color-scheme="slate"] .dn-header .dn-header__search:hover { background: var(--color-bh-700); }
/* Material hides the header options while search is open; keep them. */
[data-md-toggle="search"]:checked ~ .md-header.dn-header .md-header__option { max-width: none; opacity: 1; }

@media (max-width: 640px) {
  .md-header.dn-header .onboarding-header {
    grid-template-columns: 1fr auto 1fr;
    padding: 0 var(--space-2);
  }
  .dn-header .onboarding-header__brand { --brand-logo-h: var(--brand-logo-sm); }
  /* Room for two 44px buttons a side at 375px: search and the theme toggle.
     English is the only language and the logo goes to the help home, so the
     EN indicator and Help hide on phones. */
  .dn-header .dn-header__lang,
  .dn-header .onboarding-header__help { display: none; }
  .dn-header .dn-header__search { width: 44px; padding: 0; justify-content: center; }
}

/* ─── Inline search ───
   Material's search form and results are moved by help.js into the page's
   search slot (the home hero, or the bar the header icon opens above the
   content), so Material's overlay, scrim and second field never show. These
   rules undo Material's header-overlay layout for the moved nodes and give
   the field the DS .search-field--hero look; results open below it, in the
   page flow. */
.dn-header .md-search { display: none; }
.dn-search-slot--hero { width: 100%; max-width: 520px; }
.dn-search-slot--inline { padding-top: var(--space-8); }
.dn-search-slot--inline[hidden] { display: none; }
.dn-search-slot .search-field__icon { display: inline-flex; z-index: 3; }
.dn-search-slot .search-field__icon svg { width: 100%; height: 100%; }
.dn-search-slot .md-search__inner {
  position: relative;
  top: auto;
  left: auto;
  float: none;
  width: 100%;
  height: auto;
  padding: 0;
  opacity: 1;
  overflow: visible;
  transform: none;
  transition: none;
  visibility: visible;
  z-index: auto;
  text-align: left;
}
.dn-search-slot .md-search__form {
  height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-pill);
  transition: none;
}
.dn-search-slot .md-search__form:hover { background: transparent; }
.dn-search-slot .search-field .search-field__input.md-search__input {
  height: var(--sf-h);
  padding-left: calc(var(--sf-inset) + var(--sf-icon) + var(--space-3));
  padding-right: calc(var(--sf-inset) + var(--sf-clear));
  font-size: var(--sf-font);
  color: var(--color-text-heading);
  background: var(--color-white);
  border: 1.5px solid var(--color-border-control);
  text-overflow: ellipsis;
}
[data-md-color-scheme="slate"] .dn-search-slot .search-field .search-field__input.md-search__input { background: var(--color-bh-900); }
.dn-search-slot .search-field .search-field__input.md-search__input:focus {
  border-color: var(--color-text-heading);
  box-shadow: 0 0 0 1.5px var(--color-text-heading);
}
.dn-search-slot .md-search__input::placeholder { color: var(--color-placeholder); }
.dn-search-slot .md-search__icon[for="__search"],
.dn-search-slot .md-search__suggest { display: none; }
/* Material's reset (×) button, as the DS clear button. */
.dn-search-slot .md-search__options {
  top: 50%;
  right: calc(var(--sf-inset) - (var(--sf-clear) - 16px) / 2);
  transform: translateY(-50%);
  z-index: 3;
}
.dn-search-slot .md-search__options > .md-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sf-clear);
  height: var(--sf-clear);
  margin: 0;
  padding: 0;
  color: var(--color-bh-500);
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transform: none;
}
.dn-search-slot .md-search__options > .md-icon svg { width: 16px; height: 16px; }
.dn-search-slot .md-search__input:valid ~ .md-search__options > .md-icon { opacity: 1; pointer-events: auto; }
.dn-search-slot .md-search__options > .md-icon:hover { background: var(--color-bh-50); color: var(--color-text-heading); opacity: 1; }
[data-md-color-scheme="slate"] .dn-search-slot .md-search__options > .md-icon { color: var(--color-bh-300); }
[data-md-color-scheme="slate"] .dn-search-slot .md-search__options > .md-icon:hover { background: var(--color-bh-800); }
.dn-search-slot .md-search__options > .md-icon:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 1px; }
/* Results: under the field, in the page flow, only once something is typed. */
.dn-search-slot .md-search__output {
  display: none;
  position: relative;
  top: auto;
  bottom: auto;
  width: 100%;
  margin-top: var(--space-2);
  opacity: 1;
  overflow: hidden;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface-page);
  box-shadow: var(--shadow-soft);
  transition: none;
}
.dn-search-slot .dn-search--results .md-search__output { display: block; }
.dn-search-slot .md-search__scrollwrap {
  width: auto;
  height: auto;
  max-height: min(60vh, 520px);
  background-color: var(--color-surface-page);
}

/* Results, as DS search results: title, excerpt, matches marked. */
.md-search-result { font-size: var(--font-size-body-sm); color: var(--color-text-body); }
.md-search-result__meta { font-size: var(--font-size-body-sm); padding: 0 24px; line-height: 44px; height: 44px; color: var(--color-text-muted); background: var(--color-surface-recessed); }
.md-search-result__list { margin: 0; padding: 0; }
.md-search-result__item { box-shadow: 0 -0.5px var(--color-border-subtle); }
.md-search-result__link { display: block; outline: none; }
.md-search-result__link:is(:hover, :focus, [data-md-state="active"]) { background-color: var(--color-surface-neutral); }
.md-search-result__article { padding: 12px 24px; }
.md-search-result__article--document .md-search-result__title { margin: 0; font-size: var(--font-size-body-md); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--color-text-heading); }
.md-search-result .md-typeset { font-size: var(--font-size-body-sm); line-height: 1.5; color: var(--color-text-body); }
.md-search-result .md-typeset h1,
.md-search-result .md-typeset h2 { margin: 0 0 4px; font-size: var(--font-size-body-sm); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--color-text-heading); }
.md-search-result .md-typeset p,
.md-search-result .md-typeset ul,
.md-search-result .md-typeset ol { margin: 4px 0 0; }
.md-search-result__icon { display: none; }
.md-search-result__more > summary { padding: 0; }
.md-search-result__more > summary > div { font-size: var(--font-size-body-sm); padding: 10px 24px; color: var(--color-text-link); }
.md-search-result__terms,
.md-search-result__more summary::marker { font-size: var(--font-size-body-sm); }
.md-search-result mark { color: var(--color-text-heading); background: var(--color-db-100); text-decoration: none; border-radius: 2px; }
[data-md-color-scheme="slate"] .md-search-result mark { background: var(--color-db-800); }

/* Material's copy toast and skip link, at DS size. */
.md-dialog { font-size: var(--font-size-body-sm); padding: 12px 16px; border-radius: var(--radius-md); }
.md-skip { font-size: var(--font-size-body-sm); padding: 8px 12px; }

/* ─── Footer ─── */
.app-footer { margin-top: var(--space-16); }
.app-footer__copy { margin: 0; }

/* ─── Shared ─── */
.dn-page { padding: 0 var(--space-4) var(--space-16); }
.dn-column { width: 100%; margin: 0 auto; }
.dn-column--topic { max-width: 720px; }
.dn-column--article { max-width: 680px; }
.dn-section-title { margin: 0 0 var(--space-4); }
.dn-still-stuck { margin-top: var(--space-12); }
.dn-still-stuck .prose a,
.dn-still-stuck a { font-weight: var(--weight-semibold); }

/* Topic-list link (HelpViews .articles / .article). */
.dn-articles {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.dn-article-link {
  font-size: var(--font-size-body-md);
  line-height: 1.5;
  color: var(--color-text-link-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dn-article-link:hover { color: var(--color-bh-900); }
[data-md-color-scheme="slate"] .dn-article-link:hover { color: var(--color-white); }
.dn-article-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Breadcrumb: collapse the middle on phones, like the DS component. */
@media (max-width: 640px) {
  .dn-crumbs--js:not(.dn-crumbs--expanded) .dn-crumbs__mid { display: none; }
}
@media (min-width: 641px) {
  .crumbs .dn-crumbs__more,
  .crumbs .dn-crumbs__more-sep { display: none; }
}
.crumbs .dn-crumbs__more[hidden],
.crumbs .dn-crumbs__more-sep[hidden],
.dn-crumbs--expanded .dn-crumbs__more,
.dn-crumbs--expanded .dn-crumbs__more-sep { display: none; }

/* ─── Home (HelpHome.module.css) ─── */
.dn-page--home { padding: var(--space-12) var(--space-4) var(--space-16); }
.dn-home { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; }
.dn-home__audience { width: 240px; max-width: 100%; margin: 0 auto var(--space-8); }
.segmented__icon svg { font-size: 16px; }
.dn-home__hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
.dn-home__title { margin: 0; }
.dn-home__panel[hidden] { display: none; }
.dn-home__topics { margin-top: var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); }
.dn-home__topics-title { margin: 0; }
.topic-card__icon svg { fill: currentColor; }
.dn-home__help { margin-top: var(--space-12); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-5); }
.dn-home__help-title { margin: 0; }

/* "New to Docnote? Start here" on the clinic side: a quiet DS callout row. */
.dn-home__start {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-5);
  background: var(--callout-bg);
  border-radius: var(--radius-md);
  color: var(--color-text-body);
  text-decoration: none;
}
.dn-home__start:hover .dn-home__start-title { text-decoration: underline; text-underline-offset: 4px; }
.dn-home__start:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.dn-home__start-icon { font-size: 24px; color: var(--callout-icon-color); flex: none; }
.dn-home__start-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dn-home__start-title { font-weight: var(--weight-semibold); color: var(--callout-title-color); }
.dn-home__start-desc { font-size: var(--font-size-body-sm); color: var(--callout-text-color); }
.dn-home__start-chevron { font-size: 20px; color: var(--color-text-muted); flex: none; }
.dn-home__start + .dn-home__topics { margin-top: var(--space-8); }

/* ─── Topic (HelpViews.module.css .topic) ─── */
.dn-title { margin: var(--space-8) 0 var(--space-3); }
.dn-summary { margin: 0 0 var(--space-6); color: var(--color-text-muted-on-white); }
.dn-sections {
  --disclosure-header-padding-x: 0;
  --disclosure-body-padding-x: 0;
  --disclosure-header-padding-y: var(--space-5);
  --disclosure-title-font-size: var(--font-size-body-lg);
  --disclosure-title-font-weight: var(--weight-semibold);
  --disclosure-chevron-color: var(--color-text-heading);
  --disclosure-chevron-size: 24px;
  --disclosure-panel-divider-color: transparent;
  --disclosure-header-hover-bg: transparent;
}
[data-md-color-scheme="slate"] .dn-sections {
  --disclosure-chevron-color: var(--color-bh-50);
  --disclosure-panel-divider-color: transparent;
  --disclosure-header-hover-bg: transparent;
}
/* Native <details>: no marker; the chevron turns when open. */
.dn-sections summary { list-style: none; }
.dn-sections summary::-webkit-details-marker { display: none; }
.dn-sections details[open] > summary .disclosure-panel__chevron { transform: rotate(180deg); }
.dn-sections .disclosure-panel__chevron { display: inline-flex; }

/* ─── Article (HelpViews.module.css .articleView) ─── */
.dn-article__title { margin: var(--space-8) 0 var(--space-2); }
.dn-title--plain { margin-bottom: var(--space-8); }
.dn-article__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-8); }
.dn-article__updated { margin: 0; color: var(--color-text-muted-on-white); font-variant-numeric: tabular-nums; }
.dn-page--page .dn-article__updated { margin: 0 0 var(--space-8); }
.dn-related { margin-top: var(--space-12); }

.dn-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  margin-right: calc(-1 * var(--space-3));
  padding: 0;
  font-size: 20px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.dn-icon-button:hover { color: var(--color-text-heading); background: var(--color-bh-100); }
[data-md-color-scheme="slate"] .dn-icon-button:hover { background: var(--color-bh-700); }
.dn-icon-button:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* Prose extras: the Markdown's first paragraph is the lead, as in the design. */
.dn-prose > p:first-child { font-size: var(--font-size-body-lg); line-height: var(--line-28); }
.dn-prose h2 a.headerlink,
.dn-prose h3 a.headerlink { display: none; }
.dn-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.dn-prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--font-size-body-sm); }
.dn-prose th,
.dn-prose td { padding: var(--space-3) var(--space-4); border-bottom: 0.5px solid var(--color-border); text-align: left; vertical-align: top; }
.dn-prose th { color: var(--color-text-heading); font-weight: var(--weight-semibold); }
.dn-prose code { font-size: 0.9em; padding: 0 4px; border-radius: var(--radius-sm); background: var(--color-surface-recessed); }

/* Admonitions as DS callouts (.callout: Cloud panel, icon, title, body). */
.dn-prose .admonition,
.dn-prose details {
  position: relative;
  padding: var(--callout-padding) var(--callout-padding) var(--callout-padding) calc(var(--callout-padding) + 24px + var(--callout-gap));
  background: var(--callout-bg);
  border-radius: var(--callout-radius);
  color: var(--callout-text-color);
  font-size: var(--callout-text-font-size);
  line-height: 1.5;
}
.dn-prose .admonition > * + * { margin-top: var(--callout-body-gap); }
.dn-prose .admonition > p,
.dn-prose details > p { margin-bottom: 0; }
.dn-prose .admonition-title,
.dn-prose details > summary {
  margin: 0;
  font-size: var(--font-size-body-md);
  font-weight: var(--callout-title-font-weight);
  line-height: 1.4;
  color: var(--callout-title-color);
}
.dn-prose .admonition::before,
.dn-prose details::before {
  content: "";
  position: absolute;
  top: var(--callout-padding);
  left: var(--callout-padding);
  width: 24px;
  height: 24px;
  background-color: var(--callout-icon-color);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>') center / contain no-repeat;
}
.dn-prose :is(.admonition, details):is(.tip, .hint, .success)::before { -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"/></svg>'); mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"/></svg>'); }
.dn-prose :is(.admonition, details):is(.warning, .caution, .attention, .danger, .error) { background: var(--dn-warn-bg); color: var(--dn-warn-text); }
.dn-prose :is(.admonition, details):is(.warning, .caution, .attention, .danger, .error) > :is(.admonition-title, summary) { color: var(--dn-warn-text); }
.dn-prose :is(.admonition, details):is(.warning, .caution, .attention, .danger, .error)::before {
  background-color: var(--dn-warn-icon);
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>');
          mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>');
}
.dn-prose .admonition a { color: inherit; }

/* Table of contents: Material's (toc.follow), restyled. Right of the article
   column from 768px, hidden on phones. */
.dn-toc { display: none; }
@media (min-width: 768px) {
  .dn-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 680px) 200px;
    justify-content: center;
    column-gap: var(--space-10);
  }
  .dn-article-layout .dn-column--article { margin: 0; }
  .dn-toc { display: block; }
}
@media (min-width: 1200px) {
  /* The article stays centred on the page, as in the design; the contents
     sit in the right-hand margin. */
  .dn-article-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: var(--space-12); }
  .dn-article-layout .dn-column--article { grid-column: 2; }
  .dn-toc { grid-column: 3; max-width: 240px; }
}
.dn-toc .md-sidebar {
  position: sticky;
  top: var(--space-6);
  width: auto;
  height: auto;
  padding: 0;
  margin-top: calc(var(--space-section-lg) + var(--space-8) + 34px);
  transform: none;
  align-self: flex-start;
}
.dn-toc .md-sidebar__scrollwrap { margin: 0; overflow-y: auto; max-height: calc(100vh - 48px); scrollbar-width: thin; }
.dn-toc .md-sidebar__inner { padding: 0; }
.dn-toc .md-nav { font-size: var(--font-size-body-sm); line-height: 1.4; }
.dn-toc .md-nav--secondary { border-left: 1px solid var(--color-border-subtle); }
.dn-toc__title {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.dn-toc .md-nav__list { margin: 0; padding: 0; list-style: none; }
.dn-toc .md-nav__item { padding: 0; }
.dn-toc .md-nav__item .md-nav { padding-left: var(--space-3); border-left: 0; }
.dn-toc .md-nav__link {
  display: block;
  margin: 0 0 0 -1px;
  padding: 6px 0 6px var(--space-4);
  border-left: 2px solid transparent;
  color: var(--color-text-muted);
  text-decoration: none;
}
.dn-toc .md-nav__link:hover { color: var(--color-text-heading); }
.dn-toc .md-nav__link--active { color: var(--color-text-heading); font-weight: var(--weight-semibold); border-left-color: var(--color-text-heading); }
.dn-toc .md-nav__link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -1px; }
.dn-toc .md-ellipsis { overflow: visible; white-space: normal; }

/* Print: just the article. The print button is on articles only. */
@media print {
  .dn-header, .app-footer, .crumbs, .dn-toc, .dn-print, .dn-related, .dn-still-stuck { display: none !important; }
  .dn-page { padding: 0; }
  .dn-article-layout { display: block; }
}

/* Phone first: nothing needs a horizontal scroll. */
.md-typeset table:not([class]) {
  display: block;
  overflow-x: auto;
}