/* GENERATED by design/theme/export.py from the canvas board Main.dc.html (gauge from index.html and assets/css/site.css). Change the canvas and re-export; do not edit. */
:root { --leather-base: linear-gradient(180deg, #1c1b1a, #141413 40%, #0d0d0d); }
/* The dash pod: a hooded gauge like the '58 cluster. */
.pod {
  position: relative; padding: var(--pod-pt, 12px) 28px 26px; border-radius: var(--pod-r, 260px) var(--pod-r, 260px) 28px 28px;
  background: var(--leather) 0 0 / 180px, var(--leather-base);
  background-blend-mode: soft-light, normal;
  box-shadow: 0 0 0 3px #c9d0d4, 0 0 0 5px #4d555a, 0 40px 80px -30px #000, inset 0 1px 0 #ffffff1f;
}
.pod::before { /* saddle stitch around the padded face */
  content: ""; position: absolute; inset: 11px; z-index: 0; pointer-events: none;
  border-radius: calc(var(--pod-r, 260px) - 11px) calc(var(--pod-r, 260px) - 11px) 18px 18px; border: 1.5px dashed var(--stitch);
  box-shadow: inset 0 1px 0 #0008, 0 1px 0 #ffffff0d;
}
.pod > * { position: relative; }
.pod > .chrome-3d { position: absolute; }
.gauge { width: 100%; height: auto; overflow: visible; }
.gauge-label { font: 400 11px var(--f-wide); fill: var(--muted-dark); letter-spacing: .28em; }
.tick-num { font: 900 22px var(--f-display); fill: var(--ivory); }
.tick-num.is-red { fill: var(--red-hi); }
.needle {
  transform-box: view-box; transform-origin: 200px 214px;
  transform: rotate(var(--needle-deg, -80deg)); /* driven by a spring in site.js, no CSS transition */
  filter: drop-shadow(0 3px 3px #000c);
}

.odometer { display: flex; justify-content: center; gap: 10px; }
.odo-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.odo-group > span { font: 400 9px/1 var(--f-wide); letter-spacing: .24em; text-transform: uppercase; color: var(--muted-dark); }
.odo-drums {
  display: flex; padding: 3px; border-radius: 6px; background: var(--chrome);
  box-shadow: 0 4px 10px -4px #000;
}
.odo-drum {
  width: 26px; height: 40px; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #000 0%, #2b2e31 30%, #3a3d40 50%, #2b2e31 70%, #000 100%);
  border-right: 1px solid #000;
}
.odo-drum:last-child { border-right: 0; }
.odo-drums[data-odo="mins"] .odo-drum:last-child { background: linear-gradient(180deg, #8a8170 0%, #f1e8d4 30%, #fffaf0 50%, #f1e8d4 70%, #8a8170 100%); color: var(--onyx); }
.odo-strip {
  display: flex; flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -40px));
  transition: transform .9s cubic-bezier(.2, 1.4, .4, 1); /* drums roll past and settle back */
}
.odo-strip span { height: 40px; display: grid; place-items: center; font: 900 28px/1 var(--f-display); }

.pod-next { margin: 20px 0 0; text-align: center; font-size: 15px; color: var(--muted-dark); }
.pod-next strong { display: block; font: 900 clamp(26px, 3vw, 32px)/1.1 var(--f-display); letter-spacing: .02em; color: var(--ivory); text-transform: uppercase; margin: 6px 0 4px; }
.pod-kicker { display: block; font: 400 10px/1 var(--f-wide); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.pod.is-live .pod-next strong { color: var(--red-hi); }

/* ---------- 3D chrome layer + auxiliary gauges ---------- */
/* overhangs the pod so the hood and bezel highlights are not clipped */
.chrome-3d { position: absolute; top: -30px; left: -16px; width: calc(100% + 32px); height: calc(100% + 46px); z-index: 2; pointer-events: none; }
.has-3d .pod .svg-chrome { visibility: hidden; }
.cluster-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 18px; }
.mini-gauge { width: min(92px, 100%); justify-self: center; overflow: visible; }
.mini-label { font: 400 7px var(--f-wide); fill: var(--muted-dark); letter-spacing: .2em; }
.mini-label-sm { font-size: 5.6px; letter-spacing: .1em; }
.mini-needle, [data-hand] { transform-box: view-box; }
.mini-needle { transform-origin: 50px 50px; transform: rotate(var(--fuel-deg, -120deg)); }
[data-hand] { transform-origin: 50px 50px; }
.date-dial > div { display: grid; place-content: center; }

/* ---------- Micro-motion: idle engine, pokes ---------- */
.needle-shiver { transform-box: view-box; transform-origin: 200px 214px; animation: shiver .12s ease-in-out infinite alternate; }
@keyframes shiver { from { transform: rotate(-.3deg); } to { transform: rotate(.3deg); } }
/* Poke: the pod rocks away from where it was tapped (direction and tilt set per tap in site.js as --px, --py,
   --pr), and each odometer drum jiggles on its own (--jy height, --jd delay, --jt length, random per drum). */
.pod.is-poked { animation: dash-poke .55s cubic-bezier(.36, .07, .19, .97); }
.pod.is-poked .odo-drum { animation: drum-jiggle var(--jt, .45s) ease-out var(--jd, 0s); }
@keyframes dash-poke {
  0%, 100% { transform: none; }
  15% { transform: translate(var(--px, 0px), var(--py, 2px)) rotate(var(--pr, 0deg)); }
  32% { transform: translate(calc(var(--px, 0px) * -.6), calc(var(--py, 2px) * -.6)) rotate(calc(var(--pr, 0deg) * -.6)); }
  50% { transform: translate(calc(var(--px, 0px) * .35), calc(var(--py, 2px) * .35)) rotate(calc(var(--pr, 0deg) * .35)); }
  68% { transform: translate(calc(var(--px, 0px) * -.15), 0) rotate(calc(var(--pr, 0deg) * -.15)); }
  84% { transform: translate(calc(var(--px, 0px) * .05), 0); }
}
@keyframes drum-jiggle { 0%, 100% { transform: none; } 28% { transform: translateY(calc(var(--jy, 4px) * -1)); } 55% { transform: translateY(calc(var(--jy, 4px) * .5)); } 78% { transform: translateY(calc(var(--jy, 4px) * -.2)); } }
/* Cranking: lights dim on battery while the starter turns, then come up when the engine catches.
   A dark overlay, not a filter: a filter on the pod re-rasterizes the leather grain every frame and stalls the page. */
.pod::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s ease-out; }
.cranking .pod::after { opacity: .42; transition-duration: .08s; }
@keyframes crank-flicker { 50% { opacity: .35; } }

/* Gold face (gauge_options.py 'gold'): black numerals on gold, gold minis, the next-show line kept for screen readers. */
.tick-num { fill: #16130d; } .tick-num.is-red { fill: #a3241b; }
#ticks line { stroke: #16130d; } #ticks line[stroke="#e5483c"] { stroke: #a3241b; }
.gauge-label { fill: #3d2f14; }
.mini-gauge circle[r="40"] { fill: #c9a457; } .mini-label { fill: #3d2f14; } [data-hand] { stroke: #16130d; } .mini-ticks * { stroke: #16130d; fill: #16130d; }
.lamp { mix-blend-mode: screen; }
.hero-gauge .pod-next { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (max-width: 980px) { .pod { width: min(100%, 520px); margin-inline: auto; } }
@media (max-width: 720px) {
  .pod { padding: var(--pod-pt, 6px) 16px 20px; }
  .odo-drum { width: 22px; height: 34px; }
  .odo-strip { transform: translateY(calc(var(--d, 0) * -34px)); }
  .odo-strip span { height: 34px; font-size: 24px; }
  .odometer { gap: 6px; }
  .mini-gauge { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { .needle-shiver, .pod.is-poked, .pod.is-poked * { animation: none !important; } .odo-strip { transition: none; } }