@import url("./paywall.css");
@import url("./tos-gate.css");
@import url("./permissions-gate.css");

  :root{
    /* True-black page for OLED; bright type + gauge for outdoor readability */
    --bg:#000000; --panel:#0c0e12; --panel2:#141820; --line:#2a3140; --line2:#3a4456;
    --ink:#ffffff; --dim:#d0d7e2; --faint:#a8b2c2;
    --accent:#5cefff; --hot:#ff6b4a; --ok:#6dff9a; --warn:#ffc45c;
    /* --font-ui: chrome (start/settings). --font-gauge: cluster + batt/trip. */
    --font-ui:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-gauge:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Shared type scale — all profiles use these (skin fonts differ, sizes don't). */
    --fs-hero:clamp(58px, 16vw, 92px);
    --fs-rpm:clamp(28px, 8vw, 42px);
    --fs-digit:28px;
    --fs-label:11px;
    --fs-unit:12px;
    --fs-micro:10px;
    --fs-pill:10px;
    --fs-btn:15px;
    --fs-gear:26px;
    --fs-gear-lab:11px;
    /* 0 = dead silhouette, 1 = awake (driven by gaugeReveal each frame). */
    --gauge-reveal:0;
    /* Hub / LCD digits — can lag the dial per profile during wake. */
    --gauge-hub:0;
  }
  body[data-profile="harley"]{
    --accent:#e8b86d; --gauge-num:#e6d5b8; --gauge-track:#2a241c;
    --gauge-face:radial-gradient(circle at 50% 48%, #1a1510 0%, #0a0908 70%);
    --font-gauge:"Oswald", ui-sans-serif, system-ui, sans-serif;
  }
  body[data-profile="four"]{
    --accent:#ff7a4d; --gauge-num:#d0d6e0; --gauge-track:#10131a;
    --gauge-face:radial-gradient(circle at 50% 45%, #141820 0%, #050608 72%);
    --font-gauge:"Teko", ui-sans-serif, system-ui, sans-serif;
  }
  body[data-profile="ev"]{
    --accent:#4dffc0; --gauge-num:#8affe6; --gauge-track:#0a1210;
    --gauge-face:radial-gradient(circle at 50% 50%, #0c1614 0%, #030806 75%);
    --font-gauge:"Orbitron", ui-sans-serif, system-ui, sans-serif;
  }
  body[data-profile="avas"]{
    --accent:#5cefff; --gauge-num:#a8b4c4; --gauge-track:#121820;
    --gauge-face:radial-gradient(circle at 50% 50%, #121820 0%, #06080c 75%);
    --font-gauge:"DM Sans", ui-sans-serif, system-ui, sans-serif;
  }
  body[data-profile="vespa"]{
    /* Chrome/silver app accents; canvas instrument is cream/grey/red (not Softail). */
    --accent:#c4ccd4; --gauge-num:#1a1816; --gauge-track:#c4c8ce;
    --gauge-face:radial-gradient(circle at 50% 48%, #d0d4da 0%, #a8aeb6 72%);
    --font-gauge:"Josefin Sans", ui-sans-serif, system-ui, sans-serif;
  }
  body[data-profile="jet"]{
    --accent:#39ff14; --gauge-num:#6dff4a; --gauge-track:#0a1208;
    --gauge-face:radial-gradient(circle at 50% 50%, #0a1208 0%, #020403 75%);
    --font-gauge:"Share Tech Mono", ui-monospace, monospace;
  }

  /* Skin C — near-reskin per profile (type, bar, gear badge) */
  /* Harley Softail-ish: needle is the speedo; hub is a quiet LCD pocket. */
  body[data-profile="harley"] .cluster::before{
    background:radial-gradient(ellipse 52% 46% at var(--hub-x) var(--hub-y),
      rgba(232,184,109,.07) 0%,
      rgba(232,184,109,.03) 50%,
      transparent 88%);
  }
  body[data-profile="harley"] .center{
    justify-content:flex-end;
    /* LCD zone starts below the hub so RPM never sits under the pivot. */
    padding:56% 26% 14%;
    gap:0;
  }
  body[data-profile="harley"] #speedVal{ display:none; }
  body[data-profile="harley"] .cluster.fx-live #speedVal{ display:none; }
  /*
   * Harley RPM + GEAR — same LCD window model.
   * Gear looked right; RPM drifted because it used a different flex/gap/transform stack.
   */
  body[data-profile="harley"] .rpmBlock,
  body[data-profile="harley"] #gearBadge{
    width:78px;
    box-sizing:border-box;
    border-radius:3px;
    border:1px solid #1e2a24;
    padding:5px 10px 6px;
    text-align:center;
    font-style:normal; font-size:var(--fs-digit); font-weight:700; letter-spacing:1.2px;
    color:#7dffb0;
    overflow:hidden;
  }
  body[data-profile="harley"] .rpmBlock{
    order:2; margin-top:0;
    display:block; /* not flex — match #gearBadge block stack */
    gap:0;
    background:
      linear-gradient(180deg, rgba(125,255,176,.04), transparent 42%),
      linear-gradient(180deg, #0a120e 0%, #040706 100%);
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,.85),
      inset 0 0 0 1px rgba(0,0,0,.45),
      0 0 0 1px rgba(180,160,120,.08);
  }
  body[data-profile="harley"] #rpmVal,
  body[data-profile="harley"] #gearBadge .gear-mark{
    display:block; margin:0; padding:0;
    font:inherit; letter-spacing:inherit; color:inherit;
    line-height:1.05;
    text-align:center;
    transform:none;
  }
  body[data-profile="harley"] #rpmVal{
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    text-shadow:none;
  }
  body[data-profile="harley"] #rpmUnit,
  body[data-profile="harley"] #gearBadge small{
    display:block; margin:2px 0 0; padding:0;
    font-size:var(--fs-micro); font-weight:700; letter-spacing:2px;
    line-height:1; color:#4a6a58; text-transform:uppercase;
  }
  body[data-profile="harley"] #rpmBar{ display:none; }
  body[data-profile="harley"] #gearBadge{
    order:3; margin-top:7px;
    background:#060a08;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
  }
  /* Needle = speed; unit legend above the hub (out of LCD flex flow). */
  body[data-profile="harley"] #unitBtn{
    position:absolute;
    left:50%; top:32%;
    transform:translate(-50%, -50%);
    z-index:2;
    width:auto; margin:0; min-height:0; padding:0;
    font-size:var(--fs-micro); letter-spacing:2.5px; font-weight:700;
    color:#5a7a68; opacity:1;
    pointer-events:none;
    background:transparent; border:0; border-radius:0; box-shadow:none;
  }
  /* Bezel glow only when --fx-lcd > 0 (stop). Start keeps the idle dark border. */
  body[data-profile="harley"] .cluster.fx-live .rpmBlock{
    border-color:color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 100%), #2a3830);
    box-shadow:
      inset 0 1px 3px rgba(0,0,0,.65),
      0 0 0 1px color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 65%), transparent),
      0 0 calc(var(--fx-lcd, 0) * 18px) color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 55%), transparent);
    filter:brightness(calc(1 + var(--fx-lcd, 0) * 0.4));
  }
  body[data-profile="harley"] .cluster.fx-live #rpmVal{
    text-shadow:0 0 calc(var(--fx-lcd, 0) * 6px) color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 45%), transparent);
    opacity:calc(1 - var(--fx-lcd, 0) * 0.15);
  }
  body[data-profile="harley"] .cluster.fx-live #rpmUnit{
    color:color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 55%), #4a6a58);
  }
  body[data-profile="harley"] .cluster.fx-live #gearBadge{
    border-color:color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 25%), #2a3830);
  }
  body[data-profile="harley"] .cluster.fx-live #unitBtn{
    color:color-mix(in srgb, #7dffb0 calc(var(--fx-lcd, 0) * 35%), #5a7a68);
  }
  /* Harley — wider amber wash, soft long falloff around the LCD hub. */
  body[data-profile="harley"] .cluster.fx-live::before{
    background:
      radial-gradient(ellipse 55% 48% at var(--hub-x) var(--hub-y),
        rgba(232,184,109, calc(0.10 + var(--fx-glow, 0) * 0.18)) 0%,
        rgba(232,184,109, calc(0.05 + var(--fx-glow, 0) * 0.10)) 42%,
        rgba(232,184,109, calc(0.02 + var(--fx-glow, 0) * 0.04)) 68%,
        transparent 92%),
      radial-gradient(ellipse 70% 62% at var(--hub-x) var(--hub-y),
        rgba(125,255,176, calc(var(--fx-lcd, 0) * 0.08)) 0%,
        transparent 75%);
  }
  /* Superbike race dash — speed tucked under crescendo bar; digital RPM secondary. */
  body[data-profile="four"] #speedVal{
    font-size:var(--fs-hero); line-height:1.05;
    font-style:normal; font-weight:700; letter-spacing:1px;
    opacity:1; transform:none;
    padding-top:0.06em; /* keep glyph caps inside the box (wake never crops "0") */
  }
  body[data-profile="four"] #unitBtn{
    min-height:0; margin-top:0; padding:2px 12px 0;
    font-size:var(--fs-unit); letter-spacing:2px;
  }
  body[data-profile="four"] .rpmBlock{ margin-top:10px; }
  body[data-profile="four"] #rpmVal{
    font-size:var(--fs-rpm);
    font-style:normal; letter-spacing:1px; font-weight:600;
  }
  body[data-profile="four"] #rpmUnit{
    font-size:var(--fs-micro); font-weight:700; letter-spacing:2px;
    color:color-mix(in srgb, var(--accent) 35%, var(--dim));
  }
  /* Superbike: canvas race bar is the RPM meter — hide duplicate strip. */
  body[data-profile="four"] #rpmBar{ display:none; }
  /* EV: speed hub is true-centered; vrail is drawn on the canvas right edge. */
  body[data-profile="ev"] .center{
    inset:0; padding-right:0; padding-top:0;
  }
  /* Superbike: stack starts just under the top race bar + scale labels. */
  body[data-profile="four"] .center{
    top:30%; bottom:10%; padding-top:0;
    justify-content:flex-start; gap:2px;
  }
  body[data-profile="ev"] #speedVal{
    font-style:normal; font-weight:600; letter-spacing:4px;
    font-variant-numeric:tabular-nums;
    /* Quiet idle halo — digit reads sharp; bloom is for start/stop only. */
    text-shadow:
      0 0 2px rgba(0,0,0,.75),
      0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  /* Hyper EV — larger soft bloom, long falloff (not a tight mint disc). */
  body[data-profile="ev"] .cluster::before{
    background:radial-gradient(ellipse 48% 42% at var(--hub-x) var(--hub-y),
      color-mix(in srgb, var(--accent) 8%, transparent) 0%,
      color-mix(in srgb, var(--accent) 3%, transparent) 55%,
      transparent 90%);
  }
  body[data-profile="ev"] .cluster.fx-live::before{
    background:radial-gradient(ellipse 58% 50% at var(--hub-x) var(--hub-y),
      color-mix(in srgb, var(--accent) calc(12% + var(--fx-glow, 0) * 18%), transparent) 0%,
      color-mix(in srgb, var(--accent) calc(7% + var(--fx-glow, 0) * 12%), transparent) 38%,
      color-mix(in srgb, var(--accent) calc(3% + var(--fx-glow, 0) * 6%), transparent) 64%,
      transparent 92%);
  }
  body[data-profile="ev"] .cluster.fx-live #speedVal{
    text-shadow:
      0 0 2px rgba(0,0,0,.8),
      0 0 calc(10px + var(--fx-glow, 0) * 16px)
        color-mix(in srgb, var(--accent) calc(30% + var(--fx-glow, 0) * 22%), transparent),
      0 0 calc(28px + var(--fx-glow, 0) * 28px)
        color-mix(in srgb, var(--accent) calc(12% + var(--fx-glow, 0) * 16%), transparent),
      0 0 calc(48px + var(--fx-glow, 0) * 36px)
        color-mix(in srgb, var(--accent) calc(5% + var(--fx-glow, 0) * 10%), transparent);
  }
  /* EV / AVAS / Vespa / jet: speed (or HUD) is the meter — hide RPM strip */
  body[data-profile="ev"] .rpmBlock,
  body[data-profile="ev"] #rpmBar,
  body[data-profile="avas"] .rpmBlock,
  body[data-profile="avas"] #rpmBar,
  body[data-profile="vespa"] .rpmBlock,
  body[data-profile="vespa"] #rpmBar,
  body[data-profile="jet"] .rpmBlock,
  body[data-profile="jet"] #rpmBar,
  body[data-profile="jet"] #gearBadge{ display:none; }
  /* Motion lamp — same states, different forms per EV profile */
  body[data-profile="ev"] #gearBadge,
  body[data-profile="avas"] #gearBadge,
  body[data-profile="vespa"] #gearBadge{
    border:0; border-radius:0; padding:2px 8px;
    background:transparent; box-shadow:none;
    letter-spacing:2px; font-style:normal; line-height:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  body[data-profile="ev"] #gearBadge small,
  body[data-profile="avas"] #gearBadge small,
  body[data-profile="vespa"] #gearBadge small{
    margin-top:5px; font-size:var(--fs-label); font-weight:700; letter-spacing:1.8px;
    font-style:normal; text-transform:uppercase;
    transition:color .35s ease;
  }
  body[data-profile="ev"] #gearBadge .gear-mark,
  body[data-profile="avas"] #gearBadge .gear-mark,
  body[data-profile="vespa"] #gearBadge .gear-mark{
    display:block; box-sizing:border-box; flex:none;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
  }

  /* Hyper EV — small status chip + legend */
  body[data-profile="ev"] #gearBadge .gear-mark{
    width:10px; height:10px; margin:1px 0 0;
    border-radius:2px;
    border:1px solid color-mix(in srgb, var(--accent) 35%, #2a3830);
    background:color-mix(in srgb, var(--accent) 12%, #0a1410);
    box-shadow:none;
  }
  body[data-profile="ev"] #gearBadge[data-motion="off"] .gear-mark{
    background:color-mix(in srgb, var(--accent) 8%, #0a100e);
    border-color:color-mix(in srgb, var(--accent) 18%, #2a3430);
    opacity:.55;
  }
  body[data-profile="ev"] #gearBadge[data-motion="off"] small{ color:#4a5560; }
  body[data-profile="ev"] #gearBadge[data-motion="hold"] .gear-mark{
    background:color-mix(in srgb, var(--accent) 38%, #0e1a14);
    border-color:color-mix(in srgb, var(--accent) 55%, #3a5048);
    box-shadow:0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
    opacity:1;
  }
  body[data-profile="ev"] #gearBadge[data-motion="hold"] small{
    color:color-mix(in srgb, var(--accent) 45%, #6a8078);
  }
  body[data-profile="ev"] #gearBadge[data-motion="roll"] .gear-mark{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:
      0 0 6px color-mix(in srgb, var(--accent) 55%, transparent),
      0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
    opacity:1;
  }
  body[data-profile="ev"] #gearBadge[data-motion="roll"] small{
    color:color-mix(in srgb, var(--accent) 80%, #c8e8d8);
  }

  /* AVAS — legend only (no status mark) */
  body[data-profile="avas"] #gearBadge .gear-mark{ display:none; }
  body[data-profile="avas"] #gearBadge small{ margin-top:0; }
  body[data-profile="avas"] #gearBadge[data-motion="off"] small{ color:#4a5560; }
  body[data-profile="avas"] #gearBadge[data-motion="hold"] small{
    color:color-mix(in srgb, var(--accent) 38%, #7a8494);
  }
  body[data-profile="avas"] #gearBadge[data-motion="roll"] small{
    color:color-mix(in srgb, var(--accent) 75%, #c8d0d8);
  }
  body[data-profile="avas"] #speedVal{
    font-style:normal; font-weight:500; letter-spacing:2px; opacity:.94;
    /* Quiet idle halo — bloom is for start/stop only. */
    text-shadow:
      0 0 2px rgba(0,0,0,.7),
      0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  /* Vespa — physical light instrument; hub UI sits below the cream dial */
  body[data-profile="vespa"] .cluster{
    filter:drop-shadow(0 10px 28px rgba(0,0,0,.55))
           drop-shadow(0 0 18px rgba(196,204,212,.18));
  }
  body[data-profile="vespa"] .cluster::before{
    background:radial-gradient(ellipse 52% 48% at 50% 48%,
      rgba(255,255,255,.04) 0%,
      transparent 70%);
  }
  body[data-profile="vespa"] .cluster.fx-live::before{
    background:radial-gradient(ellipse 56% 50% at 50% 46%,
      rgba(255,248,235, calc(0.05 + var(--fx-glow, 0) * 0.06)) 0%,
      transparent 72%);
  }
  body[data-profile="vespa"] .center{
    justify-content:flex-end;
    padding:72% 18% 6%;
    gap:1px;
    pointer-events:none;
  }
  body[data-profile="vespa"] #speedVal{ display:none; }
  /* Motion legend lives in aria/data; keep the cream dial uncluttered. */
  body[data-profile="vespa"] #gearBadge{ display:none; }
  /* Units live on the cream dial (mph / Km/h) — no chrome KM/H badge over Vespa. */
  body[data-profile="vespa"] #unitBtn{ display:none; }
  /* AVAS — same larger soft bloom as Hyper EV, slightly calmer. */
  body[data-profile="avas"] .cluster::before{
    background:radial-gradient(ellipse 48% 42% at var(--hub-x) var(--hub-y),
      color-mix(in srgb, var(--accent) 7%, transparent) 0%,
      color-mix(in srgb, var(--accent) 2.5%, transparent) 55%,
      transparent 90%);
  }
  body[data-profile="avas"] .cluster.fx-live::before{
    background:radial-gradient(ellipse 56% 48% at var(--hub-x) var(--hub-y),
      color-mix(in srgb, var(--accent) calc(10% + var(--fx-glow, 0) * 15%), transparent) 0%,
      color-mix(in srgb, var(--accent) calc(5% + var(--fx-glow, 0) * 10%), transparent) 40%,
      color-mix(in srgb, var(--accent) calc(2% + var(--fx-glow, 0) * 5%), transparent) 66%,
      transparent 92%);
  }
  body[data-profile="avas"] .cluster.fx-live #speedVal{
    text-shadow:
      0 0 2px rgba(0,0,0,.75),
      0 0 calc(8px + var(--fx-glow, 0) * 14px)
        color-mix(in srgb, var(--accent) calc(26% + var(--fx-glow, 0) * 18%), transparent),
      0 0 calc(24px + var(--fx-glow, 0) * 24px)
        color-mix(in srgb, var(--accent) calc(10% + var(--fx-glow, 0) * 14%), transparent),
      0 0 calc(42px + var(--fx-glow, 0) * 32px)
        color-mix(in srgb, var(--accent) calc(4% + var(--fx-glow, 0) * 8%), transparent);
  }
  /* F-18: airspeed/alt on canvas sides — clear center for waterline */
  body[data-profile="jet"] #speedVal{ display:none; }
  body[data-profile="jet"] .center{
    padding:0; justify-content:center; pointer-events:none;
  }
  body[data-profile="jet"] #unitBtn{
    pointer-events:auto;
    position:absolute; left:12%; top:44%; width:18%; height:12%;
    margin:0; padding:0; min-height:0; border:0; background:transparent;
    color:transparent; opacity:0.01; font-size:1px;
  }
  body[data-profile="jet"] .cluster::before{
    background:radial-gradient(closest-side at var(--hub-x) var(--hub-y),
      rgba(57,255,20,.08), transparent 62%);
  }
  body[data-profile="jet"] .gauge-block{ gap:8px; align-items:stretch; }

  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html,body{
    height:100%; height:100dvh; overflow:hidden;
    /* pan only — blocks pinch/double-tap zoom (manipulation still allows pinch). */
    touch-action:pan-x pan-y;
  }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-ui);
    overscroll-behavior:none;
    -webkit-font-smoothing:antialiased;
  }
  .app{
    position:relative;
    height:100%; height:100dvh; max-width:460px; margin:0 auto;
    /* Tight phone pack — safe-area already clears notch / home indicator. */
    --app-edge:10px;
    padding:
      calc(env(safe-area-inset-top, 0px) + var(--app-edge))
      8px
      calc(env(safe-area-inset-bottom, 0px) + var(--app-edge));
    display:flex; flex-direction:column; gap:8px; min-height:0;
  }
  .ride{
    /* Header (.top) is a sibling above <main>. */
    flex:1; min-height:0; display:flex; flex-direction:column; gap:10px;
    padding-top:0;
  }

  /* top bar */
  .top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; }
  .brand{ min-width:0; display:flex; align-items:center; gap:8px; }
  .brand .logo{
    position:relative; display:inline-flex; align-items:baseline; justify-content:center;
    width:auto; height:auto; padding:0 1px 4px; border:none; background:none; border-radius:0;
    font-family:var(--font-ui);
    font-style:italic; font-weight:700; font-size:22px; letter-spacing:-0.5px;
    color:var(--ink); line-height:.85;
    text-shadow:
      0 0 1px color-mix(in srgb, var(--ink) 40%, transparent),
      0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
    transition:text-shadow .35s ease, filter .35s ease;
  }
  .brand .logo::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--accent) 18%,
      var(--accent) 62%,
      color-mix(in srgb, var(--hot) 75%, var(--accent)) 100%);
    opacity:.9; transform-origin:left center;
    transition:background .4s, opacity .35s ease, box-shadow .35s ease;
    box-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .brand .logo i{
    font-style:italic; color:var(--accent); font-weight:700;
    margin-left:0.02em;
    transition:color .4s, text-shadow .35s ease;
    text-shadow:0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  /* Engine live: chrome steps back in the profile accent (not gray opacity). */
  body.engine-live{
    --chrome-live:color-mix(in srgb, var(--accent) 30%, transparent);
    --chrome-live-line:color-mix(in srgb, var(--accent) 20%, transparent);
    --chrome-live-fill:color-mix(in srgb, var(--accent) 6%, transparent);
  }
  body.engine-live .top,
  body.engine-live .ride-controls{
    opacity:1;
    filter:none;
    color:var(--chrome-live);
  }
  body.engine-live .brand .logo,
  body.engine-live .brand .logo i,
  body.engine-live .pill,
  body.engine-live #sheetBtn,
  body.engine-live #soundBtn,
  body.engine-live #soundBtn small,
  body.engine-live #soundBtnTxt,
  body.engine-live #batHint{
    color:var(--chrome-live);
    border-color:var(--chrome-live-line);
    background:var(--chrome-live-fill);
    text-shadow:none;
    box-shadow:none;
  }
  body.engine-live .brand .logo::after{
    background:var(--chrome-live);
    opacity:1;
    box-shadow:none;
  }
  body.engine-live .pill .dot{
    background:var(--chrome-live);
    box-shadow:none;
  }
  body.engine-live .gauge-block{
    opacity:1;
    filter:none;
    color:unset;
  }
  .top, .ride-controls{
    transition:color .35s ease, opacity .35s ease, filter .35s ease;
  }
  .top .logo, .top .pill, .top #sheetBtn,
  .ride-controls #soundBtn, .ride-controls #soundBtn small, .ride-controls #soundBtnTxt{
    transition:color .35s ease, border-color .35s ease, background .35s ease, text-shadow .35s ease, box-shadow .35s ease;
  }
  .top-right{ display:flex; align-items:center; gap:8px; flex:none; }
  .pills{ display:flex; flex-wrap:nowrap; gap:5px; }
  .pill{
    display:flex; align-items:center; gap:5px; border:1px solid var(--line2); border-radius:999px;
    padding:6px 8px; font-size:var(--fs-pill); font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--ink); background:rgba(255,255,255,.06);
  }
  .pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--dim); }
  .pill.ok .dot{ background:var(--ok); box-shadow:0 0 6px var(--ok); }
  .pill.warn .dot{ background:var(--warn); box-shadow:0 0 6px var(--warn); }
  .pill.err .dot{ background:var(--hot); box-shadow:0 0 6px var(--hot); }
  #sheetBtn{
    width:44px; height:44px; border-radius:12px; border:1px solid var(--line2);
    background:var(--panel2); color:var(--ink); cursor:pointer;
    display:grid; place-items:center; flex:none;
  }
  #sheetBtn svg{ width:22px; height:22px; display:block; }
  #sheetBtn:active{ transform:translateY(1px); border-color:var(--accent); color:var(--accent); }

  /* Sound picker overlay — always available, never steals gauge height */
  #soundPop{
    display:none; position:absolute; inset:0; z-index:48;
  }
  #soundPop.open{ display:block; }
  .sound-pop-backdrop{
    position:absolute; inset:0; background:rgba(5,7,10,.55);
  }
  .sound-pop-panel{
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    width:min(340px, calc(100% - 28px));
    background:var(--panel); border:1px solid var(--line2); border-radius:14px;
    padding:8px 14px 14px; box-shadow:0 16px 36px -18px rgba(0,0,0,.85);
  }
  .sound-pop-head{
    margin:0 0 6px;
  }
  .sound-pop-head h2{
    font-style:italic; font-weight:700; font-size:13px; letter-spacing:1px;
    text-transform:uppercase; color:var(--dim); margin:0;
  }
  #soundPop .profiles{ display:flex; flex-direction:column; gap:8px; }
  #soundPop .chip b{ font-size:16px; letter-spacing:.5px; }
  #soundPop .chip span{
    display:block; margin-top:4px; line-height:1.3;
    font-size:13px; font-weight:700; font-style:italic; color:var(--ink);
  }

  /* banner — overlays, doesn't push layout */
  #banner{
    display:none; position:absolute; left:14px; right:14px; z-index:40;
    top:calc(env(safe-area-inset-top, 0px) + 88px);
    max-width:432px; margin:0 auto;
    border:1px solid var(--line); border-left:3px solid var(--hot);
    background:rgba(19,22,27,.96); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.45; color:var(--ink);
    box-shadow:0 12px 28px -16px rgba(0,0,0,.8);
  }
  #banner.show{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
  #banner button{ background:none; border:none; color:var(--dim); font-size:16px; cursor:pointer; padding:0 2px; line-height:1; }

  /* Gauge + stats: full width. Dual margin-top:auto splits spare phone
     height above the dial and below the odo so tall iPhones don't look
     letterboxed (dial glued under the header, void over the buttons). */
  .gauge-block{
    flex:0 0 auto; width:100%;
    display:flex; flex-direction:column; align-items:stretch; gap:14px;
    margin-top:auto;
  }
  .ride-controls{
    margin-top:auto; flex:none; width:100%;
    display:flex; flex-direction:column; gap:6px;
  }

  /* cluster — always full ride width (matches CONNECT / SOUND buttons).
     Square from width only — do not shrink width for height (that caused side gutters). */
  /* Ambient / FX wash tracks the speed hub (--hub-x/y), not always geometric center. */
  .cluster{
    position:relative; flex:0 0 auto;
    width:100%;
    max-width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    margin:0;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    transition:background .35s;
    cursor:pointer;
    touch-action:manipulation; /* allow double-tap start/stop; no iOS zoom */
    -webkit-user-select:none; user-select:none;
    font-family:var(--font-gauge);
    overflow:visible;
    --hub-x:50%; --hub-y:50%;
  }
  .cluster::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(closest-side at var(--hub-x) var(--hub-y),
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%);
    pointer-events:none; transition:background .4s; z-index:0;
  }
  .cluster.fx-live::before{
    background:radial-gradient(closest-side at var(--hub-x) var(--hub-y),
      color-mix(in srgb, var(--accent) calc(10% + var(--fx-glow, 0) * 40%), transparent), transparent 64%);
  }
  .cluster.fx-live #speedVal{
    text-shadow:
      0 0 2px rgba(0,0,0,.7),
      0 0 calc(22px + var(--fx-glow, 0) * 28px) color-mix(in srgb, var(--accent) calc(42% + var(--fx-glow, 0) * 40%), transparent);
  }
  .cluster.fx-live #rpmVal{
    text-shadow:0 0 calc(14px + var(--fx-glow, 0) * 22px) color-mix(in srgb, var(--accent) calc(38% + var(--fx-glow, 0) * 45%), transparent);
  }
  .cluster.fx-live #rpmBar > i{
    box-shadow:0 0 calc(10px + var(--fx-glow, 0) * 18px) color-mix(in srgb, var(--accent) calc(70% + var(--fx-glow, 0) * 30%), transparent);
  }
  #tach{ display:block; width:100%; height:auto; aspect-ratio:1; position:relative; z-index:1; overflow:visible; }
  /* Needle layer above hub digits (Harley Softail pointer over LCD). */
  #tachNeedle{
    position:absolute; inset:0; width:100%; height:100%;
    display:block; z-index:3; pointer-events:none;
  }
  .center{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; pointer-events:none; padding-top:2%; z-index:2;
    /* Hub digits use --gauge-hub (profile-staged); dial uses --gauge-reveal. */
    opacity:calc(0.06 + 0.94 * var(--gauge-hub));
    filter:saturate(calc(0.15 + 0.85 * var(--gauge-hub)));
  }
  body.gauge-dead .cluster::before{ opacity:0.18; }
  body.gauge-dead #tachNeedle{ opacity:0; }
  /* Softail — LCD window flickers in after chrome (hub staged in JS). */
  body[data-profile="harley"].gauge-waking .center{
    filter:
      saturate(calc(0.2 + 0.8 * var(--gauge-hub)))
      brightness(calc(0.55 + 0.45 * var(--gauge-hub)));
  }
  body[data-profile="vespa"].gauge-waking .center{
    filter:
      saturate(calc(0.35 + 0.65 * var(--gauge-hub)))
      brightness(calc(0.6 + 0.4 * var(--gauge-hub)))
      drop-shadow(0 0 calc(var(--gauge-hub) * 14px) color-mix(in srgb, var(--accent) 35%, transparent));
  }
  /* Superbike — wipe-up slide (no overflow/clip — those shaved the top of "0"). */
  body[data-profile="four"].gauge-waking .center{
    filter:brightness(calc(0.4 + 0.6 * var(--gauge-hub)));
  }
  body[data-profile="four"].gauge-waking .center > *{
    transform:translateY(calc((1 - var(--gauge-hub)) * 56px));
  }
  body[data-profile="four"]:not(.gauge-waking) .center > *{
    transform:none;
  }
  /* Hyper EV — mint bloom scale from the hub. */
  body[data-profile="ev"].gauge-waking .center{
    transform:scale(calc(0.82 + 0.18 * var(--gauge-hub)));
    filter:
      saturate(calc(0.2 + 0.8 * var(--gauge-hub)))
      drop-shadow(0 0 calc(var(--gauge-hub) * 28px) color-mix(in srgb, var(--accent) 55%, transparent));
  }
  body[data-profile="ev"]:not(.gauge-waking) .center{ transform:none; }
  /* AVAS — soft lift-in for the speed zero (iris clip looked awkward on "0"). */
  body[data-profile="avas"].gauge-waking .center{
    transform:translateY(calc((1 - var(--gauge-hub)) * 10px));
    filter:
      saturate(calc(0.35 + 0.65 * var(--gauge-hub)))
      drop-shadow(0 0 calc(var(--gauge-hub) * 16px) color-mix(in srgb, var(--accent) 40%, transparent));
  }
  body[data-profile="avas"]:not(.gauge-waking) .center{
    transform:none;
  }
  #speedVal{
    font-family:var(--font-gauge);
    font-style:italic; font-weight:700; font-size:var(--fs-hero); line-height:.95;
    color:#f3f6fa;
    transition:color .4s, text-shadow .4s, font-size .25s;
    text-shadow:
      0 0 2px rgba(0,0,0,.7),
      0 0 22px color-mix(in srgb, var(--accent) 42%, transparent);
  }
  #unitBtn{
    pointer-events:auto; background:none; border:none;
    color:color-mix(in srgb, var(--accent) 22%, var(--dim));
    font-family:var(--font-gauge);
    font-size:var(--fs-unit); font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer;
    min-height:36px; padding:8px 16px; margin-top:2px;
    opacity:.88; transition:color .4s;
  }
  .rpmBlock{
    margin-top:6px; display:flex; flex-direction:column; align-items:center; gap:1px;
  }
  #rpmVal{
    font-family:var(--font-gauge);
    font-style:italic; font-weight:700;
    font-size:var(--fs-rpm); line-height:1;
    letter-spacing:1px; font-variant-numeric:tabular-nums;
    color:var(--accent);
    text-shadow:0 0 14px color-mix(in srgb, var(--accent) 38%, transparent);
    transition:color .4s, text-shadow .4s, font-size .25s;
  }
  #rpmUnit{
    font-family:var(--font-gauge);
    font-size:var(--fs-micro); font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--dim);
  }
  #rpmBar{
    width:min(46%, 150px); height:3px; margin-top:7px;
    background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden;
  }
  #rpmBar > i{
    display:block; height:100%; width:0%;
    background:var(--accent);
    box-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
    transition:width .08s linear, background .4s;
  }
  #gearBadge{
    margin-top:8px; border:1px solid var(--line); border-radius:8px; padding:2px 10px;
    font-family:var(--font-gauge);
    font-style:italic; font-weight:700; font-size:var(--fs-label); color:var(--faint);
    background:transparent;
    min-width:40px; transition:color .3s, border-color .3s;
  }
  #gearBadge .gear-mark{
    display:block; line-height:1.1;
  }
  #gearBadge small{ font-style:normal; font-weight:600; font-size:var(--fs-micro); letter-spacing:2px; color:var(--faint); display:block; }
  /* Superbike — after base so flex centering wins the cascade */
  body[data-profile="four"] #gearBadge{
    margin-top:12px;
    width:58px; height:62px; min-width:58px; min-height:62px;
    padding:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; box-sizing:border-box;
    border-radius:2px;
    border:1px solid rgba(255,122,77,.55);
    background:rgba(8,6,10,.55);
    font-style:normal; font-size:inherit; font-weight:700; letter-spacing:0;
    color:#e8e4e0; line-height:1;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  }
  body[data-profile="four"] #gearBadge .gear-mark{
    display:block; flex:0 0 auto;
    margin:0; padding:0;
    font-size:var(--fs-gear); font-weight:700; line-height:1;
    color:#e8e4e0;
  }
  body[data-profile="four"] #gearBadge small{
    display:block; flex:0 0 auto;
    margin:0; padding:0;
    font-size:var(--fs-gear-lab); font-weight:700; letter-spacing:2.2px; line-height:1;
    color:#a07060;
  }
  body[data-profile="four"] .cluster.fx-live #gearBadge,
  body.engine-live[data-profile="four"] #gearBadge{
    border-color:rgba(255,122,77,.75);
    color:#ff9a6a;
  }
  body.engine-live[data-profile="four"] #gearBadge .gear-mark{ color:#ff9a6a; }
  body.engine-live[data-profile="four"] #gearBadge small{ color:#ff7a4d; }

  /* Thin readout row — sibling under the dial; same profile face as cluster */
  /* Batt / trip stay readable on every profile (ignition-off instruments). */
  .odo-row > #engStart,
  .odo-row > #batFace,
  .odo-row > #tripReset{
    opacity:1;
    filter:none;
    transform:none;
    clip-path:none;
  }
  /*
   * Wake theater for batt/trip — bloom / gain / phosphor IN PLACE.
   * Never translate or scale these stations (that reads as down-then-up).
   */
  body.gauge-waking .odo-row > #batFace,
  body.gauge-waking .odo-row > #tripReset{
    transform:none;
  }
  /* Superbike — race glow builds on the stations (centered, no slide). */
  body[data-profile="four"].gauge-waking .odo-row > #batFace,
  body[data-profile="four"].gauge-waking .odo-row > #tripReset{
    filter:brightness(calc(0.72 + 0.28 * var(--gauge-reveal)))
      drop-shadow(0 0 calc(2px + var(--gauge-reveal) * 12px)
        color-mix(in srgb, var(--accent) calc(18% + 32% * var(--gauge-reveal)), transparent));
  }
  /* Hyper EV — mint bloom (same energy as the old lift, without moving). */
  body[data-profile="ev"].gauge-waking .odo-row > #batFace,
  body[data-profile="ev"].gauge-waking .odo-row > #tripReset{
    filter:
      saturate(calc(0.5 + 0.5 * var(--gauge-reveal)))
      brightness(calc(0.8 + 0.2 * var(--gauge-reveal)))
      drop-shadow(0 0 calc(3px + var(--gauge-reveal) * 16px)
        color-mix(in srgb, var(--accent) calc(22% + 40% * var(--gauge-reveal)), transparent));
  }
  /* AVAS — gain + soft halo (replaces scale-up that shifted the row). */
  body[data-profile="avas"].gauge-waking .odo-row > #batFace,
  body[data-profile="avas"].gauge-waking .odo-row > #tripReset{
    filter:
      brightness(calc(0.78 + 0.22 * var(--gauge-reveal)))
      saturate(calc(0.65 + 0.35 * var(--gauge-reveal)))
      drop-shadow(0 0 calc(2px + var(--gauge-reveal) * 12px)
        color-mix(in srgb, var(--accent) calc(18% + 35% * var(--gauge-reveal)), transparent));
  }
  /* Harley — LCD windows bias up with the Softail wake (plates stay put). */
  body[data-profile="harley"].gauge-waking .odo-row > #batFace,
  body[data-profile="harley"].gauge-waking .odo-row > #tripReset{
    filter:
      brightness(calc(0.68 + 0.32 * var(--gauge-reveal)))
      saturate(calc(0.45 + 0.55 * var(--gauge-reveal)));
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,.8),
      inset 0 0 0 1px rgba(0,0,0,.4),
      0 0 calc(var(--gauge-reveal) * 12px)
        color-mix(in srgb, #7dffb0 calc(var(--gauge-reveal) * 28%), transparent);
  }
  body[data-profile="vespa"].gauge-waking .odo-row > #batFace,
  body[data-profile="vespa"].gauge-waking .odo-row > #tripReset{
    filter:
      brightness(calc(0.72 + 0.28 * var(--gauge-reveal)))
      saturate(calc(0.55 + 0.45 * var(--gauge-reveal)));
    box-shadow:
      0 0 calc(var(--gauge-reveal) * 10px)
        color-mix(in srgb, var(--accent) calc(var(--gauge-reveal) * 30%), transparent);
  }
  .odo-row{
    display:flex; align-items:flex-start; justify-content:center; gap:28px; width:100%;
    padding:0 8px 2px; flex:none;
    font-family:var(--font-gauge);
  }
  .odo-face{
    flex:0 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:2px; padding:0; margin:0;
    background:transparent; border:none; border-radius:0; box-shadow:none;
    text-align:center; min-width:72px;
    font-family:var(--font-gauge);
  }
  .odo-face small,
  .bat-beta{
    margin-left:4px; font-family:var(--font-ui); font-size:9px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; font-style:normal;
    color:color-mix(in srgb, var(--dim) 80%, var(--ink));
  }
  .bat-beta[hidden]{ display:none !important; }
  #batChangeBtn{
    width:100%; margin-top:8px; height:40px; border-radius:12px; cursor:pointer;
    font-family:var(--font-ui); font-weight:700; font-style:italic; letter-spacing:1px; font-size:13px;
    border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  }
  .odo-label{
    font-family:var(--font-gauge);
    font-size:var(--fs-label); font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--dim);
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    min-height:16px; line-height:1; margin:0;
  }
  .odo-label svg{
    width:13px; height:13px; flex:0 0 auto;
    stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
    opacity:0.85;
  }
  #batFace[data-meter="batt"] .odo-label svg{ fill:currentColor; stroke:none; }
  #batFace[data-meter="fuel"] .odo-label svg,
  #batFace[data-meter="tank"] .odo-label svg,
  #tripReset .odo-label svg{ fill:none; stroke:currentColor; }
  #batFace,
  #tripReset{
    font:inherit; color:inherit; cursor:pointer;
    appearance:none; -webkit-appearance:none;
    padding:0; border-radius:0;
  }
  .odo-sub{
    font-family:var(--font-gauge);
    font-size:var(--fs-micro); font-weight:700; letter-spacing:1.2px;
    text-transform:uppercase; color:var(--faint); line-height:1; margin:0;
    min-height:12px; display:block;
  }
  #batFace:active #batVal{ color:var(--ink); }
  #batFace:active .odo-sub,
  #tripReset:active .odo-sub{ color:var(--accent); }
  #batFace.on .odo-sub{ color:color-mix(in srgb, var(--ok) 70%, var(--faint)); }
  #tripReset:active #tripVal{ color:var(--ink); }
  /* ENG hardware — left of batt/fuel/tank; shape per profile */
  #engStart{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:4px; min-width:64px; min-height:52px; padding:0; margin:0;
    background:transparent; border:0; cursor:pointer;
    font-family:var(--font-gauge); color:var(--accent);
    -webkit-tap-highlight-color:transparent;
  }
  #engStart .eng-label{
    font-size:var(--fs-label); font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    color:color-mix(in srgb, var(--accent) 55%, var(--dim)); line-height:1;
  }
  /* Fallback = EV power latch (default profile) until body[data-profile] paints */
  #engStart .eng-switch{
    position:relative; display:flex; align-items:center; justify-content:center;
    box-sizing:border-box; flex:none;
    width:32px; height:32px; border-radius:4px;
    border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background:rgba(4,16,12,.85);
    box-shadow:inset 0 0 0 1px rgba(77,255,192,.08);
  }
  #engStart .eng-switch::before{
    content:""; position:absolute; box-sizing:border-box;
    left:50%; top:50%; width:12px; height:12px;
    border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background:transparent;
    box-shadow:0 -5px 0 -3px color-mix(in srgb, var(--accent) 55%, transparent);
    transform:translate(-50%,-42%);
  }
  #engStart.on .eng-switch{
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, #04100c);
    box-shadow:inset 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent),
               0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  #engStart.on .eng-switch::before{
    border-color:var(--accent);
    box-shadow:0 -5px 0 -3px var(--accent), 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  #engStart.crank .eng-switch::before{ animation:engCrank .32s steps(2, end) infinite; }
  #engStart .eng-state{
    font-size:var(--fs-label); font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    color:color-mix(in srgb, var(--accent) 40%, var(--dim)); line-height:1;
    /* Reserve "START" width so Start/Cut/Run never reflow the switch. */
    box-sizing:border-box; width:100%; min-height:13px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
  }
  #engStart.on .eng-state{ color:var(--accent); }
  /* Press feedback on the hardware only — never translate the whole station. */
  #engStart:active .eng-switch{ filter:brightness(1.08); }
  #engStart:active{ transform:none; }
  @keyframes engCrank{
    0%,100%{ opacity:1; }
    50%{ opacity:.45; }
  }
  @keyframes engCrankSpin{
    0%{ transform:translate(-50%,-50%) rotate(-40deg); opacity:1; }
    50%{ transform:translate(-50%,-50%) rotate(40deg); opacity:.55; }
    100%{ transform:translate(-50%,-50%) rotate(-40deg); opacity:1; }
  }

  /* Harley — chrome barrel ignition + key slot */
  body[data-profile="harley"] #engStart .eng-switch{
    width:30px; height:30px; border-radius:50%;
    border:2px solid #6a6050;
    background:radial-gradient(circle at 38% 32%, #3a342c 0%, #12100e 55%, #0a0908 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.7),
               0 1px 0 #8a7a60;
  }
  body[data-profile="harley"] #engStart .eng-switch::before{
    left:50%; top:50%; width:3px; height:14px; margin:0;
    border-radius:1px; border:0;
    background:#8a7a60;
    transform:translate(-50%,-50%) rotate(-40deg);
    transition:transform .22s ease, background .18s ease, box-shadow .18s ease;
  }
  body[data-profile="harley"] #engStart.on .eng-switch{
    border-color:#c4a46a;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.1), inset 0 -2px 4px rgba(0,0,0,.65),
               0 0 10px rgba(232,184,109,.28);
  }
  body[data-profile="harley"] #engStart.on .eng-switch::before{
    background:#e8b86d;
    transform:translate(-50%,-50%) rotate(50deg);
    box-shadow:0 0 6px rgba(232,184,109,.45);
  }
  body[data-profile="harley"] #engStart.crank .eng-switch::before{
    background:#f0d49a; animation:engCrankSpin .4s ease-in-out infinite;
  }

  /* Superbike — red/black kill-switch rocker */
  body[data-profile="four"] #engStart .eng-switch{
    width:34px; height:42px; border-radius:3px;
    border:1px solid #5a2a22;
    background:linear-gradient(180deg, #2a1210 0%, #120808 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 4px rgba(0,0,0,.7);
  }
  body[data-profile="four"] #engStart .eng-switch::before{
    left:3px; right:3px; height:17px; width:auto; bottom:3px; top:auto;
    border-radius:2px; border:1px solid #7a3428; transform:none;
    background:linear-gradient(180deg, #c44830 0%, #8a2818 100%);
    box-shadow:0 1px 2px rgba(0,0,0,.5);
    transition:top .18s ease, bottom .18s ease, background .18s ease, border-color .18s ease;
  }
  body[data-profile="four"] #engStart.on .eng-switch{
    border-color:#ff7a4d;
    box-shadow:inset 0 0 10px rgba(255,122,77,.15), 0 0 8px rgba(255,122,77,.2);
  }
  body[data-profile="four"] #engStart.on .eng-switch::before{
    top:3px; bottom:auto;
    border-color:#ff9a6a;
    background:linear-gradient(180deg, #ff7a4d 0%, #c44830 100%);
    box-shadow:0 0 8px rgba(255,122,77,.45);
  }
  body[data-profile="four"] #engStart.crank .eng-switch::before{
    animation:engCrank .3s steps(2, end) infinite;
  }

  /* EV power latch = default #engStart .eng-switch (above) */

  /* AVAS — soft OEM cyan pill */
  body[data-profile="avas"] #engStart .eng-switch{
    width:52px; height:26px; border-radius:999px;
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background:rgba(8,12,18,.75);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
  }
  body[data-profile="avas"] #engStart .eng-switch::before{
    left:3px; top:3px; bottom:3px; right:auto; width:20px; height:auto;
    border-radius:999px; border:0; transform:none;
    background:color-mix(in srgb, var(--accent) 28%, #1a222c);
    box-shadow:0 1px 2px rgba(0,0,0,.35);
    transition:left .2s ease, background .18s ease, box-shadow .18s ease;
  }
  body[data-profile="avas"] #engStart.on .eng-switch{
    border-color:color-mix(in srgb, var(--accent) 70%, transparent);
    box-shadow:inset 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  body[data-profile="avas"] #engStart.on .eng-switch::before{
    left:29px; background:var(--accent);
    box-shadow:0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  body[data-profile="avas"] #engStart.crank .eng-switch::before{
    animation:engCrank .35s steps(2, end) infinite;
  }

  /* Vespa — chrome barrel key + scarlet accent (matches instrument needle) */
  body[data-profile="vespa"] #engStart .eng-switch{
    width:30px; height:30px; border-radius:50%;
    border:2px solid #8a929a;
    background:radial-gradient(circle at 38% 32%, #d8dee4 0%, #6a727a 55%, #2a3036 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.45),
               0 1px 0 #c8d0d8;
  }
  body[data-profile="vespa"] #engStart .eng-switch::before{
    left:50%; top:50%; width:3px; height:14px; margin:0;
    border-radius:1px; border:0;
    background:#c01018;
    transform:translate(-50%,-50%) rotate(-40deg);
    transition:transform .22s ease, background .18s ease, box-shadow .18s ease;
  }
  body[data-profile="vespa"] #engStart.on .eng-switch{
    border-color:#c8d0d8;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.4),
               0 0 10px rgba(192,16,24,.28);
  }
  body[data-profile="vespa"] #engStart.on .eng-switch::before{
    background:#e01820;
    transform:translate(-50%,-50%) rotate(50deg);
    box-shadow:0 0 6px rgba(192,16,24,.5);
  }
  body[data-profile="vespa"] #engStart.crank .eng-switch::before{
    background:#ff3a2e; animation:engCrankSpin .4s ease-in-out infinite;
  }

  /*
   * Non-jet: same air under the dial as F/A-18 (gap:8px). Superbike keeps its
   * race-bar skin; Harley / EV / AVAS own their layouts (not a shared 3-bay).
   */
  body[data-profile="four"] .gauge-block,
  body[data-profile="ev"] .gauge-block,
  body[data-profile="avas"] .gauge-block,
  body[data-profile="vespa"] .gauge-block{
    gap:8px; align-items:stretch;
  }
  /* Harley — same under-dial air as other profiles (bezel no longer needs extra gap). */
  body[data-profile="harley"] .gauge-block{
    gap:8px; align-items:stretch;
  }
  body[data-profile="harley"] .odo-row,
  body[data-profile="four"] .odo-row,
  body[data-profile="ev"] .odo-row,
  body[data-profile="avas"] .odo-row,
  body[data-profile="vespa"] .odo-row{
    width:100%; max-width:100%; margin:0;
    align-items:stretch;
  }
  /* Superbike — aligned race-bar stations (type matches F/A-18 wells) */
  body[data-profile="four"] .odo-row > #engStart,
  body[data-profile="four"] .odo-row > #batFace,
  body[data-profile="four"] .odo-row > #tripReset{
    display:grid;
    grid-template-rows:16px 48px 16px;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    min-width:0;
    justify-items:center;
    align-items:center;
    text-align:center;
  }
  body[data-profile="four"] #engStart .eng-label,
  body[data-profile="four"] #engStart .eng-state,
  body[data-profile="four"] #batFace .odo-label,
  body[data-profile="four"] #tripReset .odo-label,
  body[data-profile="four"] #batFace .odo-sub,
  body[data-profile="four"] #tripReset .odo-sub{
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    width:100%; margin:0; min-height:0;
    font-size:var(--fs-label); font-weight:700; letter-spacing:2.2px;
    line-height:1; text-transform:uppercase;
  }
  body[data-profile="four"] #batFace .odo-digits,
  body[data-profile="four"] #tripReset .odo-digits{
    box-sizing:border-box; width:100%; height:48px; margin:0; padding:0 4px;
    display:flex; align-items:center; justify-content:center;
    border:0; background:transparent; box-shadow:none;
  }
  body[data-profile="four"] #engStart{ min-height:0; min-width:0; gap:0; }
  body[data-profile="four"] #engStart .eng-switch{ margin:0; }
  body[data-profile="four"] #batVal,
  body[data-profile="four"] #tripVal{
    font-style:normal; font-size:var(--fs-digit); font-weight:700;
    letter-spacing:1.2px; line-height:1;
    transition:color .35s ease, text-shadow .35s ease;
  }

  /* Jet — guarded F-18 cockpit toggle (default) */
  body[data-profile="jet"] #engStart .eng-switch{
    width:52px; height:28px; border-radius:2px;
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background:rgba(0,0,0,.55);
    box-shadow:inset 0 0 0 1px rgba(57,255,20,.08);
  }
  body[data-profile="jet"] #engStart .eng-switch::before{
    left:3px; top:3px; bottom:3px; right:auto; width:18px; height:auto;
    border-radius:1px; transform:none; box-shadow:none;
    background:color-mix(in srgb, var(--accent) 22%, #1a1a1a);
    border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition:left .18s ease, background .18s ease, box-shadow .18s ease;
  }
  body[data-profile="jet"] #engStart.on .eng-switch{
    border-color:var(--accent);
    box-shadow:inset 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent),
               0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  body[data-profile="jet"] #engStart.on .eng-switch::before{
    left:29px; background:var(--accent);
    box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  body[data-profile="jet"] #engStart.crank .eng-switch::before{
    background:#c8ff7a; animation:engCrank .35s steps(2, end) infinite;
  }

  /* Jet — machined UFC bay + NVIS night cockpit lighting */
  body[data-profile="jet"] .odo-row{
    --nvis:#5a6b3a;          /* warm olive phosphor */
    --nvis-dim:#4a5234;      /* standby stencil (readable at night) */
    --nvis-hot:#7a8f4a;      /* live soft glow */
    position:relative;
    align-items:stretch;
    justify-content:space-between;
    gap:6px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:12px 10px 10px;
    border-radius:4px;
    border:2px solid #3a4030;
    background-color:#14160f;
    background-image:
      radial-gradient(circle at 9px 9px, #4a4e3a 0 1.1px, #222418 1.5px 2.3px, transparent 2.5px),
      radial-gradient(circle at calc(100% - 9px) 9px, #4a4e3a 0 1.1px, #222418 1.5px 2.3px, transparent 2.5px),
      radial-gradient(circle at 9px calc(100% - 9px), #4a4e3a 0 1.1px, #222418 1.5px 2.3px, transparent 2.5px),
      radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #4a4e3a 0 1.1px, #222418 1.5px 2.3px, transparent 2.5px),
      /* Side rim wash — cockpit edge lighting */
      linear-gradient(90deg,
        color-mix(in srgb, var(--nvis) 22%, transparent) 0%,
        transparent 14%,
        transparent 86%,
        color-mix(in srgb, var(--nvis) 22%, transparent) 100%),
      linear-gradient(180deg, #222418 0%, #16180f 40%, #0c0d09 100%);
    box-shadow:
      0 0 0 1px #050603,
      0 1px 0 rgba(180,170,120,.08),
      0 0 18px color-mix(in srgb, var(--nvis) 12%, transparent),
      -6px 0 16px color-mix(in srgb, var(--nvis) 10%, transparent),
      6px 0 16px color-mix(in srgb, var(--nvis) 10%, transparent),
      0 5px 14px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(200,190,140,.08),
      inset 8px 0 14px color-mix(in srgb, var(--nvis) 8%, transparent),
      inset -8px 0 14px color-mix(in srgb, var(--nvis) 8%, transparent),
      inset 0 -3px 8px rgba(0,0,0,.75),
      inset 0 0 0 1px rgba(0,0,0,.5);
  }
  body[data-profile="jet"] .odo-row > #engStart,
  body[data-profile="jet"] .odo-row > #batFace,
  body[data-profile="jet"] .odo-row > #tripReset{
    display:grid;
    grid-template-rows:16px 42px 14px;
    grid-template-columns:1fr;
    gap:5px;
    flex:1 1 0;
    min-width:0;
    min-height:0;
    padding:8px 6px 6px;
    justify-items:center;
    align-items:center;
    border-radius:2px;
    border:1px solid #050603;
    background:linear-gradient(180deg, #0c0d0a 0%, #060705 100%);
    box-shadow:
      inset 0 2px 5px rgba(0,0,0,.88),
      inset 0 0 0 1px rgba(0,0,0,.65),
      0 1px 0 rgba(180,170,120,.04);
  }
  /* Warm dim engraved labels — NVIS stencil, not HUD green */
  body[data-profile="jet"] #engStart .eng-label,
  body[data-profile="jet"] #engStart .eng-state,
  body[data-profile="jet"] #batFace .odo-label,
  body[data-profile="jet"] #tripReset .odo-label,
  body[data-profile="jet"] #batFace .odo-sub,
  body[data-profile="jet"] #tripReset .odo-sub{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; margin:0; min-height:0;
    color:#6e6a4a;
    font-size:var(--fs-label); font-weight:700; letter-spacing:2.2px;
    line-height:1; text-transform:uppercase;
    text-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 8px color-mix(in srgb, var(--nvis) 12%, transparent);
  }
  body[data-profile="jet"] #engStart.on .eng-state{
    color:var(--nvis-hot);
    text-shadow:0 0 6px color-mix(in srgb, var(--nvis) 35%, transparent);
  }
  body[data-profile="jet"] #batFace .odo-label svg,
  body[data-profile="jet"] #tripReset .odo-label svg{ display:none; }
  /* Breaker in olive recess — soft NVIS when armed */
  body[data-profile="jet"] #engStart .eng-switch{
    width:58px; height:34px; margin:0; border-radius:2px;
    border:1px solid #252820;
    background:linear-gradient(180deg, #040503 0%, #0a0b08 100%);
    box-shadow:
      0 0 0 3px #161812,
      0 0 0 4px #050603,
      inset 0 2px 5px rgba(0,0,0,.92),
      inset 0 0 0 1px #000;
  }
  body[data-profile="jet"] #engStart .eng-switch::before{
    width:20px;
    left:3px; top:3px; bottom:3px;
    background:#2a2c22;
    border-color:#3a3e30;
  }
  body[data-profile="jet"] #engStart.on .eng-switch{
    border-color:color-mix(in srgb, var(--nvis) 50%, #252820);
    box-shadow:
      0 0 0 3px #161812,
      0 0 0 4px #050603,
      inset 0 0 12px color-mix(in srgb, var(--nvis) 16%, transparent),
      0 0 10px color-mix(in srgb, var(--nvis) 14%, transparent);
  }
  body[data-profile="jet"] #engStart.on .eng-switch::before{
    left:33px;
    background:var(--nvis-hot);
    border-color:var(--nvis);
    box-shadow:0 0 8px color-mix(in srgb, var(--nvis) 40%, transparent);
  }
  body[data-profile="jet"] #engStart.crank .eng-switch::before{
    background:#a8b86a;
    animation:engCrank .35s steps(2, end) infinite;
  }
  /* Digit wells — dark until live; soft phosphor wash when lit */
  body[data-profile="jet"] #batFace .odo-digits,
  body[data-profile="jet"] #tripReset .odo-digits{
    box-sizing:border-box;
    width:100%;
    max-width:104px;
    height:42px;
    margin:0;
    padding:0 8px;
    display:flex; align-items:center; justify-content:center;
    border-radius:2px;
    border:1px solid #1e2218;
    background:linear-gradient(180deg, #020301 0%, #070806 100%);
    box-shadow:
      0 1px 0 rgba(180,170,120,.04),
      inset 0 3px 7px rgba(0,0,0,.92),
      inset 0 0 0 1px #000;
    transition:box-shadow .35s ease, background .35s ease;
  }
  /* Standby — barely readable olive; tank tracks trip */
  body[data-profile="jet"] #batVal,
  body[data-profile="jet"] #tripVal{
    font-style:normal;
    font-size:var(--fs-digit);
    font-weight:700;
    letter-spacing:1.2px;
    line-height:1;
    color:var(--nvis-dim);
    text-shadow:none;
    transition:color .35s ease, text-shadow .35s ease;
  }
  body[data-profile="jet"]:not(.engine-live) #batFace .odo-digits,
  body[data-profile="jet"]:not(.engine-live) #tripReset .odo-digits{
    background:linear-gradient(180deg, #020301 0%, #070806 100%);
    box-shadow:
      0 1px 0 rgba(180,170,120,.04),
      inset 0 3px 7px rgba(0,0,0,.92),
      inset 0 0 0 1px #000;
  }
  /* Live — soft phosphor (engine on lights both readouts) */
  body.engine-live[data-profile="jet"] #batVal,
  body.engine-live[data-profile="jet"] #tripVal{
    color:var(--nvis-hot);
    text-shadow:0 0 8px color-mix(in srgb, var(--nvis) 32%, transparent);
  }
  body.engine-live[data-profile="jet"] #batFace .odo-digits,
  body.engine-live[data-profile="jet"] #tripReset .odo-digits{
    background:
      radial-gradient(ellipse at 50% 75%,
        color-mix(in srgb, var(--nvis) 14%, transparent) 0%,
        transparent 70%),
      linear-gradient(180deg, #020301 0%, #070806 100%);
    box-shadow:
      0 1px 0 rgba(180,170,120,.04),
      0 0 12px color-mix(in srgb, var(--nvis) 12%, transparent),
      inset 0 3px 7px rgba(0,0,0,.9),
      inset 0 0 0 1px #000,
      inset 0 0 14px color-mix(in srgb, var(--nvis) 10%, transparent);
  }
  /* F/A-18 — NVIS caution amber (not green) when tank ≤20%. */
  body[data-profile="jet"] #batFace.low #batVal{
    color:#d4a017;
    text-shadow:0 0 8px rgba(212,160,23,.45);
  }
  body[data-profile="jet"] .odo-unit,
  body[data-profile="jet"] #tripUnit{
    color:#5c5840;
    font-size:var(--fs-unit);
    letter-spacing:1.2px;
  }
  body.engine-live[data-profile="jet"] #tripUnit{
    color:color-mix(in srgb, var(--nvis) 45%, #4a4838);
  }
  body[data-profile="jet"] #tripReset:active .odo-sub{
    color:var(--nvis-hot);
    text-shadow:none;
  }

  /*
   * Harley — floating Softail LCDs (approach A).
   * No chrome bay plate — IGN + two green windows on black, like the hub LCDs.
   */
  body[data-profile="harley"] .odo-row{
    justify-content:center; gap:12px;
    padding:4px 8px 2px;
    border:0; border-radius:0;
    background:transparent; box-shadow:none;
  }
  /* Fixed IGN slot — Start→On/Run/Cut used to shrink the column and
     slide the centered Fuel/Trip windows left. */
  body[data-profile="harley"] .odo-row > #engStart{
    flex:0 0 72px;
    box-sizing:border-box; width:72px; min-width:72px; max-width:72px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; min-height:0; padding:4px 6px;
    border:0; margin:0;
  }
  body[data-profile="harley"] .odo-row > #batFace,
  body[data-profile="harley"] .odo-row > #tripReset{
    flex:0 0 112px;
    box-sizing:border-box; width:112px; min-width:112px; max-width:112px;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(28px,1fr) auto;
    gap:2px;
    padding:6px 12px 5px 10px;
    justify-items:stretch; align-items:center;
    text-align:right;
    border-radius:3px;
    border:1px solid #1e2a24;
    background:linear-gradient(180deg, #0a120e 0%, #060a08 100%);
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,.8),
      inset 0 0 0 1px rgba(0,0,0,.4);
  }
  body[data-profile="harley"] #engStart .eng-label,
  body[data-profile="harley"] #engStart .eng-state{
    box-sizing:border-box; width:100%; margin:0; text-align:center;
    color:#8a7a5a; font-size:var(--fs-label); font-weight:700; letter-spacing:1.8px;
    text-transform:uppercase; line-height:1;
    overflow:hidden; white-space:nowrap;
  }
  body[data-profile="harley"] #batFace .odo-label,
  body[data-profile="harley"] #tripReset .odo-label{
    display:inline-flex; align-items:center; justify-content:flex-start; gap:5px;
    width:100%; margin:0; min-height:0;
    color:#5a7a68; font-size:var(--fs-label); font-weight:700; letter-spacing:1.6px;
    text-transform:uppercase; line-height:1; text-align:left;
  }
  body[data-profile="harley"] #batFace .odo-sub,
  body[data-profile="harley"] #tripReset .odo-sub{
    display:block; width:100%; margin:0; min-height:0;
    color:#4a6a58; font-size:var(--fs-micro); font-weight:700; letter-spacing:1.4px;
    text-transform:uppercase; line-height:1; text-align:right;
  }
  body[data-profile="harley"] #batFace .odo-label svg,
  body[data-profile="harley"] #tripReset .odo-label svg{
    width:13px; height:13px; stroke:#6a8a78; color:#6a8a78; opacity:1;
  }
  body[data-profile="harley"] #engStart .eng-switch{ margin:2px 0; }
  body[data-profile="harley"] #engStart.on .eng-state{ color:#e8b86d; }
  body[data-profile="harley"] #batFace .odo-digits,
  body[data-profile="harley"] #tripReset .odo-digits{
    box-sizing:border-box;
    width:100%; max-width:none; min-width:0; min-height:32px;
    margin:0; padding:0;
    display:flex; align-items:baseline; justify-content:flex-end; gap:5px;
    justify-self:stretch;
    border:0; background:transparent; box-shadow:none;
    text-align:right;
  }
  body[data-profile="harley"] #batVal,
  body[data-profile="harley"] #tripVal{
    font-style:normal; font-size:var(--fs-digit); font-weight:700; letter-spacing:1.2px;
    line-height:1; color:#7dffb0;
    font-variant-numeric:tabular-nums;
    text-align:right;
    transition:color .35s ease;
  }
  body[data-profile="harley"] #batVal,
  body[data-profile="harley"] #tripVal{ color:#3a5a48; text-shadow:none; }
  body.engine-live[data-profile="harley"] #batVal,
  body.engine-live[data-profile="harley"] #tripVal{ color:#7dffb0; text-shadow:none; }
  /* Softail — warm copper-red fuel warn on gold LCD. */
  body[data-profile="harley"] #batFace.low #batVal{
    color:#e07050;
    text-shadow:0 0 12px rgba(224,112,80,.4);
  }
  body[data-profile="harley"] .odo-unit,
  body[data-profile="harley"] #tripUnit{
    color:#4a6a58; font-size:var(--fs-unit); letter-spacing:1px;
  }
  body.engine-live[data-profile="harley"] #tripUnit{ color:#6a8a78; }
  body[data-profile="harley"] #tripReset:active .odo-sub{ color:#e8b86d; }

  /* Superbike — bottom race bar flush under tach (mirrors top bar) */
  body[data-profile="four"] .odo-row{
    justify-content:space-between; gap:0;
    padding:7px 10px 6px;
    border:0; border-radius:0;
    background:linear-gradient(180deg, #121018 0%, #08060a 100%);
    box-shadow:
      inset 0 2px 0 #ff7a4d,
      inset 0 3px 0 rgba(0,0,0,.45),
      inset 0 -1px 0 rgba(255,122,77,.2);
  }
  body[data-profile="four"] .odo-row > #engStart,
  body[data-profile="four"] .odo-row > #batFace,
  body[data-profile="four"] .odo-row > #tripReset{
    flex:1 1 0; padding:0 8px;
  }
  body[data-profile="four"] .odo-row > #batFace,
  body[data-profile="four"] .odo-row > #tripReset{
    border-left:1px solid rgba(255,122,77,.22);
  }
  body[data-profile="four"] #engStart .eng-label,
  body[data-profile="four"] #engStart .eng-state,
  body[data-profile="four"] #batFace .odo-label,
  body[data-profile="four"] #tripReset .odo-label,
  body[data-profile="four"] #batFace .odo-sub,
  body[data-profile="four"] #tripReset .odo-sub{
    color:#a07060; letter-spacing:2.2px;
  }
  body[data-profile="four"] #batFace .odo-label svg{
    width:11px; height:11px; stroke:#ff7a4d; color:#ff7a4d; opacity:1;
    fill:none; display:block;
    transform:translateY(-1.5px);
    filter:drop-shadow(0 0 3px rgba(255,122,77,.4));
  }
  body[data-profile="four"] #tripReset .odo-label svg{ display:none; }
  body[data-profile="four"] #engStart.on .eng-state{ color:#ff7a4d; }
  body[data-profile="four"] #batVal,
  body[data-profile="four"] #tripVal{ font-size:var(--fs-digit); font-weight:700; letter-spacing:1.2px; }
  body[data-profile="four"] #batVal,
  body[data-profile="four"] #tripVal{ color:#6a6058; text-shadow:none; }
  body.engine-live[data-profile="four"] #batVal,
  body.engine-live[data-profile="four"] #tripVal{
    color:#ff9a6a; text-shadow:0 0 8px rgba(255,122,77,.25);
  }
  /* Superbike — race hot coral on orange cluster. */
  body[data-profile="four"] #batFace.low #batVal{
    color:#ff6b4a;
    text-shadow:0 0 14px rgba(255,107,74,.5);
  }
  body[data-profile="four"] .odo-unit,
  body[data-profile="four"] #tripUnit{ color:#7a6058; font-size:var(--fs-unit); letter-spacing:1.2px; }
  body.engine-live[data-profile="four"] #tripUnit{ color:#a07060; }
  body[data-profile="four"] #tripReset:active .odo-sub{ color:#ff7a4d; }

  /*
   * Hyper EV — quiet under-dial strip (gauge stays the hero).
   * No mint plate / glow tiles — floating stations + soft hairlines only.
   */
  body[data-profile="ev"] .odo-row{
    justify-content:space-between; gap:0;
    width:100%; max-width:100%;
    padding:6px 4px 4px;
    border:0; border-radius:0;
    background:transparent; box-shadow:none;
  }
  body[data-profile="ev"] .odo-row > #engStart,
  body[data-profile="ev"] .odo-row > #batFace,
  body[data-profile="ev"] .odo-row > #tripReset{
    flex:1 1 0; min-width:0; min-height:0;
    display:grid;
    grid-template-rows:16px 40px 15px;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
    padding:4px 10px;
    justify-items:center; align-items:center; text-align:center;
    border:0; border-radius:0;
    background:transparent; box-shadow:none;
  }
  body[data-profile="ev"] .odo-row > #batFace,
  body[data-profile="ev"] .odo-row > #tripReset{
    border-left:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  }
  body[data-profile="ev"] #engStart{
    gap:4px; min-width:0; min-height:0; align-items:stretch;
  }
  body[data-profile="ev"] #engStart .eng-switch{
    margin:0; justify-self:center; align-self:center;
  }
  body[data-profile="ev"] #engStart .eng-label,
  body[data-profile="ev"] #engStart .eng-state{
    justify-self:stretch;
  }
  body[data-profile="ev"] #engStart .eng-label,
  body[data-profile="ev"] #engStart .eng-state,
  body[data-profile="ev"] #batFace .odo-label,
  body[data-profile="ev"] #tripReset .odo-label,
  body[data-profile="ev"] #batFace .odo-sub,
  body[data-profile="ev"] #tripReset .odo-sub{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    width:100%; margin:0; min-height:0;
    color:color-mix(in srgb, var(--accent) 38%, #6a8078);
    font-size:var(--fs-label); font-weight:600; letter-spacing:1.8px;
    text-transform:uppercase; line-height:1;
  }
  body[data-profile="ev"] #batFace .odo-label svg{
    width:12px; height:12px; stroke:color-mix(in srgb, var(--accent) 70%, #6a8078);
    color:color-mix(in srgb, var(--accent) 70%, #6a8078); opacity:.9;
    filter:none;
  }
  body[data-profile="ev"] #tripReset .odo-label svg{ display:none; }
  body[data-profile="ev"] #engStart.on .eng-state{ color:var(--accent); }
  body[data-profile="ev"] #batFace .odo-digits,
  body[data-profile="ev"] #tripReset .odo-digits{
    box-sizing:border-box; width:100%; height:40px; margin:0; padding:0;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:0; background:transparent; box-shadow:none;
  }
  body[data-profile="ev"] #batVal,
  body[data-profile="ev"] #tripVal{
    font-style:normal; font-size:var(--fs-digit); font-weight:700; letter-spacing:1.2px;
    line-height:1;
    transition:color .35s ease, text-shadow .35s ease;
  }
  body[data-profile="ev"] #batVal,
  body[data-profile="ev"] #tripVal{
    color:color-mix(in srgb, var(--accent) 28%, #4a6058); text-shadow:none;
  }
  body.engine-live[data-profile="ev"] #batVal,
  body.engine-live[data-profile="ev"] #tripVal{
    color:color-mix(in srgb, var(--accent) 85%, #a8e8d0);
    text-shadow:0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  /* Hyper EV — amber low-SOC (breaks mint accent, readable outdoors). */
  body[data-profile="ev"] #batFace.low #batVal{
    color:#ff9a3c;
    text-shadow:0 0 14px rgba(255,154,60,.5);
  }
  body[data-profile="ev"] .odo-unit,
  body[data-profile="ev"] #tripUnit{
    color:color-mix(in srgb, var(--accent) 32%, #5a7068); font-size:var(--fs-unit);
  }
  body.engine-live[data-profile="ev"] #tripUnit{
    color:color-mix(in srgb, var(--accent) 45%, #5a7068);
  }
  body[data-profile="ev"] #tripReset:active .odo-sub{ color:var(--accent); }

  /*
   * AVAS — invisible futuristic strip: no plate, no wells — just floating
   * labels / hardware / digits with a whisper of cyan hairline dividers.
   */
  body[data-profile="avas"] .odo-row{
    justify-content:space-between; gap:0;
    padding:6px 4px 4px;
    border:0; border-radius:0;
    background:transparent; box-shadow:none;
  }
  body[data-profile="avas"] .odo-row > #engStart,
  body[data-profile="avas"] .odo-row > #batFace,
  body[data-profile="avas"] .odo-row > #tripReset{
    flex:1 1 0; min-width:0; min-height:0;
    display:grid;
    grid-template-rows:16px 40px 15px;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    padding:6px 10px;
    justify-items:center; align-items:center; text-align:center;
    border:0; border-radius:0;
    background:transparent; box-shadow:none;
  }
  body[data-profile="avas"] .odo-row > #batFace,
  body[data-profile="avas"] .odo-row > #tripReset{
    border-left:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
  body[data-profile="avas"] #engStart{
    gap:6px; min-width:0; min-height:0; align-items:stretch;
  }
  body[data-profile="avas"] #engStart .eng-switch{
    margin:0; justify-self:center; align-self:center;
  }
  body[data-profile="avas"] #engStart .eng-label,
  body[data-profile="avas"] #engStart .eng-state{
    justify-self:stretch;
  }
  body[data-profile="avas"] #engStart .eng-label,
  body[data-profile="avas"] #engStart .eng-state,
  body[data-profile="avas"] #batFace .odo-label,
  body[data-profile="avas"] #tripReset .odo-label,
  body[data-profile="avas"] #batFace .odo-sub,
  body[data-profile="avas"] #tripReset .odo-sub{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    width:100%; margin:0; min-height:0;
    color:color-mix(in srgb, var(--accent) 35%, #8a94a4);
    font-size:var(--fs-label); font-weight:600; letter-spacing:1.6px;
    text-transform:uppercase; line-height:1;
  }
  /* Defensive: keep sub row height if Connect text is cleared. */
  body[data-profile="avas"] #batVolts:empty{
    display:block; min-height:13px; visibility:hidden;
  }
  body[data-profile="avas"] #batFace .odo-label svg{
    width:13px; height:13px; opacity:.95;
    stroke:color-mix(in srgb, var(--accent) 70%, #8a94a4);
    color:color-mix(in srgb, var(--accent) 70%, #8a94a4);
  }
  body[data-profile="avas"] #tripReset .odo-label svg{ display:none; }
  body[data-profile="avas"] #engStart.on .eng-state{ color:var(--accent); }
  body[data-profile="avas"] #batFace .odo-digits,
  body[data-profile="avas"] #tripReset .odo-digits{
    box-sizing:border-box; width:100%; height:40px; margin:0; padding:0;
    display:flex; align-items:center; justify-content:center; gap:3px;
    border:0; background:transparent; box-shadow:none;
  }
  body[data-profile="avas"] #batVal,
  body[data-profile="avas"] #tripVal{
    font-style:normal; font-size:var(--fs-digit); font-weight:700; letter-spacing:1.2px;
    line-height:1;
    transition:color .35s ease;
  }
  body[data-profile="avas"] #batVal,
  body[data-profile="avas"] #tripVal{ color:#6a7484; text-shadow:none; }
  body.engine-live[data-profile="avas"] #batVal,
  body.engine-live[data-profile="avas"] #tripVal{
    color:color-mix(in srgb, var(--accent) 80%, #a8b4c4); text-shadow:none;
  }
  /* AVAS — coral warn against cyan strip (not purple). */
  body[data-profile="avas"] #batFace.low #batVal{
    color:#ff7a52;
    text-shadow:0 0 14px rgba(255,122,82,.45);
  }
  body[data-profile="avas"] .odo-unit,
  body[data-profile="avas"] #tripUnit{ color:#6a7484; font-size:var(--fs-unit); }
  body.engine-live[data-profile="avas"] #tripUnit{
    color:color-mix(in srgb, var(--accent) 40%, #6a7484);
  }
  body[data-profile="avas"] #tripReset:active .odo-sub{ color:var(--accent); }

  .odo-digits{
    display:flex; align-items:baseline; justify-content:center; gap:3px;
    font-variant-numeric:tabular-nums;
    min-height:20px; line-height:1;
  }
  /* Harley LCD values — after base .odo-digits so right-align always wins. */
  body[data-profile="harley"] #batFace .odo-digits,
  body[data-profile="harley"] #tripReset .odo-digits{
    width:100%; justify-content:flex-end; text-align:right;
  }
  body[data-profile="harley"] #batVal,
  body[data-profile="harley"] #tripVal{
    text-align:right;
  }
  #batVal, #tripVal{
    font-family:var(--font-gauge);
    font-style:italic; font-weight:700; font-size:var(--fs-digit); line-height:1; letter-spacing:1.2px;
    color:var(--accent);
    text-shadow:0 0 10px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  /* Default low-SOC ≤20% — coral; profile blocks above override. */
  #batFace.low #batVal{ color:var(--hot); text-shadow:0 0 16px color-mix(in srgb, var(--hot) 55%, transparent); }
  /* Vespa — classic cluster fuel-warning red on chrome UI. */
  body[data-profile="vespa"] #batFace.low #batVal{
    color:#c42820;
    text-shadow:0 0 12px rgba(196,40,32,.4);
  }
  .odo-unit, #tripUnit{
    font-family:var(--font-gauge);
    font-size:var(--fs-unit); font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--dim);
  }
  #batHint{
    display:none;
    font-size:10px; font-weight:600; letter-spacing:.2px;
    color:var(--dim); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #batHint.show{ display:block; }

  /* Engine sound — same control chrome + type as old Connect battery button */
  #soundBtn{
    flex:none; width:100%; height:44px; border-radius:11px; cursor:pointer;
    border:1px solid var(--line2); background:var(--panel2); color:var(--accent);
    font-family:var(--font-ui); font-style:italic; font-weight:700;
    font-size:var(--fs-btn); letter-spacing:1px; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:color .4s, border-color .4s;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }
  #soundBtn small,
  #soundBtnTxt{
    font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  }
  #soundBtn small{ color:var(--dim); }
  #soundBtn[aria-expanded="true"]{ border-color:var(--accent); }
  #soundBtn:active{ transform:translateY(1px); }

  /* Shared Done chrome for Settings / Sound / paywall (title left, Done top-right). */
  .dlg-head,
  .sheet-head,
  .sound-pop-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px;
  }
  .dlg-head{ margin:0 0 10px; }
  .dlg-head h2{
    font-family:var(--font-ui); font-style:italic; font-weight:700; font-size:18px;
    letter-spacing:.5px; margin:0; text-align:left; color:var(--ink);
  }
  .dlg-done,
  #sheetDone,
  #soundDone{
    border:none; background:none; color:var(--accent); cursor:pointer;
    font-family:var(--font-ui); font-weight:700; font-style:italic; font-size:16px; letter-spacing:.5px;
    min-height:44px; padding:10px 8px; flex:none;
  }

  /* Confirm / info — bottom actions (Battery help Done, Reset trip Cancel/Reset). */
  #confirm{
    display:none; position:fixed; inset:0; z-index:60;
    background:rgba(5,7,10,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:24px;
  }
  #confirm.show{ display:flex; }
  #confirm .dialog,
  #infoDlg .dialog{
    width:min(340px,100%); background:var(--panel); border:1px solid var(--line2);
    border-radius:16px; padding:20px 18px 16px; text-align:left;
    box-shadow:0 20px 40px -16px rgba(0,0,0,.7);
  }
  #confirm h2,
  #infoDlg h2{
    font-family:var(--font-ui); font-style:italic; font-weight:700; font-size:18px;
    letter-spacing:.5px; margin:0 0 10px; text-align:center; color:var(--ink);
  }
  #confirm .dlg-body,
  #infoDlg .dlg-body{
    font-family:var(--font-ui); font-size:13px; line-height:1.55; color:var(--dim);
    display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
  }
  #confirm .dlg-body .mode,
  #infoDlg .dlg-body .mode{
    border-left:2px solid var(--accent); padding-left:10px;
  }
  #confirm .dlg-body b,
  #infoDlg .dlg-body b{ color:var(--ink); font-weight:700; }
  #confirm .dlg-body a,
  #infoDlg .dlg-body a,
  details .body a{
    color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  }
  .dlg-lede{
    margin:0 0 4px; font-family:var(--font-ui); font-size:13px; line-height:1.55; color:var(--dim);
  }
  .dlg-steps{
    margin:0 0 8px; padding-left:1.25em;
    font-family:var(--font-ui); font-size:13px; line-height:1.55; color:var(--dim);
    display:flex; flex-direction:column; gap:6px;
  }
  .dlg-steps li{ padding-left:2px; }
  .dlg-steps b{ color:var(--ink); font-weight:700; }
  details .body .dlg-lede{ margin-bottom:2px; }
  details .body .dlg-steps{ margin-bottom:4px; }
  #confirm .actions,
  #infoDlg .actions{ display:flex; gap:10px; }
  #confirm .actions button,
  #infoDlg .actions button{
    flex:1; height:44px; border-radius:12px; font-family:var(--font-ui); font-weight:700;
    font-style:italic; letter-spacing:1px; font-size:14px; cursor:pointer;
  }
  #confirmCancel{
    border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  }
  #confirmOk{
    border:1px solid var(--hot); background:rgba(255,77,46,.16); color:#ffb3a6;
  }
  #infoDone{
    border:1px solid var(--accent); background:rgba(92,239,255,.14); color:var(--accent);
  }
  #infoDone[hidden]{ display:none !important; }
  .dlg-choices{
    display:flex; flex-direction:column; gap:8px; margin-top:14px;
  }
  .dlg-choices button{
    width:100%; height:44px; border-radius:12px; font-family:var(--font-ui); font-weight:700;
    font-style:italic; letter-spacing:1px; font-size:14px; cursor:pointer;
    border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  }
  .dlg-choices button.primary{
    border:1px solid var(--accent); background:rgba(92,239,255,.14); color:var(--accent);
  }

  #infoDlg{
    display:none; position:fixed; inset:0; z-index:60;
    background:rgba(5,7,10,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:24px;
  }
  #infoDlg.show{ display:flex; }

  .preview-chip{
    display:inline-block; margin-top:8px; font-family:var(--font-ui);
    font-size:12px; letter-spacing:.04em; color:var(--accent); font-weight:600;
  }
  .preview-chip[hidden]{ display:none !important; }

  #accountPanel .row output{
    width:auto; flex:1; min-width:0; text-align:right;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #accountPanel button{
    width:100%; height:44px; border-radius:12px; margin-top:8px;
    font-family:var(--font-ui); font-weight:700; font-style:italic;
    letter-spacing:.5px; font-size:13px; cursor:pointer;
    border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  }
  #accountSubscribe{
    border-color:var(--accent); background:rgba(79,216,235,.12); color:var(--accent);
  }
  .chip{
    background:transparent; border:1px solid var(--line); border-radius:14px; padding:14px 12px;
    text-align:left; cursor:pointer; color:var(--dim); font-family:var(--font-ui); min-height:56px;
  }
  .chip b{ display:block; font-style:italic; font-weight:700; font-size:14px; letter-spacing:.4px; }
  .chip span{ font-size:var(--fs-unit); color:var(--faint); }
  .chip.on{
    border-color:var(--line2);
    background:var(--panel2);
    box-shadow:none;
  }
  .chip.on b{ color:var(--ink); }

  /* Demo strip — only when Demo is on; sound picker lives in the top-right overlay */
  #demoPanel{
    display:none; flex:none; flex-direction:row; flex-wrap:nowrap; gap:10px; align-items:center;
    background:var(--panel); border:1px dashed var(--line2); border-radius:12px; padding:10px 12px;
  }
  #demoPanel.show{ display:flex; }
  #demoPanel .row{ flex:1; min-width:0; margin:0; gap:8px; flex-wrap:nowrap; }
  #demoPanel label{ width:auto; color:var(--dim); font-size:var(--fs-unit); flex:none; }
  #demoPanel output{ width:auto; min-width:4.5em; font-size:13px; color:var(--ink); flex:none; }
  #demoPanel input[type=range]{ min-width:0; height:40px; }
  #autoBtn, #demoLowBattBtn{
    border:1px solid var(--line2); background:var(--panel2); color:var(--ink); border-radius:12px;
    font-family:var(--font-ui); font-weight:700; font-style:italic; letter-spacing:1px; font-size:13px;
    min-height:44px; padding:0 14px; cursor:pointer; flex:none; white-space:nowrap;
  }
  #autoBtn.on, #demoLowBattBtn.on{
    border-color:var(--accent); color:var(--accent); box-shadow:0 0 14px -6px var(--accent);
  }
  #demoLowBattBtn.on{
    border-color:var(--hot); color:var(--hot); box-shadow:0 0 14px -6px var(--hot);
  }

  /* settings bottom sheet */
  #sheet{
    position:fixed; inset:0; z-index:45; pointer-events:none;
  }
  #sheet.open{ pointer-events:auto; }
  .sheet-backdrop{
    position:absolute; inset:0; background:rgba(5,7,10,.55);
    opacity:0; transition:opacity .28s ease;
  }
  #sheet.open .sheet-backdrop{ opacity:1; }
  .sheet-panel{
    position:absolute; left:50%; bottom:0;
    width:min(460px, 100%);
    max-height:min(88dvh, 720px);
    background:var(--panel); border:1px solid var(--line2); border-bottom:none;
    border-radius:20px 20px 0 0;
    display:flex; flex-direction:column; min-height:0;
    transform:translate(-50%, 104%);
    transition:transform .32s cubic-bezier(.22,.9,.3,1);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -20px 50px -24px rgba(0,0,0,.75);
  }
  #sheet.open .sheet-panel{ transform:translate(-50%, 0); }
  .sheet-handle{
    position:relative; width:42px; height:4px; border-radius:999px; background:var(--line2);
    margin:10px auto 4px; flex:none; cursor:grab; touch-action:none;
  }
  /* Fat hit target — the visible bar is only 4px tall. */
  .sheet-handle::before{
    content:""; position:absolute; left:50%; top:50%;
    width:120px; height:36px; transform:translate(-50%, -50%);
  }
  .sheet-handle:active{ cursor:grabbing; }
  .sheet-head{
    padding:4px 16px 10px; flex:none;
    cursor:grab; touch-action:none;
  }
  .sheet-head:active{ cursor:grabbing; }
  .sheet-head h2{
    font-style:italic; font-weight:700; font-size:18px; letter-spacing:.5px; margin:0;
  }
  #sheetDone{ touch-action:auto; }
  .sheet-body{
    overflow:auto; -webkit-overflow-scrolling:touch;
    padding:0 14px 18px; display:flex; flex-direction:column; gap:10px; min-height:0;
  }

  /* controls inside sheet */
  .panel{ background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
  .row{ display:flex; align-items:center; gap:12px; min-height:34px; }
  .row label{ font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--dim); width:96px; flex:none; }
  .row output{ font-size:13px; font-weight:700; color:var(--ink); width:74px; text-align:right; flex:none; font-style:italic; }
  input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:36px; background:transparent; }
  input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:3px; background:var(--line2); }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:32px; height:32px; border-radius:50%; margin-top:-13.5px;
    background:var(--panel); border:2px solid var(--accent); box-shadow:0 0 10px -2px var(--accent);
  }
  .switchrow{ display:flex; align-items:center; justify-content:space-between; min-height:44px; }
  .switchrow span{ font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--dim); }
  .switch{ position:relative; width:56px; height:34px; flex:none; }
  .switch input{ opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; }
  .switch i{
    position:absolute; inset:0; border-radius:999px; background:var(--line); transition:background .2s; pointer-events:none;
  }
  .switch i::after{
    content:""; position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%;
    background:var(--dim); transition:transform .2s, background .2s;
  }
  .switch input:checked + i{ background:color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .switch input:checked + i::after{ transform:translateX(22px); background:var(--ink); }
  .segrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
  .segrow > span{ font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--dim); flex:none; }
  .seg{
    display:flex; flex:1; max-width:200px; margin-left:auto;
    border:1px solid var(--line2); border-radius:10px; overflow:hidden; background:var(--panel);
  }
  .seg button{
    flex:1; height:34px; border:0; background:transparent; color:var(--dim);
    font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:0.5px;
    cursor:pointer;
  }
  .seg button.on{
    background:color-mix(in srgb, var(--accent) 22%, var(--panel2));
    color:var(--ink);
  }

  /* Accordion rows: hit target is the full summary bar (not just the label text).
     WebKit only toggles on summary’s text box unless a stretched layer covers the row. */
  details{
    background:transparent; border:0; border-radius:0; padding:0;
  }
  summary{
    position:relative;
    display:flex; justify-content:space-between; align-items:center;
    width:100%; box-sizing:border-box;
    margin:0; padding:12px 14px;
    background:var(--panel2); border:1px solid var(--line); border-radius:14px;
    cursor:pointer; font-size:13px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; color:var(--ink);
    list-style:none; -webkit-user-select:none; user-select:none;
  }
  summary::-webkit-details-marker{ display:none; }
  summary::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  }
  summary::after{
    content:"+"; position:relative; z-index:1;
    color:var(--accent); font-size:16px; font-weight:700; line-height:1;
  }
  details[open] summary{
    border-radius:14px 14px 0 0;
    border-bottom-color:transparent;
  }
  details[open] summary::after{ content:"–"; }
  details .body{
    margin:0; padding:0 14px 12px;
    background:var(--panel2); border:1px solid var(--line); border-top:0;
    border-radius:0 0 14px 14px;
    font-family:var(--font-ui); font-size:13px; line-height:1.55; color:var(--dim);
    display:flex; flex-direction:column; gap:8px;
  }
  details .body b{ color:var(--ink); }
  details .body .mode{ border-left:2px solid var(--accent); padding-left:10px; }

  footer{
    text-align:center; font-size:11px; color:var(--faint); letter-spacing:.3px;
    line-height:1.45; padding:4px 0 8px;
  }
  footer a{ color:var(--dim); text-decoration:underline; }
  footer a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  button:focus-visible, input:focus-visible, summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:14px; }

  /* Tall phones: keep dial large; spare height sits between odo and actions. */
  /* Short viewports: shrink the square dial so chrome + odo + actions still fit. */
  @media (max-height: 740px){
    .app{ --app-edge:6px; gap:6px; }
    .ride{ padding-top:2px; gap:8px; }
    .cluster{
      width:min(100%, calc(100dvh - 268px));
      align-self:center;
    }
    .gauge-block{ gap:8px; }
  }
  @media (max-height: 640px){
    .app{ --app-edge:4px; gap:4px; }
    .cluster{ width:min(100%, calc(100dvh - 248px)); }
    .pill{ padding:4px 6px; font-size:9px; }
    #sheetBtn{ width:40px; height:40px; border-radius:10px; }
    #sheetBtn svg{ width:20px; height:20px; }
  }

  @media (prefers-reduced-motion: reduce){
    .sheet-backdrop, .sheet-panel{ transition:none !important; }
    *{ transition:none !important; }
  }