/*
 * Symptom — a problem a driver has, answered, then routed to a fix.
 *
 * Loaded only on /services/{category}/problems/{symptom}/. Design source:
 * TP Services B.dc.html, the `isSymptom` template (desktop) and scene
 * `6 · Symptom` rendered at 390px (phone). Ledger: docs/services-fidelity.md §59.
 *
 * SCOPED UNDER .tp-services-page, like every sheet in this tree. Colours only
 * through the --tpl-* variables in locations.css :root. The action buttons are
 * the tree's `.tp-services-btn*` family in services.css, sized here.
 *
 * TYPE. Half-pixel sizes map to integer roles (design-system.md §3.4):
 * 10.5–12.5px → Caption 12; 13–13.5px → Body S 14; 15.5–16.5px → Body 16;
 * 19px → Body L 18; 46px → Heading 2 48. The section headings keep the
 * source's 26px — an integer, and 4px from either named neighbour (§59).
 *
 * BREAKPOINTS: ≤809px phone (the source switches at 840px; the repository's
 * Phone tier is 810); 810–1199px is the desktop layout, which reflows.
 */

.tp-services-page.tp-services-symptom {
  /* The sponsored unit's own blues, from the source (#C9DEF0 border, #EFF6FD
     wash). No token carries either; page-private, declared once here (owner,
     2026-10-08), as Top rated's golds are. */
  --tp-services-symptom-ad-line: #c9def0;
  --tp-services-symptom-ad-wash: #eff6fd;
  background: var(--tpl-white);
}

/* ------------------------------------------------------------- crumbs --- */

.tp-services-page .tp-services-symptom__crumbs-band {
  border-bottom: 1px solid var(--tpl-line);
  background: var(--tpl-surface-alt);
}

.tp-services-page .tp-services-symptom__crumbs {
  padding: 11px 18px;
}

.tp-services-page .tp-services-symptom__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 9px;
  list-style: none;
  color: var(--tpl-ink-soft);
  /* Source: 12.5px. */
  font-size: 12px;
}

/* A character of the trail, not an interface icon — the provider page's. */
.tp-services-page .tp-services-symptom__crumbs li + li::before {
  content: '›';
  margin-right: 6px;
  color: var(--tpl-ink-soft);
}

.tp-services-page .tp-services-symptom__crumbs a {
  color: var(--tpl-blue);
  text-decoration: none;
}

.tp-services-page .tp-services-symptom__crumbs a:hover,
.tp-services-page .tp-services-symptom__cities a:hover,
.tp-services-page .tp-services-symptom__related-links a:hover {
  text-decoration: underline;
}

.tp-services-page .tp-services-symptom__crumbs [aria-current='page'] {
  color: var(--tpl-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------- head --- */

.tp-services-page .tp-services-symptom__body {
  padding-top: 40px;
}

.tp-services-page .tp-services-symptom__title {
  max-width: 980px;
  margin: 0 0 16px;
  color: var(--tpl-ink);
  font-family: var(--tpl-font-head);
  /* Source: 700 40px / 1.16, -1px. */
  font-size: 40px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -1px;
  text-wrap: pretty;
}

/* "Can I keep driving?" — the copy's intro heading, between the H1 and the
   answer it introduces, so it sits close to the answer below it. */
.tp-services-page .tp-services-symptom__h2.tp-services-symptom__answer-title {
  margin: 8px 0 8px;
}

/* The paragraph an answer engine quotes. */
.tp-services-page .tp-services-symptom__lead {
  max-width: 980px;
  margin: 0 0 28px;
  color: var(--tpl-ink-secondary);
  /* Source: 19px / 1.75. Body L. */
  font-size: 18px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* --------------------------------------------------------- action card --- */

.tp-services-page .tp-services-symptom__fix {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 44px;
  border: 1px solid var(--tpl-line);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--tpl-white);
  box-shadow: 0 2px 12px rgba(1, 25, 50, 0.08);
}

.tp-services-page .tp-services-symptom__fix-copy {
  flex: 1;
  min-width: 0;
}

.tp-services-page .tp-services-symptom__fix-copy[hidden] {
  display: none;
}

.tp-services-page .tp-services-symptom__fix-now {
  color: var(--tpl-ink);
  /* Source: 600 15.5px / 1.4. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* The count's loading state: the Services skeleton bar (services.css) in the
   line's own box, so the sentence replaces it without moving anything. Inline
   and middle-aligned, its row is exactly one line tall. */
.tp-services-page .tp-services-symptom__fix-skeleton {
  display: inline-block;
  width: 340px;
  max-width: 100%;
  height: 13px;
  vertical-align: middle;
  background: var(--tpl-line);
  animation: tp-services-skeleton 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tp-services-page .tp-services-symptom__fix-skeleton {
    animation: none;
  }
}

.tp-services-page .tp-services-symptom__fix-actions {
  display: flex;
  flex: none;
  gap: 18px;
  /* Still on the right while the count is hidden or never arrives. */
  margin-left: auto;
}

/* The source's 44px action: 168px wide at least, 8px corners, 500 13.5px with
   .05em — sized here over the tree's button family. */
.tp-services-page .tp-site-button.tp-services-symptom__action {
  justify-content: center;
  min-width: 168px;
  height: 44px;
  border-radius: 8px;
  padding: 0 22px;
  /* Source: 500 13.5px. */
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* HELD WHILE THE COUNT IS PENDING (QA CT/4484005891 #24). Until fix-count
   returns, "See the shops" has no position and would open an empty results
   page, so it cannot be clicked. The look is the shared button's disabled
   state (site-design.css, button:disabled), which an <a> cannot take. The
   script removes the class when fix-count returns. Only where script runs:
   without it nothing would ever release the action. */
@media (scripting: enabled) {
  .tp-services-page .tp-services-symptom__fix_pending .tp-services-symptom__fix-actions {
    cursor: not-allowed;
  }

  .tp-services-page .tp-services-symptom__fix_pending .tp-site-button.tp-services-symptom__action {
    border-color: var(--tpl-line);
    background: var(--tpl-surface);
    color: var(--tpl-ink-faint);
    pointer-events: none;
  }
}

/* ----------------------------------------------------------- sections --- */

.tp-services-page .tp-services-symptom__sections {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-bottom: 48px;
}

.tp-services-page .tp-services-symptom__section {
  border-top: 1px solid var(--tpl-line);
  padding-top: 28px;
}

.tp-services-page .tp-services-symptom__h2 {
  margin: 0 0 12px;
  color: var(--tpl-ink);
  /* Source: 700 26px / 1.3, -.4px. Kept: an integer, between named roles. */
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
}

.tp-services-page .tp-services-symptom__p {
  margin: 0 0 14px;
  color: var(--tpl-ink-secondary);
  /* Source: 16.5px / 1.8. */
  font-size: 16px;
  line-height: 1.8;
  text-wrap: pretty;
}

.tp-services-page .tp-services-symptom__p:last-child {
  margin-bottom: 0;
}

.tp-services-page .tp-services-symptom__where {
  margin-bottom: 18px;
}

/* The copy's numbered steps and bullet lists, in the body's own type. Its
   **bold** lead-ins render as <strong> in the ink colour. */
.tp-services-page .tp-services-symptom__list {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--tpl-ink-secondary);
  font-size: 16px;
  line-height: 1.8;
}

.tp-services-page .tp-services-symptom__list:last-child {
  margin-bottom: 0;
}

.tp-services-page .tp-services-symptom__list li + li {
  margin-top: 8px;
}

.tp-services-page .tp-services-symptom__list strong,
.tp-services-page .tp-services-symptom__p strong {
  color: var(--tpl-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------- ad slot --- */

.tp-services-page .tp-services-symptom__ad {
  display: flex;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--tp-services-symptom-ad-line);
  border-radius: 12px;
  padding: 18px 22px 20px;
  background: var(--tp-services-symptom-ad-wash);
}

.tp-services-page .tp-services-symptom__ad-copy {
  flex: 1;
  min-width: 0;
}

.tp-services-page .tp-services-symptom__ad-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 8px;
}

.tp-services-page .tp-services-symptom__ad-label {
  margin: 0;
  color: var(--tpl-blue-strong);
  /* Source: 600 10.5px, .11em, uppercase. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tp-services-page .tp-services-symptom__ad-why {
  color: var(--tpl-ink-soft);
  /* Source: 11.5px. Caption. */
  font-size: 12px;
  text-decoration: none;
}

.tp-services-page .tp-services-symptom__ad-why:hover {
  text-decoration: underline;
}

.tp-services-page .tp-services-symptom__ad-name {
  margin-bottom: 5px;
  color: var(--tpl-ink);
  /* Source: 600 16.5px / 1.35. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.tp-services-page .tp-services-symptom__ad-line {
  color: var(--tpl-ink-secondary);
  /* Source: 13.5px / 1.65. */
  font-size: 14px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- cities --- */

.tp-services-page .tp-services-symptom__cities {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.9;
}

.tp-services-page .tp-services-symptom__cities li:not(:last-child)::after {
  content: '·';
  padding: 0 10px;
  color: var(--tpl-ink-faint);
}

.tp-services-page .tp-services-symptom__cities a {
  color: var(--tpl-blue);
  text-decoration: none;
}

/* ---------------------------------------------------------------- FAQ --- */

.tp-services-page .tp-services-symptom__faq {
  padding: 8px 0 52px;
}

.tp-services-page .tp-services-symptom__faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 72px;
}

.tp-services-page .tp-services-symptom__faq-kicker {
  margin-bottom: 20px;
  color: var(--tpl-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.tp-services-page .tp-services-symptom__faq-title {
  margin: 0;
  color: var(--tpl-ink);
  /* Source: 700 46px / 1.1, -1.5px. Heading 2. */
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  text-wrap: pretty;
}

.tp-services-page .tp-services-symptom__faq-item {
  border-bottom: 1px solid var(--tpl-line);
}

/* The open question sits on the soft surface, as the source draws it. */
.tp-services-page .tp-services-symptom__faq-item[open] {
  border-bottom-color: transparent;
  border-radius: 12px;
  background: var(--tpl-surface-alt);
}

.tp-services-page .tp-services-symptom__faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;
}

.tp-services-page .tp-services-symptom__faq-q::-webkit-details-marker {
  display: none;
}

.tp-services-page .tp-services-symptom__faq-q:focus-visible {
  outline: 2px solid var(--tpl-blue);
  outline-offset: -2px;
}

.tp-services-page .tp-services-symptom__faq-q-text {
  margin: 0;
  color: var(--tpl-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

/* The registry's chevron, turned to point down; up when open. */
.tp-services-page .tp-services-symptom__faq-chevron {
  display: inline-flex;
  flex: none;
  /* The source draws an 18x11 stroke chevron, 6px below the question's top.
     The registry glyph fills about half its box once turned, so the box is
     34px (glyph ~17x10.5) and the negative margins take back the empty part
     of the box: the glyph's top sits 6px down and its right edge on the row's
     padding, where the source puts them. */
  margin: -6px -8px -8px;
  color: var(--tpl-ink-soft);
  transform: rotate(90deg);
  transition: transform 200ms ease;
}

.tp-services-page .tp-services-symptom__faq-chevron svg {
  width: 34px;
  height: 34px;
}

.tp-services-page .tp-services-symptom__faq-item[open] .tp-services-symptom__faq-chevron {
  transform: rotate(-90deg);
}

.tp-services-page .tp-services-symptom__faq-a {
  margin-top: -14px;
  padding: 0 26px 26px;
}

.tp-services-page .tp-services-symptom__faq-a p {
  margin: 0;
  color: var(--tpl-ink-secondary);
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* The phone's open list; the desktop draws the accordion. */
.tp-services-page .tp-services-symptom__faq-flat {
  display: none;
}

/* ------------------------------------------------------------ related --- */

.tp-services-page .tp-services-symptom__related {
  border-top: 1px solid var(--tpl-line);
  background: var(--tpl-surface-alt);
}

.tp-services-page .tp-services-symptom__related-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 48px;
  padding-bottom: 56px;
}

.tp-services-page .tp-services-symptom__related-title {
  margin: 0 0 10px;
  color: var(--tpl-ink-soft);
  /* Source: 600 11.5px, .09em, uppercase. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tp-services-page .tp-services-symptom__related-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Source: 13.5px. */
  font-size: 14px;
}

.tp-services-page .tp-services-symptom__related-links li:not(:last-child)::after {
  content: '·';
  padding: 0 9px;
  color: var(--tpl-ink-faint);
}

.tp-services-page .tp-services-symptom__related-links a {
  color: var(--tpl-blue);
  text-decoration: none;
}

/* ------------------------------------------------------------- tablet --- */

/* NOT IN THE DESIGN SOURCE (its desktop is fixed at 1280px). Below the
   Desktop tier the FAQ heading moves above its list rather than squeezing a
   400px column beside it. */
@media (min-width: 810px) and (max-width: 1199px) {
  .tp-services-page .tp-services-symptom__faq-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

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

@media (max-width: 809px) {
  /* One line on the page's own gutter, cut at the edge as the source cuts it. */
  .tp-services-page .tp-services-symptom__crumbs-band {
    border-bottom: 0;
    background: transparent;
  }

  .tp-services-page .tp-services-symptom__crumbs {
    overflow: hidden;
    padding: 10px 20px 0;
  }

  .tp-services-page .tp-services-symptom__crumbs ol {
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
  }

  .tp-services-page .tp-services-symptom__body {
    padding-top: 16px;
  }

  .tp-services-page .tp-services-symptom__title {
    margin-bottom: 12px;
    /* Source: 700 ~30px. Heading 3 at the phone tier. */
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .tp-services-page .tp-services-symptom__lead {
    margin-bottom: 20px;
    /* Source: ~17px / 1.65. Body L at the phone tier. */
    font-size: 16px;
    line-height: 1.7;
  }

  /* The phone card gives the action a full-width row. */
  .tp-services-page .tp-services-symptom__fix {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 32px;
    padding: 16px;
  }

  .tp-services-page .tp-services-symptom__fix-now {
    font-size: 18px;
  }

  .tp-services-page .tp-services-symptom__fix-actions {
    gap: 8px;
    /* A column: an auto margin here would stop the row stretching. */
    margin-left: 0;
  }

  .tp-services-page .tp-site-button.tp-services-symptom__action {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 8px;
  }

  .tp-services-page .tp-services-symptom__sections {
    gap: 28px;
    margin-bottom: 36px;
  }

  /* No rules between sections on the phone. */
  .tp-services-page .tp-services-symptom__section {
    border-top: 0;
    padding-top: 0;
  }

  .tp-services-page .tp-services-symptom__h2 {
    margin-bottom: 10px;
    /* Source: 700 ~22px. Heading 5. */
    font-size: 22px;
    letter-spacing: 0;
  }

  .tp-services-page .tp-services-symptom__p {
    line-height: 1.7;
  }

  .tp-services-page .tp-services-symptom__ad {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  .tp-services-page .tp-services-symptom__ad .tp-site-button.tp-services-symptom__action {
    flex: none;
    width: 100%;
  }

  .tp-services-page .tp-services-symptom__cities {
    gap: 4px 0;
    line-height: 2;
  }

  .tp-services-page .tp-services-symptom__faq {
    padding: 0 0 36px;
  }

  .tp-services-page .tp-services-symptom__faq-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .tp-services-page .tp-services-symptom__faq-kicker {
    display: none;
  }

  .tp-services-page .tp-services-symptom__faq-title {
    /* Source: 700 ~22px. Heading 5. */
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .tp-services-page .tp-services-symptom__faq-list {
    display: none;
  }

  .tp-services-page .tp-services-symptom__faq-flat {
    display: block;
    margin: 0;
  }

  .tp-services-page .tp-services-symptom__faq-flat dt {
    margin: 0 0 6px;
    color: var(--tpl-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
  }

  .tp-services-page .tp-services-symptom__faq-flat dd {
    margin: 0 0 20px;
    color: var(--tpl-ink-secondary);
    font-size: 16px;
    line-height: 1.6;
  }

  .tp-services-page .tp-services-symptom__faq-flat dd:last-child {
    margin-bottom: 0;
  }

  .tp-services-page .tp-services-symptom__related-inner {
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-services-page .tp-services-symptom__faq-chevron {
    transition: none;
  }
}

/* ----------------------------------------------------------- disclaimer --- */

/* Closes the page (spec §3 item 10): supporting copy, Caption size. */
.tp-services-page .tp-services-symptom__disclaimer {
  padding-top: 24px;
  padding-bottom: 40px;
}

.tp-services-page .tp-services-symptom__disclaimer p {
  margin: 0;
  max-width: 820px;
  color: var(--tpl-ink-secondary);
  font-size: 12px;
  line-height: 1.6;
}