/**
 * Car age checker — React report alignment.
 * Values come from shared/css/tokens.css. SectionCard, OdometerSummary and
 * DefectHealthPanel are the component references; shared tool chrome stays scoped.
 */
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

.car-age-page {
  background: var(--color-page);
  color: var(--color-ink);
}

.car-age-page .car-age-plate {
  height: 56px;
  max-width: 100%;
  background: var(--color-plate-body);
  box-shadow: var(--shadow-card);
}

.car-age-page .car-age-plate:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.car-age-page .car-age-plate-stripe {
  width: 34px;
  flex: none;
  background: var(--color-plate-stripe);
}

.car-age-page #plate-input {
  width: 230px;
  min-width: 0;
  font-family: 'UK-VRM', monospace;
  font-size: 30px;
  letter-spacing: 0.1em;
  color: var(--color-plate-text);
  background: var(--color-plate-body);
}

/* Keep the empty, error and decoded views on the same quiet card surface. */
.car-age-page .car-age-result-panel {
  min-height: 304px;
}

/* Reference tables use the report's panel, row and metadata treatments. */
.car-age-page .mw-table-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-panel);
  box-shadow: none;
}

.car-age-page .mw-table {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-variant-numeric: tabular-nums;
}

.car-age-page .mw-table thead {
  background: var(--color-row);
  border-color: var(--color-row-border);
}

.car-age-page .mw-table th {
  padding: 12px 18px;
  color: var(--color-mid);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  font-weight: 600;
}

.car-age-page .mw-table td {
  padding: 12px 18px;
  color: var(--color-muted);
}

.car-age-page .mw-table td.text-ink {
  color: var(--color-ink);
  font-weight: 700;
}

.car-age-page .mw-table tbody tr + tr {
  border-color: var(--color-row-border);
}

.car-age-page .mw-table tbody tr:hover {
  background: var(--color-row);
}

/* The injected related-tools component inherits this page's report treatment. */
.car-age-page #mw-related-tools > section {
  display: grid;
  gap: 16px;
  margin-bottom: 0;
  padding: var(--spacing-card-y) var(--spacing-card-x);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.car-age-page #mw-related-tools > section > div:first-child {
  margin-bottom: 0;
}

.car-age-page #mw-related-tools > section > div:first-child > div {
  padding: 6px 11px;
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--color-chip);
  color: var(--color-mid);
  font-size: var(--text-chip);
  line-height: var(--text-chip--line-height);
}

.car-age-page #mw-related-tools h2 {
  color: var(--color-ink);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: 800;
}

.car-age-page #mw-related-tools p {
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.6;
}

.car-age-page #mw-related-tools [data-tool-id] {
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card-sm);
  box-shadow: none;
  transform: none;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.car-age-page #mw-related-tools [data-tool-id]:hover {
  border-color: var(--color-btn-border-hover);
  background: var(--color-row);
}

.car-age-page #mw-related-tools [data-tool-id] > div:first-child {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-row);
  background: var(--color-chip);
  box-shadow: none;
  transform: none;
}

.car-age-page #mw-related-tools i {
  color: var(--color-faint);
}

.car-age-page #mw-related-tools [data-tool-id] > div:first-child i {
  font-size: 18px;
}

.car-age-page #mw-related-tools [data-tool-id]:hover > i {
  color: var(--color-brand);
  transform: none;
}

.car-age-page #mw-related-tools [data-tool-id] p:first-child {
  color: var(--color-ink);
  font-size: var(--text-row-title);
  line-height: var(--text-row-title--line-height);
  font-weight: 800;
}

.car-age-page #mw-related-tools [data-tool-id] p + p {
  color: var(--color-mid);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.car-age-page .tool-bottom-nav {
  background: var(--color-surface);
  border-color: var(--color-rail);
  box-shadow: var(--shadow-nav-top);
}

.car-age-page .tool-bottom-nav-item {
  color: var(--color-faint);
}

.car-age-page .tool-bottom-nav-item.active {
  color: var(--color-brand);
}

.car-age-page .tool-bottom-nav-item.active .nav-icon-bg {
  background: var(--color-brand-tint);
}

@media (min-width: 1024px) {
  .car-age-page #mw-related-tools > section {
    grid-template-columns: var(--spacing-left-col) minmax(0, 1fr);
    gap: 36px;
    padding: var(--spacing-card-y-lg) var(--spacing-card-x-lg);
  }
}

@media (max-width: 639px) {
  .car-age-page .car-age-result-panel {
    min-height: 144px;
    padding: 18px;
  }

  .car-age-page .mw-table th,
  .car-age-page .mw-table td {
    padding: 10px 8px;
  }
}