/* src/css/yard.css
 *
 * All Mini Trucks, the directory (scripts/web/yard.mjs, src/js/yard.js). Otto, 30
 * October 2026. Linked on the yard only (family.mjs head), after family.css, so it
 * reads the same tokens: --g ground, --p panel, --r rule, --i ink, --m muted, --a
 * the cobalt fill with --ai on it, --at the cobalt for text and focus, --fh and
 * --ft the faces. Lyra's direction stands: white or near black grounds, the cobalt
 * as the one accent, no colour bands. The directory reads like an auction yard
 * board, a code in the display face first on every row.
 * No oxford commas, no em dashes. */

/* ---------------------------------------------------------------- the search */
.ysearch {
  position: relative;
  width: min(100%, 640px);
  margin: clamp(18px, 2.4vw, 28px) 0 0;
}
.yhero .ysearch {
  margin-inline: auto;
  text-align: left;
}
.ysearch__l {
  display: block;
  margin: 0 0 8px;
  font: 600 12px/1.2 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}
.ysearch__row {
  display: flex;
  gap: 8px;
}
.ysearch__in {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1.5px solid var(--r);
  border-radius: 14px;
  background: var(--g);
  color: var(--i);
  font: 500 18px/1 var(--ft);
  -webkit-appearance: none;
  appearance: none;
}
.ysearch__in::placeholder {
  color: var(--m);
  opacity: 0.8;
}
.ysearch__in:focus {
  outline: none;
  border-color: var(--at);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at) 25%, transparent);
}
.ysearch__go {
  flex: 0 0 auto;
  height: 54px;
}
.ysearch__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--r);
  border-radius: 14px;
  background: var(--g);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.ysearch__list a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--i);
  text-decoration: none;
}
.ysearch__list a:hover,
.ysearch__list [aria-selected='true'] a {
  background: var(--p);
}
.ysearch__k {
  grid-row: span 2;
  align-self: center;
  font: 600 11px/1.2 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at);
}
.ysearch__n {
  font: var(--fw, 700) 18px/1.15 var(--fh);
}
.ysearch__s {
  font: 400 13px/1.35 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the chips */
.ychips,
.yfilters__g {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yfilters {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.yfilters[hidden] {
  display: none;
}
.ychip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--r);
  border-radius: 999px;
  background: transparent;
  color: var(--i);
  font: 500 14px/1 var(--ft);
  text-decoration: none;
  cursor: pointer;
}
.ychip:hover {
  border-color: var(--at);
}
.ychip[aria-pressed='true'] {
  background: var(--a);
  border-color: var(--a);
  color: var(--ai);
}
.ychip--link {
  font: var(--fw, 700) 18px/1 var(--fh);
  min-height: 46px;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- the directory */
.ydir__count {
  margin: 0 0 14px;
  font: 600 13px/1 var(--ft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m);
}
.ydir__head,
.yrow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: center;
}
.ydir__head {
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--r);
  font: 600 11px/1 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}
.yrow {
  padding: 14px;
  border-bottom: 1px solid var(--r);
  color: var(--i);
  text-decoration: none;
}
.yrow[hidden] {
  display: none;
}
.yrow:hover {
  background: var(--p);
}
.yrow:hover .yrow__code {
  color: var(--at);
}
.yrow__code {
  font: var(--fw, 700) 24px/1 var(--fh);
  letter-spacing: 0.01em;
}
.yrow__name {
  font: 600 16px/1.25 var(--ft);
}
.yrow__also {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 13px;
  color: var(--m);
}
.yrow__built,
.yrow__eng {
  font: 400 14px/1.35 var(--ft);
  color: var(--m);
}
.yrow__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ytag {
  font: 500 12px/1 var(--ft);
  padding: 5px 8px;
  border: 1px solid var(--r);
  border-radius: 999px;
  color: var(--m);
}
.ydir__list--short .yrow {
  grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
}
.ydir__none {
  padding: 28px 0;
  font: 400 17px/1.5 var(--ft);
}
@media (max-width: 860px) {
  .ydir__head {
    display: none;
  }
  .yrow,
  .ydir__list--short .yrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px 4px;
  }
  .yrow__code {
    grid-column: 1;
    font-size: 26px;
  }
  .yrow__name {
    grid-column: 1 / -1;
  }
  .yrow__built,
  .yrow__eng {
    grid-column: 1 / -1;
    font-size: 14px;
  }
  .yrow__tags {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }
  .yrow__tags .ytag {
    display: none;
  }
}

/* ---------------------------------------------------------------- the lane */
.ylane {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  font: 600 12px/1 var(--ft);
  white-space: nowrap;
  border: 1px solid currentColor;
}
.ylane::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}
.ylane--old {
  color: var(--s-yes);
}
.ylane--soon {
  color: var(--at);
}
.ylane--new,
.ylane--unknown {
  color: var(--m);
}
.ylane--big {
  margin: 16px 0 8px;
  padding: 8px 14px;
  font-size: 15px;
}

/* ---------------------------------------------------------------- one generation */
.ygen__txt .fh1 {
  margin-bottom: 12px;
}
.yfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 22px 0 18px;
}
.yfacts > div {
  padding: 12px 0;
  border-top: 1px solid var(--r);
}
.yfacts dt {
  font: 600 11px/1.2 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}
.yfacts dd {
  margin: 6px 0 0;
  font: 500 16px/1.4 var(--ft);
}
.yfacts__s {
  font-weight: 400;
  font-size: 13px;
  color: var(--m);
}
@media (max-width: 560px) {
  .yfacts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ygen__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: 20px 0 12px;
}
.ygen__fam {
  font: 400 15px/1.5 var(--ft);
  color: var(--m);
}
.ygen .fcard {
  align-self: start;
  position: sticky;
  top: 88px;
}
@media (max-width: 980px) {
  .ygen .fcard {
    position: static;
  }
}
.said {
  margin: 18px 0 6px;
  padding-left: 14px;
  border-left: 3px solid var(--at);
  font: 500 18px/1.45 var(--ft);
}
.ynote {
  margin: 20px 0 10px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--p);
  font: 400 15px/1.5 var(--ft);
}
.ynote p {
  margin: 0;
}

/* ---------------------------------------------------------------- the dealers */
.ydeal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.ydealer {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--r);
  border-radius: 16px;
  color: var(--i);
  text-decoration: none;
}
.ydealer:hover {
  border-color: var(--at);
}
.ydealer__k {
  font: 600 11px/1.2 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}
.ydealer__n {
  font: var(--fw, 700) 22px/1.1 var(--fh);
}
.ydealer__t {
  font: 500 15px/1.3 var(--ft);
}
.ydealer__s {
  font: 400 14px/1.35 var(--ft);
  color: var(--at);
}
.ydmap .st {
  fill: color-mix(in srgb, var(--r) 45%, var(--p));
  stroke: var(--g);
  stroke-width: 0.8;
}
.ydmap a:hover .st {
  fill: color-mix(in srgb, var(--at) 14%, var(--p));
}
.ypin {
  fill: var(--a);
  stroke: var(--g);
  stroke-width: 2;
}
.ypin__halo {
  fill: var(--a);
  opacity: 0.18;
}
.ypins a:hover .ypin,
.ypins a:focus .ypin {
  fill: var(--at);
}
.ypins a:focus {
  outline: none;
}
.ypins a:focus .ypin__halo {
  opacity: 0.45;
}

/* ---------------------------------------------------------------- the request
 * three steps (scripts/web/yard-request.mjs, src/js/yard.js). With no script every
 * step shows; with it, one at a time under a three part progress line. */
.yform .ystep {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ystep__h {
  padding: 0;
  margin: 0 0 2px;
  font: var(--fw, 700) 22px/1.1 var(--fh);
}
.yform.is-stepped .ystep {
  display: none;
}
.yform.is-stepped .ystep.is-on {
  display: grid;
  animation: ystepIn 0.22s ease-out;
}
.yform.is-stepped .ystep__h {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@keyframes ystepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .yform.is-stepped .ystep.is-on {
    animation: none;
  }
}
.yprog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.yprog[hidden] {
  display: none;
}
.yprog li {
  display: grid;
  gap: 8px;
  font: 600 12px/1.2 var(--ft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m);
}
.yprog li::before {
  content: '';
  height: 4px;
  border-radius: 2px;
  background: var(--r);
}
.yprog li.is-on {
  color: var(--i);
}
.yprog li.is-on::before {
  background: var(--a);
}
.yprog span {
  display: none;
}
.ystep__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.ystep__nav:empty,
.ystep__nav:not(:has(button:not([hidden]))) {
  display: none;
}
.ystep__nav .fbtn {
  min-width: 120px;
  justify-content: center;
}
.ffield__hint {
  margin: 6px 0 0;
  font: 400 13px/1.4 var(--ft);
  color: var(--m);
}
.yopts {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--r);
  border-radius: 12px;
}
.yopts legend {
  padding: 0 6px;
  font: 600 14px/1.3 var(--ft);
}
.ycheck span {
  display: grid;
  gap: 3px;
}
.ycheck b {
  font-weight: 600;
}
.ycheck small {
  font-size: 13px;
  line-height: 1.4;
  color: var(--m);
}
.ycheck--must {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--p);
}
.ycheck a {
  color: var(--at);
}
.ywhere {
  display: grid;
  gap: 10px;
  margin: -4px 0 4px 30px;
}
.ywhere[hidden],
.ystates[hidden] {
  display: none;
}
.ywhere .fchip span {
  padding: 7px 13px;
  font-size: 14px;
}
.ystates__l {
  margin: 0 0 6px;
  font: 600 13px/1.3 var(--ft);
}
.ystates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 4px 10px;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--r);
  border-radius: 10px;
}
.ystate {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 14px/1.3 var(--ft);
}
.ystate input {
  accent-color: var(--a);
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ---------------------------------------------------------------- the thank you */
.ythanks__got {
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--r);
  border-radius: 14px;
}
.ythanks__got ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 16px/1.45 var(--ft);
}
.ythanks__got b {
  font-weight: 600;
}

/* ---------------------------------------------------------------- turning 25 */
.ysoons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.ysoon {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--r);
  border-radius: 14px;
  color: var(--i);
  text-decoration: none;
}
.ysoon:hover {
  border-color: var(--at);
}
.ysoon__m {
  font: 600 12px/1.2 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--at);
}
.ysoon__n {
  font: var(--fw, 700) 21px/1.15 var(--fh);
}
.ysoon__s {
  font: 400 14px/1.35 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the papers */
.ylegal {
  display: grid;
  gap: 26px;
}
.ylegal__s {
  display: grid;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--r);
}
.ylegal__s p {
  margin: 0;
  font: 400 16px/1.6 var(--ft);
}
.ylegal__s a {
  color: var(--at);
}

.ystep__nav .fbtn,
.ysearch__go {
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the makers
 * Their own logos as avatars, always on white: several marks are black and
 * Subaru's carries its own white ground, so no mark is ever recoloured
 * (scripts/web/makers.mjs). */
.ymks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.ymk {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--r);
  border-radius: 16px;
  color: var(--i);
  text-decoration: none;
}
.ymk:hover {
  border-color: var(--at);
}
.ymk__logo,
.ymaker__logo {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.ymk__img img,
.ymaker__img img,
.ygen__mklogo img {
  display: block;
  max-width: 52px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}
.ymk__init {
  font: var(--fw, 700) 28px/1 var(--fh);
  color: #151a22;
}
.ymk__n {
  font: var(--fw, 700) 21px/1.1 var(--fh);
}
.ymk__s {
  font: 400 13px/1.3 var(--ft);
  color: var(--m);
}
.ymaker__top {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ymaker__logo {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  flex: none;
}
.ymaker__img img {
  max-width: 76px;
  max-height: 58px;
}
.ygen__mk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--r);
  border-radius: 999px;
  color: var(--i);
  font: 600 14px/1 var(--ft);
  text-decoration: none;
}
.ygen__mk:hover {
  border-color: var(--at);
}
.ygen__mklogo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.ygen__mklogo img {
  max-width: 24px;
  max-height: 18px;
}

/* ---------------------------------------------------------------- the timeline */
.ytl {
  margin: 0;
}
.ytl__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--r);
  border-radius: 16px;
  padding: 14px 10px 6px;
}
.ytl svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}
.ytl__model {
  font: var(--fw, 700) 15px var(--fh);
  fill: var(--i);
}
.ytl__year {
  font: 500 11px var(--ft);
  fill: var(--m);
  text-anchor: middle;
}
.ytl__tick {
  stroke: var(--r);
  stroke-width: 1;
}
.ytl__25 {
  stroke: var(--at);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
.ytl__25t {
  font: 600 12px var(--ft);
  fill: var(--at);
}
.ytl__bar--old {
  fill: color-mix(in srgb, var(--s-yes) 70%, var(--g));
}
.ytl__bar--soon {
  fill: var(--a);
}
.ytl__bar--new,
.ytl__bar--unknown {
  fill: color-mix(in srgb, var(--m) 55%, var(--g));
}
.ytl a:hover .ytl__bar,
.ytl a:focus .ytl__bar {
  stroke: var(--i);
  stroke-width: 2;
}
.ytl a:focus {
  outline: none;
}
.ytl__code {
  font: 600 11.5px var(--ft);
  fill: #fff;
  pointer-events: none;
}
.ytl__code--out {
  fill: var(--i);
}
.ytl__key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
}
.ytl__keyline {
  font: 400 13px/1.4 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the videos
 * one sideways row, the cards from videos.mjs (family.css .vc), wide only */
.yvids {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.yvids > .vc {
  scroll-snap-align: start;
  margin: 0;
}

/* ---------------------------------------------------------------- the dock
 * the jandatraining.com action bar: on a phone the four things the site is for
 * float under a thumb. A desk has the bar. */
.ydock {
  display: none;
}
@media (max-width: 760px) {
  .f--yard {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .ydock {
    position: fixed;
    z-index: 50;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.25fr;
    gap: 4px;
    padding: 6px;
    border-radius: 20px;
    background: #0d1016;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
  }
  .ydock__a {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 14px;
    color: #f6f8fc;
    font: 500 11px/1 var(--ft);
    text-decoration: none;
  }
  .ydock__a svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ydock__a--go {
    background: #275bdb;
    color: #fff;
    font-weight: 600;
  }
}

/* ---------------------------------------------------------------- is it 25 */
.y25 {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--r);
  border-radius: 16px;
}
.y25__out {
  min-height: 64px;
}
.y25__out p {
  margin: 0 0 6px;
}
.y25__hint {
  font: 400 15px/1.4 var(--ft);
  color: var(--m);
}
.y25__gen {
  font: 400 16px/1.45 var(--ft);
}
.y25__gen a,
.y25__left a {
  color: var(--at);
}
.y25__big {
  font: var(--fw, 700) clamp(26px, 4vw, 38px) / 1.05 var(--fh);
  color: var(--at);
}
.y25__big--yes {
  color: var(--s-yes);
}
.y25__left {
  font: 400 15px/1.45 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the watch pill
 * the jandatraining.com Watch Jazz pill, here opening the home's video row */
.ywatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--i) 8%, transparent);
  color: var(--i);
  font: 600 15px/1 var(--ft);
  text-decoration: none;
}
.ywatch:hover {
  background: color-mix(in srgb, var(--at) 18%, transparent);
}
.ywatch__p {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--a);
}
.ywatch__p::after {
  content: '';
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--ai);
}

/* ---------------------------------------------------------------- the kind tiles */
.ykts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 600px) {
  .ykts__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ykt {
  position: relative;
}
.ykt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
}
.ykt__b {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 92px;
  padding: 8px 6px 10px;
  border: 1px solid var(--r);
  border-radius: 12px;
  background: var(--g);
  cursor: pointer;
  text-align: center;
}
.ykt__b img {
  width: 100%;
  max-width: 96px;
  height: 52px;
  object-fit: contain;
}
.ykt__g {
  display: grid;
  place-items: center;
  height: 52px;
  font: var(--fw, 700) 20px/1 var(--fh);
  color: var(--m);
}
.ykt__n {
  font: 500 13px/1.2 var(--ft);
}
.ykt input:checked + .ykt__b {
  border-color: var(--at);
  box-shadow: inset 0 0 0 2px var(--at);
}
.ykt input:checked + .ykt__b .ykt__n {
  font-weight: 700;
}
.ykt input:focus-visible + .ykt__b {
  outline: 3px solid var(--at);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- the plate */
.yplate {
  padding-top: 0;
}
.yplate__f {
  position: relative;
  margin: 0;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
}
.yplate__f img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1300 / 683;
  object-fit: cover;
}
.ywatch--on {
  position: absolute;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  background: rgba(10, 12, 16, 0.62);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ywatch--on:hover {
  background: rgba(10, 12, 16, 0.78);
}
.ywatch--on .ywatch__p {
  background: #fff;
}
.ywatch--on .ywatch__p::after {
  border-left-color: #151a22;
}
.yplate__c {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font: 400 11px/1 var(--ft);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
  .yplate__c {
    display: none;
  }
}

/* ---------------------------------------------------------------- dealer monograms */
.ydealer {
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
}
.ydealer > :not(.ydealer__av) {
  grid-column: 2;
}
.ydealer__av {
  grid-row: 1 / span 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--a);
  color: var(--ai);
  font: var(--fw, 700) 19px/1 var(--fh);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- compare */
.ycmp__pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  max-width: 860px;
}
@media (max-width: 600px) {
  .ycmp__pick {
    grid-template-columns: minmax(0, 1fr);
  }
  .ycmp__vs {
    justify-self: center;
  }
}
.ycmp__sel {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1.5px solid var(--r);
  border-radius: 12px;
  background: var(--g);
  color: var(--i);
  font: 600 16px/1.3 var(--ft);
}
.ycmp__vs {
  font: var(--fw, 700) 20px/1 var(--fh);
  color: var(--m);
}
.ycmp__wrap {
  overflow-x: auto;
  border: 1px solid var(--r);
  border-radius: 16px;
}
.ycmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.ycmp th,
.ycmp td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--r);
  text-align: left;
  vertical-align: top;
  font: 400 15px/1.45 var(--ft);
}
.ycmp thead th {
  font: var(--fw, 700) 20px/1.15 var(--fh);
}
.ycmp thead a {
  color: var(--i);
  text-decoration: none;
}
.ycmp thead a:hover {
  color: var(--at);
}
.ycmp tbody th {
  width: 140px;
  font: 600 12px/1.3 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}
.ycmp tr.is-diff td {
  background: color-mix(in srgb, var(--at) 7%, transparent);
}
.ycmp tr[hidden] {
  display: none;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------------------------------------------------------------- the tools */
.ytools {
  padding-top: 0;
}
.ytools__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .ytools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ytool {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--r);
  border-radius: 16px;
  color: var(--i);
  text-decoration: none;
}
.ytool:hover {
  border-color: var(--at);
}
.ytool svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--at);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ytool__h {
  font: var(--fw, 700) 20px/1.1 var(--fh);
}
.ytool__l {
  font: 400 14px/1.4 var(--ft);
  color: var(--m);
}

/* ---------------------------------------------------------------- the facts strip */
.yfacts2 {
  padding-top: 0;
}
.yfacts2__l {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
@media (max-width: 700px) {
  .yfacts2__l {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.yfacts2__l > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding: 16px 0;
  border-top: 2px solid var(--i);
}
.yfacts2__l dd {
  margin: 0;
  font: var(--fw, 700) clamp(36px, 5vw, 56px) / 1 var(--fh);
  letter-spacing: -0.01em;
}
.yfacts2__l dt {
  font: 600 12px/1.2 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
}

/* ---------------------------------------------------------------- the family */
.yfam__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .yfam__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .yfam__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.yfam__c {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--r);
  border-radius: 16px;
  color: var(--i);
  text-decoration: none;
}
.yfam__c:hover {
  border-color: var(--at);
}
.yfam__n {
  font: var(--fw, 700) 22px/1.1 var(--fh);
}
.yfam__l {
  font: 400 14px/1.45 var(--ft);
  color: var(--m);
}

/* one seller lit on its own page */
.ypins a.is-on .ypin {
  fill: var(--at);
  r: 10;
}
.ypins a.is-on .ypin__halo {
  opacity: 0.4;
  r: 22;
}

/* ---------------------------------------------------------------- sort and similar */
.yfilters__sort {
  align-items: center;
}
.yfilters__k {
  font: 600 12px/1 var(--ft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m);
  margin-right: 4px;
}
.ysims {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.ysim {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--r);
  border-radius: 14px;
}
.ysim__n {
  font: var(--fw, 700) 20px/1.15 var(--fh);
  color: var(--i);
  text-decoration: none;
}
.ysim__n:hover {
  color: var(--at);
}
.ysim__s {
  font: 400 14px/1.35 var(--ft);
  color: var(--m);
}
.ysim__c {
  justify-self: start;
  font: 600 14px/1 var(--ft);
  color: var(--at);
}

/* ---------------------------------------------------------------- the states */
.ysts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.yst {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 14px 16px;
  border: 1px solid var(--r);
  border-radius: 14px;
  color: var(--i);
  text-decoration: none;
}
.yst:hover {
  border-color: var(--at);
}
.yst__n {
  font: var(--fw, 700) 20px/1.1 var(--fh);
}
.ylane--road-yes {
  color: var(--s-yes);
}
.ylane--road-restricted {
  color: var(--s-restricted);
}
.ylane--road-not_yet {
  color: var(--s-not_yet);
}
.ylane--road-no {
  color: var(--s-no);
}
.ylane--road-unclear {
  color: var(--s-unclear);
}

/* ---------------------------------------------------------------- the foot list */
.yfoot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 10px;
  padding: 16px 0;
  border-top: 1px solid var(--r);
  border-bottom: 1px solid var(--r);
}
.yfoot a {
  font: 500 14px/1.3 var(--ft);
  color: inherit;
  text-decoration: none;
}
.yfoot a:hover {
  color: var(--at);
}

/* ---------------------------------------------------------------- buying, words, questions */
.ybuy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ybuy__s {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--r);
  border-radius: 16px;
}
.ybuy__n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--a);
  color: var(--ai);
  font: var(--fw, 700) 22px/1 var(--fh);
}
.ybuy__s .fh3 {
  margin: 0 0 6px;
}
.ybuy__s p,
.yq p {
  margin: 0 0 10px;
  font: 400 15px/1.5 var(--ft);
  color: var(--m);
}
.ybuy__go {
  font: 600 14px/1 var(--ft);
  color: var(--at);
}
.ychecks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.ycheckf {
  margin: 0;
  border: 1px solid var(--r);
  border-radius: 16px;
  overflow: hidden;
}
.ycheckf img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #fff;
}
.ycheckf figcaption {
  display: grid;
  gap: 4px;
  padding: 14px 16px 16px;
  font: 400 14px/1.45 var(--ft);
  color: var(--m);
}
.ycheckf b {
  font: var(--fw, 700) 19px/1.1 var(--fh);
  color: var(--i);
}
.ywords {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0 28px;
  margin: 0;
}
.ywords > div {
  padding: 16px 0;
  border-top: 1px solid var(--r);
  scroll-margin-top: 90px;
}
.ywords dt {
  font: var(--fw, 700) 21px/1.15 var(--fh);
}
.ywords dd {
  margin: 6px 0 0;
  font: 400 15px/1.55 var(--ft);
  color: var(--m);
}
.yqs {
  display: grid;
  gap: 10px;
  max-width: 820px;
}
.yq {
  padding: 16px 20px;
  border: 1px solid var(--r);
  border-radius: 14px;
}
.yq summary {
  cursor: pointer;
  font: var(--fw, 700) 20px/1.2 var(--fh);
  list-style-position: outside;
}
.yq[open] summary {
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------- ask all mini trucks */
.yask[hidden] {
  display: none;
}
.yask__card {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--r);
  border-radius: 20px;
  background: var(--p);
}
.yask__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.yask__head .fk {
  margin: 0;
}
.yask__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--a);
}
.yask__log {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}
.yask__log:empty {
  display: none;
}
.yask__m {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font: 400 15px/1.5 var(--ft);
}
.yask__m--me {
  justify-self: end;
  max-width: 85%;
  background: var(--a);
  color: var(--ai);
}
.yask__m--bot {
  justify-self: start;
  max-width: 92%;
  background: var(--g);
  border: 1px solid var(--r);
}
.yask__m--bot a {
  color: var(--at);
}
.yask__m.is-wait {
  color: var(--m);
}
.yask__f {
  display: flex;
  gap: 8px;
}
.yask__f input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--r);
  border-radius: 12px;
  background: var(--g);
  color: var(--i);
  font: 500 16px/1 var(--ft);
}
.yask__f input:focus {
  outline: none;
  border-color: var(--at);
}

/* ---------------------------------------------------------------- the models */
.ymods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.ymods__h {
  margin: 28px 0 12px;
}
.ymod {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--r);
  border-radius: 14px;
  color: var(--i);
  text-decoration: none;
}
.ymod:hover {
  border-color: var(--at);
}
.ymod__logo {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ymod__logo img {
  max-width: 32px;
  max-height: 24px;
}
.ymod__n {
  font: var(--fw, 700) 19px/1.1 var(--fh);
}
.ymod__s {
  font: 400 13px/1.3 var(--ft);
  color: var(--m);
}
.yfacts--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px;
}
@media (max-width: 760px) {
  .yfacts--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ymaker .fk a {
  color: inherit;
  text-decoration: none;
}
.ywhich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.ywhich__c {
  display: grid;
  gap: 10px;
  align-content: start;
  justify-items: start;
  padding: 18px;
  border: 1px solid var(--r);
  border-radius: 16px;
}
.ywhich__c p {
  margin: 0;
  font: 400 15px/1.55 var(--ft);
}
.ywhich__c a,
.ygen__txt .fk a {
  color: var(--at);
}

/* ---------------------------------------------------------------- sell yours */
.ysteps2 {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
}
.ysteps2 li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font: 400 16px/1.45 var(--ft);
}
.ysteps2 li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--a);
  color: var(--ai);
  font: var(--fw, 700) 18px/1 var(--fh);
}

/* ---------------------------------------------------------------- the shipping map
 * the guide's routes map (map.mjs, mode routes) in the yard's own colours; the
 * guide's rules for it live in site.css, which the yard does not load */
.yshipmap .st {
  fill: color-mix(in srgb, var(--r) 45%, var(--p));
  stroke: var(--g);
  stroke-width: 0.8;
}
.yshipmap a:hover .st {
  fill: color-mix(in srgb, var(--at) 16%, var(--p));
}
.yshipmap .route {
  fill: none;
  stroke: var(--at);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
}
.yshipmap .route--hub {
  stroke: var(--m);
}
.yshipmap .sea {
  fill: none;
  stroke: var(--m);
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.yshipmap .sea--main {
  stroke: var(--at);
  stroke-width: 2.6;
  stroke-dasharray: 3 8;
}
.yshipmap .lane-new {
  display: none;
}
.yshipmap .port {
  fill: var(--i);
  stroke: var(--g);
  stroke-width: 2.5;
}
.yshipmap .port--likely {
  fill: none;
  stroke: var(--i);
  stroke-width: 2;
}
.yshipmap .hub {
  fill: var(--g);
  stroke: var(--i);
  stroke-width: 3;
}
.yshipmap .hub__dot {
  fill: var(--i);
}
.yshipmap .tag {
  font: 600 13px/1 var(--ft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--i);
  paint-order: stroke;
  stroke: var(--g);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.yshipmap .legend--ports {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font: 400 13px/1.4 var(--ft);
  color: var(--m);
}
.yshipmap .legend--ports .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.yshipmap .legend--ports i {
  display: inline-block;
  width: 18px;
  height: 10px;
}
.yshipmap .k-main {
  border-top: 3px dashed var(--at);
  height: 0 !important;
}
.yshipmap .k-port {
  background: var(--i);
  border-radius: 3px;
  width: 12px !important;
  height: 12px !important;
}
.yshipmap .k-likely {
  border: 2px solid var(--i);
  border-radius: 3px;
  width: 12px !important;
  height: 12px !important;
}
.yshipmap .k-hub {
  border: 3px solid var(--i);
  border-radius: 999px;
  width: 14px !important;
  height: 14px !important;
}
.yshipmap .k-sea {
  border-top: 2px dotted var(--m);
  height: 0 !important;
}
.yship td,
.yship th {
  font-size: 14px;
}
.yship tbody th a {
  color: var(--i);
  font: var(--fw, 700) 16px/1.2 var(--fh);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}