/* ═══════════════════════════════════════════════════════════════════════════
   Qlynic · the support desk (Support.aspx), round HELP6, 13 Oct 2026
   Laid on the design system's own sheets (qlynic.tokens, base, components),
   in the help centre's language: the reading room's desk at night, its card
   stock under the lamp, its typewriter, its stamps.

   .ql-support       the page's own block, and its paper tokens
   .ql-tdesk         the head, and the desk: the photograph and what is on it
   .ql-tstamp        the date stamp on its ink pad, which stamps the slip
   .ql-slip          the request slip: the form, its two tabs, its fields,
                     its box for the desk
   .ql-tnote         the note beside it: how a ticket travels, or the running
                     order being built
   .ql-stub          the receipt: the stub torn off the slip (a dialog)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 00 · the page, and its paper ─────────────────────────────────────────── */

.ql-support {
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
  /* the catalogue's cards: their edge in the lamp's light, the typewriter's
     inks, the card's rules (as in the help centre) */
  --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: #5d6270;
  --cp-red: rgb(196 72 60 / .62);
  --cp-blue: rgb(110 150 210 / .42);
  --cp-link: #1556b0;
  --cp-stamp: #8f2a22;
  --cp-line: rgb(29 34 48 / .34);
}
/* the card stock, under the lamp up to the left: the drawer's own stock;
   paper, so the browser's own parts on it (a list, a scrollbar) are light */
.ql-slip__card,
.ql-slip__tab[aria-selected="true"],
.ql-tnote,
.ql-stub__card,
.ql-slip .ql-select__panel {
  color-scheme: light;
  color: var(--cp-ink);
  background:
    radial-gradient(130% 110% at 14% -6%, rgb(255 245 224 / .55), rgb(255 245 224 / 0) 58%),
    radial-gradient(75% 85% at 50% 46%, rgb(126 92 48 / 0) 72%, rgb(126 92 48 / .16)),
    linear-gradient(180deg, rgb(70 48 20 / 0) 55%, rgb(70 48 20 / .1)),
    url("../Images/help/card-stock.webp") 0 0 / 320px 320px,
    #e9dec7;
}

/* ── 01 · the head ────────────────────────────────────────────────────────── */

.ql-tdesk__head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 1.1rem + 3vw, 4.25rem) clamp(1.75rem, 1.1rem + 2vw, 3rem);
}
/* the help centre's faint card ruling behind the words */
.ql-tdesk__head::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-tdesk__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-9);
}
.ql-tdesk__words,
.ql-tdesk__side {
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  min-inline-size: 0;
}
.ql-tdesk__side { justify-items: stretch; }
@media (min-width: 1024px) {
  .ql-tdesk__intro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-tdesk__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-tdesk__eyebrow .ql-quad { gap: 2px; }
.ql-tdesk__eyebrow .ql-quad i { background: var(--q); box-shadow: 0 0 6px -1px var(--q); }
.ql-tdesk__eyebrow .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
.ql-tdesk__eyebrow .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
.ql-tdesk__eyebrow .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
.ql-tdesk__eyebrow .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }
.ql-tdesk__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-tdesk__title span { display: block; }
.ql-tdesk__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;
}
/* before you write: three ways that may answer it sooner */
.ql-tdesk__first { display: grid; row-gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-tdesk__firstl {
  margin: 0;
  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-tdesk__ways { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ql-line); }
.ql-tdesk__ways > li { border-block-end: 1px solid var(--ql-line); }
.ql-tdesk__ways > li[hidden] { display: none; }
.ql-tdesk__way {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ql-sp-6);
  inline-size: 100%;
  min-block-size: 56px;
  margin: 0;
  padding: 10px 6px 10px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  text-align: start;
  color: var(--ql-text-body);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s var(--ql-ease), background-color .2s var(--ql-ease);
}
.ql-tdesk__wico {
  inline-size: 34px;
  block-size: 34px;
  padding: 7px;
  border: 1px solid var(--ql-line);
  border-radius: 50%;
  color: var(--ql-text-muted);
  transition: color .2s var(--ql-ease), border-color .2s var(--ql-ease);
}
.ql-tdesk__wtxt { display: grid; row-gap: 1px; min-inline-size: 0; }
.ql-tdesk__wtxt b { font-size: var(--ql-fs-sm); font-weight: var(--ql-fw-semibold); line-height: 1.35; color: var(--ql-text-strong); }
.ql-tdesk__wtxt span { font-size: var(--ql-fs-xs); line-height: 1.45; color: var(--ql-text-muted); }
.ql-tdesk__wgo { inline-size: 18px; block-size: 18px; color: var(--ql-text-subtle); transition: transform .3s var(--ql-ease-out), color .2s var(--ql-ease); }
.ql-tdesk__way:hover .ql-tdesk__wgo { transform: translateX(3px); color: var(--ql-text-strong); }
.ql-tdesk__way:hover .ql-tdesk__wico { color: var(--ql-text-strong); border-color: var(--ql-line-strong); }
.ql-tdesk__way:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: var(--ql-r-sm); }
/* the desk's ledger: its hours, its promise, its address */
.ql-tdesk__ledger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-3) var(--ql-sp-9);
  margin: clamp(1.75rem, 1.1rem + 2vw, 2.75rem) 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-tdesk__ledger > span:first-child { display: inline-flex; align-items: baseline; gap: var(--ql-sp-4); }
.ql-tdesk__ledger > span:first-child > .ql-dot { flex: none; align-self: center; margin-inline-start: 5px; }
.ql-tdesk__ledger b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
.ql-tdesk__ledger .ql-dot { color: var(--ql-success); }
.ql-tdesk__ledger a { color: var(--ql-text-body); text-decoration: none; letter-spacing: .08em; text-transform: none; border-block-end: 1px solid var(--ql-line-strong); }
.ql-tdesk__ledger a:hover { color: var(--ql-text-strong); border-block-end-color: currentColor; }
.ql-tdesk__ledger a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 2px; }

/* ── 02 · the desk ────────────────────────────────────────────────────────── */

.ql-tdesk { padding-block: 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
/* the desk's width, to size the photograph and what lies on it by */
.ql-tdesk > .ql-container { container-type: inline-size; }
/* Where the bell and the ink pad lie, in percent of the photograph that
   holds them (read from the pictures themselves, see the README): the
   bell's centre and its base's width; the ink pad's felt, its centre; the
   stamp's width as it rests in the felt.
   Under 1024px the desk is the tall photograph at the desk's width: its top
   at the desk's top (the pen, the bell), its foot at the desk's foot (the
   cards, the ink pad), the leather between. */
.ql-tdesk__top {
  --bell-x: 76.4%;
  --bell-y: 8.8%;
  --bell-d: 22.3%;
  --pad-x: 83.3%;
  --pad-y: 89.7%;
  --stamp-w: 19.6%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  padding: calc(26cqi + 12px) clamp(.75rem, .2rem + 2.4vw, 3rem) calc(27cqi + 14px);
}
/* the photograph, under everything on the desk; read by no one */
.ql-tdesk__room {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 96%, transparent);
  mask-composite: intersect;
}
.ql-tdesk__photo,
.ql-tdesk__foot {
  position: absolute;
  inset-inline: 0;
  display: block;
  block-size: 133.3333cqi;
  background: url("../Images/support/desk-phone.webp") 0 0 / 100% 100% no-repeat;
}
/* the photograph's top, fading out over its empty leather; its foot, fading
   in over the same (the leather from 18% to 83% down holds nothing) */
.ql-tdesk__photo {
  inset-block-start: 0;
  z-index: 3;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 80%);
}
.ql-tdesk__foot {
  inset-block-end: 0;
  z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent 19%, #000 32%);
  mask-image: linear-gradient(180deg, transparent 19%, #000 32%);
}
.ql-tdesk__leather {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: url("../Images/support/desk-leather.webp") 0 0 / 100% auto repeat-y;
}
/* Two boxes the size of the photograph that holds the bell, and of the one
   that holds the ink pad, laid exactly over them, so what sits on the bell
   or on the pad is placed in the photograph's own percentages. Wide, the
   photograph is wider than the desk; what lies past the desk's edges is cut,
   as the photograph is. Over the slip, for the stamp's way to it. */
.ql-tdesk__maps {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: clip;
  pointer-events: none;
}
.ql-tdesk__map {
  position: absolute;
  inset-inline: 0;
  display: block;
  block-size: 133.3333cqi;
}
.ql-tdesk__map--bell { inset-block-start: 0; }
.ql-tdesk__map--pad { inset-block-end: 0; }
/* the bell: when the desk has the slip it catches more of the lamp, and rings */
.ql-tdesk__ring {
  position: absolute;
  inset-inline-start: var(--bell-x);
  inset-block-start: var(--bell-y);
  display: block;
  inline-size: var(--bell-d);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 0 0 rgb(255 196 120 / 0);
  transition: box-shadow .7s var(--ql-ease);
}
.ql-tdesk__ring::before,
.ql-tdesk__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgb(255 216 160 / .75);
  border-radius: 50%;
  opacity: 0;
}
.ql-tdesk__top.is-ringing .ql-tdesk__ring,
.ql-tdesk__top.is-lit .ql-tdesk__ring { box-shadow: 0 0 56px 10px rgb(255 196 120 / .22); }
.ql-tdesk__top.is-ringing .ql-tdesk__ring::before { animation: ql-tding 1.5s cubic-bezier(.16, .8, .3, 1) 1; }
.ql-tdesk__top.is-ringing .ql-tdesk__ring::after { animation: ql-tding 1.5s cubic-bezier(.16, .8, .3, 1) .26s 1; }
@keyframes ql-tding {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* a tablet: the same tall desk, the slip and the note kept to a form's width */
@media (min-width: 600px) and (max-width: 1023px) {
  .ql-slip,
  .ql-tnote { justify-self: center; inline-size: 100%; max-inline-size: 46rem; }
}

/* wide: the wide photograph, the desk its height at its width (taller only
   if the slip needs it, the photograph then covering it by its height); the
   slip to the left, the note in the empty band between the bell and the pad */
@media (min-width: 1024px) {
  .ql-tdesk__top {
    --bell-x: 84%;
    --bell-y: 16%;
    --bell-d: 13.7%;
    --pad-x: 82.9%;
    --pad-y: 80.5%;
    --stamp-w: 12.6%;
    grid-template-columns: minmax(0, 56fr) minmax(0, 33fr);
    column-gap: clamp(2rem, 4cqi, 4.5rem);
    align-items: start;
    min-block-size: calc(100cqi / 1.5);
    padding: 5cqi 6cqi 5cqi 5cqi;
  }
  /* placed by the ink pad's centre across (82.9%), so the stamp lies in its
     felt exactly; the map is the photograph's box, the same point aligned */
  .ql-tdesk__photo {
    inset: 0;
    block-size: auto;
    background: url("../Images/support/desk-wide.webp") 82.9% 16% / cover no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ql-tdesk__map {
    inset-block: 0;
    inset-inline: 82.9% auto;
    block-size: auto;
    aspect-ratio: 3 / 2;
    translate: -82.9% 0;
  }
  .ql-tdesk__leather,
  .ql-tdesk__foot { display: none; }
  .ql-tdesk__room {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  }
  .ql-tnote { align-self: center; }
}

/* ── 03 · the date stamp, resting in its ink pad ──────────────────────────── */

.ql-tstamp {
  /* the share of its picture's width its face presses with (see the script) */
  --stamp-foot: .82;
  position: absolute;
  inset-inline-start: var(--pad-x);
  inset-block-start: var(--pad-y);
  display: block;
  inline-size: var(--stamp-w);
  aspect-ratio: 1074 / 590;
  translate: -50% -50%;
  background: url("../Images/support/stamp.webp") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(2px 4px 3px rgb(0 0 0 / .7));
  will-change: transform;
}

/* ── 04 · the request slip ────────────────────────────────────────────────── */

.ql-slip {
  position: relative;
  z-index: 2;
  min-inline-size: 0;
  container: slip / inline-size;
}
/* its two tabs, along its top edge: the errand in front is the slip's own
   stock; the other stands behind it, darker */
.ql-slip__tabs {
  display: flex;
  gap: 4px;
  padding-inline-start: 18px;
}
.ql-slip__tab {
  position: relative;
  padding: 9px 16px 8px;
  border: 0;
  border-radius: 6px 6px 0 0;
  font-family: var(--ql-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cp-ink-3);
  background:
    linear-gradient(180deg, rgb(255 248 230 / .25), rgb(255 248 230 / 0) 50%),
    url("../Images/help/card-stock.webp") 0 0 / 320px 320px,
    #cbbd9f;
  box-shadow: inset 0 1px 0 rgb(255 250 236 / .6), inset 0 -6px 8px -6px rgb(40 26 10 / .35);
  transform: translateY(4px);
  cursor: pointer;
  transition: transform .3s var(--ql-ease-out), color .2s var(--ql-ease);
}
.ql-slip__tab:hover { transform: translateY(1px); color: var(--cp-ink); }
/* a narrow slip: the two tabs still on one line each */
@container slip (max-width: 440px) {
  .ql-slip__tabs { gap: 3px; padding-inline-start: 10px; }
  .ql-slip__tab { padding: 9px 10px 8px; font-size: 10.5px; letter-spacing: .05em; }
}
@container slip (max-width: 300px) {
  .ql-slip__tabs { padding-inline-start: 6px; }
  .ql-slip__tab { padding-inline: 8px; font-size: 10px; letter-spacing: .03em; }
}
.ql-slip__tab[aria-selected="true"] {
  z-index: 1;
  color: var(--cp-ink-strong);
  box-shadow: inset 0 1px 0 rgb(255 250 236 / .85), inset 2px 0 0 -1px rgb(104 78 44 / .2), inset -2px 0 0 -1px rgb(104 78 44 / .2);
  transform: none;
  cursor: default;
}
.ql-slip__tab:focus-visible { outline: 2.5px solid var(--cp-link); outline-offset: 2px; }
/* a red stripe along the walkthrough tab's top: its own errand */
.ql-slip__tab[data-lane="demo"]::before {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-start: 0;
  block-size: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--ql-q-tr);
  opacity: .8;
}
.ql-slip__tab[data-lane="ticket"]::before {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inset-block-start: 0;
  block-size: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--ql-q-tl);
  opacity: .8;
}

.ql-slip__card {
  position: relative;
  display: grid;
  row-gap: 18px;
  padding: clamp(18px, 5.4cqi, 36px) clamp(18px, 6cqi, 40px) clamp(20px, 5cqi, 34px);
  border-radius: 0 4px 4px 4px;
  box-shadow:
    inset 0 1px 0 rgb(255 250 236 / .85),
    inset 0 0 0 .5px rgb(104 78 44 / .42),
    0 2px 4px rgb(0 0 0 / .55),
    18px 34px 60px -24px rgb(0 0 0 / .95);
  container-type: inline-size;
}
/* its top line: the state it is in, the desk's hours */
.ql-slip__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  margin: 0;
  padding-block-end: 12px;
  border-block-end: 1.5px solid var(--cp-red);
  font-family: var(--ql-font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
.ql-slip__state { display: inline-flex; align-items: center; gap: 8px; color: var(--cp-ink-2); }
/* the hours are in the head too: a narrow slip keeps only its state */
@container (max-width: 420px) {
  .ql-slip__clock { display: none; }
}
.ql-slip__state::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: #2f7d55;
  box-shadow: 0 0 0 3px rgb(47 125 85 / .18);
}
.ql-support[data-lane="demo"] .ql-slip__state::before { background: #a2541c; box-shadow: 0 0 0 3px rgb(162 84 28 / .18); }

/* what the desk says back when it cannot take the slip */
.ql-slip__alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--cp-stamp);
  background: rgb(143 42 34 / .08);
  font-family: var(--ql-font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: #6e1f19;
}
.ql-slip__alert[hidden] { display: none; }
.ql-slip__alertdot { flex: none; inline-size: 8px; block-size: 8px; margin-block-start: 6px; border-radius: 50%; background: var(--cp-stamp); }

/* the field nobody fills: out of sight, out of the keyboard's way */
.ql-slip__hp {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* the lanes */
.ql-slip__lane { display: grid; row-gap: 20px; }
.ql-slip__lane[hidden] { display: none; }
.ql-slip__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; }
@container (min-width: 420px) {
  .ql-slip__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a field: its label typed small above the line it is written on */
.ql-slip__f { display: grid; row-gap: 4px; min-inline-size: 0; }
.ql-slip__lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ql-slip__l {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
.ql-slip__l i {
  margin-inline-start: 6px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--cp-ink-4);
}
.ql-slip__count {
  font-family: var(--ql-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--cp-ink-4);
  white-space: nowrap;
}
.ql-slip__count b { font-weight: 700; color: var(--cp-ink-2); }
.ql-slip__in {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 7px 4px 6px;
  border: 0;
  border-block-end: 1.5px solid var(--cp-line);
  border-radius: 0;
  background: transparent;
  font-family: var(--ql-font-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-ink-strong);
  caret-color: var(--cp-link);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ql-ease), background-color .2s var(--ql-ease), box-shadow .2s var(--ql-ease);
}
.ql-slip__in::placeholder { color: rgb(74 79 92 / .55); opacity: 1; }
.ql-slip__in:hover { border-block-end-color: rgb(29 34 48 / .55); }
.ql-slip__in:focus { outline: none; border-block-end-color: var(--cp-link); background-color: rgb(21 86 176 / .06); box-shadow: 0 1.5px 0 0 var(--cp-link); }
.ql-slip__f.is-armed .ql-slip__in { border-block-end-color: rgb(29 34 48 / .62); }
.ql-slip__f.is-bad .ql-slip__in { border-block-end-color: var(--cp-stamp); box-shadow: 0 1.5px 0 0 var(--cp-stamp); }
/* the message: lined paper, its lines scrolling with what is written */
.ql-slip__in--area {
  --lh: 28px;
  min-block-size: calc(var(--lh) * 5 + 8px);
  padding: 2px 4px 6px;
  border-block-end: 0;
  line-height: var(--lh);
  resize: vertical;
  background-image: linear-gradient(to bottom, transparent calc(var(--lh) - 1px), var(--cp-blue) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-position: 0 2px;
  background-attachment: local;
}
.ql-slip__in--short { min-block-size: calc(var(--lh) * 3 + 8px); }
.ql-slip__in--area:focus { box-shadow: inset 2px 0 0 var(--cp-link); }
.ql-slip__f.is-bad .ql-slip__in--area { box-shadow: inset 2px 0 0 var(--cp-stamp); }
.ql-slip__hint {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cp-ink-3);
}
.ql-slip__err {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: #8a241c;
}
.ql-slip__err:empty { display: none; }

/* the two lists on the slip: the design system's own select, on paper;
   without scripting, the browser's own list, printed the same way */
.ql-slip__sel { position: relative; }
.ql-slip__native {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 7px 30px 6px 4px;
  border: 0;
  border-block-end: 1.5px solid var(--cp-line);
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 6px center / 16px 16px no-repeat;
  font-family: var(--ql-font-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-ink-strong);
  -webkit-appearance: none;
  appearance: none;
}
.ql-slip__native:focus-visible { outline: none; border-block-end-color: var(--cp-link); background-color: rgb(21 86 176 / .06); box-shadow: 0 1.5px 0 0 var(--cp-link); }
.ql-slip .ql-select__trigger {
  block-size: auto;
  min-block-size: 0;
  padding: 7px 4px 6px;
  border: 0;
  border-block-end: 1.5px solid var(--cp-line);
  border-radius: 0;
  background: transparent;
  font-family: var(--ql-font-mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-ink-strong);
  box-shadow: none;
}
.ql-slip .ql-select__trigger:hover { background: transparent; border-block-end-color: rgb(29 34 48 / .55); }
.ql-slip .ql-select__trigger:focus-visible,
.ql-slip .ql-select.is-open .ql-select__trigger {
  outline: none;
  background: rgb(21 86 176 / .06);
  border-block-end-color: var(--cp-link);
  box-shadow: 0 1.5px 0 0 var(--cp-link);
}
.ql-slip .ql-select__caret { color: var(--cp-ink-3); }
.ql-slip .ql-select.is-open .ql-select__caret { color: var(--cp-link); }
.ql-slip .ql-select__panel {
  padding: 6px;
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 250 236 / .85), inset 0 0 0 .5px rgb(104 78 44 / .42), 0 3px 6px rgb(0 0 0 / .45), 0 26px 40px -16px rgb(0 0 0 / .85);
}
.ql-slip .ql-select__opt {
  min-block-size: 36px;
  border-radius: 2px;
  font-family: var(--ql-font-mono);
  font-size: 14px;
  color: var(--cp-ink);
}
.ql-slip .ql-select__opt::before { background: var(--cp-link); }
.ql-slip .ql-select__opt.is-active { background: rgb(21 86 176 / .1); color: var(--cp-ink-strong); }
.ql-slip .ql-select__opt[aria-selected="true"] { color: var(--cp-link); font-weight: 700; }

/* the chips: printed choices on the slip, inked in when chosen */
.ql-slip__rack { display: grid; row-gap: 10px; }
.ql-slip__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ql-slip__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-block-size: 38px;
  padding: 8px 14px;
  border: 1.5px solid rgb(29 34 48 / .3);
  border-radius: 999px;
  background: rgb(255 252 244 / .45);
  font-family: var(--ql-font-mono);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--cp-ink-2);
  cursor: pointer;
  transition: background-color .2s var(--ql-ease), color .2s var(--ql-ease), border-color .2s var(--ql-ease), transform .2s var(--ql-ease-out);
}
.ql-slip__chip:hover { border-color: rgb(29 34 48 / .55); color: var(--cp-ink-strong); transform: translateY(-1px); }
.ql-slip__chip:focus-visible { outline: 2.5px solid var(--cp-link); outline-offset: 2px; }
.ql-slip__chip b { font-size: 11.5px; font-weight: 600; color: var(--cp-ink-4); }
.ql-slip__chip em {
  padding: 1px 6px;
  border: 1px solid rgb(21 86 176 / .4);
  border-radius: 3px;
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cp-link);
}
.ql-slip__chip[aria-pressed="true"] {
  border-color: var(--cp-ink-strong);
  background: var(--cp-ink-strong);
  color: #f4ead6;
}
.ql-slip__chip[aria-pressed="true"] b { color: rgb(244 234 214 / .75); }
.ql-slip__chip[aria-pressed="true"] em { border-color: rgb(244 234 214 / .5); color: #f4ead6; }
.ql-slip__chips.is-bad .ql-slip__chip:not([aria-pressed="true"]) { border-color: rgb(143 42 34 / .55); }

/* send: the desk's own button, inked on the slip */
.ql-slip__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-block-start: 4px; }
.ql-slip__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-block-size: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a3040, #161a24);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 2px 3px rgb(0 0 0 / .4), 0 10px 22px -10px rgb(0 0 0 / .7);
  font-family: var(--ql-font-sans);
  font-size: 15px;
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  color: #f4ead6;
  cursor: pointer;
  transition: transform .25s var(--ql-ease-out), box-shadow .25s var(--ql-ease-out), opacity .2s var(--ql-ease);
}
.ql-slip__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 3px 5px rgb(0 0 0 / .45), 0 16px 26px -12px rgb(0 0 0 / .75); }
.ql-slip__btn:focus-visible { outline: 2.5px solid var(--cp-link); outline-offset: 3px; }
.ql-slip__btn:disabled { opacity: .42; cursor: not-allowed; }
.ql-slip__btn.is-running { opacity: 1; cursor: progress; }
.ql-slip__idle,
.ql-slip__run { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; }
.ql-slip__run { visibility: hidden; }
.ql-slip__btn.is-running .ql-slip__idle { visibility: hidden; }
.ql-slip__btn.is-running .ql-slip__run { visibility: visible; }
.ql-slip__bell { inline-size: 21px; block-size: 21px; flex: none; color: #e9c77f; }
.ql-slip__spin {
  inline-size: 15px;
  block-size: 15px;
  border: 2px solid rgb(244 234 214 / .25);
  border-block-start-color: #f4ead6;
  border-radius: 50%;
  animation: ql-tspin .8s linear infinite;
}
@keyframes ql-tspin { to { transform: rotate(360deg); } }
.ql-slip__noscript {
  margin: 0;
  max-inline-size: 52ch;
  font-family: var(--ql-font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cp-ink-2);
}
.ql-slip__noscript a,
.ql-slip__mail a { color: var(--cp-link); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(21 86 176 / .4); }
.ql-slip__noscript a:focus-visible,
.ql-slip__mail a:focus-visible { outline: 2.5px solid var(--cp-link); outline-offset: 2px; border-radius: 2px; }

/* the slip's foot: what the server does with it, and the box for the desk */
.ql-slip__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 16px 24px;
  padding-block-start: 16px;
  border-block-start: 1px dashed rgb(29 34 48 / .25);
}
@container (min-width: 440px) {
  .ql-slip__foot { grid-template-columns: minmax(0, 1fr) auto; }
}
.ql-slip__notes { display: grid; row-gap: 8px; min-inline-size: 0; }
/* what the desk does with every slip, a printed list, each line ticked */
.ql-slip__status {
  display: grid;
  row-gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ql-font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
.ql-slip__status li { display: flex; align-items: center; gap: 9px; }
.ql-slip__status li::before {
  content: "";
  flex: none;
  inline-size: 13px;
  block-size: 13px;
  background: #2f7d55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ql-slip__mail { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cp-ink-2); }
/* the box for the desk: dashed, until the stamp comes down in it */
.ql-slip__office {
  position: relative;
  display: grid;
  align-content: space-between;
  min-inline-size: 13.5rem;
  min-block-size: 7rem;
  padding: 8px 12px 9px;
  border: 1.5px dashed rgb(29 34 48 / .32);
  border-radius: 3px;
}
.ql-slip__officel {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-ink-4);
}
.ql-slip__ref {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cp-ink-3);
}
.ql-slip__ref b { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--cp-ink-strong); }
.ql-slip__office.is-thud { animation: ql-thud .22s ease-out 1; }
@keyframes ql-thud { 40% { transform: translateY(1.5px) scale(.996); } }
/* the stamp's mark: the desk's red ink, a little uneven, a little askew */
.ql-slip__stamp {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 46%;
  display: grid;
  justify-items: center;
  row-gap: 2px;
  margin: 0;
  padding: 6px 14px 5px;
  border: 2.5px solid var(--cp-stamp);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgb(233 222 199 / .9), inset 0 0 0 3.5px var(--cp-stamp);
  font-family: var(--ql-font-mono);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--cp-stamp);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-7deg);
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='4'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.78 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='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='4'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.78 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='160' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.ql-slip__stamp[hidden] { display: none; }
.ql-slip__stamp b { font-size: 19px; font-weight: 700; letter-spacing: .2em; }
.ql-slip__stamp i { font-size: 10.5px; font-style: normal; font-weight: 600; letter-spacing: .14em; }
.ql-slip__stamp.is-inked { opacity: .9; animation: ql-ink .18s ease-out 1; }
@keyframes ql-ink {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(1.12); filter: blur(1px); }
}
/* sent: the slip waits for the desk */
.ql-support.is-sent .ql-slip__lane { pointer-events: none; }

/* ── 05 · the note beside the slip ────────────────────────────────────────── */

.ql-tnote {
  position: relative;
  z-index: 1;
  min-inline-size: 0;
  padding: clamp(18px, 1rem + 1vw, 28px) clamp(18px, 1rem + 1vw, 26px) clamp(20px, 1rem + 1.2vw, 30px);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgb(255 250 236 / .85),
    inset 0 0 0 .5px rgb(104 78 44 / .42),
    0 2px 3px rgb(0 0 0 / .5),
    12px 24px 40px -18px rgb(0 0 0 / .9);
  transform: rotate(.8deg);
}
/* its clip: the brass binder clip, holding it to nothing in particular */
.ql-tnote::before {
  content: "";
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: 24px;
  inline-size: 26px;
  block-size: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f4e3b8'/%3E%3Cstop offset='.45' stop-color='%23c9a35a'/%3E%3Cstop offset='1' stop-color='%236e5226'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M7 16V50a6 6 0 0 0 12 0V10a4.5 4.5 0 0 0-9 0V46a1.5 1.5 0 0 0 3 0V18' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(2px 3px 2px rgb(0 0 0 / .45));
  pointer-events: none;
}
.ql-tnote__face { display: grid; row-gap: 14px; }
.ql-tnote__face[hidden] { display: none; }
.ql-tnote__eyebrow {
  margin: 0;
  padding-block-end: 10px;
  border-block-end: 1.5px solid var(--cp-red);
  font-family: var(--ql-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cp-ink-2);
}
.ql-tnote__steps { display: grid; row-gap: 12px; margin: 0; padding: 0; list-style: none; }
.ql-tnote__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--cp-ink-2); }
.ql-tnote__steps b { font-weight: 700; color: var(--cp-ink-strong); }
.ql-tnote__n {
  padding: 1px 6px;
  border: 1px solid rgb(29 34 48 / .3);
  border-radius: 2px;
  font-family: var(--ql-font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cp-ink-2);
}
.ql-tnote__foot {
  margin: 0;
  padding-block-start: 10px;
  border-block-start: 1px dashed rgb(29 34 48 / .25);
  font-family: var(--ql-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
/* the running order */
.ql-tnote__meta { display: grid; row-gap: 4px; }
.ql-tnote__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.ql-tnote__row span {
  font-family: var(--ql-font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
.ql-tnote__row b { min-inline-size: 0; overflow-wrap: anywhere; text-align: end; font-weight: 600; color: var(--cp-ink-strong); }
.ql-tnote__row b.is-empty { font-weight: 400; color: rgb(74 79 92 / .6); }
.ql-tnote__list { display: grid; row-gap: 2px; min-block-size: 3rem; }
.ql-tnote__empty { margin: 0; font-size: 13.5px; line-height: 1.55; font-style: italic; color: var(--cp-ink-3); }
/* each item, its minutes over a dotted leader */
.ql-tnote__i {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-ink);
  animation: ql-tline .35s var(--ql-ease-out) 1;
}
.ql-tnote__i span { flex: none; max-inline-size: 70%; }
.ql-tnote__i::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-inline-size: 12px;
  border-block-end: 1.5px dotted rgb(29 34 48 / .35);
  transform: translateY(-4px);
}
.ql-tnote__i u { order: 2; flex: none; font-family: var(--ql-font-mono); font-size: 12px; text-decoration: none; color: var(--cp-ink-2); }
@keyframes ql-tline { from { opacity: 0; transform: translateX(-6px); } }
.ql-tnote__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding-block-start: 8px;
  border-block-start: 1.5px solid rgb(29 34 48 / .5);
}
.ql-tnote__total > span { font-family: var(--ql-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-ink-2); }
.ql-tnote__total b { font-family: var(--ql-font-mono); font-size: 20px; font-weight: 700; color: var(--cp-ink-strong); }

/* ── 06 · the stub: the receipt, torn off the slip ────────────────────────── */

.ql-stub {
  inline-size: min(100% - 32px, 30rem);
  max-inline-size: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cp-ink);
  overflow: visible;
}
.ql-stub::backdrop { background: rgb(0 0 0 / .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ql-stub[open] .ql-stub__card { animation: ql-stub-off .55s cubic-bezier(.2, .8, .25, 1) 1; }
@keyframes ql-stub-off {
  from { opacity: 0; transform: translate(-36px, 28px) rotate(-6deg) scale(.94); }
}
.ql-stub__card {
  container: stub / inline-size;
  position: relative;
  display: grid;
  justify-items: start;
  row-gap: 14px;
  padding: 30px 30px 28px 38px;
  border-radius: 0 4px 4px 0;
  box-shadow: inset 0 1px 0 rgb(255 250 236 / .85), 0 3px 6px rgb(0 0 0 / .5), 22px 44px 70px -24px rgb(0 0 0 / .95);
  transform: rotate(-1deg);
  outline: none;
  /* its torn edge: the slip's perforation, along its left */
  -webkit-mask: radial-gradient(circle 4.5px at 0 10px, rgb(0 0 0 / 0) 98%, #000) 0 0 / 100% 20px repeat-y;
  mask: radial-gradient(circle 4.5px at 0 10px, rgb(0 0 0 / 0) 98%, #000) 0 0 / 100% 20px repeat-y;
}
.ql-stub__card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 13px;
  border-inline-start: 1.5px dashed rgb(29 34 48 / .28);
}
.ql-stub__x {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cp-ink-3);
  cursor: pointer;
}
.ql-stub__x svg { inline-size: 18px; block-size: 18px; }
.ql-stub__x:hover { background: rgb(29 34 48 / .08); color: var(--cp-ink-strong); }
.ql-stub__x:focus-visible { outline: 2.5px solid var(--cp-link); outline-offset: 1px; }
.ql-stub__eyebrow {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-ink-3);
}
.ql-stub__t {
  margin: 0;
  padding-block-end: 10px;
  border-block-end: 1.5px solid var(--cp-red);
  inline-size: 100%;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: var(--ql-fw-bold);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--cp-ink-strong);
}
.ql-stub__s { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cp-ink-2); text-wrap: pretty; }
.ql-stub__s b { color: var(--cp-ink-strong); overflow-wrap: anywhere; }
.ql-stub__ref {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  inline-size: 100%;
  padding: 12px 14px;
  border: 1.5px dashed rgb(29 34 48 / .32);
  border-radius: 3px;
}
.ql-stub__refl {
  grid-column: 1;
  font-family: var(--ql-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cp-ink-4);
}
.ql-stub__v {
  grid-column: 1;
  font-family: var(--ql-font-mono);
  font-size: clamp(20px, 1rem + 1.2vw, 26px);
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--cp-ink-strong);
}
.ql-stub__copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-block-size: 38px;
  padding: 0 16px;
  border: 1.5px solid rgb(29 34 48 / .4);
  border-radius: 999px;
  background: transparent;
  font-family: var(--ql-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cp-ink-strong);
  cursor: pointer;
}
.ql-stub__copy:hover { border-color: var(--cp-ink-strong); }
.ql-stub__copy:focus-visible { outline: 2.5px solid var(--cp-link); outline-offset: 2px; }
.ql-stub__copy.is-done { border-color: #2f7d55; color: #1f5a3c; }
.ql-stub__ok { justify-self: stretch; }
/* a narrow stub: the copy button under the reference, never the reference
   broken in two */
@container stub (max-width: 360px) {
  .ql-stub__ref { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .ql-stub__copy { grid-column: 1; grid-row: auto; justify-self: start; margin-block-start: 8px; }
}

/* ── 07 · the arrival ─────────────────────────────────────────────────────── */

/* The head's words rise in turn, then the slip and the note are laid on the
   desk. CSS alone, so it always ends with everything shown, script or not;
   it runs only once the page is armed (in its head). It moves `translate`,
   not `transform`, so the note keeps its own slight turn throughout. */
.ql-support-arm .ql-support-rise { animation: ql-support-rise .8s var(--ql-ease-out) both; }
.ql-support-arm .ql-tdesk__words .ql-support-rise:nth-child(1) { animation-delay: 40ms; }
.ql-support-arm .ql-tdesk__words .ql-support-rise:nth-child(2) { animation-delay: 110ms; }
.ql-support-arm .ql-tdesk__side .ql-support-rise:nth-child(1) { animation-delay: 190ms; }
.ql-support-arm .ql-tdesk__side .ql-support-rise:nth-child(2) { animation-delay: 260ms; }
.ql-support-arm .ql-tdesk__ledger.ql-support-rise { animation-delay: 330ms; }
.ql-support-arm .ql-slip { animation: ql-support-lay .9s var(--ql-ease-out) .26s both; }
.ql-support-arm .ql-tnote { animation: ql-support-lay .9s var(--ql-ease-out) .42s both; }
@keyframes ql-support-rise {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: none; }
}
@keyframes ql-support-lay {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ql-support-arm .ql-support-rise, .ql-support-arm .ql-slip, .ql-support-arm .ql-tnote,
  .ql-tdesk__ring::before, .ql-tdesk__ring::after, .ql-slip__stamp.is-inked, .ql-slip__office.is-thud,
  .ql-tnote__i, .ql-stub[open] .ql-stub__card { animation: none !important; }
  .ql-slip__tab, .ql-slip__chip, .ql-slip__btn, .ql-slip__in, .ql-tdesk__ring, .ql-tdesk__way, .ql-tdesk__wgo, .ql-tdesk__wico { transition: none; }
  .ql-slip__chip:hover, .ql-slip__btn:hover:not(:disabled), .ql-tdesk__way:hover .ql-tdesk__wgo { transform: none; }
  .ql-slip__spin { animation-duration: 1.6s; }
}
@media (forced-colors: active) {
  .ql-tdesk__room, .ql-tdesk__maps, .ql-tnote::before { display: none; }
  .ql-slip__card, .ql-tnote, .ql-stub__card, .ql-slip__office, .ql-slip__tab { border: 1px solid CanvasText; }
  .ql-slip__card, .ql-tnote, .ql-stub__card, .ql-slip__tab, .ql-slip .ql-select__panel { forced-color-adjust: auto; background-image: none; }
  .ql-stub__card { -webkit-mask: none; mask: none; }
  .ql-slip__chip[aria-pressed="true"] { border-width: 3px; }
  .ql-slip__btn { border: 1px solid ButtonText; }
  .ql-slip__stamp { -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal; }
  .ql-slip__status li::before { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  .ql-tdesk__room, .ql-tdesk__maps, .ql-tnote::before, .ql-slip__tabs, .ql-slip__send { display: none !important; }
  .ql-support, .ql-slip__card, .ql-tnote { background: #fff; box-shadow: none; color: #000; }
  .ql-slip__card, .ql-tnote { border: 1px solid #999; transform: none; }
}