/* TrustThisCar - additions for the fault code pages.
   Loaded AFTER the site stylesheet, which supplies the tokens, the 720px
   column, the header, the footer, .btn, .card and the table rules. Nothing in
   here redefines those: the code pages have to look like the rest of the site,
   not like a second site living at /dtc/. */

:root {
  --bad: #b3261e;
  --good: #0f7b4f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bad: #e2695f;
    --good: #1fa96c;
  }
}

/* breadcrumbs */
.crumbs { font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { margin: 0 6px; }

/* the answer card, first thing under the h1 */
.answer { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 20px 0 28px; }
.answer > p { margin: 0 0 16px; }
.facts {
  display: grid; gap: 14px 20px; margin: 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.facts div { min-width: 0; }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.facts dd { margin: 0; font-weight: 600; font-size: 16px; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: var(--muted); }
.sev-1, .sev-2 { background: var(--good); }
.sev-3 { background: var(--warn); }
.sev-4, .sev-5 { background: var(--bad); }

/* cost table: the site already styles table, th and td */
table.costs { font-variant-numeric: tabular-nums; }
table.costs caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 6px; }
table.costs td.total { font-weight: 600; }
.table-scroll { overflow-x: auto; margin: 16px 0; }
.table-scroll table { margin: 0; min-width: 480px; }

/* code lists */
.code-list { list-style: none; padding: 0; margin: 16px 0; }
.code-list li { margin: 0; border-bottom: 1px solid var(--line); }
.code-list a { display: flex; gap: 14px; align-items: baseline; padding: 11px 2px; text-decoration: none; color: var(--ink); }
.code-list a:hover { background: rgba(127,127,127,.06); }
.code-list b { color: var(--accent); min-width: 62px; font-variant-numeric: tabular-nums; }
.code-list span { color: var(--muted); font-size: 15px; }

/* the used car buyer block and its call to action */
.buyer { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 8px; }
.cta { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; padding: 18px 20px; margin: 20px 0; }
.cta p { margin-top: 0; }

/* faq */
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); margin: 10px 0 2px; }

.cat-list { list-style: none; padding: 0; }
.cat-list li { margin: 0 0 14px; }
.cat-list a { font-weight: 600; text-decoration: none; }
.cat-list a:hover { text-decoration: underline; }
.cat-list p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.count { color: var(--muted); font-size: 14px; }