/* ═══════════════════════════════════════════════════════════════════════════
   Qlynic · the help centre
   Laid on the design system's own sheets. The ten collections are the
   drawers of a card catalogue; the rest is a reading room: the search, the
   questions asked first, one drawer's answers, one answer, and the desk.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the page's own block. Not ".ql-help": that is the design system's help
   text under a form field */
.ql-help-centre {
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  /* the catalogue's card stock (rounds HELP2b, HELP3): the paper, the lamp's
     light across it, its grain; the typewriter's inks; the card's rules */
  --cp-paper: #ece8dc;
  --cp-light: linear-gradient(142deg, rgb(255 250 238 / .5), rgb(255 250 238 / 0) 38%, rgb(0 0 0 / 0) 62%, rgb(60 48 30 / .08));
  --cp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .32 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='.16'/%3E%3C/svg%3E");
  --cp-edge: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(60 48 30 / .12);
  --cp-ink-strong: #161a24;
  --cp-ink: #1d2230;
  --cp-ink-2: #3a3f4c;
  --cp-ink-3: #4a4f5c;
  --cp-ink-4: #525867;
  --cp-red: rgb(196 72 60 / .62);
  --cp-blue: rgb(110 150 210 / .42);
  --cp-link: #1556b0;
}

/* ── shared: eyebrow, section heads ───────────────────────────────────────── */

.ql-help__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-help__eyebrow .ql-quad { gap: 2px; }
/* the whole Q: each quarter in its own colour */
.ql-help__eyebrow .ql-quad:not([data-q]) i { background: var(--q); box-shadow: 0 0 6px -1px var(--q); }
.ql-help__eyebrow .ql-quad:not([data-q]) i:nth-child(1) { --q: var(--ql-q-tl); }
.ql-help__eyebrow .ql-quad:not([data-q]) i:nth-child(2) { --q: var(--ql-q-tr); }
.ql-help__eyebrow .ql-quad:not([data-q]) i:nth-child(3) { --q: var(--ql-q-bl); }
.ql-help__eyebrow .ql-quad:not([data-q]) i:nth-child(4) { --q: var(--ql-q-br); }

.ql-help__sechead {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  margin-block-end: clamp(1.5rem, .8rem + 2.4vw, 2.75rem);
}
.ql-help__sechead > div { display: grid; justify-items: start; row-gap: var(--ql-sp-7); min-inline-size: 0; }
.ql-help__h2 {
  margin: 0;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem);
  line-height: 1.04;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.04em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-help__h2--sm { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); }
.ql-help__note {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(.95rem, .9rem + .2vw, 1.08rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* ── the front · title, lead and the search ───────────────────────────────── */

.ql-help__top {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 1.1rem + 3vw, 4.25rem) clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}
/* index-card ruling, faint, behind the words; colourless like the ground */
.ql-help__top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgb(var(--ql-white-rgb) / .034) 31px 32px);
  -webkit-mask-image: radial-gradient(120% 90% at 18% 30%, #000 0%, rgb(0 0 0 / .55) 40%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 18% 30%, #000 0%, rgb(0 0 0 / .55) 40%, transparent 78%);
}
.ql-help__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-9);
}
.ql-help__words,
.ql-help__side {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  min-inline-size: 0;
}
.ql-help__side { justify-items: stretch; }
.ql-help__title {
  margin: 0;
  font-size: clamp(2.5rem, .9rem + 4.6vw, 5.4rem);
  line-height: .98;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.046em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-help__title span { display: block; }
.ql-help__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-help__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-help__topics .ql-chip { text-decoration: none; }
.ql-help__topics .ql-chip:focus-visible { outline: none; box-shadow: var(--ql-ring); }
.ql-help__ledger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-3) var(--ql-sp-9);
  margin: clamp(2rem, 1.2rem + 2.4vw, 3.25rem) 0 0;
  padding-block-start: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-help__ledger b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }

@media (min-width: 1024px) {
  .ql-help__head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
  .ql-help__sechead--split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}

/* the arrival: the head's words rise in turn. Pure CSS, so it always ends
   with everything shown, script or not; it runs only once the page is armed. */
.ql-help-arm .ql-help-rise {
  animation: ql-help-rise .8s var(--ql-ease-out) both;
}
.ql-help-arm .ql-help__words .ql-help-rise:nth-child(1) { animation-delay: 40ms; }
.ql-help-arm .ql-help__words .ql-help-rise:nth-child(2) { animation-delay: 110ms; }
.ql-help-arm .ql-help__side .ql-help-rise:nth-child(1) { animation-delay: 190ms; }
.ql-help-arm .ql-help__side .ql-help-rise:nth-child(2) { animation-delay: 260ms; }
.ql-help-arm .ql-help__side .ql-help-rise:nth-child(3) { animation-delay: 330ms; }
.ql-help-arm .ql-help__ledger.ql-help-rise { animation-delay: 400ms; }
@keyframes ql-help-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── the search ───────────────────────────────────────────────────────────── */

.ql-hsearch {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  z-index: var(--ql-z-raised);
}
.ql-hsearch__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ql-sp-4);
  block-size: var(--ql-control-h);
  padding-inline: var(--ql-sp-5) var(--ql-sp-2);
  border: 1px solid transparent;
  border-radius: var(--ql-r-md);
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge) border-box;
  transition: background var(--ql-d-base) var(--ql-ease),
              box-shadow var(--ql-d-base) var(--ql-ease-out);
}
/* the line that opens under a field in focus, as the kit's inputs do */
.ql-hsearch__box::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--ql-grad-sweep);
  transform: translateX(-50%);
  transition: inline-size var(--ql-d-slow) var(--ql-ease-out);
  pointer-events: none;
}
.ql-hsearch__box:hover {
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-hi) border-box;
}
.ql-hsearch__box:focus-within {
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-hi) border-box;
  box-shadow: 0 0 0 3px rgb(var(--ql-accent-rgb) / .14),
              0 10px 34px -12px rgb(var(--ql-accent-rgb) / .42);
}
.ql-hsearch__box:focus-within::after { inline-size: calc(100% - 24px); }
.ql-hsearch__ico {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  color: var(--ql-text-subtle);
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-hsearch__box:focus-within .ql-hsearch__ico { color: var(--ql-accent-text); }
.ql-hsearch__in {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ql-text-strong);
  font: inherit;
  font-size: var(--ql-fs-sm);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.ql-hsearch__in::placeholder { color: var(--ql-text-subtle); opacity: 1; }
.ql-hsearch__in:focus { outline: none; }
.ql-hsearch__kbd { flex: none; }
.ql-hsearch__box:focus-within .ql-hsearch__kbd { opacity: 0; }
.ql-hsearch__go {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ql-r-sm);
  background: var(--ql-ink-950);
  color: var(--ql-ink-050);
  cursor: pointer;
  transition: background-color var(--ql-d-fast) var(--ql-ease),
              transform var(--ql-d-fast) var(--ql-ease-out);
}
.ql-hsearch__go svg { inline-size: 18px; block-size: 18px; }
.ql-hsearch__go:hover { background: rgb(var(--ql-white-rgb)); transform: translateX(1px); }
.ql-hsearch__go:focus-visible { outline: none; box-shadow: var(--ql-ring); }

.ql-hsearch--lg .ql-hsearch__box {
  block-size: 62px;
  padding-inline: var(--ql-sp-7) var(--ql-sp-3);
  gap: var(--ql-sp-5);
  border-radius: var(--ql-r-lg);
}
.ql-hsearch--lg .ql-hsearch__ico { inline-size: 20px; block-size: 20px; }
.ql-hsearch--lg .ql-hsearch__in { font-size: var(--ql-fs-md); }
.ql-hsearch--lg .ql-hsearch__go { inline-size: 46px; block-size: 46px; border-radius: var(--ql-r-md); }
.ql-hsearch--lg .ql-hsearch__go svg { inline-size: 20px; block-size: 20px; }
@media (max-width: 479px) {
  .ql-hsearch__kbd { display: none; }
  .ql-hsearch--lg .ql-hsearch__box { block-size: 56px; padding-inline-start: var(--ql-sp-6); }
  .ql-hsearch--lg .ql-hsearch__go { inline-size: 42px; block-size: 42px; }
}

/* the answers that match, under the field */
.ql-hsearch__results {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  z-index: var(--ql-z-popover);
  max-block-size: min(70vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ql-sp-3);
  border: 1px solid transparent;
  border-radius: var(--ql-r-md);
  background:
    linear-gradient(var(--ql-ink-150), var(--ql-ink-150)) padding-box,
    var(--ql-edge-hi) border-box;
  box-shadow: var(--ql-el-5);
  animation: ql-help-drop .26s var(--ql-ease-out);
}
.ql-hsearch__results[hidden] { display: none; }
@keyframes ql-help-drop { from { opacity: 0; transform: translateY(-4px); } }
.ql-hit {
  position: relative;
  display: grid;
  row-gap: var(--ql-sp-2);
  padding: var(--ql-sp-5) var(--ql-sp-6);
  border-radius: var(--ql-r-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--ql-d-fast) var(--ql-ease);
}
.ql-hit::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: var(--ql-sp-5);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--ql-accent-text);
  opacity: 0;
  transition: opacity var(--ql-d-fast) var(--ql-ease);
}
.ql-hit:hover,
.ql-hit.is-active { background: var(--ql-ink-200); }
.ql-hit.is-active::before { opacity: 1; }
.ql-hit:focus-visible { outline: none; box-shadow: var(--ql-ring); }
.ql-hit__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-4);
}
.ql-hit__col {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-hit__title {
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.35;
  color: var(--ql-text-strong);
}
.ql-hit__sum {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--ql-fs-xs);
  line-height: 1.55;
  color: var(--ql-text-muted);
}
.ql-hsearch__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ql-sp-5);
  margin-block-start: var(--ql-sp-2);
  padding: var(--ql-sp-5) var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line);
  font-size: var(--ql-fs-xs);
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-accent-text);
  text-decoration: none;
}
.ql-hsearch__all:hover { color: var(--ql-text-strong); }
.ql-hsearch__all:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: var(--ql-r-xs); }
.ql-hsearch__none {
  margin: 0;
  padding: var(--ql-sp-6);
  font-size: var(--ql-fs-xs);
  line-height: 1.6;
  color: var(--ql-text-muted);
}
.ql-hsearch__none b { color: var(--ql-text-strong); font-weight: var(--ql-fw-semibold); }
.ql-hsearch__none a { color: var(--ql-accent-text); }

/* ── asked first ──────────────────────────────────────────────────────────── */

.ql-help__asked {
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
}
.ql-help__qa {
  border-block-start: 1px solid var(--ql-line);
}
.ql-help__qi { border-block-end: 1px solid var(--ql-line); }
.ql-help__qs {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ql-sp-5);
  padding-block: var(--ql-sp-7);
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.ql-help__qs::-webkit-details-marker { display: none; }
.ql-help__qs:focus-visible { outline: none; box-shadow: var(--ql-ring); }
.ql-help__qn {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  color: var(--ql-text-subtle);
  transition: color var(--ql-d-base) var(--ql-ease);
}
.ql-help__qi[open] .ql-help__qn { color: var(--ql-accent-text); }
.ql-help__qq {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-help__qm {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
  color: var(--ql-text-muted);
}
.ql-help__qm::before,
.ql-help__qm::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 6px;
  inline-size: 14px;
  block-size: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--ql-d-base) var(--ql-ease), opacity var(--ql-d-base) var(--ql-ease);
}
.ql-help__qm::after { transform: rotate(90deg); }
.ql-help__qi[open] .ql-help__qm { color: var(--ql-accent-text); }
.ql-help__qi[open] .ql-help__qm::after { transform: rotate(0deg); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .ql-help__qs:hover .ql-help__qm { color: var(--ql-text-strong); }
}
.ql-help__qb {
  padding: 0 0 var(--ql-sp-8) calc(2.25rem + var(--ql-sp-5));
  max-inline-size: calc(68ch + 2.25rem + var(--ql-sp-5));
}
.ql-help__qi[open] .ql-help__qb { animation: ql-help-open .4s var(--ql-ease-out); }
@keyframes ql-help-open { from { opacity: 0; transform: translateY(-4px); } }
.ql-help__qb p {
  margin: 0;
  font-size: var(--ql-fs-sm);
  line-height: 1.7;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-help__more {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-2);
  margin-block-start: var(--ql-sp-5);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-accent-text);
  text-decoration: none;
}
.ql-help__more:hover { color: var(--ql-text-strong); }
.ql-help__more:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 4px; }

@media (min-width: 1024px) {
  .ql-help__asked .ql-container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
  .ql-help__asked .ql-help__sechead {
    position: sticky;
    inset-block-start: 116px;
    margin-block-end: 0;
  }
  .ql-help__qs { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .ql-help__qb { padding-inline-start: calc(3rem + var(--ql-sp-5)); }
}

/* ── the catalogue · drawers ──────────────────────────────────────────────── */

.ql-help__shelf {
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) clamp(.875rem, .6rem + .9vw, 1.375rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px)  { .ql-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ql-cat { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ql-cat__slot {
  position: relative;
  min-inline-size: 0;
  padding-block-start: 44px;   /* room for the cards that rise out of the drawer */
}
.ql-cat__drawer {
  --pull: 0;
  position: relative;
  display: block;
  block-size: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* the cards inside: index cards, standing behind the front until the drawer
   is pointed at, then rising out of it in turn */
.ql-cat__peek {
  position: absolute;
  inset-inline: 9%;
  inset-block-start: -44px;
  block-size: 106px;
  overflow: hidden;            /* the cards never show below the front's top edge */
  pointer-events: none;
}
.ql-cat__card {
  position: absolute;
  inset-inline: calc(var(--n, 0) * 7px);
  inset-block-start: 0;
  block-size: 58px;
  padding: 2px 10px 0;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background:
    linear-gradient(180deg, transparent 0 17px, rgb(var(--ql-black-rgb) / .10) 17px 18px, transparent 18px) ,
    linear-gradient(180deg, #E4E4E9, #CFCFD4);
  box-shadow: 0 -1px 0 rgb(var(--ql-white-rgb) / .5) inset, 0 -6px 14px -8px rgb(var(--ql-black-rgb) / .7);
  font-family: var(--ql-font-mono);
  font-size: 10px;
  font-weight: var(--ql-fw-medium);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ql-ink-150);
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translate3d(0, 50px, 0);
  transition: transform .5s var(--ql-ease-out);
}
/* the card in front is the widest; the ones behind stand narrower and taller,
   so each shows its own line above the one in front of it */
.ql-cat__card:nth-child(1) { --n: 0; z-index: 3; transition-delay: 0ms; }
.ql-cat__card:nth-child(2) { --n: 1; z-index: 2; transition-delay: 50ms; background: linear-gradient(180deg, #D9D9DE, #C4C4CA); }
.ql-cat__card:nth-child(3) { --n: 2; z-index: 1; transition-delay: 100ms; background: linear-gradient(180deg, #CECED3, #BABABF); }

/* the drawer's front: graphite, a framed label, a steel pull */
.ql-cat__front {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: var(--ql-sp-6);
  block-size: 100%;
  min-block-size: 13.5rem;
  padding: var(--ql-sp-6) var(--ql-sp-6) var(--ql-sp-6);
  border: 1px solid transparent;
  border-radius: var(--ql-r-sm);
  background:
    linear-gradient(180deg, var(--ql-ink-200) 0%, var(--ql-ink-150) 42%, var(--ql-ink-100) 100%) padding-box,
    linear-gradient(180deg, rgb(var(--ql-white-rgb) / .16), rgb(var(--ql-white-rgb) / .06) 40%, rgb(var(--ql-white-rgb) / .03)) border-box;
  box-shadow:
    inset 0 1px 0 rgb(var(--ql-white-rgb) / .06),
    inset 0 -14px 24px -18px rgb(var(--ql-black-rgb) / .9),
    0 1px 0 rgb(var(--ql-black-rgb) / .6),
    0 18px 30px -22px rgb(var(--ql-black-rgb) / .9);
  transform: translate3d(0, 0, 0);
  transition: transform .45s var(--ql-ease-out),
              box-shadow .45s var(--ql-ease-out);
}
/* the label in its steel frame */
.ql-cat__plate {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--ql-sp-4);
  min-inline-size: 0;
  padding: 9px 12px 9px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, var(--ql-ink-100), var(--ql-ink-050)) padding-box,
    linear-gradient(180deg, #8E8E93 0%, #3A3A3C 38%, #6E6E73 62%, #2A2A2C 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 6px -2px rgb(var(--ql-black-rgb) / .8), inset 0 1px 0 rgb(var(--ql-white-rgb) / .05);
}
/* the two rivets that hold the frame */
.ql-cat__plate::before,
.ql-cat__plate::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inline-size: 4px;
  block-size: 4px;
  margin-block-start: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #C7C7CC, #48484A 70%);
}
.ql-cat__plate::before { inset-inline-start: -5px; }
.ql-cat__plate::after  { inset-inline-end: -5px; }
.ql-cat__num {
  flex: none;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .12em;
  color: var(--ql-text-subtle);
  transition: color var(--ql-d-base) var(--ql-ease);
}
.ql-cat__name {
  min-inline-size: 0;
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ql-text-strong);
  overflow-wrap: anywhere;
}
.ql-cat__blurb {
  font-size: var(--ql-fs-xs);
  line-height: 1.55;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-cat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ql-sp-5);
}
.ql-cat__count {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
/* the pull: a brushed steel bar on two posts */
.ql-cat__pull {
  position: relative;
  flex: none;
  inline-size: 58px;
  block-size: 12px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #D1D1D6 0%, #8E8E93 45%, #5A5A5E 55%, #9A9A9F 100%);
  box-shadow:
    0 5px 8px -3px rgb(var(--ql-black-rgb) / .9),
    inset 0 1px 0 rgb(var(--ql-white-rgb) / .5);
  transition: box-shadow var(--ql-d-slow) var(--ql-ease-out);
}
.ql-cat__pull::after {
  content: "";
  position: absolute;
  inset: 3px 8px auto;
  block-size: 1px;
  border-radius: 1px;
  background: rgb(var(--ql-white-rgb) / .55);
}

/* a corner of the Q: the drawer of a part of the clinic keeps its colour
   in its number, and lights its pull's underside when pointed at */
.ql-cat__drawer[data-q] .ql-cat__num { color: var(--div-stop); }

/* pointed at, or reached with the keyboard: the drawer comes out a little
   and its first three cards rise out of it */
@media (hover: hover) and (pointer: fine) {
  .ql-cat__drawer:hover .ql-cat__front { transform: translate3d(0, 5px, 0) scale(1.012); box-shadow: inset 0 1px 0 rgb(var(--ql-white-rgb) / .08), inset 0 -14px 24px -18px rgb(var(--ql-black-rgb) / .9), 0 1px 0 rgb(var(--ql-black-rgb) / .6), 0 30px 44px -24px rgb(var(--ql-black-rgb) / 1); }
  .ql-cat__drawer:hover .ql-cat__card:nth-child(1) { transform: translate3d(0, 30px, 0); }
  .ql-cat__drawer:hover .ql-cat__card:nth-child(2) { transform: translate3d(0, 16px, 0); }
  .ql-cat__drawer:hover .ql-cat__card:nth-child(3) { transform: translate3d(0, 2px, 0); }
  .ql-cat__drawer:hover .ql-cat__pull { box-shadow: 0 7px 12px -3px rgb(var(--ql-black-rgb) / .95), 0 4px 14px -4px var(--div-stop, rgb(var(--ql-accent-text-rgb) / .9)), inset 0 1px 0 rgb(var(--ql-white-rgb) / .6); }
  .ql-cat__drawer:hover .ql-cat__num { color: var(--div-stop, var(--ql-accent-text)); }
}
.ql-cat__drawer:focus-visible .ql-cat__front { box-shadow: var(--ql-ring); transform: translate3d(0, 5px, 0); }
.ql-cat__drawer:focus-visible .ql-cat__card:nth-child(1) { transform: translate3d(0, 30px, 0); }
.ql-cat__drawer:focus-visible .ql-cat__card:nth-child(2) { transform: translate3d(0, 16px, 0); }
.ql-cat__drawer:focus-visible .ql-cat__card:nth-child(3) { transform: translate3d(0, 2px, 0); }
.ql-cat__drawer:active .ql-cat__front { transform: translate3d(0, 7px, 0) scale(1.006); transition-duration: .12s; }

/* on a touch screen nothing points at a drawer: no room kept for its cards */
@media (hover: none), (pointer: coarse) {
  .ql-cat__slot { padding-block-start: 0; }
  .ql-cat__peek { display: none; }
}
@media (max-width: 559px) {
  .ql-cat { row-gap: var(--ql-sp-5); }
  .ql-cat__front { min-block-size: 0; row-gap: var(--ql-sp-5); }
}

/* the drawers come in along the shelf when it scrolls into view (only once
   the page's script is running: without it, they simply stand there) */
.ql-help-js .ql-cat--arrive .ql-cat__slot {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.ql-help-js .ql-cat--arrive.is-in .ql-cat__slot {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ql-ease-out), transform .9s var(--ql-ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ── the catalogue, drawn (round HELP2) ─────────────────────────────────────
   The stage under the search: the cabinet (drawn live by qlynic.cabinet.js,
   or its picture while that is prepared and wherever it cannot be drawn),
   the line saying what it shows, and the ten drawer links. On a tablet and
   wider the script lays each link over its drawer (it sets --x, --y, --w,
   --h and the drawer's shape, --clip), and three more over the cards risen
   out of the open drawer; the open drawer's own card comes out beside the
   cabinet (it sets --px, --py and --pw). On a phone, without scripting and
   in forced colours, the links are listed under the picture. */

.ql-cab {
  position: relative;
  isolation: isolate;
  padding-block: clamp(.25rem, -.2rem + 1.2vw, 1rem) clamp(2.25rem, 1.4rem + 3vw, 4.25rem);
  border-block-start: 0;
}
/* the search's answers open over the stage, never under it */
.ql-help__top { z-index: 3; }
.ql-cab__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ql-cab__head { position: relative; z-index: 2; min-inline-size: 0; }
.ql-cab__sechead { margin-block-end: clamp(.75rem, .3rem + 1.4vw, 1.5rem); }

.ql-cab__view {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "pic" "now" "list";
  min-inline-size: 0;
}
.ql-cab__pic {
  grid-area: pic;
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  max-block-size: 88vh;
}
.ql-cab__gl,
.ql-cab__frame,
.ql-cab__flat {
  position: absolute;
  inset: 0;
}
.ql-cab__gl {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .9s var(--ql-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ql-cab.is-live-gl .ql-cab__gl { opacity: 1; }
.ql-cab__frame { pointer-events: none; }
.ql-cab__flat { display: block; }
.ql-cab__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
  transition: filter .8s var(--ql-ease-out);
}
.ql-cab.is-live-gl .ql-cab__flat { opacity: 0; transition: opacity .55s var(--ql-ease) .15s; }

/* while the drawing is prepared: the picture dimmed, a light passing over it */
.ql-cab.is-warming .ql-cab__still,
.ql-cab.is-live-gl .ql-cab__still { filter: brightness(.42) saturate(.5); }
.ql-cab__boot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ql-ease-out);
}
.ql-cab.is-warming .ql-cab__boot { opacity: 1; }
.ql-cab__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .06) 48%, rgb(255 255 255 / .12) 50%, rgb(255 255 255 / .06) 52%, transparent 58%);
  transform: translateX(-36%);
  animation: ql-cab-sweep 3.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ql-cab-sweep { to { transform: translateX(36%); } }
.ql-cab__boot-label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 6%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-muted);
  animation: ql-cab-label 1.8s ease-in-out infinite;
}
@keyframes ql-cab-label { 50% { opacity: .35; } }

/* the focus, where the picture is not drawn live: a line round the drawer
   or card reached with the keyboard (drawn live, the line is in the steel) */
.ql-cab__ring {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.ql-cab__ring polygon {
  fill: none;
  stroke: var(--ql-accent-text);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.ql-cab__ring polygon.is-on { opacity: 1; }
.ql-cab__ring polygon.is-hover { opacity: .55; stroke: var(--ql-text-muted); stroke-width: 1.25; }

/* the line under the stage: what it shows at this moment */
.ql-cab__now {
  grid-area: now;
  inline-size: 100%;
  max-inline-size: calc(52rem + var(--ql-gutter) * 2);
  min-block-size: 3.2em;
  margin: var(--ql-sp-5) auto 0;
  padding-inline: var(--ql-gutter);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ql-text-body);
  text-align: center;
  text-wrap: balance;
}

/* nothing to show: neither drawn nor pictured, the drawers alone */
.ql-cab.is-grid .ql-cab__pic,
.ql-cab.is-grid .ql-cab__now { display: none; }

/* the drawers, listed under the picture */
.ql-cab .ql-cat {
  grid-area: list;
  inline-size: 100%;
  max-inline-size: calc(var(--ql-container-wide) + var(--ql-gutter) * 2);
  margin: clamp(1rem, .6rem + 1.4vw, 1.75rem) auto 0;
  padding-inline: var(--ql-gutter);
}
/* each drawer's own card (what it holds, its first three answers) comes out
   beside the cabinet when the drawer opens; listed, the drawer itself leads
   to them */
.ql-cat__panel,
.ql-cab__card,
.ql-cab__lead { display: none; }

/* a phone: the drawers as the catalogue's index, one line each */
@media (max-width: 767px) {
  .ql-cab .ql-cat { row-gap: var(--ql-sp-4); }
  .ql-cab .ql-cat__slot { padding-block-start: 0; }
  .ql-cab .ql-cat__peek { display: none; }
  .ql-cab .ql-cat__front {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "plate foot" "blurb blurb";
    align-items: center;
    column-gap: var(--ql-sp-5);
    row-gap: var(--ql-sp-4);
    min-block-size: 0;
    padding: var(--ql-sp-5) var(--ql-sp-5) var(--ql-sp-5) var(--ql-sp-5);
  }
  .ql-cab .ql-cat__plate { grid-area: plate; padding: 7px 10px; }
  .ql-cab .ql-cat__blurb { grid-area: blurb; padding-inline: 2px; }
  .ql-cab .ql-cat__foot { grid-area: foot; gap: var(--ql-sp-4); }
  .ql-cab .ql-cat__name { font-size: var(--ql-fs-sm); }
  .ql-cab .ql-cat__count { letter-spacing: .1em; }
  .ql-cab .ql-cat__pull { inline-size: 30px; block-size: 9px; }
}

/* a tablet and wider: the stage edge to edge, the picture in the catalogue's
   own proportions */
@media screen and (min-width: 768px) {
  .ql-cab__pic { aspect-ratio: 2400 / 1080; max-block-size: 92vh; }
}

/* the links over the drawers drawn. Forced colours keep the list */
@media screen and (min-width: 768px) and (forced-colors: none) {
  .ql-cab.is-stage .ql-cat {
    --ql-cab-over: 1;
    grid-area: pic;
    position: relative;
    z-index: 1;
    display: block;
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }
  .ql-cab.is-stage .ql-cat__slot,
  .ql-help-js .ql-cab.is-stage .ql-cat--arrive .ql-cat__slot {
    position: static;
    padding: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ql-cab.is-stage .ql-cat__drawer,
  .ql-cab.is-stage .ql-cab__card {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    display: block;
    inline-size: var(--w, 0);
    block-size: var(--h, 0);
    overflow: hidden;
    clip-path: var(--clip, none);
    color: transparent;
    background: none;
    outline: none;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* the drawn drawer is the drawer: its words stay for screen readers */
  .ql-cab.is-stage .ql-cat__drawer > * { opacity: 0; }
  /* the three cards risen out of the open drawer: links for the pointer */
  .ql-cab.is-stage .ql-cab__card {
    z-index: 2;
    font-size: 1px;
    line-height: 1;
    text-decoration: none;
  }
  .ql-cab.is-stage .ql-cab__card[hidden] { display: none; }

  /* the open drawer's own card, beside the cabinet: a catalogue card the size
     of a hand, in the lamp's light. What the drawer holds, its first three
     questions on the card's lines, the way to every answer, the rod's hole.
     Closed, it is out of sight but still read out, with its drawer */
  .ql-cab.is-stage .ql-cat__panel {
    position: absolute;
    left: var(--px, 0);
    top: var(--py, 0);
    z-index: 5;
    display: block;
    box-sizing: border-box;
    inline-size: var(--pw, 19rem);
    padding: 17px 20px 34px 22px;
    border-radius: 3px;
    color: var(--cp-ink);
    background: var(--cp-light), var(--cp-grain), var(--cp-paper);
    box-shadow:
      var(--cp-edge),
      0 2px 4px rgb(0 0 0 / .45),
      0 26px 50px -18px rgb(0 0 0 / .9);
    pointer-events: none;
    opacity: 0;
    clip-path: inset(50%);
    transform: translate3d(0, 10px, 0) scale(.985);
    transform-origin: 50% 0;
    transition: opacity .16s var(--ql-ease), transform .16s var(--ql-ease), clip-path 0s linear .16s;
    container-type: inline-size;
  }
  /* a narrow card (a narrow stage): the same, a little tighter */
  @container (max-width: 250px) {
    .ql-cat__ptitle { font-size: 17px; }
    .ql-cab.is-stage .ql-cat__q { padding-inline: 26px 18px; font-size: 13.5px; }
  }
  .ql-cab.is-stage .ql-cat__panel.is-open {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(-90px);
    transform: none;
    transition: opacity .3s var(--ql-ease-out), transform .5s var(--ql-ease-out), clip-path 0s;
  }
  /* a drawer of one of the four parts: the part's colour down the card's edge, as on its label */
  .ql-cab.is-stage .ql-cat__panel[data-q]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    border-start-start-radius: 3px;
    border-end-start-radius: 3px;
    background: var(--div-stop);
  }
  /* the hole the catalogue's rod runs through */
  .ql-cab.is-stage .ql-cat__panel::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 11px;
    inline-size: 11px;
    block-size: 11px;
    margin-inline-start: -5.5px;
    border-radius: 50%;
    background: #070707;
    box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .9), 0 0 0 1px rgb(60 48 30 / .16), 0 1px 0 rgb(255 255 255 / .6);
  }
  .ql-cat__ptop {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-family: var(--ql-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4a4f5c;
  }
  .ql-cat__ptitle {
    margin: 9px 0 0;
    padding-block-end: 10px;
    border-block-end: 1.5px solid rgb(196 72 60 / .62);
    font-size: 19px;
    font-weight: var(--ql-fw-semibold);
    line-height: 1.22;
    letter-spacing: -.01em;
    color: #161a24;
    text-wrap: balance;
  }
  .ql-cat__pblurb {
    margin: 10px 0 2px;
    font-size: 13px;
    line-height: 1.5;
    color: #3a3f4c;
  }
  .ql-cat__pqs {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ql-cat__pqs > li { border-block-end: 1px solid rgb(110 150 210 / .42); }
  .ql-cab.is-stage .ql-cat__q {
    position: relative;
    display: block;
    padding: 8px 22px 7px 30px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: #1d2230;
    text-decoration: none;
    outline: none;
    border-radius: 2px;
  }
  .ql-cat__pi {
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: 10.5px;
    font-family: var(--ql-font-mono);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .04em;
    color: #525867;
  }
  /* marked: the question underlined in the blue of the line that lifts an answer */
  .ql-cat__pq {
    background-image: linear-gradient(transparent 56%, rgb(41 151 255 / .26) 56%, rgb(41 151 255 / .26) 94%, transparent 94%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size .36s var(--ql-ease-out);
  }
  .ql-cab.is-stage .ql-cat__q::after {
    content: "\2192";
    position: absolute;
    inset-inline-end: 3px;
    inset-block-start: 8px;
    color: #1556b0;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .2s var(--ql-ease), transform .3s var(--ql-ease-out);
  }
  .ql-cab.is-stage .ql-cat__q:hover .ql-cat__pq,
  .ql-cab.is-stage .ql-cat__q.is-lit .ql-cat__pq,
  .ql-cab.is-stage .ql-cat__q:focus-visible .ql-cat__pq { background-size: 100% 100%; }
  .ql-cab.is-stage .ql-cat__q:hover::after,
  .ql-cab.is-stage .ql-cat__q.is-lit::after,
  .ql-cab.is-stage .ql-cat__q:focus-visible::after { opacity: 1; transform: none; }
  .ql-cab.is-stage .ql-cat__q:focus-visible { outline: 2px solid #1556b0; outline-offset: 1px; }
  .ql-cab.is-stage .ql-cat__pall {
    display: inline-block;
    margin-block-start: 12px;
    font-size: 13px;
    font-weight: var(--ql-fw-semibold);
    line-height: 1.4;
    color: #1556b0;
    text-decoration: none;
    border-radius: 2px;
    outline: none;
  }
  .ql-cab.is-stage .ql-cat__pall:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ql-cab.is-stage .ql-cat__pall:focus-visible { outline: 2px solid #1556b0; outline-offset: 3px; }

  /* the thread from the open drawer's label, along the seams, to its card */
  .ql-cab.is-stage .ql-cab__lead {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .ql-cab__lead path {
    fill: none;
    stroke: rgb(236 230 218 / .5);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .ql-cab__lead circle { fill: #f0eade; opacity: 0; }
  .ql-cab__lead.is-on path { animation: ql-cab-thread .6s var(--ql-ease-out) .06s both; }
  .ql-cab__lead.is-on circle { animation: ql-cab-dot .3s var(--ql-ease-out) both; }
  .ql-cab__lead.is-on circle:last-child { animation-delay: .46s; }
  .ql-cab__found {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    z-index: 3;
    display: block;
    inline-size: var(--w, 0);
    block-size: var(--h, 0);
    overflow: hidden;
    clip-path: var(--clip, none);
    font-size: 1px;
    color: transparent;
    cursor: pointer;
  }
  .ql-cab__found[hidden] { display: none; }
}

/* wide: the heading over the dark at the top of the picture */
@media screen and (min-width: 1024px) {
  .ql-cab { padding-block-start: 0; }
  .ql-cab__head,
  .ql-cab__view { grid-area: 1 / 1; }
  .ql-cab__head { align-self: start; pointer-events: none; }
  .ql-cab__sechead {
    grid-template-columns: auto minmax(0, 24rem);
    justify-content: space-between;
    align-items: end;
    margin: 0;
    padding-block-start: clamp(1.25rem, -.5rem + 2.6vw, 2.75rem);
  }
  .ql-cab__sechead .ql-help__h2 {
    font-size: clamp(1.75rem, 2.9vw, 3.25rem);
    white-space: nowrap;
  }
  .ql-cab__sechead .ql-help__note { font-size: var(--ql-fs-sm); }
}

@keyframes ql-cab-thread { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ql-cab-dot { from { opacity: 0; } to { opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  .ql-cab__sweep { display: none; }
  .ql-cab__boot-label { animation: none; }
  .ql-cab__gl, .ql-cab__still, .ql-cab.is-live-gl .ql-cab__flat { transition: none; }
  /* the drawer's own card and its thread there at once */
  .ql-cab.is-stage .ql-cat__panel,
  .ql-cab.is-stage .ql-cat__panel.is-open { transform: none; transition: none; }
  .ql-cab.is-stage .ql-cat__pq,
  .ql-cab.is-stage .ql-cat__q::after { transition: none; }
  .ql-cab__lead.is-on path { animation: none; stroke-dashoffset: 0; }
  .ql-cab__lead.is-on circle { animation: none; opacity: .95; }
}

/* the smaller drawers under a drawer, a search or "not here" */
.ql-help__shelf--more { padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem); }
.ql-cat--compact { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--ql-sp-6); }
.ql-cat--compact .ql-cat__slot { padding-block-start: 0; }
.ql-cat--compact .ql-cat__front { min-block-size: 0; row-gap: var(--ql-sp-5); grid-template-rows: auto auto; }
.ql-cat--compact .ql-cat__name { font-size: var(--ql-fs-sm); }
.ql-cat--compact .ql-cat__pull { inline-size: 44px; block-size: 10px; }

/* ── the bar · crumbs and the search, on every view but the front ────────── */

.ql-help__bar {
  padding-block: clamp(1.25rem, .9rem + 1.2vw, 1.875rem);
  border-block-end: 1px solid var(--ql-line-soft);
}
.ql-help__barin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--ql-sp-6) var(--ql-sp-9);
}
.ql-help__crumbs { min-inline-size: 0; }
.ql-help__crumbs [aria-current="page"] {
  max-inline-size: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql-help__crumbs a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 4px; }
@media (min-width: 1024px) {
  .ql-help__barin { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
}

/* ── a drawer, search results, not here ───────────────────────────────────── */

.ql-help__view {
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
}
.ql-help__vhead {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-6);
  margin-block-end: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
}
.ql-help__vtitle {
  margin: 0;
  font-size: clamp(2.2rem, 1rem + 3.4vw, 4.2rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.044em;
  color: var(--ql-text-strong);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.ql-help__vtitle--q { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem); }
.ql-help__vlead {
  margin: 0;
  max-inline-size: 52ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
}

.ql-help__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--ql-line);
}
.ql-help__rows > li { border-block-end: 1px solid var(--ql-line); }
.ql-help__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--ql-sp-5);
  row-gap: var(--ql-sp-4);
  padding: var(--ql-sp-7) var(--ql-sp-4) var(--ql-sp-7) var(--ql-sp-2);
  color: inherit;
  text-decoration: none;
  border-radius: var(--ql-r-xs);
  transition: background-color var(--ql-d-fast) var(--ql-ease);
}
.ql-help__row:focus-visible { outline: none; box-shadow: var(--ql-ring); }
.ql-help__rn {
  padding-block-start: .3em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .16em;
  color: var(--ql-text-subtle);
}
.ql-help__rbody { display: grid; row-gap: var(--ql-sp-3); min-inline-size: 0; }
.ql-help__rcol {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-help__rtitle {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ql-text-strong);
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-help__rq {
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-help__rsum {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-inline-size: 76ch;
  font-size: var(--ql-fs-xs);
  line-height: 1.6;
  color: var(--ql-text-muted);
}
.ql-help__rmeta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--ql-sp-4); }
@media (hover: hover) and (pointer: fine) {
  .ql-help__row:hover { background: var(--ql-ink-100); }
  .ql-help__row:hover .ql-help__rtitle { color: var(--ql-accent-text); }
}
@media (min-width: 768px) {
  .ql-help__row { grid-template-columns: 3rem minmax(0, 1fr) auto; padding-inline-end: var(--ql-sp-6); }
  .ql-help__rmeta { grid-column: 3; grid-row: 1; padding-block-start: .15em; justify-content: flex-end; }
}

.ql-help__empty {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid transparent;
  border-radius: var(--ql-r-lg);
  background:
    linear-gradient(var(--ql-ink-100), var(--ql-ink-100)) padding-box,
    var(--ql-edge-quiet) border-box;
}
.ql-help__emptyh {
  margin: 0;
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.015em;
  color: var(--ql-text-strong);
}
.ql-help__emptyp {
  margin: 0;
  max-inline-size: 60ch;
  font-size: var(--ql-fs-sm);
  line-height: 1.7;
  color: var(--ql-text-muted);
}
.ql-help__emptyp em { font-style: normal; color: var(--ql-text-body); }
.ql-help__emptyrow { display: flex; flex-wrap: wrap; gap: var(--ql-sp-5); margin-block-start: var(--ql-sp-3); }

/* ── one answer (round HELP3): its catalogue card, pulled out and read ────────
   The card at the top is the drawer's card for this answer, at reading size:
   the drawer it came from and its place in it, the title, the question as
   typed, the short answer on the card's ruled lines, its status stamped on,
   the rod's hole at its foot. The full answer reads under it, on the page.
   The drawer it came from stands beside it (at 1280 px and up, on the left;
   narrower, under the answer), its place empty while it is out. ─────────── */

.ql-art {
  position: relative;
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem) clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
}
/* the lamp, high to the left, on the desk the card lies on */
.ql-art::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: min(70vh, 640px);
  background: radial-gradient(60% 70% at 22% 0%, rgb(255 201 138 / .07), rgb(255 201 138 / 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.ql-art__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "drawer" "side";
  row-gap: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}
.ql-art__main { grid-area: main; min-inline-size: 0; max-inline-size: 72ch; }
.ql-art__side { grid-area: side; }
.ql-adrawer { grid-area: drawer; }

/* the answer's card */
.ql-acard {
  position: relative;
  display: grid;
  padding: clamp(1.25rem, .8rem + 1.8vw, 2.25rem) clamp(1.25rem, .7rem + 2.2vw, 2.75rem) clamp(2.6rem, 2.1rem + 1.6vw, 3.4rem);
  border-radius: 4px;
  color: var(--cp-ink);
  background: var(--cp-light), var(--cp-grain), var(--cp-paper);
  box-shadow:
    var(--cp-edge),
    0 2px 5px rgb(0 0 0 / .5),
    0 44px 90px -34px rgb(0 0 0 / .95);
  view-transition-name: ql-card;
}
/* a drawer of one of the four parts: its colour down the card's edge, as on its label */
.ql-acard[data-q]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 5px;
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  background: var(--div-stop);
}
/* the hole the catalogue's rod runs through */
.ql-acard::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: clamp(.85rem, .7rem + .5vw, 1.1rem);
  inline-size: 13px;
  block-size: 13px;
  margin-inline-start: -6.5px;
  border-radius: 50%;
  background: #070707;
  box-shadow: inset 0 1.5px 2px rgb(0 0 0 / .9), 0 0 0 1px rgb(60 48 30 / .16), 0 1px 0 rgb(255 255 255 / .6);
}
.ql-acard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cp-ink-3);
}
.ql-acard__drawer {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--cp-ink-2);
  text-decoration: none;
  border-radius: 2px;
}
.ql-acard__drawer:hover { color: var(--cp-ink-strong); text-decoration: underline; text-underline-offset: 3px; }
.ql-acard__drawer:focus-visible { outline: 2px solid var(--cp-link); outline-offset: 3px; }
/* the drawer's number, as it is framed on the drawer's label */
.ql-acard__dno {
  padding: 1px 6px;
  border: 1px solid rgb(29 34 48 / .34);
  border-radius: 2px;
  font-weight: 600;
  color: var(--cp-ink);
}
.ql-acard__no { white-space: nowrap; }
.ql-acard__title {
  margin: clamp(.85rem, .6rem + .8vw, 1.25rem) 0 0;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.3rem);
  line-height: 1.04;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.035em;
  color: var(--cp-ink-strong);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* the card's red line, under its heading; the question typed under it */
.ql-acard__q {
  margin: clamp(.9rem, .7rem + .6vw, 1.25rem) 0 0;
  padding-block-start: clamp(.75rem, .6rem + .4vw, 1rem);
  border-block-start: 1.5px solid var(--cp-red);
  font-family: var(--ql-font-mono);
  font-size: clamp(.86rem, .82rem + .2vw, .97rem);
  line-height: 1.55;
  color: var(--cp-ink-2);
}
/* the short answer, on the card's blue lines */
.ql-acard__sum {
  --lh: 1.75em;
  margin: .7rem 0 0;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: var(--lh);
  color: var(--cp-ink);
  text-wrap: pretty;
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--cp-blue) calc(100% - 1px));
  background-size: 100% var(--lh);
}
.ql-acard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: clamp(1.1rem, .9rem + .7vw, 1.6rem) 0 0;
}
.ql-acard__date {
  font-family: var(--ql-font-mono);
  font-size: 12.5px;
  color: var(--cp-ink-3);
}

/* a status, stamped on in ink: the ink a shade uneven, the stamp a little askew */
.ql-stamp {
  --stamp: #22262f;
  display: inline-grid;
  justify-items: center;
  row-gap: 1px;
  padding: 5px 12px 4px;
  border: 2px solid var(--stamp);
  border-radius: 5px;
  font-family: var(--ql-font-mono);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--stamp);
  transform: rotate(-4deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='7'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.86 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='7'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.86 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ql-stamp b { font-size: 15px; font-weight: 700; letter-spacing: .16em; }
.ql-stamp i { font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .14em; }
.ql-stamp--live,
.ql-stamp--global,
.ql-stamp--alberta-only { --stamp: #175438; }
.ql-stamp--optional { --stamp: #12468f; }
.ql-stamp--illustrative { --stamp: #6e4300; }

.ql-art__prose { margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem); }

.ql-art__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-5);
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-block-start: var(--ql-sp-8);
  border-block-start: 1px solid var(--ql-line);
}

/* the cards before and after it in its drawer, laid by it */
.ql-art__walk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-9);
}
.ql-art__step {
  display: grid;
  align-content: start;
  row-gap: 6px;
  padding: 16px 18px 20px;
  border-radius: 3px;
  color: var(--cp-ink);
  text-decoration: none;
  background: var(--cp-light), var(--cp-grain), var(--cp-paper);
  box-shadow: var(--cp-edge), 0 2px 4px rgb(0 0 0 / .45), 0 18px 34px -16px rgb(0 0 0 / .9);
  transition: transform .34s var(--ql-ease-out), box-shadow .34s var(--ql-ease-out);
}
.ql-art__step--prev { transform: rotate(-.7deg); }
.ql-art__step--next { transform: rotate(.7deg); text-align: end; }
.ql-art__step--none { display: none; }
.ql-art__steplabel {
  padding-block-end: 8px;
  border-block-end: 1px solid var(--cp-red);
  font-family: var(--ql-font-mono);
  font-size: 12px;
  color: var(--cp-ink-3);
}
.ql-art__step--prev .ql-art__steplabel::before { content: "\2190\00a0"; }
.ql-art__step--next .ql-art__steplabel::after { content: "\00a0\2192"; }
.ql-art__steptitle {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.35;
  color: var(--cp-ink-strong);
}
.ql-art__step:focus-visible { outline: 2px solid var(--ql-accent-text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .ql-art__step:hover {
    transform: translateY(-4px);
    box-shadow: var(--cp-edge), 0 3px 6px rgb(0 0 0 / .5), 0 28px 44px -18px rgb(0 0 0 / .95);
  }
}
.ql-art__keys {
  margin: 2px 0 0;
  font-size: var(--ql-fs-2xs);
  color: var(--ql-text-subtle);
}
.ql-art__keys kbd {
  display: inline-block;
  min-inline-size: 1.7em;
  padding: 1px 5px;
  border: 1px solid var(--ql-line-strong);
  border-radius: 4px;
  font-family: var(--ql-font-mono);
  font-size: .95em;
  text-align: center;
  color: var(--ql-text-body);
}
@media (hover: none), (pointer: coarse) { .ql-art__keys { display: none; } }
@media (min-width: 640px) {
  .ql-art__walk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-art__step--none { display: block; visibility: hidden; }
  .ql-art__step--next { grid-column: 2; }
  .ql-art__keys { grid-column: 1 / -1; text-align: center; }
}

/* the drawer the card came from: the tops of its cards in its tray, the
   card being read missing from its place */
.ql-adrawer { display: grid; align-content: start; row-gap: var(--ql-sp-5); min-inline-size: 0; }
.ql-adrawer__h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.35;
  color: var(--ql-text-strong);
}
.ql-adrawer__dno {
  padding: 1px 6px;
  border: 1px solid rgb(var(--ql-white-rgb) / .2);
  border-radius: 2px;
  font-family: var(--ql-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ql-text-muted);
}
.ql-adrawer[data-q] .ql-adrawer__dno { color: var(--div-stop); border-color: color-mix(in srgb, var(--div-stop) 45%, transparent); }
.ql-adrawer__cards {
  margin: 0;
  padding: 6px 6px 10px;
  list-style: none;
  border-radius: 7px;
  background: linear-gradient(180deg, #0d0e11, #08090b);
  box-shadow:
    0 0 0 1px rgb(var(--ql-white-rgb) / .06),
    inset 0 1px 0 rgb(var(--ql-white-rgb) / .05),
    inset 0 12px 20px -14px rgb(0 0 0 / .95);
}
.ql-adrawer__card {
  position: relative;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  column-gap: 4px;
  align-items: baseline;
  padding: 9px 10px 10px 8px;
  border-block-start: 1.5px solid rgb(236 232 220 / .36);
  border-radius: 2px 2px 0 0;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--ql-text-body);
  text-decoration: none;
  transition: transform .3s var(--ql-ease-out), background-color .22s var(--ql-ease), color .22s var(--ql-ease), box-shadow .3s var(--ql-ease-out);
}
.ql-adrawer__n {
  font-family: var(--ql-font-mono);
  font-size: 11px;
  color: var(--ql-text-subtle);
  transition: color .22s var(--ql-ease);
}
/* a card lifted out of the tray, pointed at or reached with the keyboard */
a.ql-adrawer__card:hover,
a.ql-adrawer__card:focus-visible {
  border-block-start-color: transparent;
  color: var(--cp-ink);
  background: var(--cp-light), var(--cp-grain), var(--cp-paper);
  box-shadow: var(--cp-edge), 0 10px 20px -10px rgb(0 0 0 / .95);
  transform: translateY(-3px);
}
a.ql-adrawer__card:hover .ql-adrawer__n,
a.ql-adrawer__card:focus-visible .ql-adrawer__n { color: var(--cp-ink-4); }
a.ql-adrawer__card:focus-visible { outline: 2px solid var(--ql-accent-text); outline-offset: 2px; }
/* the card being read: out of the drawer, its place kept */
.ql-adrawer__card.is-out {
  border-block-start: 1.5px dashed rgb(236 232 220 / .3);
  color: var(--ql-text-muted);
  background: repeating-linear-gradient(135deg, rgb(var(--ql-white-rgb) / .03) 0 6px, transparent 6px 12px);
}
.ql-adrawer__out {
  grid-column: 2;
  margin-block-start: 3px;
  font-family: var(--ql-font-mono);
  font-size: 11px;
  color: var(--ql-accent-text);
}
.ql-adrawer__all {
  justify-self: start;
  font-size: var(--ql-fs-sm);
  color: var(--ql-text-body);
  text-decoration: underline;
  text-decoration-color: rgb(var(--ql-white-rgb) / .3);
  text-underline-offset: .22em;
  border-radius: 3px;
}
.ql-adrawer__all:hover { color: var(--ql-text-strong); text-decoration-color: currentColor; }
.ql-adrawer__all:focus-visible { outline: none; box-shadow: var(--ql-ring); }

/* the side: on this page (the thread down it marks how far the answer has
   been read), what people ask next */
.ql-art__side { display: grid; align-content: start; row-gap: var(--ql-sp-8); min-inline-size: 0; }
.ql-art__box { padding-block-start: var(--ql-sp-6); border-block-start: 1px solid var(--ql-line); }
.ql-art__boxh {
  margin: 0 0 var(--ql-sp-5);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-art__box ol,
.ql-art__box ul { margin: 0; padding: 0; list-style: none; display: grid; row-gap: var(--ql-sp-2); }
.ql-art__toc ol { position: relative; border-inline-start: 1px solid var(--ql-line); }
.ql-art__toc ol::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  inset-block: 0;
  inline-size: 1px;
  background: rgb(236 230 218 / .62);
  transform: scaleY(var(--read, 0));
  transform-origin: top;
}
.ql-art__toc a {
  position: relative;
  display: block;
  padding: var(--ql-sp-3) var(--ql-sp-5);
  font-size: var(--ql-fs-xs);
  line-height: 1.45;
  color: var(--ql-text-muted);
  text-decoration: none;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-art__toc a::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  inset-block: 6px;
  inline-size: 2px;
  border-radius: 2px;
  background: var(--ql-accent-text);
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity var(--ql-d-base) var(--ql-ease), transform var(--ql-d-base) var(--ql-ease-out);
}
.ql-art__toc a:hover { color: var(--ql-text-strong); }
.ql-art__toc a[aria-current="true"] { color: var(--ql-text-strong); }
.ql-art__toc a[aria-current="true"]::before { opacity: 1; transform: none; }
.ql-art__toc a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 4px; }
.ql-art__ask {
  display: block;
  inline-size: 100%;
  padding: var(--ql-sp-4) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--ql-fs-sm);
  line-height: 1.45;
  text-align: start;
  color: var(--ql-text-body);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-art__ask::after { content: "\00a0\2197"; color: var(--ql-text-subtle); }
.ql-art__ask:hover { color: var(--ql-accent-text); }
.ql-art__ask:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 4px; }

@media (min-width: 1024px) {
  .ql-art__grid {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
    grid-template-areas: "main side" "drawer side";
    column-gap: clamp(3rem, 5vw, 6rem);
    align-items: start;
  }
  .ql-art__side { position: sticky; inset-block-start: 116px; }
  .ql-adrawer { max-inline-size: 72ch; }
}
@media (min-width: 1280px) {
  .ql-art__grid {
    grid-template-columns: minmax(14rem, 16.5rem) minmax(0, 1fr) minmax(14rem, 16.5rem);
    grid-template-areas: "drawer main side";
    column-gap: clamp(2.5rem, 3.4vw, 4.5rem);
  }
  .ql-art__main { justify-self: center; inline-size: 100%; }
  .ql-adrawer { position: sticky; inset-block-start: 116px; }
}

/* come to straight (from a search engine, a link, a bookmark): the card is
   laid on the desk; carried in from the page before, it is already here */
.ql-help-arm .ql-acard { animation: ql-card-lay .9s cubic-bezier(.2, .9, .25, 1) both; }
.ql-help-carried .ql-acard { animation: none; }
@keyframes ql-card-lay {
  from {
    transform: translate3d(0, -16px, 0) rotate(-.8deg);
    box-shadow: var(--cp-edge), 0 2px 5px rgb(0 0 0 / .2), 0 70px 110px -40px rgb(0 0 0 / .6);
  }
}

/* the card, carried from one page of the help centre to the next where the
   browser can: the card followed becomes this page's card */
@view-transition { navigation: auto; }
/* the card in flight is card stock: the words it had go first, the paper
   travels, the words it lands with come last (no two texts seen at once) */
::view-transition-group(ql-card) {
  animation-duration: .64s;
  animation-timing-function: cubic-bezier(.2, .9, .25, 1);
  border-radius: 4px;
  background: #ece8dc;
  box-shadow: 0 2px 5px rgb(0 0 0 / .45), 0 36px 70px -28px rgb(0 0 0 / .95);
}
::view-transition-old(ql-card),
::view-transition-new(ql-card) {
  block-size: 100%;
  object-fit: fill;
  mix-blend-mode: normal;
}
::view-transition-old(ql-card) { animation: ql-vt-words-out .2s ease-out both; }
::view-transition-new(ql-card) { animation: ql-vt-words-in .3s ease-in .32s both; }
@keyframes ql-vt-words-out { to { opacity: 0; } }
@keyframes ql-vt-words-in { from { opacity: 0; } }
/* the card left behind goes back into its place in the drawer */
::view-transition-group(ql-card-out) {
  animation-duration: .56s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(ql-card-out),
::view-transition-new(ql-card-out) { block-size: 100%; object-fit: fill; animation-duration: .56s; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .34s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── the answer's words ───────────────────────────────────────────────────── */

.ql-art__prose {
  font-size: var(--ql-fs-md);
  line-height: 1.75;
  color: var(--ql-text-body);
  overflow-wrap: break-word;
}
.ql-art__prose > :first-child { margin-block-start: 0; }
.ql-art__prose h2,
.ql-art__prose h3 {
  scroll-margin-block-start: 112px;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-art__prose h2 {
  margin: 2.1em 0 .6em;
  padding-block-start: .95em;
  border-block-start: 1px solid rgb(110 150 210 / .18);
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.25;
  letter-spacing: -.018em;
}
.ql-art__prose > h2:first-child { border-block-start: 0; padding-block-start: 0; }
.ql-art__prose h3 {
  margin: 2em 0 .5em;
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.ql-art__prose p { margin: 0 0 1em; }
.ql-art__prose ul,
.ql-art__prose ol { margin: 0 0 1.2em; padding-inline-start: 1.3em; }
.ql-art__prose li { margin-block: .45em; padding-inline-start: .2em; }
.ql-art__prose li::marker { color: var(--ql-text-subtle); }
.ql-art__prose ol li::marker { font-family: var(--ql-font-mono); font-size: .82em; }
.ql-art__prose strong { font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-art__prose em { color: var(--ql-text); }
.ql-art__prose a {
  color: var(--ql-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgb(var(--ql-accent-text-rgb) / .45);
  transition: color var(--ql-d-fast) var(--ql-ease), text-decoration-color var(--ql-d-fast) var(--ql-ease);
}
.ql-art__prose a:hover { color: var(--ql-text-strong); text-decoration-color: currentColor; }
.ql-art__prose a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 3px; }
.ql-art__prose code {
  padding: .12em .38em;
  border-radius: 6px;
  background: var(--ql-ink-200);
  font-family: var(--ql-font-mono);
  font-size: .86em;
  color: var(--ql-text-strong);
}
.ql-art__prose pre {
  margin: 0 0 1.3em;
  padding: var(--ql-sp-6) var(--ql-sp-7);
  overflow-x: auto;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: var(--ql-ink-100);
  font-size: var(--ql-fs-xs);
  line-height: 1.6;
}
.ql-art__prose pre code { padding: 0; background: none; font-size: inherit; }
.ql-art__prose blockquote {
  margin: 0 0 1.3em;
  padding: .2em 0 .2em 1.1em;
  border-inline-start: 2px solid var(--ql-line-strong);
  color: var(--ql-text-muted);
}
.ql-art__prose blockquote p { margin: 0; }
.ql-art__prose hr {
  margin: 2.2em 0;
  block-size: 1px;
  border: 0;
  background: var(--ql-grad-hair);
  opacity: .6;
}
.ql-art__prose .md-table {
  margin: 0 0 1.4em;
  overflow-x: auto;
  border: 1px solid var(--ql-line);
  border-radius: var(--ql-r-md);
  background: var(--ql-ink-100);
}
.ql-art__prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--ql-fs-sm);
  line-height: 1.55;
}
.ql-art__prose th {
  padding: var(--ql-sp-5) var(--ql-sp-6);
  border-block-end: 1px solid var(--ql-line-strong);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
  color: var(--ql-text-subtle);
}
.ql-art__prose td {
  padding: var(--ql-sp-5) var(--ql-sp-6);
  border-block-end: 1px solid var(--ql-line);
  vertical-align: top;
}
.ql-art__prose tr:last-child td { border-block-end: 0; }
.ql-art__prose td:first-child { color: var(--ql-text-strong); font-weight: var(--ql-fw-medium); }

/* ── the desk ─────────────────────────────────────────────────────────────── */

.ql-help__desk {
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem) clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
}
.ql-help__deskin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ql-sp-9);
  padding: clamp(1.5rem, .9rem + 2.6vw, 3rem);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--ql-r-xl);
  background:
    linear-gradient(180deg, var(--ql-ink-150), var(--ql-ink-100)) padding-box,
    linear-gradient(180deg, rgb(var(--ql-white-rgb) / .14), rgb(var(--ql-white-rgb) / .05)) border-box;
  box-shadow: var(--ql-el-3);
}
/* the Q, unfolded, along the panel's top edge: the brand's one line */
.ql-help__deskin::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-start: 0;
  block-size: 1px;
  background: var(--ql-grad-signature);
  opacity: .55;
}
.ql-help__deskwords { display: grid; justify-items: start; row-gap: var(--ql-sp-6); min-inline-size: 0; }
.ql-help__deskp {
  margin: 0;
  max-inline-size: 58ch;
  font-size: var(--ql-fs-sm);
  line-height: 1.7;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-help__deskp a { color: var(--ql-text-body); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(var(--ql-white-rgb) / .3); }
.ql-help__deskp a:hover { color: var(--ql-text-strong); text-decoration-color: currentColor; }
.ql-help__deskp a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 3px; }
.ql-help__deskacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: var(--ql-sp-5);
}
.ql-help__status {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-4);
  min-block-size: 40px;
  padding-inline: var(--ql-sp-2);
  font-size: var(--ql-fs-xs);
  color: var(--ql-text-muted);
  text-decoration: none;
  transition: color var(--ql-d-fast) var(--ql-ease);
}
.ql-help__status .ql-dot { color: var(--ql-success); }
.ql-help__status:hover { color: var(--ql-text-strong); }
.ql-help__status:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 4px; }
@media (min-width: 1024px) {
  .ql-help__deskin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2.5rem, 4.4vw, 5.5rem); }
  .ql-help__deskacts { justify-content: flex-end; }
}
@media (max-width: 479px) {
  .ql-help__deskacts .ql-btn { inline-size: 100%; }
}

/* ── motion off, colours forced, paper ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ql-help-arm .ql-help-rise { animation: none; }
  .ql-art__step, .ql-adrawer__card { transition: none; }
  .ql-help-arm .ql-acard { animation: none; }
  .ql-art__step:hover { transform: none; }
  a.ql-adrawer__card:hover, a.ql-adrawer__card:focus-visible { transform: none; }
  .ql-help-js .ql-cat--arrive .ql-cat__slot { opacity: 1; transform: none; }
  .ql-cat__front, .ql-cat__card, .ql-cat__pull,
  .ql-hsearch__results, .ql-help__qi[open] .ql-help__qb { transition: none; animation: none; }
  .ql-cat__drawer:hover .ql-cat__front,
  .ql-cat__drawer:focus-visible .ql-cat__front,
  .ql-cat__drawer:active .ql-cat__front { transform: none; }
}
@media (forced-colors: active) {
  .ql-cat__front, .ql-hsearch__box, .ql-hsearch__results, .ql-help__empty,
  .ql-help__deskin, .ql-art__step, .ql-art__prose .md-table, .ql-acard, .ql-adrawer__cards { border: 1px solid CanvasText; }
  .ql-acard::after { display: none; }
  .ql-stamp { -webkit-mask-image: none; mask-image: none; }
  .ql-cat__peek { display: none; }
  .ql-hit.is-active { outline: 2px solid Highlight; }
}
@media print {
  .ql-help__bar, .ql-help__top .ql-hsearch, .ql-help__topics, .ql-help__desk,
  .ql-help__shelf, .ql-art__side, .ql-art__actions, .ql-art__walk { display: none !important; }
  .ql-help-centre, .ql-art__prose, .ql-acard, .ql-acard__title { color: #000; background: #fff; box-shadow: none; }
  .ql-acard { border: 1px solid #999; }
  .ql-acard::after, .ql-adrawer, .ql-art__keys { display: none !important; }
  .ql-help__qi .ql-help__qb { display: block; }
}