/* ---------------------------------------------------------------------------
   EV Registry — shared styles (responsive UI + one-page print layout)
--------------------------------------------------------------------------- */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2230;
  --muted: #62707f;
  --border: #e2e8ef;
  --primary: #0b6e4f;
  --primary-dark: #08573f;
  --primary-contrast: #ffffff;
  --accent: #eef7f2;
  --danger: #c0392b;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.25; }

.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

/* ---------------------------------- Nav ---------------------------------- */

header#app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.nav-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  margin-right: auto;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand-icon { color: var(--primary); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 4px;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.active { color: var(--primary); }

.nav-links a.nav-cta {
  background: var(--primary);
  color: var(--primary-contrast);
  padding: 8px 16px;
  border-radius: 999px;
}
.nav-links a.nav-cta:hover { background: var(--primary-dark); }
.nav-links a.nav-cta.active { background: var(--primary-dark); color: var(--primary-contrast); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  margin: 0 auto;
  background: var(--text);
}

.demo-banner {
  background: #fff8e6;
  color: #7a5b00;
  font-size: 0.82rem;
  text-align: center;
  padding: 6px 12px;
  border-top: 1px solid #f0e0a8;
}
.demo-banner code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 20px 16px;
    gap: 4px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 4px; }
  .nav-links a.nav-cta { text-align: center; }
}

/* The browser's own [hidden] rule is display:none, but ANY author rule that sets
   display beats it - .btn below sets display:inline-flex, which silently
   un-hides every hidden button. This must stay above the component styles. */
[hidden] {
  display: none !important;
}

/* -------------------------------- Buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--accent); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #f1c6c0; }
.btn-danger:hover { background: #fdecea; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* --------------------------------- Toolbar -------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.toolbar .spacer { flex: 1 1 auto; }

.search-input, select.select-input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.92rem;
  color: var(--text);
}
/* flex-grow 0, not 1. The original `1 1 220px` let the search box swallow every
   pixel the dropdowns did not use, so on a wide monitor it stretched absurdly
   wide. A fixed 300px basis keeps it a predictable size at any width, and the
   .spacer after the filters takes up the slack instead. */
.search-input { flex: 0 1 300px; min-width: 160px; }

/* Phone portrait. A native <select> is sized by its widest *option*, not by its
   label - Manufacturer is as wide as "Mercedes-Benz", Body type as wide as
   "People Mover" - so six content-sized controls wrap raggedly and can stack to
   five rows, nearly a screenful before the first result.

   A two-column grid was tried and rejected: fixing every cell at 50% ignores
   how much text each control actually holds, so the long labels truncated and
   the row read as sloppy. These stay flex items sized by their content. What
   changes is how much width that content asks for.

   Deleting this block restores the desktop layout on phones; nothing here
   changes behaviour. Scoped to .toolbar, which appears only on index.html. */
@media (max-width: 560px) {
  .toolbar { gap: 8px; }

  /* Search takes a full row of its own. 16px is deliberate and must not be
     reduced with the others: iOS Safari zooms the whole page when a focused
     text field is under 16px, and it does not zoom back out afterwards.
     A <select> is exempt - iOS opens a picker rather than zooming - which is
     why the dropdowns below can safely go smaller and this cannot. */
  .toolbar .search-input {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 16px;
  }

  /* The placeholder, however, can match the dropdowns - and should, because at
     16px it sat visibly larger than everything beside it and ran out of room
     before "variant". iOS decides whether to zoom from the input's own
     font-size, which is still 16px above, so styling the placeholder alone
     buys the smaller text and the extra characters without the zoom.
     Once the visitor types, their text renders at 16px; the placeholder is
     gone by then, so the two sizes are never on screen together. */
  .toolbar .search-input::placeholder {
    font-size: 0.85rem;
  }

  /* Narrower, not shorter. Trimming font-size and the horizontal padding cuts
     roughly 20px off each dropdown, and since flex sizes them by content that
     converts directly into more per row. Vertical padding is left alone on
     purpose: the control stays about 40px tall, which is the dimension that
     governs how reliably a thumb hits it. Shrinking height to save space is
     the version of this idea that actually is a bad design choice. */
  .toolbar select.select-input {
    font-size: 0.85rem;
    padding-left: 8px;
    padding-right: 8px;
  }
  .toolbar .btn {
    font-size: 0.85rem;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* -------------------------------- Vehicle grid ----------------------------- */

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.vehicle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.vehicle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }

/* No image tile - see the note in js/app.js card(). Cards are text only, so the
   body carries even padding and the grid can pack tighter. */
.vehicle-card-body { padding: 16px; color: var(--text); }
.vehicle-card-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 2px; }
.vehicle-card-sub { color: var(--muted); font-size: 0.86rem; margin-bottom: 10px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* The card stacks two separate .chip-row elements. `gap` only spaces chips
   *within* a row, so without this the second row sits flush against the first
   while the chips beside it are 6px apart. Matching the 6px keeps the vertical
   and horizontal spacing visually identical. */
.chip-row + .chip-row { margin-top: 6px; }
.chip {
  background: var(--accent);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* --------------------------------- Forms ---------------------------------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.field-group { margin-bottom: 26px; }
.field-group h3 {
  font-size: 0.98rem;
  color: var(--primary-dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.field input, .field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.94rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.12);
}

.field-unit { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }

/* Photo uploader */

.photo-uploader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.photo-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slot .remove-photo {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.photo-add-btn {
  aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.photo-add-btn:hover { background: var(--accent); }
.photo-hint { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.form-message {
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.form-message.error { background: #fdecea; color: var(--danger); }
.form-message.success { background: var(--accent); color: var(--primary-dark); }

/* ----------------------------- Vehicle spec sheet -------------------------- */

.sheet-wrap {
  max-width: 210mm;
  margin: 0 auto;
}

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16mm 14mm;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.sheet-title { font-size: 1.5rem; font-weight: 800; }
.sheet-subtitle { color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.sheet-badge {
  background: var(--accent);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.sheet-meta { color: var(--muted); font-size: 0.75rem; margin-bottom: 14px; }

.spec-group { margin-bottom: 12px; }
.spec-group-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
  font-weight: 700;
  margin-bottom: 6px;
}
/* Each column is guaranteed 320px, so a long label like "Combined maximum power
   output" can never be squeezed onto two lines. The browser fits as many columns
   as the width allows - two on a typical laptop, one on a phone - so this cannot
   regress on a screen size we never tested. Print overrides this back to three;
   see the print block, where width is fixed and space is not the constraint. */
.spec-table {
  display: grid;
  /* min(320px, 100%) is doing real work. A bare minmax(320px, 1fr) guarantees a
     320px track even when the container is narrower - on a phone the card's
     content box is about 300px, so the grid overflowed and the right-aligned
     values were pushed off-screen. Wrapping the floor in min() keeps the 320px
     preference on wide screens while never exceeding the container on narrow
     ones. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 4px 18px;
}
.spec-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  padding: 3px 0;
  border-bottom: 1px dotted var(--border);
  /* Label and value sit side by side, which fits comfortably at the ~300px a
     phone gives. flex-wrap is the safety net: on the rare long value it drops
     beneath the label rather than spilling outside the card. */
  flex-wrap: wrap;
}
.spec-item .k, .spec-item .v { min-width: 0; overflow-wrap: anywhere; }
.spec-item .k { color: var(--muted); }
.spec-item .v { font-weight: 600; text-align: right; }

.photo-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-dark);
  font-weight: 700;
  margin: 14px 0 6px;
}
.photo-grid-print {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.photo-grid-print .photo-box {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--accent);
}
.photo-grid-print img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid-print .photo-box.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---------------------------------- Misc ----------------------------------- */

.loading { text-align: center; color: var(--muted); padding: 40px; }

@media (max-width: 640px) {
  /* Deliberately no spec-table override here. The auto-fit rule above already
     collapses to a single column below 340px of available width. Forcing two
     columns on a phone was the original cause of wrapping on small screens. */
  .sheet { padding: 20px 16px; }
  .sheet-header { flex-direction: column; }
}

/* --------------------------------- Print ------------------------------------
   Goal: the vehicle spec sheet fits on exactly one portrait page, with the
   photos (max 4, two per row) at the bottom.
------------------------------------------------------------------------------ */

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  .no-print { display: none !important; }

  html, body {
    background: #fff;
  }

  .page-container, .sheet-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .sheet {
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  /* Scaled up with the spec text so the hierarchy still reads. */
  .sheet-header { padding-bottom: 9px; margin-bottom: 10px; }
  .sheet-title { font-size: 20pt; }
  .sheet-subtitle { font-size: 12pt; }
  .sheet-badge { font-size: 10pt; padding: 3px 10px; }
  .sheet-meta { font-size: 9.5pt; margin-bottom: 10px; }

  /* Two columns and 12pt type, chosen by measurement rather than taste.
     Wrapping of the longest label ("HV Battery capacity (usable)") begins at
     14pt in a two-column A4 layout, so 13pt is the hard ceiling and 12pt leaves
     one step of margin for future longer field names. Worst-case content height
     at 12pt is 193mm against 277mm usable - comfortable, and enough room for
     page-break-inside:avoid to keep every group intact.
     Measured with the densest records in the register (EV0106, EV0936). */
  .spec-table { grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
  .spec-group { margin-bottom: 9px; }
  .spec-group-title { font-size: 10pt; margin-bottom: 5px; }
  .spec-item { font-size: 12pt; padding: 2.5px 0; }

  /* THE BLANK SECOND PAGE. body{min-height:100vh} is fine on screen, but in
     print 100vh resolves to the page height, forcing the body to be exactly one
     page tall; any trailing margin then spills into a second, empty page.
     Measured content is only about half the page, so overflow was never the
     cause. */
  html, body {
    min-height: 0 !important;
    height: auto !important;
  }

  .sheet-wrap, .page-container, main { margin-bottom: 0 !important; }
  .sheet > *:last-child { margin-bottom: 0 !important; }

  /* The links under this heading are .no-print, so on paper it was a heading
     with nothing beneath it. */
  .photo-section-title { display: none !important; }

  .photo-section-title { font-size: 7.5pt; margin: 8px 0 4px; }
  .photo-grid-print { gap: 6px; }
  .photo-grid-print .photo-box { aspect-ratio: 4 / 3; }

  .spec-group, .photo-grid-print { page-break-inside: avoid; }
}

/* ------------------------- Read-only register additions -------------------- */
/* Added when the app switched from a Supabase CRUD app to a read-only viewer
   over the register spreadsheet. See README.md. */

.banner {
  padding: 10px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.banner-warn { background: #fff8e1; color: #6b5310; border-bottom-color: #f0e0a8; }
.banner code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }

.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

.results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.data-meta { color: var(--muted); }

.import-error {
  background: #fdecea;
  color: var(--danger);
  border: 1px solid #f1c6c0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.86rem;
  margin: 0 0 12px;
}

.chip-ok     { background: #e6f4ec; color: #0b6e4f; }
.chip-warn   { background: #fdf3d8; color: #8a6d1a; }
.chip-alert  { background: #fdecea; color: #a5342a; }
.chip-muted  { background: #eceff2; color: #62707f; }

/* A blank spec means "not published in Australia", so mute it rather than
   letting an em dash read like a real value. */
.spec-item.is-blank .v { color: #a8b2bd; }

.photo-link-grid {
  display: grid;
  /* Same min() guard as .spec-table - never wider than the container. */
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.photo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.photo-link:hover { background: var(--accent); text-decoration: none; }
.photo-link-icon { opacity: 0.7; }

.record-notes {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.sheet-footnote {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--muted);
}

@media print {
  .banner, .results-bar, .import-error { display: none !important; }
  .record-notes { font-size: 10pt; line-height: 1.45; }
  .sheet-footnote { font-size: 9pt; margin-top: 10px; padding-top: 8px; }
}

/* ------------------------------- Dashboard --------------------------------- */
/* Every figure is counted in the browser from data/vehicles.json - see the note
   at the top of js/dashboard.js. Bars are plain CSS on purpose: the site has no
   runtime dependencies and a charting library is not worth breaking that for
   six bars. */

.page-title {
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--text);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 18px 0 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.stat-value { font-size: 1.6rem; font-weight: 700; color: var(--primary-dark); line-height: 1.2; }
.stat-note  { font-size: 0.72rem; color: var(--muted); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.panel-title { font-size: 1.05rem; margin: 0 0 4px; color: var(--text); }
.panel-note  { font-size: 0.8rem; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }

.year-chart { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.year-row {
  display: grid;
  grid-template-columns: 48px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 8px;
  color: var(--text);
}
.year-row:hover { background: var(--accent); text-decoration: none; }
.year-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.year-total { font-size: 0.85rem; font-weight: 700; text-align: right; }
.year-bar {
  display: flex;
  height: 22px;
  background: var(--bg);
  border-radius: 5px;
  overflow: hidden;
}
.bar-seg { display: block; height: 100%; }
.bar-bev  { background: var(--primary); }
.bar-phev { background: #7fbfa6; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th, .data-table td {
  text-align: right;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th { color: var(--muted); font-size: 0.78rem; text-transform: none; }
.data-table tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--border); }

/* --------------------------------- About ---------------------------------- */

.prose {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px 32px;
  max-width: 780px;
}
.prose h2 {
  font-size: 1.05rem;
  color: var(--primary-dark);
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.prose p { line-height: 1.65; margin: 0 0 12px; font-size: 0.95rem; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { line-height: 1.6; margin-bottom: 8px; font-size: 0.95rem; }

.attribution {
  font-weight: 600;
  color: var(--primary-dark);
  margin: 0 0 2px !important;
}

@media (max-width: 720px) {
  .prose { padding: 20px; }
}

/* ---------------------- Legend and click affordances ----------------------- */
/* Both added after user feedback: the chart encoded BEV/PHEV in colour with no
   key, and the register's cards gave no signal that they open a record. The
   cards lost their image tile earlier, which made them read as static list
   items - and on touch there is no hover state to hint otherwise. */

.chart-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

.list-hint {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 10px;
}

/* Always visible, not hover-dependent - hover does not exist on a phone, which
   is where the "is this clickable?" feedback came from. */
.card-cue {
  display: block;
  margin-top: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}
.vehicle-card:hover .card-cue { color: var(--primary-dark); }
.vehicle-card-title { color: var(--primary-dark); }

@media print {
  .list-hint, .card-cue { display: none !important; }
}