/* =============================================================================
   AURORA THEME (2026-10-05)
   -----------------------------------------------------------------------------
   Grant picked this direction from five rendered home concepts: a full-bleed
   blue / cyan / pink / purple aurora, Red Hat Display at ONE weight for the
   greeting (he rejected every version where "list?" was set differently), and
   Manrope for the UI.

   Loaded after styles.css and only overrides it. Deleting the <link> to this
   file puts the old look back, apart from the home markup and the flat eye,
   which live in index.html.

   Deliberately NOT changed here:
   - The map basemap and the dealer dots (Grant: "keep the map and dots the
     same"). Only the chrome around the map is restyled, in place, so nothing
     the map code measures moves.
   - The wordmark. It lives in styles.css, because scripts/verify_otto_switcher.py
     pins it identical across all three Ottos. Its Red Hat Display mark
     (2026-10-06) was changed there and in Tow and Fire together.
   - The Luckysheet grid. It paints its own white canvas.
   ============================================================================= */

:root {
    --aur-ink: #0b1b4a;
    --aur-panel: rgba(13, 17, 52, 0.62);
    --aur-panel-strong: rgba(12, 15, 44, 0.92);
    --aur-line: rgba(255, 255, 255, 0.15);
    --aur-line-strong: rgba(255, 255, 255, 0.3);
    --aur-chip: rgba(255, 255, 255, 0.1);
    --aur-chip-hover: rgba(255, 255, 255, 0.18);
    --font-display: 'Red Hat Display', 'Manrope', system-ui, sans-serif;
    --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Re-point the shared tokens so components that read them follow along. */
    --bg-deep: #0b1b4a;
    --glass: rgba(13, 17, 52, 0.55);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-hover: rgba(255, 255, 255, 0.12);
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-tertiary: rgba(255, 255, 255, 0.58);
}

body {
    font-family: var(--font-ui);
    background: var(--aur-ink);
}
.topbar-clock, .map-hover-tooltip, .route-endpoint, .leaflet-popup-content {
    font-family: var(--font-ui) !important;
}

/* ---------------------------------------------------------------- background */
.bg-canvas {
    background:
        radial-gradient(ellipse 70% 60% at 15% 20%, #2f6fe4 0%, transparent 60%),
        radial-gradient(ellipse 60% 70% at 85% 25%, #00c8ff 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 60% 95%, #8b3dff 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 40% 60%, #ff4fa3 0%, transparent 60%),
        linear-gradient(180deg, #0b1b4a, #17123f);
}
.bg-canvas .bg-orb-3 { display: none; }
/* The old drifting orbs become a fine grain (::before) and a dimmer (::after)
   that comes up on the working pages so numbers read against the colour. */
.bg-canvas::before {
    width: auto; height: auto; inset: 0; top: 0; left: 0;
    border-radius: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);
    background-size: 4px 4px;
    opacity: 0.3;
    mix-blend-mode: overlay;
    animation: none;
}
.bg-canvas::after {
    width: auto; height: auto; inset: 0; bottom: 0; right: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(8, 11, 34, 0.42), rgba(8, 11, 34, 0.64));
    opacity: 0;
    animation: none;
    transition: opacity 0.5s ease;
}
body.chatting:not(.greeting-mode) .bg-canvas::after,
body.my-dealers .bg-canvas::after,
body.management .bg-canvas::after,
body.trip-manager .bg-canvas::after,
body.table-view .bg-canvas::after { opacity: 1; }

/* ------------------------------------------------------------------- top bar */
.topbar { padding: 12px 24px; min-height: var(--topbar-h); }
/* The map starts under the bar, so the aurora behind it read as a bright strip.
   Solid navy there instead, matching the dealer list. */
body.map-view .topbar,
body.trip-manager.tm-map-mode .topbar {
    background: rgba(11, 14, 42, 0.97);
    border-bottom: 1px solid var(--aur-line);
}
body.my-dealers .topbar,
body.management .topbar,
body.chatting .topbar,
body.trip-manager .topbar { background: transparent; border-bottom: none; box-shadow: none; }

.topbar .topnav {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}
body.map-view .topbar .topnav { background: rgba(12, 15, 44, 0.72); }
.topbar .topnav button {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: 38px;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font: 600 13.5px var(--font-ui) !important;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease;
}
.topbar .topnav button:hover { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
.topbar .topnav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Active tab, from the view class on <body>. Home has no view class. */
body:not(.chatting):not(.map-view):not(.my-dealers):not(.management):not(.trip-manager):not(.table-view) .topnav .btn-home,
body.chatting .topnav .btn-ghost,
body.map-view .topnav .btn-map,
body.trip-manager .topnav .btn-map,
body.my-dealers .topnav .btn-mydealers,
body.management .topnav .btn-mgmt {
    background: #fff !important;
    color: var(--aur-ink) !important;
}
@media (max-width: 900px) {
    .topbar .topnav { display: none !important; }
    .topbar-hamburger {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 999px !important;
        color: #fff !important;
    }
    .topbar-menu {
        background: var(--aur-panel-strong) !important;
        border: 1px solid var(--aur-line) !important;
        border-radius: 18px !important;
        box-shadow: 0 24px 60px rgba(4, 6, 24, 0.5) !important;
    }
    .topbar-menu-item { font-family: var(--font-ui) !important; font-weight: 600 !important; border-radius: 12px !important; }
}

.topbar-clock { border-right: none; padding-right: 4px; }
.clock-time { color: rgba(255, 255, 255, 0.88); font-weight: 600; font-size: 13px; }
.clock-sep { color: rgba(255, 255, 255, 0.5); }
.clock-date { color: rgba(255, 255, 255, 0.78); font-weight: 600; font-size: 13px; }
.auth-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font: 700 11px var(--font-ui);
    color: #fff;
}

/* -------------------------------------------------------------------- shared */
.otto-eye-flat { display: block; }
.otto-eye-flat circle { animation: none; }

/* The Aurora ask bar: frosted pill, white send button. Used on Home, the New
   Chat screen and under a conversation. */
.input-bar,
.input-bar.focused {
    max-width: 720px;
    gap: 6px;
    padding: 7px 7px 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(4, 6, 24, 0.4);
}
.input-bar.focused { border-color: rgba(255, 255, 255, 0.6); }
.input-bar textarea { font-family: var(--font-ui); font-weight: 500; font-size: 17px; }
.input-bar textarea::placeholder { color: rgba(255, 255, 255, 0.74); font-weight: 500; }
.data-info-btn { color: rgba(255, 255, 255, 0.7); }
.data-info-tip { background: var(--aur-panel-strong); border-color: var(--aur-line); border-radius: 14px; }
.data-info-tip-title { color: #fff; }
.send-btn {
    width: 46px; height: 46px;
    background: #fff;
    box-shadow: none;
}
.send-btn:hover { background: #fff; box-shadow: 0 6px 20px rgba(4, 6, 24, 0.35); }
.send-btn svg { stroke: var(--aur-ink); stroke-width: 2.4; }

/* ---------------------------------------------------------------------- home */
.welcome {
    animation: aurFade 0.6s ease both;
    padding: calc(var(--topbar-h) + 12px) 24px 72px;
}
@keyframes aurFade { from { opacity: 0; } to { opacity: 1; } }
.welcome .aur-eye {
    width: clamp(64px, 10vh, 84px);
    height: clamp(64px, 10vh, 84px);
    margin-bottom: clamp(16px, 3.6vh, 30px);
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.35));
}
.welcome .aur-eye .otto-eye { width: 100%; height: 100%; }

/* One weight, one colour, edge to edge. The greeting rotates through the
   hourly sayings, so it is sized to the viewport rather than to one string. */
.chat-greeting-text {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.98;
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    text-wrap: balance;
    max-width: min(1080px, 92vw);
}
.welcome .welcome-greet-text {
    font-size: clamp(38px, min(9.5vh, 8.4vw), 98px);
    margin: 0 0 clamp(20px, 4vh, 34px);
}
.home-input { width: 100%; max-width: 720px; }
.home-input .input-bar { max-width: 100%; }

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    font: 600 13.5px var(--font-ui);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hero-pill:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-1px); }
.hero-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-pill svg {
    width: 15px; height: 15px;
    fill: none; stroke: #fff; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.home-foot {
    position: fixed;
    left: 40px; right: 40px; bottom: 26px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font: 600 12.5px var(--font-ui);
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 5;
}
@media (max-width: 700px), (max-height: 620px) {
    .home-foot { display: none; }
}
@media (max-width: 600px) {
    .hero-pill { height: 40px; padding: 0 14px 0 12px; font-size: 13px; }
}

/* ------------------------------------------------------- New Chat greeting */
.chat-greeting { max-width: 880px; gap: 22px; }
.chat-greeting .greet-aurora,
.chat-greeting .greet-particle,
.chat-greeting .orb-ring,
.chat-greeting .eye-glow,
.chat-greeting .greet-reflection { display: none; }
.chat-greeting-eye {
    width: 84px; height: 84px;
    animation: aurFade 0.6s ease both;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.35));
}
.chat-greeting-eye::before, .chat-greeting-eye::after { display: none; }
.chat-greeting-eye .otto-eye { width: 100%; height: 100%; }
.chat-greeting .chat-greeting-text { font-size: clamp(34px, min(7.4vh, 6.6vw), 76px); }
.chat-greeting-input { max-width: 720px; }
.chat-suggestion {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font: 600 13.5px var(--font-ui);
    padding: 11px 18px;
    border-radius: 999px;
    box-shadow: none;
}
.chat-suggestion:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: none;
}
#resumeBar {
    background: var(--aur-panel) !important;
    border: 1px solid var(--aur-line) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
#resumeBar button {
    border-radius: 999px !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
}
#resumeBar button:first-of-type {
    background: #fff !important;
    color: var(--aur-ink) !important;
    border-color: #fff !important;
}

/* -------------------------------------------------------------- conversation */
.input-area { background: linear-gradient(to top, rgba(9, 12, 38, 0.7) 0%, rgba(9, 12, 38, 0.35) 55%, transparent 100%); }
.messages { max-width: 860px; gap: 22px; }
.msg-orb { width: 36px; height: 36px; }
.msg-bubble { font-size: 14.5px; line-height: 1.65; }
.msg.user .msg-bubble {
    background: #fff;
    border: none;
    color: var(--aur-ink);
    font-weight: 600;
    border-radius: 22px 22px 6px 22px;
    padding: 13px 20px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.msg.user .msg-bubble strong { color: var(--aur-ink); }
.msg.assistant .msg-bubble {
    background: var(--aur-panel);
    border: 1px solid var(--aur-line);
    border-radius: 6px 22px 22px 22px;
    padding: 20px 24px;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 70px rgba(4, 6, 24, 0.3);
}
.msg.assistant .msg-bubble strong { color: #fff; font-weight: 700; }
.msg.assistant .msg-bubble h1,
.msg.assistant .msg-bubble h2,
.msg.assistant .msg-bubble h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
.think-dots { background: var(--aur-panel); border-color: var(--aur-line); border-radius: 6px 22px 22px 22px; }
.think-dots span, .think-dots span:nth-child(2), .think-dots span:nth-child(3) { background: #fff; }
.think-status { color: rgba(255, 255, 255, 0.7); }
.msg-feedback button { color: rgba(255, 255, 255, 0.7); }

/* ----------------------------------------------------------------- map chrome
   Same positions and sizes as before; only surfaces, type and shape change. */
/* Near-opaque, no backdrop blur: the list sits over a live WebGL map and the
   original had no blur either, so phones keep their frame rate when panning. */
.side-list {
    background: rgba(11, 14, 42, 0.96);
    border-left: 1px solid var(--aur-line);
}
.sl-header-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
}
.sl-header-count { color: rgba(255, 255, 255, 0.72); }
.sl-search {
    margin: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--aur-line);
}
.sl-search-icon { color: rgba(255, 255, 255, 0.7); }
.sl-search input::placeholder { color: rgba(255, 255, 255, 0.62); }
.sl-row { border-radius: 12px; }
.sl-row:hover { background: rgba(255, 255, 255, 0.07); }
.sl-row.sl-active { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.sl-expand-btn { background: var(--aur-panel-strong); border-color: var(--aur-line); color: #fff; border-radius: 999px; }
.sl-collapse-btn { color: rgba(255, 255, 255, 0.7); }

.filter-pill {
    border-radius: 999px;
    background: rgba(12, 15, 44, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-ui);
    font-weight: 600;
}
.filter-pill:hover { background: rgba(26, 32, 82, 0.86); color: #fff; }
.filter-pill.has-filter { background: #fff; color: var(--aur-ink); border-color: #fff; }
.filter-pill.has-filter .filter-pill-count { background: var(--aur-ink); color: #fff; }
.filter-pill-count { background: rgba(255, 255, 255, 0.18); color: #fff; }
.filter-dropdown,
.map-search-results,
.scoring-key {
    background: var(--aur-panel-strong);
    border: 1px solid var(--aur-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(4, 6, 24, 0.5);
}
.filter-row { border-radius: 10px; color: rgba(255, 255, 255, 0.86); }
.filter-row:hover { background: rgba(255, 255, 255, 0.08); }
.filter-row.unchecked { color: rgba(255, 255, 255, 0.55); }
.filter-row:not(.unchecked) .filter-check { background: #fff; color: var(--aur-ink); border-color: #fff; }
.filter-toggle-btn { border-radius: 999px; font-family: var(--font-ui); font-weight: 600; }

.map-stats {
    border-radius: 999px;
    background: rgba(12, 15, 44, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-ui);
}
.map-stats b, .map-stats strong { font-family: var(--font-display); }
.map-legend {
    border-radius: 999px;
    background: rgba(12, 15, 44, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.map-legend-item { color: rgba(255, 255, 255, 0.86); font-weight: 600; }
.map-search-input-wrap {
    border-radius: 999px;
    background: rgba(12, 15, 44, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.map-search-input-wrap:focus-within { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 12px 32px rgba(4, 6, 24, 0.4); }
.map-search-result { border-radius: 12px; }
.map-search-result-name mark { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.leaflet-control-zoom { border-radius: 999px !important; overflow: hidden; }
.leaflet-control-zoom a {
    background: rgba(12, 15, 44, 0.82) !important;
    color: #fff !important;
}
.leaflet-control-zoom a:hover { background: rgba(32, 40, 96, 0.92) !important; }

.dealer-panel {
    background: rgba(11, 14, 42, 0.94);
    border-left: 1px solid var(--aur-line);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}
.dp-close { border-radius: 50%; background: rgba(255, 255, 255, 0.1); border-color: var(--aur-line); color: #fff; }
.dp-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.dp-loc, .dp-rating { color: rgba(255, 255, 255, 0.7); }
.dp-stat { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; }
.dp-stat-val { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.dp-stat-lbl { color: rgba(255, 255, 255, 0.62); }
.dp-section-title { color: rgba(255, 255, 255, 0.66); }
.dp-section-count { background: rgba(255, 255, 255, 0.12); color: #fff; }
.dp-brand { font-family: var(--font-display); }
.dp-bt-track { background: rgba(255, 255, 255, 0.1); }

/* Ask Otto on the map: the floating eye stays, the label becomes a white pill. */
.otto-fab { background: rgba(12, 15, 44, 0.86); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 12px 32px rgba(4, 6, 24, 0.45); }
.otto-fab-label { background: #fff; border-color: #fff; color: var(--aur-ink); font-weight: 700; border-radius: 999px; }
.otto-popup { background: var(--aur-panel-strong); border: 1px solid var(--aur-line); border-radius: 22px; box-shadow: 0 30px 80px rgba(4, 6, 24, 0.55); }
.otto-popup-close { border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; }
.otto-popup-input { border-radius: 999px; background: rgba(255, 255, 255, 0.1); border-color: var(--aur-line); }
.otto-popup-send { background: #fff; color: var(--aur-ink); }
.otto-popup-send svg { stroke: var(--aur-ink); }

/* -------------------------------------------------------------- My Dealers */
.my-dealers-wrap { background: transparent; top: 64px; }
.md-h { border-bottom-color: var(--aur-line); }
.md-eyebrow-q { color: rgba(255, 255, 255, 0.72); }
.md-h-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    background: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.md-h-lede { color: rgba(255, 255, 255, 0.78); }
.md-list-title { font-family: var(--font-display); letter-spacing: -0.02em; }
/* No backdrop blur on cards: an 86-card grid ran hot with it (see styles.css). */
.md-card,
.md-rep-card-v2 {
    background: rgba(14, 18, 52, 0.72);
    border: 1px solid var(--aur-line);
    border-radius: 20px;
}
.md-card:hover,
.md-rep-card-v2:hover {
    background: rgba(24, 30, 78, 0.82);
    border-color: var(--aur-line-strong);
}
.md-card-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.md-card-stat-val, .md-stat-value { font-family: var(--font-display); letter-spacing: -0.02em; }
.md-card-statgrp-label, .md-card-stat-cap, .md-stat-label, .md-card-foot-label { color: rgba(255, 255, 255, 0.64); }
.md-card-stats, .md-card-foot { border-color: rgba(255, 255, 255, 0.12); }
.md-search, .md-sort {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--aur-line);
    color: #fff;
    font-family: var(--font-ui);
}
.md-sort option { background: #121640; }
.md-modal, .md-modal-card, .md-modal-inner {
    background: var(--aur-panel-strong);
    border-color: var(--aur-line);
}

/* -------------------------------------------------------------- Management */
.management-wrap {
    top: 76px;
    left: 24px; right: 24px; bottom: 24px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--aur-line) !important;
    box-shadow: 0 24px 70px rgba(4, 6, 24, 0.4) !important;
    background: rgba(12, 15, 44, 0.66) !important;
}
.mgmt-fab {
    background: rgba(12, 15, 44, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    opacity: 1;
}
.mgmt-fab-meta { color: rgba(255, 255, 255, 0.82); font-weight: 600; }
.mgmt-fab-btn { border-radius: 999px; font-family: var(--font-ui); font-weight: 600; }
.mgmt-fab-btn-primary { background: #fff; border-color: #fff; color: var(--aur-ink); }
.mgmt-fab-btn-primary:hover:not(:disabled) { background: #fff; border-color: #fff; }
.mgmt-loading, .mgmt-empty { font-family: var(--font-ui); }
.mgmt-loading-msg, .mgmt-empty-title { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ---------------------------------------------------------- bento home
   2026-10-06. Grant picked the bento from rendered concepts ("build original
   bento and ship"): a greeting on top, the map of where trucks sold this week
   on the left, six boxes on the right. Markup: HomeHub.markup() in
   js/home-hub.js. Data: /api/home-hub. Every box opens the tab behind it.
   No ask bar on the home ("no chatbar"): the chat input stays in its own
   area, hidden while the bento shows; New Chat in the nav opens chat. */
body:has(.welcome-hub) .bg-canvas::after { opacity: 1; }
body:has(.welcome-hub) .input-area { display: none; }
.welcome.welcome-hub {
    display: block;
    text-align: left;
    padding: calc(var(--topbar-h) + 14px) 0 24px;
    min-height: 100%;
}
.hub {
    --hub-pink: #ff4fa3;
    --hub-cyan: #4fd8ff;
    --hub-green: #3ee08f;
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.86fr 0.86fr 0.86fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    height: calc(100vh - var(--topbar-h) - 56px);
    min-height: 620px;
}
.hub-greet { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; padding: 0 4px; min-width: 0; }
.welcome.welcome-hub .welcome-greet-text {
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 8px 0 0;
    max-width: none;
    text-align: left;
}

.hub-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 18px 20px;
    text-align: left;
    color: #fff;
    font: 500 13px/1.4 var(--font-ui);
    background: rgba(13, 17, 52, 0.62);
    border: 1px solid var(--aur-line);
    border-radius: 22px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.hub-tile:hover { background: rgba(22, 28, 74, 0.74); border-color: var(--aur-line-strong); }
.hub-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hub-lbl { display: block; font: 700 11px var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); }
.hub-big { display: block; margin: 14px 0 10px; font: 700 64px/0.9 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hub-cyan { color: var(--hub-cyan); }
.hub-green { color: var(--hub-green); }
.hub-delta { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.hub-up { color: var(--hub-green); font-weight: 700; }
.hub-down { color: var(--hub-pink); font-weight: 700; }
.hub-sub { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.74); }
.hub-note { display: block; margin-top: 18px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.hub-chart { display: block; flex: 1; min-height: 70px; margin-top: 14px; }
.hub-chart svg { display: block; width: 100%; height: 100%; }
.hub-list { display: block; margin-top: 10px; }
.hub-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 13.5px; }
.hub-row:last-child { border-bottom: 0; }
.hub-row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hub-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-dim { color: rgba(255, 255, 255, 0.5); font-weight: 700; }
.hub-bars { display: grid; gap: 9px; margin-top: 16px; }
.hub-bar { display: grid; grid-template-columns: 84px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 700; }
.hub-bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.86); }
.hub-bar-t { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.hub-bar-t > span { display: block; height: 100%; border-radius: 999px; }
.hub-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.hub-btn {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.1); font: 600 12.5px var(--font-ui); white-space: nowrap;
}
.hub-btn-foot { position: absolute; left: 20px; bottom: 18px; }

.hub-map { grid-column: 1 / 3; grid-row: 2 / 4; padding: 0; }
.hub-cap { position: absolute; left: 20px; right: 20px; top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; z-index: 1; }
.hub-cap-t { display: block; margin-top: 6px; font: 700 24px var(--font-display); letter-spacing: -0.02em; }
.hub-mapsvg { position: absolute; left: 10px; right: 10px; top: 76px; bottom: 10px; }
.hub-mapsvg svg { display: block; width: 100%; height: 100%; }

/* Tablet: two columns, the map full width, boxes size to their content. */
@media (max-width: 1100px) {
    .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; min-height: 0; }
    .hub-greet, .hub-map { grid-column: 1 / -1; }
    .hub-map { grid-row: auto; height: 360px; }
    .hub-tile:not(.hub-map) { min-height: 240px; }
    .hub-btn-foot { position: static; margin-top: 16px; align-self: flex-start; }
}
/* Phone: one column. */
@media (max-width: 640px) {
    .hub { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hub-map { height: 280px; }
    .hub-big { font-size: 52px; }
    .hub-cap-t { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .welcome, .chat-greeting-eye { animation: none; }
    .hero-pill, .chat-suggestion, .hub-tile { transition: none; }
}