/* ============================================================
   Bugatti Dashboard — namespaced under .bugatti-dashboard-page
   ============================================================ */

.bugatti-dashboard-page {
    /* (3128) The 20 --bugatti-* declarations that used to open this rule now
       live in tokens.css, on this same selector, with the rest of the design
       tokens. Nothing was renamed or revalued; they moved so that the answer
       to "what colour is this" is in one file instead of five.
       --f-display and --f-label stay omitted on purpose · they inherit from
       body.bi-brand-skin via BrandStyle. */

    font-family: var(--f-label);
    background: var(--bugatti-bg);
    color: var(--bugatti-text);
    min-height: 100vh;
    line-height: 1.5;
}

/* Override theme body padding if present */
.bugatti-dashboard-page .site-content,
.bugatti-dashboard-page #content,
.bugatti-dashboard-page .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* ── Layout wrapper ─────────────────────────────────────── */
/* .bi-ch-cta-bottom (869etva93 follow-up) shares this generic width/padding
   primitive — same reasoning as any other section that needs the page's
   max-width container, not a bdb- styling hook of its own.

   (3120) Was 1440px/2rem, a second shell that put the chassis page's left
   edge 36px left of every marketing page's on a 1600px screen. It uses the
   site shell now, so the dashboard and the theme share one vertical line. */
.bdb-wrap,
.bi-ch-cta-bottom {
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    padding: 0 var(--bi-shell-gutter) 4rem;
}

/* ── Top navigation ─────────────────────────────────────── */
.bdb-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--bugatti-border);
    background: rgba(7, 12, 20, 0.92);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    max-width: 100%;
}

.bdb-nav__logo {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: var(--bugatti-panel-2);
    border: 1.5px solid var(--bugatti-border-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bugatti-gold);
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.bdb-nav__brand {
    font-family: var(--f-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.bdb-nav__brand em {
    display: block;
    font-style: normal;
    color: var(--bugatti-muted);
    font-weight: 400;
    letter-spacing: 0.12em;
    font-size: 0.62rem;
    margin-top: 1px;
}

.bdb-nav__divider {
    width: 1px;
    height: 28px;
    background: var(--bugatti-border);
    flex-shrink: 0;
}

.bdb-nav__tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.bdb-nav__tab {
    font-family: var(--f-label);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--bugatti-muted);
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    border-radius: 0;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.bdb-nav__tab:hover {
    color: var(--bugatti-text);
    background: hsl(var(--gold-hsl) / 0.06);
}

.bdb-nav__tab.is-active {
    color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / 0.1);
}

.bdb-nav__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.bdb-nav__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 0.4rem 0.75rem;
}

.bdb-nav__search input {
    background: none;
    border: none;
    /* 3124: `outline: none` sat here on the base rule, so this field had no
       focus mark in any state and nothing anywhere replaced it. It is also
       borderless, which left a keyboard user nothing at all to see.
       focus.css draws the gold underline now. */
    color: var(--bugatti-text);
    font-family: var(--f-label);
    font-size: 0.78rem;
    width: 160px;
}

.bdb-nav__search input::placeholder {
    color: var(--bugatti-muted);
}

.bdb-nav__search svg {
    color: var(--bugatti-muted);
    flex-shrink: 0;
}

.bdb-nav__profile {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bugatti-gold-dim), var(--bugatti-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-label);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bugatti-bg);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Page header ─────────────────────────────────────────── */
.bdb-page-header {
    padding: 2.5rem 0 1.75rem;
    border-bottom: 1px solid var(--bugatti-border);
    margin-bottom: 2rem;
}

.bdb-page-header__eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: 0.5rem;
}

.bdb-page-header__title {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    font-style: italic;
    color: var(--bugatti-text);
    margin: 0 0 0.35rem;
    line-height: 1.1;
}

.bdb-page-header__sub {
    font-size: 0.82rem;
    color: var(--bugatti-muted);
    margin: 0;
}

/* ── Card primitive ─────────────────────────────────────── */
.bdb-card {
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: var(--bugatti-radius);
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease;
}
.bdb-card:hover {
    border-color: var(--bugatti-border-bright);
}

.bdb-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--bugatti-gold) 0%,
        hsl(var(--gold-hsl) / 0.18) 50%,
        transparent 100%);
}

.bdb-card__pad {
    padding: 1.75rem 2rem;
}

.bdb-card__label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-bottom: 0.75rem;
}

.bdb-card__title {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.2rem;
    color: var(--bugatti-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}

/* ── Row 1 — hero grid ──────────────────────────────────── */
.bdb-row-hero {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Hero card */
.bdb-hero-card {
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: var(--bugatti-radius);
    display: flex;
    min-height: 280px;
    overflow: hidden;
    position: relative;
}

.bdb-hero-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--bugatti-gold) 0%,
        hsl(var(--gold-hsl) / 0.18) 50%,
        transparent 100%);
}

.bdb-hero-card__copy {
    flex: 0 0 auto;
    width: 55%;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.bdb-hero-card__eyebrow {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: 0.6rem;
}

.bdb-hero-card__heading {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    color: var(--bugatti-text);
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.bdb-hero-card__number {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(4rem, 7vw, 7rem);
    color: var(--bugatti-gold);
    line-height: 0.85;
    margin: 0.25rem 0 0.2rem;
    letter-spacing: -0.02em;
}

.bdb-hero-card__number-sub {
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-bottom: 1.75rem;
}

.bdb-hero-card__img {
    flex: 1;
    background-size: cover;
    background-position: center right;
    position: relative;
}

.bdb-hero-card__img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--bugatti-panel) 0%,
        rgba(13, 22, 35, 0.5) 40%,
        rgba(13, 22, 35, 0.1) 100%);
}

.bdb-hero-card__img--placeholder {
    background: linear-gradient(135deg,
        #0d1623 0%,
        var(--bugatti-panel-2) 35%,
        #0a1520 65%,
        #070c14 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Research agent card */
.bdb-agent-card .bdb-card__pad {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.bdb-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* (3122) Was rgba(62,207,142,·) twice — the same #3ecf8e as
       --bugatti-green, but written out, so it did not track the token. */
    background: color-mix(in srgb, var(--bugatti-green) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bugatti-green) 22%, transparent);
    border-radius: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bugatti-green);
    margin-bottom: 1.25rem;
}

.bdb-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 0;
    background: var(--bugatti-green);
    animation: bdb-pulse 2s ease-in-out infinite;
}

/* (3122) The "not yet verified" twin of .bdb-status-pill. It existed twice as
   a ~200-character inline style block in single-bcc_chassis.php — the hero and
   the sidebar — identical except for a margin, and both wrote the dashboard
   blue out by hand (rgba(107,122,149,·)) so neither followed --bugatti-muted.
   A modifier that only recolours: box, dot, size and spacing all come from the
   base pill, which also means the two states finally share a margin. The hero
   copy had none and the sidebar copy had 1rem, while their green counterparts
   in exactly those two slots both sat at the base's 1.25rem. */
.bdb-status-pill--muted {
    background: hsl(var(--fg-hsl) / .1);
    border-color: hsl(var(--fg-hsl) / .22);
    color: var(--bugatti-muted);
}

.bdb-status-pill--muted::before {
    background: currentColor;
    /* No pulse. The green pill pulses because verification is a live state;
       "not yet verified" is the absence of one, and a blinking dot reads as
       something being in progress. */
    animation: none;
}

@keyframes bdb-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.bdb-checklist {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    flex: 1;
}

.bdb-checklist li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--bugatti-text);
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-checklist li:last-child {
    border-bottom: none;
}

.bdb-checklist__icon {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: rgba(62, 207, 142, 0.15);
    border: 1px solid rgba(62, 207, 142, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bugatti-green);
    font-size: 0.6rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* 3119: this system is deliberately still separate from buttons.css's
   .bi-cta — it now backs only genuine dashboard toolbar/card controls
   (sm-sized card links, disabled placeholders, the propose lookup
   button), never a section call-to-action. Every .bdb-btn--gold/--outline
   instance that WAS a section CTA (propose/contact submit, propose
   success actions, dashboard hero, chassis-page gates/pay/dossier) has
   been moved onto .bi-cta. Don't add a new section CTA on this system —
   it stays out of the "precisely three variants" rule on purpose. */
.bdb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    padding: 0.65rem 1.4rem;
    white-space: nowrap;
}

.bdb-btn--gold {
    background: var(--bugatti-gold);
    color: var(--bugatti-bg);
}

.bdb-btn--gold:hover {
    /* (3121) Was #d4b460 — a fixed "slightly darker gold" chosen against the
       old token. Against the current one it is not slightly darker, it is a
       different colour. Derived, so the hover stays a hover. */
    background: color-mix(in srgb, var(--gold) 86%, #000);
    box-shadow: 0 0 20px hsl(var(--gold-hsl) / 0.3);
}

.bdb-btn--outline {
    background: transparent;
    /* 869etqyp2 testing-failed round: this was the one outline-button
       primitive the earlier PRs (#1287/#1319) missed — still the pre-brand
       1px translucent-gold hairline. Align with every other outline button
       site-wide: 2px, brand-spec dark border (--line, #4D472E). */
    border: 2px solid var(--line, #4D472E);
    color: var(--bugatti-text);
}

.bdb-btn--outline:hover {
    background: hsl(var(--gold-hsl) / 0.08);
}

.bdb-btn--ghost {
    background: transparent;
    border: 1px solid var(--bugatti-border);
    color: var(--bugatti-muted);
}

.bdb-btn--ghost:hover {
    border-color: var(--bugatti-border-bright);
    color: var(--bugatti-text);
}

.bdb-btn--sm {
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
}

.bdb-btn--disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

/* ── Row 2 — three-col ──────────────────────────────────── */
.bdb-row-mid {
    display: grid;
    grid-template-columns: 1fr 260px 280px;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Workflow */
.bdb-workflow {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 1.25rem 0;
    flex-wrap: wrap;
}

.bdb-workflow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 70px;
    position: relative;
}

.bdb-workflow__step + .bdb-workflow__step::before {
    content: '';
    position: absolute;
    left: calc(-50% - 1px);
    right: 50%;
    top: 15px;
    height: 1px;
    background: var(--bugatti-border-bright);
}

.bdb-workflow__step.is-done + .bdb-workflow__step::before,
.bdb-workflow__step.is-active + .bdb-workflow__step::before {
    background: var(--bugatti-gold);
}

.bdb-workflow__icon {
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: var(--bugatti-panel-2);
    border: 1.5px solid var(--bugatti-border-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--bugatti-muted);
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}

.bdb-workflow__step.is-done .bdb-workflow__icon {
    background: hsl(var(--gold-hsl) / 0.12);
    border-color: var(--bugatti-gold);
    color: var(--bugatti-gold);
}

.bdb-workflow__step.is-active .bdb-workflow__icon {
    background: var(--bugatti-gold);
    border-color: var(--bugatti-gold);
    color: var(--bugatti-bg);
    box-shadow: 0 0 16px var(--gold);
}

.bdb-workflow__label {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    text-align: center;
}

.bdb-workflow__step.is-active .bdb-workflow__label {
    color: var(--bugatti-gold);
    font-weight: 700;
}

.bdb-workflow__step.is-done .bdb-workflow__label {
    color: var(--bugatti-text);
}

.bdb-workflow__progress {
    font-size: 0.75rem;
    color: var(--bugatti-muted);
    margin-top: 0.5rem;
}

.bdb-workflow__progress strong {
    color: var(--bugatti-gold);
}

/* Approvals card */
.bdb-approvals-number {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 4.5rem;
    color: var(--bugatti-gold);
    line-height: 1;
    margin: 0.5rem 0 0.25rem;
    letter-spacing: -0.02em;
}

.bdb-approvals-label {
    font-size: 0.78rem;
    color: var(--bugatti-muted);
    margin-bottom: 1.5rem;
}

/* Platform status card */
.bdb-service-list {
    list-style: none;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
}

.bdb-service-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--bugatti-text);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-service-list li:last-child {
    border-bottom: none;
}

.bdb-service-list__status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--bugatti-green);
    font-weight: 600;
}

.bdb-service-list__dot {
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: var(--bugatti-green);
}

/* ── Row 3 — activity ───────────────────────────────────── */
.bdb-row-activity {
    margin-bottom: 2rem;
}

.bdb-activity-card .bdb-card__pad {
    display: flex;
    flex-direction: column;
}

.bdb-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.bdb-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bdb-activity-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-activity-list li:last-child {
    border-bottom: none;
}

.bdb-activity-list__dot-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.bdb-activity-list__dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--bugatti-gold);
    flex-shrink: 0;
    margin-top: 3px;
}

/* (3128) Was #4fa8d9, a bright blue on a site whose palette has no blue in
   it. The dot marks a document event as distinct from the gold default; the
   distinction is what matters, not the hue, so it is the site's own muted
   now instead of a colour borrowed from somewhere else. The class name is
   left alone on purpose · it is written into three templates and renaming it
   is a separate move from recolouring it. */
.bdb-activity-list__dot--blue {
    background: var(--muted);
}

.bdb-activity-list__text {
    font-size: 0.84rem;
    color: var(--bugatti-text);
    line-height: 1.45;
}

.bdb-activity-list__text strong {
    color: var(--bugatti-gold);
    font-weight: 600;
}

.bdb-activity-list__meta {
    font-size: 0.72rem;
    color: var(--bugatti-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Stat chips row ─────────────────────────────────────── */
.bdb-stat-chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
}

.bdb-stat-chip {
    background: var(--bugatti-panel-2);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 0.6rem 1rem;
    text-align: center;
    flex: 1;
    min-width: 90px;
}

.bdb-stat-chip__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--bugatti-gold);
    line-height: 1;
    display: block;
}

.bdb-stat-chip__label {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-top: 0.2rem;
    display: block;
}

/* ── Footer ─────────────────────────────────────────────── */
.bdb-footer {
    border-top: 1px solid var(--bugatti-border);
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.bdb-footer__slogan {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: rgba(232, 223, 200, 0.25);
    margin: 0;
}

.bdb-footer__slogan em {
    font-style: normal;
    color: hsl(var(--gold-hsl) / 0.4);
}

.bdb-footer__meta {
    font-size: 0.7rem;
    color: var(--bugatti-muted);
    letter-spacing: 0.06em;
}

/* ── Section divider ─────────────────────────────────────── */
.bdb-section-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bdb-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bugatti-border);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bdb-row-hero {
        grid-template-columns: 1fr 300px;
    }
    .bdb-row-mid {
        grid-template-columns: 1fr 1fr;
    }
    .bdb-row-mid > *:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .bdb-nav__tabs {
        display: none;
    }
    .bdb-row-hero {
        grid-template-columns: 1fr;
    }
    .bdb-hero-card {
        flex-direction: column;
        min-height: auto;
    }
    .bdb-hero-card__copy {
        width: 100%;
        padding: 2rem;
    }
    .bdb-hero-card__img {
        height: 180px;
    }
    .bdb-row-mid {
        grid-template-columns: 1fr;
    }
    .bdb-row-mid > *:last-child {
        grid-column: auto;
    }
    /* (3120) The 1rem gutter that sat here contradicted the 1.25rem one in
       the 768px block below it: at an 800px viewport only this rule matched
       (16px), at 700px both did and the later one won (20px), so the page
       got WIDER margins as the screen got narrower. Both are gone; the
       shell's clamp is monotonic. */
    .bdb-wrap,
    .bi-ch-cta-bottom {
        padding-bottom: 3rem;
    }
    .bdb-nav {
        padding: 1rem;
    }
    .bdb-nav__search {
        display: none;
    }
}

@media (max-width: 540px) {
    .bdb-hero-card__number {
        font-size: 5rem;
    }
    .bdb-activity-list li {
        flex-direction: column;
        gap: 0.35rem;
    }
    .bdb-footer {
        flex-direction: column;
        text-align: center;
    }
}

/* ════════════════════════════════════════════════════════════
   Chassis page — cinematic redesign
════════════════════════════════════════════════════════════ */

/* ── Cinematic hero ──────────────────────────────────────── */
.bdb-ch-hero {
    position: relative;
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bugatti-bg);
}

.bdb-ch-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    transition: transform 9s ease;
    will-change: transform;
}

.bdb-ch-hero:hover .bdb-ch-hero__bg {
    transform: scale(1.03);
}

.bdb-ch-hero__bg--placeholder {
    background: radial-gradient(ellipse at 70% 40%, var(--bugatti-panel-2) 0%, var(--bugatti-bg) 60%);
}

.bdb-ch-hero__bg-placeholder-icon {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    color: hsl(var(--gold-hsl) / 0.32);
}

/* Soft gold medallion behind the icon so the placeholder reads as a deliberate
   graphic — not a bare icon lost in the middle of a 74vh hero (869egbvmb round 2:
   "needs to be a very nice related picture"). Still no photo of another/similar
   chassis or of the type, per the task's own hard constraint — just a larger,
   more considered treatment of the same generic silhouette. */
.bdb-ch-hero__bg-placeholder-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(12rem, 22vw, 18rem);
    height: clamp(12rem, 22vw, 18rem);
    border-radius: 0;
    border: 1px solid hsl(var(--gold-hsl) / 0.28);
    background: radial-gradient(circle, hsl(var(--gold-hsl) / 0.12) 0%, hsl(var(--gold-hsl) / 0) 70%);
    pointer-events: none;
}

.bdb-ch-hero__bg-placeholder-icon svg {
    position: relative;
    z-index: 1;
    width: clamp(5.5rem, 8vw, 7.5rem);
    height: auto;
    color: hsl(var(--gold-hsl) / 0.8);
    filter: drop-shadow(0 0 20px hsl(var(--gold-hsl) / 0.2));
}

.bdb-ch-hero__bg-placeholder-icon span {
    position: relative;
    z-index: 1;
    font-family: var(--f-label);
    font-size: 0.8rem;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: rgba(232, 223, 200, 0.55);
}

.bdb-ch-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            #070c14 0%,
            #070c14 6%,
            rgba(7, 12, 20, 0.82) 28%,
            rgba(7, 12, 20, 0.35) 55%,
            transparent 75%),
        linear-gradient(to right,
            rgba(7, 12, 20, 0.92) 0%,
            rgba(7, 12, 20, 0.6) 35%,
            rgba(7, 12, 20, 0.15) 60%,
            transparent 80%);
}

/* Topbar */
.bdb-ch-hero__topbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2.5rem;
    gap: 1rem;
}

.bdb-ch-hero__crumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.bdb-ch-hero__crumb a {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    color: var(--bugatti-text);
    text-decoration: none;
    transition: color 0.2s;
}

.bdb-ch-hero__crumb a:hover {
    color: rgba(232, 223, 200, 0.7);
}

.bdb-ch-hero__crumb-sep {
    color: hsl(var(--gold-hsl) / 0.3);
    font-size: 0.68rem;
}

.bdb-ch-hero__crumb-cur {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--bugatti-gold);
}

.bdb-ch-hero__topbar-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.bdb-ch-hero__topbar-actions .bdb-btn--ghost {
    background: rgba(7, 12, 20, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid hsl(var(--gold-hsl) / 0.45);
    color: var(--bugatti-text);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    border-radius: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.bdb-ch-hero__topbar-actions .bdb-btn--ghost:hover {
    background: hsl(var(--gold-hsl) / 0.15);
    border-color: var(--bugatti-gold);
    color: var(--bugatti-gold);
}

/* Bottom text area */
.bdb-ch-hero__bottom {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    align-items: flex-end;
    padding: 0 2.5rem 3.5rem;
}

.bdb-ch-hero__bottom-inner {
    width: 100%;
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.bdb-ch-hero__left {
    flex: 1;
    min-width: 0;
}

.bdb-ch-hero__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bdb-ch-hero__eyebrow::before {
    content: '';
    width: 2.5rem;
    height: 1px;
    background: var(--bugatti-gold);
    flex-shrink: 0;
}

/* Name row — chassis number + key-facts grid side by side (869egbvnc): the
   facts sit next to the number, wrapping onto their own line only when the
   viewport is too narrow to fit both, instead of being pinned to the bottom
   of the whole hero-left column (previous layout) or disappearing outright
   below 1024px (previous ≤1024px rule, replaced below). */
.bdb-ch-hero__name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 0.6rem;
}

.bdb-ch-hero__num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(5rem, 11vw, 10rem);
    color: var(--bugatti-text);
    line-height: 0.82;
    margin: 0;
    letter-spacing: -0.03em;
}

.bdb-ch-hero__family {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: rgba(232, 223, 200, 0.45);
    margin: 0 0 1.75rem;
    letter-spacing: 0.05em;
}

.bdb-ch-hero__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Hero facts grid */
.bdb-ch-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, 148px);
    gap: 1px;
    background: hsl(var(--gold-hsl) / 0.18);
    border: 1px solid hsl(var(--gold-hsl) / 0.22);
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
}

.bdb-ch-hero__fact {
    background: rgba(7, 12, 20, 0.82);
    padding: 1rem 1.25rem;
}

.bdb-ch-hero__fact-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-muted);
    display: block;
    margin-bottom: 0.25rem;
}

.bdb-ch-hero__fact-value {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 0.98rem;
    font-weight: 300;
    color: var(--bugatti-text);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* ── Section nav — matches homepage era timeline exactly ─────
   Same geometry: 118px tall, padding 0 70px, item padding 32px 28px 0 0,
   gap 7px, justify-content center. Label = small-caps overline, sub = serif
   display number. Sticky under the fixed header. */
.bdb-ch-sec-anchor {
    display: block;
    position: relative;
    top: calc(-1 * (var(--bi-header-h, 50px) + 80px));
    visibility: hidden;
    pointer-events: none;
}
.bdb-ch-sectionnav {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 64px;
    background: var(--sur, #060a10);
    /* (3120) Was a flat 70px from the viewport edge (--bi-space-x, the
       brand skin's full-bleed hero inset). This bar is not a hero: it is
       the chassis page's own section nav, sitting directly above the
       content it navigates, and on a 1600px screen its first item started
       42px left of the first word underneath it. --bi-shell-inset lines it
       up with the shell and collapses to the plain gutter once the
       viewport is narrower than the shell. */
    padding: 0 var(--bi-shell-inset);
    position: sticky;
    top: var(--bi-header-h, 50px);
    z-index: 20;
}
.bdb-ch-sectionnav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px 0 0;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .25s ease;
}
.bdb-ch-sectionnav__label {
    font-family: var(--f-label);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: var(--bi-ls-button, 1px);
    text-transform: uppercase;
    color: var(--fg, #e8dfc8);
    margin: 0;
    transition: color .25s ease;
}
.bdb-ch-sectionnav__item:hover .bdb-ch-sectionnav__label,
.bdb-ch-sectionnav__item.is-active .bdb-ch-sectionnav__label {
    color: var(--gold, #e8c868);
}
.bdb-ch-sectionnav__item.is-active {
    border-bottom-color: var(--gold, #e8c868);
}
@media (max-width: 1024px) {
    .bdb-ch-sectionnav {
        height: auto;
        padding: 0 22px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .bdb-ch-sectionnav__item {
        flex: 0 0 auto;
        min-width: 100px;
        padding: 14px 18px 12px 0;
    }
}
/* Phone: the scroll strip becomes stacked ghost buttons, 2 per row — the
   site's transparent bordered button (homepage hero "Explore collection"
   style): 1px gold border, transparent fill, gold tracked uppercase label.
   Active tab inverts to a gold fill with dark label. Unstuck: 2-3 rows of
   sticky nav would cover half the viewport. */
@media (max-width: 640px) {
    .bdb-ch-sectionnav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 22px;
        background: transparent;
        position: static;
        overflow: visible;
    }
    .bdb-ch-sectionnav__item {
        min-width: 0;
        background: transparent;
        border: 1px solid var(--gold, #e8c868);
        padding: 15px 12px;
        justify-content: center;
        align-items: center;
    }
    .bdb-ch-sectionnav__label {
        font-family: var(--f-label);
        font-weight: 700;
        font-size: var(--bi-size-button, 11px);
        letter-spacing: var(--bi-ls-button, 1px);
        text-transform: uppercase;
        color: var(--gold, #e8c868);
        text-align: center;
    }
    .bdb-ch-sectionnav__item.is-active {
        background: var(--gold, #e8c868);
        border-color: var(--gold, #e8c868);
    }
    .bdb-ch-sectionnav__item.is-active .bdb-ch-sectionnav__label,
    .bdb-ch-sectionnav__item.is-active:hover .bdb-ch-sectionnav__label {
        color: var(--bg, #080d16);
    }
}

/* ── Stat row (edge-to-edge) ─────────────────────────────── */
.bdb-ch-statrow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--bi-hairline-w, 2px) solid var(--bugatti-border);
    border-bottom: var(--bi-hairline-w, 2px) solid var(--bugatti-border);
    background: var(--bugatti-panel);
}

.bdb-ch-statrow__item {
    padding: 1.6rem 2.5rem;
    border-right: 1px solid var(--bugatti-border);
    position: relative;
}

.bdb-ch-statrow__item:last-child {
    border-right: none;
}

.bdb-ch-statrow__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.5rem;
    width: 2.5rem;
    height: 2px;
    background: var(--gold);
}

.bdb-ch-statrow__num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--bugatti-gold);
    line-height: 1;
    display: block;
}

.bdb-ch-statrow__lbl {
    font-size: 0.64rem;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-top: 0.35rem;
    display: block;
}

/* ── Content area ────────────────────────────────────────── */
.bdb-ch-content {
    padding-top: 3rem !important;
}

.bdb-ch-main > .bdb-card {
    margin-bottom: 1.25rem;
}

/* ── Chassis tabs (869em0kk1) — Details/Biography/History/References.
   No existing WP-theme tab widget; mirrors backend/frontend's TabBar.jsx
   (gold underline on the active tab, horizontal scroll on overflow) since
   that component lives in a separate React app this theme can't import. ── */
.bdb-tabs__list {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--bugatti-border);
    margin-bottom: 1.5rem;
}
.bdb-tabs__list::-webkit-scrollbar { display: none; }

.bdb-tabs__tab {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.85rem 1.25rem;
    font-family: var(--f-label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.bdb-tabs__tab:hover { color: var(--bugatti-text); }
.bdb-tabs__tab.is-active { color: var(--bugatti-gold); border-bottom-color: var(--bugatti-gold); }
.bdb-tabs__tab:focus-visible { outline: 2px solid var(--bugatti-gold); outline-offset: 2px; }

.bdb-tabs__panel { display: none; }
.bdb-tabs__panel.is-active { display: block; }
.bdb-tabs__panel > .bdb-card { margin-bottom: 1.25rem; }
.bdb-tabs__panel > .bdb-card:last-child { margin-bottom: 0; }
/* ── Chassis page reads as one page, not stacked boxes (3322) ──────────
   Meeting W74IAB (11-09): the border around every dossier section card
   goes; sections separate with a single page-wide rule instead — the 2px
   --bi-hairline-w standard from 3216/3321 — the way the category page
   separates its sections. Scoped to .bdb-ch-main (the chassis dossier
   column) on purpose: the type page's Photo Archive renders the very same
   .bdb-card through inc/bi-gallery.php, and the collection page and the
   admin dashboard use the card primitive too — none of those were in the
   review, so they keep their chrome.
   The same review's two stray hairlines fall out of this: the card's gold
   gradient ::before was a top line visibly brighter than its dim bottom
   border, and the bottom "Know something we don't?" CTA was one more box
   with that same brighter top line. (The third — a line under the hero
   photo's wheels that only some chassis show — is the photograph's own
   bottom edge against the dark panel, not a rule; no CSS here draws it.) */
.bdb-ch-main .bdb-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin: 0;
    padding: 2.75rem 0;
}
.bdb-ch-main .bdb-card::before { content: none; }
.bdb-ch-main .bdb-card__pad { padding: 0; }

/* The still-verifying empty states (.bdb-era-section, task 3118) sit as
   siblings of the cards inside the same tab panel: same open treatment,
   and their heading drops the rule above and below it (the 3320
   category-page precedent) so no section ever gets a double line. */
.bdb-ch-main .bdb-era-section {
    margin: 0;
    padding: 2.75rem 0;
}
.bdb-ch-main .bdb-era-section__head {
    border-top: none;
    border-bottom: none;
    padding: 0;
    margin-bottom: 0.75rem;
}

/* One page-wide rule between consecutive sections. None above the first
   (the section nav already closes the hero) and none below the last (the
   bottom CTA brings its own). */
.bdb-ch-main .bdb-tabs__panel > .bdb-card + .bdb-card,
.bdb-ch-main .bdb-tabs__panel > .bdb-card + .bdb-era-section,
.bdb-ch-main .bdb-tabs__panel > .bdb-era-section + .bdb-card,
.bdb-ch-main .bdb-tabs__panel > .bdb-era-section + .bdb-era-section {
    border-top: var(--bi-hairline-w, 2px) solid var(--bugatti-border);
}
.bdb-ch-main .bdb-tabs__panel > .bdb-card:first-child,
.bdb-ch-main .bdb-tabs__panel > .bdb-era-section:first-child { padding-top: 0; }
.bdb-ch-main .bdb-tabs__panel > .bdb-card:last-child,
.bdb-ch-main .bdb-tabs__panel > .bdb-era-section:last-child { padding-bottom: 0; }

/* Replica / First-of-type notes keep their gold accent bar, now as a
   modifier (it was an inline border-left on the card in the template);
   with the box gone the bar needs its own text inset. The bar must
   survive hover: the card primitive's :hover recolours border-color, and
   the old inline style outranked it - a class does not, so pin the
   left colour on hover too (review, 3322). */
.bdb-ch-main .bdb-card--note {
    border-left: 3px solid var(--bugatti-gold);
    padding-left: 1.25rem;
}
.bdb-ch-main .bdb-card--note:hover { border-left-color: var(--bugatti-gold); }

/* Bottom CTA: the same open treatment — a page-wide rule above it instead
   of a box, no gold gradient top line. */
.bi-ch-cta-bottom .bi-ch-cta {
    background: transparent;
    border: 0;
    border-top: var(--bi-hairline-w, 2px) solid var(--bugatti-border);
    border-radius: 0;
    margin-top: 0;
    padding: 2.75rem 0 0;
    overflow: visible;
}
.bi-ch-cta-bottom .bi-ch-cta::before { content: none; }


@media (max-width: 640px) {
    .bdb-tabs__tab { padding: 0.7rem 1rem; font-size: 0.72rem; }
}

/* Section eyebrow with line */
.bdb-ch-eyebrow {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bdb-ch-eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: var(--bugatti-gold);
    flex-shrink: 0;
}

/* Chapter title */
.bdb-ch-chapter__title {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    color: var(--bugatti-text);
    margin: 0 0 1.25rem;
    line-height: 1.1;
}

.bdb-ch-chapter__count {
    font-size: 0.72rem;
    font-style: normal;
    font-family: var(--f-label);
    color: var(--bugatti-muted);
    letter-spacing: 0.06em;
    font-weight: 400;
}

/* Prose */
.bdb-ch-prose {
    font-size: 0.9rem;
    line-height: 1.82;
    color: rgba(232, 223, 200, 0.75);
    margin: 0;
}

.bdb-ch-prose--muted {
    font-style: italic;
    color: rgba(232, 223, 200, 0.5);
}

/* Highlight callout (869etvabj) — `==marked==` text in a Chassis/Type
   Description, converted server-side to this span by
   bi_format_description_html() / bi_convert_description_highlight_markers().
   Shares .bdb-ch-prose's font-size/line-height by inheritance; only adds
   color + weight so it reads as an emphasised phrase, not a heading. */
.bi-highlight {
    color: var(--bugatti-gold);
    font-weight: 600;
}

/* Story blocks — titled provenance paragraphs */
.bdb-ch-story__block + .bdb-ch-story__block {
    margin-top: 1.5rem;
}

.bdb-ch-story__title {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    color: var(--bugatti-text);
    margin: 0 0 0.6rem;
    line-height: 1.15;
}

/* Biography "read more" clamp (869eqp20k) — collapses the Biography
   section's story blocks/text to a fixed height with a fade-out, revealed
   in full in place via the toggle button below. Shared by both chassis
   renderers (React ChassisPage.tsx + PHP single-bcc_chassis.php), same as
   .bdb-ch-timeline. The max-height clamp itself always applies (needed to
   measure real overflow), but .has-overflow -- added only once JS/React has
   confirmed the content actually exceeds the clamp height (869et6qpf) -- is
   what gates the fade so it doesn't fire when there's nothing left to reveal. */
.bdb-ch-bio-clamp {
    position: relative;
    overflow: hidden;
    max-height: 9.6rem; /* ~4-5 lines of .bdb-ch-prose at 1.82 line-height */
    transition: max-height 0.35s ease;
}

.bdb-ch-bio-clamp.is-expanded {
    max-height: none;
}

.bdb-ch-bio-clamp.has-overflow:not(.is-expanded)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
    background: linear-gradient(to bottom, rgba(13, 22, 35, 0), var(--bugatti-panel));
    pointer-events: none;
}

.bdb-ch-bio-toggle {
    display: none;
    margin-top: 0.9rem;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--f-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--bi-ls-button, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    cursor: pointer;
}

.bdb-ch-bio-toggle:hover,
.bdb-ch-bio-toggle:focus-visible {
    text-decoration: underline;
}

.bdb-ch-bio-toggle.is-visible {
    display: inline-block;
}

/* Engine spec grid — flush-left rows with hairline separators. The old
   faux-table (1px gap over a border-colored background + filled cells with
   1.1rem inner padding) indented every key/value ~18px right of the chassis
   number heading above it, and painted a solid olive block wherever an odd
   cell count left an empty grid area. Cells are now transparent and
   unpadded horizontally so the first column aligns exactly with the
   heading, on desktop and mobile alike. */
.bdb-ch-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    margin-top: 0.75rem;
}

.bdb-ch-spec-cell {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--bugatti-border);
}

/* Key/value rule (Martien 02-09, 869eu80jv): field names = Tinos (the
   body/serif token), data values = Roboto Condensed (the label/condensed
   token) — site-wide, every key/value grid. Declared explicitly here so the
   pair no longer depends on what the container happens to inherit (the
   chassis page's brand-skin remap made keys Tinos while the type page's
   dossier grid still inherited Roboto Condensed from
   .bugatti-dashboard-page). text-transform: none per Joe's 01-09 "Tinos
   never uppercase" ruling (869etqypm, PR #1285), which this task explicitly
   requires to be respected — supersedes the prior uppercase treatment. */
.bdb-ch-spec-cell__key {
    font-family: var(--f-body, var(--f-label));
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: none;
    color: var(--bugatti-muted);
    display: block;
    margin-bottom: 0.25rem;
}

/* Values in the brand's condensed face (869eu80jv, supersedes the #1179
   "standard body text" decision): data values = Roboto Condensed via the
   label/condensed token, sizing unchanged from #1179. */
.bdb-ch-spec-cell__val {
    font-family: var(--f-label);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--bugatti-text);
    display: block;
}

/* Ownership timeline */
.bdb-ch-timeline {
    position: relative;
    padding-left: 1.75rem;
    margin-top: 0.5rem;
}

.bdb-ch-timeline::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: linear-gradient(to bottom,
        var(--gold) 0%,
        hsl(var(--gold-hsl) / 0.08) 100%);
}

.bdb-ch-timeline__item {
    position: relative;
    padding-bottom: 1.75rem;
}

.bdb-ch-timeline__item:last-child {
    padding-bottom: 0;
}

.bdb-ch-timeline__dot {
    position: absolute;
    left: -1.38rem;
    top: 0.3rem;
    width: 11px;
    height: 11px;
    border-radius: 0;
    background: var(--bugatti-bg);
    border: 1.5px solid var(--bugatti-gold);
    transition: box-shadow 0.2s;
}

.bdb-ch-timeline__item.is-current .bdb-ch-timeline__dot {
    background: var(--bugatti-green);
    border-color: var(--bugatti-green);
    box-shadow: 0 0 10px rgba(62, 207, 142, 0.5);
}

.bdb-ch-timeline__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bugatti-text);
    line-height: 1.3;
}

.bdb-ch-timeline__item.is-current .bdb-ch-timeline__name {
    color: var(--bugatti-gold);
}

.bdb-ch-timeline__period {
    font-size: 0.74rem;
    color: var(--bugatti-muted);
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

.bdb-ch-timeline__notes {
    font-size: 0.78rem;
    /* (3122) Was rgba(107,122,149,.75) — the blue written out by hand instead
       of going through the token, so it survived every fix to --bugatti-muted.
       .75 rather than the token's .65 because these are secondary notes under
       a timeline entry and were deliberately a touch stronger. */
    color: hsl(var(--fg-hsl) / .75);
    line-height: 1.5;
    margin-top: 0.3rem;
}

.bdb-ch-timeline__price {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / 0.08);
    border: 1px solid hsl(var(--gold-hsl) / 0.2);
    border-radius: 0;
    padding: 0.15rem 0.55rem;
    margin-top: 0.35rem;
    letter-spacing: 0.04em;
}

/* Photo grid */
.bdb-ch-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.bdb-ch-photo {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid var(--bugatti-border);
    cursor: pointer;
    position: relative;
    background: var(--bugatti-panel-2);
}

.bdb-ch-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}

.bdb-ch-photo:hover img {
    transform: scale(1.07);
}

.bdb-ch-photo__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(7, 12, 20, 0.88));
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: flex-end;
    padding: 0.65rem 0.75rem;
}

.bdb-ch-photo:hover .bdb-ch-photo__overlay {
    opacity: 1;
}

.bdb-ch-photo__caption {
    font-size: 0.68rem;
    color: var(--bugatti-text);
    line-height: 1.3;
}

/* Chassis register */
.bdb-ch-register {
    margin-top: 0.75rem;
}

.bdb-ch-register-head {
    display: grid;
    grid-template-columns: 1fr 56px 1fr 1fr 28px;
    gap: 1rem;
    padding: 0.45rem 0.75rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    border-bottom: 1px solid var(--bugatti-border-bright);
}

.bdb-ch-register-row {
    display: grid;
    grid-template-columns: 1fr 56px 1fr 1fr 28px;
    gap: 1rem;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--bugatti-border);
    text-decoration: none;
    color: var(--bugatti-text);
    font-size: 0.82rem;
    border-radius: 0;
    transition: background 0.15s;
    align-items: center;
}

.bdb-ch-register-row:hover {
    background: hsl(var(--gold-hsl) / 0.04);
}

.bdb-ch-register-row:last-child {
    border-bottom: none;
}

.bdb-ch-register-row.is-current {
    background: hsl(var(--gold-hsl) / 0.06);
    border-left: 2px solid var(--bugatti-gold);
    padding-left: calc(0.75rem - 2px);
}

.bdb-ch-register-row__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--bugatti-gold);
}

.bdb-ch-register-row__arrow {
    color: var(--bugatti-border-bright);
    font-size: 1rem;
    text-align: right;
    transition: color 0.2s;
}

.bdb-ch-register-row:hover .bdb-ch-register-row__arrow {
    color: var(--bugatti-gold);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.bdb-ch-sidebar-card {
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: var(--bugatti-radius);
    overflow: hidden;
    position: relative;
}

.bdb-ch-sidebar-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--bugatti-gold) 0%,
        hsl(var(--gold-hsl) / 0.06) 100%);
}

.bdb-ch-sidebar-head {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-ch-sidebar-title {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.4rem;
    color: var(--bugatti-text);
    margin: 0.3rem 0 0;
    line-height: 1.1;
}

.bdb-ch-sidebar-fields {
    padding: 0 1.75rem 0.5rem;
}

.bdb-ch-sidebar-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.58rem 0;
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-ch-sidebar-field:last-child {
    border-bottom: none;
}

.bdb-ch-sidebar-field__key {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    color: var(--bugatti-muted);
    flex-shrink: 0;
    max-width: 44%;
    padding-top: 1px;
}

.bdb-ch-sidebar-field__val {
    color: var(--bugatti-text);
    font-weight: 500;
    font-size: 0.79rem;
    text-align: right;
    line-height: 1.4;
}

.bdb-ch-sidebar-btns {
    padding: 1.25rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--bugatti-border);
}

/* ── CTA bar ─────────────────────────────────────────────── */
/* Restyled to the brand tokens and renamed bdb-ch-cta__* → bi-ch-cta__*
   (ClickUp 869etva93, Martien + Joe meeting 01-09). Button follow-up
   (same task, QA round 2): this component now owns a self-contained
   .bi-ch-cta__btn primitive instead of reusing the shared .bdb-btn hook —
   the earlier version kept .bdb-btn as a styling hook so no bdb- classes
   would be left in the markup at all. */
.bi-ch-cta {
    margin-top: 2rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: var(--bugatti-radius);
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.bi-ch-cta::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--bugatti-gold),
        hsl(var(--gold-hsl) / 0.06));
}

/* Same section-heading treatment as the sibling chassis-page sections
   (.bdb-ch-chapter__title): display family, italic, light weight, clamped
   scale — instead of the fixed 1.25rem it had before. */
.bi-ch-cta__title {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.1;
    color: var(--bugatti-text);
    margin: 0 0 0.3rem;
}

/* Body copy (incl. the propose-a-correction helper line) at the standard
   body size in the body family (Tinos) — it used to sit at 0.82rem (~13px)
   in the condensed label font inherited from .bugatti-dashboard-page. */
.bi-ch-cta__sub {
    font-family: var(--f-body, var(--f-label));
    font-size: var(--bi-size-body, 16px);
    color: var(--bugatti-muted);
    margin: 0;
}

.bi-ch-cta__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* (3119) The 01-09 button spec this component wrote down for itself —
   2px border, outline = dark-gold border with white letters, filled gold
   for the primary when buttons sit side by side — is exactly the system
   in assets/css/buttons.css. It was correct and it was local: the
   agreement was recorded here and separately in brand-home.css, and the
   two drifted, this one landing on a 0.65rem/1.4rem box against the
   reference button's 52.8px. The primitive is gone; these buttons carry
   .bi-cta inside a .bi-cta-group now.
   What was policy rather than styling is kept, because it is a real
   decision and easy to lose: "Propose a Change" stays a low-key outline
   secondary and never the filled primary — we do not want to over-invite
   proposals — while the paid "Download Dossier" action is the group's
   .bi-cta--primary. (3121 recoloured this primitive onto --gold/--line
   tokens before finding it already retired here — .bi-cta already reads
   the same tokens, so nothing is lost by dropping it.) */
.bi-ch-cta__btn--dossier { gap: .5rem; }
/* The hero copy of this button sits directly inside .bdb-cat-hero__inner,
   which the brand skin turns into `display:flex; flex-direction:column`. A
   flex item's `display:inline-flex` is blockified, and the container's
   default `align-items: stretch` then pulls the button across the full width
   of the hero panel — a ~380px slab of gold for two words and a price
   (Martien 10-09). align-self returns it to shrink-to-fit. Cross-axis
   flex-start follows the writing direction, so RTL keeps it on its own start
   edge. No-op wherever the parent isn't a flex/grid container, which is why
   it can live on the hero-only class rather than the shared button. */
.bi-ch-cta__btn--dossier .bi-ch-cta__price {
    font-size: .68rem;
    font-family: var(--f-label); font-weight: 400; letter-spacing: .02em;
}
.bi-ch-hero__dossier-cta { align-self: flex-start; }

/* (3119) The 44px tap-target floor is no longer stated here: every CTA is
   52.8px tall at every width now, which clears it without a phone-only
   rule. */

/* CTA bar (869em0kk1 round 3): now sits below the dossier content (tabs +
   sidebar), nested inside .bdb-ch-content instead of its own top-level
   .bdb-wrap — it no longer carries .bdb-wrap's own padding, so this rule is
   a no-op today. Left in place (harmless) in case a future revert reinstates
   .bdb-wrap on this element; see 869egbvp5 for the original "directly under
   the hero" positioning this replaced. */
.bi-ch-cta-top {
    padding-bottom: 0;
}

/* ── Dot variants ────────────────────────────────────────── */
.bdb-activity-list__dot--muted { background: var(--bugatti-muted); }
.bdb-activity-list__dot--green { background: var(--bugatti-green); }

/* ── Lightbox ────────────────────────────────────────────── */
.bdb-lb {
    position: fixed;
    inset: 0;
    background: rgba(7, 12, 20, 0.96);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    backdrop-filter: blur(6px);
}

.bdb-lb.is-open { display: flex; }

.bdb-lb__img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
}

.bdb-lb__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--bugatti-muted);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.bdb-lb__close:hover { color: var(--bugatti-text); }

.bdb-lb__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13, 22, 35, 0.85);
    border: 1px solid var(--bugatti-border);
    color: var(--bugatti-text);
    width: 48px;
    height: 48px;
    border-radius: 0;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

.bdb-lb__btn:hover {
    background: var(--bugatti-panel-2);
    border-color: var(--bugatti-border-bright);
}

.bdb-lb__btn--prev { left: 1.5rem; }
.bdb-lb__btn--next { right: 1.5rem; }

.bdb-lb__counter {
    font-size: 0.72rem;
    color: var(--bugatti-muted);
    letter-spacing: 0.12em;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
    .bdb-chassis-layout {
        grid-template-columns: 1fr 300px;
    }
}

@media (max-width: 1024px) {
    .bdb-chassis-layout {
        grid-template-columns: 1fr;
    }
    .bdb-chassis-sidebar {
        position: static;
        order: -1;
    }
}

@media (max-width: 768px) {
    .bdb-ch-hero { min-height: 58vh; }
    .bdb-ch-hero__num { font-size: clamp(4rem, 14vw, 6rem); }
    .bdb-ch-hero__topbar { padding: 1.25rem 1.25rem; }
    .bdb-ch-hero__bottom { padding: 0 1.25rem 2.25rem; }
    .bdb-ch-statrow { grid-template-columns: repeat(2, 1fr); }
    .bdb-ch-statrow__item { padding: 1.25rem 1.5rem; }
    .bdb-ch-statrow__item::before { left: 1.5rem; }
    .bdb-ch-spec-grid { grid-template-columns: 1fr; }
    .bdb-ch-register-head,
    .bdb-ch-register-row {
        grid-template-columns: 1fr 1fr 24px;
    }
    .bdb-ch-register-head > *:nth-child(2),
    .bdb-ch-register-head > *:nth-child(4),
    .bdb-ch-register-row > *:nth-child(2),
    .bdb-ch-register-row > *:nth-child(4) { display: none; }
    .bdb-ch-photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .bi-ch-cta { padding: 1.5rem; }
    /* (3120) The .bdb-wrap gutter that sat here is gone. Once the two
       rules were reduced to what they actually meant, this one and the
       860px one both said "padding-bottom: 3rem" — and 768 is inside 860,
       so the 860px block already covers it. The only thing this rule ever
       added was the contradictory side padding. */

    /* ── Chassis page: consistent mobile section margins (869er3htr) ──────
       Two separate offsets made the middle column look misaligned on phones.

       1. .bdb-card__pad's 2rem side padding has no mobile override, so card
          content sat at 20px (.bdb-wrap) + 32px = 52px from the screen edge,
          while .bdb-ch-hero__bottom directly above it sits at 20px. That 32px
          step is the "large left margin starting at Technical Dossier".
          Matching the hero's 1.25rem closes the step to zero — every section
          card's content now begins on the same vertical line as the hero's.

       2. Only Ownership History and Events were moved to the connected-line
          timeline (PR #1206), whose 1.75rem indent clears its own connector
          line. Service Records, Chassis & Engine Number History, References
          and Documents still use the flush .bdb-activity-list, so list text
          started 28px further right in two sections out of six. On phones the
          connector moves into the card's padding gutter instead: the list
          itself goes flush, and ::before is pulled left by the same amount it
          previously reserved, so the line still renders in exactly the same
          place relative to the dots while every section's text shares one
          left edge.

          The connector and dot offsets are re-derived rather than reused:
          .bdb-card has overflow:hidden and the mobile gutter is only 20px, so
          the desktop dot offset (-1.38rem = -22px, sized against the 28px
          indent) would be clipped. At -1.1rem the 11px dot spans -17.6px to
          -6.6px and the 1px line sits at -12px — dot centre -12.1px, so the
          two stay visually aligned and both clear the 20px gutter.

       Desktop is deliberately untouched: the wider gutter reads as intended
       there, and the reported problem is mobile-only. The dossier's side-line
       borders are also untouched, per the ticket (pending Joe's input). */
    .bdb-card__pad { padding: 1.75rem 1.25rem; }

    .bdb-ch-timeline { padding-left: 0; }
    .bdb-ch-timeline::before { left: -0.75rem; }
    .bdb-ch-timeline__dot { left: -1.1rem; }
}

@media (max-width: 480px) {
    .bdb-ch-hero__topbar-actions { display: none; }
    .bdb-ch-hero__num { font-size: clamp(3.5rem, 16vw, 5rem); }
    .bi-ch-cta { flex-direction: column; align-items: flex-start; }
    /* Facts grid used a fixed 148px column width, sized for sitting beside a
       desktop-width number; on phones (where it now wraps onto its own line
       under the name instead of vanishing, see 869egbvnc) let it fill the
       available width instead so it can't overflow narrow viewports. */
    .bdb-ch-hero__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .bdb-ch-hero__fact-value {
        max-width: none;
    }
}


/* Stat strip (full-width 4-col) */
.bdb-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--bugatti-border);
    border: 1px solid var(--bugatti-border);
    border-radius: var(--bugatti-radius);
    overflow: hidden;
    margin-bottom: 2rem;
}
.bdb-stat-strip__item {
    background: var(--bugatti-panel);
    padding: 1.5rem 1.75rem;
    position: relative;
}
.bdb-stat-strip__item::before {
    content: '';
    position: absolute;
    top: 0; left: 1.75rem;
    width: 2rem; height: 2px;
    background: var(--gold);
}
.bdb-stat-strip__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(2rem,4vw,3rem);
    font-weight: 300;
    color: var(--bugatti-gold);
    line-height: 1;
    display: block;
}
.bdb-stat-strip__lbl {
    font-size: 0.68rem;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-top: 0.3rem;
    display: block;
}

/* Main + sidebar grid */
.bdb-chassis-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}
/* Chassis page: single full-width column now the Technical Dossier card lives
   inside the Details tab instead of a right sidebar. */
.bdb-chassis-layout--full {
    grid-template-columns: 1fr;
}
.bdb-chassis-sidebar {
    position: sticky;
    /* Stick just below the fixed header (3336 — was a hardcoded 80px twin
       of the old bar height). */
    top: var(--bi-header-h, 50px);
}

/* Registry DL rows */
.bdb-reg-dl {
    list-style: none;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
}
.bdb-reg-dl li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bugatti-border);
}
.bdb-reg-dl li:last-child { border-bottom: none; }
.bdb-reg-dl__key {
    color: var(--bugatti-muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    max-width: 45%;
}
.bdb-reg-dl__val {
    color: var(--bugatti-text);
    text-align: right;
    font-weight: 500;
}

/* Photo grid */
.bdb-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.bdb-photo-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0;
    border: 1px solid var(--bugatti-border);
    cursor: pointer;
    position: relative;
}
.bdb-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}
.bdb-photo-item:hover img { transform: scale(1.05); }
.bdb-photo-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(7,12,20,.85));
    padding: 1rem 0.6rem 0.5rem;
    font-size: 0.68rem;
    color: var(--bugatti-text);
}

/* Chassis register rows */
.bdb-chassis-register {
    margin-top: 0.5rem;
}
.bdb-chassis-row {
    display: grid;
    grid-template-columns: 120px 60px 1fr 1fr 24px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bugatti-border);
    text-decoration: none;
    color: var(--bugatti-text);
    font-size: 0.82rem;
    transition: background 0.15s;
    border-radius: 0;
}
.bdb-chassis-row:hover { background: hsl(var(--gold-hsl) / .04); }
.bdb-chassis-row.is-current {
    background: hsl(var(--gold-hsl) / .07);
    border-left: 2px solid var(--bugatti-gold);
    padding-left: 0.5rem;
}
.bdb-chassis-row__num {
    font-family: var(--f-display);
    font-style: italic;
    color: var(--bugatti-gold);
    font-size: 0.95rem;
}
.bdb-chassis-row.is-current .bdb-chassis-row__num { color: var(--bugatti-gold); }
.bdb-chassis-row__arrow { color: var(--bugatti-muted); font-size: 0.8rem; }
.bdb-chassis-row-head {
    display: grid;
    grid-template-columns: 120px 60px 1fr 1fr 24px;
    gap: 0.75rem;
    padding: 0.4rem 0 0.6rem;
    border-bottom: 1px solid var(--bugatti-border-bright);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-bottom: 0;
}

/* CTA bar */
.bdb-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.bdb-cta-bar__copy { flex: 1; }

/* Lightbox */
.bdb-lb {
    position: fixed;
    inset: 0;
    background: rgba(7,12,20,.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.bdb-lb.is-open { display: flex; }
.bdb-lb__img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
}
.bdb-lb__close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    background: none; border: none;
    color: var(--bugatti-muted);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}
.bdb-lb__close:hover { color: var(--bugatti-text); }
.bdb-lb__btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(13,22,35,.8);
    border: 1px solid var(--bugatti-border);
    color: var(--bugatti-text);
    width: 44px; height: 44px;
    border-radius: 0;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
}
.bdb-lb__btn:hover {
    background: var(--bugatti-panel-2);
    border-color: var(--bugatti-border-bright);
}
.bdb-lb__btn--prev { left: 1.5rem; }
.bdb-lb__btn--next { right: 1.5rem; }
.bdb-lb__counter {
    font-size: 0.75rem;
    color: var(--bugatti-muted);
    letter-spacing: 0.1em;
}

/* Activity list dot variants */
.bdb-activity-list__dot--muted { background: var(--bugatti-muted); }
.bdb-activity-list__dot--green { background: var(--bugatti-green); }

/* Responsive chassis */
@media (max-width: 1024px) {
    .bdb-chassis-layout { grid-template-columns: 1fr; }
    .bdb-chassis-sidebar { position: static; }
}
@media (max-width: 640px) {
    .bdb-stat-strip { grid-template-columns: repeat(2, 1fr); }
    .bdb-photo-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .bdb-chassis-row { grid-template-columns: 100px 1fr 24px; }
    .bdb-chassis-row > *:nth-child(2),
    .bdb-chassis-row > *:nth-child(4) { display: none; }
    .bdb-chassis-row-head > *:nth-child(2),
    .bdb-chassis-row-head > *:nth-child(4) { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Ownership timeline — expandable detail cards
════════════════════════════════════════════════════════════ */

.bdb-ch-timeline__meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.bdb-ch-timeline__cur-badge {
    font-size: 0.62rem;
    font-family: var(--f-label);
    font-style: normal;
    font-weight: 600;
    color: var(--bugatti-green);
    background: rgba(62, 207, 142, 0.1);
    border: 1px solid rgba(62, 207, 142, 0.25);
    border-radius: 0;
    padding: 0.1rem 0.45rem;
    letter-spacing: 0.06em;
}

.bdb-ch-timeline__era-chip {
    font-size: 0.6rem;
    font-family: var(--f-label);
    font-weight: 500;
    color: var(--gold);
    background: hsl(var(--gold-hsl) / 0.06);
    border: 1px solid hsl(var(--gold-hsl) / 0.16);
    border-radius: 0;
    padding: 0.1rem 0.45rem;
    letter-spacing: 0.05em;
    font-style: normal;
}

.bdb-ch-timeline__nat {
    font-size: 0.68rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    font-style: normal;
}

.bdb-ch-timeline__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.55rem;
    background: none;
    border: 1px solid hsl(var(--gold-hsl) / 0.2);
    border-radius: 0;
    padding: 0.22rem 0.65rem;
    color: var(--gold);
    font-size: 0.64rem;
    font-family: var(--f-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.bdb-ch-timeline__toggle:hover {
    border-color: hsl(var(--gold-hsl) / 0.4);
    color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / 0.05);
}

.bdb-ch-timeline__toggle-icon {
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 300;
    transition: transform 0.25s;
    font-style: normal;
}

.bdb-ch-timeline__toggle[aria-expanded="true"] .bdb-ch-timeline__toggle-icon {
    transform: rotate(45deg);
}

.bdb-ch-timeline__toggle[aria-expanded="true"] {
    color: var(--bugatti-gold);
    border-color: hsl(var(--gold-hsl) / 0.4);
}

.bdb-ch-timeline__detail {
    margin-top: 0.65rem;
    padding: 0.9rem 1.1rem;
    background: hsl(var(--gold-hsl) / 0.03);
    border-left: 2px solid hsl(var(--gold-hsl) / 0.22);
    border-radius: 0;
    animation: bdb-detail-in 0.2s ease;
}

@keyframes bdb-detail-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bdb-ch-timeline__detail-notes {
    font-size: 0.79rem;
    color: var(--bugatti-text);
    line-height: 1.65;
    margin: 0 0 0.6rem;
}

.bdb-ch-timeline__detail-row {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin-top: 0.35rem;
    font-size: 0.72rem;
}

.bdb-ch-timeline__detail-lbl {
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 82px;
}

.bdb-ch-timeline__detail-val {
    color: var(--bugatti-gold);
    font-weight: 600;
}

.bdb-ch-timeline__gap .bdb-ch-timeline__name {
    color: var(--bugatti-muted);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.bdb-ch-timeline__dot--gap {
    background: transparent;
    border-style: dashed;
    border-color: var(--bugatti-muted);
    opacity: 0.6;
}

.bdb-ch-timeline__gap-cta {
    margin-top: 0.75rem;
}

/* ════════════════════════════════════════════════════════════
   Type page (single-bcc_type) — dashboard design system
════════════════════════════════════════════════════════════ */

.bdb-tp-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 12, 20, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bugatti-border);
    transition: box-shadow 0.3s;
}

.bdb-tp-tabs.is-scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.bdb-tp-tabs__inner {
    display: flex;
    align-items: center;
    padding: 0 var(--bi-shell-gutter);
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.bdb-tp-tabs__inner::-webkit-scrollbar { display: none; }

.bdb-tp-tab {
    position: relative;
    padding: 1.1rem 1.4rem;
    font-size: 0.75rem;
    font-family: var(--f-label);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.bdb-tp-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.4rem;
    right: 1.4rem;
    height: 2px;
    background: var(--bugatti-gold);
    transform: scaleX(0);
    transition: transform 0.25s;
}

.bdb-tp-tab:hover { color: var(--bugatti-text); }
.bdb-tp-tab.is-active { color: var(--bugatti-gold); }
.bdb-tp-tab.is-active::after { transform: scaleX(1); }

.bdb-tp-tab__badge {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.6rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0;
    background: hsl(var(--gold-hsl) / 0.12);
    color: var(--bugatti-gold);
    font-weight: 600;
    vertical-align: middle;
}

.bdb-tp-tab__all {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--bugatti-muted);
    text-decoration: none;
    padding: 1.1rem 0 1.1rem 1.4rem;
    flex-shrink: 0;
    transition: color 0.2s;
}

.bdb-tp-tab__all:hover { color: var(--bugatti-gold); }

.bdb-tp-panel { display: none; }
.bdb-tp-panel.is-active { display: block; }

.bdb-tp-ov {
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    padding: 2.5rem var(--bi-shell-gutter) 4rem;
}

.bdb-tp-ov__split {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
    margin-top: 1.75rem;
}

.bdb-tp-ov__strip-figure {
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.bdb-tp-ov__strip-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.bdb-tp-ov__strip-figure:hover .bdb-tp-ov__strip-img img { transform: scale(1.04); }
.bdb-tp-ov__strip-figure.is-featured .bdb-tp-ov__strip-img img { aspect-ratio: 16/9; }

.bdb-tp-ov__strip-caption {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.4rem 0.2rem;
}

.bdb-tp-ov__strip-plate {
    font-size: 0.6rem;
    font-family: var(--f-label);
    letter-spacing: 0.12em;
    color: var(--bugatti-gold);
    flex-shrink: 0;
}

.bdb-tp-ov__strip-text {
    font-size: 0.7rem;
    color: var(--bugatti-muted);
}

.bdb-tp-ov__strip-more {
    width: 100%;
    padding: 0.6rem 1rem;
    background: hsl(var(--gold-hsl) / 0.05);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    color: var(--bugatti-muted);
    font-size: 0.72rem;
    font-family: var(--f-label);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    text-align: center;
}

.bdb-tp-ov__strip-more:hover { border-color: hsl(var(--gold-hsl) / .35); color: var(--bugatti-gold); }

/* Chassis preview cards (overview panel) */
.bdb-tp-chassis-preview__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.bdb-tp-chassis-preview__link {
    font-size: 0.72rem;
    color: var(--bugatti-gold);
    text-decoration: none;
    font-family: var(--f-label);
    background: none;
    border: 1px solid hsl(var(--gold-hsl) / 0.28);
    padding: 0.38rem 0.85rem;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.bdb-tp-chassis-preview__link:hover { background: hsl(var(--gold-hsl) / .08); border-color: var(--bugatti-gold); }

.bdb-tp-chassis-preview__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
}

.bdb-tp-chassis-card {
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.bdb-tp-chassis-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, hsl(var(--gold-hsl) / .45), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.bdb-tp-chassis-card:hover { border-color: hsl(var(--gold-hsl) / .28); background: var(--bugatti-panel-2); transform: translateY(-2px); }
.bdb-tp-chassis-card:hover::before { opacity: 1; }
.bdb-tp-chassis-card--lead { border-color: hsl(var(--gold-hsl) / .28); background: var(--bugatti-panel-2); }
.bdb-tp-chassis-card--lead::before { opacity: 1; }

.bdb-tp-chassis-card__label {
    font-size: 0.6rem;
    font-family: var(--f-label);
    letter-spacing: var(--bi-ls-overline, 1px);
    color: var(--bugatti-gold);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.bdb-tp-chassis-card__plate {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.45rem;
    font-weight: 300;
    color: var(--bugatti-text);
    line-height: 1.1;
}

.bdb-tp-chassis-card__meta {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--bugatti-muted);
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.bdb-tp-chassis-card__bcc {
    margin-top: 0.5rem;
    font-size: 0.63rem;
    font-family: var(--f-label);
    font-weight: 600;
    color: var(--bugatti-green);
    letter-spacing: 0.06em;
}

.bdb-tp-chassis-card__cta {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.68rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    transition: color 0.2s;
}

.bdb-tp-chassis-card:hover .bdb-tp-chassis-card__cta { color: var(--bugatti-gold); }

/* Variants panel */
.bdb-tp-var-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 2rem var(--bi-shell-gutter);
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
}

.bdb-tp-var-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 4/3;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    border: 1px solid var(--bugatti-border);
    background: var(--bugatti-panel);
    transition: transform 0.3s, box-shadow 0.3s;
}

.bdb-tp-var-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.4); }

.bdb-tp-var-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bdb-tp-var-card:hover .bdb-tp-var-card__img { transform: scale(1.05); }

.bdb-tp-var-card__placeholder {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, var(--bugatti-panel-2) 0%, var(--bugatti-bg) 70%);
}

.bdb-tp-var-card__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(7,12,20,.95) 0%, rgba(7,12,20,.4) 70%, transparent 100%);
}

.bdb-tp-var-card__eyebrow {
    font-size: 0.6rem;
    font-family: var(--f-label);
    letter-spacing: var(--bi-ls-overline, 1px);
    color: var(--bugatti-gold);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.bdb-tp-var-card__title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--bugatti-text);
    line-height: 1.2;
}

.bdb-tp-var-card__sub {
    font-size: 0.7rem;
    color: var(--bugatti-muted);
    margin-top: 0.25rem;
    font-family: var(--f-label);
}

/* Body style strips */
.bdb-tp-uits {
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    padding: 0 var(--bi-shell-gutter) 3rem;
}

.bdb-tp-uits__heading {
    font-size: 0.68rem;
    font-family: var(--f-label);
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-bottom: 1.25rem;
}

.bdb-tp-uits__section { margin-bottom: 2rem; }

.bdb-tp-uits__var-label {
    font-size: 0.78rem;
    color: var(--bugatti-text);
    font-family: var(--f-label);
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-tp-uits__strip { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.bdb-tp-uit-card {
    width: 156px;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--bugatti-border);
    background: var(--bugatti-panel);
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color 0.2s, transform 0.2s;
}

.bdb-tp-uit-card:hover { border-color: hsl(var(--gold-hsl) / .28); transform: translateY(-2px); }

.bdb-tp-uit-card__img { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--bugatti-panel-2); }
.bdb-tp-uit-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.bdb-tp-uit-card:hover .bdb-tp-uit-card__img img { transform: scale(1.06); }

.bdb-tp-uit-card__no-img {
    width: 100%;
    height: 100%;
    min-height: 118px;
    background: radial-gradient(ellipse at 50% 60%, var(--bugatti-panel-2) 0%, var(--bugatti-bg) 100%);
}

.bdb-tp-uit-card__body { padding: 0.55rem 0.75rem; }
.bdb-tp-uit-card__name { font-size: 0.73rem; color: var(--bugatti-text); font-weight: 500; }
.bdb-tp-uit-card__code { font-size: 0.63rem; color: var(--bugatti-muted); margin-top: 0.12rem; font-family: var(--f-label); }

/* Chassis register panel */
.bdb-tp-register-wrap {
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    padding: 3rem var(--bi-shell-gutter) 4rem;
}

.bdb-tp-filter {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bdb-tp-filter input {
    flex: 1;
    max-width: 400px;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 0.55rem 1rem;
    color: var(--bugatti-text);
    font-size: 0.8rem;
    font-family: var(--f-label);
    /* 3124: `outline: none` removed. What replaced it was a border going
       45%-opacity gold, which against this panel is a change you have to
       already know about to notice. focus.css adds the full-strength
       underline on top. */
    transition: border-color 0.2s;
}

.bdb-tp-filter input:focus { border-color: hsl(var(--gold-hsl) / .45); }
.bdb-tp-filter input::placeholder { color: var(--bugatti-muted); }
.bdb-tp-filter__count { font-size: 0.7rem; color: var(--bugatti-muted); font-family: var(--f-label); }

/* Register facet filters -- an inline panel on desktop; the SAME markup
   becomes a right-hand slide-in drawer on mobile (see @media below). */
.bdb-reg-filters-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    color: var(--bugatti-text);
    font-size: 0.75rem;
    font-family: var(--f-label);
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
}
.bdb-reg-filters-toggle:hover { border-color: hsl(var(--gold-hsl) / .35); color: var(--bugatti-gold); }
.bdb-reg-filters-toggle__count {
    background: var(--bugatti-gold);
    color: var(--bugatti-bg);
    font-weight: 700;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 0;
}

.bdb-reg-filters-backdrop { display: none; }

.bdb-reg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    margin-bottom: 1.1rem;
    padding: 1rem 1.25rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
}
.bdb-reg-filters__head,
.bdb-reg-filters__foot { display: none; }
.bdb-reg-filters__body { display: contents; }

.bdb-reg-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.64rem;
    font-family: var(--f-label);
    color: var(--bugatti-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-width: 150px;
    flex: 1 1 150px;
}
.bdb-reg-filter-field select,
.bdb-type-combo__input {
    background: var(--bugatti-bg);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 0.5rem 0.65rem;
    color: var(--bugatti-text);
    font-size: 0.78rem;
    font-family: var(--f-label);
    text-transform: none;
    letter-spacing: normal;
    /* 3124: `outline: none` removed, same story as .bdb-tp-filter above. */
    width: 100%;
    transition: border-color 0.2s;
}
.bdb-reg-filter-field select:focus,
.bdb-type-combo__input:focus { border-color: hsl(var(--gold-hsl) / .45); }

.bdb-type-combo { position: relative; }
.bdb-type-combo__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bugatti-panel-2);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    z-index: 2001;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
}
.bdb-type-combo__list li {
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    color: var(--bugatti-text);
    cursor: pointer;
    font-family: var(--f-label);
}
.bdb-type-combo__list li:hover { background: hsl(var(--gold-hsl) / .06); color: var(--bugatti-gold); }
.bdb-type-combo__list li.bdb-type-combo__all { color: var(--bugatti-gold); border-bottom: 1px solid var(--bugatti-border); }

/* Active filter pills */
.bdb-reg-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.bdb-reg-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem 0.3rem 0.65rem;
    background: hsl(var(--gold-hsl) / .08);
    border: 1px solid hsl(var(--gold-hsl) / .3);
    border-radius: 0;
    font-size: 0.68rem;
    font-family: var(--f-label);
    color: var(--bugatti-gold);
}
.bdb-reg-pill__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0;
    background: transparent;
    border: none;
    color: var(--bugatti-gold);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.bdb-reg-pill__x:hover { background: hsl(var(--gold-hsl) / .2); }
.bdb-reg-pills__reset {
    font-size: 0.68rem;
    font-family: var(--f-label);
    color: var(--bugatti-muted);
    text-decoration: underline;
    margin-left: 0.25rem;
    cursor: pointer;
}
.bdb-reg-pills__reset:hover { color: var(--bugatti-gold); }

@media (max-width: 768px) {
    .bdb-reg-filters-toggle { display: inline-flex; }

    .bdb-reg-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(7,12,20,.72);
        backdrop-filter: blur(4px);
        z-index: 1999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }
    .bdb-reg-filters-backdrop.is-open { opacity: 1; pointer-events: all; }

    .bdb-reg-filters {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(340px, 86vw);
        margin: 0;
        background: var(--bugatti-panel);
        border: none;
        border-left: 1px solid var(--bugatti-border);
        border-radius: 0;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0;
        transform: translateX(100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
    }
    .bdb-reg-filters.is-open { transform: translateX(0); }

    .bdb-reg-filters__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.25rem 1rem;
        border-bottom: 1px solid var(--bugatti-border);
        flex-shrink: 0;
    }
    .bdb-reg-filters__title { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: var(--bugatti-gold); }
    .bdb-reg-filters__close {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.06);
        border: 1px solid var(--bugatti-border);
        border-radius: 0;
        color: var(--bugatti-muted);
        font-size: 1.1rem;
        cursor: pointer;
    }

    .bdb-reg-filters__body {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        padding: 1.25rem;
        flex: 1;
    }
    .bdb-reg-filter-field { min-width: 0; flex: none; }

    .bdb-reg-filters__foot {
        display: block;
        padding: 1rem 1.25rem 1.4rem;
        border-top: 1px solid var(--bugatti-border);
        flex-shrink: 0;
    }
    .bdb-reg-filters__apply {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bugatti-gold);
        color: var(--bugatti-bg);
        border: none;
        border-radius: 0;
        font-family: var(--f-label);
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
    }
}

/* Chassis register pagination */
.bdb-tp-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bugatti-border);
    flex-wrap: wrap;
}

.bdb-tp-pager__perpage {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    letter-spacing: 0.05em;
}

.bdb-tp-pager__pp {
    padding: 0.28rem 0.6rem;
    font-size: 0.68rem;
    font-family: var(--f-label);
    background: transparent;
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    color: var(--bugatti-muted);
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.bdb-tp-pager__pp:hover { border-color: hsl(var(--gold-hsl) / .35); color: var(--bugatti-text); }
.bdb-tp-pager__pp.is-active { border-color: var(--gold); color: var(--bugatti-gold); background: hsl(var(--gold-hsl) / .07); }

.bdb-tp-pager__nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.bdb-tp-pager__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-family: var(--f-label);
    background: transparent;
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    color: var(--bugatti-muted);
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    user-select: none;
}

.bdb-tp-pager__btn:hover:not(:disabled):not(.is-active) {
    border-color: hsl(var(--gold-hsl) / .35);
    color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / .06);
}

.bdb-tp-pager__btn:disabled { opacity: 0.28; cursor: default; }

.bdb-tp-pager__btn.is-active {
    border-color: var(--gold);
    color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / .09);
    font-weight: 600;
}

.bdb-tp-pager__ellipsis {
    font-size: 0.72rem;
    color: var(--bugatti-muted);
    padding: 0 0.2rem;
    font-family: var(--f-label);
}

.bdb-tp-pager__info {
    font-size: 0.68rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    white-space: nowrap;
}

.bdb-tp-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }

.bdb-tp-table th {
    padding: 0.6rem 0.85rem;
    text-align: left;
    font-size: 0.62rem;
    font-family: var(--f-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    border-bottom: 1px solid var(--bugatti-border);
}

.bdb-tp-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid hsl(var(--gold-hsl) / 0.05);
    vertical-align: middle;
}

.bdb-tp-table tr:hover td { background: hsl(var(--gold-hsl) / 0.03); }

.bdb-tp-table__chassis-link {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--bugatti-text);
    text-decoration: none;
    transition: color 0.2s;
}

.bdb-tp-table__chassis-link:hover { color: var(--bugatti-gold); }

.bdb-tp-table__view-link {
    font-size: 0.68rem;
    color: var(--bugatti-muted);
    text-decoration: none;
    font-family: var(--f-label);
    transition: color 0.2s;
}

.bdb-tp-table__view-link:hover { color: var(--bugatti-gold); }

.bdb-tp-bcc-pill {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 0;
    /* (3122) Fallback was the raw blue. It has to stay OPAQUE: color-mix
       supplies the transparency here, so a translucent base would multiply
       and wash the pill out. --fg is the opaque form of --bugatti-muted. */
    background: color-mix(in srgb, var(--c, var(--fg)) 15%, transparent);
    color: var(--c, var(--bugatti-muted));
    border: 1px solid color-mix(in srgb, var(--c, var(--fg)) 30%, transparent);
}

/* Gallery panel */
.bdb-tp-gallery {
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    padding: 3rem var(--bi-shell-gutter) 4rem;
}

/* ════════════════════════════════════════════════════════════
   Category archive (taxonomy-bcc_category) — dashboard style
════════════════════════════════════════════════════════════ */

.bdb-cat-hero {
    position: relative;
    min-height: clamp(460px, 64vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--bugatti-bg);
}

.bdb-cat-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    filter: var(--photo-grade);
    transition: transform 9s ease;
}

.bdb-cat-hero:hover .bdb-cat-hero__bg { transform: scale(1.03); }

/* ── Optional footage layer (3214) ──────────────────────────────────
   Sits exactly where __bg sits and covers it while playing. The photo
   underneath stays the fallback, so a hero with a video is never worse
   off than one without: no autoplay, no codec, reduced motion, or a
   layer that has not started yet all leave the photo showing.
   Generic on purpose, because .bdb-cat-hero is shared with the type
   and chassis pages. Playback lives in assets/js/bi-hero-video.js.

   The collection page's editorial band uses the same layer, so it is
   styled here beside the hero rather than in that page's own CSS: the
   page is rendered twice, once by the theme and once by the React SPA,
   and a rule that lives in either one of those would only apply to
   half the site. */
.bdb-cat-hero__video,
.bi-col-about__video {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bdb-cat-hero__video video,
.bi-col-about__video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Same grade as every photo on the site. Without it the footage would sit
       visibly cooler and brighter than the still it replaces. */
    filter: var(--photo-grade);
    opacity: 0;
    /* Both clips are on screen together during the dissolve; see the JS. */
    transition: opacity .7s linear;
}

.bdb-cat-hero__video video.is-on,
.bi-col-about__video video.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .bdb-cat-hero__video,
    .bi-col-about__video { display: none; }
}

/* ── Chassis hero framing (869etva9w, Frank + Martien 01-09) ────────
   One framing policy on chassis pages: the WHOLE car is always visible,
   identically for portrait and landscape source photos. The hero photo
   box's aspect ratio is viewport-driven, never photo-driven — desktop
   brand skin gives it the right 62% pane × the text panel's height
   (brand-home.css), mobile stacks it at 100vw × clamp(240px,46vw,420px),
   and this file's own overlay fallback uses min-height:clamp(460px,64vh,
   760px) — so with `background-size: cover` the crop varied arbitrarily
   per photo: a source whose ratio happened to match the box showed the
   full car, everything else chopped nose/tail/roof off. `contain`
   letterboxes instead of cropping; the bars pick up the section's own
   brand background (var(--sur) under the brand skin, var(--bugatti-bg)
   here), so they read as panel surface, not black bars. Scoped to the
   chassis modifier only — category/type heroes keep their curated cover
   crops. Deliberately independent of the open header-treatment question
   (869etqynu): nothing here references the header, so it behaves the
   same whether the bar ends up solid above the hero or transparent over
   it. `background-repeat` is load-bearing: the base rule above never
   sets it, and a contained image would tile into its own letterbox bars.
   Placeholder branch (.bdb-ch-hero__bg--placeholder) excluded — it has
   no photo to frame and carries its own radial background. */
.bdb-cat-hero--chassis .bdb-cat-hero__bg:not(.bdb-ch-hero__bg--placeholder) {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* The ambient 9s hover zoom would push the car's extremities back out of
   the contained box — the full-car promise beats the flourish here. */
.bdb-cat-hero--chassis:hover .bdb-cat-hero__bg { transform: none; }

.bdb-cat-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(7,12,20,.9) 0%, rgba(7,12,20,.65) 25%, rgba(7,12,20,.32) 50%, transparent 75%),
        linear-gradient(to right, rgba(7,12,20,.85) 0%, rgba(7,12,20,.48) 32%, rgba(7,12,20,.1) 58%, transparent 82%);
}

/* (3120) Deliberately NOT moved onto the shell tokens, unlike every other
   1400px container in this file. With the brand skin on — which is how the
   site actually renders — brand-home.css turns this element into the
   category hero's split panel: a full-bleed composition anchored on
   --bi-space-x (the Brand Style screen's own section inset, default 70px)
   with its own width and min-height. It is a hero, not a page shell, and
   the two answer different questions. Folding it in would mean overriding
   an admin-configurable setting from a stylesheet. */
.bdb-cat-hero__inner {
    position: relative;
    z-index: 3;
    padding: 3rem 2.5rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.bdb-cat-hero__eyebrow {
    font-size: 0.66rem;
    font-family: var(--f-label);
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: 0.65rem;
}

.bdb-cat-hero__title {
    font-family: var(--f-display);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 300;
    color: var(--bugatti-text);
    line-height: 1.1;
    margin: 0 0 0.75rem;
}
.bdb-cat-hero__title-main {
    display: block;
    text-transform: uppercase;
    letter-spacing: .01em;
    /* (3134) Chassis numbers and type codes are always Latin characters. In an
       RTL context (dir="rtl" on <html> for Arabic), `unicode-bidi: isolate`
       alone still resolves a trailing neutral (a period) against the
       *inherited* rtl direction, so it stays misplaced at the visual start —
       plaintext instead resolves direction per-element from the text's own
       first strong character, which fixes it. */
    unicode-bidi: plaintext;
}
.bdb-cat-hero__title-years {
    display: block;
    font-size: 0.34em;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--bugatti-gold);
    margin-top: .35em;
    unicode-bidi: plaintext; /* (3134) year ranges are always LTR — see note above */
}
.bdb-cat-hero__title em {
    display: block;
    font-style: italic;
    color: var(--bugatti-text);
    unicode-bidi: plaintext; /* (3134) type names like "Type 57" are always Latin — see note above */
}

.bdb-cat-hero__desc {
    font-size: 0.86rem;
    color: var(--bugatti-muted);
    max-width: 500px;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.bdb-cat-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 3.25rem;
    margin-bottom: 1.75rem;
}

/* .bdb-cat-hero__explore styling removed with the last of its markup —
   the Explore scroll link is gone site-wide (2999/3302/#1443 + this). */

.bdb-cat-hero__stat-n {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.65rem;
    font-weight: 300;
    color: var(--bugatti-gold);
    line-height: 1;
}

.bdb-cat-hero__stat-l {
    font-size: 0.65rem;
    font-family: var(--f-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bugatti-text);
    margin-top: 0.2rem;
}

/* BCC page only (3198, supersedes 1628's top-right corner seal, which the
   768px rule below also hid on mobile — the meeting wants it visible on
   both). Positioning context for the shared cert shield partial
   (template-parts/cert-seal.php). Size, aspect ratio and drop-shadow come
   from .bi-home-cert__seal in main.css — loaded site-wide before this
   sheet — so task 3199's mobile shrink of that rule applies here
   automatically; only PLACEMENT lives here. The wrapper div exists because
   .bdb-cat-hero clips (overflow:hidden for the bg hover zoom) while the
   shield must straddle the hero photo's bottom edge — half over the photo,
   half over the page — the same jump-out-of-the-photo treatment as the
   homepage certification intro. The two-class selector outranks both
   main.css rules (base and its 900px media block), so left/top are
   neutralised here while width keeps coming from main.css. */
.bi-bcc-hero {
    position: relative;
    /* 3275: Martien wanted the seal "a bit more up" from the exact photo
       edge on desktop — shared as a variable so the mobile rule below can
       land the seal at the same relative spot on the photo. */
    --bi-bcc-seal-nudge: clamp(24px, 3vw, 56px);
}
.bi-bcc-hero .bi-home-cert__seal {
    left: auto;
    top: auto;
    right: clamp(1.25rem, 6vw, 5rem);
    bottom: var(--bi-bcc-seal-nudge);
    transform: translateY(50%);
    z-index: 4;
}
/* 3275: below the brand-home.css <=1024px breakpoint the hero stacks into a
   column (photo on top, text panel below), so the section's bottom no
   longer coincides with the photo's bottom and the rule above lands the
   seal on the text panel. Re-anchor from the top using the same formula
   that sizes the mobile photo (.bdb-cat-hero__bg's height there), offset by
   the same nudge the desktop rule uses above, so the seal sits at the
   identical spot on the photo in both layouts. */
@media (max-width: 1024px) {
    .bi-bcc-hero .bi-home-cert__seal {
        top: calc(clamp(240px, 46vw, 420px) - var(--bi-bcc-seal-nudge));
        bottom: auto;
        transform: translateY(-50%);
    }
}

/* Category nav */
.bdb-cat-nav {
    position: relative;
    border-bottom: 1px solid var(--bugatti-border);
    background: rgba(7, 12, 20, 0.96);
    padding: 3rem 3rem 2rem;
}

.bdb-cat-nav__track {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}
.bdb-cat-nav__track::-webkit-scrollbar { display: none; }
.bdb-cat-nav__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.bdb-cat-nav__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    background: var(--bugatti-panel);
    border: 1px solid hsl(var(--gold-hsl) / 0.4);
    color: var(--bugatti-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, color .2s, opacity .2s, background .2s;
}
.bdb-cat-nav__arrow:hover { background: hsl(var(--gold-hsl) / 0.1); border-color: var(--bugatti-gold); }
.bdb-cat-nav__arrow:disabled { opacity: .25; cursor: default; pointer-events: none; }
.bdb-cat-nav__arrow--prev { left: .5rem; }
.bdb-cat-nav__arrow--next { right: .5rem; }

.bdb-cat-nav-card {
    position: relative;
    flex: 1 1 220px;
    min-width: 190px;
    height: 190px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bugatti-border);
    border-top: 3px solid transparent;
    border-radius: 0;
    text-decoration: none;
    color: var(--bugatti-muted);
    background: var(--bugatti-panel);
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.bdb-cat-nav-card:hover {
    color: var(--bugatti-text);
    border-color: hsl(var(--gold-hsl) / 0.45);
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}
.bdb-cat-nav-card.is-active {
    border-color: var(--bugatti-gold);
    border-top-color: var(--bugatti-gold);
    box-shadow: 0 0 0 1px hsl(var(--gold-hsl) / 0.25);
}

.bdb-cat-nav-card__media {
    position: relative;
    height: 58%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bugatti-panel-2);
}

.bdb-cat-nav-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: var(--photo-grade);
    transform: scale(1.15);
    transition: transform .5s ease;
}
.bdb-cat-nav-card:hover .bdb-cat-nav-card__bg { transform: scale(1.22); }

.bdb-cat-nav-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 12, 20, 0.05) 0%, rgba(7, 12, 20, 0.15) 70%, rgba(13, 22, 35, 0.9) 100%);
}
.bdb-cat-nav-card.is-active .bdb-cat-nav-card__overlay {
    background: linear-gradient(180deg, rgba(7, 12, 20, 0.05) 0%, rgba(20, 16, 6, 0.2) 70%, rgba(24, 18, 4, 0.85) 100%);
}

.bdb-cat-nav-card__current {
    position: absolute;
    z-index: 2;
    top: .55rem;
    right: .55rem;
    font-size: .52rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bugatti-bg);
    background: var(--bugatti-gold);
    padding: .2rem .45rem;
    border-radius: 0;
    font-family: var(--f-label);
}

.bdb-cat-nav-card__content {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: .3rem;
    padding: .65rem .95rem;
}
.bdb-cat-nav-card--all .bdb-cat-nav-card__content {
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 100%;
    padding: 1.1rem;
    gap: .5rem;
}

.bdb-cat-nav-card__icon {
    position: absolute;
    z-index: 2;
    top: .55rem;
    left: .55rem;
    flex-shrink: 0;
    color: var(--bugatti-text);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
    transition: color .25s;
}
.bdb-cat-nav-card--all .bdb-cat-nav-card__icon { position: static; color: var(--bugatti-gold); filter: none; }
.bdb-cat-nav-card.is-active .bdb-cat-nav-card__icon { color: var(--bugatti-gold); }
.bdb-cat-nav-card:hover .bdb-cat-nav-card__icon { color: var(--bugatti-gold); }

.bdb-cat-nav-card__label {
    font-size: .88rem;
    font-family: var(--f-label);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--bugatti-text);
    transition: color .25s;
}
.bdb-cat-nav-card.is-active .bdb-cat-nav-card__label { font-size: 1rem; color: var(--bugatti-gold); }
.bdb-cat-nav-card:hover .bdb-cat-nav-card__label { color: var(--bugatti-gold); }

.bdb-cat-nav-card__stats {
    font-size: .6rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
}

.bdb-cat-nav-card__browse {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    font-size: .62rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bugatti-gold);
    font-family: var(--f-label);
}
.bdb-cat-nav-card__browse i { font-style: normal; display: inline-block; transition: transform .25s; }
.bdb-cat-nav-card:hover .bdb-cat-nav-card__browse i { transform: translateX(4px); }

@media (max-width: 640px) {
    .bdb-cat-nav { padding: 1.5rem 1.25rem; }
    .bdb-cat-nav-card { flex: 1 1 170px; min-width: 150px; height: 170px; }
}

/* Category body */
.bdb-cat-body {
    max-width: var(--bi-shell-maxw);
    margin: 0 auto;
    padding: 3rem var(--bi-shell-gutter) 5rem;
}

/* (3193) The featured-chassis block is one shared component (bi_render_featured_chassis_section,
   functions.php) and it carries `.ch-page` so it lines up on the homepage, where it is a
   top-level child and that gutter is the only one. On a category page it lands inside
   .bdb-cat-body, which has already applied the same gutter, so the block gets it twice.
   Measured on /the-classic-era/: the "From the register" heading and its cards sat at 36px
   on a phone and 96px on desktop, while the type slider directly above them sat at 18px
   and 48px · the one section on the page that does not line up with the rest of it.

   Neutralised on the container rather than in the component. The component is shared and
   its homepage placement is correct, so the thing that is wrong here is the nesting, not
   the block. Category is the only nested call site: the type page renders the same section
   as a sibling of its hero, outside any guttered wrapper. */
.bdb-cat-body .ch-page { padding-inline: 0; }

.bdb-era-section { margin-bottom: 5rem; }

.bdb-era-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem 0 0.75rem;
    border-top: var(--bi-hairline-w, 2px) solid var(--bugatti-border);
    border-bottom: var(--bi-hairline-w, 2px) solid var(--bugatti-border);
}

.bdb-era-section__title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: var(--bi-size-h4, 28px);
    font-weight: 300;
    color: var(--bugatti-text);
    margin: 0;
}

.bdb-era-section__count {
    font-size: var(--bi-size-overline, 12px);
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    flex-shrink: 0;
}
.bdb-era-section__viewall {
    font-size: 0.7rem;
    font-family: var(--f-label);
    letter-spacing: .06em;
    color: var(--bugatti-gold);
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .2s;
}
.bdb-era-section__viewall:hover { opacity: 1; }

/* Task 3320: category page section headings (Subcategories/Types/Explore
   Other Categories) drop the top/bottom rule and match .bdb-cat-hero__eyebrow's
   plain style instead of the shared line-eyebrow look .bdb-ch-eyebrow gives
   every other page (Type page record, etc.) -- scoped to .bdb-cat-body so
   those other pages, which reuse the same shared classes, are unaffected. */
.bdb-cat-body .bdb-era-section__head {
    border-top: none;
    border-bottom: none;
    padding: 0;
}

.bdb-cat-body .bdb-ch-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 400;
    font-family: var(--f-label);
    margin-bottom: 0.65rem;
}

.bdb-cat-body .bdb-ch-eyebrow::before {
    content: none;
}

/* Single type page: same clean label style as .bdb-cat-body — no top/bottom
   rules on the section head, eyebrow matches the plain label look. */
.single-bcc_type .bdb-era-section__head {
    border-top: none;
    border-bottom: none;
    padding: 0;
}
.single-bcc_type .bdb-ch-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 400;
    font-family: var(--f-label);
    margin-bottom: 0.65rem;
}
.single-bcc_type .bdb-ch-eyebrow::before {
    content: none;
}

/* Subcategory cards reuse the exact .bdb-cat-nav-card component from the
   top-level category switcher (same photo/icon/label/stats/browse layout),
   for visual parity between category and subcategory navigation. That
   component grows to fill its row via flex, which looks right when there
   are 5-6 of them (the switcher) but stretches oddly wide/short when a
   category only has 1-2 subcategories -- so pin the natural width here. */
.bdb-subcat-slider .bdb-cat-nav-card { flex-grow: 0; }

/* Featured Types also reuses .bdb-cat-nav-card (869-category-nav-parity),
   same reasoning: pin the width instead of letting a short type list
   stretch across the row. */
.bdb-featured-types-track .bdb-cat-nav-card { flex-grow: 0; }

/* Type cards */
/* Horizontal, uniform-height slider — replaces the old wrapping grid.
   Native overflow-x + scroll-snap gives touch swipe for free; arrows,
   dots and mouse-drag are wired up in taxonomy-bcc_category.php. */
.bdb-type-slider { position: relative; }
.bdb-type-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: .25rem .25rem .5rem;
    margin: -.25rem -.25rem 0;
    cursor: grab;
}
.bdb-type-track::-webkit-scrollbar { display: none; }
.bdb-type-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.bdb-type-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    background: var(--bugatti-panel);
    border: 1px solid hsl(var(--gold-hsl) / 0.4);
    color: var(--bugatti-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, color .2s, opacity .2s, background .2s;
}
.bdb-type-slider__arrow:hover { background: hsl(var(--gold-hsl) / 0.1); border-color: var(--bugatti-gold); }
.bdb-type-slider__arrow:disabled { opacity: .25; cursor: default; pointer-events: none; }
.bdb-type-slider__arrow--prev { left: -1.125rem; }
.bdb-type-slider__arrow--next { right: -1.125rem; }

.bdb-type-slider__dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: 1rem;
}
.bdb-type-slider__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--bugatti-border);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.bdb-type-slider__dot.is-active { background: var(--bugatti-gold); transform: scale(1.3); }

.bdb-type-card {
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    flex: 0 0 clamp(180px, 17vw, 220px);
    scroll-snap-align: start;
    height: 290px;
}

.bdb-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
    border-color: hsl(var(--gold-hsl) / 0.3);
}

.bdb-type-card__img-wrap {
    height: 140px;
    overflow: hidden;
    background: var(--bugatti-panel-2);
    flex-shrink: 0;
}

.bdb-type-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); transform: scale(1.12); transition: transform 0.5s ease; }
.bdb-type-card:hover .bdb-type-card__img-wrap img { transform: scale(1.2); }

@media (max-width: 1024px) { .bdb-type-card { flex-basis: 45%; } }
@media (max-width: 640px)  {
    .bdb-type-card { flex-basis: 82%; }
    .bdb-type-slider__arrow { display: none; }
}

.bdb-type-card__no-img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background: radial-gradient(ellipse at 60% 40%, var(--bugatti-panel-2) 0%, var(--bugatti-bg) 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 2.5rem;
    color: hsl(var(--gold-hsl) / 0.07);
}

.bdb-type-card__body {
    padding: .9rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bdb-type-card__index {
    font-size: 0.6rem;
    font-family: var(--f-label);
    letter-spacing: var(--bi-ls-overline, 1px);
    color: hsl(var(--gold-hsl) / 0.45);
    margin-bottom: 0.2rem;
}

.bdb-type-card__era {
    font-size: 0.63rem;
    font-family: var(--f-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: 0.35rem;
}

.bdb-type-card__name {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--bugatti-text);
    line-height: 1.2;
}

.bdb-type-card__summary {
    font-size: 0.74rem;
    color: var(--bugatti-muted);
    line-height: 1.55;
    margin: 0.4rem 0 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bdb-type-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
}

.bdb-type-card__open {
    font-size: 0.66rem;
    font-family: var(--f-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-top: 0.6rem;
    transition: opacity 0.2s;
}

.bdb-type-card:hover .bdb-type-card__open { opacity: 1; }

/* Slider override inside dashboard theme */
.bugatti-dashboard-page .bi-ch-slider {
    position: relative;
    overflow: hidden;
    background: var(--bugatti-bg);
    border-top: 1px solid var(--bugatti-border);
    border-bottom: 1px solid var(--bugatti-border);
}

.bugatti-dashboard-page .bi-ch-slider__track { display: flex; }

.bugatti-dashboard-page .bi-ch-slider__slide {
    position: relative;
    flex-shrink: 0;
    height: 360px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.bugatti-dashboard-page .bi-ch-slider__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,12,20,.9) 0%, rgba(7,12,20,.3) 50%, transparent 80%);
}

.bugatti-dashboard-page .bi-ch-slider__info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.25rem;
    z-index: 2;
}

.bugatti-dashboard-page .bi-ch-slider__num {
    display: block;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--bugatti-text);
    font-weight: 300;
}

.bugatti-dashboard-page .bi-ch-slider__body {
    display: block;
    font-size: 0.7rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
    margin-top: 0.2rem;
}

.bugatti-dashboard-page .bi-ch-slider__cta {
    display: block;
    font-size: 0.64rem;
    color: var(--bugatti-gold);
    font-family: var(--f-label);
    margin-top: 0.3rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.bugatti-dashboard-page .bi-ch-slider__slide:hover .bi-ch-slider__cta { opacity: 1; }

.bugatti-dashboard-page .bi-ch-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(7, 12, 20, 0.7);
    border: 1px solid var(--bugatti-border);
    color: var(--bugatti-text);
    width: 40px; height: 40px;
    border-radius: 0;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bugatti-dashboard-page .bi-ch-slider__btn:hover { background: hsl(var(--gold-hsl) / .14); border-color: hsl(var(--gold-hsl) / .4); }
.bugatti-dashboard-page .bi-ch-slider__btn--prev { left: 1rem; }
.bugatti-dashboard-page .bi-ch-slider__btn--next { right: 1rem; }

.bugatti-dashboard-page .bi-ch-slider__dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 10;
}

.bugatti-dashboard-page .bi-ch-slider__dot {
    width: 6px; height: 6px;
    border-radius: 0;
    background: hsl(var(--gold-hsl) / 0.3);
    cursor: pointer;
    transition: background 0.2s;
}

.bugatti-dashboard-page .bi-ch-slider__dot.is-active { background: var(--bugatti-gold); }

/* Responsive additions */
@media (max-width: 1024px) {
    .bdb-tp-ov__split { grid-template-columns: 1fr; }
    .bdb-type-card--feature { grid-column: span 1; flex-direction: column; }
    .bdb-type-card--feature .bdb-type-card__img-wrap { width: 100%; aspect-ratio: 16/9; }
}

@media (max-width: 768px) {
    /* (3120) The six panels' mobile gutter list is gone; they take the
       shell's clamp like every other container. The .bdb-tp-tabs__inner
       that shared this line with .bdb-cat-nav__inner went with them, and
       .bdb-cat-nav__inner went too: it has no base rule in any stylesheet
       and appears in no template or component, so this was the only line
       in the repo that mentioned it. */
    .bdb-cat-hero__inner { padding: 2rem 1.25rem; }
    /* (3198) The old .bdb-cat-hero__seal { display:none } lived here — the
       shield now stays visible on mobile per the 10-09 meeting; its mobile
       size is main.css's .bi-home-cert__seal media rule (tuned by 3199). */
    .bdb-type-grid { grid-template-columns: 1fr; }
    .bdb-tp-var-grid { grid-template-columns: 1fr 1fr; }
    .bugatti-dashboard-page .bi-ch-slider__slide { height: 250px; }
}

@media (max-width: 480px) {
    .bdb-tp-var-grid { grid-template-columns: 1fr; }
    .bdb-cat-hero__stats { gap: 1.5rem; }
}

/* ============================================================
   PROPOSE PAGE  (.bdb-propose-page)
   ============================================================ */

.bdb-propose-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.bdb-propose-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.04);
    transition: transform 9s ease;
}
.bdb-propose-hero__bg--dark {
    background: linear-gradient(135deg, #0a1525 0%, #070c14 100%);
}
.bdb-propose-hero:hover .bdb-propose-hero__bg { transform: scale(1.0); }
.bdb-propose-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(7,12,20,.45) 0%, rgba(7,12,20,.9) 100%);
}
.bdb-propose-hero__inner {
    position: relative;
    z-index: 1;
    padding: 2.5rem 3rem;
    width: 100%;
}
.bdb-propose-hero__eyebrow {
    font-family: var(--f-label);
    font-size: .65rem;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: .35rem;
}
.bdb-propose-hero__title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--bugatti-text);
    margin: 0 0 .9rem;
    line-height: 1.1;
}
.bdb-propose-hero__target {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}
.bdb-propose-hero__target-label {
    font-family: var(--f-label);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
}
.bdb-propose-hero__target-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--bugatti-gold);
    line-height: 1;
}
.bdb-propose-hero__target-type {
    font-size: .82rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
}
.bdb-propose-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.bdb-propose-hero__facts span {
    font-size: .68rem;
    font-family: var(--f-label);
    color: rgba(232,223,200,.65);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    padding: .17rem .55rem;
}
.bdb-propose-hero__desc {
    font-size: .86rem;
    color: var(--bugatti-muted);
    max-width: 50ch;
    margin: 0;
    line-height: 1.6;
}
.bdb-propose-body {
    max-width: 780px;
    margin: 0 auto;
    padding: 3.5rem 2rem 5rem;
}
.bdb-propose-section { margin-bottom: 3rem; }
.bdb-propose-step-title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(1.4rem,3vw,1.9rem);
    font-weight: 300;
    color: var(--bugatti-text);
    margin: 0 0 .35rem;
    line-height: 1.2;
}
.bdb-propose-step-desc {
    font-size: .84rem;
    color: var(--bugatti-muted);
    margin: 0 0 1.75rem;
    max-width: 55ch;
    line-height: 1.6;
}
.bdb-propose-divider {
    border: none;
    border-top: 1px solid var(--bugatti-border);
    margin: 0 0 2.5rem;
}
.bdb-propose-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: .9rem;
    margin-top: .25rem;
}
.bdb-propose-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 1.3rem 1.2rem 1.15rem;
    cursor: pointer;
    text-align: left;
    transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.bdb-propose-type-card:hover {
    border-color: hsl(var(--gold-hsl) / .42);
    background: rgba(13,22,35,.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.bdb-propose-type-card.is-active {
    border-color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / .06);
    box-shadow: 0 0 0 1px hsl(var(--gold-hsl) / .25) inset;
}
.bdb-propose-type-card.is-active::after {
    content: "\2713";
    position: absolute;
    top: .65rem;
    right: .75rem;
    font-size: .65rem;
    color: var(--bugatti-gold);
    background: hsl(var(--gold-hsl) / .14);
    border-radius: 0;
    width: 1.35rem;
    height: 1.35rem;
    line-height: 1.35rem;
    text-align: center;
}
.bdb-propose-type-card__icon {
    width: 1.9rem;
    height: 1.9rem;
    color: var(--gold);
    flex-shrink: 0;
}
.bdb-propose-type-card__icon svg { width: 100%; height: 100%; }
.bdb-propose-type-card__title {
    font-family: var(--f-label);
    font-size: .82rem;
    font-weight: 600;
    color: var(--bugatti-text);
    letter-spacing: .01em;
}
.bdb-propose-type-card__desc {
    font-size: .73rem;
    color: var(--bugatti-muted);
    line-height: 1.5;
    flex: 1;
}
.bdb-propose-type-card__badge {
    font-size: .6rem;
    font-family: var(--f-label);
    letter-spacing: .07em;
    color: var(--gold);
    background: hsl(var(--gold-hsl) / .07);
    border: 1px solid hsl(var(--gold-hsl) / .2);
    border-radius: 0;
    padding: .1rem .45rem;
}

/* ── Propose page — supporting content ─────────────────────── */
.bdb-propose-info__intro { margin-bottom: 2.25rem; }
.bdb-propose-howitworks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}
.bdb-propose-howitworks__step {
    padding: 1.1rem 1.1rem 1rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
}
.bdb-propose-howitworks__num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--bugatti-gold);
    margin-bottom: .35rem;
}
.bdb-propose-howitworks__title {
    font-family: var(--f-label);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--bugatti-text);
    margin-bottom: .3rem;
}
.bdb-propose-howitworks__desc {
    font-size: .76rem;
    color: var(--bugatti-muted);
    line-height: 1.5;
}
.bdb-propose-info__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
}
.bdb-propose-info__card {
    padding: 1.3rem 1.3rem 1.15rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
}
.bdb-propose-info__card-title {
    font-family: var(--f-label);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: .75rem;
}
.bdb-propose-info__card-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .8rem;
    color: var(--bugatti-muted);
    line-height: 1.75;
}
.bdb-propose-info__card-text {
    font-size: .8rem;
    color: var(--bugatti-muted);
    line-height: 1.65;
    margin: 0;
}
.bdb-propose-recent__list { display: flex; flex-direction: column; gap: .3rem; }
.bdb-propose-recent__item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem .9rem;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
}
.bdb-propose-recent__check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0;
    background: rgba(96,180,120,.14);
    color: #7fcf9a;
}
.bdb-propose-recent__desc { font-size: .8rem; color: var(--bugatti-text); font-family: var(--f-body, var(--f-label)); } /* 869etqyny: running text = Tinos */
.bdb-propose-recent__meta { font-size: .68rem; color: var(--bugatti-muted); margin-top: .15rem; }
@media (max-width: 700px) {
    .bdb-propose-howitworks { grid-template-columns: 1fr; }
    .bdb-propose-info__grid { grid-template-columns: 1fr; }
}

.bdb-propose-fields {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.25rem;
}
.bdb-contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bdb-propose-field {
    display: flex;
    flex-direction: column;
    gap: .38rem;
}
.bdb-propose-field-row { display: grid; gap: 1rem; }
.bdb-propose-field-row--2 { grid-template-columns: 1fr 1fr; }
.bdb-propose-field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.bdb-propose-label {
    font-family: var(--f-label);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    display: block;
}
.bdb-propose-req { color: var(--bugatti-gold); }
.bdb-propose-hint {
    font-size: .63rem;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
}
.bdb-propose-input,
.bdb-propose-select,
.bdb-propose-textarea {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    color: var(--bugatti-text);
    font-family: var(--f-label);
    font-size: .875rem;
    padding: .62rem .85rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, background .2s, box-shadow .2s;
    /* 3124: `outline: none` removed from the base rule. */
    -webkit-appearance: none;
    appearance: none;
}
.bdb-propose-input:focus,
.bdb-propose-select:focus,
.bdb-propose-textarea:focus {
    border-color: var(--gold);
    background: hsl(var(--gold-hsl) / .04);
    /* 3124: was `box-shadow: 0 0 0 3px hsl(var(--gold-hsl) / .08)` — a gold
       glow at 8% opacity on a dark panel, which is not a focus indicator so
       much as a rumour of one. Swapped for the site's field idiom, the same
       2px gold line focus.css puts under every other input. Stated here
       rather than left to focus.css because this selector is more specific
       and would otherwise win with the old glow. */
    box-shadow: 0 var(--bi-focus-w, 2px) 0 0 var(--gold);
}
.bdb-propose-input::placeholder,
/* (3122) Placeholder was the raw blue at .55; the warm muted at the same
   opacity, so it still sits a step under the field's own text. */
.bdb-propose-textarea::placeholder { color: hsl(var(--fg-hsl) / .55); }
.bdb-propose-input--readonly,
.bdb-propose-input[readonly] { opacity: .5; cursor: default; }
.bdb-propose-select {
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}
.bdb-propose-select option { background: #0d1623; color: var(--bugatti-text); }
.bdb-propose-textarea { resize: vertical; min-height: 85px; line-height: 1.55; }
.bdb-propose-field-note {
    font-size: .68rem;
    font-style: italic;
    color: var(--gold);
    margin-top: .2rem;
}
.bdb-propose-known-data {
    background: hsl(var(--gold-hsl) / .03);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: .95rem 1.1rem;
    margin-bottom: 1.25rem;
}
.bdb-propose-known-data__label {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bugatti-muted);
    margin-bottom: .6rem;
    font-family: var(--f-label);
}
.bdb-propose-known-list { display: flex; flex-direction: column; gap: .3rem; }
.bdb-propose-known-item { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.bdb-propose-known-num {
    font-family: var(--f-display);
    font-style: italic;
    font-size: .75rem;
    color: hsl(var(--gold-hsl) / .45);
    min-width: 1.4rem;
}
.bdb-propose-known-name { font-size: .8rem; color: var(--bugatti-text); font-family: var(--f-label); }
.bdb-propose-known-meta { font-size: .7rem; color: var(--bugatti-muted); }
.bdb-propose-known-more { font-size: .68rem; color: var(--gold); margin-top: .15rem; }
.bdb-propose-submit-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.85rem;
    flex-wrap: wrap;
}
.bdb-propose-submit-btn { display: inline-flex; align-items: center; gap: .5rem; }
.bdb-propose-submit-note {
    font-size: .74rem;
    color: var(--bugatti-muted);
    max-width: 36ch;
    line-height: 1.45;
    margin: 0;
}
.bdb-propose-error {
    margin-top: 1rem;
    padding: .85rem 1.1rem;
    background: rgba(210,50,50,.08);
    border: 1px solid rgba(210,50,50,.28);
    border-radius: 0;
    color: #e07070;
    font-size: .82rem;
    font-family: var(--f-label);
    line-height: 1.5;
}
.bdb-propose-success { text-align: center; padding: 5rem 2rem; }
.bdb-propose-success__ring {
    width: 3.75rem;
    height: 3.75rem;
    border: 2px solid var(--bugatti-gold);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    color: var(--bugatti-gold);
    animation: bdb-ring-in .4s ease;
}
@keyframes bdb-ring-in {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.bdb-propose-success__ring svg { width: 1.5rem; height: 1.5rem; }
.bdb-propose-success__eyebrow {
    font-family: var(--f-label);
    font-size: .65rem;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: .5rem;
}
.bdb-propose-success__title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--bugatti-text);
    margin: 0 0 1rem;
}
.bdb-propose-success__body {
    font-size: .88rem;
    color: var(--bugatti-muted);
    max-width: 50ch;
    margin: 0 auto 2.25rem;
    line-height: 1.7;
}
/* 3119 review: no longer pairs .bdb-btn--gold/--outline (869etqyp2's
   border-matches-text override for that pair is gone with it) — both
   buttons here are .bi-cta / .bi-cta--primary now (buttons.css), which
   already gives the secondary role a gold-on-gold border/text pairing. */
.bdb-propose-success__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.bdb-propose-lookup {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}
.bdb-propose-skip {
    display: inline-block;
    margin-top: .9rem;
    font-size: .77rem;
    color: var(--bugatti-muted);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--f-label);
    transition: color .2s;
}
.bdb-propose-skip:hover { color: var(--bugatti-text); }
.bdb-propose-found {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: rgba(62,207,142,.06);
    border: 1px solid rgba(62,207,142,.22);
    border-radius: 0;
    padding: .7rem 1rem;
    margin-top: 1rem;
}
.bdb-propose-found__check { display: flex; color: var(--bugatti-green); flex-shrink: 0; }
.bdb-propose-found__name { font-size: .88rem; color: var(--bugatti-text); font-family: var(--f-label); }
.bdb-propose-found__detail { font-size: .74rem; color: var(--bugatti-muted); margin-top: .1rem; }

/* ============================================================
   DOWNLOAD DOSSIER — Payment modal
   ============================================================ */

.bdb-payment-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(7,12,20,.88);
    backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.bdb-payment-modal.is-open { opacity: 1; pointer-events: all; }
.bdb-payment-modal__card {
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    max-width: 480px;
    width: 100%;
    padding: 2.25rem 2rem 2rem;
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
    animation: bdb-modal-in .3s ease;
}
@keyframes bdb-modal-in {
    from { transform: translateY(20px) scale(.97); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.bdb-payment-modal__close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 2rem; height: 2rem;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    cursor: pointer;
    color: var(--bugatti-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s;
}
.bdb-payment-modal__close:hover { background: rgba(255,255,255,.12); color: var(--bugatti-text); }
.bdb-payment-modal__eyebrow {
    font-family: var(--f-label);
    font-size: .62rem;
    letter-spacing: var(--bi-ls-overline, 1px);
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-bottom: .35rem;
}
.bdb-payment-modal__title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.55rem;
    font-weight: 300;
    color: var(--bugatti-text);
    margin: 0 0 .25rem;
}
.bdb-payment-modal__sub {
    font-size: .78rem;
    color: var(--bugatti-muted);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}
.bdb-payment-modal__chassis-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: hsl(var(--gold-hsl) / .06);
    border: 1px solid hsl(var(--gold-hsl) / .2);
    border-radius: 0;
    padding: .45rem .85rem;
    margin-bottom: 1.25rem;
}
.bdb-payment-modal__chassis-nr {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--bugatti-gold);
}
.bdb-payment-modal__chassis-type { font-size: .74rem; color: var(--bugatti-muted); font-family: var(--f-label); }
.bdb-payment-modal__includes {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.bdb-payment-modal__includes li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    color: var(--bugatti-muted);
    font-family: var(--f-label);
}
.bdb-payment-modal__includes li::before { content: "\2713"; color: var(--bugatti-green); font-size: .7rem; flex-shrink: 0; }
.bdb-payment-modal__price-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bugatti-border);
}
.bdb-payment-modal__price {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 2rem;
    font-weight: 300;
    color: var(--bugatti-gold);
}
.bdb-payment-modal__price-note { font-size: .72rem; color: var(--bugatti-muted); }
#bdb-stripe-element {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: .85rem;
    margin-bottom: 1.25rem;
    min-height: 42px;
    transition: border-color .2s;
}
.bdb-payment-modal__pay-btn { justify-content: center; gap: .5rem; }
.bdb-payment-modal__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .85rem;
    font-size: .68rem;
    color: hsl(var(--fg-hsl) / .6);   /* (3122) was rgba(107,122,149,.6) */
    font-family: var(--f-label);
}
.bdb-payment-modal__pay-error {
    margin-top: .85rem;
    font-size: .78rem;
    color: #e07070;
    font-family: var(--f-label);
    display: none;
}
.bdb-payment-modal__success { text-align: center; padding: 1.5rem 0; display: none; }
.bdb-payment-modal__success-icon {
    width: 3rem; height: 3rem;
    border: 2px solid var(--bugatti-gold);
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    color: var(--bugatti-gold);
}
@media (max-width: 620px) {
    .bdb-propose-hero__inner { padding: 2rem 1.25rem; }
    .bdb-propose-body { padding: 2.5rem 1.25rem 4rem; }
    .bdb-propose-types { grid-template-columns: 1fr 1fr; }
    .bdb-propose-field-row--3 { grid-template-columns: 1fr 1fr; }
    .bdb-propose-submit-row { flex-direction: column; align-items: flex-start; }
    .bdb-payment-modal__card { padding: 1.75rem 1.25rem 1.5rem; }
}
@media (max-width: 400px) {
    .bdb-propose-types { grid-template-columns: 1fr; }
    .bdb-propose-field-row--2,
    .bdb-propose-field-row--3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Category page redesign: timeline, featured chassis / articles,
   gallery strip, quote, continue-exploring.
   ═══════════════════════════════════════════════════════════════ */

.bdb-timeline-disclaimer {
    font-size: .72rem;
    color: var(--gold);
    background: hsl(var(--gold-hsl) / .06);
    border: 1px dashed hsl(var(--gold-hsl) / .3);
    border-radius: 0;
    padding: .6rem .9rem;
    margin: -.5rem 0 1.5rem;
    line-height: 1.5;
}

.bdb-timeline-section .bdb-era-section__head {
    border-top: none;
    border-bottom: none;
    padding: 0;
}

.bdb-timeline {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 2.5rem 0 1rem;
}
.bdb-timeline::before {
    content: '';
    position: absolute;
    top: calc(2.5rem + 7px);
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, hsl(var(--gold-hsl) / .08), var(--gold) 8%, var(--gold) 92%, hsl(var(--gold-hsl) / .08));
}
.bdb-timeline__point {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 .5rem;
}
.bdb-timeline__dot {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: var(--bugatti-bg);
    border: 2px solid var(--bugatti-gold);
    margin-bottom: 1.15rem;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.bdb-timeline__point:hover .bdb-timeline__dot {
    transform: scale(1.35);
    background: var(--bugatti-gold);
    box-shadow: 0 0 0 6px hsl(var(--gold-hsl) / .16);
}
.bdb-timeline__year {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--bugatti-gold);
    transition: transform .3s ease;
}
.bdb-timeline__point:hover .bdb-timeline__year { transform: scale(1.08); }
.bdb-timeline__note {
    font-size: .72rem;
    color: var(--bugatti-muted);
    margin-top: .4rem;
    line-height: 1.4;
    transition: color .3s ease;
}
.bdb-timeline__point:hover .bdb-timeline__note { color: var(--bugatti-text); }
@media (max-width: 767px) {
    .bdb-timeline { flex-wrap: wrap; gap: 2rem 0; }
    .bdb-timeline::before { display: none; }
    .bdb-timeline__point { flex: 0 0 33%; }
}

.bdb-chassis-articles {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    /* Don't stretch a short column (e.g. "no photographed chassis yet") to
       match a taller sibling — that just turns into a big empty gap. Each
       column takes only the height its own content needs. */
    align-items: start;
}
.bdb-chassis-articles__col:first-child { border-right: 1px solid var(--bugatti-border); padding-right: 3rem; padding-bottom: 2rem; }
@media (max-width: 900px) {
    .bdb-chassis-articles { grid-template-columns: 1fr; }
    .bdb-chassis-articles__col:first-child { border-right: 0; padding-right: 0; }
}

/* Featured Chassis — a single real chassis (photo + chassis number), not a
   slider of many, since the point is to spotlight one documented object. */
.bdb-featured-chassis-single {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    text-decoration: none;
    color: var(--bugatti-text);
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bdb-featured-chassis-single:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    border-color: hsl(var(--gold-hsl) / 0.35);
}
.bdb-featured-chassis-single__img {
    position: relative;
    flex: 0 0 44%;
    min-height: 240px;
    background-size: cover;
    background-position: center;
    filter: var(--photo-grade);
}
/* 869ejc16u: neutral "no photo" placeholder — same generic silhouette as the
   chassis hero placeholder, scaled to this slot instead of a blank/dark box. */
.bdb-featured-chassis-single__img--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: radial-gradient(ellipse at 70% 40%, var(--bugatti-panel-2) 0%, var(--bugatti-bg) 60%);
    filter: none;
}
.bdb-featured-chassis-single__img--placeholder svg {
    width: 3rem;
    height: auto;
    color: hsl(var(--gold-hsl) / 0.75);
}
.bdb-featured-chassis-single__img--placeholder span {
    font-size: .7rem;
    letter-spacing: .04em;
    color: hsl(var(--gold-hsl) / 0.55);
}
.bdb-featured-chassis-single__body {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.75rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bdb-featured-chassis-single__nr {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.15;
}
.bdb-featured-chassis-single__meta {
    font-size: .8rem;
    color: var(--bugatti-muted);
    margin-top: .35rem;
}
.bdb-featured-chassis-single__cta {
    display: inline-block;
    font-size: .66rem;
    font-family: var(--f-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bugatti-gold);
    margin-top: 1.1rem;
    transition: transform .25s;
}
.bdb-featured-chassis-single:hover .bdb-featured-chassis-single__cta { transform: translateX(4px); }
@media (max-width: 640px) {
    .bdb-featured-chassis-single { flex-direction: column; }
    .bdb-featured-chassis-single__img { min-height: 200px; }
    .bdb-featured-chassis-single__body { padding: 1.25rem 1.25rem 1.5rem; }
}

.bdb-related-articles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.bdb-related-articles__item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--bugatti-border);
    transition: transform .2s;
}
.bdb-related-articles__item:last-child { border-bottom: 0; padding-bottom: 0; }
.bdb-related-articles__item:hover { transform: translateX(2px); }
.bdb-related-articles__img {
    flex: 0 0 4.5rem;
    height: 3.4rem;
    border-radius: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--bugatti-panel-2);
    transition: transform .3s ease;
}
.bdb-related-articles__item:hover .bdb-related-articles__img { transform: scale(1.08); }
.bdb-related-articles__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.bdb-related-articles__title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: .98rem;
    font-weight: 300;
    color: var(--bugatti-text);
    transition: color .2s;
}
.bdb-related-articles__item:hover .bdb-related-articles__title { color: var(--bugatti-gold); }
.bdb-related-articles__desc {
    font-size: .74rem;
    color: var(--bugatti-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bdb-related-articles__arrow {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--bugatti-gold);
    opacity: .7;
    display: inline-block;
    transition: transform .25s ease, opacity .25s ease;
}
.bdb-related-articles__item:hover .bdb-related-articles__arrow { transform: translateX(4px); opacity: 1; }

.bdb-gallery-quote {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .bdb-gallery-quote { grid-template-columns: 1fr; }
}

.bdb-cat-gallery-strip { position: relative; }
.bdb-cat-gallery-strip__track {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}
.bdb-cat-gallery-strip__track::-webkit-scrollbar { display: none; }
.bdb-cat-gallery-strip__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.bdb-cat-gallery-strip__item {
    flex: 1 1 130px;
    min-width: 100px;
    height: 140px;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 0;
    overflow: hidden;
}
.bdb-cat-gallery-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bdb-cat-gallery-strip__item:hover img { transform: scale(1.06); }
/* The single "next" arrow overlaps the edge of the last photo, per the
   reference, rather than sitting fully outside the strip. */
.bdb-cat-gallery-strip .bdb-type-slider__arrow--next {
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
}

.bdb-gallery-quote__quote {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bugatti-panel);
    border: 1px solid var(--bugatti-border);
    border-radius: 0;
    padding: 2rem 2.25rem;
}
.bdb-gallery-quote__monogram {
    position: absolute;
    right: -.25rem;
    bottom: -1.25rem;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 6rem;
    line-height: 1;
    color: hsl(var(--gold-hsl) / .07);
    pointer-events: none;
}
.bdb-gallery-quote__text {
    position: relative;
    z-index: 1;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    line-height: 1.5;
    color: var(--bugatti-gold);
    margin: 0 0 1rem;
}
/* ============================================================
   Chassis authenticity/identity-status badge (task 869e6aevd)
   ------------------------------------------------------------
   Shows the same 9-value identity classification as the internal
   registry app (backend/frontend/src/constants/authenticityStatus.js,
   ChassisAuthenticityStatuses, task 869e6aevc/PR #601) on the public
   site: the chassis detail hero (single-bcc_chassis.php) and the
   per-type register list (single-bcc_type.php, "Chassis" tab table +
   preview grid).

   Hex values are copied EXACTLY from backend/frontend/src/index.css —
   specifically its `.dark { --auth-*-bg/-text/-border }` block (lines
   ~213-223), not the `:root` light-mode block. This WP theme is
   dark-navy by default (main.css --bg: hsl(220 45% 6%)), so the app's
   dark-mode tokens (translucent dark bg + bright text) are the visual
   match; the light-mode pastel tokens (e.g. #dcfce7) would look washed
   out and inconsistent with every other badge/pill on this site (see
   .bdb-status-pill, .bdb-tp-bcc-pill above, which use the same
   translucent-bg + bright-text + subtle-border pattern).
   ============================================================ */
:root {
    --auth-original-bg: #122318; --auth-original-text: #9bdcb0; --auth-original-border: #22c55e;
    --auth-rebuild-bg:  #101a2e; --auth-rebuild-text:  #93c5fd; --auth-rebuild-border:  #3b82f6;
    --auth-assembly-bg: #1f1830; --auth-assembly-text: #d8b4fe; --auth-assembly-border: #a855f7;
    --auth-modified-bg: #2a2410; --auth-modified-text: #fde047; --auth-modified-border: #eab308;
    --auth-replica-bg:  #2a1f12; --auth-replica-text:  #fdba74; --auth-replica-border:  #f97316;
    --auth-fake-bg:     #2a1414; --auth-fake-text:     #f2c8c8; --auth-fake-border:     #dc2626;
    --auth-ghost-bg:    #1c3052; --auth-ghost-text:    #cfc7b8; --auth-ghost-border:    #64748b;
    --auth-disputed-bg: #371a1a; --auth-disputed-text: #eaa3a3; --auth-disputed-border: #ef4444;
    --auth-unknown-bg:  #16294a; --auth-unknown-text:  #b8b2a6; --auth-unknown-border:  #3a4a63;
}
.bi-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-family: var(--f-label);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .26rem .7rem;
    border-radius: 0;
    background: var(--bi-auth-bg);
    color: var(--bi-auth-text);
    border: 1px solid var(--bi-auth-border);
    cursor: help;
    white-space: nowrap;
}
.bi-auth-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 0;
    background: var(--bi-auth-text);
    flex-shrink: 0;
}
.bi-auth-badge--sm { font-size: .58rem; padding: .16rem .5rem; }
.bi-auth-badge--original { --bi-auth-bg: var(--auth-original-bg); --bi-auth-text: var(--auth-original-text); --bi-auth-border: var(--auth-original-border); }
.bi-auth-badge--rebuild  { --bi-auth-bg: var(--auth-rebuild-bg);  --bi-auth-text: var(--auth-rebuild-text);  --bi-auth-border: var(--auth-rebuild-border); }
.bi-auth-badge--assembly { --bi-auth-bg: var(--auth-assembly-bg); --bi-auth-text: var(--auth-assembly-text); --bi-auth-border: var(--auth-assembly-border); }
.bi-auth-badge--modified { --bi-auth-bg: var(--auth-modified-bg); --bi-auth-text: var(--auth-modified-text); --bi-auth-border: var(--auth-modified-border); }
.bi-auth-badge--replica  { --bi-auth-bg: var(--auth-replica-bg);  --bi-auth-text: var(--auth-replica-text);  --bi-auth-border: var(--auth-replica-border); }
.bi-auth-badge--fake     { --bi-auth-bg: var(--auth-fake-bg);     --bi-auth-text: var(--auth-fake-text);     --bi-auth-border: var(--auth-fake-border); }
.bi-auth-badge--ghost    { --bi-auth-bg: var(--auth-ghost-bg);    --bi-auth-text: var(--auth-ghost-text);    --bi-auth-border: var(--auth-ghost-border); }
.bi-auth-badge--disputed { --bi-auth-bg: var(--auth-disputed-bg); --bi-auth-text: var(--auth-disputed-text); --bi-auth-border: var(--auth-disputed-border); }
.bi-auth-badge--unknown  { --bi-auth-bg: var(--auth-unknown-bg);  --bi-auth-text: var(--auth-unknown-text);  --bi-auth-border: var(--auth-unknown-border); }

.bdb-gallery-quote__cite {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    font-style: normal;
    color: var(--bugatti-muted);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE SCALE-DOWN PASS (task 869ea1nac)
   Phone viewports (~640px and below), for the category page and the
   chassis/type detail hero (this stylesheet is only enqueued on those
   templates — see taxonomy-bcc_category.php / single-bcc_chassis.php /
   single-bcc_type.php). Reuses the --ms-* type-scale vars defined at the
   end of main.css (loaded on every page before this file). Appended last
   so these rules win over the file's own earlier, wider-breakpoint
   overrides for the same selector/property.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Category-page nav/browse cards — tighter content padding + the
     shared type-scale instead of their own desktop-tuned sizes. */
  .bdb-cat-nav-card__content { padding: .5rem .75rem; }        /* was .65rem .95rem */
  .bdb-cat-nav-card--all .bdb-cat-nav-card__content { padding: .85rem; } /* was 1.1rem */
  .bdb-cat-nav-card__label { font-size: var(--ms-body-sm); }   /* was .88rem/14px -> 13px */

  /* Featured-chassis + related-articles cards on the category page. */
  .bdb-featured-chassis-single__body { padding: 1rem; }        /* was 1.25rem 1.25rem 1.5rem */
  .bdb-featured-chassis-single__nr { font-size: var(--ms-h3); } /* was 1.6rem */
  .bdb-related-articles__desc { font-size: var(--ms-body-sm); } /* was .74rem */

  /* Type cards (chassis/type detail "related types" slider). */
  .bdb-type-card__body { padding: .7rem .8rem; }               /* was .9rem 1rem */
  .bdb-type-card__name { font-size: var(--ms-h4); }            /* was 1.1rem */
  .bdb-type-card__summary { font-size: var(--ms-body-sm); }    /* was .74rem */

  /* Chassis/type detail hero photo — sensible max-height clamp so it
     stops dominating the fold on a phone (was min-height: 58vh with no
     cap at all, from the existing 768px breakpoint above). */
  .bdb-ch-hero {
    min-height: 40vh;
    max-height: 420px;
  }

  /* Tap targets — the shared button primitive on these templates must
     stay >=44px tall even at its compact desktop padding/font-size. */
  .bdb-btn { min-height: var(--ms-tap-min, 44px); }
}

/* ── References tab: linked entries (869eqp1y1) ──────────────────────
   Bibliography/Documents entries with a URL used to be styled identically to
   plain-text ones (gold link vs gold <strong>). Linked entries now carry a
   small external-link icon after the title; hover/focus underlines the link. */
.bdb-activity-list__link {
    color: var(--bugatti-gold);
    text-decoration: none;
}

.bdb-activity-list__link:hover,
.bdb-activity-list__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bdb-activity-list__link-icon {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-inline-start: 0.3em;
    vertical-align: -0.08em;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.bdb-activity-list__link:hover .bdb-activity-list__link-icon,
.bdb-activity-list__link:focus-visible .bdb-activity-list__link-icon {
    opacity: 1;
}