/**
 * Static tools — SectionCard, OdometerSummary and DefectHealthPanel treatments.
 * The updated car age checker is the static implementation reference.
 * Scoped to migrated tools; layout/visibility stays with each tool's controller.
 */
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

.report-tool-page {
  background: var(--color-page);
  color: var(--color-ink);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.report-tool-page .tool-content :is(.grid, .flex) > * { min-width: 0; }
.report-tool-page .tool-content > nav { flex-wrap: wrap; }

.report-tool-page .tool-section,
.report-tool-page .tool-content .rounded-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.report-tool-page h1 {
  color: var(--color-ink);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
}

.report-tool-page .text-h2 {
  color: var(--color-ink);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-h2--letter-spacing);
}

.report-tool-page :is(h3, h4).text-body-sm {
  color: var(--color-ink);
  font-size: var(--text-row-title);
  line-height: var(--text-row-title--line-height);
  font-weight: 800;
}

.report-tool-page .text-card-title { font-weight: 800; }
/* Tailwind v3 also derives a text colour from the surface token named chip.
 * Pin the chip typography's foreground so safelist ordering cannot hide it. */
.report-tool-page .text-chip { color: var(--color-mid); }
.report-tool-page .text-stat {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: var(--text-stat--line-height);
}

.report-tool-page label[for] {
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: var(--text-label--line-height);
}

.report-tool-page .tool-result-panel {
  min-height: 304px;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card-sm);
  padding: 22px;
}

/* Two-column grid keeps state messages in reading order without changing
 * their DOM structure, which the existing controllers query for updates. */
.report-tool-page .tool-empty-state:not(.hidden) {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  padding-block: 16px;
}

.report-tool-page .tool-empty-state > div:first-child {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  margin: 0;
  background: var(--color-chip);
  border-radius: var(--radius-row);
}

.report-tool-page .tool-empty-state > div:first-child i { font-size: 18px; }
.report-tool-page .tool-empty-state h2 {
  color: var(--color-ink);
  font-size: var(--text-card-title);
  font-weight: 800;
  line-height: var(--text-card-title--line-height);
}
.report-tool-page .tool-empty-state p {
  grid-column: 2;
  color: var(--color-muted);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}
.report-tool-page .tool-empty-state p.text-ink {
  color: var(--color-ink);
  font-size: var(--text-card-title);
  font-weight: 800;
}

.report-tool-page .tool-plate {
  width: 264px;
  max-width: 100%;
  height: 56px;
  background: var(--color-plate-body);
  box-shadow: var(--shadow-card);
}
.report-tool-page .tool-plate-stripe { width: 34px; }
.report-tool-page .tool-plate .plate-input {
  width: 230px;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  background: var(--color-plate-body);
  color: var(--color-plate-text);
  font-family: 'UK-VRM', monospace;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0.1em;
}
.report-tool-page .tool-plate .plate-input::placeholder { opacity: 0.4; color: var(--color-plate-text); }
.report-tool-page :is(.tool-plate, .mw-focus-within):focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.report-tool-page :is(button, a, input, select, summary):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.report-tool-page input:not(.plate-input):not([type='checkbox']):not([type='radio']):not([type='range']):not(.tyre-pill-input):not(.bento-num),
.report-tool-page select {
  background-color: var(--color-row);
  border-color: var(--color-card-border);
  border-radius: var(--radius-row);
  color: var(--color-ink);
}

/* Same filled/outlined pills as the report. Leave icon-only, disclosure, map,
 * and segmented controls to their own layout rules. */
.report-tool-page main :is(button, a):is(.bg-brand, .mw-btn-primary, .mw-btn-secondary, .border-btn-border, .bento-preset, .mpg-preset-btn, .zm-zone-btn, [data-tab-trigger]),
.report-tool-page main button[type='submit'] {
  min-height: 40px;
  justify-content: center;
  border-radius: 9999px;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transform: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.report-tool-page main :is(button, a):is(.bg-brand, .mw-btn-primary),
.report-tool-page main button[type='submit'] {
  background: var(--color-brand);
  color: white;
  border: 1px solid var(--color-brand);
}
.report-tool-page main :is(button, a):is(.bg-brand, .mw-btn-primary):hover,
.report-tool-page main button[type='submit']:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}
.report-tool-page .mw-btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-btn-border);
}
.report-tool-page .mw-btn-secondary:hover { border-color: var(--color-btn-border-hover); }
.report-tool-page button:disabled { cursor: not-allowed; opacity: 0.5; }

/* Both selections retain the same geometry when the controller changes colour. */
.report-tool-page main :is(.bento-preset, .mpg-preset-btn, .zm-zone-btn):not(.bg-brand),
.report-tool-page main [data-tab-trigger][aria-selected='false'] {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-btn-border);
}
.report-tool-page main :is(.bento-preset, .mpg-preset-btn, .zm-zone-btn):not(.bg-brand):hover,
.report-tool-page main [data-tab-trigger][aria-selected='false']:hover {
  border-color: var(--color-btn-border-hover);
}
.report-tool-page main [data-tab-trigger][aria-selected='true'] {
  background: var(--color-brand);
  color: white;
  border: 1px solid var(--color-brand);
}
.report-tool-page main [data-tab-trigger][aria-selected='true']:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.report-tool-page :is(.mw-card, .mw-info-card) {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card-sm);
  box-shadow: none;
  transform: none;
}
.report-tool-page .mw-info-card { padding: 18px; }
.report-tool-page .mw-icon-box {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-row);
  background: var(--color-chip);
  box-shadow: none;
  color: var(--color-faint);
}
.report-tool-page .mw-icon-box i { font-size: 18px; }

/* Compact status badges, with colour reserved for the actual verdict. */
.report-tool-page main :is(span, div).inline-flex:is(.bg-accent-tint, .bg-attention-bg, .bg-attention-banner, .bg-red-50) {
  border: 0;
  border-radius: var(--radius-badge);
  padding: 4px 9px;
  font-size: var(--text-label);
  font-weight: 700;
  line-height: var(--text-label--line-height);
}

.report-tool-page .mw-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-panel);
  box-shadow: none;
}
.report-tool-page .mw-table {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-variant-numeric: tabular-nums;
}
.report-tool-page .mw-table thead { background: var(--color-row); border-color: var(--color-row-border); }
.report-tool-page .mw-table th {
  padding: 12px 18px;
  color: var(--color-mid);
  font-size: var(--text-meta);
  font-weight: 600;
  line-height: var(--text-meta--line-height);
  text-transform: none;
  letter-spacing: normal;
}
.report-tool-page .mw-table td { padding: 12px 18px; color: var(--color-muted); }
.report-tool-page .mw-table td.text-ink { color: var(--color-ink); font-weight: 700; }
.report-tool-page .mw-table td.text-faint { color: var(--color-faint); }
.report-tool-page .mw-table td.text-accent-deep { color: var(--color-accent-deep); }
.report-tool-page .mw-table td.text-attention-fg { color: var(--color-attention-fg); }
.report-tool-page .mw-table td.text-danger { color: var(--color-danger); }
.report-tool-page .mw-table tbody tr + tr { border-color: var(--color-row-border); }
.report-tool-page .mw-table tbody tr:hover { background: var(--color-row); }

.report-tool-page .tool-bottom-nav {
  background: var(--color-surface);
  border-color: var(--color-rail);
  box-shadow: var(--shadow-nav-top);
}
.report-tool-page .tool-bottom-nav-item { color: var(--color-faint); }
.report-tool-page .tool-bottom-nav-item.active { color: var(--color-brand); }
.report-tool-page .tool-bottom-nav-item.active .nav-icon-bg { background: var(--color-brand-tint); }

/* These pages provide their own Checker/Guide (or Search/Map) tabs. The
 * injected site shortcut rail occupies the same space and covers those tabs. */
@media (max-width: 1023px) {
  .report-tool-page #bottom-nav,
  .report-tool-page #bottom-nav-tools { display: none; }
  .report-tool-page .tool-bottom-nav {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .report-tool-page { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.report-tool-page .mot-history-card {
  background: var(--color-surface);
  border-color: var(--color-card-border);
  border-radius: var(--radius-card-sm);
  box-shadow: none;
  padding: 18px;
}
.report-tool-page .mot-history-card > div:first-child > span {
  border-radius: var(--radius-badge);
  padding: 4px 9px;
  font-size: var(--text-label);
  font-weight: 700;
}
.report-tool-page .mot-history-card li { font-size: var(--text-body-sm); }
.report-tool-page .mot-history-card > div:first-child p:first-child {
  font-size: var(--text-row-title);
  font-weight: 800;
}
.report-tool-page #check-result :is(.w-14.h-14, .w-16.h-16) {
  width: 36px;
  height: 36px;
  background: var(--color-chip);
  border-radius: var(--radius-row);
}
.report-tool-page #check-result :is(.w-14.h-14, .w-16.h-16) i { font-size: 18px; }
.report-tool-page #check-result h2 { font-size: var(--text-h2); }

.report-tool-page #results > div {
  border-radius: var(--radius-card-sm);
  padding: 18px;
}
.report-tool-page #results h3 { font-size: var(--text-row-title); font-weight: 800; }
.report-tool-page.mot-station-finder-page :is(#loading, #empty, #error) {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card-sm);
  padding: 22px;
}
.report-tool-page.mot-station-finder-page :is(#loading, #empty, #error) > div:first-child {
  width: 36px;
  height: 36px;
  background: var(--color-chip);
  border-radius: var(--radius-row);
}
.report-tool-page.mot-station-finder-page :is(#loading, #empty, #error) i { font-size: 18px; }

/* MPG dashboard and mode pills. Visualisations keep their data colours. */
.report-tool-page .tab-btn {
  color: var(--color-ink);
  border-color: var(--color-btn-border);
  border-radius: 9999px;
  font-size: var(--text-body-sm);
  font-weight: 700;
  min-height: 40px;
}
.report-tool-page .tab-btn:hover { border-color: var(--color-btn-border-hover); }
.report-tool-page .tab-btn.active { background: var(--color-brand); color: white; border-color: var(--color-brand); }
@media (max-width: 1023px) {
  .report-tool-page .tab-strip {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-top: 3px;
    padding-inline: 3px;
  }
  .report-tool-page .tab-strip .tab-btn { flex-shrink: 0; white-space: nowrap; }
}
.report-tool-page.mpg-calculator-page :is(p, span, div):is(.text-2xl, .text-3xl, .text-4xl) {
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: var(--text-stat--line-height);
  font-variant-numeric: tabular-nums;
}
.report-tool-page #desktop-bento-grid > .bg-white {
  border-color: var(--color-card-border);
  border-radius: var(--radius-card-sm);
  box-shadow: none;
  transform: none;
}
.report-tool-page .mpg-vehicle-card { background: var(--color-surface); border: 0; padding: 0; }
.report-tool-page .cc-winner-cell { background: var(--color-accent-tint); box-shadow: none; border-radius: var(--radius-row); }
.report-tool-page .winner-pulse { animation: none; }

/* Leaflet chrome shares the report type and surface; attribution stays visible. */
.report-tool-page .leaflet-container {
  font-family: 'Jost', system-ui, sans-serif;
  /* Leaflet's panes use z-index 200–700. Contain them below page navigation. */
  isolation: isolate;
  z-index: 0;
}
.report-tool-page .leaflet-popup-content-wrapper {
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-overlay);
}
.report-tool-page .station-popup-title { color: var(--color-ink); font-size: var(--text-row-title); font-weight: 800; }
.report-tool-page .station-popup-icon { border-radius: var(--radius-row); background: var(--color-chip); box-shadow: none; }
.report-tool-page .station-popup-icon i { color: var(--color-faint); }
.report-tool-page .station-popup-stat {
  background: var(--color-row);
  border: 1px solid var(--color-row-border);
  border-radius: var(--radius-row);
}
.report-tool-page .station-popup-stat-label {
  color: var(--color-mid);
  font-size: var(--text-meta);
  text-transform: none;
  letter-spacing: normal;
}
.report-tool-page .station-popup-stat-value {
  color: var(--color-ink);
  font-size: var(--text-row-title);
  font-weight: 700;
}
.report-tool-page .station-popup-footer { border-color: var(--color-row-border); }
.report-tool-page .station-popup-footer :is(span, i) { color: var(--color-mid); font-size: var(--text-meta); }
.report-tool-page :is(.class-badge-yes, .class-badge-no) { border: 0; border-radius: var(--radius-badge); }
.report-tool-page .class-badge-yes { background: var(--color-chip); color: var(--color-mid); }
.report-tool-page .class-badge-no { background: var(--color-row); color: var(--color-faint); }
.report-tool-page .tyre-scene-pill { border-color: var(--color-card-border); border-radius: var(--radius-badge); box-shadow: var(--shadow-card); }
.report-tool-page :is(.tyre-scene-pill--current, .tyre-scene-pill--delta) { color: var(--color-muted); }
.report-tool-page .tyre-scene-pill--new { color: var(--color-brand); }
.report-tool-page :is(.tyre-scene-seg, .tyre-xray-btn) { border-color: var(--color-btn-border); border-radius: var(--radius-chip); }
.report-tool-page :is(.tyre-scene-seg button, .tyre-xray-btn) { min-height: 36px; color: var(--color-muted); }
.report-tool-page .tyre-scene-seg button:hover { color: var(--color-ink); }
.report-tool-page :is(.tyre-scene-seg button.active, .tyre-xray-btn.active) { background: var(--color-brand); color: white; }
.report-tool-page .tyre-xray-btn.active { border-color: var(--color-brand); }

@media (max-width: 639px) {
  .report-tool-page .tool-result-panel { min-height: 144px; padding: 18px; }
  .report-tool-page .mw-table :is(th, td) { padding: 10px 8px; }
  .report-tool-page .tool-content > nav { font-size: var(--text-meta); gap: 6px; }
}

/* The injected related-tools component inherits this page's report treatment. */
.report-tool-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);
}

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

.report-tool-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);
}

.report-tool-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;
}

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

.report-tool-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);
}

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

.report-tool-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;
}

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

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

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

.report-tool-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;
}

.report-tool-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);
}


@media (min-width: 1024px) {
  .report-tool-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);
  }
}