@charset "utf-8";
/* ============================================================================
   TORQUE · BOOK AN APPOINTMENT · tq.book.css · /Book (Book.aspx)
   Round 45 made the page; round F3-3 gives it the site kit's look: YOUR KEY
   TAG. When you leave your car, the shop hangs a paper tag on your keys; here
   the tag is your booking. It hangs from the graphite band on its ring (the
   kit's paper island inside a graphite band, .tq-paper), stays beside you on
   a desk and fills in as you pick. Beside it, the shop's appointment book.
   Built only from the site kit (tq.tokens.css, tq.base.css, tq.site.css): the
   page head, the fields, the choice cards, the buttons, the alerts and the
   empty state are the kit's. This file adds what the page alone has:
     1  the band, and the hook the tag hangs from
     2  the sheet and the tag, side by side
     3  the route: the steps on the lane
     4  the jobs' lengths
     5  the days, by weeks
     6  the day's book: its free times by the hour
     7  the tag: its paper, its eyelet and ring, its read-outs, its stamp
     8  booked; shut; the shop's appointment info page
     9  a phone, a tablet
    10  motion, reduced motion, forced colours, print
   ========================================================================= */

.tq-book {
  --tag-w: 330px;                    /* the tag's column on a desk */
  --tag-gap: clamp(2rem, 1rem + 2.4vw, 3.5rem);
  --hang: 150px;                     /* how far the tag hangs over the band */
  --ring: 64px;                      /* the ring's box (its circle is 48px) */
  --hole-y: 26px;                    /* the eyelet's centre, from the paper's top */
  overflow-x: clip;                  /* the tag's swing never widens the page (clip keeps the tag's sticking) */
  background: var(--tq-bg-sunken);
}


/* ═══ 1 · THE BAND ═══════════════════════════════════════════════════════
   The kit's page head on graphite, as /Tires and the tire page have it, and
   on a desk the hook the tag hangs from, over the tag's own column.        */

.tq-book__head {
  position: relative;
  padding-block: clamp(1.75rem, 1rem + 2.6vw, 3rem) clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
}
.tq-book__headin { display: grid; grid-template-columns: minmax(0, 1fr); }
.tq-book__headmain { min-inline-size: 0; }
.tq-book__title {                            /* "Book an / appointment": its two lines set in the markup */
  margin: var(--tq-sp-6) 0 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-d3);
  font-weight: var(--tq-fw-bold);
  line-height: 1.02;
  letter-spacing: var(--tq-tr-display);
  text-transform: uppercase;
  color: var(--tq-text-strong);
}
.tq-book__lead {
  max-inline-size: 46ch;
  margin: var(--tq-sp-6) 0 0;
  font-size: var(--tq-fs-md);
  line-height: var(--tq-lh-lead);
  color: var(--tq-text-muted);
}
.tq-book__hook { display: none; }


/* ═══ 2 · THE SHEET AND THE TAG ══════════════════════════════════════════ */

.tq-book__grid {
  position: relative;
  z-index: 1;                         /* the tag hangs over the band */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tq-sp-10);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3rem, 2rem + 4vw, 5rem);
}
.tq-book__sheet {
  min-inline-size: 0;
  padding: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xl);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-1);
}
.tq-book__noscript { margin-block-end: var(--tq-sp-8); }


/* ═══ 3 · THE ROUTE ══════════════════════════════════════════════════════
   The steps are a sequence, so they ride the kit's lane: a marker each, the
   dashes between them. A step done turns its marker to the signal.        */

.tq-book__route { display: grid; gap: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); }
.tq-book__step {
  position: relative;
  min-inline-size: 0;
  margin: 0;
  padding: 0 0 0 calc(32px + var(--tq-sp-7));
  border: 0;
}
.tq-book__step:not(:last-child)::before {     /* the lane to the next marker */
  content: "";
  position: absolute;
  inset-block: 44px calc(-1 * clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem) + 6px);
  inset-inline-start: 15px;
  inline-size: 2px;
  background: repeating-linear-gradient(180deg, var(--tq-accent) 0 9px, transparent 9px 14px);
  opacity: .45;
}
.tq-book__step.is-done:not(:last-child)::before { opacity: .95; }
.tq-book__legend {
  float: left;                                /* a legend sits inside its fieldset */
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--tq-sp-5);
  margin: 0 0 var(--tq-sp-6);
  padding: 0;
}
.tq-book__legend + * { clear: left; }
.tq-book__mark {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--tq-graphite-900);
  color: #FFFFFF;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-bold);
  box-shadow: 0 0 0 5px var(--tq-surface);
  transition: background-color var(--tq-d-base) var(--tq-ease);
}
.tq-book__marked { display: none; inline-size: 20px; block-size: 20px; }
.tq-book__step.is-done .tq-book__mark { background: var(--tq-accent); }
.tq-book__step.is-done .tq-book__mark > span { display: none; }
.tq-book__step.is-done .tq-book__marked { display: block; }
.tq-book__steph {                             /* an h2, in its step's legend */
  margin: 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-2xl);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.15;
  letter-spacing: .005em;
  color: var(--tq-text-strong);
}
.tq-book__hint { margin: 0 0 var(--tq-sp-6); max-inline-size: 62ch; font-size: var(--tq-fs-sm); line-height: 1.55; color: var(--tq-text-muted); }
.tq-book__step > .tq-error { margin-block-start: var(--tq-sp-4); }


/* ═══ 4 · THE JOBS ═══════════════════════════════════════════════════════ */

.tq-book__jobs { display: grid; gap: var(--tq-sp-4); grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.tq-book__job { align-items: center; }
/* the labels that wrap their input (jobs, days, times): no grey or blue flash on a tap, as the kit's base does for
   label[for]; each shows its own pressed state */
.tq-book__job, .tq-book__day, .tq-book__time { -webkit-tap-highlight-color: transparent; }
.tq-book__job .tq-check { align-self: center; }
.tq-book__len { flex: none; font-size: var(--tq-fs-md); color: var(--tq-text-muted); white-space: nowrap; }
.tq-book__job:has(input:checked) .tq-book__len { color: var(--tq-accent-text); }


/* ═══ 5 · THE DAYS ═══════════════════════════════════════════════════════
   The whole window by weeks, from Sunday. A day is a capsule (a circle):
   pressed, it takes the signal; closed, it is struck; full, it fades.     */

.tq-book__cal { max-inline-size: 640px; }
.tq-book__month { margin: 0 0 var(--tq-sp-4); font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-book__wk, .tq-book__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--tq-sp-2); }
.tq-book__wk { margin-block-end: var(--tq-sp-3); }
.tq-book__wk > span { text-align: center; font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-medium); color: var(--tq-text-subtle); }
.tq-book__days { display: grid; gap: var(--tq-sp-3); }
.tq-book__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-inline-size: 0;
  padding-block: 2px;
  cursor: pointer;
}
.tq-book__day input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tq-book__dot {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--tq-line-strong);
  border-radius: 50%;
  background: var(--tq-surface);
  color: var(--tq-text-strong);
  transition: background-color var(--tq-d-fast) var(--tq-ease), border-color var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
}
.tq-book__dn { font-family: var(--tq-font-display); font-size: var(--tq-fs-xl); font-weight: var(--tq-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.tq-book__mon { margin-block-end: 1px; font-size: 11px; font-weight: var(--tq-fw-semibold); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--tq-text-muted); }
.tq-book__free { min-block-size: 1.1em; font-size: var(--tq-fs-2xs, 0.6875rem); line-height: 1.1; white-space: nowrap; color: var(--tq-text-muted); font-variant-numeric: tabular-nums; }
.tq-book__narrow { display: none; }
.tq-book__day.is-today .tq-book__dot { border: 2px solid var(--tq-graphite-900); }
@media (hover: hover) {                       /* not the day picked: its signal stays under the pointer */
  .tq-book__day:hover:not(.is-closed):not(.is-full):not(:has(input:checked)) .tq-book__dot { border-color: rgb(var(--tq-steel-rgb) / .5); background: var(--tq-surface-2); }
}
.tq-book__day:has(input:checked) .tq-book__dot { border-color: var(--tq-accent); background: var(--tq-accent); color: var(--tq-on-accent); }
.tq-book__day:has(input:checked) .tq-book__mon { color: var(--tq-on-accent); }
.tq-book__day:has(input:checked) .tq-book__free { color: var(--tq-accent-text); font-weight: var(--tq-fw-semibold); }
.tq-book__day:has(input:focus-visible) .tq-book__dot { box-shadow: var(--tq-ring); }
.tq-book__day.is-closed, .tq-book__day.is-full { cursor: default; }
.tq-book__day.is-closed input, .tq-book__day.is-full input { cursor: default; }
.tq-book__day.is-closed .tq-book__dot { border-style: dashed; border-color: var(--tq-line); background: transparent; color: var(--tq-text-disabled); }
.tq-book__day.is-closed .tq-book__dn { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tq-book__day.is-full .tq-book__dot { border-color: var(--tq-line); background: var(--tq-surface-3); color: var(--tq-text-subtle); }
.tq-book__day.is-out { pointer-events: none; }
.tq-book__week.is-later.is-folded { display: none; }
.tq-book__later { margin-block-start: var(--tq-sp-5); }
.tq-book__later[aria-expanded="true"] .tq-i { transform: rotate(180deg); }


/* ═══ 6 · THE DAY'S BOOK ═════════════════════════════════════════════════
   The day's free times, an hour a row, the way the shop's book is ruled: a
   time you can take is a capsule; a time not free is a dash.              */

.tq-book__board { margin-block-start: var(--tq-sp-9); padding-block-start: var(--tq-sp-8); border-block-start: 1px dashed var(--tq-line-strong); }
.tq-book__dayh {
  margin: 0 0 var(--tq-sp-2);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.2;
  color: var(--tq-text-strong);
}
.tq-book__line { display: flex; align-items: center; gap: var(--tq-sp-4); margin: 0 0 var(--tq-sp-6); font-size: var(--tq-fs-sm); line-height: 1.5; color: var(--tq-text-muted); }
.tq-book__line .tq-lane-loader { inline-size: 96px; flex: none; }
.tq-book__line.is-error { align-items: flex-start; gap: var(--tq-sp-3); font-weight: var(--tq-fw-medium); color: var(--tq-danger); }
.tq-book__lineicon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; }
.tq-book__line.is-error { flex-wrap: wrap; row-gap: var(--tq-sp-2); }
.tq-book__line.is-error > span:last-of-type { flex: 1 1 14rem; min-inline-size: 0; }
.tq-book__retry { flex: none; font-size: var(--tq-fs-sm); }    /* the kit's link button: Try again, after a call that failed */
.tq-book__times { display: grid; gap: var(--tq-sp-3); }
.tq-book__times[aria-busy="true"] { opacity: .45; pointer-events: none; }   /* being turned to another day: out of reach */
.tq-book__hour { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: var(--tq-sp-4); }
.tq-book__hourh { font-family: var(--tq-font-display); font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tq-book__slots { display: grid; grid-template-columns: repeat(var(--per-hour, 4), minmax(0, 1fr)); gap: var(--tq-sp-3); max-inline-size: 520px; }
.tq-book__time { position: relative; display: block; min-inline-size: 0; }
.tq-book__time input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tq-book__time span {
  display: grid;
  place-items: center;
  block-size: 44px;
  border: 1px solid var(--tq-line-strong);
  border-radius: var(--tq-r-full);
  background: var(--tq-surface);
  color: var(--tq-text-strong);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--tq-d-fast) var(--tq-ease), border-color var(--tq-d-fast) var(--tq-ease), color var(--tq-d-fast) var(--tq-ease);
}
@media (hover: hover) {
  .tq-book__time:hover input:not(:checked) + span { border-color: rgb(var(--tq-steel-rgb) / .5); background: var(--tq-surface-2); }
}
.tq-book__time input:checked + span { border-color: var(--tq-accent); background: var(--tq-accent); color: var(--tq-on-accent); }
.tq-book__time input:focus-visible + span { box-shadow: var(--tq-ring); }
.tq-book__nofree {
  display: grid;
  place-items: center;
  block-size: 44px;
  color: var(--tq-text-disabled);
}
.tq-book__nofree::before { content: ""; inline-size: 16px; block-size: 2px; border-radius: 1px; background: currentColor; }
.tq-book__cell-blank { block-size: 44px; }


/* ═══ 7 · THE TAG ════════════════════════════════════════════════════════
   Paper with its two top corners cut, an eyelet through it, a steel ring
   through the eyelet. Its back half is behind the paper (seen through the
   hole), its front half over it, so it reads as threaded.                 */

.tq-book__tagcol { min-inline-size: 0; padding-block-start: calc(var(--ring) / 2 + 6px); }
.tq-book__tag {
  position: relative;
  max-inline-size: 420px;
  margin-inline: auto;
  filter: drop-shadow(0 22px 24px rgb(var(--tq-steel-rgb) / .22)) drop-shadow(0 2px 3px rgb(var(--tq-steel-rgb) / .2));
}
.tq-book__ring {
  position: absolute;
  z-index: 0;
  inset-block-start: calc(var(--hole-y) - var(--ring) + 8px);
  inset-inline-start: calc(50% - var(--ring) / 2);
  inline-size: var(--ring);
  block-size: var(--ring);
  overflow: visible;
  fill: none;
  stroke: #6E7580;
  stroke-width: 4.5;
  stroke-linecap: round;
}
.tq-book__ring--front { z-index: 2; stroke: #8A919B; }
.tq-book__ring--front path { stroke-dasharray: 0 0; }
.tq-book__paper {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  padding: calc(var(--hole-y) + 30px) var(--tq-sp-7) var(--tq-sp-7);
  background: var(--tq-paper-0);
  color: var(--tq-text-body);
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%, 0 26px);
  -webkit-mask: radial-gradient(circle 7.5px at 50% var(--hole-y), transparent 96%, #000 100%);
  mask: radial-gradient(circle 7.5px at 50% var(--hole-y), transparent 96%, #000 100%);
}
.tq-book__paper::before {                     /* the eyelet's reinforcement */
  content: "";
  position: absolute;
  inset-block-start: calc(var(--hole-y) - 13px);
  inset-inline-start: calc(50% - 13px);
  inline-size: 26px;
  block-size: 26px;
  border: 4px solid var(--tq-paper-200);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--tq-paper-300), 0 0 0 1px var(--tq-paper-300);
}
.tq-book__shop {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
}
.tq-book__tagh { margin: var(--tq-sp-1) 0 0; font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-book__clock {
  display: flex;
  align-items: baseline;
  gap: var(--tq-sp-3);
  margin-block-start: var(--tq-sp-6);
  padding-block-start: var(--tq-sp-6);
  border-block-start: 1px dashed var(--tq-line-strong);
  font-family: var(--tq-font-display);
  color: var(--tq-text-strong);
}
.tq-book__clock > b { font-size: clamp(3rem, 2.4rem + 1.6vw, 3.75rem); font-weight: var(--tq-fw-bold); line-height: .95; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tq-book__clock > span { font-size: var(--tq-fs-xl); font-weight: var(--tq-fw-semibold); color: var(--tq-text-muted); }
.tq-book__clock.is-empty > b { color: var(--tq-text-disabled); }
.tq-book__date { margin: var(--tq-sp-3) 0 0; font-size: var(--tq-fs-md); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-book__date.is-empty { font-weight: var(--tq-fw-regular); color: var(--tq-text-muted); }
.tq-book__facts { display: grid; margin: var(--tq-sp-6) 0 0; padding: 0; }
.tq-book__facts > div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: var(--tq-sp-4);
  padding-block: var(--tq-sp-4);
  border-block-start: 1px dashed var(--tq-line-strong);
}
.tq-book__facts dt { font-size: var(--tq-fs-xs); font-weight: var(--tq-fw-medium); line-height: 1.6; color: var(--tq-text-muted); }
.tq-book__facts dd { margin: 0; overflow-wrap: anywhere; font-size: var(--tq-fs-sm); font-weight: var(--tq-fw-semibold); line-height: 1.45; color: var(--tq-text-strong); }
.tq-book__facts dd.is-empty { font-weight: var(--tq-fw-regular); color: var(--tq-text-subtle); }
.tq-book__alert { margin-block-start: var(--tq-sp-5); }
.tq-book__go { inline-size: 100%; margin-block-start: var(--tq-sp-6); }
.tq-book__go[aria-busy="true"] { cursor: progress; }    /* booking: aria-disabled, not disabled (the keyboard stays on it) */
.tq-book__busy { display: block; max-inline-size: none; margin-block-start: var(--tq-sp-4); }

/* BOOKED: the button gives way to the stamp, where the visitor pressed; inked on the paper in the success colour (status
   colours carry status), clear of the time and the facts */
.tq-book__stamp {
  justify-self: center;
  margin: var(--tq-sp-6) 0 var(--tq-sp-1);
  padding: 7px 18px 5px;
  border: 3px solid var(--tq-success);
  border-radius: var(--tq-r-sm);
  color: var(--tq-success);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-3xl);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  opacity: .9;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tq-book__stamp > span { display: block; margin-inline-end: -.14em; }   /* the last letter's tracking, off the right */
.tq-book.is-booked .tq-book__go { display: none; }


/* ═══ 8 · BOOKED · SHUT · THE SHOP'S INFO PAGE ═══════════════════════════ */

.tq-book__done { display: grid; justify-items: start; gap: var(--tq-sp-6); }
.tq-book__done:focus { outline: none; }
.tq-book__doneh {
  display: flex;
  align-items: center;
  gap: var(--tq-sp-4);
  margin: 0;
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-3xl);
  font-weight: var(--tq-fw-bold);
  line-height: 1.1;
  color: var(--tq-text-strong);
}
.tq-book__doneicon { flex: none; inline-size: 32px; block-size: 32px; color: var(--tq-success); }
.tq-book__donelead { margin: 0; font-size: var(--tq-fs-lg); line-height: var(--tq-lh-lead); color: var(--tq-text-body); }
.tq-book__donedl { display: grid; gap: 0; inline-size: 100%; max-inline-size: 640px; margin: 0; }
.tq-book__donedl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--tq-sp-4); padding-block: var(--tq-sp-4); border-block-start: 1px dashed var(--tq-line-strong); }
.tq-book__donedl dt { color: var(--tq-text-muted); }
.tq-book__donedl dd { margin: 0; overflow-wrap: anywhere; font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-book__note { margin: 0; max-inline-size: 62ch; overflow-wrap: anywhere; color: var(--tq-text-body); }
.tq-book__doneacts { display: flex; flex-wrap: wrap; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-2); }
.tq-book__tel { color: var(--tq-accent-text); font-weight: var(--tq-fw-semibold); white-space: nowrap; }

.tq-book__shutsec { background: var(--tq-bg-sunken); }
.tq-book__shut { max-inline-size: 640px; margin-inline: auto; }
.tq-book__shutacts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tq-sp-4); margin-block-start: var(--tq-sp-6); }

.tq-book__info { padding-block: 0 clamp(3rem, 2rem + 4vw, 5rem); }
.tq-book.is-shut .tq-book__info { padding-block-start: 0; }
.tq-book__info > * { max-inline-size: 72ch; }
.tq-book__infoh { margin: 0 0 var(--tq-sp-5); font-family: var(--tq-font-display); font-size: var(--tq-fs-2xl); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.tq-book__infobody { overflow-wrap: anywhere; color: var(--tq-text-body); }
.tq-book__infobody p, .tq-book__infobody ul { margin: 0 0 var(--tq-sp-4); line-height: 1.65; }
.tq-book__infobody ul { padding-inline-start: 1.25rem; list-style: disc; }
.tq-book__infobody h2, .tq-book__infobody h3 { margin: var(--tq-sp-6) 0 var(--tq-sp-3); font-size: var(--tq-fs-lg); font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }


/* ═══ 9 · A DESK, A TABLET, A PHONE ══════════════════════════════════════ */

/* a desk: the tag beside the sheet, hanging from the band, then sticking */
@media (min-width: 1024px) {
  .tq-book.is-open .tq-book__headin { grid-template-columns: minmax(0, 1fr) var(--tag-w); column-gap: var(--tag-gap); }
  .tq-book.is-open .tq-book__head { padding-block-end: calc(var(--hang) - var(--tq-sp-6)); }
  .tq-book__hook {                            /* a steel peg in the band, over the tag's column: the ring hangs on it */
    display: block;
    position: absolute;
    z-index: 2;
    inset-block-end: calc(var(--hang) - 14px);
    inset-inline-start: calc(50% + min(50% - var(--tq-gutter), var(--tq-container) / 2) - var(--tag-w) / 2 - 8px);
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #A3AAB4 0 18%, #5D646E 46%, #2B3036 78%);
    box-shadow: 0 0 0 3px rgb(var(--tq-black-rgb) / .35), 0 3px 6px rgb(var(--tq-black-rgb) / .6);
  }
  .tq-book__grid { grid-template-columns: minmax(0, 1fr) var(--tag-w); column-gap: var(--tag-gap); align-items: start; }
  .tq-book__tagcol { align-self: stretch; margin-block-start: calc(-1 * var(--hang) - clamp(1.5rem, 1rem + 2vw, 2.5rem)); padding-block-start: 0; }
  .tq-book__tag { position: sticky; inset-block-start: calc(var(--tq-header-h) + var(--ring) / 2 + 18px); margin-block-start: calc(var(--ring) / 2 - 8px); }
}

/* a tablet and a phone: the tag after the sheet, the last thing before you book */
@media (max-width: 1023px) {
  .tq-book__tag { max-inline-size: 460px; }
}
@media (max-width: 639px) {
  .tq-book__step { padding-inline-start: 0; }
  .tq-book__step::before { display: none; }
  .tq-book__mark { position: static; flex: none; inline-size: 28px; block-size: 28px; font-size: var(--tq-fs-sm); box-shadow: none; }
  .tq-book__steph { font-size: var(--tq-fs-xl); }
  .tq-book__dot { inline-size: 42px; block-size: 42px; }
  .tq-book__dn { font-size: var(--tq-fs-lg); }
  .tq-book__count, .tq-book__wide { display: none; }
  .tq-book__narrow { display: inline; }
  .tq-book__wk, .tq-book__week { gap: 2px; }
  .tq-book__hour { grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--tq-sp-3); }
  .tq-book__slots { gap: var(--tq-sp-2); }
  .tq-book__time span { font-size: var(--tq-fs-md); }
  .tq-book__paper { padding-inline: var(--tq-sp-6); }
  .tq-book__donedl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tq-book__doneacts .tq-btn { flex: 1 1 100%; }
}
@media (max-width: 389px) {                  /* a day's circle fits its column (39 px at 360, 41 at 375) */
  .tq-book__dot { inline-size: 38px; block-size: 38px; }
}
@media (max-width: 479px) {                  /* more than four times to an hour (every 10 minutes): two rows of three */
  .tq-book__slots.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {                  /* 320 (and 400% zoom): circles of 32 px */
  .tq-book__dot { inline-size: 32px; block-size: 32px; }
  .tq-book__dn { font-size: var(--tq-fs-md); }
  .tq-book__mon { font-size: 10px; }
  .tq-book__free { font-size: 10px; }
  .tq-book__hour { grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--tq-sp-2); }
  .tq-book__hourh { font-size: var(--tq-fs-sm); }
}


/* ═══ 10 · MOTION · FORCED COLOURS · PRINT ═══════════════════════════════
   One moment: on a desk the tag swings once on its ring as the page opens.
   Answering an action: the read-out ticks over to the time picked, and the
   stamp lands. The lane runs only while a call is in flight (the kit's lane
   loader). With reduced motion, none of it moves.                         */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .tq-book.is-open .tq-book__tag { transform-origin: 50% calc(var(--hole-y) - var(--ring) + 12px); animation: tq-book-swing 1.9s cubic-bezier(.33, 0, .2, 1) .15s both; }
}
@keyframes tq-book-swing {
  0%   { transform: rotate(-9deg); }
  22%  { transform: rotate(6deg); }
  44%  { transform: rotate(-3.4deg); }
  64%  { transform: rotate(1.8deg); }
  82%  { transform: rotate(-.7deg); }
  100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .tq-book__stamp:not([hidden]) { animation: tq-book-stamp .34s cubic-bezier(.2, 1.3, .4, 1) both; }
  .tq-book__clock.is-ticked > b, .tq-book__clock.is-ticked > span { animation: tq-book-tick .26s cubic-bezier(.2, .8, .3, 1) both; }
}
@keyframes tq-book-tick {
  from { opacity: .2; transform: translateY(.22em); }
  to   { opacity: 1; transform: none; }
}
@keyframes tq-book-stamp {
  from { opacity: 0; transform: rotate(-6deg) scale(1.5); }
  to   { opacity: .9; transform: rotate(-6deg) scale(1); }
}

/* forced colours (Windows contrast themes): the system's colours; what is picked in Highlight; a day that cannot be
   picked in GrayText; focus as an outline (box shadows are dropped); the tag a plain bordered card. The tag's button
   draws its own colours: the kit's primary button gets the text backplate (Canvas) behind HighlightText, which hides its
   words in a dark theme */
@media (forced-colors: active) {
  .tq-book__day:has(input:checked) .tq-book__dot, .tq-book__time input:checked + span { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  .tq-book__day.is-closed .tq-book__dot, .tq-book__day.is-full .tq-book__dot { border-color: GrayText; color: GrayText; }
  .tq-book__day:has(input:focus-visible) .tq-book__dot, .tq-book__time input:focus-visible + span { outline: 2px solid CanvasText; outline-offset: 3px; }
  .tq-book__go { forced-color-adjust: none; border: 1px solid HighlightText; background: Highlight; color: HighlightText; }
  .tq-book__go:focus-visible { outline: 2px solid CanvasText; outline-offset: 3px; }
  .tq-book__go[aria-disabled="true"] { border-color: GrayText; background: Canvas; color: GrayText; }
  .tq-book__job:has(input:focus-visible) { outline: 2px solid CanvasText; outline-offset: 2px; }      /* the kit's ring is a shadow */
  .tq-book .tq-input:focus, .tq-book .tq-textarea:focus { outline: 2px solid CanvasText; outline-offset: 2px; }   /* the kit's is none */
  .tq-book__tag { filter: none; }
  .tq-book__paper { border: 1px solid CanvasText; clip-path: none; }
  .tq-book__stamp { mix-blend-mode: normal; border-color: CanvasText; color: CanvasText; }
  .tq-book__step:not(:last-child)::before { background: CanvasText; }
}

@media print {
  .tq-book__hook, .tq-book__ring, .tq-book__go, .tq-book__later, .tq-book__doneacts, .tq-book__noscript { display: none !important; }
  .tq-book__head { padding-block: var(--tq-sp-6) !important; }
  .tq-book__head .tq-book__title, .tq-book__head .tq-book__lead, .tq-book__head .tq-crumbs, .tq-book__head .tq-crumbs a, .tq-book__head .tq-crumbs span { color: #000 !important; }
  .tq-book__grid { display: block; }
  .tq-book__tagcol { margin: var(--tq-sp-8) 0 0 !important; }
  .tq-book.is-booked .tq-book__grid { display: grid; grid-template-columns: minmax(0, 1fr) 3in; gap: 0 .3in; align-items: start; }   /* booked: the confirmation and the tag on one page */
  .tq-book.is-booked .tq-book__tagcol { margin: 0 !important; }
  .tq-book__tag { position: static !important; filter: none; animation: none !important; break-inside: avoid; }
  .tq-book__paper { border: 1px solid #000; clip-path: none; -webkit-mask: none; mask: none; }
  .tq-book__paper::before { display: none; }
  .tq-book__sheet { box-shadow: none; }
}