/* quote-tokens.css — the bridge between this site's tokens and the ht-kit
   token contract, shared by the quote, booking and assistant components.

   quote.css is a layer-2 component: it reads tokens and defines none of its
   own appearance. It was authored against the ht-kit contract, which this
   site predates. This file supplies that contract by mapping it onto the
   tokens style.css already defines.

   Everything is scoped to .quote, .book and .assistant. Nothing here touches
   :root, so no existing page can be affected by it. Delete this file and
   quote/ to remove the test.

   Mapped BY ROLE, not by name. The two systems collide semantically:
   ht-kit's --ink is body text on a light --paper; this site's --ink-* is a
   dark background ramp. Matching names would paint dark text on a dark
   background. Roles invert, names do not. */

.quote,
.book,
.assistant{

  /* ---- colour · roles inverted for this site's dark ground ----------- */
  --ink:         var(--fg);            /* body text   — was dark on light */
  --paper:       var(--bg);            /* page ground — was light         */
  --surface:     var(--surface-2);     /* raised panels: the pricing cards' surface */
  --muted:       var(--fg-quiet);      /* secondary text                  */
  --accent:      var(--ht-accent);     /* primary action fill             */
  --accent-ink:  var(--ink-0);         /* text ON the accent — inverted   */
  --rule:        var(--hairline);      /* decorative dividers             */

  /* Control borders. The contract asks for 3:1 against --paper. The
     name-alike (--border-loud, #3A3D44) gives only 2.7:1 on #0E0F11;
     --fg-meta (#8B8B8B) gives 5.6:1. Contrast wins over the name. */
  --rule-strong: var(--fg-meta);

  /* ---- type --------------------------------------------------------- */
  --font-utility: var(--font-sans);
  --font-body:    var(--font-sans);    /* assistant.css only; the other two
                                          inherit the page's font instead  */

  --step--1: var(--t-small);           /* 14px */
  --step-0:  var(--t-body);            /* 16px */
  --step-1:  var(--t-h3);              /* 20px */
  --step-2:  24px;                     /* {{ TOKEN ADDED }} book.css; no site step between 20 and 28 */
  --step-3:  var(--t-h2);              /* 28px */
  --step-4:  var(--t-h1);              /* clamp(36px,4.2vw,56px) */

  /* ---- space -------------------------------------------------------- */
  --space-1: var(--s-1);               /*  4px */
  --space-2: var(--s-2);               /*  8px */
  --space-3: var(--s-3);               /* 12px */
  --space-4: var(--s-4);               /* 16px */
  --space-5: var(--s-5);               /* 24px */
  --space-6: var(--s-6);               /* 32px */
  --space-7: var(--s-7);               /* 48px */
  --space-8: var(--s-8);               /* 64px */

  /* ---- form --------------------------------------------------------- */
  /* NOT a colour. quote.css uses --border as a LENGTH:
     calc(var(--border) * 3), border:var(--border) solid ...
     This site's :root defines --border as a colour (var(--ink-3)), which
     would make every one of those declarations invalid. Redefining it in
     :root would break borders on all nine existing pages, so the length
     lives here, scoped, and the site's colour token is left alone. */
  --border: 1px;

  /* This site is sharp-cornered (--r-0 0px, --r-1 2px). The contract's own
     0.625rem would read as a foreign component. */
  --radius: var(--r-1);                /* 2px */
  --radius-lg: 1.5rem;                 /* peek cards; no site equivalent */

  /* ---- measure and tap · no equivalent in style.css ------------------ */
  --measure: 36rem;                    /* {{ TOKEN ADDED }} reading width  */
  --tap:     44px;                     /* {{ TOKEN ADDED }} a11y tap floor */

  /* ---- motion ------------------------------------------------------- */
  --dur-fast: var(--t-fast);           /* 160ms */
  --dur-base: var(--t-base);           /* 240ms */
  --dur-slow: var(--t-slow);           /* 360ms. assistant.css only, for the
                                          pulse on the three thinking dots  */

  /* --ease, --lh-body already defined in style.css and compatible.
     --step-travel is self-defined by quote.css on .quote. */
}

/* Weights the site actually loads.
   Poppins comes down at 300, 400 and 500 only. The component's question
   headings are <h2>, so they inherit the browser's 700, and .field__label
   asks for 600. Both get synthesised into a fake bold, which reads heavier
   and blurrier than anything else on the page. These are overrides rather
   than edits to quote.css, which stays byte-identical to its source. */
.quote .step__q   { font-weight: var(--wt-light); }
.quote .field__label { font-weight: var(--wt-medium); }

/* Same fix for the booking picker. Its title is an <h1> and its questions
   <h2>, so both inherit the browser's 700; book.css asks for 600 on the
   field labels, the chosen slot, the done message and the no-times link.
   book.css loads after this file and sets those four itself, so they take
   one more class to win: the element each one sits inside. */
.book .book__title,
.book .step__q                { font-weight: var(--wt-light); }
.book .field .field__label    { font-weight: var(--wt-medium); }
.book .chosen .chosen__when,
.book .step .done__body,
.book .strip .strip__none a   { font-weight: var(--wt-medium); }

/* The picker's action buttons ("Book it", "Start again") in the site's
   solid white pill. Its hover fill slides up with a ::before over a <span>;
   the engine writes bare text into its buttons, so an overlay would cover
   the words. The same fill is drawn as a background instead, which sits
   under the text. No magnetic pull: nav.js only binds .btn--solid, and
   these are neither that class nor on the page when it runs. */
.book .btn {
  background: #E8E8EA linear-gradient(var(--bg), var(--bg)) no-repeat bottom / 100% 0;
  color: var(--ink-0);
  border: 1px solid currentColor;
  transition: color .4s var(--ht-ease), background-size .5s var(--ht-ease);
}
.book .btn:hover { color: var(--paper-0); background-size: 100% 100%; }
.book .btn:active { transform: translateY(1px); }
.book .btn.is-pending:hover { color: var(--ink-0); background-size: 100% 0; }
.book .btn:disabled:hover { color: var(--ink-0); background-size: 100% 0; }
/* book.css makes action buttons full width on phones; keep the label centred. */
.book .step__actions .btn { justify-content: center; }

/* No "Change" link beside the chosen day and time on the details step: Back,
   right under the form, already goes to the time and then the day. */
.book .chosen .chosen__change { display: none; }

/* No focus ring on the two things the engines focus for their own reasons.
   The component root carries tabindex -1 so a click on its padding keeps the
   keys inside it, and each step heading takes focus on a step change so a
   screen reader announces it. Neither can be reached with Tab, but Chrome
   switches to :focus-visible on the next key press, so pressing any key drew
   an outline round the whole demo or its heading. Every control inside,
   options, days, times, fields and buttons, keeps its ring. */
.quote:focus-visible,
.book:focus-visible,
.assistant .assistant__text:focus-visible,
.quote .step__q:focus-visible,
.book .step .step__q:focus-visible { outline: none; }

/* The picker's title ("Try demo"), a step up from the kit's 28px but kept
   well under the block heading beside it (--t-h1, 56px on a laptop), so the
   copy column keeps the lead. */
.book .book__title {
  font-size: clamp(32px, 2.8vw, 40px);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
}

/* The "What's it about?" choices as the site's secondary button
   (.btn--ghost): translucent pill, hairline-strong border, light text.
   book.css loads after this file and styles .book .option itself, so these
   take one more class: the options box each one sits in. The chosen one
   (next mode) fills white, so it reads as picked against the other two. */
.book .step__options .option {
  border-radius: var(--r-pill);
  padding: 16px 28px;
  background: rgba(20,21,24,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--paper-0);
  border: 1px solid var(--hairline-strong);
  box-shadow: none;
  font-family: var(--font-sans);
  font-weight: var(--wt-regular);
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.book .step__options .option:hover { background: rgba(36,38,43,0.7); }
.book .step__options .option:active { transform: translateY(1px); }
.book .step__options .option[aria-pressed="true"] {
  background: #E8E8EA;
  color: var(--ink-0);
  border-color: #E8E8EA;
}

/* Every picker step shares one grid cell, so the stack was always as tall as
   the tallest step, the details form, and on the two-week calendar Back sat
   far below it. Steps that are not showing come out of the flow, so the
   stack is the height of the one that is. They still fade and slide in and
   out on top of it. Reduced motion already swaps with display:none. */
.book.is-enhanced .book__steps { position: relative; }
.book.is-enhanced .step:not([data-pos="here"]) {
  position: absolute;
  inset: 0 0 auto 0;
}

/* Day strip on the left shoulder. Two things held it in. The strip is an
   <ol>, and this site has no list reset, so it kept the browser's 40px of
   left padding; the kit's own page resets lists in main.css. And each day
   sat centred in its seventh of the row. The padding goes, and each day
   starts its column, the button as wide as its circle so the letter stays
   centred over it. The first circle lines up with the heading and the
   spacing stays even. */
.book .strip .strip__row { margin: 0; padding: 0; }
.book .strip__row .strip__cell { justify-content: flex-start; }
.book .strip__cell .day { width: min(var(--day-size), 100%); }

/* Back as the site's secondary button (.btn--ghost): translucent pill,
   hairline-strong border, light text. It is hidden on the first step with the
   hidden attribute, so setting display here has to hand that back. */
.book .book__back {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  min-height: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: rgba(20,21,24,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--paper-0);
  font-family: var(--font-sans);
  font-weight: var(--wt-regular);
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--t-base) var(--ease);
}
.book .book__back:hover { background: rgba(36,38,43,0.7); color: var(--paper-0); }
.book .book__back:active { transform: translateY(1px); }
.book .book__back[hidden] { display: none; }

/* Same weight fix again for the assistant. assistant.css asks for 600 on the
   panel title and the field labels, and Poppins only comes down at 300, 400
   and 500, so both would be synthesised into a fake bold. assistant.css loads
   after this file, so each one takes the element's own class to win.

   Nothing else about the assistant is touched here. Its own scoped tokens
   (--a-bubble, --a-panel-w, --a-panel-h, --a-dim, --a-travel, --a-edge,
   --a-bar, --a-reveal, --a-think, --a-inline-h) are defined on .assistant by
   assistant.css and are the place to change its size or timing, not this
   file. */
.assistant .assistant__title { font-weight: var(--wt-medium); }
.assistant .assistant__label { font-weight: var(--wt-medium); }

/* Form controls do not inherit colour, font or size the way ordinary
   elements do: the browser gives them its own black Arial at about 13px
   whatever the page around them says. Each kit component styles the box
   — border, background, padding — and leaves the text to the UA, so on a
   dark field the typing came out black Arial in all three.

   Set here rather than in the kit files, which read the token contract
   only and stay byte-identical to their source. */
.quote .field__input,
.book .field__input,
.assistant .assistant__input,
.assistant .assistant__askfield {
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: var(--step-0);
}

.quote .field__input::placeholder,
.book .field__input::placeholder,
.assistant .assistant__input::placeholder,
.assistant .assistant__askfield::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* ---- AI Assistant, in the booking picker's styling -------------------- */
/* Same controls, same look: choices as the site's secondary pill, the send
   and open buttons as the white primary pill, fields and panel with the
   booking fields' 12px corners and size. assistant.css loads after this
   file with single-class selectors, so these carry the .assistant ancestor
   to win, and hand reduced motion back at the end. */
/* The panel framed like the Guided Quote's cards: their 24px corners and
   hairline border, in place of the kit's --rule-strong grey. */
.assistant .assistant__panel {
  border-radius: var(--radius-lg);
  border-color: var(--hairline-strong);
}

/* Bigger on the workflows page, through the kit's own size tokens: a taller
   stage (was clamp(24rem, 60vh, 34rem)) and a wider panel (was 22.5rem), so
   the four opening choices fit without scrolling inside the panel. On phones
   the kit already runs the panel the full width of the stage. */
.assistant.assistant--inline {
  --a-inline-h: clamp(32rem, 80vh, 42rem);
  --a-panel-w: 28rem;
}

/* More air between the choices (was 8px). */
.assistant .assistant__options { gap: var(--s-4); }

.assistant .assistant__option {
  border-radius: var(--r-pill);
  padding: 16px 28px;
  background: transparent;   /* takes the panel's surface, like the booking cells */
  color: var(--paper-0);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-sans);
  font-weight: var(--wt-regular);
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: background var(--t-base) var(--ease);
}
.assistant .assistant__option:hover { background: rgba(36,38,43,0.7); border-color: var(--hairline-strong); }
.assistant .assistant__option:active { transform: translateY(1px); }

.assistant .assistant__send,
.assistant .assistant__bubble {
  border-radius: var(--r-pill);
  padding: 16px 28px;
  background: #E8E8EA linear-gradient(var(--bg), var(--bg)) no-repeat bottom / 100% 0;
  color: var(--ink-0);
  border: 1px solid currentColor;
  font-family: var(--font-sans);
  font-weight: var(--wt-regular);
  font-size: 15px;
  letter-spacing: 0.01em;
  opacity: 1;
  justify-content: center;
  transition: color .4s var(--ht-ease), background-size .5s var(--ht-ease);
}
.assistant .assistant__send:hover,
.assistant .assistant__bubble:hover { color: var(--paper-0); background-size: 100% 100%; opacity: 1; }
.assistant .assistant__send:active,
.assistant .assistant__bubble:active { transform: translateY(1px); }
.assistant .assistant__send.is-pending:hover { color: var(--ink-0); background-size: 100% 0; }

.assistant .assistant__input,
.assistant .assistant__askfield {
  min-height: 56px;
  border-radius: 12px;
  padding: var(--s-4) var(--s-5);
  font-size: 17px;
}
.assistant .assistant__input--tall { min-height: 112px; }

/* On phones the kit shrinks the open button to a round icon; keep it round. */
@media (max-width: 767px) {
  .assistant .assistant__bubble { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant .assistant__option,
  .assistant .assistant__send,
  .assistant .assistant__bubble { transition: none; }
}

/* ---- Guided Quote, in the booking picker's styling -------------------- */
/* Same controls, same look as the picker: choices as the site's secondary
   pill that fills white once picked, Continue and Send as the white primary
   pill, the round arrows as the secondary pill, and fields with the booking
   fields' 12px corners and size. The peek cards and the progress bar are the
   quote's own and stay, with the cards' border brought down to the same
   hairline as the pills inside them. quote.css loads after this file, so
   each rule carries one more class than the one it replaces, and reduced
   motion is handed back at the end. */

/* Hidden cards stay hidden. quote.css gives every peek card display:flex,
   which outranks the browser's own [hidden] rule, so when the engine hides
   the questions to show the done card they stayed painted and the done card
   sat off to the side, out of view. */
.quote.is-peek .quote__steps .step[hidden] { display: none; }
/* Same for the round arrows, which the engine hides on the done card. */
.quote .quote__nav[hidden] { display: none; }

/* The done card on its own. The cards are 85% wide so the next one peeks
   in, but once the demo is finished there is nothing left to peek at, so
   the done card takes the full width, level with the progress bar above
   it. A little taller than the kit's 320px minimum too (was
   --space-8 * 5), so it holds its own under the full bar. */
.quote.is-peek .quote__steps:has(> .step--done:not([hidden])) { --peek-card: 100%; }
.quote.is-peek .quote__steps .step--done { min-height: calc(var(--space-8) * 6); }

/* Questions at the picker's size (was 28px). */
.quote .step .step__q { font-size: var(--step-2); }

.quote.is-peek .quote__steps .step { border-color: var(--hairline-strong); }

.quote .step__options .option {
  border-radius: var(--r-pill);
  padding: 16px 28px;
  background: transparent;   /* takes the panel's surface, like the booking cells */
  color: var(--paper-0);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-sans);
  font-weight: var(--wt-regular);
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.quote .step__options .option:hover { background: rgba(36,38,43,0.7); border-color: var(--hairline-strong); }
.quote .step__options .option:active { transform: translateY(1px); }
.quote .step__options .option:has(.option__input:checked) {
  background: #E8E8EA;
  color: var(--ink-0);
  border-color: #E8E8EA;
}

/* The picker's choices carry no number box, so the key goes. It was also
   where the keyboard focus ring landed, so the ring moves to the pill; the
   number keys still pick an option, since the engine reads the key press,
   not the box. */
.quote .option .option__key { display: none; }
.quote .step__options .option:has(.option__input:focus-visible) {
  outline: calc(var(--border) * 2) solid var(--accent);
  outline-offset: calc(var(--border) * 2);
}

/* Continue, Send this to us and Start again: the picker's white pill, with
   its hover fill drawn as a background for the same reason as .book .btn
   above (the engine writes bare text into its buttons). Right-aligned like
   the picker's Next. */
.quote .btn {
  background: #E8E8EA linear-gradient(var(--bg), var(--bg)) no-repeat bottom / 100% 0;
  color: var(--ink-0);
  border: 1px solid currentColor;
  transition: color .4s var(--ht-ease), background-size .5s var(--ht-ease);
}
.quote .btn:hover { color: var(--paper-0); background-size: 100% 100%; }
.quote .btn:active { transform: translateY(1px); }
.quote .btn.is-pending:hover,
.quote .btn:disabled:hover { color: var(--ink-0); background-size: 100% 0; }
.quote .step__actions { justify-content: flex-end; }
/* quote.css makes action buttons full width on phones; keep the label centred. */
.quote .step__actions .btn { justify-content: center; }

/* The round arrows as the secondary pill: translucent, hairline border. */
.quote .quote__nav .quote__nav-btn {
  background: transparent;   /* takes the panel's surface, like the booking cells */
  border: 1px solid var(--hairline-strong);
  color: var(--paper-0);
  transition: background var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.quote .quote__nav .quote__nav-btn:hover:not(:disabled) { background: rgba(36,38,43,0.7); border-color: var(--hairline-strong); }
.quote .quote__nav .quote__nav-btn:active:not(:disabled) { transform: translateY(1px); }

/* Fields as the booking details step's (workflows.css): taller, 12px
   corners, 17px type. The notes box keeps its extra height. */
.quote .step .field__input {
  min-height: 56px;
  border-radius: 12px;
  padding: var(--s-4) var(--s-5);
  font-size: 17px;
}
.quote .step .field__input--tall { min-height: 112px; }

@media (prefers-reduced-motion: reduce) {
  .quote .step__options .option,
  .quote .btn,
  .quote .quote__nav .quote__nav-btn { transition: none; }
}

/* ---------- tablet and phone: the demo as a carousel ----------
   Fixed-width cards running off the screen edge, sized down to fit, the
   arrows above on the right and the progress below. The frame reaches the
   screen edges with the gutter as padding, so the cards pass under it and
   stay lined up with the page. The card height is the tallest step's, the
   contact form, so that form sets how compact everything else must be. */
@media (max-width: 1023px) {
  .flow__demo.quote.is-peek {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    max-width: none;
  }
  .flow__demo.quote.is-peek .quote__frame {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .flow__demo.quote.is-peek .quote__nav {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }
  .flow__demo.quote.is-peek .quote__progress {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    width: 120px;
    margin: 0;
  }

  /* ".flow__demo" in front: quote.css loads after this file */
  .flow__demo.quote.is-peek .quote__steps { --peek-card: 340px; }
  .flow__demo.quote.is-peek .quote__steps:has(> .step--done:not([hidden])) { --peek-card: 100%; }
  .flow__demo.quote.is-peek .step { padding: 20px 22px; }
  .flow__demo.quote .step .step__q { font-size: 18px; line-height: 1.3; }
  .flow__demo.quote .step__options { gap: 8px; }
  .flow__demo.quote .step__options .option { min-height: 46px; padding: 10px 18px; font-size: 14px; }
  .flow__demo.quote .field { margin-bottom: 10px; gap: 4px; }
  .flow__demo.quote .field__label { font-size: 13px; }
  .flow__demo.quote .step .field__input { min-height: 44px; padding: 8px 16px; font-size: 15px; }
  .flow__demo.quote .step .field__input--tall { min-height: 96px; }
  .flow__demo.quote .step__actions { margin-top: 12px; }
  .flow__demo.quote .quote__small { font-size: 13px; }
}

@media (max-width: 767px) {
  .flow__demo.quote.is-peek .quote__steps { --peek-card: 300px; }
  /* Swiping moves between the cards here */
  .flow__demo.quote.is-peek .quote__nav { display: none; }
}