/* ==========================================================================
   REVVARO — /cars  (the car library)
   Rides on style.css for the header, footer, buttons and design tokens.
   Everything here is namespaced .lib-* so it can't leak into other pages.
   ========================================================================== */

.lib-page { background: #fff; }

.lib-main {
    padding: calc(var(--header-height, 80px) + 34px) 0 70px;
    background:
        radial-gradient(1100px 420px at 50% -8%, rgba(0,90,156,.07), transparent 62%),
        linear-gradient(180deg, #F7FAFC 0%, #FFFFFF 340px);
}

/* ---------- breadcrumb ---------- */
.lib-crumb {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 13px;
    color: #94A3B8;
    margin-bottom: 14px;
}
.lib-crumb a { color: var(--color-primary, #005A9C); }
.lib-crumb a:hover { text-decoration: underline; }
.lib-crumb strong { color: #4A5568; font-weight: 700; }
.lib-crumb span { margin: 0 7px; }

/* ---------- page head ---------- */
.lib-h1 {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: clamp(30px, 4.6vw, 46px);
    font-weight: 900;
    letter-spacing: -.028em;
    line-height: 1.1;
    color: var(--color-text-heading, #1A202C);
    margin: 0 0 14px;
}
.lib-lede {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 16px;
    line-height: 1.68;
    color: var(--color-text-body, #4A5568);
    max-width: 660px;
    margin: 0 0 32px;
}

/* ---------- filter ---------- */
.lib-filter {
    position: relative;
    max-width: 340px;
    margin: 0 0 24px;
}
.lib-filter i {
    position: absolute;
    left: 15px; top: 50%; transform: translateY(-50%);
    color: #A0AEC0; font-size: 14px; pointer-events: none;
}
.lib-filter input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 15px;
    color: var(--color-text-heading, #1A202C);
    background: #fff;
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 10px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.lib-filter input:focus {
    border-color: var(--color-primary, #005A9C);
    box-shadow: 0 0 0 3px rgba(0,90,156,.12);
}
.lib-none {
    font-family: var(--font-body, 'Roboto', sans-serif);
    color: #718096; font-size: 15px; padding: 20px 2px;
}

/* ---------- card grids (makes & models) ---------- */
.lib-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.lib-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 44px 20px 22px;
    background: #fff;
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 14px;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lib-card:hover {
    transform: translateY(-2px);
    border-color: #CBD9E6;
    box-shadow: 0 14px 30px -16px rgba(16,24,40,.28);
    color: inherit;
}
.lib-card-title {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 19px; font-weight: 900; letter-spacing: -.018em;
    color: var(--color-text-heading, #1A202C);
    line-height: 1.2;
}
.lib-card-meta {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 13.5px; color: #718096;
}
.lib-card-score {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 13px; color: #718096; margin-top: 4px;
}
.lib-card-score strong {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 15px; font-weight: 900;
    color: var(--bc, #005A9C); margin-right: 5px;
}
.lib-chev {
    position: absolute;
    right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #CBD5E0;
    transition: transform .16s ease, color .16s ease;
}
.lib-card:hover .lib-chev,
.lib-year:hover .lib-chev { color: var(--color-primary, #005A9C); transform: translateY(-50%) translateX(3px); }

/* ---------- year rows (the deepest level before the detail page) ---------- */
.lib-years { display: flex; flex-direction: column; gap: 12px; }
.lib-year {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 18px 46px 18px 20px;
    background: #fff;
    border: 1px solid var(--color-border, #E2E8F0);
    border-left: 4px solid var(--bc, #005A9C);
    border-radius: 14px;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lib-year:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px rgba(16,24,40,.28);
    color: inherit;
}
.lib-year-num {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 30px; font-weight: 900; letter-spacing: -.035em;
    color: var(--color-text-heading, #1A202C);
    line-height: 1;
}
.lib-year-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lib-year-name {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 16px; font-weight: 800; letter-spacing: -.012em;
    color: var(--color-text-heading, #1A202C);
}
.lib-year-meta {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 12.5px; color: #94A3B8;
}
.lib-trims { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-trim {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 11.5px; font-weight: 500;
    color: #4A5568; background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 3px 9px; border-radius: 999px;
    white-space: nowrap;
}
.lib-year-score { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.lib-year-score strong {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 25px; font-weight: 900; letter-spacing: -.03em;
    color: var(--bc, #005A9C); line-height: 1.1;
}
.lib-year-band {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 12px; font-weight: 800; color: var(--bc, #005A9C);
}

/* ---------- empty state & closing CTA ---------- */
.lib-empty {
    text-align: center;
    padding: 56px 24px;
    background: #F7FAFC;
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 16px;
}
.lib-empty i { font-size: 38px; color: #CBD5E0; margin-bottom: 16px; display: block; }
.lib-empty h2 { font-size: 22px; font-weight: 900; margin: 0 0 8px; }
.lib-empty p {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 15px; color: #718096; max-width: 420px; margin: 0 auto 22px; line-height: 1.6;
}

.lib-cta {
    background: #F7FAFC;
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 16px;
    padding: 34px 28px;
    text-align: center;
    margin: 46px 0 26px;
}
.lib-cta h2 {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: clamp(20px, 2.8vw, 26px); font-weight: 900;
    letter-spacing: -.02em; margin: 0 0 10px;
}
.lib-cta p {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 15px; line-height: 1.65; color: #4A5568;
    max-width: 540px; margin: 0 auto 22px;
}

.lib-disclaimer {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 12.5px; line-height: 1.6; color: #94A3B8; max-width: 760px;
}

.lib-page .hidden { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
    .lib-main { padding-top: calc(var(--header-height, 80px) + 22px); }
    .lib-grid { grid-template-columns: 1fr; gap: 12px; }
    .lib-filter { max-width: 100%; }

    /* The year row drops the fixed number column and stacks, so long model
       names and trim chips have the full width instead of squeezing. */
    .lib-year {
        grid-template-columns: 1fr auto;
        gap: 6px 14px;
        padding: 16px 40px 16px 16px;
    }
    .lib-year-num { grid-column: 1; font-size: 24px; }
    .lib-year-score { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .lib-year-body { grid-column: 1; }
    .lib-year-score strong { font-size: 21px; }
}

/* A single-vehicle sample is flagged rather than dressed up. The muted amber
   reads as "note", not "error" — the page is still useful, it just shouldn't
   be mistaken for a large sample. */
.lib-thin { color: #B7791F; font-weight: 500; }

/* ==========================================================================
   LOGGED-IN HEADER on the public /cars pages
   A signed-in visitor browsing the library is inside the app, so they get the
   app's header rather than the marketing one. Rendered server-side by
   includes/app_header.php — these pages are indexed, so the header has to be
   right on first paint rather than after a session probe.

   Mirrors the in-app header in app2/css/styles.css. Kept as a separate,
   .lib-* namespaced copy on purpose: the landing pages never load the app
   stylesheet, and cross-wiring the two would couple the marketing site to the
   app's CSS for no benefit.
   ========================================================================== */

.lib-header-app .main-nav { display: flex; align-items: center; gap: 22px; }

.lib-app-links {
    display: flex; align-items: center; gap: 4px;
    list-style: none; margin: 0; padding: 0;
}
.lib-app-links li { display: flex; }
.lib-app-links .nav-link {
    display: flex; align-items: center;
    height: 38px; padding: 0 14px;
    border-radius: 8px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 14.5px; font-weight: 500; line-height: 1;
    color: var(--color-text-heading, #1A202C);
    white-space: nowrap;                    /* the whole point — never wrap */
    transition: background-color .18s ease, color .18s ease;
}
.lib-app-links .nav-link:hover {
    background: var(--color-background-light, #F7FAFC);
    color: var(--color-primary, #005A9C);
}
.lib-app-links .nav-link[aria-current="page"] {
    background: rgba(0, 90, 156, .08);
    color: var(--color-primary, #005A9C);
    font-weight: 700;
}
.lib-app-links .nav-link::after { display: none; }   /* kill the marketing underline */

.lib-app-actions { display: flex; align-items: center; gap: 10px; }

.lib-credit {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 13px;
    border-radius: 8px;
    background: var(--color-background-light, #F7FAFC);
    border: 1px solid var(--color-border, #E2E8F0);
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 14px; font-weight: 800; line-height: 1;
    color: var(--color-text-heading, #1A202C);
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease;
}
.lib-credit i { font-size: 13px; color: var(--color-primary, #005A9C); }
.lib-credit:hover { border-color: #CBD9E6; background: #EDF2F7; color: var(--color-text-heading, #1A202C); }
.lib-credit.low { background: #FFF5F5; border-color: #FEB2B2; color: #C53030; }
.lib-credit.low i { color: #C53030; }

.lib-header-app .cta-button.lib-buy {
    display: inline-flex; align-items: center;
    height: 38px; padding: 0 18px;
    border-radius: 8px; font-size: 13.5px; letter-spacing: .04em;
    white-space: nowrap;
}

.lib-account { position: relative; }
.lib-account-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 9px 0 6px;
    background: transparent;
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 8px; cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}
.lib-account-btn:hover { border-color: #CBD9E6; background: var(--color-background-light, #F7FAFC); }
.lib-account-btn i { font-size: 11px; color: #A0AEC0; }

.lib-avatar {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--color-primary, #005A9C); color: #fff;
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 12.5px; font-weight: 900; line-height: 1;
}

.lib-account-menu {
    position: absolute; top: calc(100% + 9px); right: 0;
    min-width: 226px;
    background: #fff;
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .22);
    padding: 7px; z-index: 1200;
}
.lib-account-menu[hidden] { display: none; }
.lib-account-head {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 11px 12px;
    border-bottom: 1px solid var(--color-border, #E2E8F0);
    margin-bottom: 6px;
}
.lib-account-head strong {
    font-family: var(--font-heading, 'Lato', sans-serif);
    font-size: 14.5px; font-weight: 800; color: var(--color-text-heading, #1A202C);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-account-head span { font-size: 12.5px; color: #718096; }
.lib-account-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 11px; border-radius: 8px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 14px; color: var(--color-text-heading, #1A202C);
    white-space: nowrap; transition: background-color .15s ease;
}
.lib-account-item i { width: 15px; font-size: 13px; color: #A0AEC0; text-align: center; }
.lib-account-item:hover { background: var(--color-background-light, #F7FAFC); color: var(--color-text-heading, #1A202C); }
.lib-account-out { color: #C53030; }
.lib-account-out i { color: #C53030; }

@media (max-width: 1180px) {
    .lib-header-app .main-nav { gap: 14px; }
    .lib-app-links .nav-link { padding: 0 10px; font-size: 14px; }
    .lib-header-app .cta-button.lib-buy { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 1050px) {
    /* One tap away in the account menu; drop it before anything wraps. */
    .lib-header-app .cta-button.lib-buy { display: none; }
}

/* ---------- mobile: the nav becomes a full-screen sheet ---------- */
@media (max-width: 992px) {
    .lib-header-app .main-nav { flex-direction: column; gap: 0; }
    .lib-app-links { flex-direction: column; width: 100%; gap: 6px; }
    .lib-app-links .nav-link {
        width: 100%; height: auto; justify-content: center;
        padding: 14px 0; font-size: 18px;
    }
    .lib-app-actions {
        flex-direction: column; width: 80%; gap: 14px; margin: 24px auto 0;
    }
    .lib-credit { width: 100%; justify-content: center; height: 46px; font-size: 15px; }
    .lib-header-app .cta-button.lib-buy {
        display: inline-flex; width: 100%; justify-content: center; height: 48px; font-size: 15px;
    }
    .lib-account { width: 100%; }
    .lib-account-btn { display: none; }
    .lib-account-menu {
        position: static; width: 100%; min-width: 0;
        box-shadow: none; border-radius: 10px;
    }
    .lib-account-menu[hidden] { display: block; }
}

/* In the mobile sheet the nav links and the Buy Reports button are already on
   screen, so the matching menu items below them are duplicates. */
@media (max-width: 992px) {
    .lib-account-menu .lib-account-item[href*="index.php"],
    .lib-account-menu .lib-account-item[href*="profile.php"] { display: none; }
}

/* ==========================================================================
   LOGGED-IN LIBRARY HEADER — visual pass
   Same treatment as the app header (app2/css/styles.css): navigation next to
   the brand, actions as one tight cluster hard right, and exactly ONE filled
   element in the bar. The earlier version stopped things wrapping but still
   wore five different treatments across six items with 426px of dead space in
   the middle.
   ========================================================================== */

.lib-header-app .container { gap: 30px; }
.lib-header-app .logo img { height: 28px; width: auto; }

/* .header-right normally hugs the right edge; here it takes the free space so
   the links can sit beside the logo. */
.lib-header-app .header-right {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}
.lib-header-app .main-nav { flex: 1 1 auto; gap: 0; }

.lib-app-links { gap: 2px; }

.lib-app-links .nav-link {
    position: relative;
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14.5px;
    font-weight: 500;
    color: #4A5568;
    background: transparent;
}
.lib-app-links .nav-link:hover { background: transparent; color: var(--color-text-heading, #1A202C); }
.lib-app-links .nav-link[aria-current="page"] {
    background: transparent;
    color: var(--color-primary, #005A9C);
    font-weight: 700;
}
.lib-app-links .nav-link[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: -3px;
    height: 2px; border-radius: 2px;
    background: var(--color-primary, #005A9C);
}

.lib-app-actions { margin-left: auto; gap: 14px; }

.lib-credit {
    height: auto; padding: 0; border: 0; background: transparent;
    gap: 6px; font-size: 14px; font-weight: 700; color: #4A5568;
}
.lib-credit:hover { background: transparent; border: 0; color: var(--color-primary, #005A9C); }
.lib-credit i { font-size: 13px; color: #A0AEC0; }
.lib-credit:hover i { color: var(--color-primary, #005A9C); }
.lib-credit.low { background: transparent; border: 0; color: #C53030; }

.lib-header-app .cta-button.lib-buy { height: 36px; padding: 0 17px; }

.lib-account-btn { height: auto; padding: 0; border: 0; background: transparent; gap: 5px; }
.lib-account-btn:hover { background: transparent; border: 0; }
.lib-account-btn:hover .lib-avatar { background: var(--color-primary-dark, #004070); }
.lib-avatar { width: 30px; height: 30px; font-size: 13px; transition: background-color .18s ease; }

@media (max-width: 1180px) {
    .lib-header-app .container { gap: 20px; }
    .lib-app-links .nav-link { padding: 0 9px; font-size: 14px; }
    .lib-app-actions { gap: 12px; }
}

@media (max-width: 992px) {
    .lib-header-app .container { gap: 0; }
    .lib-header-app .header-right { flex: none; display: block; }
    .lib-header-app .main-nav { flex: none; }
    .lib-app-actions { margin-left: auto; margin-right: auto; }
    .lib-app-links .nav-link[aria-current="page"]::before { display: none; }
    .lib-credit {
        border: 1px solid var(--color-border, #E2E8F0);
        background: var(--color-background-light, #F7FAFC);
        border-radius: 8px; height: 46px;
    }
}

/* The marketing header is deliberately full-bleed (padding: 0 40px), which is
   right on the homepage where the hero is edge-to-edge. On the library the
   content below is a centred 1140 container, so a full-bleed header left the
   logo 130px to the left of the breadcrumb beneath it. Align them. */
.lib-header-app .container {
    max-width: var(--container-width, 1140px);
    padding: 0 20px;
}

/* The signed-out library header carries the homepage's nav, so the current page
   gets a persistent underline instead of only the hover one. It should read as
   a tab you are standing on, not a link you happen to be hovering. */
.main-header .main-nav a.nav-current { color: var(--color-primary, #005A9C); font-weight: 700; }
.main-header .main-nav a.nav-current::after { transform: scaleX(1); transform-origin: left; }