/* fault.css -- the fault-code section.
   Mobile-first on purpose: this section is read on a phone, outdoors, by someone standing
   next to a car that has just thrown a light. Big tap targets, high contrast, answer first. */

.fc-desc{display:block;font-size:1.05rem;font-weight:500;color:var(--faint,#9fb3c8);
  margin-top:.35rem;font-family:Inter,system-ui,sans-serif}

/* ---- the answer box: severity, what it is, can I drive it ---- */
.fc-answer{border:1px solid rgba(255,255,255,.10);border-left:4px solid var(--sev,#ffc53d);
  background:rgba(255,255,255,.035);border-radius:12px;padding:1.1rem 1.25rem;margin:1.5rem 0}
.fc-sev{display:inline-flex;align-items:center;gap:.5rem;font-family:"Chakra Petch",sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
  color:var(--sev,#ffc53d);margin-bottom:.6rem}
.fc-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--sev,#ffc53d);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sev,#ffc53d) 22%,transparent)}
.fc-lead{font-size:1.12rem;line-height:1.6;margin:0 0 .75rem}
.fc-drive{margin:0;color:var(--faint,#9fb3c8);line-height:1.6}
.fc-drive strong{color:var(--text,#e8eef6)}
.fc-note{color:var(--faint,#9fb3c8);font-size:.95rem;border-left:2px solid rgba(255,255,255,.12);
  padding-left:.9rem;margin:1.25rem 0}

.fc-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;display:block;
  overflow-x:auto;white-space:nowrap}
.fc-table th,.fc-table td{text-align:left;padding:.55rem .7rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.fc-table th{font-family:"Chakra Petch",sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:.75rem;color:var(--faint,#9fb3c8)}
.fc-table code{font-size:.9rem}

.fc-foot{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.08);
  color:var(--faint,#9fb3c8);font-size:.95rem}

/* ---- the lookup tool ---- */
.fc-tool{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:1.4rem;margin:1.5rem 0 2rem}
.fc-search{position:relative;display:flex;align-items:center}
.fc-search input{width:100%;font-size:1.15rem;padding:.95rem 1rem .95rem 2.9rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.30);color:var(--text,#e8eef6);
  font-family:"JetBrains Mono",ui-monospace,monospace;-webkit-appearance:none}
.fc-search input:focus{outline:none;border-color:#4aa3ff;box-shadow:0 0 0 3px rgba(74,163,255,.20)}
.fc-search svg{position:absolute;left:.95rem;width:1.15rem;height:1.15rem;
  color:var(--faint,#9fb3c8);pointer-events:none}
.fc-hint{color:var(--faint,#9fb3c8);font-size:.9rem;margin:.7rem 0 0}
.fc-count{font-family:"Chakra Petch",sans-serif;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint,#9fb3c8);margin:1.25rem 0 .5rem}

.fc-results{list-style:none;padding:0;margin:0}
.fc-results li{border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--sev,#ffc53d);
  border-radius:10px;padding:.85rem 1rem;margin-bottom:.6rem;background:rgba(255,255,255,.025)}
.fc-results a{text-decoration:none;color:inherit;display:block}
.fc-results a:hover{color:#4aa3ff}
.fc-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:1.05rem;
  color:#4aa3ff}
.fc-results .fc-d{display:block;margin-top:.2rem;line-height:1.45}
.fc-results .fc-m{display:block;margin-top:.4rem;color:var(--faint,#9fb3c8);font-size:.92rem;
  line-height:1.5}
.fc-tag{float:right;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  font-family:"Chakra Petch",sans-serif;color:var(--sev,#ffc53d);border:1px solid currentColor;
  border-radius:99px;padding:.1rem .5rem;margin-left:.5rem}
.fc-empty{color:var(--faint,#9fb3c8);padding:1.5rem 0;text-align:center}

.fc-systems{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  padding:0;list-style:none;margin:1rem 0 0}
.fc-systems a{display:block;padding:.75rem .9rem;border:1px solid rgba(255,255,255,.09);
  border-radius:10px;text-decoration:none;color:var(--text,#e8eef6);
  background:rgba(255,255,255,.025);line-height:1.35}
.fc-systems a:hover{border-color:#4aa3ff;color:#4aa3ff}
.fc-systems small{display:block;color:var(--faint,#9fb3c8);font-size:.82rem;margin-top:.15rem}

@media (max-width:560px){
  .fc-tool{padding:1rem;border-radius:12px}
  .fc-search input{font-size:1.05rem}
  .fc-answer{padding:1rem}
  .fc-lead{font-size:1.05rem}
}

/* The free-phone-app line in the CTA box. Deliberately quieter than the $249 button but
   not hidden: a reader who landed here has a fault code and wants an answer today, and
   the free app is the honest answer to that. Green rather than the accent blue so it
   reads as "this one costs nothing" rather than as a second sales button. */
.fc-free{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:9px;
  background:rgba(59,209,126,.07);border:1px solid rgba(59,209,126,.22);
  color:var(--dim,#b7c6d6);font-size:.93rem;line-height:1.55}
.fc-free a{color:var(--green,#3bd17e);text-decoration:none;font-weight:600}
.fc-free a:hover{text-decoration:underline}