/* ---------------------------------------------------------------------------
   Tyre Doctor
   ---------------------------------------------------------------------------
   A standalone sheet, loaded only by tyre-doctor.aspx, for the same reason
   knowledge-hub.css is: main.css is shared by every page on the site, so
   anything put there can regress anything. This reverts by removing one
   <link>. Everything is prefixed .td-.

   Register the file in EcommerceBase.Site.csproj or the deploy publishes the
   markup and leaves the stylesheet behind.

   Two states share this sheet. The page opens as a piece about asking a
   question; once one is asked the hero and the folds below collapse and the
   conversation takes the page. Nothing is loaded twice - .td--talking is set
   on the root and the rest follows from it.
   --------------------------------------------------------------------------- */

/*
 * The same tokens knowledge-hub.css uses, to the value.
 *
 * These two are the only bespoke pages on the site and they sit one click
 * apart, so a reader moving between them should not be able to tell that
 * two people wrote them. Anything changed here has to be changed there.
 */
.td {
  --td-red: #ff0801;
  --td-red-dark: #d40600;
  --td-ink: #202020;
  --td-body: #5b6068;
  --td-soft: #878d97;
  --td-line: #e9ebf0;
  --td-grey: #f5f6f8;
  --td-head: "Montserrat", "Inter", Helvetica, Arial, sans-serif;
  --td-sans: "Inter", Helvetica, Arial, sans-serif;
  --td-wrap: 1500px;

  font-family: var(--td-sans);
  color: var(--td-body);
  background: #fff;
}
.td *,
.td *::before,
.td *::after { box-sizing: border-box; }

/* main.css underlines links on hover; nothing here that behaves like a button
   or a card should pick that up. The prose links opt back in. */
.td a,
.td a:hover,
.td a:focus { text-decoration: none; }
.td-trust__links a:hover,
.td-src__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.td__wrap {
  width: 100%;
  max-width: var(--td-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================= the opening */

/*
 * The banner is the site's own .hero-help, out of main.css - the same one
 * Tyres Near Me wears. Nothing is restyled here: a copy would drift the first
 * time that component was touched. Only the photograph is set, the way the
 * CMS blocks set theirs, and it is set in the markup so it can be swapped
 * without a deploy.
 */

/* The photograph in the banner's right-hand slot, set per page in the markup
   the way the CMS blocks set theirs. */
.td-hero .hero-help__wrap::after { background-image: var(--td-hero-photo); }

/*
 * Two things this page does not want, hidden the way Tyres Near Me hides the
 * first of them.
 *
 * The breadcrumb is an empty grey strip between the nav and the banner - one
 * word, "Home", and a rule under it, for a page one click from everywhere.
 *
 * The corner widget is this same assistant. Offering it in a bubble on the
 * page built for it is the same conversation twice, and the two keep separate
 * histories, so answering in one and then the other loses the thread.
 */
body:has(.td) .breadcrumb,
body:has(.td) #tyx-host { display: none !important; }

/* ------------------------------------------------------------- the asking */

/*
 * One opening, ranged left.
 *
 * It was a centred card on white with the steps in a grey band of their own
 * below it, which read as two openings stacked. This is one: heading, lead,
 * the box, three questions to borrow, the three steps, and what it costs -
 * all on one measure, all starting at the same left edge, so the eye goes
 * down the page rather than back and forth across it.
 */
.td-open { position: relative; padding: 46px 0 56px; background: #fff; }
.td-open__wrap { position: relative; max-width: 1150px; }
/* the measure that suits a column of prose is too narrow to hold a
   conversation and a rail, so the page widens once there is one */
.td--talking .td-open__wrap { max-width: 1280px; }

/*
 * In the app, the page is the app.
 *
 * The headline and its line under it are the pitch: they belong to the page
 * that is trying to get you to ask something. Once you have asked, they are a
 * screenful of white above the answer you are trying to read.
 */
.td--talking .td-open { padding: 16px 0 26px; }
.td--talking .td-open__title,
.td--talking .td-open__sub { display: none; }

.td--talking .td-open__sub { margin-bottom: 16px; font-size: 14.5px; }

/* one eyebrow treatment for the opening: a red rule, then spaced capitals */
.td-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 0;
  color: #2a2d33;
  font-family: var(--td-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.td-eyebrow::before {
  content: "";
  flex: none;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--td-red);
}

.td-open__head { position: relative; margin: 0 0 30px; }
.td-open__say { position: relative; z-index: 1; }

.td-open__title {
  margin: 0 0 16px;
  padding: 0;
  color: #111214;
  font-family: var(--td-head);
  font-size: clamp(32px, 4.3vw, 54px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.td-open__lead {
  margin: 0;
  max-width: 810px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--td-body);
}

/* ---- the box: a field and a button, on one white card ---- */

.td-ask {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
  padding: 14px;
  border: 1px solid #eceef1;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.07);
}
.td-ask__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 8px 0 22px;
  border: 1px solid #e3e6eb;
  border-radius: 999px;
  background: #fff;
}
.td-ask__field:focus-within {
  border-color: var(--td-red);
  box-shadow: 0 0 0 3px rgba(255, 8, 1, 0.1);
}
.td-ask__icon { flex: none; display: inline-flex; color: #111214; }
.td-ask__icon svg { width: 24px; height: 24px; }
.td .td-ask__input { box-sizing: border-box; }
.td-ask__input {
  flex: 1;
  min-width: 0;
  display: block;
  height: 44px;
  padding: 11px 4px;
  border: 0;
  background: transparent;
  font-family: var(--td-sans);
  font-size: 17px;
  line-height: 22px;
  color: var(--td-ink);
  resize: none;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.td-ask__input:focus { outline: none; }
.td-ask__input::placeholder { color: #767c86; }
.td-ask__count {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--td-soft);
}

.td-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--td-red);
  color: #fff;
  font-family: var(--td-head);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}
.td-go:hover { background: var(--td-red-dark); }
.td-go[disabled] { opacity: 0.55; cursor: default; }
.td-go__arrow { font-size: 20px; line-height: 1; }

/* ---- six questions to borrow ---- */

.td-try { position: relative; z-index: 1; margin: 0 0 30px; }
/* scoped to the opening: the conversation's "Ask next" buttons and the topic
   cards below are .td-seed too, and keep their own size */
.td-seeds {
  display: grid;
  gap: 14px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .td-seeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .td-seeds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.td-seed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--td-sans);
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--td-ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.td-seed svg { width: 17px; height: 17px; flex: none; color: var(--td-soft); }
.td-seed:hover { border-color: var(--td-red); color: var(--td-red); }
/* the contact page, from a reply: a link that looks like the suggestions beside it */
a.td-seed--go { font-weight: 600; text-decoration: none; }
.td a.td-seed--go:hover,
.td a.td-seed--go:focus { color: var(--td-red); text-decoration: none; }
.td-seed:hover svg { color: var(--td-red); }

.td-try .td-seed {
  width: 100%;
  height: 100%;
  min-height: 56px;
  gap: 12px;
  padding: 12px 18px 12px 20px;
  border-color: #e3e6eb;
  font-size: 15px;
  line-height: 1.3;
  /* a question longer than its pill wraps inside it rather than running
     under the chevron; the row's pills keep one height between them */
  white-space: normal;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.td-try .td-seed span { flex: 1; min-width: 0; }
.td-try .td-seed svg { width: 20px; height: 20px; color: #111214; }
.td-try .td-seed .td-seed__chev { width: 18px; height: 18px; color: #3a3f47; }
.td-try .td-seed:hover { border-color: var(--td-red); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06); }
.td-try .td-seed:hover svg { color: var(--td-red); }

/* ---- how it works: three cards on a rule ---- */

.td-how {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  padding: 32px 0 0;
  border-top: 1px solid #e3e6eb;
}
/*
 * Three cards: icon, a one-line heading, the text. The columns follow the
 * length of the copy - the middle point says the most - so on desktop the
 * three blocks of text come out the same height and no card is left with an
 * empty bottom.
 */
@media (min-width: 1000px) {
  .td-how { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr); }
}
.td-how__one {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 26px 26px;
  border: 1px solid #e9ebef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
}
.td-how__one > div { display: contents; }
.td-how__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdeaea;
  color: var(--td-red);
}
.td-how__icon svg { width: 22px; height: 22px; }
.td-how__one h3 {
  margin: 16px 0 8px;
  padding: 0;
  color: #111214;
  font-family: var(--td-head);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.td-how__one p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--td-body); }
@media (max-width: 560px) {
  .td-how__one { padding: 20px 20px 22px; }
}

/* ---- and what it costs, on a grey strip ---- */

/*
 * One line on desktop: each point keeps to a single line and the three share
 * the row. Where the row is too narrow a whole point moves down, never half of
 * one; on a phone they stack and wrap normally.
 */
.td-marks {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  margin: 30px 0 0;
  padding: 16px 24px;
  border-radius: 14px;
  background: #f4f5f7;
  list-style: none;
  color: var(--td-body);
}
.td-marks li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; white-space: nowrap; }
.td-marks svg { width: 19px; height: 19px; flex: none; color: var(--td-red); }
@media (max-width: 759px) {
  .td-marks { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
  .td-marks li { font-size: 14px; line-height: 1.45; white-space: normal; }
}
.td-marks b { color: #111214; font-weight: 700; }

/* ============================================================ the answer */

/*
 * Once a question is asked the page stops being about asking one.
 *
 * The hero and the two folds under it go, the conversation takes their place,
 * and the composer stays within reach at the bottom of it. This is one page
 * either way: no navigation, so an answer never costs a page load and the
 * back button still leaves the site rather than the conversation.
 */
/*
 * Asking hides the pitch, not the page.
 *
 * The banner stays: without it the conversation began under the site nav with
 * nothing above it, and the page lost the one thing that said where you were.
 * What goes is the material that exists to get you to ask - the ask card, and
 * the three folds explaining what asking is for.
 *
 * The grey goes on the root at the same time, or the folds leave a band of
 * white between the conversation and the footer.
 */
.td--talking .td-open__head,
.td--talking .td-open__lead,
.td--talking .td-try,
.td--talking .td-how,
.td--talking .td-marks,
.td--talking .td-ask,
.td--talking [data-td-fold] { display: none; }


/*
 * The conversation sits on a sheet, not on the page.
 *
 * Loose on a grey background it read as three unrelated things floating in a
 * lot of nothing - a bubble, a paragraph, a box - with no edge to say where
 * the conversation stopped and the page resumed. A sheet with the composer
 * fixed in its foot gives it that edge, and gives a short exchange somewhere
 * to sit while it is still short.
 */
/*
 * The conversation fills the screen it is on.
 *
 * A sheet that grew with its contents left a short exchange marooned in the
 * middle of a page, with the footer visible under it - a chat that looked
 * like it had failed rather than one that had barely started. It now takes
 * the height the window has left after the site's header, the way every
 * other chat anyone has used does.
 *
 * The red wash behind it has gone with it: the rest of the site is white and
 * one grey, and there was no reason for this page to be pink.
 */
.td-talk {
  display: flex;
  margin: 0;
}
/*
 * The section carries the hidden attribute until a question is asked, and a
 * bare "display: flex" beats it - so the empty sheet, composer and all, sat
 * under the ask card on the page nobody had asked anything on yet.
 */
.td-talk[hidden] { display: none; }
@media (min-width: 900px) { .td-talk { padding: 24px 0 32px; } }

.td-talk__wrap { display: flex; flex: 1; min-width: 0; }

/*
 * The sheet is as tall as the conversation in it.
 *
 * It was given a minimum height so a first answer would not look lost, which
 * bought a screen of empty white between the answer and the composer instead
 * - worse, and it read as something that had failed to load. It grows with
 * the conversation and stops growing at a screenful, after which the log
 * scrolls inside it and the composer stays where it was.
 */
/*
 * The sheet stops at a screenful; the conversation scrolls inside it.
 *
 * Left to grow, a long exchange ran the page down past the footer and took
 * the composer with it - you had to scroll back up to ask the next thing,
 * and the rail beside it was three screens above. Capped, the composer is
 * always where it was and the log is the thing that moves.
 */
.td-sheet {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 420px;
  max-height: calc(100vh - 132px);
  border: 1px solid var(--td-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 22, 26, 0.09);
  overflow: hidden;
}

.td-talk__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: none;
  padding: 15px 20px;
  border-bottom: 1px solid var(--td-line);
  background: #fff;
}
@media (min-width: 700px) { .td-talk__bar { padding: 16px 26px; } }
.td-who { display: inline-flex; align-items: center; gap: 10px; }
.td-who b {
  font-family: var(--td-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--td-ink);
}
.td-who__mark,
.td-turn__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--td-red);
  flex: none;
}
/* the mark is a full-colour icon; knocked out to white it reads on the red */
.td-who__mark img,
.td-turn__mark img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.td-turn__mark { width: 32px; height: 32px; }
.td-turn__mark img { width: 18px; height: 18px; }

.td-restart {
  border: 1px solid var(--td-line);
  border-radius: 999px;
  padding: 8px 15px;
  background: #fff;
  font-family: var(--td-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--td-body);
  cursor: pointer;
}
.td-restart:hover { border-color: var(--td-red); color: var(--td-red); }

/* --------------------------------------------------------------- the log */

/*
 * The conversation sits at the bottom, against the composer.
 *
 * The log takes whatever height the sheet has spare, and stacks its contents
 * from the foot up - so a first question and its answer sit where the next
 * one will be typed, with the spare room as headroom above them. Left to
 * grow from the top it put a screen of white between the answer and the box,
 * which reads as something that failed to load.
 */
.td-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
  padding: 24px 20px;
  overflow-y: auto;
}
@media (min-width: 700px) { .td-log { padding: 28px 26px; } }
/* a thin rail rather than the browser's default slab, which is wider than
   the gap between the messages and the edge of the sheet */
.td-log { scrollbar-width: thin; scrollbar-color: #cfd4dd transparent; }
.td-log::-webkit-scrollbar { width: 8px; }
.td-log::-webkit-scrollbar-track { background: transparent; }
.td-log::-webkit-scrollbar-thumb { background: #cfd4dd; border-radius: 999px; }
.td-log::-webkit-scrollbar-thumb:hover { background: #b6bcc7; }

/*
 * The question is quiet; the answer is the thing to look at.
 *
 * A full-strength red bubble pulled the eye straight to the sentence the
 * reader had just written themselves, and left the answer - the part they
 * came for - reading as grey filler underneath it. The bubble keeps its
 * shape and its side of the sheet, and gives the colour back.
 */
.td-said {
  align-self: flex-end;
  min-width: 72px;
  max-width: min(76%, 520px);
  padding: 11px 16px;
  border-radius: 16px 16px 5px 16px;
  background: #f1f2f6;
  color: var(--td-ink);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}
/* anything long enough to be a sentence reads left, not centred */
.td-said--long { text-align: left; }
/* what it answered: full width, because an explanation needs the room */
.td-turn { display: flex; gap: 13px; align-items: flex-start; }
.td-turn__body { min-width: 0; flex: 1; padding-top: 3px; }
.td-turn__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--td-ink);
  overflow-wrap: anywhere;
}
.td-turn__text p { margin: 0 0 13px; padding: 0; }
.td-turn__text p:last-child { margin-bottom: 0; }
.td-turn__text b { color: var(--td-ink); font-weight: 700; }

/*
 * A list the model wrote as plain lines, drawn as a list.
 *
 * It writes "Load index (e.g. 91): the maximum load the tyre can carry" one
 * line under another. Run together as a paragraph they were a wall; ruled and
 * indented, with the thing being named in bold, they can be scanned - which is
 * what anyone does with a list of five markings.
 */
.td-turn__list {
  display: grid;
  gap: 0;
  margin: 0 0 13px;
  padding: 0;
  list-style: none;
}
.td-turn__list:last-child { margin-bottom: 0; }
.td-turn__list li {
  padding: 9px 0 9px 15px;
  border-left: 2px solid var(--td-line);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--td-body);
}
.td-turn__list li:hover { border-left-color: #d3d8e0; }
.td-turn__list b {
  display: block;
  color: var(--td-ink);
  font-weight: 700;
}
/* a plain run of lines has nothing to name, so it takes a marker instead */
.td-turn__list--plain li {
  position: relative;
  padding-left: 20px;
  border-left: 0;
}
.td-turn__list--plain li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--td-red);
}

/* thinking: three dots that do not pretend to be progress */
.td-wait { display: inline-flex; gap: 5px; padding: 7px 0; }
.td-wait i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c3c8d2;
  animation: td-bob 1.25s infinite ease-in-out;
}
.td-wait i:nth-child(2) { animation-delay: 0.16s; }
.td-wait i:nth-child(3) { animation-delay: 0.32s; }
@keyframes td-bob {
  0%, 66%, 100% { opacity: 0.35; transform: translateY(0); }
  33%           { opacity: 1;    transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .td-wait i { animation: none; opacity: 0.6; }
}

/* ------------------------------------------------------ things it shows */

.td-block { margin-top: 14px; }
.td-block__label {
  margin: 0 0 9px;
  font-family: var(--td-head);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--td-soft);
}

/* the car */
.td-veh {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--td-line);
  border-radius: 12px;
  background: #fff;
}
.td-plate {
  display: inline-flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #11175c;
  font-family: var(--td-head);
  flex: none;
}
.td-plate u {
  display: flex;
  align-items: center;
  padding: 0 5px;
  background: #11175c;
  color: #fbd424;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.td-plate s {
  padding: 5px 9px;
  background: #fbd424;
  color: #11175c;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.td-veh b { display: block; color: var(--td-ink); font-size: 15px; }
.td-veh em { display: block; margin-top: 2px; font-size: 13px; font-style: normal; color: var(--td-soft); }

/* the sizes that fit, when more than one does */
.td-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.td-size {
  padding: 10px 15px;
  border: 1px solid var(--td-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--td-sans);
  font-size: 14px;
  color: var(--td-ink);
  cursor: pointer;
  text-align: left;
}
.td-size:hover { border-color: var(--td-red); color: var(--td-red); }
.td-size em { display: block; font-style: normal; font-size: 12px; color: var(--td-soft); }
.td-size:hover em { color: inherit; }

/* the tyres */
.td-tyres {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .td-tyres { grid-template-columns: 1fr 1fr; } }

/*
 * The same card the results page draws, at chat size.
 *
 * Border, radius and shadow are the results page's own tokens, and the EU
 * label wears the colour that page gives each measure, so a tyre here looks
 * like the tyre they will land on when they follow it through.
 */
.td-tyre {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 28, 29, 0.05), 0 3px 10px rgba(27, 28, 29, 0.06);
  color: inherit;
  min-width: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.td-tyre:hover {
  border-color: #d9dde4;
  box-shadow: 0 2px 4px rgba(27, 28, 29, 0.05), 0 10px 24px rgba(27, 28, 29, 0.1);
  transform: translateY(-1px);
}
.td-tyre__pic-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 68px;
  height: 80px;
  border-radius: 8px;
  background: var(--td-grey);
}
.td-tyre__pic { width: 58px; height: 68px; object-fit: contain; mix-blend-mode: multiply; }
.td-tyre__of { min-width: 0; flex: 1; }
.td-tyre__brand {
  display: block;
  font-family: var(--td-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--td-soft);
}
.td-tyre__model {
  display: block;
  margin-top: 1px;
  color: var(--td-ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}
.td-tyre__spec { display: block; margin-top: 3px; font-size: 12.5px; color: var(--td-soft); }
.td-tyre__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.td-tyre__price { font-family: var(--td-head); font-size: 18px; font-weight: 800; color: var(--td-ink); }
.td-tyre__price em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--td-soft); }
.td-tyre__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--td-soft);
  white-space: nowrap;
}
.td-tyre__stars svg { width: 13px; height: 13px; color: #f2a900; }
.td-tyre__stars b { color: var(--td-ink); font-size: 13px; }
.td-tyre__stars-n { margin-left: 2px; }
.td-tyre__fit { display: block; margin-top: 7px; font-size: 12px; color: var(--td-soft); }

/* the EU label, in the results page's colours for each measure */
.td-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.td-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.td-badge b { font-weight: 800; }
.td-badge--wet   { background: #e6f1f8; color: #0071b3; }
.td-badge--fuel  { background: #e4f5ea; color: #128a3e; }
.td-badge--noise { background: #edecf6; color: #5a57a6; }

/* the previous card's grades, for a conversation saved before the badges
   changed and restored after - drawn the same way, so nothing looks broken */
.td-grades { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; font-size: 10.5px; font-weight: 600; }
.td-grades > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #e6f1f8;
  color: #0071b3;
  white-space: nowrap;
}
.td-grades > span:nth-child(2) { background: #e4f5ea; color: #128a3e; }
.td-grade { font-style: normal; font-weight: 800; }

/* the way through to the site */
.td-through {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--td-red);
  color: #fff;
  font-family: var(--td-head);
  font-size: 14px;
  font-weight: 800;
}
.td-through:hover { background: var(--td-red-dark); color: #fff; }

/* the guides an answer came from */
.td-srcs { display: grid; gap: 8px; }
.td-src {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--td-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
}
.td-src:hover { border-color: var(--td-red); }
.td-src__n {
  flex: none;
  width: 22px;
  font-family: var(--td-head);
  font-size: 12px;
  font-weight: 800;
  color: var(--td-red);
  padding-top: 1px;
}
.td-src__link { display: block; color: var(--td-ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.td-src__why { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--td-soft); }

/* the fitting centres */
.td-garages { display: grid; gap: 8px; }
.td-garage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--td-line);
  border-radius: 10px;
  background: #fff;
}
.td-garage b { color: var(--td-ink); font-size: 14.5px; }
.td-garage em { font-style: normal; font-size: 13px; color: var(--td-soft); white-space: nowrap; }

/* what it suggests asking next */
.td-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* something went wrong, said plainly */
.td-sorry {
  padding: 13px 15px;
  border: 1px solid #f3d2ce;
  border-radius: 12px;
  background: #fdf4f3;
  font-size: 14.5px;
  color: #8a2f24;
}

/* ------------------------------------------------------------- composing */

/*
 * The composer belongs to the sheet, not to the page under it.
 *
 * Loose beneath the conversation it read as a third unrelated box. It is now
 * the sheet's foot: its own tinted strip, a rule above it, and the small
 * print sitting inside that strip rather than floating below everything.
 */
.td-compose {
  flex: none;
  padding: 13px 16px 12px;
  border-top: 1px solid var(--td-line);
  background: #fbfcfd;
}
@media (min-width: 700px) { .td-compose { padding: 14px 22px 13px; } }

.td-compose__field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 5px 5px 8px;
  border: 1.5px solid #d8dde5;
  border-radius: 26px;
  background: #fff;
}
/*
 * The field takes the row; the button sits at the end of it.
 *
 * It shared a rule with the ask box until that box was rebuilt, and lost the
 * flex that made it grow - so the textarea shrank to its content and the send
 * button ended up floating in the middle of the field with a resize grip
 * showing behind it.
 */
.td-compose__input {
  flex: 1;
  min-width: 0;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 11px 10px;
  /* one line, whatever the script has measured - it once measured the box
     while hidden and set it to nothing */
  min-height: 44px;
  max-height: 150px;
  font-family: var(--td-sans);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--td-ink);
  background: transparent;
  resize: none;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.td-compose__input::placeholder { color: var(--td-soft); }
.td-compose__input:focus { outline: none; box-shadow: none; }
.td-compose__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--td-red);
  color: #fff;
  cursor: pointer;
}
.td-compose__go:hover { background: var(--td-red-dark); }
.td-compose__go[disabled] { background: #cdd2da; cursor: default; }
.td-compose__go svg { width: 18px; height: 18px; }

.td-compose__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin: 8px 6px 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #9aa0aa;
}
.td-compose__foot [data-td-count] { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  /* the count is the one that goes: the caveat is the one worth the room */
  .td-compose__foot [data-td-count] { display: none; }
}

/* ======================================================== below the fold */

/* one heading treatment, used by every section that has one */
.td-sec { max-width: 640px; margin: 0 0 30px; }
.td-sec__eyebrow {
  margin: 0 0 11px;
  color: var(--td-red);
  font-family: var(--td-head);
  font-size: 12.5px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.td-sec__title {
  margin: 0;
  padding: 0;
  color: var(--td-ink);
  font-family: var(--td-head);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.td-sec__lead { margin: 13px 0 0; font-size: 15.5px; line-height: 1.55; }

/* ------------------------------------------------------------------ trust */

/* the two links end this section, so it closes soon after them: the full
   54px under them, the paragraph spacing they inherited and the FAQ's own top
   padding came to 138px of white between the links and the next heading */
.td-trust { padding: 54px 0 30px; background: #fff; border-top: 1px solid var(--td-line); border-bottom: 1px solid var(--td-line); }
/* one column now the sidewall figure has gone */
.td-trust__grid { max-width: 760px; margin: 0 auto; text-align: center; }
.td-trust__say .td-sec__title { margin-bottom: 16px; }
.td-trust__say p { margin: 0 0 14px; font-size: 16px; line-height: 1.62; }
.td-trust__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
/* every paragraph here gets 14px underneath (.td-trust__say p) and 15px of
   padding (main.css p); the links row is the last thing, so neither */
.td-trust__say .td-trust__links { margin: 4px 0 0; padding-bottom: 0; }
.td-trust__links a { color: var(--td-red); font-weight: 700; }



/* -------------------------------------------------------------------- faq */

/*
 * The tools pages' FAQ and closing block, value for value, so the two read as
 * the same site. Those pages set their styles inline in CMS blocks; the
 * numbers here are copied from them rather than guessed.
 */
.td-faq { padding: 40px 0 60px; background: #fff; }
.td-faq__wrap { max-width: 860px; }
.td-faq__title {
  margin: 0 0 16px;
  padding: 0;
  color: #1b1d22;
  font-family: var(--td-head);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.td-faq__list { display: grid; gap: 12px; margin: 0; }
.td-faq__one {
  border: 1px solid #e4e6eb;
  border-radius: 14px;
  background: #fff;
}
.td-faq__one summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.td-faq__one summary::-webkit-details-marker { display: none; }
.td-faq__one summary::marker { content: ""; }
.td-faq__one summary:focus-visible { outline: 2px solid var(--td-red); outline-offset: 2px; border-radius: 14px; }
.td-faq__one h3 {
  margin: 0;
  padding: 0;
  color: #1b1d22;
  font-family: var(--td-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.td-faq__chev { flex: none; display: inline-flex; color: var(--td-red); transition: transform 0.25s ease; }
.td-faq__chev svg { width: 18px; height: 18px; }
.td-faq__one[open] .td-faq__chev { transform: rotate(180deg); }
.td-faq__one p {
  margin: -8px 0 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #51555f;
}

.td-cta {
  margin: 28px 0 0;
  padding: 30px 26px;
  border-radius: 18px;
  background: #0c0c0d;
  text-align: center;
}
.td-cta h2 {
  margin: 0 0 6px;
  padding: 0;
  color: #fff;
  font-family: var(--td-head);
  font-size: 22px;
  font-weight: 800;
}
.td-cta p {
  max-width: 520px;
  margin: 0 auto 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.td-cta__go {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: 40px;
  background: var(--td-red);
  color: #fff;
  font-family: var(--td-head);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.td-cta__go:hover { background: var(--td-red-dark); }

.td__small {
  max-width: 640px;
  margin: 28px auto 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--td-soft);
}

/* ------------------------------------------------------------------ phone */

/*
 * On a phone the box is the page.
 *
 * Under the banner, the lead paragraph was pushing the thing this page exists
 * for a screen and a half down. It goes: the card asks the same question in
 * its own heading. The field starts shorter too - it grows as anyone types.
 */
@media (max-width: 620px) {
  .td-open { padding: 24px 0 34px; }
  .td-open__lead { display: none; }

  /* the card stacks: the field on top, the button under it, both full width -
     a pill field with a button beside it does not fit a phone */
  .td-open__title { font-size: 32px; }
  /* the eyebrow stays on one line: a shorter rule and tighter spacing, or
     the last word drops to a line of its own */
  .td-eyebrow { gap: 10px; font-size: 11px; letter-spacing: 0.14em; }
  .td-eyebrow::before { width: 26px; }
  /*
   * On a phone: a plain field and the button under it. No white card round
   * the two (a card holding a bordered field was a box in a box), and no
   * search icon - it sat off-centre and pushed "reg..." onto a line of its
   * own; without it the placeholder fits on one line. The field is one line
   * tall and grows as they type (tyre-doctor.js wire()); the desktop rule's
   * red ring shows on it while typing.
   */
  .td-ask { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .td-ask__field { min-height: 0; gap: 0; padding: 0 4px 0 0; border-color: #d6dae0; border-radius: 14px; align-items: flex-end; }
  .td-ask__icon { display: none; }
  .td-ask__input { height: 52px; max-height: 148px; padding: 15px 0 15px 16px; font-size: 16px; line-height: 22px; }
  .td-ask .td-go { width: 100%; height: 52px; }
  /* a question that wraps sits in a rounded box, not a stretched pill */
  .td-try .td-seed { min-height: 52px; padding: 11px 16px 11px 18px; border-radius: 16px; font-size: 15px; }

  .td-talk { padding: 14px 0 30px; }
  .td-sheet { border-radius: 10px; min-height: 300px; }
  .td-said { max-width: 88%; }
  .td-turn { gap: 10px; }

  /*
   * On a phone the conversation has the whole width.
   *
   * Page gutters, sheet padding and a 32px mark beside every answer left a
   * tyre card 250px wide on a 375px screen. The frame runs edge to edge, the
   * log's padding comes in, and the mark goes: the answer is the thing on
   * the left and the question is the bubble on the right, which is all the
   * telling apart a phone needs.
   */
  .td--talking .td-open__wrap { padding-left: 0; padding-right: 0; }
  .td--talking .td-work { border-left: 0; border-right: 0; border-radius: 0; }
  .td--talking .td-rail { padding: 18px 16px; }
  .td-talk__bar { padding: 13px 16px; }
  .td-log { padding: 18px 14px; gap: 20px; }
  .td-turn__mark { display: none; }
  .td-turn__body { padding-top: 0; }
  .td-compose { padding-left: 12px; padding-right: 12px; }

  /* thumbs, not pointers: nothing tappable under 36px, and the suggestion
     pills may wrap rather than run off the edge */
  .td-restart,
  .td-rail__edit { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  .td-seed { white-space: normal; }
  .td-tyre__foot { flex-wrap: wrap; }

  .td-trust { padding: 40px 0 24px; }
  .td-faq { padding: 30px 0 44px; }
  .td-sec { margin-bottom: 22px; }
  .td-faq__title { font-size: 22px; }
  .td-faq__one summary { padding: 16px; }
  .td-faq__one p { padding: 0 16px 16px; }
  .td-cta { padding: 26px 20px; }
}

/* ============================================================== the rail */

/*
 * Once there is a conversation the page becomes two columns: the conversation,
 * and the things that belong beside it. On anything narrower than a laptop the
 * rail follows the conversation instead, because the conversation is what the
 * page is for.
 */
.td-work { display: grid; gap: 20px; }
.td-work[hidden] { display: none; }
@media (min-width: 1060px) {
  .td-work { grid-template-columns: 268px minmax(0, 1fr); gap: 22px; align-items: start; }
}

.td-open__sub {
  margin: 0 0 26px;
  max-width: 60ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--td-body);
}
.td-open__sub[hidden] { display: none; }

.td-rail { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1060px) {
  /* it stays where it is while the page moves - the car it names is the
     thing you look back at, and it was scrolling away */
  .td-rail { position: sticky; top: 20px; }
}
.td-rail__card {
  padding: 18px;
  border: 1px solid var(--td-line);
  border-radius: 12px;
  background: #fff;
}
.td-rail__card[hidden] { display: none; }
.td-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.td-rail__head h3 {
  margin: 0;
  padding: 0;
  color: var(--td-ink);
  font-family: var(--td-head);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.td-rail__edit {
  padding: 6px 12px;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--td-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--td-body);
  cursor: pointer;
}
.td-rail__edit:hover { border-color: var(--td-red); color: var(--td-red); }

/* ---- the car it is talking about ---- */

.td-veh-card__id { display: flex; align-items: center; gap: 12px; }
.td-veh-card__id b {
  color: var(--td-ink);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.td-rail__facts {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.td-rail__facts li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--td-line);
  font-size: 13.5px;
  color: var(--td-body);
}
.td-rail__facts li:last-child { padding-bottom: 0; }
.td-rail__facts svg { width: 17px; height: 17px; flex: none; color: var(--td-soft); }

/* ---- what it is reading ---- */

.td-rail__why { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.td-rail__why li { display: flex; align-items: flex-start; gap: 11px; }
.td-rail__why svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--td-red); }
.td-rail__why span { font-size: 12.5px; line-height: 1.5; color: var(--td-body); }
.td-rail__why b {
  display: block;
  margin-bottom: 2px;
  color: var(--td-ink);
  font-size: 13.5px;
  font-weight: 700;
}

/* ---- and the pages that are not this one ---- */

.td-rail__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.td-rail__links li + li { border-top: 1px solid var(--td-line); }
.td-rail__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: inherit;
}
.td-rail__links a:hover b { color: var(--td-red); }
.td-rail__links svg { width: 18px; height: 18px; flex: none; color: var(--td-red); }
.td-rail__links span { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--td-soft); }
.td-rail__links b {
  display: block;
  color: var(--td-ink);
  font-size: 13.5px;
  font-weight: 700;
}
.td-rail__links i { flex: none; font-style: normal; font-size: 18px; color: var(--td-soft); }

/* ------------------------------------------------- the sidebar, on the left */

/*
 * What this conversation has turned up, beside the conversation.
 *
 * It used to be a column of four sentences about the assistant - true, but the
 * same four sentences whatever you asked, which is what a sidebar should never
 * be. It now fills as you go: the car, the guides it has cited, what it thinks
 * is worth asking next. There is no list of past chats because there is only
 * ever one conversation.
 */
.td-rail__top { margin-bottom: 14px; }
.td-rail__new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--td-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--td-ink);
  cursor: pointer;
}
.td-rail__new:hover { border-color: var(--td-red); color: var(--td-red); }
.td-rail__new svg { width: 16px; height: 16px; flex: none; }

/* ---- the guides it has cited, building up ---- */

.td-rail__cited { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.td-rail__cited li + li { border-top: 1px solid var(--td-line); }
.td-rail__cited a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  color: var(--td-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.td-rail__cited a:hover { color: var(--td-red); }
.td-rail__cited em {
  flex: none;
  font-family: var(--td-head);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: var(--td-red);
}

/* ---- what to ask next ---- */

.td-rail__next { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.td-rail__next button {
  display: block;
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--td-line);
  border-radius: 9px;
  background: #fff;
  font-family: var(--td-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--td-body);
  text-align: left;
  cursor: pointer;
}
.td-rail__next button:hover { border-color: var(--td-red); color: var(--td-red); }

.td-rail__note {
  margin: 2px 4px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--td-soft);
}

/* on a phone the conversation comes first; the sidebar follows it */
@media (max-width: 1059px) {
  .td-work { grid-template-columns: minmax(0, 1fr); }
  .td-rail { order: 2; }
  .td-talk { order: 1; }
  .td-rail__top { display: none; }
}

/* ====================================================== the app, in the grey */

/*
 * "Make this entire grey the full llm."
 *
 * The conversation was a bordered card sitting in the page flow, which is why
 * it kept reading as a widget bolted on rather than the thing the page is. The
 * whole region below the banner is now a full-bleed grey band with a hairline
 * top and bottom - the same treatment the trust and FAQ sections already use,
 * so it is this page's own vocabulary rather than an invention - and the app
 * sits in it: grey sidebar, white conversation, one hairline between them.
 *
 * The grey is what says the region is the app. The white is what makes the
 * answer readable. Both, not either.
 *
 * It wraps at 1440 and not at the viewport: edge-to-edge would be unlike every
 * other page on the site, which is the one thing this page must not be.
 */
.td--talking .td-open {
  padding: 0;
  background: var(--td-grey);
  border-top: 1px solid var(--td-line);
  border-bottom: 1px solid var(--td-line);
}
.td--talking .td-open__wrap {
  max-width: 1440px;
  padding-top: 18px;
  padding-bottom: 18px;
}

@media (min-width: 1060px) {
  /*
   * One frame, two panes, divided by a hairline - no gap, no radius, no
   * shadow. The pane edges are the structure; a card inside a card inside a
   * band is the "boxes in boxes" the rest of this site avoids.
   *
   * --td-top is measured, not guessed: the old rule subtracted a hard-coded
   * 132px, which is wrong the moment anything is added above the page.
   */
  .td--talking .td-work {
    grid-template-columns: 284px minmax(0, 1fr);
    /*
     * One row, exactly the frame's height.
     *
     * Left as "auto", the row grew to the taller pane's content - the rail
     * with all its cards, or a long transcript - and the panes' 100% heights
     * then resolved against that, so the sheet ran past the frame and the
     * composer was clipped off the bottom of it. A 1fr row with a zero
     * minimum is the frame's height and nothing else, and min-height: 0 on
     * the panes stops their content arguing.
     */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    height: max(560px, calc(100vh - var(--td-top, 200px) - 40px));
    height: max(560px, calc(100dvh - var(--td-top, 200px) - 40px));
    border: 1px solid var(--td-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }
  .td--talking .td-rail,
  .td--talking .td-talk { min-height: 0; }
  .td--talking .td-rail {
    position: static;
    height: 100%;
    padding: 18px 16px;
    border-right: 1px solid var(--td-line);
    background: var(--td-grey);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* inside the frame the sidebar cards lose their own edges - the pane is the
     edge, and a bordered card on a grey pane inside a bordered frame is three
     boxes deep */
  .td--talking .td-rail__card {
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--td-line);
    border-radius: 0;
    background: none;
  }
  .td--talking .td-rail__card:last-of-type { border-bottom: 0; }

  /* the sheet is the pane, so the pane wears no padding of its own */
  .td--talking .td-talk { min-width: 0; height: 100%; padding: 0; }
  .td--talking .td-talk__wrap { height: 100%; }
  /* the sheet is the pane now */
  .td--talking .td-sheet {
    max-height: none;
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/*
 * The conversation sits against the composer.
 *
 * The log fills the pane and its contents are pushed to the bottom of it, so a
 * first exchange sits where the next question will be typed with the spare
 * room as headroom above - rather than stranded at the top of a tall pane with
 * a screen of white under it.
 */
.td-log__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: auto;
}

/*
 * On a phone the sheet is a screenful and scrolls inside, as on a laptop.
 *
 * It used to grow with the conversation and stick the composer to the foot
 * of the page - but the site wraps every page in the mobile menu's
 * #mm-0.mm-page, which is overflow: hidden, and nothing inside that can
 * stick to the screen. So the sheet takes the height of the screen (dvh, so
 * the browser's disappearing address bar is accounted for), the log scrolls
 * within it and the composer sits at its foot, and opening the conversation
 * scrolls the frame to the top of the screen. The sidebar follows below.
 */
@media (max-width: 1059px) {
  .td--talking .td-open { padding: 0; }
  .td--talking .td-open__wrap { padding-top: 0; padding-bottom: 0; }
  .td--talking .td-work { height: auto; }
  .td--talking .td-talk { padding: 0; }
  .td--talking .td-sheet {
    max-height: none;
    min-height: 420px;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
  }
  .td-compose { padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
  /* the site's cookie bar covers the bottom of the screen until it is
     accepted, and on a phone that is where the composer is: the script
     measures the bar and the sheet keeps clear of it */
  .td--talking .td-sheet { box-sizing: border-box; padding-bottom: var(--td-under, 0px); }
  /* 16px or iOS zooms the page when the field takes focus */
  .td-compose__input { font-size: 16px; }
}

/* ------------------------------------------------------- the free-question gate */

/*
 * Five questions, then this in place of the composer.
 *
 * It replaces the box rather than disabling it: a field you can type into that
 * then refuses you is a worse way to be told, and a disabled box says nothing
 * about why.
 */
.td-gate { padding: 4px 2px 2px; }
.td-gate b {
  display: block;
  margin-bottom: 5px;
  color: var(--td-ink);
  font-family: var(--td-head);
  font-size: 15.5px;
  font-weight: 800;
}
.td-gate p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--td-body); }
.td-gate__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.td-gate .td-go { height: 44px; padding: 0 22px; font-size: 14.5px; }
.td-gate__in { font-size: 13.5px; font-weight: 600; color: var(--td-body); }
.td-gate__in:hover { color: var(--td-red); text-decoration: underline; text-underline-offset: 3px; }

/*
 * How many questions are left today, in the line under the box: a short bar
 * and the count, quiet beside the caveat, so the limit is never a surprise.
 */
.td-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--td-body);
  font-variant-numeric: tabular-nums;
}
/* centred in the foot: its baseline would otherwise come from the empty bar
   and sit it 2px below the caveat beside it */
.td-compose__foot .td-quota { align-self: center; }
.td-quota b { color: var(--td-ink); font-weight: 700; }
.td-quota--out b { color: var(--td-red); }
.td-quota a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.td-quota a:hover,
.td-quota a:focus { color: var(--td-red); }
.td-quota__bar {
  position: relative;
  flex: none;
  width: 30px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #e4e6eb;
}
.td-quota__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--td-red);
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { .td-quota__bar span { transition: none; } }
/* the answer was given without the model: say why, quietly */
.td-turn__note--allow { color: var(--td-body); }


/* ================================================ the answer, as it happens */

/*
 * The service now reports as it goes - a status while a tool runs, cards as
 * tools finish, the text a few words at a time - and everything below draws
 * that. Nothing here is a second design: the tokens, the radii and the type
 * are the ones the rest of the sheet uses.
 */

/* main.css does not honour the hidden attribute on everything; this sheet
   toggles it on counts, cards and the jump button, so it must */
.td [hidden] { display: none !important; }

/* ---- one line at the top of a new conversation ---- */

.td-intro {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--td-line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--td-soft);
}
.td-intro b { color: var(--td-ink); font-weight: 700; }

/* ---- what it is doing right now ---- */

.td-turn__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--td-body);
}
/* the status reads "Looking up AB12 CDE" and gets its own ellipsis, so the
   sentence never has to carry one */
.td-turn__status span::after { content: "\2026"; }
.td-spin {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #d9dde4;
  border-top-color: var(--td-red);
  animation: td-spin 0.8s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }

/* the text as it arrives, with a caret at the end of it */
.td-turn__text:empty { display: none; }
.td-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--td-red);
  animation: td-blink 1s steps(2, start) infinite;
}
@keyframes td-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .td-spin { animation: none; border-top-color: #d9dde4; }
  .td-caret { animation: none; }
}

/* ---- the cards, under the text ---- */

.td-turn__cards { display: grid; gap: 14px; }
.td-turn__cards:empty { display: none; }
.td-turn__text:not(:empty) ~ .td-turn__cards:not(:empty),
.td-turn__status:not([hidden]) ~ .td-turn__cards:not(:empty) { margin-top: 14px; }
.td-turn__cards .td-block { margin-top: 0; }

/* ---- what it checked ---- */

/*
 * "Looked up AB12 CDE · Found 82 tyres in 205/55 R16 · Read 3 guides", in a
 * quiet line under the answer. It is what makes the answer checkable: every
 * step names a thing on the screen - the car card, the tyres, the guides.
 */
.td-turn__trace {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--td-line);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--td-soft);
}
.td-turn__step { display: inline-flex; align-items: center; gap: 6px; }
.td-turn__step svg { width: 13px; height: 13px; flex: none; color: #128a3e; }

/* an answer that stopped early says so, and says why */
.td-turn__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--td-soft);
}

/* ---- when it could not answer ---- */

.td-sorry p { margin: 0 0 10px; }
.td-sorry a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.td-retry {
  padding: 8px 15px;
  border: 1px solid #e6b7b1;
  border-radius: 999px;
  background: #fff;
  font-family: var(--td-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--td-red);
  cursor: pointer;
}
.td-retry:hover { background: var(--td-red); border-color: var(--td-red); color: #fff; }

/* ---- send becomes stop while an answer is being written ---- */

.td-compose__go .td-ico-stop { display: none; }
.td--busy .td-compose__go .td-ico-send { display: none; }
.td--busy .td-compose__go .td-ico-stop { display: block; }
.td--busy .td-compose__go {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--td-red);
  color: var(--td-red);
}
.td--busy .td-compose__go:hover { background: #fff5f4; }
.td--busy .td-compose__go svg { width: 16px; height: 16px; }

/* ---- back to the latest, when they have scrolled up to re-read ---- */

.td-compose { position: relative; }
.td-jump {
  position: absolute;
  left: 50%;
  top: -44px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 22, 26, 0.12);
  font-family: var(--td-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--td-ink);
  white-space: nowrap;
  cursor: pointer;
  z-index: 2;
}
.td-jump svg { width: 14px; height: 14px; color: var(--td-red); }
.td-jump:hover { border-color: var(--td-red); }

/* ---- small things on the cards ---- */

.td-tyre__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f2f6;
  color: #5b6068;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}
.td-garage {
  align-items: flex-start;
  padding: 12px 14px;
  border-color: #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 28, 29, 0.05), 0 3px 10px rgba(27, 28, 29, 0.06);
}
.td-garage > span { min-width: 0; }
.td-garage__where {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.4;
  color: var(--td-soft);
}
/* the distance as a chip on the right, the way the finder shows it */
.td-garage em {
  flex: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--td-grey);
  font-size: 12px;
  font-weight: 600;
  color: var(--td-body);
}
.td-garages + .td-through { margin-top: 12px; }

/* ---- the rail: how this works, in three lines ---- */

.td-rail__how { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.td-rail__how li { display: flex; align-items: flex-start; gap: 10px; }
.td-rail__how svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--td-red); }
.td-rail__how span { font-size: 12.5px; line-height: 1.5; color: var(--td-body); }

/* ---- each new thing settles in, rather than appearing ---- */

.td-said,
.td-turn,
.td-turn__cards > .td-block,
.td-turn__trace,
.td-next { animation: td-in 0.28s ease-out both; }
@keyframes td-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .td-said, .td-turn, .td-turn__cards > .td-block, .td-turn__trace, .td-next { animation: none; }
}

/* ---- an empty conversation: a few ways in ---- */

.td-start { padding: 4px 0 0; }
.td-start .td-block__label { margin-bottom: 10px; }
.td-start .td-next { margin-top: 0; }


/* ======================================================= the chat, cleaner */

/*
 * Less to read around the conversation.
 *
 * The site footer's 50px top margin showed as a white band under the grey
 * frame. The header's New chat repeats the rail's wherever the rail sits
 * beside it. An empty conversation is greeted in the middle of the pane
 * rather than at its foot, and the greeting goes once something is asked.
 */
body:has(.td--talking) .mastfooter { margin-top: 0; }
@media (min-width: 1060px) { .td-talk__bar .td-restart { display: none; } }

.td-log__inner:not(:has(.td-said)) { margin-top: auto; margin-bottom: auto; }
.td-log__inner:has(.td-said) .td-intro { display: none; }

.td-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: 15px;
  color: var(--td-body);
}
.td-intro__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--td-red);
}
.td-intro__mark img { width: 27px; height: 27px; filter: brightness(0) invert(1); }
.td-intro h2 {
  margin: 0;
  padding: 0;
  color: #111214;
  font-family: var(--td-head);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.td-intro p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--td-body); }

.td-start { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.td-start .td-block__label {
  margin: 0;
  font-family: var(--td-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--td-soft);
}
.td-start .td-next { justify-content: center; }


/* ================================================= the chat, full screen */

/*
 * On a phone or tablet the conversation is the screen.
 *
 * Laid out in the page, the chat ended above the "More help" card and the
 * site footer, so scrolling the answer scrolled the page past it. Fixed to
 * the screen instead: over the site header, under the cookie bar (9999),
 * which the sheet already keeps clear of. The rail's links are for a screen
 * wide enough to show them beside the conversation; here they go.
 */
.td-back { display: none; }
@media (max-width: 1059px) {
  .td--talking .td-rail { display: none; }
  .td--talking .td-talk {
    position: fixed;
    inset: 0;
    z-index: 9990;
    padding: 0;
    background: #fff;
  }
  .td--talking .td-talk__wrap { height: 100%; }
  .td--talking .td-sheet {
    height: 100%;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  body:has(.td--talking) { overflow: hidden; }

  .td-talk__bar { justify-content: flex-start; gap: 6px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .td-talk__bar .td-restart { margin-left: auto; }
  .td-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--td-ink);
    cursor: pointer;
  }
  .td-back:hover { background: #f2f3f5; }
  .td-back svg { width: 24px; height: 24px; }
}


/* ------------------------------------------------ link-buttons stay white */

/*
 * A button drawn as a link - "Create a free account" on the question gate -
 * picked up the site's a:hover { color: #e70600 } from main.css, and its text
 * went red on its own red fill. Pinned white in every state.
 */
.td a.td-go,
.td a.td-through,
.td a.td-go:link,
.td a.td-through:link,
.td a.td-go:visited,
.td a.td-through:visited,
.td a.td-go:hover,
.td a.td-through:hover,
.td a.td-go:focus,
.td a.td-through:focus,
.td a.td-go:active,
.td a.td-through:active { color: #fff; }