/* FreshClick documentation — shared styles.
   Palette derives from the FreshClick brand: navy #022A6E, flare orange #FB9126.

   Two rules shape everything below.

   1. Navigation has two levels and they must never look alike. WHICH APP lives
      in the chrome at the top of the window; WHICH SECTION lives in the left
      rail. They are different components in different bands, not two lists in
      one column.
   2. Body copy is never a muted grey. --ink-soft is for captions, breadcrumbs
      and meta only. Setting descriptions and table cells are the documentation,
      so they get the full text colour. */

/* ── 1. Tokens ─────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Brand */
  --navy: #022A6E;
  --navy-lift: #0E3A8A;
  --flare: #FB9126;
  --flare-deep: #A85A00;

  /* Ink */
  --ink-strong: #08111F;
  --ink: #16223A;
  --ink-soft: #3D4B64;
  --ink-faint: #5E6E88;

  /* Surfaces */
  --page: #FBFCFE;
  --paper: #FFFFFF;
  --mist: #F1F4FA;
  --mist-deep: #E3E9F4;
  --rule: #D8E0ED;
  --rule-soft: #E8EDF6;

  /* Chrome */
  --code-bg: #05132F;
  --code-ink: #DDE7FA;
  --code-line: #05132F;
  --edge: rgba(3, 16, 44, .07);

  --chrome: #022A6E;
  --chrome-line: rgba(255, 255, 255, .14);
  --chrome-ink: rgba(255, 255, 255, .84);
  --chrome-strong: #fff;
  --chrome-fill: rgba(255, 255, 255, .12);
  --chrome-fill-hover: rgba(255, 255, 255, .2);
  --chrome-edge: rgba(255, 255, 255, .24);
  --brand-ink: #fff;
  --brand-sub: #FFC27A;
  --bar: rgba(251, 252, 254, .84);
  --bar-solid: #F5F8FC;
  --bar-line: #DCE3EF;

  /* Status */
  --ok: #0B6B52;
  --warn: #8A4E00;
  --stop: #A2201A;
  --info-wash: #EBF1FC;
  --warn-wash: #FCF2E2;
  --stop-wash: #FCEDEC;

  /* Type */
  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  /* All in rem: at 200% browser text the chrome has to grow with the type,
     or 34px labels end up in a 56px bar. */
  --rail: 17.75rem;
  --gut: 2.75rem;
  --measure: 37rem;
  --topbar-h: 3.5rem;
  --appbar-h: 3rem;
  --chrome-h: 6.5rem;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-1: 0 1px 2px rgba(8, 23, 58, .05), 0 3px 10px rgba(8, 23, 58, .05);
  --shadow-2: 0 18px 50px rgba(3, 16, 44, .20), 0 2px 8px rgba(3, 16, 44, .08);
  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* Dark values are defined twice on purpose: once for the system preference and
   once for the explicit toggle, so the toggle wins in both directions. Never
   give a colour its only definition inside one of these blocks. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy: #1D4ED8;
    --navy-lift: #4B82F0;
    --flare: #FBA94C;
    --flare-deep: #F0A146;

    --ink-strong: #F3F7FD;
    --ink: #DFE7F4;
    --ink-soft: #AEBBD2;
    --ink-faint: #8494B0;

    --page: #0B1120;
    --paper: #111A2B;
    --mist: #161F33;
    --mist-deep: #1E293F;
    --rule: #27324A;
    --rule-soft: #1D2639;

    --code-bg: #060C18;
    --code-ink: #D7E3F7;
    --code-line: #253048;
    --edge: rgba(0, 0, 0, .5);

    --chrome: #0E1729;
    --chrome-line: rgba(255, 255, 255, .09);
    --chrome-ink: rgba(232, 240, 253, .74);
    --chrome-strong: #fff;
    --chrome-fill: rgba(255, 255, 255, .08);
    --chrome-fill-hover: rgba(255, 255, 255, .15);
    --chrome-edge: rgba(255, 255, 255, .16);
    --brand-ink: #fff;
    --brand-sub: var(--flare-deep);
    --bar: rgba(12, 19, 34, .82);
    --bar-solid: #0D1526;
    --bar-line: #212C43;

    --ok: #4FCFAA;
    --warn: #E2A44C;
    --stop: #F58F86;
    --info-wash: #16223C;
    --warn-wash: #2A2113;
    --stop-wash: #2E1A1B;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #1D4ED8;
  --navy-lift: #4B82F0;
  --flare: #FBA94C;
  --flare-deep: #F0A146;

  --ink-strong: #F3F7FD;
  --ink: #DFE7F4;
  --ink-soft: #AEBBD2;
  --ink-faint: #8494B0;

  --page: #0B1120;
  --paper: #111A2B;
  --mist: #161F33;
  --mist-deep: #1E293F;
  --rule: #27324A;
  --rule-soft: #1D2639;

  --code-bg: #060C18;
  --code-ink: #D7E3F7;
  --code-line: #253048;
  --edge: rgba(0, 0, 0, .5);

  --chrome: #0E1729;
  --chrome-line: rgba(255, 255, 255, .09);
  --chrome-ink: rgba(232, 240, 253, .74);
    --chrome-strong: #fff;
    --chrome-fill: rgba(255, 255, 255, .08);
    --chrome-fill-hover: rgba(255, 255, 255, .15);
    --chrome-edge: rgba(255, 255, 255, .16);
    --brand-ink: #fff;
    --brand-sub: var(--flare-deep);
  --bar: rgba(12, 19, 34, .82);
  --bar-solid: #0D1526;
  --bar-line: #212C43;

  --ok: #4FCFAA;
  --warn: #E2A44C;
  --stop: #F58F86;
  --info-wash: #16223C;
  --warn-wash: #2A2113;
  --stop-wash: #2E1A1B;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}

/* ── 2. Base ───────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1.0625rem/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

a { color: var(--navy-lift); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }

:focus-visible {
  outline: 2.5px solid var(--flare);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font-family: inherit; }

/* Twelve focusable elements sit in the chrome, and twenty more in the rail,
   before the documentation begins. Keyboard users get a way past them. */
.skip {
  position: absolute; left: 8px; top: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink-strong);
  border: 1px solid var(--navy-lift);
  border-radius: 9px;
  font-size: .9375rem; font-weight: 600;
  box-shadow: var(--shadow-2);
  transform: translateY(-160%);
  transition: transform .16s var(--ease);
}
/* :focus, not :focus-visible — the link is off-screen until focused, so it
   is only ever reached by keyboard, and :focus-visible is heuristic. */
.skip:focus { transform: none; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .skip { transition: none; }
}

/* ── 3. Chrome: the top bar and the app bar ────────────────────
   Two bands, deliberately unlike each other and unlike the rail.
   The top band is the site. The translucent band below is the set of apps.  */

.chrome {
  position: sticky; top: 0; z-index: 60;
}

.topbar {
  display: flex; align-items: center; gap: 14px;
  height: var(--topbar-h);
  padding: 0 22px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
}

.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--brand-ink); text-decoration: none;
  white-space: nowrap;
  padding: 5px 4px;
  border-radius: 8px;
}
.brand:hover { color: var(--brand-ink); text-decoration: none; }
.brand:active { transform: scale(.98); }
.brand-logo { display: block; width: 6.75rem; height: auto; }
.brand .brand-sub {
  font-family: var(--mono);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-sub);
  padding-top: .3em;
}

.topbar-spacer { flex: 1; }

.searchbtn {
  display: flex; align-items: center; gap: 10px;
  min-width: 232px; height: 36px; padding: 0 10px 0 11px;
  background: var(--chrome-fill);
  border: 1px solid var(--chrome-edge);
  border-radius: 9px;
  color: var(--chrome-ink);
  font: 400 .9375rem var(--sans); text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.searchbtn:hover { background: var(--chrome-fill-hover); color: var(--chrome-strong); }
.searchbtn:active { transform: scale(.985); }
.searchbtn .mag {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.searchbtn kbd {
  margin-left: auto;
  font: 500 .6875rem var(--mono);
  padding: 2px 6px; border-radius: 5px;
  background: var(--chrome);
  border: 1px solid var(--chrome-edge);
}

.iconbtn {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  background: var(--chrome-fill);
  border: 1px solid var(--chrome-edge);
  border-radius: 9px;
  color: var(--chrome-ink);
  cursor: pointer;
  transition: background .12s ease, transform .1s ease;
}
.iconbtn:hover { background: var(--chrome-fill-hover); color: var(--chrome-strong); }
.iconbtn:active { transform: scale(.94); }
.iconbtn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.menubtn { display: none; }

/* The app bar. Horizontal, pill-shaped, its own translucent band — it cannot be
   mistaken for the section list in the rail. */

.appbar {
  position: relative;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--bar-line);
}

.appbar-inner {
  display: flex; align-items: center; gap: 3px;
  max-width: 1240px; margin: 0 auto;
  height: var(--appbar-h);
  padding: 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.appbar-inner::-webkit-scrollbar { display: none; }

/* Fade only the edge that actually has more content past it, so the bar
   admits it scrolls without decorating an edge that has nothing behind it. */
.appbar-inner {
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.appbar:not(.at-start) .appbar-inner { --fade-l: 28px; }
.appbar:not(.at-end) .appbar-inner { --fade-r: 28px; }

.appbar-inner a {
  display: inline-flex; align-items: center; gap: 7px;
  flex: none;
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: .9375rem; font-weight: 500;
  letter-spacing: -.004em;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.appbar-inner a:hover {
  background: var(--mist-deep);
  color: var(--ink-strong);
  text-decoration: none;
}
.appbar-inner a:active { transform: scale(.97); }
.appbar-inner a[aria-current="page"] {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(2, 42, 110, .28);
}
.appbar-inner a[aria-current="page"]:hover { background: var(--navy); color: #fff; }

.appbar-sep {
  flex: none;
  width: 1px; height: 20px;
  margin: 0 8px;
  background: var(--rule);
}

.appbar-inner .appbar-home svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Scroll edge: the chrome only grows a shadow once content is behind it. */
.chrome::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 14px;
  background: linear-gradient(to bottom, var(--edge), transparent);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
html.scrolled .chrome::after { opacity: 1; }

/* ── 4. Shell ──────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--gut);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  align-items: start;
}

/* Pages with no section rail — the hub — run a single centred column. */
.shell.solo { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }

/* ── 5. Rail: this page's sections, and nothing else ───────── */

.rail {
  position: sticky; top: var(--chrome-h);
  height: calc(100vh - var(--chrome-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 14px 64px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.rail::-webkit-scrollbar { width: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }

.rail-eyebrow {
  font: 600 .6875rem/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px 12px;
}

/* Sub-pages of the current app — a segmented control, so it reads as
   "two documents in this app", never as a section of this one. */
.subnav {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  margin: 0 0 20px;
  padding: 3px;
  background: var(--mist);
  border: 1px solid var(--rule-soft);
  border-radius: 11px;
}
.subnav a {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: .875rem; font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.subnav a:hover { color: var(--ink-strong); background: var(--mist-deep); text-decoration: none; }
.subnav a:active { transform: scale(.97); }
.subnav a.here, .subnav a.here:hover {
  background: var(--paper);
  color: var(--navy);
  font-weight: 600;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--rule-soft);
}

.refine { position: relative; margin: 0 0 18px; }
.refine input {
  width: 100%; height: 38px;
  padding: 0 32px 0 34px;
  background: var(--mist);
  border: 1px solid var(--rule-soft);
  border-radius: 9px;
  color: var(--ink);
  font: 400 .9375rem var(--sans);
}
.refine input::placeholder { color: var(--ink-faint); }
.refine input:focus { border-color: var(--navy-lift); background: var(--paper); }
.refine input::-webkit-search-cancel-button { display: none; }
.refine > svg {
  position: absolute; left: 11px; top: 11px;
  width: 15px; height: 15px;
  fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.refine-clear {
  position: absolute; right: 7px; top: 8px;
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-faint);
  font: 400 1rem/1 var(--sans); cursor: pointer; display: none;
}
.refine.has-value .refine-clear { display: block; }
.refine-clear:hover { background: var(--mist-deep); color: var(--ink); }

/* Section groups: one per h2, its h3s nested beneath.
   The row carries two controls with two honest jobs — a link that goes to the
   section (and reveals what is in it), and a button that only expands. */
.facet { border: 0; }
.facet + .facet { margin-top: 1px; }

.facet-row {
  display: flex; align-items: center; gap: 2px;
  margin-bottom: 1px;
}

.facet-toggle {
  display: grid; place-items: center;
  width: 26px; height: 30px; flex: none;
  padding: 0; border: 0; background: none;
  border-radius: 7px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.facet-toggle:hover { background: var(--mist); color: var(--ink-strong); }
.facet-toggle:active { background: var(--mist-deep); }
.facet-toggle .chev {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-90deg);
  transition: transform .18s var(--ease);
}
.facet.open .facet-toggle .chev { transform: rotate(0deg); }

.facet ul[hidden] { display: none; }

/* A section with no subsections: same row, no chevron promising more. */
.facet-solo {
  display: block;
  padding: 7px 10px 7px 31px;
  margin-bottom: 1px;
  border-radius: 8px;
  font-family: var(--display);
  font-size: .875rem; font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ink-strong);
  transition: background .12s ease;
}
.facet-solo:hover { background: var(--mist); color: var(--ink-strong); text-decoration: none; }
.facet-solo:active { background: var(--mist-deep); }
.facet-solo.active { background: var(--mist-deep); color: var(--navy-lift); }

.facet-top {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--display);
  font-size: .875rem; font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ink-strong);
  transition: background .12s ease, color .12s ease;
}
.facet-top:hover { background: var(--mist); color: var(--ink-strong); text-decoration: none; }
.facet-top:active { background: var(--mist-deep); }
.facet-top.active { background: var(--mist-deep); color: var(--navy-lift); }
.facet-top .count {
  margin-left: auto; flex: none;
  font: 500 .6875rem var(--mono);
  color: var(--ink-faint);
}

/* h3 items sit on a hairline spine, indented under their group. */
.facet ul {
  list-style: none;
  margin: 0 0 6px 0;
  padding: 2px 0 2px 20px;
  border-left: 1px solid var(--rule-soft);
  margin-left: 16px;
}
.facet li a {
  position: relative;
  display: block;
  padding: 5px 10px;
  margin-left: -8px;
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: .9063rem; line-height: 1.45;
  transition: background .12s ease, color .12s ease;
}
.facet li a:hover { background: var(--mist); color: var(--ink-strong); text-decoration: none; }
.facet li a:active { background: var(--mist-deep); }
.facet li a.active {
  background: var(--mist-deep);
  color: var(--ink-strong); font-weight: 600;
}
.facet li a.active::before {
  content: "";
  position: absolute; left: -21px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background: var(--flare);
}

.facet mark { background: rgba(251, 145, 38, .3); color: inherit; border-radius: 3px; }
.rail.filtering .facet li:not(.hit) { display: none; }
.rail.filtering .facet.empty { display: none; }
.rail.filtering .facet-solo:not(.hit) { display: none; }

.rail-empty {
  display: none;
  padding: 18px 11px;
  color: var(--ink-faint); font-size: .9375rem;
}
.rail.filtering.no-hits .rail-empty { display: block; }

/* ── 6. Content ────────────────────────────────────────────────
   A grid, so prose keeps a readable measure while tables, settings
   blocks and screenshots use the full column width. */

.doc {
  display: grid;
  grid-template-columns: [prose-start] min(var(--measure), 100%) [prose-end] minmax(0, 1fr);
  align-content: start;
  row-gap: 1.15rem;
  min-width: 0;
  padding: 44px 0 120px;
}
.doc > * { grid-column: prose-start / prose-end; margin: 0; min-width: 0; }
.doc > .tablewrap,
.doc > .settings,
.doc > .shot,
.doc > .cards,
.doc > .quicklinks,
.doc > .docfoot,
.doc > .wide { grid-column: prose-start / -1; }

.shell.solo .doc > * { grid-column: prose-start / -1; }

.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 .75rem var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink-faint); }
.crumbs a:hover { color: var(--flare-deep); }

.doc h1 {
  font-family: var(--display);
  font-size: clamp(2.125rem, 4.4vw, 2.875rem);
  font-weight: 700; letter-spacing: -.032em; line-height: 1.06;
  color: var(--ink-strong);
  text-wrap: balance;
  margin-top: .25rem;
}

.lede {
  font-size: 1.1875rem; line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.doc h2 {
  font-family: var(--display);
  font-size: 1.625rem; font-weight: 650; letter-spacing: -.022em; line-height: 1.22;
  color: var(--ink-strong);
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--chrome-h) + 18px);
  text-wrap: balance;
}
.doc > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }

.doc h3 {
  font-family: var(--display);
  font-size: 1.1875rem; font-weight: 650; letter-spacing: -.014em; line-height: 1.3;
  color: var(--ink-strong);
  margin-top: 1.9rem;
  scroll-margin-top: calc(var(--chrome-h) + 18px);
  text-wrap: balance;
}

.doc h4 {
  font-family: var(--display);
  font-size: 1rem; font-weight: 650; letter-spacing: -.008em;
  color: var(--ink-strong);
  margin-top: 1.2rem;
  scroll-margin-top: calc(var(--chrome-h) + 18px);
}

.doc p { text-wrap: pretty; }
.doc ul, .doc ol { padding-left: 1.35rem; }
.doc li { margin-bottom: .35rem; }
.doc li > ul, .doc li > ol { margin: .35rem 0 0; }
.doc li::marker { color: var(--ink-faint); }
.doc strong { font-weight: 650; color: var(--ink-strong); }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }

.doc code {
  font: 500 .8438em var(--mono);
  background: var(--mist-deep);
  color: var(--ink-strong);
  padding: .14em .4em;
  border-radius: 5px;
  word-break: break-word;
}
.doc pre {
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid var(--code-line);
  padding: 16px 18px;
  border-radius: var(--radius);
  overflow-x: auto;
  font: 400 .8438rem/1.65 var(--mono);
}
.doc pre code { background: none; padding: 0; color: inherit; font-weight: 400; font-size: 1em; }

.anchor {
  margin-left: .4em;
  font-family: var(--mono); font-size: .6em; font-weight: 500;
  color: var(--ink-faint);
  opacity: 0; text-decoration: none;
  transition: opacity .12s ease;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* No hover on a touch screen, so a hover-only permalink is no permalink at
   all — and deep-links.json points support straight at these anchors. */
@media (hover: none) {
  .anchor { opacity: .55; }
}
.anchor:hover { text-decoration: none; color: var(--flare-deep); }

/* ── 7. Settings: the core component ──────────────────────────
   214 of these rows carry the actual documentation, so they get body-weight
   text, not the muted grey they used to. Label stays mono — it is a literal
   string from the app UI, and the change of face is what says so. */

.settings {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.settings-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--mist);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: .8125rem; font-weight: 650;
  letter-spacing: .02em;
  color: var(--ink-strong);
}
.settings-head .where {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 .75rem var(--mono);
  letter-spacing: 0;
  color: var(--ink-faint);
}

.setting {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 4px 28px;
  padding: 15px 20px;
  margin: 0;
  border-top: 1px solid var(--rule-soft);
}
.setting:first-of-type { border-top: 0; }

.setting dt {
  font: 500 .875rem/1.5 var(--mono);
  color: var(--ink-strong);
  word-break: break-word;
}
.setting dd {
  margin: 0;
  font-size: 1rem; line-height: 1.6;
  color: var(--ink);
}
.setting dd > :last-child { margin-bottom: 0; }
.setting dd p { margin: 0 0 .5rem; }
.setting dd ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.setting dd li { margin-bottom: .25rem; }

.opt {
  display: inline-block;
  font: 500 .75rem var(--mono);
  background: var(--mist-deep);
  color: var(--ink-strong);
  padding: .1em .45em;
  border-radius: 5px;
  margin: 0 2px 2px 0;
}

/* ── 8. Tables ─────────────────────────────────────────────── */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.doc th {
  text-align: left;
  padding: 12px 18px;
  background: var(--mist);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: .75rem; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.doc td {
  padding: 13px 18px;
  border-top: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.6;
  color: var(--ink);
}
.doc tbody tr:first-child td { border-top: 0; }
.doc td:first-child { color: var(--ink-strong); font-weight: 600; }
.doc td.num { font-family: var(--mono); font-weight: 500; white-space: nowrap; }

/* ── 9. Storefront effect line ────────────────────────────────
   States whether a page touches the live store. Every documented app page
   carries one, so "does this affect customers?" is answerable at a glance. */

.fx {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--flare);
  background: var(--warn-wash);
  font-size: .9375rem; line-height: 1.55;
  color: var(--ink);
}
.fx b {
  flex: none;
  font: 500 .6875rem var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--flare-deep);
}
.fx.admin {
  border-left-color: var(--rule);
  background: var(--mist);
  color: var(--ink-soft);
}
.fx.admin b { color: var(--ink-faint); }

/* ── 10. Screenshots ───────────────────────────────────────────
   A figure whose image is not supplied yet degrades to a labelled slot
   rather than a broken-image icon — see assets/img/README.md. */

.shot {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--shadow-1);
}
.shot img {
  display: block;
  border-radius: 2px;
  max-width: 100%; height: auto;
  margin: 0 auto;
  background: var(--paper);
  cursor: zoom-in;
}
.shot img:focus-visible { outline: 2.5px solid var(--flare); outline-offset: -3px; }
.shot figcaption {
  display: flex; gap: 10px; align-items: baseline;
  padding: 11px 16px;
  border-top: 1px solid var(--rule);
  font-size: .875rem; line-height: 1.5;
  color: var(--ink-soft);
}
.shot figcaption b {
  flex: none;
  font: 500 .6875rem var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}

.shot.pending img { display: none; }
.shot.pending { border-style: dashed; }
.shot.pending::before {
  content: "Screenshot pending";
  display: grid; place-items: center;
  min-height: 130px;
  font: 500 .75rem var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(1, 14, 40, .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 30px;
  cursor: zoom-out;
  animation: fade-in .18s ease;
  overscroll-behavior: contain;
}
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  background: #fff;
  cursor: zoom-in;
  touch-action: none;          /* the script owns pinch, pan and drag-dismiss */
  will-change: transform;
  user-select: none; -webkit-user-select: none;
  -webkit-user-drag: none;
}
.lightbox.zoomed img { cursor: grab; }

.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .22); }
.lightbox-close:active { transform: scale(.94); }
.lightbox-close svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.lightbox p {
  position: absolute; left: 0; right: 0; bottom: 16px;
  margin: 0; text-align: center;
  font: 500 .8125rem var(--mono);
  color: rgba(255, 255, 255, .84);
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }

/* ── 11. Callouts ──────────────────────────────────────────── */

.note {
  position: relative;
  padding: 15px 20px 15px 48px;
  background: var(--info-wash);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--navy-lift);
  border-radius: var(--radius);
  font-size: 1rem; line-height: 1.65;
  color: var(--ink);
}
.note::before {
  content: "i";
  position: absolute; left: 17px; top: 17px;
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--navy-lift); color: #fff;
  font: 700 .6875rem/1 var(--display);
}
.note strong { color: var(--ink-strong); }
.note > :last-child { margin-bottom: 0; }
.note p { margin: 0 0 .6rem; }

.note.warn { border-left-color: var(--warn); background: var(--warn-wash); }
.note.warn::before { content: "!"; background: var(--warn); }
.note.stop { border-left-color: var(--stop); background: var(--stop-wash); }
.note.stop::before { content: "!"; background: var(--stop); }

/* ── 12. Numbered procedures ───────────────────────────────── */

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.15rem 2.75rem;
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mist-deep);
  color: var(--ink-strong);
  font: 600 .8125rem/1 var(--mono);
}
.steps > li::after {
  content: "";
  position: absolute; left: 11.5px; top: 30px; bottom: 4px;
  width: 1px; background: var(--rule);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }

/* ── 13. Cards and quick links (hub) ───────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 16px;
}
.card {
  display: flex; flex-direction: column;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  color: inherit;
  transition: border-color .16s ease, transform .16s var(--ease), box-shadow .16s ease;
}
.card:hover {
  text-decoration: none; color: inherit;
  border-color: var(--navy-lift);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.card:active { transform: translateY(-1px) scale(.995); }
.card h3 {
  font-family: var(--display);
  font-size: 1.1875rem; font-weight: 680; letter-spacing: -.018em;
  color: var(--ink-strong);
  margin: 0 0 6px;
}
.card p { margin: 0 0 16px; font-size: .9688rem; line-height: 1.6; color: var(--ink-soft); }
.card .tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.card .tags span {
  font: 500 .75rem var(--mono);
  padding: 2px 8px; border-radius: 6px;
  background: var(--mist); color: var(--ink-soft);
  border: 1px solid var(--rule-soft);
}

.quicklinks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 10px; padding: 0; list-style: none;
}
.quicklinks a {
  display: block; height: 100%;
  padding: 13px 16px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: .9688rem; line-height: 1.5; color: var(--ink-strong);
  transition: border-color .14s ease, transform .14s var(--ease);
}
.quicklinks a:hover { border-color: var(--navy-lift); text-decoration: none; transform: translateY(-1px); }
.quicklinks .k {
  display: block;
  font: 500 .6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}

/* ── 14. Command palette ───────────────────────────────────── */

.palette[hidden] { display: none; }
.palette {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(1, 14, 40, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: grid; place-items: start center;
  padding: 11vh 20px 20px;
  animation: fade-in .16s ease;
}
.palette-box {
  width: min(680px, 100%);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: pop-in .3s var(--ease);
}
.palette-box input {
  width: 100%; height: 56px;
  padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: 400 1.0625rem var(--sans);
}
.palette-box input::placeholder { color: var(--ink-faint); }
.palette-box input:focus { outline: none; }
.palette-results { max-height: 52vh; overflow-y: auto; padding: 7px; }
.palette-results a {
  display: block;
  padding: 10px 13px;
  border-radius: 8px;
  color: var(--ink);
}
.palette-results a:hover, .palette-results a.sel { background: var(--mist-deep); text-decoration: none; }
.palette-results .r-title { display: block; font-size: .9688rem; font-weight: 600; color: var(--ink-strong); }
.palette-results .r-path {
  display: block;
  font: 500 .75rem var(--mono);
  color: var(--ink-faint);
  margin-top: 2px;
}
.palette-results mark { background: rgba(251, 145, 38, .32); color: inherit; border-radius: 3px; }
.palette-empty { padding: 26px 14px; color: var(--ink-faint); font-size: .9375rem; text-align: center; }
.palette-foot {
  display: flex; gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  background: var(--mist);
  font: 500 .6875rem var(--mono);
  color: var(--ink-faint);
}

/* ── 15. Footer ────────────────────────────────────────────── */

.docfoot {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
  font-size: .9375rem;
  color: var(--ink-soft);
}
.docfoot .support {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: var(--navy);
  border-radius: 9px;
  color: #fff; font-weight: 600; font-size: .9375rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.docfoot .support:hover { color: #fff; text-decoration: none; box-shadow: var(--shadow-1); transform: translateY(-1px); }
.docfoot .support:active { transform: scale(.98); }

/* ── 16. Responsive ────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --rail: 15.625rem; --gut: 2rem; }
}

@media (max-width: 900px) {
  :root { --appbar-h: 2.875rem; --chrome-h: 6.375rem; }

  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
  .menubtn { display: grid; }
  .searchbtn { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .searchbtn span, .searchbtn kbd { display: none; }

  /* No CSS transition: assets/docs.js drives this with a spring so it can be
     grabbed mid-flight and thrown back. */
  .rail {
    position: fixed; top: var(--chrome-h); left: 0; bottom: 0;
    width: min(20.625rem, 88vw);
    z-index: 90;
    background: var(--page);
    border-right: 1px solid var(--rule);
    padding: 22px 16px 60px;
    box-shadow: var(--shadow-2);
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    touch-action: pan-y;
    will-change: transform;
  }
  .rail.shown { visibility: visible; }
  .scrim {
    position: fixed; inset: var(--chrome-h) 0 0; z-index: 80;
    background: rgba(1, 14, 40, .45);
    opacity: 0;
  }
  .scrim[hidden] { display: none; }

  .doc { padding: 28px 0 90px; }
  .setting { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 14px 16px; }
  .settings-head { padding: 11px 16px; }
  .doc th, .doc td { padding: 11px 14px; }
}

@media (max-width: 560px) {
  body { font-size: 1.0313rem; }
  .doc h2 { font-size: 1.4375rem; }
  .lede { font-size: 1.0938rem; }
  .topbar { padding: 0 14px; gap: 10px; }
  .appbar-inner { padding: 0 14px; }
  .note { padding-left: 44px; }
  .docfoot .support { margin-left: 0; }
}

/* Fingers need a bigger target than a cursor does. */
@media (pointer: coarse) {
  .facet li a,
  .facet-solo { display: flex; align-items: center; min-height: 44px; }
  .facet-top { min-height: 44px; }
  .facet-toggle { width: 40px; height: 44px; }
  .subnav a { display: flex; align-items: center; justify-content: center; min-height: 40px; }
  .appbar-inner a { height: 38px; }
  .quicklinks a { min-height: 56px; }
}

/* Only while the theme is switching — see applyTheme() in docs.js. */
.theme-changing,
.theme-changing *,
.theme-changing *::before,
.theme-changing *::after {
  transition: background-color .22s ease, color .22s ease,
              border-color .22s ease, fill .22s ease !important;
}

/* ── 17. Accessibility preferences ─────────────────────────────
   Reduced motion still gets feedback, just not vestibular motion. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover, .quicklinks a:hover, .docfoot .support:hover { transform: none; }
  .rail { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .appbar { background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .palette, .lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .palette { background: rgba(1, 14, 40, .78); }
}

@media (prefers-contrast: more) {
  :root {
    --ink-soft: var(--ink);
    --rule: var(--ink-faint);
    --rule-soft: var(--ink-faint);
  }
  .appbar { background: var(--bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card, .settings, .tablewrap, .quicklinks a { border-width: 2px; }
  .facet li a.active, .appbar-inner a[aria-current="page"] { outline: 1px solid currentColor; }
}

/* ── 18. Print ─────────────────────────────────────────────── */

@media print {
  .chrome, .rail, .palette, .scrim, .anchor, .docfoot .support { display: none !important; }
  .shell { display: block; padding: 0; max-width: none; }
  .doc { display: block; max-width: none; padding: 0; }
  .doc > * { margin-bottom: 1rem; }
  .settings, .tablewrap, .shot, .card { box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  body { font-size: 11pt; background: #fff; }
}