/* Index-only reading layer: keep instrument details as accents. */
.retro-app main :is(.catalog-index, .catalog-system) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f0f0e8;
  padding-top: 40px;
}
.retro-app main :is(.catalog-index, .catalog-system) .catalog-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0 0 32px;
}
:is(.catalog-index, .catalog-system) .catalog-kicker {
  color: #d5b17c;
  font: 12px/1.5 'Courier New', monospace;
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.retro-app main :is(.catalog-index, .catalog-system) h1 {
  font-family: inherit;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.035em;
  color: #f4f2e9;
  text-shadow: none;
  max-width: 680px;
}
:is(.catalog-index, .catalog-system) h1 span { color: #ffc16d; }
.catalog-description { color: #bec5bb; font-size: 17px; line-height: 1.7; margin-top: 14px; max-width: 580px; }
.catalog-total { flex-shrink: 0; border-left: 1px solid #454d43; padding-left: 28px; color: #bec5bb; font-size: 14px; line-height: 1.7; }
.catalog-total strong { display: block; color: #f4f2e9; font: bold 32px/1.4 'Courier New', monospace; }
.retro-app main :is(.catalog-index, .catalog-system) .catalog-search {
  margin-top: 0;
  border: 1px solid #67735e;
  border-top: 3px solid #edb064;
  border-radius: 10px;
  padding: 28px;
  background: #2b332b;
}
.retro-app main :is(.catalog-index, .catalog-system) h2 { font-family: inherit; color: #f4f2e9; font-size: 23px; line-height: 1.4; font-weight: 650; letter-spacing: -.02em; }
.retro-app main :is(.catalog-index, .catalog-system) form[role=search] { background: none; border: 0; box-shadow: none; gap: 16px; margin-top: 22px; }
.catalog-field-label { display: block; font-size: 14px; font-weight: 600; color: #e1e6da; margin-bottom: 8px; }
.catalog-type-field { flex-shrink: 0; }
.retro-app main :is(.catalog-index, .catalog-system) :is(input[type=search], select) {
  background: #182019;
  border: 1px solid #7d8974;
  color: #f4f2e9;
  border-radius: 6px;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: none;
  min-height: 52px;
}
.retro-app main :is(.catalog-index, .catalog-system) input::placeholder { color: #b5bfad; }
.retro-app main :is(.catalog-index, .catalog-system) input[type=submit] {
  border-radius: 6px;
  min-height: 52px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
:is(.catalog-index, .catalog-system) .retro-search-panel > p:last-child { color: #bec8b6; font-size: 13px; margin-top: 14px; }
:is(.catalog-index, .catalog-system) .retro-results { margin-top: 40px; }
:is(.catalog-index, .catalog-system) .retro-results h2 { margin-top: 0; }
.retro-app main :is(.catalog-index, .catalog-system) .retro-results h2 + p { color: #bac3b4; font-family: inherit; font-size: 14px; line-height: 1.6; }
:is(.catalog-index, .catalog-system) .catalog-models { gap: 16px; }
:is(.catalog-index, .catalog-system) .retro-model { border-color: #4d5848; border-radius: 8px; background: #242c24; overflow: hidden; box-shadow: none; }
:is(.catalog-index, .catalog-system) .retro-model:hover { border-color: #edb064; background: #2c362b; }
:is(.catalog-index, .catalog-system) .retro-model-top { padding: 14px 20px 0; background: none; border: 0; font-family: inherit; letter-spacing: .02em; color: #c7cfbf; font-size: 12px; }
:is(.catalog-index, .catalog-system) .retro-model-top span:first-child { font-weight: 650; }
:is(.catalog-index, .catalog-system) .retro-model-top span:last-child { color: #bac5af; text-transform: none; }
:is(.catalog-index, .catalog-system) .retro-model-content { padding: 12px 20px 20px; }
:is(.catalog-index, .catalog-system) .retro-model-content > svg { display: none; }
.retro-app main :is(.catalog-index, .catalog-system) .retro-model h3 { font-family: inherit; font-size: 21px; font-weight: 650; line-height: 1.4; color: #f4f2e9; }
:is(.catalog-index, .catalog-system) .retro-model-content p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #bec8b5; }
:is(.catalog-index, .catalog-system) .retro-model-bottom { padding: 12px 20px; border-color: #414d3c; font-size: 12px; color: #b8c3ad; }
:is(.catalog-index, .catalog-system) .retro-model-bottom span:last-child { color: #ffc16d; font-weight: 600; }
.retro-app main :is(.catalog-index, .catalog-system) .retro-results > div:last-child { border-radius: 8px; }
.retro-app main :is(.catalog-index, .catalog-system) .retro-results > div:last-child a { border-radius: 6px; font-family: inherit; }
.retro-app main :is(.catalog-index, .catalog-system) :is(a, input, select):focus-visible { outline: 3px solid #ffc16d; outline-offset: 4px; }
@media (max-width: 639px) {
  .retro-app main :is(.catalog-index, .catalog-system) { padding-top: 28px; }
  .retro-app main :is(.catalog-index, .catalog-system) .catalog-intro { display: block; padding-bottom: 24px; }
  :is(.catalog-index, .catalog-system) .catalog-total { border: 0; padding: 0; margin-top: 18px; font-size: 13px; }
  :is(.catalog-index, .catalog-system) .catalog-total strong { display: inline; font-size: 16px; margin-right: 4px; }
  .retro-app main :is(.catalog-index, .catalog-system) .catalog-search { padding: 20px; }
  .retro-app main :is(.catalog-index, .catalog-system) h2 { font-size: 21px; }
  .catalog-description { font-size: 16px; }
  .catalog-type-field { width: 100%; }
  :is(.catalog-index, .catalog-system) .retro-results { margin-top: 32px; }
}

/* Suggestion states use the same dark palette for pointer and keyboard input. */
.retro-app main :is(.catalog-index, .catalog-system) #vehicle-suggestions { background: #202a21; border-color: #728267; }
.retro-app main :is(.catalog-index, .catalog-system) .catalog-suggestion { background: #202a21; color: #f4f2e9; border-color: #44513e; }
.retro-app main :is(.catalog-index, .catalog-system) .catalog-suggestion span { color: #c2ceb8; }
.retro-app main :is(.catalog-index, .catalog-system) .catalog-suggestion:is(:hover, :focus-visible) { background: #3c4b32; color: #ffe0ad; outline: 2px solid #edb064; outline-offset: -2px; }
.retro-app main :is(.catalog-index, .catalog-system) .catalog-suggestion:is(:hover, :focus-visible) span { color: #e4ebdb; }
:is(.catalog-index, .catalog-system) .retro-model-bottom { justify-content: flex-end; }
:is(.catalog-index, .catalog-system) .retro-model-bottom .catalog-rank { margin-right: auto; color: #d3dcca; font-variant-numeric: tabular-nums; }