/* Vehicle knowledge view.
 *
 * Borrows the site's existing tokens (--cream, --ink, --orange, --blue, --line,
 * --ag-mono) rather than introducing a second palette, so this page reads as
 * part of Artificially Greasy and not as a bolted-on tool. Mobile-first: the
 * one-column stack is the default and the wider layouts are the exception.
 */

.vkMain {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- pending-review banner --- */

.vkNotice {
  border: 2px solid var(--orange);
  background: #fff5ef;
  padding: 0.85rem 1rem;
  font-family: var(--ag-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}

.vkNotice strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Production-ready release: same slot, quieter voice. The orange border is a
   hold sign; a sourcing line is not a hold. */
.vkNotice.vkNoticeInfo {
  border-color: var(--ink);
  background: var(--paper);
}

/* --- pickers --- */

.vkPicker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--line);
  background: var(--paper);
}

.vkConfigRow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.vkField {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 14rem;
  min-width: 0;
}

.vkField label {
  font-family: var(--ag-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.vkField select {
  font-family: var(--ag-mono);
  font-size: 1rem;
  padding: 0.6rem 0.65rem;
  border: 2px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  /* 16px minimum keeps iOS from zooming the viewport on focus. */
  min-height: 2.75rem;
}

.vkField select:focus-visible,
.vkTab:focus-visible,
.vkImageButton:focus-visible,
.vkEvidenceLink:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* --- tabs --- */

.vkTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 2px solid var(--line);
  padding-bottom: 0.5rem;
}

.vkTab {
  font-family: var(--ag-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.6rem 0.85rem;
  min-height: 2.75rem;
  border: 2px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
}

.vkTab.isActive {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* --- cards --- */

.vkCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.vkCard {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 1rem;
}

.vkCardTitle {
  font-family: "Barlow Condensed", var(--ag-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
  color: var(--blue);
}

.vkValue {
  font-family: var(--ag-mono);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--ink);
  /* Long fluid specifications are sentences, not numbers; let them wrap. */
  overflow-wrap: anywhere;
}

.vkApplies {
  font-family: var(--ag-mono);
  font-size: 0.78rem;
  color: var(--orange);
  margin: 0 0 0.5rem;
}

.vkSubhead {
  font-family: var(--ag-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 1rem 0 0.4rem;
}

/* --- evidence --- */

.vkEvidence {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
}

.vkEvidenceLink {
  font-family: var(--ag-mono);
  font-size: 0.75rem;
  color: var(--blue);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.vkExcerpt {
  font-family: var(--ag-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
  line-height: 1.5;
}

/* --- tables --- */

.vkTable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ag-mono);
  font-size: 0.82rem;
}

.vkTable th,
.vkTable td {
  border: 1px solid var(--line);
  padding: 0.55rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.vkTable th {
  background: var(--cream);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.vkTask { font-weight: 600; display: block; }
.vkWhen strong { display: block; font-size: 0.95rem; color: var(--blue); }
.vkWhenAlt { display: block; color: var(--muted); font-size: 0.72rem; }
.vkCavity { font-weight: 700; text-align: center; width: 3.5rem; }
.vkAmps { text-align: center; width: 4rem; }
.vkSourceCell { width: 5rem; }

.vkSchedule { margin-bottom: 1.75rem; }

.vkScheduleTitle {
  font-family: "Barlow Condensed", var(--ag-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

.vkScheduleNote {
  font-family: var(--ag-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* --- reset procedures --- */

.vkSteps,
.vkPrereqs {
  font-family: var(--ag-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  padding-left: 1.4rem;
  margin: 0;
}

.vkSteps li { margin-bottom: 0.55rem; }

.vkVariant {
  font-family: var(--ag-mono);
  font-size: 0.78rem;
  color: var(--orange);
  margin: 0;
}

.vkDone {
  font-family: var(--ag-mono);
  font-size: 0.82rem;
  background: var(--cream);
  border-left: 4px solid var(--blue);
  padding: 0.6rem 0.7rem;
  margin: 0.9rem 0 0;
}

.vkWarning {
  font-family: var(--ag-mono);
  font-size: 0.8rem;
  border-left: 4px solid var(--orange);
  background: #fff5ef;
  padding: 0.6rem 0.7rem;
  margin: 0.6rem 0 0;
}

/* --- fuses --- */

.vkFuseBox {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.vkFuseLocation {
  background: var(--cream);
  border-left: 4px solid var(--blue);
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
  font-family: var(--ag-mono);
  font-size: 0.85rem;
  line-height: 1.55;
}

.vkFuseLocation p { margin: 0 0 0.4rem; }

.vkFigure { margin: 0.75rem 0 0; }

.vkImageButton {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--line);
  background: #fff;
  cursor: zoom-in;
}

.vkImageButton img {
  display: block;
  width: 100%;
  height: auto;
}

.vkCaption {
  font-family: var(--ag-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.vkImageFallback {
  border: 2px dashed var(--line);
  background: var(--cream);
  padding: 0.85rem;
  font-family: var(--ag-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

.vkImageFallback p { margin: 0 0 0.45rem; }

/* --- empty + error states --- */

.vkEmpty {
  border: 2px dashed var(--line);
  background: var(--cream);
  padding: 1.15rem;
  font-family: var(--ag-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
}

.vkStatusError { color: var(--orange); font-weight: 600; }

/* --- provenance --- */

.vkProvenance {
  border-top: 2px solid var(--line);
  padding-top: 1rem;
}

.vkSourceList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* --- lightbox --- */

.vkLightbox {
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 0;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  overflow: auto;
}

.vkLightbox::backdrop { background: rgba(17, 17, 15, 0.82); }

.vkLightbox figure { margin: 0; padding: 1rem; }

.vkLightbox img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.vkLightbox figcaption {
  font-family: var(--ag-mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

.vkLightboxClose {
  position: sticky;
  top: 0;
  left: 100%;
  font-family: var(--ag-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.6rem 0.9rem;
  min-height: 2.75rem;
  border: none;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  background: var(--orange);
  color: #fff;
  cursor: pointer;
}

/* --- job page panel (used by vehicle-knowledge-panel.js) --- */

.vkJobPanel {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 1rem;
  margin: 1.5rem 0;
}

.vkJobPanelHead {
  font-family: "Barlow Condensed", var(--ag-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--blue);
  margin: 0 0 0.25rem;
}

.vkJobPanelNote {
  font-family: var(--ag-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.vkJobFacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
}

.vkJobFact {
  border-left: 4px solid var(--orange);
  padding-left: 0.7rem;
}

.vkJobFact dt {
  font-family: var(--ag-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.vkJobFact dd {
  font-family: var(--ag-mono);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.15rem 0 0.2rem;
  overflow-wrap: anywhere;
}

/* --- wider viewports --- */

@media (min-width: 40rem) {
  .vkPicker { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .vkCards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
  .vkJobFacts { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}

@media (min-width: 64rem) {
  .vkFigure { max-width: 46rem; }
}

/* Secondary measurement (the metric twin of an English capacity, or an extra
   value the manual prints for the same qualifier). Quieter than the primary so
   the card still reads as one answer rather than two competing ones. */
.vkValueAlt {
  font-family: var(--ag-mono);
  font-size: 0.92rem;
  color: var(--muted);
  margin: -0.35rem 0 0.5rem;
  overflow-wrap: anywhere;
}