/* ---- Eco Efficiency HUD ---- */
/* All tuning knobs (colors, thresholds-adjacent glow/animation values, HUD
   dimensions, breakpoints) are centralized here as CSS custom properties —
   see the final report for exactly which of these to touch for what. */

:root {
  /* Colors — instrument-grade, matching style.css's design tokens.
     This panel previously carried its own saturated neon palette and kept the
     old look after the main HUD was rebuilt, so the two halves of the screen
     disagreed. Surfaces, borders and text now inherit the app's tokens; only
     the efficiency colours stay local, because here green/amber/red carry
     MEANING (how efficiently you're driving) rather than decoration. They are
     desaturated from the originals so they read as instrument lighting rather
     than neon, and hold contrast against the graphite panel. */
  --eco-green: #4ed9a4;
  --eco-green-glow: rgba(78, 217, 164, 0.28);
  --eco-blue: #6aa6f5;
  --eco-blue-glow: rgba(106, 166, 245, 0.28);
  --eco-yellow: #f2c14b;
  --eco-orange: #f2a93b;
  --eco-red: #e2564d;
  --eco-panel-bg: var(--surface);
  --eco-panel-border: var(--hairline);
  --eco-text-dim: var(--text-dim);
  --eco-text-bright: var(--text);

  /* Glow / animation. Pulled well down: blurred glow softens edges and costs
     legibility on a display read at a glance from the driver's seat. */
  --eco-glow-intensity: 0.22;
  --eco-anim-fast: 180ms;
  --eco-anim-medium: 420ms;
  --eco-anim-slow: 900ms;

  /* Dimensions */
  --eco-hud-width: 258px;
  --eco-hud-edge-gap: 20px;
  --eco-ring-size: 132px;
}

/* Daytime theme — see style.css's own body.theme-day block for the
   reasoning; same idea applied to this panel's own color variables so it
   doesn't stay dark-themed while the rest of the app goes light. */
body.theme-day {
  --eco-green: #0a7d4f;
  --eco-green-glow: rgba(10, 125, 79, 0.22);
  --eco-blue: #1e63c9;
  --eco-blue-glow: rgba(30, 99, 201, 0.22);
  --eco-yellow: #9a6b00;
  --eco-orange: #a86000;
  --eco-red: #b3241a;
  --eco-panel-bg: var(--surface);
  --eco-panel-border: var(--hairline);
  --eco-text-dim: var(--text-dim);
  --eco-text-bright: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --eco-anim-fast: 0ms;
    --eco-anim-medium: 0ms;
    --eco-anim-slow: 0ms;
  }
}

/* ================= Panel shell ================= */

.eco-hud {
  position: fixed;
  top: 50%;
  right: var(--eco-hud-edge-gap);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: stretch;
  max-height: 88vh;
  max-height: 88dvh;
}

.eco-hud-toggle {
  flex: 0 0 auto;
  /* 26px wide with a bare chevron was the problem: under the comfortable
     touch target horizontally, and nothing to say what it opens. */
  width: 44px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0;
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--eco-panel-border);
  border-right: none;
  background: var(--eco-panel-bg);
  color: var(--eco-green);
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  min-height: 92px; /* tall enough to hit easily from the driver's seat */
}

/* Vertical ECO label down the edge of the pull tab. */
.eco-hud-toggle-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

.eco-hud-toggle-chevron {
  font-size: 1rem;
  line-height: 1;
  color: var(--eco-green);
}

.eco-hud-toggle:hover .eco-hud-toggle-label,
.eco-hud-toggle:focus-visible .eco-hud-toggle-label {
  color: var(--text);
}

.eco-hud-panel {
  width: var(--eco-hud-width);
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--eco-panel-bg);
  border: 1px solid var(--eco-panel-border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transition: transform var(--eco-anim-medium) ease, opacity var(--eco-anim-medium) ease;
}

.eco-hud.collapsed .eco-hud-panel {
  transform: translateX(calc(100% + 12px));
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.eco-hud.collapsed .eco-hud-toggle {
  color: var(--eco-text-dim);
}

/* ================= Header + mode picker ================= */

.eco-hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eco-hud-title {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eco-mode-picker {
  display: flex;
  gap: 2px;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 2px;
}

/* Full-size touch targets: these are used on both phones and in-car screens. */
.eco-mode-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 6px 9px;
  border-radius: calc(var(--r-sm) - 2px);
  cursor: pointer;
  min-height: 44px;
  flex: 1 1 0;
  transition: color 0.15s ease, background 0.15s ease;
}

.eco-mode-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.eco-mode-btn.active {
  background: var(--bg);
  color: var(--eco-green);
  box-shadow: inset 0 -2px 0 var(--eco-green);
}

/* ================= Circular Eco Score + MPGe ================= */

.eco-score-ring-wrap {
  position: relative;
  width: var(--eco-ring-size);
  height: var(--eco-ring-size);
  margin: 4px auto 2px;
}

.eco-score-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.eco-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

.eco-ring-fill {
  fill: none;
  stroke: var(--eco-green);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 440; /* 2*pi*70, kept in sync with eco-hud.js's ring radius constant */
  stroke-dashoffset: 440;
  filter: drop-shadow(0 0 calc(10px * var(--eco-glow-intensity)) var(--eco-green-glow));
  transition: stroke var(--eco-anim-medium) ease, stroke-dashoffset var(--eco-anim-medium) ease, filter var(--eco-anim-slow) ease;
}

.eco-ring-fill.improving {
  filter: drop-shadow(0 0 calc(18px * var(--eco-glow-intensity)) var(--eco-green-glow));
}

.eco-score-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
}

/* Data readouts use the same monospaced, tabular face as the speed gauge, so
   the two halves of the screen read as one instrument. */
.eco-mpge-value {
  font-family: var(--font-data);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.eco-mpge-label {
  font-family: var(--font-data);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}

.eco-score-value {
  font-family: var(--font-data);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--eco-green);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.eco-whmi-value {
  font-family: var(--font-data);
  font-size: 0.62rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.eco-estimate-disclosure {
  font-size: 0.56rem;
  color: var(--eco-text-dim);
  text-align: center;
  opacity: 0.85;
  line-height: 1.3;
}

/* ================= Confidence ================= */

.eco-confidence-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--eco-text-dim);
}

.eco-confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eco-text-dim);
  flex: 0 0 auto;
}

.eco-confidence-dot.high { background: var(--eco-green); box-shadow: 0 0 8px var(--eco-green-glow); }
.eco-confidence-dot.medium { background: var(--eco-yellow); box-shadow: 0 0 8px rgba(255, 224, 102, 0.5); }
.eco-confidence-dot.low { background: var(--eco-red); box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); }

/* ================= Live feedback ================= */

.eco-feedback {
  min-height: 22px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--eco-text-bright);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--eco-anim-medium) ease, transform var(--eco-anim-medium) ease;
}

.eco-feedback.visible {
  opacity: 1;
  transform: translateY(0);
}

.eco-feedback[data-tone="warning"] { color: var(--eco-red); }
.eco-feedback[data-tone="good"] { color: var(--eco-green); }

/* ================= Power bar ================= */
/* Two independent fills anchored at a shared center line — the "neutral
   zone" — one growing up (drive demand, green->yellow->orange->red) and one
   growing down (regen, blue). Scaled via transform (GPU-friendly), never via
   animated height/width. */

.eco-power-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.eco-power-bar-label {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--eco-text-dim);
  text-transform: uppercase;
}

.eco-power-bar-track {
  position: relative;
  width: 34px;
  height: 168px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.eco-power-bar-neutral {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.28);
  z-index: 2;
}

.eco-power-bar-fill-drive,
.eco-power-bar-fill-regen {
  position: absolute;
  left: 2px;
  right: 2px;
  will-change: transform;
  transition: transform var(--eco-anim-fast) linear;
  border-radius: 15px;
}

.eco-power-bar-fill-drive {
  top: 2px;
  height: calc(50% - 3px);
  bottom: auto;
  transform-origin: bottom center;
  transform: scaleY(0);
  background: linear-gradient(to top, var(--eco-green) 0%, var(--eco-yellow) 55%, var(--eco-orange) 78%, var(--eco-red) 100%);
}

.eco-power-bar-fill-regen {
  bottom: 2px;
  height: calc(50% - 3px);
  top: auto;
  transform-origin: top center;
  transform: scaleY(0);
  background: var(--eco-blue);
  box-shadow: 0 0 calc(10px * var(--eco-glow-intensity)) var(--eco-blue-glow) inset;
}

/* ================= Trip stats ================= */

.eco-trip-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.eco-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.eco-stat-label {
  font-size: 0.55rem;
  letter-spacing: 0.03em;
  color: var(--eco-text-dim);
}

.eco-stat-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--eco-text-bright);
  font-variant-numeric: tabular-nums;
}

/* ================= Analysis-mode diagnostics ================= */

.eco-analysis {
  font-size: 0.62rem;
  color: var(--eco-text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
}

.eco-analysis-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.eco-analysis-row span:last-child {
  color: var(--eco-text-bright);
  font-variant-numeric: tabular-nums;
}

/* ================= Controls ================= */

.eco-hud-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.eco-hud-controls button {
  flex: 1 1 auto;
  min-height: 44px;
  background: rgba(52, 255, 176, 0.08);
  border: 1px solid rgba(52, 255, 176, 0.3);
  color: var(--eco-green);
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
}

.eco-hud-controls button.danger {
  background: rgba(255, 82, 82, 0.08);
  border-color: rgba(255, 82, 82, 0.35);
  color: var(--eco-red);
}

.eco-hud-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================= Vehicle picker / calibration form ================= */

.eco-flyout {
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Needed: an equal-specificity `display` on the plain class above otherwise
   beats the browser's own default [hidden]{display:none} rule (author CSS
   always wins over the UA stylesheet), so the `hidden` attribute JS sets on
   these flyouts was doing nothing — Badges/Vehicle/Calibration were all
   permanently rendered and stacked in the panel regardless of which one was
   "open", which is what made the panel's scrollable content balloon to
   ~3x its visible height. */
.eco-flyout[hidden] {
  display: none;
}

.eco-flyout label {
  font-size: 0.62rem;
  color: var(--eco-text-dim);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eco-flyout select,
.eco-flyout input[type="number"],
.eco-flyout input[type="text"] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--eco-text-bright);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.74rem;
  min-height: 44px;
}

.eco-flyout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.eco-flyout-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  background: rgba(52, 255, 176, 0.08);
  border: 1px solid rgba(52, 255, 176, 0.3);
  color: var(--eco-green);
  border-radius: 8px;
  padding: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
}

.eco-flyout-actions button.danger {
  background: rgba(255, 82, 82, 0.08);
  border-color: rgba(255, 82, 82, 0.35);
  color: var(--eco-red);
}

.eco-flyout-hint {
  font-size: 0.58rem;
  color: var(--eco-text-dim);
  line-height: 1.3;
}

/* ================= Badges ================= */

.eco-badge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.eco-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.eco-badge-item.earned {
  border-color: rgba(255, 224, 102, 0.4);
  background: rgba(255, 224, 102, 0.06);
}

.eco-badge-item.locked .eco-badge-emoji {
  filter: grayscale(1);
  opacity: 0.45;
}

.eco-badge-emoji {
  font-size: 1.3rem;
  line-height: 1.2;
  flex: 0 0 auto;
}

.eco-badge-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.eco-badge-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--eco-text-bright);
}

.eco-badge-item.locked .eco-badge-label {
  color: var(--eco-text-dim);
}

.eco-badge-desc {
  font-size: 0.62rem;
  color: var(--eco-text-dim);
  line-height: 1.3;
}

.eco-badge-progress {
  margin-top: 3px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.eco-badge-progress-fill {
  height: 100%;
  background: var(--eco-yellow);
  border-radius: 2px;
}

.eco-badge-progress-label {
  font-size: 0.56rem;
  color: var(--eco-text-dim);
  font-variant-numeric: tabular-nums;
}

/* ================= Badge unlock toast ================= */

.badge-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -20px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 14, 24, 0.94);
  border: 1px solid rgba(255, 224, 102, 0.5);
  border-radius: 14px;
  padding: 10px 16px;
  max-width: min(88vw, 320px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 224, 102, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--eco-anim-medium) ease, transform var(--eco-anim-medium) ease;
}

.badge-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.badge-toast-emoji {
  font-size: 1.8rem;
  line-height: 1;
  flex: 0 0 auto;
}

.badge-toast-text {
  font-size: 0.8rem;
  color: var(--eco-text-bright);
  line-height: 1.35;
}

.badge-toast-text strong {
  display: block;
  color: var(--eco-yellow);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .badge-toast { transition: none !important; }
}

/* ================= Minimal mode ================= */

.eco-hud[data-display-mode="minimal"] .eco-hud-panel {
  width: 168px;
  gap: 8px;
}

.eco-hud[data-display-mode="minimal"] .eco-trip-stats,
.eco-hud[data-display-mode="minimal"] .eco-hud-controls,
.eco-hud[data-display-mode="minimal"] .eco-power-bar-label {
  display: none;
}

.eco-hud[data-display-mode="minimal"] .eco-score-ring-wrap {
  width: 84px;
  height: 84px;
}

.eco-hud[data-display-mode="minimal"] .eco-mpge-value {
  font-size: 1.05rem;
}

.eco-hud[data-display-mode="minimal"] .eco-power-bar-track {
  height: 60px;
  width: 22px;
}

/* Analysis diagnostics only render in analysis mode */
.eco-analysis { display: none; }
.eco-hud[data-display-mode="analysis"] .eco-analysis { display: flex; }

/* ================= Mobile: compact horizontal HUD ================= */
/* html.js-narrow instead of @media (max-width: 899px) — see style.css's own
   note on this same switch: Tesla's Drive-mode browser can report an
   accurate window.innerWidth via JS while still visually rendering as if
   the wide/desktop CSS branch were active, so the breakpoint is now driven
   by the JS-measured value (set on <html> by viewport.js) instead of trusting
   this browser's own @media evaluation. */

html.js-narrow .eco-hud {
  /* Anchored top-right instead of the desktop's vertically-centered
     placement: on mobile, .speed-hud already owns the top-center area
     (top:88px) and main's sound controls become a bottom sheet (bottom:0)
     — a bottom- or center-anchored HUD here would cover one or the other.
     Top-right, below the existing .mode-badge, is the one region free of
     both, and the panel's own max-height keeps it from growing into either. */
  top: calc(56px + env(safe-area-inset-top, 0px));
  bottom: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  transform: none;
  max-height: none;
  width: auto;
  flex-direction: row-reverse;
}

html.js-narrow .eco-hud-toggle {
  align-self: flex-start;
  width: 44px;
  height: 52px;
  min-height: 52px;
  padding: 4px 0;
  border-radius: 10px;
  border: 1px solid var(--eco-panel-border);
}

html.js-narrow .eco-hud-toggle-label {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 0.54rem;
  letter-spacing: 0.08em;
}

html.js-narrow .eco-hud-panel {
  width: min(78vw, 300px);
  max-height: min(58vh, 480px);
  max-height: min(58dvh, 480px);
  border-radius: 16px;
  margin-right: 6px;
}

html.js-narrow .eco-flyout select,
html.js-narrow .eco-flyout input[type="number"],
html.js-narrow .eco-flyout input[type="text"] {
  font-size: 16px;
}

html.js-narrow .eco-hud.collapsed .eco-hud-panel {
  transform: translateX(calc(100% + 12px));
}

/* Power bar rotates to horizontal: drive extends right, regen extends left */
html.js-narrow .eco-power-bar-wrap {
  flex-direction: row;
  justify-content: center;
}

html.js-narrow .eco-power-bar-track {
  width: 168px;
  height: 30px;
}

html.js-narrow .eco-power-bar-neutral {
  left: 50%;
  top: 0;
  bottom: 0;
  right: auto;
  width: 2px;
  height: auto;
  transform: translateX(-1px);
}

html.js-narrow .eco-power-bar-fill-drive {
  left: 50%;
  right: 2px;
  top: 2px;
  bottom: 2px;
  height: auto;
  width: calc(50% - 3px);
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(to right, var(--eco-green) 0%, var(--eco-yellow) 55%, var(--eco-orange) 78%, var(--eco-red) 100%);
}

html.js-narrow .eco-power-bar-fill-regen {
  right: 50%;
  left: 2px;
  top: 2px;
  bottom: 2px;
  height: auto;
  width: calc(50% - 3px);
  transform-origin: right center;
  transform: scaleX(0);
}

html.js-narrow .eco-hud-header {
  padding-right: 2px;
}

@media (orientation: landscape) {
  html.js-narrow .eco-hud-panel {
    width: min(50vw, 320px);
    max-height: min(70vh, 380px);
    max-height: min(70dvh, 380px);
  }
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.js-narrow .eco-hud-panel,
  html.js-narrow .eco-hud-toggle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 23, 30, 0.96);
  }

  html.js-narrow body.theme-day .eco-hud-panel,
  html.js-narrow body.theme-day .eco-hud-toggle {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* ================= Reduced motion ================= */

@media (prefers-reduced-motion: reduce) {
  .eco-ring-fill,
  .eco-power-bar-fill-drive,
  .eco-power-bar-fill-regen,
  .eco-hud-panel,
  .eco-feedback {
    transition: none !important;
  }
}