:root{
  --bg:#0b0f14; --panel:#0f1621; --panel-2:#121b29; --muted:#7d8aa3; --text:#e9f1ff;
  --accent:#6fb0ff; --accent-2:#a9d1ff; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);background:radial-gradient(1200px 600px at 20% -10%, #113, transparent),linear-gradient(#071019,#0b0f14 35%)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(7, 15, 25, .72);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.brand{display:flex;align-items:center;gap:12px;padding:12px 0;font-weight:700}
.brand-logo{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #a9d1ff,#6fb0ff 60%, #0b1b2b);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}

main{padding:24px 0}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width: 960px){.grid{grid-template-columns:1fr}}

h1{font-size:clamp(22px,3vw,34px);margin:6px 0 8px}
.meta{color:var(--muted);font-size:14px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#cfe6ff;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b1b2b;font-weight:800}
.btn.ghost{background:#1c2a42;color:var(--text);border:1px solid rgba(255,255,255,.1)}

.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:6px 0 0}
.specs dt{color:#cfe6ff}
.specs dd{margin:0;color:var(--text)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
@media (max-width: 960px){.gallery{grid-template-columns:repeat(2,1fr)} .gallery img{height:140px}}

.mot{display:grid;gap:8px}
.mot .item{background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}
.mot .item .headline{display:flex;justify-content:space-between}


/* --- Inline styles migrated from index.html --- */
/* Subtle "show more" link in the table */
#regTable a.show-more {
  margin-left: 4px;
  font-weight: normal;
  color: inherit;            /* same colour as the Notes text */
  text-decoration: underline; 
  opacity: 1;                /* same brightness */
}
#regTable a.show-more:hover {
  text-decoration: underline;
  opacity: 0.85;             /* tiny fade on hover */
}
}
  /* Keep header text + sort arrow inline */
#regTable th.sortable {
  white-space: nowrap;
}

#regTable th.sortable .sort {
  display: inline-block;
  margin-left: 6px;   /* space between text and arrow */
  vertical-align: middle;
  opacity: 0.7;       /* optional, make arrow slightly lighter */
}

  /* Keep the "More" button clear of the rounded table edge */
#regTable thead th:last-child,
#regTable tbody td:last-child {
  text-align: right;
  padding-right: 18px;   /* extra breathing room */
  white-space: nowrap;   /* avoid wrap on narrow screens */
}

/* Ensure the small primary pill doesn't wrap */
#regTable .btn-mini.primary {
  white-space: nowrap;
}

/* Stats card – horizontal: Total • Average • Pie (RHS) */
.stats-card .stats-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 220px; /* chart width on RHS */
  gap: 8px 14px;
  align-items: center;
  padding: 12px;
}

.stats-card .metric{
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  min-height: 120px;
}

.stats-card .metric .label{
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .2px;
}

.stats-card .metric .value{
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 34px); /* big number */
  line-height: 1.1;
  margin-top: 6px;
}

.stats-card .metric .sub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.stats-card .chart{
  justify-self: end;
  width: 100%;
  max-width: 220px; /* keep chart compact */
}

.stats-card canvas{
  width: 100%;
  height: 160px; /* smaller pie */
}

/* Stack on small screens */
@media (max-width: 960px){
  .stats-card .stats-grid{
    grid-template-columns: 1fr; /* stack */
  }
  .stats-card .chart{
    justify-self: stretch;
    max-width: none;
  }
}

  .thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background:#1a2433; display:block; }

    :root {
      --bg: #0b0f14;
      --panel: #0f1621;
      --panel-2: #121b29;
      --muted: #7d8aa3;
      --text: #e9f1ff;
      --accent: #6fb0ff;
      --accent-2: #a9d1ff;
      --ok: #3bd16f;
      --warn: #ffd166;
      --danger: #ff6b6b;
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 600px at 20% -10%, #113, transparent), linear-gradient(#071019, #0b0f14 35%); }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    header { position: sticky; top: 0; backdrop-filter: blur(8px); background: rgba(7, 15, 25, 0.72); border-bottom: 1px solid rgba(255,255,255,.06); z-index: 50; }
    .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .2px; }
    .brand-logo { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #a9d1ff, #6fb0ff 60%, #0b1b2b); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
    .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #cfe6ff; font-size: 13px; }

    main { padding: 26px 0 0; }

    /* Controls */
    .controls { display: flex; flex-wrap: wrap; gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding: 14px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); }
    .controls input, .controls select { background: var(--panel-2); border: 1px solid rgba(255,255,255,.1); color: var(--text); padding: 12px 12px; border-radius: 12px; outline: none; }
    .controls .grow { flex: 1 1 280px; }
    .controls button { padding: 12px 14px; border-radius: 12px; background: #1c2a42; border: 1px solid rgba(255,255,255,.1); color: var(--text); font-weight: 700; cursor: pointer; }
    .controls button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b1b2b; }

    /* Table */
    .panel { background: var(--panel); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); box-shadow: var(--shadow); }
    .table-wrap { overflow: auto; border-radius: var(--radius); }
    table { width: 100%; border-collapse: collapse; min-width: 760px; }
    thead th { position: sticky; top: 0; background: #152235; color: #cfe6ff; text-align: left; font-weight: 700; letter-spacing: .2px; }
    th, td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
    tbody tr:hover { background: rgba(255,255,255,.04); }
    tbody tr.active { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(111,176,255,.08); }
    th.sortable { cursor: pointer; }
    th.sortable .sort { opacity: .6; font-size: 12px; margin-left: 6px; }

    .table-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--muted); }
    .pagination { display: flex; align-items: center; gap: 6px; }
    .pagination button { background: var(--panel-2); border: 1px solid rgba(255,255,255,.1); color: var(--text); padding: 8px 10px; border-radius: 10px; cursor: pointer; }
    .pagination button[disabled] { opacity: .5; cursor: not-allowed; }
    .pagination .page-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b1b2b; font-weight: 800; }

    /* Map */
    
    
    
    #map {
  height: 480px;          /* or whatever size fits your design */
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}


/* Prevent global img rules breaking Leaflet tiles */
.leaflet-container img { max-width: none !important; }

    #map { width: 100%; height: 520px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); }

    footer { margin-top: 30px; padding: 24px 0 40px; color: #bcd0ef; background: radial-gradient(800px 400px at 80% -20%, rgba(111,176,255,.08), transparent); border-top: 1px solid rgba(255,255,255,.06); }

    /* Responsive */
    @media (max-width: 960px) {
      #map { height: 440px; }
    }
    @media (max-width: 640px) {
      .nav-links { display: none; }
      #map { height: 380px; }
    }
    /* Welcome band */
    .welcome {
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(111,176,255,.10), transparent),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .welcome-inner {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 28px;
      padding: 42px 0 28px;
    }
    .welcome-copy .eyebrow {
      margin: 0 0 6px;
      color: #cfe6ff;
      font-size: 12px;
      letter-spacing: .15em;
      text-transform: uppercase;
      opacity: .85;
    }
    .welcome-title {
      margin: 0 0 8px;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.05;
    }
    .welcome-lead {
      color: var(--muted);
      margin: 0 0 14px;
      font-size: 1.06rem;
    }
    .welcome-points {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px;
    }
    .welcome-points .point {
      padding: 8px 10px;
      font-size: 12px;
      color: #c7d7ef;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
    }
    .welcome-actions { display: flex; gap: 10px; align-items: center; }
    .welcome-actions .ghost {
      padding: 12px 14px; border-radius: 12px;
      background: #1c2a42; border: 1px solid rgba(255,255,255,.1);
      color: var(--text); font-weight: 700; cursor: pointer;
    }

   .welcome-card {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
  margin-top: 34px;   /* pixel-perfect alignment with first bullet */
  align-self: start;
}

@media (max-width: 960px) {
  .welcome-inner { grid-template-columns: 1fr; }
  .welcome-card { margin-top: 0; } /* reset on mobile */
}
/* Recent entry showcase */
.recent-wrap { display:grid; grid-template-columns: 200px 1fr; gap:14px; padding:12px; height:100%; }
.recent-photo { width:100%; aspect-ratio: 4/3; border-radius:12px; object-fit:cover; background:#1a2433; }
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.06); color:#cfe6ff; }
.badge.danger { background: rgba(255,107,107,.18); border-color: rgba(255,107,107,.35); color:#ffd9d9; }
.recent-title { margin:8px 0 4px; font-weight:800; font-size:18px; }
.recent-meta { color: var(--muted); font-size:14px; margin:0 0 10px; }
.recent-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn-mini { padding:8px 10px; border-radius:10px; background:#1c2a42; border:1px solid rgba(255,255,255,.1); color:var(--text); font-weight:700; cursor:pointer; }
.btn-mini.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1b2b; }
.recent-header { padding: 12px 12px 0; }

/* Ribbon theme hooks (uses existing color tokens if you already have them) */
:root {
  --container: 1100px;
}

/* Ensure pages start below the sticky ribbon */
main { margin-top: 0; }

/* Desktop: prevent stray horizontal scrollbars site-wide */
@media (min-width: 961px) {
  html, body { max-width: 100%; overflow-x: clip; } /* clip is smoother than hidden */
}

/* Mobile & tablets: allow horizontal scroll for carousels/tables etc */
@media (max-width: 960px) {
  html, body { overflow-x: visible; } /* explicitly override any prior rule */
}


@supports (width: 100dvw) {
  body { width: 100dvw; }
}
/* ---------- Mobile ribbon hardening (site-wide) ---------- */

/* Never let anything create horizontal overflow */
@media (min-width: 961px){
  html, body { overflow-x: clip; } /* or hidden */
}



/* Ribbon bar is a flexible, wrapping row */
#site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--nav-bg, rgba(10,10,14,.85));
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
#site-header .bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;                  /* <- wrap instead of overflowing */
  padding: 8px 12px;
  max-width: var(--page-max, 1100px);
  margin: 0 auto;
  min-width: 0;
}

/* Brand never forces overflow */
#site-header .brand { min-width: 0; flex: 0 1 auto; }

/* Nav row can shrink and also scroll horizontally if really tight */
#site-header .nav {
  display: flex; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; /* graceful on very small screens */
  scrollbar-width: none;
}
#site-header .nav::-webkit-scrollbar { display: none; }

/* Pills/buttons won’t break layout or stretch vertically */
#site-header .nav a,
#site-header .nav button {
  display: inline-grid; place-items: center;
  white-space: nowrap;               /* keep labels on one line */
  line-height: 1;                    /* stop tall pills on zoom */
  padding: .55rem .9rem;
  border-radius: 9999px;
  flex: 0 0 auto;                    /* don’t try to stretch */
}

/* Search scales, never pushes the row off-screen */
#site-header .search { flex: 1 1 220px; min-width: 140px; }
#site-header .search input {
  width: 100%; min-width: 0; box-sizing: border-box;
}

/* Dropdowns stay within viewport on mobile */
#site-header .dropdown,
#site-header .menu {
  max-width: calc(100vw - 16px);
  inset-inline-start: auto;          /* avoid negative-left positioning */
  transform: translateX(0);          /* prevent off-screen transforms */
}
/* --- Fix per-car spec text stacking (desktop) --- */
@media (min-width: 901px) {
  /* Force horizontal writing and normal wrapping inside the details cards */
  .details-section,
  .details-section * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Make sure the grid columns can actually grow */
  .details-grid,
  .details-section,
  .specs,
  .specs dt,
  .specs dd {
    min-width: 0 !important;
  }
}
/* Per-car specs grid: keep value columns wide enough on desktop */
@media (min-width: 901px){
  .specs{
    grid-template-columns: 150px minmax(260px,1fr) 150px minmax(260px,1fr);
  }
  .specs dt, .specs dd{
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}