/* Mylio help center.
 *
 * The layout the customers know — header, search, breadcrumbs, category sidebar, article —
 * in our own stylesheet. Colours and type follow the Mylio site: Rubik for headings, Open
 * Sans for text, #2a5f8d as the primary and #2a8d8a as the accent.
 *
 * These pages are static files on a CDN. No framework, no build step: what is written here
 * is what the browser gets.
 *
 * Light and dark: every colour is a token here. The reader's system setting chooses, unless
 * they chose in a footer — this one or any Mylio site's (the shared `mylio_theme` cookie,
 * help-center.js; `data-theme` on <html>, set before the page draws by the layout's first
 * script, so a dark page never flashes light). */

/* The faces, from the site's own theme folder rather than Google Fonts: a font request to a
   third party is a round trip to another host before the text can draw, and it tells that host
   every reader's address. The publisher copies the files in beside this stylesheet under
   names that carry their digest, and rewrites each url() below to that name. One variable file
   per script covers every weight used here. SIL Open Font License: OFL.txt (Open Sans) and
   OFL-Rubik.txt, in the same folder. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("open-sans-latin-wght-normal-dcf31ebe107435bd68e0164d59e19b87.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("open-sans-latin-ext-wght-normal-062c1f2aaf2d4de07ad2a2f21c17ffc0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("rubik-latin-wght-normal-b65daadded7406d746e61b25ebbe0ca9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("rubik-latin-ext-wght-normal-15c3dca723cb2459076d08acb43702d0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  --primary: #2a5f8d;
  --accent: #2a8d8a;
  --accent-hover: #23736f;
  --on-accent: #ffffff;
  --ink: #33475b;
  --ink-soft: #5b6b7c;
  --heading: #1d2b3a;
  --line: #dde5ee;
  --tile: #f2f7fc;
  --page: #ffffff;
  --surface: #ffffff;
  --shadow: rgba(25, 45, 70, .12);
  --backdrop: rgba(15, 25, 35, .85);
  --tip: #2e7d32; --tip-tint: #eef7ef;
  --warn: #a15c00; --warn-tint: #fff5e6;
  --important: #b3261e; --important-tint: #fdeeee;
  --logo-filter: none;
  --radius: 8px;
  --measure: 780px;
  /* A manual's frame (Manula's): the dark bar, the grey contents panel, the tinted callouts. */
  --m-bar: #333333; --m-bar-ink: #ffffff; --m-bar-soft: #c4c9ce; --m-bar-line: #555555;
  --m-panel: #f5f5f5; --m-panel-line: #e3e3e3; --m-hover: #e8e8e8; --m-current: #dddddd;
  --m-tip: #2f6f93; --m-tip-tint: #e3f1f9; --m-tip-line: #bfdcee;
  --m-note: #4a5866; --m-note-tint: #f1f3f5; --m-note-line: #dde2e7;
  --m-warn: #8a5a00; --m-warn-tint: #fcf6e3; --m-warn-line: #f1e1b0;
  --m-important: #a33a37; --m-important-tint: #f8e6e5; --m-important-line: #eecfcd;
}

/* The same tokens in the dark, twice: once for a reader whose system is dark and who chose
   nothing (or "system"), once for one who chose dark on a light system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #8cbde8; --accent: #3aa9a5; --accent-hover: #4cc0bb; --on-accent: #06201f;
    --ink: #d5dee8; --ink-soft: #9dadbf; --heading: #eef3f8;
    --line: #2b3947; --tile: #16222e; --page: #0f1720; --surface: #15202b;
    --shadow: rgba(0, 0, 0, .45); --backdrop: rgba(0, 0, 0, .88);
    --tip: #74c77a; --tip-tint: #132519; --warn: #f0a84a; --warn-tint: #2a1f0f;
    --important: #f07f76; --important-tint: #2d1614;
    --logo-filter: invert(1) hue-rotate(180deg);
    --m-bar: #16191c; --m-bar-ink: #eef3f8; --m-bar-soft: #9dadbf; --m-bar-line: #2e3439;
    --m-panel: #141d26; --m-panel-line: #26323e; --m-hover: #1c2833; --m-current: #243342;
    --m-tip: #8cc4e6; --m-tip-tint: #12232f; --m-tip-line: #1f3b4f;
    --m-note: #b8c4d0; --m-note-tint: #18212a; --m-note-line: #2a3642;
    --m-warn: #f0c060; --m-warn-tint: #2a2210; --m-warn-line: #4a3c18;
    --m-important: #f19a95; --m-important-tint: #2d1715; --m-important-line: #4d2825;
  }
}

:root[data-theme="dark"] {
  --primary: #8cbde8; --accent: #3aa9a5; --accent-hover: #4cc0bb; --on-accent: #06201f;
  --ink: #d5dee8; --ink-soft: #9dadbf; --heading: #eef3f8;
  --line: #2b3947; --tile: #16222e; --page: #0f1720; --surface: #15202b;
  --shadow: rgba(0, 0, 0, .45); --backdrop: rgba(0, 0, 0, .88);
  --tip: #74c77a; --tip-tint: #132519; --warn: #f0a84a; --warn-tint: #2a1f0f;
  --important: #f07f76; --important-tint: #2d1614;
  --logo-filter: invert(1) hue-rotate(180deg);
  --m-bar: #16191c; --m-bar-ink: #eef3f8; --m-bar-soft: #9dadbf; --m-bar-line: #2e3439;
  --m-panel: #141d26; --m-panel-line: #26323e; --m-hover: #1c2833; --m-current: #243342;
  --m-tip: #8cc4e6; --m-tip-tint: #12232f; --m-tip-line: #1f3b4f;
  --m-note: #b8c4d0; --m-note-tint: #18212a; --m-note-line: #2a3642;
  --m-warn: #f0c060; --m-warn-tint: #2a2210; --m-warn-line: #4a3c18;
  --m-important: #f19a95; --m-important-tint: #2d1715; --m-important-line: #4d2825;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.65 "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4 { font-family: Rubik, "Open Sans", sans-serif; color: var(--heading); line-height: 1.25; }
h2, h3, h4 { font-weight: 600; }
/* Bold inside a heading is the heading's own weight: an imported article's headings are
   `<h3><strong>…</strong></h3>`, and `bolder` on a heading is Rubik's 900. */
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; border-radius: 4px; }

.hc-skip { position: absolute; left: -9999px; }
.hc-skip:focus { left: 1rem; top: .5rem; background: var(--surface); padding: .5rem 1rem; z-index: 10; }

/* Header ------------------------------------------------------------------ */

.hc-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.hc-header__bar {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.hc-header__logo img { width: 132px; display: block; border-radius: 0; }
.hc-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hc-nav a { color: var(--ink); font-size: .95rem; }
.hc-nav a:hover { color: var(--primary); }
.hc-nav .hc-button { color: var(--on-accent); }

.hc-button {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  padding: .55rem 1.1rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem;
}
.hc-button:hover { background: var(--accent-hover); text-decoration: none; }

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

.hc-hero { background: var(--tile); border-bottom: 1px solid var(--line); padding: 2.25rem 1.25rem; }
.hc-hero h1 { text-align: center; font-size: 1.75rem; }
.hc-search { max-width: 640px; margin: 0 auto; position: relative; }
.hc-search input {
  width: 100%; padding: .8rem 1rem; font-size: 1rem; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.hc-search input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.hc-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow); list-style: none; margin: 0; padding: .25rem;
  max-height: 60vh; overflow-y: auto;
}
.hc-suggestions:empty { display: none; }
.hc-suggestions a { display: block; padding: .5rem .65rem; border-radius: 6px; color: var(--ink); }
.hc-suggestions a:hover, .hc-suggestions a:focus { background: var(--tile); text-decoration: none; }
.hc-suggestions .hc-suggestion__where { display: block; font-size: .8rem; color: var(--ink-soft); }

/* Page frame -------------------------------------------------------------- */

.hc-main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.hc-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.25rem; font-size: .85rem; color: var(--ink-soft); }
.hc-crumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--line); }

.hc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.hc-content { min-width: 0; max-width: var(--measure); }

/* Sidebar ----------------------------------------------------------------- */

.hc-sidebar { font-size: .92rem; position: sticky; top: 1rem; }
.hc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.hc-sidebar details { border-bottom: 1px solid var(--line); }
.hc-sidebar summary { cursor: pointer; padding: .5rem 0; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: .4rem; }
.hc-sidebar summary::-webkit-details-marker { display: none; }
.hc-sidebar summary::before { content: "›"; transition: transform .15s; font-size: 1.1rem; color: var(--ink-soft); }
.hc-sidebar details[open] > summary::before { transform: rotate(90deg); }
.hc-sidebar summary a { color: inherit; }
.hc-sidebar details ul { padding: 0 0 .6rem .9rem; }
.hc-sidebar details ul a { display: block; padding: .25rem 0; color: var(--ink-soft); }
.hc-sidebar details ul a:hover { color: var(--primary); }
.hc-sidebar .is-current > summary { color: var(--primary); }
.hc-sidebar a.is-current { color: var(--primary); font-weight: 600; }

/* Home -------------------------------------------------------------------- */

.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hc-card { background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); }
.hc-card a { display: block; padding: 1.15rem 1.25rem; color: inherit; height: 100%; }
.hc-card a:hover { text-decoration: none; border-color: var(--primary); }
.hc-card h2 { font-size: 1.05rem; margin: 0 0 .35rem; color: var(--primary); }
.hc-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.hc-card__count { display: block; margin-top: .6rem; font-size: .8rem; color: var(--ink-soft); }

/* Article and category lists ---------------------------------------------- */

.hc-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.hc-list li { border-bottom: 1px solid var(--line); }
.hc-list a { display: block; padding: .7rem .25rem; }
.hc-list a:hover { background: var(--tile); text-decoration: none; }
.hc-list .hc-list__summary { display: block; font-size: .85rem; color: var(--ink-soft); }

.hc-article > *:first-child { margin-top: 0; }
.hc-article ol, .hc-article ul { padding-left: 1.4rem; }
.hc-article li { margin: .35rem 0; }
.hc-article pre { background: var(--tile); padding: 1rem; border-radius: var(--radius); overflow-x: auto; }
.hc-article code { background: var(--tile); padding: .1rem .3rem; border-radius: 4px; font-size: .9em; }
.hc-article pre code { background: none; padding: 0; }
.hc-article blockquote { margin: 1rem 0; padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--accent); color: var(--ink-soft); }
.hc-article table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
.hc-article th, .hc-article td { border: 1px solid var(--line); padding: .5rem .65rem; text-align: left; }
.hc-article th { background: var(--tile); }
.hc-article iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 100%; border: 0; border-radius: var(--radius); }
.hc-updated { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

/* Feedback and related ---------------------------------------------------- */

.hc-feedback { margin-top: 3rem; padding: 1.25rem; background: var(--tile); border-radius: var(--radius); }
.hc-feedback p { margin: 0 0 .75rem; font-weight: 600; }
.hc-feedback button {
  font: inherit; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .45rem 1.1rem; margin-right: .5rem; color: var(--ink);
}
.hc-feedback button:hover { border-color: var(--primary); color: var(--primary); }
.hc-feedback button[aria-pressed="true"] { background: var(--primary); color: var(--page); border-color: var(--primary); }

.hc-related { margin-top: 2.5rem; }
.hc-related h2 { font-size: 1.1rem; }

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

.hc-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.5rem 1.25rem; font-size: .85rem; color: var(--ink-soft); }
.hc-footer__inner { max-width: 1180px; margin: 0 auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.hc-footer a { color: var(--ink-soft); }

/* Narrow screens ---------------------------------------------------------- */

/* The page editor's blocks (Switchboard.Articles.Sanitize) ---------------- */

/* The manuals sharing this address: one is being read, the others a click away. */
.hc-switcher { display: flex; gap: .25rem; margin-left: 1rem; padding: .2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.hc-switcher[hidden] { display: none; }
.hc-switcher a { padding: .3rem .75rem; border-radius: calc(var(--radius) - 2px); font-weight: 600; font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.hc-switcher a.is-current { background: var(--tile); color: var(--primary); }
.hc-switcher a:not(.is-current):hover { color: var(--ink); }

/* A collapsible section (<details>): its title is the control, the rest opens beneath it. */
.hc-article details { border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0; padding: 0 1rem; }
.hc-article details > summary { cursor: pointer; font-weight: 600; padding: .75rem 0; list-style: none; display: flex; align-items: center; gap: .5rem; }
.hc-article details > summary::-webkit-details-marker { display: none; }
.hc-article details > summary::before { content: "▸"; display: inline-block; transition: transform .15s; color: var(--ink-soft); }
.hc-article details[open] > summary::before { transform: rotate(90deg); }
.hc-article details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .5rem; }
/* A section's address: a # beside its heading, shown on hover or focus, copied on click. */
.hc-article .hc-anchor { margin-left: .4rem; color: var(--ink-soft); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s; }
.hc-article :is(h2, h3, h4):hover .hc-anchor, .hc-article .hc-anchor:focus { opacity: 1; }
.hc-article .hc-anchor--copied::after { content: " copied"; font-size: .8em; }
.hc-article [data-callout] { border-left: 4px solid var(--callout); background: var(--callout-tint); border-radius: 0 var(--radius) var(--radius) 0; padding: .75rem 1rem .25rem; margin: 1.25rem 0; }
.hc-article [data-callout]::before { display: block; font-family: Rubik, "Open Sans", sans-serif; font-weight: 600; font-size: .9rem; color: var(--callout); margin-bottom: .25rem; }
.hc-article [data-callout="tip"] { --callout: var(--tip); --callout-tint: var(--tip-tint); }
.hc-article [data-callout="tip"]::before { content: "Tip"; }
.hc-article [data-callout="note"] { --callout: var(--primary); --callout-tint: var(--tile); }
.hc-article [data-callout="note"]::before { content: "Note"; }
.hc-article [data-callout="warning"] { --callout: var(--warn); --callout-tint: var(--warn-tint); }
.hc-article [data-callout="warning"]::before { content: "Warning"; }
.hc-article [data-callout="important"] { --callout: var(--important); --callout-tint: var(--important-tint); }
.hc-article [data-callout="important"]::before { content: "Important"; }
.hc-article figure { margin: 1.5rem auto; text-align: center; }
.hc-article figure img { display: block; margin: 0 auto; cursor: zoom-in; }
.hc-article figure[data-size="small"] { max-width: 33%; }
.hc-article figure[data-size="medium"] { max-width: 60%; }
.hc-article figure[data-size="large"] { max-width: 85%; }
.hc-article figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .4rem; }
.hc-article kbd { font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--tile); }
.hc-zoom { position: fixed; inset: 0; z-index: 50; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
.hc-zoom[hidden] { display: none; }
.hc-zoom img { max-width: 100%; max-height: 100%; border-radius: 4px; }

@media (max-width: 900px) {
  .hc-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hc-sidebar { position: static; order: 2; border-top: 1px solid var(--line); padding-top: 1rem; }
  .hc-header__bar { gap: 1rem; }
  .hc-nav { gap: 1rem; width: 100%; margin-left: 0; }
  h1 { font-size: 1.6rem; }
}

@media print {
  .hc-header, .hc-hero, .hc-sidebar, .hc-feedback, .hc-footer, .hc-prev-next { display: none; }
  .hc-layout { display: block; }
}

/* The logo is a black wordmark: in the dark it is drawn light, its colours kept. */
.hc-header__logo img { filter: var(--logo-filter); }

/* The reader's colours, in the footer: system, light or dark, for every Mylio site. */

/* A manual: Manula's frame ---------------------------------------------------
 *
 *   ┌ bar ── logo │ manual name  [Manuals ▾]  ··········  [Search      ] ┐
 *   ├ contents panel ─┐ ┌ title ───────────────────────────── [print] ┐
 *   │ Chapter         │ │ ‹ previous                          next › │
 *   │   ▸ Page        │ │ the page                                   │
 *   │ [Download PDF]  │ │ ‹ previous                          next › │
 *   └─────────────────┘ └────────────────────────────────────────────┘
 *
 * Only a manual's body has `.hc-m`; a help center keeps the frame above. */

.hc-m { font-size: 15px; }
.hc-mbar { background: var(--m-bar); color: var(--m-bar-ink); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.hc-mbar__inner { max-width: 1180px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; gap: .9rem; }
.hc-mbar__logo img { display: block; width: 92px; border-radius: 0; filter: brightness(0) invert(1); }
.hc-mbar__rule { width: 1px; align-self: stretch; margin: .2rem 0; background: var(--m-bar-line); }
.hc-mbar__title { color: var(--m-bar-ink); font-family: Rubik, "Open Sans", sans-serif; font-weight: 500; font-size: 1.1rem; white-space: nowrap; }
.hc-mbar__title:hover { text-decoration: none; opacity: .85; }
.hc-mbar__switch { position: relative; }
.hc-mbar__switch[hidden] { display: none; }
.hc-mbar__switch > summary { list-style: none; cursor: pointer; color: var(--m-bar-soft); font-size: .9rem; padding: .3rem .6rem; border-radius: 6px; }
.hc-mbar__switch > summary::-webkit-details-marker { display: none; }
.hc-mbar__switch > summary::after { content: ""; display: inline-block; margin-left: .4rem; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.hc-mbar__switch > summary:hover, .hc-mbar__switch[open] > summary { background: rgba(255, 255, 255, .08); color: var(--m-bar-ink); }
.hc-mbar__switch nav { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow); padding: .3rem; display: flex; flex-direction: column; }
.hc-mbar__switch nav a { color: var(--ink); padding: .45rem .65rem; border-radius: 6px; font-size: .92rem; }
.hc-mbar__switch nav a:hover { background: var(--tile); text-decoration: none; }
.hc-mbar__switch nav a.is-current { font-weight: 600; color: var(--primary); }
.hc-mbar__search { margin: 0 0 0 auto; width: min(320px, 40vw); }
.hc-mbar__search input { padding: .42rem .75rem; font-size: .92rem; border-color: #000; border-radius: 6px; background: #fff; color: #333; }
.hc-mbar__search input::placeholder { color: #888; }
.hc-mbar__search .hc-suggestions { left: auto; width: max(100%, 360px); }
.hc-mbar__nav { display: flex; gap: 1rem; }
.hc-mbar__nav a { color: var(--m-bar-soft); font-size: .9rem; white-space: nowrap; }
.hc-mbar__nav a:hover { color: var(--m-bar-ink); }
.hc-mbar__contents { display: none; font: inherit; font-size: .9rem; color: var(--m-bar-ink); background: rgba(255, 255, 255, .08); border: 1px solid var(--m-bar-line); border-radius: 6px; padding: .3rem .7rem; cursor: pointer; }

.hc-m .hc-main { padding-top: 1.25rem; }
.hc-mlayout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; align-items: start; }
.hc-mlayout.hc-contents-hidden { grid-template-columns: minmax(0, 1fr); }
.hc-mlayout.hc-contents-hidden .hc-mside { display: none; }
.hc-mside { position: sticky; top: 4.25rem; }
.hc-mpanel { position: relative; background: var(--m-panel); border: 1px solid var(--m-panel-line); border-radius: 4px; padding: .85rem .6rem .85rem .75rem; max-height: calc(100vh - 9.5rem); overflow-y: auto; }
.hc-mpanel__hide, .hc-mshow { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; border: 1px solid var(--m-panel-line); background: var(--surface); color: var(--ink-soft); cursor: pointer; padding: 0; }
.hc-mpanel__hide { position: absolute; top: .5rem; right: .5rem; }
.hc-mpanel__hide:hover, .hc-mshow:hover { color: var(--ink); border-color: var(--ink-soft); }
.hc-mshow { float: left; margin: .5rem .75rem 0 0; }
.hc-mshow[hidden] { display: none; }
.hc-mpdf { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .75rem; padding: .55rem .75rem; border: 1px solid var(--m-panel-line); border-radius: 4px; background: var(--m-panel); color: var(--ink); font-weight: 600; font-size: .88rem; }
.hc-mpdf:hover { background: var(--m-hover); text-decoration: none; }

/* The tree: a chapter bold, a rule between chapters, a chapter's pages behind its chevron. */
.hc-m .hc-contents { font-size: .88rem; padding-right: 1.5rem; }
.hc-m .hc-contents ul { list-style: none; margin: 0; padding: 0; }
.hc-m .hc-contents ul ul { padding-left: 1.1rem; }
.hc-m .hc-contents > ul > li + li { border-top: 1px solid var(--m-panel-line); margin-top: .35rem; padding-top: .35rem; }
.hc-m .hc-contents a { display: block; padding: .2rem .4rem; border-radius: 4px; color: var(--ink); line-height: 1.4; }
.hc-m .hc-contents a:hover { background: var(--m-hover); text-decoration: none; }
.hc-m .hc-contents > ul > li > a, .hc-m .hc-contents > ul > li > details > summary > a { font-weight: 600; color: var(--heading); }
.hc-m .hc-contents a.is-current { background: var(--m-current); color: var(--heading); font-weight: 600; }
.hc-m .hc-contents details > summary { list-style: none; display: flex; align-items: flex-start; cursor: pointer; }
.hc-m .hc-contents details > summary::-webkit-details-marker { display: none; }
.hc-m .hc-contents details > summary::before { content: ""; flex: none; width: 1rem; height: 1.55rem; margin-left: -1rem; background: currentColor; opacity: .45; -webkit-mask: var(--m-chevron) center / 10px no-repeat; mask: var(--m-chevron) center / 10px no-repeat; transition: transform .15s; }
.hc-m .hc-contents details[open] > summary::before { transform: rotate(90deg); }
.hc-m .hc-contents details > summary > a { flex: 1; }
.hc-m .hc-contents > ul { padding-left: 1rem; }
.hc-m { --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5 6.5 5 3 8.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* The page: its title with print beside it, the pages either side above and below it. */
.hc-mcontent { min-width: 0; max-width: 820px; }
.hc-mtitle { display: flex; align-items: flex-start; gap: 1rem; }
.hc-mtitle h1 { flex: 1; font-size: 1.9rem; margin: 0 0 .75rem; }
.hc-mprint { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; margin-top: .45rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.hc-mprint:hover { color: var(--ink); border-color: var(--ink-soft); }
.hc-m .hc-prev-next { display: flex; justify-content: space-between; gap: 1rem; margin: .5rem 0 1.75rem; padding: .55rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .92rem; }
.hc-m .hc-article + .hc-prev-next, .hc-m .hc-children + .hc-prev-next, .hc-m .hc-updated + .hc-prev-next { margin-top: 2rem; }
.hc-m .hc-prev-next a { display: inline-flex; align-items: center; gap: .4rem; max-width: 48%; }
.hc-m .hc-prev-next a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-m .hc-prev::before, .hc-m .hc-next::after { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; opacity: .6; -webkit-mask: var(--m-chevron) center / 10px no-repeat; mask: var(--m-chevron) center / 10px no-repeat; }
.hc-m .hc-prev::before { transform: rotate(180deg); }
.hc-m .hc-next { margin-left: auto; text-align: right; }
.hc-m .hc-children { margin-top: 2rem; }
.hc-m .hc-updated { margin: 1.5rem 0 0; }
.hc-m .hc-feedback { margin-top: 1.5rem; background: var(--m-panel); border: 1px solid var(--m-panel-line); border-radius: 4px; }
.hc-m .hc-footer { text-align: center; }
.hc-m .hc-footer__inner { justify-content: center; }

/* Callouts, tinted, each with its sign. */
.hc-m .hc-article [data-callout] { position: relative; border: 1px solid var(--callout-line); background: var(--callout-tint); color: var(--ink); border-radius: 4px; padding: .8rem 1rem .2rem 3rem; margin: 1.35rem 0; }
.hc-m .hc-article [data-callout]::before { color: var(--callout); font-size: .8rem; line-height: 1.25rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .2rem; }
.hc-m .hc-article [data-callout] > :first-child { margin-top: 0; }
.hc-m .hc-article [data-callout]::after { content: ""; position: absolute; left: .95rem; top: .95rem; width: 1.25rem; height: 1.25rem; background: var(--callout); -webkit-mask: var(--callout-icon) center / contain no-repeat; mask: var(--callout-icon) center / contain no-repeat; }
.hc-m .hc-article [data-callout="tip"] { --callout: var(--m-tip); --callout-tint: var(--m-tip-tint); --callout-line: var(--m-tip-line);
  --callout-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2V16h5v-.2c.1-.8.5-1.5 1.1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.hc-m .hc-article [data-callout="note"] { --callout: var(--m-note); --callout-tint: var(--m-note-tint); --callout-line: var(--m-note-line);
  --callout-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E"); }
.hc-m .hc-article [data-callout="warning"] { --callout: var(--m-warn); --callout-tint: var(--m-warn-tint); --callout-line: var(--m-warn-line);
  --callout-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M12 3.5 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.3'/%3E%3C/svg%3E"); }
.hc-m .hc-article [data-callout="important"] { --callout: var(--m-important); --callout-tint: var(--m-important-tint); --callout-line: var(--m-important-line);
  --callout-icon: url("data:image/svg+xml,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.3'/%3E%3C/svg%3E"); }

/* Narrow: the bar wraps with search on its own row, and the contents open from the bar. */
@media (max-width: 900px) {
  .hc-mbar__inner { flex-wrap: wrap; gap: .6rem .8rem; }
  .hc-mbar__contents { display: inline-block; margin-left: auto; }
  .hc-mbar__search { order: 5; width: 100%; margin: 0; }
  .hc-mbar__nav { order: 4; }
  .hc-mlayout, .hc-mlayout.hc-contents-hidden { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hc-mside { position: static; display: none; }
  .hc-mlayout.hc-contents-open .hc-mside { display: block; }
  .hc-mpanel { max-height: none; }
  .hc-mpanel__hide, .hc-mshow { display: none !important; }
  .hc-mtitle h1 { font-size: 1.55rem; }
}

@media print {
  .hc-mbar, .hc-mside, .hc-mshow, .hc-mprint, .hc-m .hc-prev-next, .hc-m .hc-feedback { display: none !important; }
  .hc-mlayout { display: block; }
  .hc-m .hc-article [data-callout] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The Mylio app's Learn panel (`hc-l`): a window about 370px wide beside the app, a page per
   tab. The tabs are the whole header; there is no search, sidebar or footer. */
.hc-tabs { display: flex; position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); }
.hc-tabs a { flex: 1; text-align: center; padding: .75rem .25rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.hc-tabs a:hover { color: var(--primary); }
.hc-tabs a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.hc-l .hc-main { padding: 1rem 1rem 2.5rem; }
.hc-l .hc-content { max-width: none; }
.hc-l .hc-content > h1 { font-size: 1.5rem; margin: .25rem 0 1rem; }
.hc-l .hc-article img { max-width: 100%; height: auto; }
/* The panel's front page: support.mylio.com's band and cards, at the panel's width. */
.hc-l .hc-hero { margin: -1rem -1rem 1.25rem; padding: 1.5rem 1rem; }
.hc-l .hc-hero h1 { font-size: 1.5rem; margin: 0; }
.hc-l .hc-hero p { text-align: center; margin: .5rem 0 0; color: var(--ink-soft); }
.hc-l .hc-cards { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.hc-l .hc-hero + .hc-cards + .hc-content > .hc-article > :first-child { margin-top: 0; }
/* A link to the Chat tab reads as the button it is. */
.hc-l .hc-article a[href^="/?tab=5"] { display: inline-block; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.hc-l .hc-article a[href^="/?tab=5"]:hover { background: var(--accent-hover); }