/* dn-picker.css: dinancars.ca's vehicle pickers around the kit's band (research batches/ads/pages/PICKER-BRIEF.md,
   Greg 2026-10-30), linked by base.html on every page, driven by dn-picker.js, in cl-site.css's --site-* tokens:
   - the landing row (partials/ask.html): below 980px one line under the H1, 40px controls, 16px selects, under 64px
     with its margins; with a vehicle picked its name and Change; from 980px gone, the kit's band under the header
     (.dn-topband, search/_frame.html) or in the home's hero (.dn-hero__band) as before the phone clean-up;
   - the drop bar (partials/band_drop.html): below 980px a 48px bar over the kit's band, which shows only while the
     bar is open (and always without a script); from 980px no bar, the band as the kit draws it;
   - the product page's line (partials/vehicle_line.html): the picked vehicle and Change, at every width.
   No rule here names a kit class: the band is hidden or shown by the boxes around it. */
@layer base, kit, site;

@layer site {

.dn-ask, .dn-bar { display: none; }

.dn-vline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; max-width: var(--site-max); margin: 0 auto; padding: 4px 24px; font: 400 16px/1.3 var(--site-font-body); color: var(--site-fg); }
.dn-vline strong { font-weight: 700; }
.dn-vline a { display: inline-flex; align-items: center; min-height: 40px; color: var(--site-fg); font-weight: 700; text-decoration: underline; }
.dn-vline a:hover { color: var(--site-accent); }

@media (max-width: 979.98px) {
  /* the landing row */
  .dn-topband, .dn-hero__band { display: none; }
  .dn-ask { display: block; margin: 12px 0 4px; }
  .dn-ask__form { display: flex; align-items: center; gap: 6px; }
  .cl-js .dn-ask.is-set:not(.is-open) .dn-ask__form { display: none; }
  .dn-ask.is-open .dn-ask__now { margin-bottom: 4px; }
  .dn-ask__sel { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 6px; border: 2px solid var(--site-fg); border-radius: var(--site-radius); background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body); }
  .dn-ask__sel:disabled { opacity: 1; background: var(--site-band); }
  .dn-ask__sel--year { flex: 0 0 84px; }
  .dn-ask__words { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.2 var(--site-font-body); color: var(--site-fg); }
  .dn-ask__form--bmw:not(.is-make) .dn-ask__sel--make { display: none; }
  .dn-ask__form--bmw.is-make .dn-ask__words { display: none; }
  .dn-ask__go { flex: 0 0 auto; height: 40px; min-width: 48px; padding: 0 12px; border: 0; border-radius: var(--site-radius); background: var(--site-button-bg); color: var(--site-button-fg); font: 700 16px/1 var(--site-font-heading); text-transform: uppercase; cursor: pointer; }
  .dn-ask__go:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
  .dn-ask__now { display: flex; align-items: center; gap: 8px; min-height: 40px; font: 400 16px/1.3 var(--site-font-body); color: var(--site-fg); }
  .dn-ask__now strong { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
  .dn-ask__change { flex: none; min-height: 40px; padding: 0 2px; border: 0; background: none; color: inherit; font: 700 16px/1 var(--site-font-body); text-decoration: underline; cursor: pointer; }
  /* in the home's black hero */
  .dn-hero .dn-ask { margin: 16px 0 0; }
  .dn-hero .dn-ask__now, .dn-hero .dn-ask__words { color: var(--site-dark-fg); }
  .dn-hero .dn-ask__sel { border-color: var(--site-dark-fg); }

  /* the drop bar over the kit's band */
  .cl-js .dn-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--site-line); border-radius: 0; background: var(--site-band); color: var(--site-fg); font: 700 16px/1.2 var(--site-font-body); text-align: left; cursor: pointer; }
  .dn-bar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dn-bar svg { flex: none; transition: transform 0.15s; }
  .dn-drop.is-open .dn-bar svg { transform: rotate(180deg); }
  .cl-js .dn-drop:not(.is-open) > .dn-drop__band { display: none; }

  .dn-vline { padding: 4px 16px; }
}

}