/* =============================================================================
   OhPlayer Help. Colours, Inter and radii come from the app (src/styles/tokens.css):
   accent #FF5A1F, dark surfaces #0A0A0A / #121212 / #212121, text #F2F2F2.
   Light is the default. Dark follows the system and the header toggle.

   mkdocs.yml uses `primary: custom` / `accent: custom`, so Material applies no
   colour of its own and every value below is the single source of truth.

   Header rule: never set `display` on .md-header__button. Material hides the
   inactive palette label with a scheme-scoped display:none, and a blanket
   display rule resurrects it as a second theme icon.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  --help-orange: #ff5a1f;
  --help-link: #d9430f;
  --help-link-hover: #b53a0b;
  --help-ink: #1b1b1f;
  --help-ink-muted: #5b5b63;
  --help-bg: #ffffff;
  --help-surface: #f7f7f8;
  --help-surface-2: #efeff1;
  --help-line: #e6e6ea;
  --help-line-strong: #d6d6db;
  --help-tint: rgba(255, 90, 31, 0.07);
  --help-tint-strong: rgba(255, 90, 31, 0.18);
  --help-warning: #f5cd47;
  --help-warning-bg: rgba(245, 205, 71, 0.14);
  --help-radius: 10px;
  --help-radius-lg: 16px;

  --md-primary-fg-color: var(--help-orange);
  --md-primary-fg-color--light: #ff7a4d;
  --md-primary-fg-color--dark: var(--help-link);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
  --md-accent-fg-color: var(--help-link);
  --md-accent-fg-color--transparent: rgba(217, 67, 15, 0.1);
  --md-default-bg-color: var(--help-bg);
  --md-default-fg-color: var(--help-ink);
  --md-default-fg-color--light: var(--help-ink-muted);
  --md-default-fg-color--lighter: var(--help-line-strong);
  --md-default-fg-color--lightest: var(--help-line);
  --md-typeset-color: var(--help-ink);
  --md-typeset-a-color: var(--help-link);
  --md-code-bg-color: var(--help-surface-2);
  --md-code-fg-color: var(--help-ink);
  --md-footer-bg-color: var(--help-surface);
  --md-footer-fg-color: var(--help-ink-muted);
  --md-footer-fg-color--light: var(--help-ink-muted);
  --md-footer-bg-color--dark: var(--help-surface);

  --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/><path d='M9 18h6'/><path d='M10 22h4'/></svg>");
  --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
  --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
}

[data-md-color-scheme="slate"] {
  --help-link: #ff8a5c;
  --help-link-hover: #ffa47d;
  --help-ink: #f2f2f2;
  --help-ink-muted: rgba(242, 242, 242, 0.64);
  --help-bg: #0a0a0a;
  --help-surface: #121212;
  --help-surface-2: #212121;
  --help-line: rgba(255, 255, 255, 0.09);
  --help-line-strong: rgba(255, 255, 255, 0.16);
  --help-tint: rgba(255, 90, 31, 0.12);
  --help-tint-strong: rgba(255, 90, 31, 0.28);
  --help-warning-bg: rgba(245, 205, 71, 0.15);

  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--help-link);
  --md-accent-fg-color--transparent: rgba(255, 138, 92, 0.12);
  --md-default-bg-color: var(--help-bg);
  --md-default-fg-color: var(--help-ink);
  --md-default-fg-color--light: var(--help-ink-muted);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.2);
  --md-default-fg-color--lightest: var(--help-line);
  --md-typeset-color: var(--help-ink);
  --md-typeset-a-color: var(--help-link);
  --md-code-bg-color: var(--help-surface-2);
  --md-code-fg-color: var(--help-ink);
  --md-footer-bg-color: var(--help-surface);
  --md-footer-bg-color--dark: var(--help-surface);
  --md-hue: 0;
}

html {
  scroll-padding-top: 4.6rem;
}

/* Material scales the whole site up to 137.5% / 150% on wide screens; keep its normal 125% so pages don't balloon. */
@media screen and (min-width: 100em) {
  html { font-size: 125%; }
}

body {
  background: var(--help-bg);
}

.md-grid {
  max-width: 78rem;
}

/* ---------------------------------------------------------------------------
   Header: wordmark + Help pill, search, quiet links, theme toggle
   ------------------------------------------------------------------------- */
.md-header {
  background-color: var(--help-bg);
  color: var(--help-ink);
  border-bottom: 1px solid var(--help-line);
  box-shadow: none;
}

.md-header--shadow,
.md-header[data-md-state="shadow"] {
  box-shadow: none;
}

.md-header__inner {
  padding-inline: 0.8rem;
  height: 4rem;
  align-items: center;
  gap: 0.75rem;
}

.md-header__button.md-logo {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0;
  margin: 0;
  color: inherit;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.05rem;
  width: 1.05rem;
}

/* The sun stands in for the "O" of OhPlayer: sit it right against "hPlayer". */
.md-header__inner > .md-header__button.md-logo {
  margin-right: -0.55rem;
}

.md-header .md-header__title,
.md-header .md-header__topic {
  color: inherit;
}

.md-header__inner > .md-header__title {
  margin-left: 0;
  margin-right: 0.5rem;
  flex-grow: 0;
}

.md-header__title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Only the site name shows. The second topic is the page title on scroll. */
.md-header__topic[data-md-component="header-topic"] {
  display: none;
}

.md-header__topic:first-child {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.help-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 0.1em;
  color: var(--help-ink-muted);
  background: var(--help-surface-2);
  border-radius: 6px;
}

.md-header__button.md-icon {
  height: 2rem;
  width: 2rem;
  padding: 0;
}

.md-header__button.md-icon svg {
  height: 1.15rem;
  width: 1.15rem;
}

.md-header__option {
  align-items: center;
  gap: 0.25rem;
}

.md-header__inner > .md-search {
  order: 3;
  margin-left: auto;
}

.md-header__inner > .help-header-links {
  order: 4;
}

.md-header__inner > .md-header__option {
  order: 5;
}

.md-header__inner > .md-header__button[for="__drawer"],
.md-header__inner > .md-header__button[for="__search"] {
  order: 6;
}

.md-header__option .md-header__button {
  position: relative;
}

.md-header__option .md-header__button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.help-header-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0.25rem 0 0.75rem;
}

.help-header-links a {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--help-ink-muted);
  text-decoration: none;
  white-space: nowrap;
}

.help-header-links a:hover {
  color: var(--help-ink);
}

.help-header-links .help-header-links__app {
  padding: 0.5rem 0.85rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--help-orange);
  border-radius: 8px;
}

.help-header-links .help-header-links__app:hover {
  color: #ffffff;
  background: #eb3e00;
}

@media screen and (max-width: 76.2344em) {
  .help-header-links {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Search
   ------------------------------------------------------------------------- */
.md-search__form {
  height: 2.5rem;
  align-items: center;
  background-color: var(--help-surface);
  border: 1px solid var(--help-line);
  border-radius: var(--help-radius);
  box-shadow: none;
}

.md-search__form:hover {
  background-color: var(--help-surface);
  border-color: var(--help-line-strong);
}

@media screen and (min-width: 60em) {
  .md-search__inner {
    width: 27.5rem;
  }
}

.md-search__input {
  height: 2.5rem;
  line-height: 2.5rem;
  padding-left: 2.6rem;
  color: var(--help-ink);
}

.md-header .md-search__input + .md-search__icon {
  color: var(--help-ink-muted);
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
}

.md-search__input::placeholder {
  color: var(--help-ink-muted);
}

.md-search__output {
  border-radius: 0 0 var(--help-radius) var(--help-radius);
}

/* ---------------------------------------------------------------------------
   Tabs: five task tabs plus Reference, orange underline on the active one
   ------------------------------------------------------------------------- */
.md-tabs {
  background: var(--help-bg);
  color: var(--help-ink);
  border-bottom: 1px solid var(--help-line);
}

[dir="ltr"] .md-tabs__list {
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}

.md-tabs__list {
  height: 2.9rem;
  align-items: stretch;
  gap: 1.75rem;
}

.md-tabs__item {
  height: 100%;
  padding: 0;
  display: flex;
  align-items: stretch;
}

.md-tabs__link {
  display: flex;
  align-items: center;
  margin-top: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--help-ink-muted);
  opacity: 1;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}

.md-tabs__link:hover {
  color: var(--help-ink);
}

.md-tabs__item--active .md-tabs__link {
  color: var(--help-ink);
  font-weight: 600;
  border-bottom-color: var(--help-orange);
}

/* ---------------------------------------------------------------------------
   Left navigation: quiet rows, tinted active pill, small caps group titles
   ------------------------------------------------------------------------- */
.md-sidebar--primary {
  padding-top: 0.5rem;
}

.md-nav {
  font-size: 0.8rem;
}

.md-nav--primary .md-nav__link {
  margin-top: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  color: var(--help-ink);
  line-height: 1.4;
}

.md-nav--primary .md-nav__link:hover {
  color: var(--help-ink);
  background: var(--help-surface-2);
}

.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__item--active > .md-nav__link:not(.md-nav__link--index) {
  color: var(--help-link);
  font-weight: 600;
  background: var(--help-tint);
}

.md-nav__item--section {
  margin: 1.1rem 0 0.15rem;
}

.md-nav__item--section > .md-nav__link {
  padding-left: 0.75rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--help-ink-muted);
  background: transparent;
  pointer-events: none;
}

.md-nav__item--section > .md-nav__link:hover {
  background: transparent;
}

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

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 15.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Right-hand table of contents: "On this page", orange left rule on active
   ------------------------------------------------------------------------- */
.md-sidebar--secondary {
  width: 12.5rem;
}

.md-nav--secondary > .md-nav__title {
  height: auto;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: none;
  box-shadow: none;
  color: var(--help-ink-muted);
}

.md-nav--secondary > .md-nav__title .md-icon {
  display: none;
}

.md-nav--secondary > .md-nav__title::before {
  content: "ON THIS PAGE";
  font-size: 0.66rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.md-nav--secondary .md-nav__list {
  padding-left: 0;
}

.md-nav--secondary .md-nav__link {
  margin: 0;
  padding: 0.28rem 0 0.28rem 0.85rem;
  font-size: 0.76rem;
  color: var(--help-ink-muted);
  border-left: 2px solid var(--help-line);
  border-radius: 0;
  background: none;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--help-ink);
  background: none;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--help-link);
  font-weight: 600;
  border-left-color: var(--help-orange);
  background: none;
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   ------------------------------------------------------------------------- */
.md-path {
  margin-bottom: 1rem;
  font-size: 0.72rem;
}

.md-path__item--page {
  color: var(--help-ink);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Article: H1, lead, chips, meta line
   ------------------------------------------------------------------------- */
.md-content {
  flex: 1 1 auto;
  max-width: 45rem;
  margin-inline: 0;
}

.md-typeset {
  color: var(--help-ink);
  font-size: 0.8rem;
  line-height: 1.7;
}

.md-content__inner {
  margin-top: 1.5rem;
}

.md-content__inner > h1 {
  margin: 0 0 0.6em;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--help-ink);
}

/* Every page opens with one sentence saying what it helps you do. */
.md-content__inner > h1 + p {
  margin: 0 0 1em;
  font-size: 1.2em;
  line-height: 1.55;
  color: var(--help-ink-muted);
}

.help-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

[dir="ltr"] .md-typeset .help-chips li {
  margin: 0;
}

.help-chip {
  padding: 0.15rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--help-ink-muted);
  background: var(--help-surface-2);
  border-radius: 999px;
}

.md-source-file.help-meta {
  display: block;
  margin: 0 0 1.6rem;
  font-size: 0.7rem;
  color: var(--help-ink-muted);
}

.md-source-file.help-meta .md-icon,
.md-source-file.help-meta svg {
  display: none;
}

.md-source-file.help-meta .md-source-file__fact::before {
  content: "Updated ";
}

.md-typeset h2 {
  margin: 2em 0 0.5em;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--help-ink);
}

.md-typeset h3 {
  margin: 1.6em 0 0.4em;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--help-ink);
}

.md-typeset h2 + h3 {
  margin-top: 1em;
}

.md-typeset p,
.md-typeset li {
  font-size: 1.02em;
}

.md-typeset strong {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Steps: put a page's task headings inside <div class="steps" markdown>.
   Each H2 gets a numbered orange badge.
   ------------------------------------------------------------------------- */
.md-typeset .steps {
  counter-reset: help-step;
}

.md-typeset .steps > h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  counter-increment: help-step;
}

.md-typeset .steps > h2::before {
  content: counter(help-step);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--help-link);
  background: var(--help-tint-strong);
  border-radius: 50%;
}

.md-typeset .steps > h2 .headerlink {
  margin-left: 0.3rem;
}

/* ---------------------------------------------------------------------------
   Screenshots: <figure class="shot"> with an image and a caption. The numbered
   orange badges are drawn into the image by scripts/help-screenshots.mjs, and the
   caption explains each number.
   ------------------------------------------------------------------------- */
.md-typeset figure.shot {
  display: block;
  margin: 1.4em 0;
  padding: 0;
}

.md-typeset figure.shot > img,
.md-typeset figure.shot > p > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--help-line-strong);
  border-radius: 12px;
  background: var(--help-surface-2);
}

.md-typeset figure.shot > p {
  margin: 0;
}

.md-typeset figure.shot figcaption {
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--help-ink-muted);
  text-align: left;
}

/* ---------------------------------------------------------------------------
   Admonitions: tip (orange), note (neutral), warning (yellow). Any other
   Material type is styled like a note so a stray one never looks broken.
   ------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  margin: 1.4em 0;
  padding: 0 0.9rem;
  font-size: 0.8rem;
  color: var(--help-ink);
  background: var(--help-surface);
  border: 1px solid var(--help-line);
  border-left: 3px solid var(--help-line-strong);
  border-radius: var(--help-radius);
  box-shadow: none;
  overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
  margin: 0 -0.9rem;
  padding: 0.7rem 0.9rem 0.1rem 2.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--help-ink);
  background: transparent;
  border: none;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  top: 0.85rem;
  left: 0.9rem;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--help-ink-muted);
  -webkit-mask-image: var(--md-admonition-icon--note);
  mask-image: var(--md-admonition-icon--note);
}

.md-typeset .admonition > :last-child {
  margin-bottom: 0.9rem;
}

.md-typeset .admonition p {
  margin: 0.3rem 0 0.4rem;
}

/* Text only: the title row has no body of its own, so hug it. */
.md-typeset .admonition-title:last-child {
  padding-bottom: 0.8rem;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  background: var(--help-tint);
  border-color: var(--help-tint-strong);
  border-left-color: var(--help-orange);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--help-link);
  -webkit-mask-image: var(--md-admonition-icon--tip);
  mask-image: var(--md-admonition-icon--tip);
}

.md-typeset .admonition.warning,
.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.bug,
.md-typeset .admonition.question,
.md-typeset details.warning,
.md-typeset details.danger,
.md-typeset details.failure,
.md-typeset details.bug,
.md-typeset details.question {
  background: var(--help-warning-bg);
  border-color: rgba(245, 205, 71, 0.4);
  border-left-color: var(--help-warning);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .danger > .admonition-title::before,
.md-typeset .failure > .admonition-title::before,
.md-typeset .bug > .admonition-title::before,
.md-typeset .question > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: #b58900;
  -webkit-mask-image: var(--md-admonition-icon--warning);
  mask-image: var(--md-admonition-icon--warning);
}

[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .danger > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .failure > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .bug > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .question > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .warning > summary::before {
  background-color: var(--help-warning);
}

/* ---------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
.md-typeset__scrollwrap {
  margin: 1.4em 0;
}

.md-typeset__table {
  display: block;
  width: 100%;
  border: 1px solid var(--help-line-strong);
  border-radius: 8px;
  overflow: hidden;
}

.md-typeset__table table:not([class]) {
  display: table;
  width: 100%;
  margin: 0;
  font-size: 0.78rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  padding: 0.65em 0.9em;
  background: var(--help-surface);
  color: var(--help-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--help-line-strong);
}

.md-typeset table:not([class]) td {
  padding: 0.65em 0.9em;
  border-top: 1px solid var(--help-line);
  vertical-align: top;
}

.md-typeset table:not([class]) tr {
  background: transparent;
}

.md-typeset table:not([class]) tr:hover {
  background: var(--help-surface);
}

/* ---------------------------------------------------------------------------
   Links
   ------------------------------------------------------------------------- */
.md-typeset a:not(.headerlink):not(.next-card):not(.md-button):not(.help-grid a):not(.help-popular a):not(.help-problems a):not(.help-mail) {
  color: var(--help-link);
  text-decoration: underline;
  text-decoration-color: rgba(217, 67, 15, 0.4);
  text-underline-offset: 3px;
}

.md-typeset a:not(.headerlink):not(.next-card):not(.md-button):not(.help-grid a):not(.help-popular a):not(.help-problems a):not(.help-mail):hover {
  color: var(--help-link-hover);
  text-decoration-color: currentColor;
}

[data-md-color-scheme="slate"] .md-typeset a:not(.headerlink):not(.next-card):not(.md-button):not(.help-grid a):not(.help-popular a):not(.help-problems a):not(.help-mail) {
  text-decoration-color: rgba(255, 138, 92, 0.4);
}

/* ---------------------------------------------------------------------------
   Keys, inline code, code blocks
   ------------------------------------------------------------------------- */
.md-typeset kbd {
  display: inline-block;
  padding: 0.05em 0.5em;
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--help-ink);
  background-color: var(--help-surface-2);
  border: 1px solid var(--help-line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: none;
}

.md-typeset code {
  padding: 0.1em 0.4em;
  font-size: 0.85em;
  background-color: var(--help-surface-2);
  border-radius: 5px;
}

.md-typeset pre > code {
  padding: 0.9rem 1rem;
  border-radius: var(--help-radius);
}

.md-typeset .highlight {
  margin: 1.2em 0;
}

.md-typeset .highlight pre {
  border: 1px solid var(--help-line);
  border-radius: var(--help-radius);
}

.md-typeset .highlight code {
  font-size: 0.78rem;
}

/* ---------------------------------------------------------------------------
   Content tabs (for the WordPress / Webflow / Framer / Shopify page)
   ------------------------------------------------------------------------- */
.md-typeset .tabbed-set {
  margin: 1.4em 0;
}

.md-typeset .tabbed-labels {
  box-shadow: 0 -1px 0 var(--help-line) inset;
}

.md-typeset .tabbed-labels > label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--help-ink-muted);
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--help-ink);
}

.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5) {
  color: var(--help-ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Definition lists
   ------------------------------------------------------------------------- */
.md-typeset dl dt {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Next steps: end of every page. Two cards.
   ------------------------------------------------------------------------- */
.md-typeset .next-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0.8rem 0 0;
}

.md-typeset .next-steps > p {
  display: contents;
}

.md-typeset a.next-card {
  display: block;
  padding: 1rem 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--help-ink-muted);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--help-line-strong);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}

.md-typeset a.next-card strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.88rem;
  color: var(--help-ink);
}

.md-typeset a.next-card strong::after {
  content: " \2192";
  color: var(--help-orange);
}

.md-typeset a.next-card:hover {
  background: var(--help-surface);
  border-color: var(--help-orange);
}

@media screen and (max-width: 40em) {
  .md-typeset .next-steps {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Feedback: "Was this page helpful?" (runs in the browser only)
   ------------------------------------------------------------------------- */
.help-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 2.6rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--help-surface);
  border: 1px solid var(--help-line);
  border-radius: 12px;
}

.help-feedback__copy {
  flex: 1 1 14rem;
}

.help-feedback__title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--help-ink);
}

.help-feedback__note {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  color: var(--help-ink-muted);
}

.help-feedback__actions {
  display: flex;
  gap: 0.5rem;
}

.help-feedback__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--help-ink);
  background: transparent;
  border: 1px solid var(--help-line-strong);
  border-radius: 8px;
  cursor: pointer;
}

.help-feedback__btn:hover {
  border-color: var(--help-orange);
}

.help-feedback__btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-feedback__thanks {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--help-ink);
}

.help-feedback__thanks a {
  color: var(--help-link);
}

/* ---------------------------------------------------------------------------
   Footer: previous / next as bordered pills
   ------------------------------------------------------------------------- */
.md-footer {
  background: var(--help-bg);
  color: var(--help-ink-muted);
}

.md-footer__inner {
  padding: 0.6rem 0.2rem 0;
}

.md-footer__link {
  margin: 0.4rem 0;
  padding: 0.7rem 0.9rem;
  color: var(--help-ink);
  border: 1px solid var(--help-line);
  border-radius: 10px;
  transition: border-color 0.15s;
  opacity: 1;
}

.md-footer__link:hover {
  border-color: var(--help-orange);
  opacity: 1;
}

.md-footer__title {
  font-size: 0.8rem;
  font-weight: 600;
}

.md-footer__direction {
  font-size: 0.66rem;
  color: var(--help-ink-muted);
  opacity: 1;
}

.md-footer-meta {
  background: var(--help-bg);
  border-top: 1px solid var(--help-line);
}

.md-footer-meta__inner,
.md-copyright {
  color: var(--help-ink-muted);
}

/* ---------------------------------------------------------------------------
   Home page: hero, task cards, fix-a-problem list, still-stuck strip
   ------------------------------------------------------------------------- */
.md-content__inner:has(.help-hero) {
  margin-top: 0;
  padding-top: 0;
}

.help-home .md-content {
  max-width: none;
}

.help-home .md-main__inner {
  margin-top: 0;
}

.help-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3.2rem 0 2rem;
  text-align: center;
}

.md-typeset .help-hero h1 {
  margin: 0;
  color: var(--help-ink);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.md-typeset .help-hero p {
  margin: 0;
}

.md-typeset .help-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--help-link);
}

.md-typeset .help-hero__lead {
  font-size: 0.9rem;
  color: var(--help-ink-muted);
}

.help-hero__field {
  width: min(40rem, 100%);
}

.help-hero__search {
  box-sizing: border-box;
  width: 100%;
  height: 2.6rem;
  margin-top: 0.4rem;
  padding: 0 1rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--help-ink);
  background: var(--help-surface);
  border: 1px solid var(--help-line-strong);
  border-radius: 14px;
  outline: none;
}

.help-hero__search:focus {
  border-color: var(--help-orange);
  box-shadow: 0 0 0 3px var(--help-tint-strong);
}

.help-hero__search::placeholder {
  color: var(--help-ink-muted);
}

.help-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--help-ink-muted);
}

.md-typeset .help-popular a {
  padding: 0.3rem 0.8rem;
  font-weight: 500;
  color: var(--help-ink);
  text-decoration: none;
  border: 1px solid var(--help-line-strong);
  border-radius: 999px;
}

.md-typeset .help-popular a:hover {
  border-color: var(--help-orange);
  color: var(--help-link);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto 3rem;
}

.help-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-column: span 2;
  padding: 1.25rem;
  background: var(--help-surface);
  border: 1px solid var(--help-line);
  border-radius: var(--help-radius-lg);
}

.help-card--small {
  grid-column: span 2;
}

.help-card--half {
  grid-column: span 3;
}

.help-card--feature {
  grid-column: span 4;
  background: var(--help-tint);
  border-color: var(--help-tint-strong);
}

.help-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.25rem;
  color: var(--help-link);
  background: var(--help-tint);
  border-radius: 10px;
}

.help-card--feature .help-card__icon {
  color: #ffffff;
  background: var(--help-orange);
}

.help-card__icon .twemoji,
.help-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.md-typeset .help-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--help-ink);
}

.md-typeset .help-card h3 .headerlink {
  display: none;
}

.md-typeset .help-card p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--help-ink-muted);
}

.md-typeset .help-flow {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 0.3rem 0 0.2rem !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: help-flow;
}

[dir="ltr"] .md-typeset .help-flow li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--help-ink);
  counter-increment: help-flow;
}

[dir="ltr"] .md-typeset .help-flow li::before {
  content: counter(help-flow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--help-orange);
  border-radius: 50%;
}

.md-typeset .help-card__links {
  margin-top: auto;
}

.md-typeset .help-card__links ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

[dir="ltr"] .md-typeset .help-card__links li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--help-line);
}

[dir="ltr"] .md-typeset .help-card--feature .help-card__links li {
  border-top-color: var(--help-tint-strong);
}

.md-typeset .help-card__links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--help-ink);
  text-decoration: none;
}

.md-typeset .help-card__links li a::after {
  content: "\2192";
  color: var(--help-ink-muted);
}

.md-typeset .help-card__links li a:hover {
  color: var(--help-link);
}

.help-section {
  max-width: 70rem;
  margin: 0 auto 3.5rem;
}

.md-typeset .help-section h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}

.help-problems ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[dir="ltr"] .md-typeset .help-problems li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--help-line);
}

.md-typeset .help-problems li a {
  display: block;
  padding: 0.85rem 2rem 0.85rem 0;
  font-size: 0.76rem;
  color: var(--help-ink-muted);
  text-decoration: none;
  position: relative;
}

.md-typeset .help-problems li a strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.85rem;
  color: var(--help-ink);
}

.md-typeset .help-problems li a::after {
  content: "\203A";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--help-ink-muted);
}

.md-typeset .help-problems li a:hover strong {
  color: var(--help-link);
}

.help-still {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 70rem;
  margin: 0 auto 3rem;
  padding: 1.25rem 1.6rem;
  background: var(--help-surface);
  border: 1px solid var(--help-line);
  border-radius: var(--help-radius-lg);
}

.md-typeset .help-still p {
  margin: 0;
}

.md-typeset .help-still__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--help-ink);
}

.md-typeset .help-still__sub {
  font-size: 0.78rem;
  color: var(--help-ink-muted);
}

.md-typeset .help-still a.md-button,
.md-typeset a.help-mail {
  display: inline-block;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--help-ink);
  text-decoration: none;
  border: 1px solid var(--help-line-strong);
  border-radius: 8px;
}

.md-typeset a.help-mail:hover {
  border-color: var(--help-orange);
  color: var(--help-link);
}

@media screen and (max-width: 60em) {
  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .help-card,
  .help-card--small,
  .help-card--half {
    grid-column: span 1;
  }
  .help-card--feature {
    grid-column: span 2;
  }
}

@media screen and (max-width: 40em) {
  .help-hero {
    padding: 2.2rem 0 2rem;
  }
  .md-typeset .help-hero h1 {
    font-size: 2.1rem;
  }
  .help-hero__search {
    height: 3rem;
  }
  .help-grid {
    grid-template-columns: 1fr;
  }
  .help-card,
  .help-card--small,
  .help-card--half,
  .help-card--feature {
    grid-column: span 1;
  }
  .help-problems ul {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Small screens: keep the reading column comfortable
   ------------------------------------------------------------------------- */
@media screen and (max-width: 40em) {
  .md-content__inner > h1 {
    font-size: 2rem;
  }
  .md-typeset h2 {
    font-size: 1.4em;
  }
}

/* Scrollbars: neutral */
* {
  scrollbar-color: var(--help-line-strong) transparent;
}

/* Home: no "Updated" line at the foot of the page */
.help-home .md-source-file {
  display: none;
}


/* Plan chip row: beat Material's list styles */
.md-typeset ul.help-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.md-typeset ul.help-chips[hidden] {
  display: none;
}

[dir="ltr"] .md-typeset ul.help-chips > li {
  display: inline-flex;
  margin: 0;
  padding: 0.15rem 0.7rem;
}

/* Section titles in the left nav are labels, not the current page: never tinted */
.md-nav--primary .md-nav__item--section.md-nav__item--active > .md-nav__link:not(.md-nav__link--index),
.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--help-ink-muted);
  font-weight: 600;
  background: transparent;
}

/* Search overlay: the "Type to start searching" / "N matching documents" line
   is clipped under the input, so hide it. */
.md-search-result__meta {
  display: none;
}

/* Phones: a smaller hero so the cards start above the fold. */
@media screen and (max-width: 40em) {
  .help-hero { padding: 2rem 0 1.4rem; }
  .md-typeset .help-hero h1 { font-size: 1.5rem; }
  .md-typeset .help-hero__lead { font-size: 0.8rem; }
  .help-hero__search { height: 2.4rem; }
}