/* WrenchPal v2 design system.
   Loaded after core-css/app.css. Two jobs:
   1. Tokens + components for the new screens (classes start with "v-").
   2. Restyle the reused screens and sheets (3D engine, guide player, Bluetooth, toolbox, parts, recalls)
      so they match: no outlines, filled surfaces, pill buttons, one typeface, color only where it means something.
   Rules: content sits on the background, not in boxes. Lists use hairlines. Sheets slide up. One primary action per screen. */

:root {
  /* palette: dark is the default, like the app */
  --v-bg: #000000;
  --v-surface: #141416;      /* sheets, fields, floating bars */
  --v-surface-2: #1f1f22;    /* secondary buttons, chips */
  --v-surface-3: #2a2a2e;    /* pressed */
  --v-sep: rgba(255, 255, 255, 0.1);
  --v-text: #ffffff;
  --v-text-2: rgba(235, 235, 245, 0.64);
  --v-text-3: rgba(235, 235, 245, 0.4);
  --v-tint: #5bd6f5;         /* the app's cyan, softened: links and selection only */
  --v-on-primary: #000000;
  --v-primary: #ffffff;
  --v-ok: #30d158;
  --v-warn: #ffb340;
  --v-bad: #ff8a4c;
  --v-crit: #ff453a;
  --v-bar: rgba(22, 22, 24, 0.78);
  --v-scrim: rgba(0, 0, 0, 0.55);
  --v-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v-mono: ui-monospace, "SF Mono", "Geist Mono", Menlo, Consolas, monospace;
  --v-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --v-pad: max(20px, env(safe-area-inset-left));
  --v-pad-r: max(20px, env(safe-area-inset-right));
  --v-nav-h: 64px;

  /* map the old app tokens onto the new palette so every reused module follows */
  --bg: var(--v-bg);
  --card: var(--v-surface);
  --card-2: var(--v-surface-2);
  --field: var(--v-surface-2);
  --line: var(--v-sep);
  --line-strong: transparent;
  --text: var(--v-text);
  --text-2: var(--v-text-2);
  --text-3: var(--v-text-3);
  --accent: var(--v-primary);
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-line: transparent;
  --on-accent: var(--v-on-primary);
  --ok: var(--v-ok);   --ok-bg: rgba(48, 209, 88, 0.12);   --ok-line: transparent;
  --warn: var(--v-warn); --warn-bg: rgba(255, 179, 64, 0.12); --warn-line: transparent;
  --bad: var(--v-bad);  --bad-bg: rgba(255, 138, 76, 0.12);  --bad-line: transparent;
  --crit: var(--v-crit); --crit-bg: rgba(255, 69, 58, 0.13); --crit-line: transparent;
  --bar-bg: var(--v-bar);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  --radius: 22px;
  --font: var(--v-font);
  --mono: var(--v-mono);
}
@media (prefers-color-scheme: light) {
  :root {
    --v-bg: #ffffff;
    --v-surface: #f4f4f6;
    --v-surface-2: #ebebef;
    --v-surface-3: #dedee3;
    --v-sep: rgba(60, 60, 67, 0.14);
    --v-text: #000000;
    --v-text-2: rgba(60, 60, 67, 0.72);
    --v-text-3: rgba(60, 60, 67, 0.46);
    --v-tint: #0a7f9f;
    --v-on-primary: #ffffff;
    --v-primary: #000000;
    --v-ok: #1f9d55;
    --v-warn: #b86e00;
    --v-bad: #c4500f;
    --v-crit: #e0352b;
    --v-bar: rgba(250, 250, 252, 0.82);
    --v-scrim: rgba(0, 0, 0, 0.3);
    --accent-soft: rgba(0, 0, 0, 0.05);
    --ok-bg: rgba(31, 157, 85, 0.09); --warn-bg: rgba(184, 110, 0, 0.1);
    --bad-bg: rgba(196, 80, 15, 0.09); --crit-bg: rgba(224, 53, 43, 0.08);
    --shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  }
}

/* ------------------------------------------------------------------ base */
body { font-family: var(--v-font); background: var(--v-bg); letter-spacing: -0.01em; }
h1, h2, h3 { font-family: var(--v-display); font-weight: 700; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--v-tint); outline-offset: 2px; }
.screen { background: var(--v-bg); scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
button { font-family: inherit; }

/* iOS-style push: the new screen slides in over the old one */
.screen.enter-fwd { animation: v-in-fwd 0.48s var(--v-ease) both; z-index: 2; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.35); }
.screen.enter-back { animation: v-in-back 0.48s var(--v-ease) both; }
.screen.enter-fade { animation: v-fade 0.28s ease-out both; }
.screen.leaving { animation: v-out 0.3s ease both; }
.screen.leaving.leave-fwd { animation: v-out-fwd 0.48s var(--v-ease) both; }
.screen.leaving.leave-back { animation: v-out-back 0.48s var(--v-ease) both; z-index: 2; }
@keyframes v-in-fwd { from { transform: translateX(100%); } to { transform: none; } }
@keyframes v-in-back { from { transform: translateX(-28%); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes v-out-fwd { to { transform: translateX(-28%); opacity: 0.6; } }
@keyframes v-out-back { to { transform: translateX(100%); } }
@keyframes v-fade { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes v-out { to { opacity: 0; } }

/* ------------------------------------------------------------------ page + headers */
.v-page {
  max-width: 640px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) var(--v-pad-r) calc(var(--v-nav-h) + 48px + env(safe-area-inset-bottom)) var(--v-pad);
  display: flex; flex-direction: column; gap: 36px;
}
.app.no-tabbar .v-page { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.v-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.v-head { display: flex; flex-direction: column; gap: 6px; }
.v-title { font-size: 34px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 750; }
.v-title.xl { font-size: 44px; letter-spacing: -0.045em; }
.v-sub { font-size: 16px; color: var(--v-text-2); line-height: 1.4; }
.v-back { display: inline-flex; align-items: center; gap: 2px; margin-left: -8px; padding: 8px; border: 0; background: none; color: var(--v-text); font-size: 17px; cursor: pointer; }
.v-back svg { width: 24px; height: 24px; }

/* car switcher (top of Home and Results) */
.v-car { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--v-text-2); font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; }
.v-car svg { width: 16px; height: 16px; opacity: 0.8; }

/* ------------------------------------------------------------------ sections + lists */
.v-sec { display: flex; flex-direction: column; gap: 8px; }
.v-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 22px; letter-spacing: -0.025em; font-weight: 700; }
.v-sec-h small { font-size: 15px; font-weight: 500; color: var(--v-text-3); letter-spacing: 0; }
.v-sec-note { font-size: 15px; color: var(--v-text-2); margin-top: -2px; }
.v-list { display: flex; flex-direction: column; }
.v-row {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 0;
  width: 100%; border: 0; background: none; color: var(--v-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity 0.15s;
}
.v-row:active { opacity: 0.55; }
.v-row + .v-row::before { content: ""; position: absolute; top: 0; left: var(--v-row-inset, 0); right: 0; height: 1px; background: var(--v-sep); transform: scaleY(0.6); }
.v-list.has-icons { --v-row-inset: 46px; }
.v-row-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--v-text); }
.v-row-ic svg { width: 24px; height: 24px; }
.v-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v-row-t { font-size: 17px; line-height: 1.3; font-weight: 500; }
.v-row-s { font-size: 14px; line-height: 1.35; color: var(--v-text-2); }
.v-row-v { flex: none; font-size: 15px; color: var(--v-text-3); text-align: right; font-variant-numeric: tabular-nums; }
.v-account-danger .v-row-t { color: var(--v-crit); } /* Account sheet: Delete account */
.v-chev { flex: none; width: 16px; height: 16px; color: var(--v-text-3); }
.v-row .code, .v-mono { font-family: var(--v-mono); letter-spacing: 0.01em; }
.v-row[aria-pressed="true"] .v-check, .v-row[aria-checked="true"] .v-check { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-on-primary); }
.v-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--v-text-3); display: grid; place-items: center; color: transparent; transition: background 0.2s, border-color 0.2s; }
.v-check svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ buttons */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--v-surface-2); color: var(--v-text); font: 600 17px/1 var(--v-font); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; transition: transform 0.18s var(--v-ease), opacity 0.18s, background 0.2s;
}
.v-btn:active { transform: scale(0.97); }
.v-btn.primary { background: var(--v-primary); color: var(--v-on-primary); }
.v-btn.block { width: 100%; }
.v-btn.sm { height: 40px; padding: 0 16px; font-size: 15px; }
.v-btn:disabled { opacity: 0.35; pointer-events: none; }
.v-btn svg { width: 20px; height: 20px; }
.v-link { border: 0; background: none; padding: 0; color: var(--v-tint); font: 500 16px/1.3 var(--v-font); cursor: pointer; text-decoration: none; }
.v-circle { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--v-surface-2); color: var(--v-text); display: grid; place-items: center; cursor: pointer; }
.v-circle svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ code field (Home) */
.v-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 64px; padding: 10px 16px;
  border-radius: 20px; background: var(--v-surface); cursor: text; transition: box-shadow 0.2s;
}
.v-field:focus-within { box-shadow: 0 0 0 1.5px var(--v-text-3); }
.v-field > svg { width: 22px; height: 22px; color: var(--v-text-3); flex: none; }
.v-field input, .v-field input[type="text"] { background: transparent !important; flex: 1 1 140px; min-width: 0; border: 0; background: transparent; color: var(--v-text); font: 500 20px/1.2 var(--v-font); letter-spacing: -0.01em; padding: 8px 0; }
.v-field input::placeholder { color: var(--v-text-3); }
.v-field input:focus { outline: none; }
.v-token { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--v-primary); color: var(--v-on-primary); font: 600 15px/1 var(--v-mono); }
.v-token button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.6; display: grid; place-items: center; cursor: pointer; }
.v-token button svg { width: 14px; height: 14px; }
.v-field-msg { font-size: 14px; color: var(--v-crit); padding: 0 4px; }
.v-suggest { margin-top: -20px; }
.v-suggest .v-row { min-height: 52px; }
.v-sev-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v-text-3); }
.v-sev-dot.low { background: var(--v-ok); } .v-sev-dot.medium { background: var(--v-warn); }
.v-sev-dot.high { background: var(--v-bad); } .v-sev-dot.critical { background: var(--v-crit); }
.v-cta { display: flex; flex-direction: column; gap: 10px; margin-top: -16px; }
.v-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ------------------------------------------------------------------ verdict (Results) */
.v-verdict { display: flex; flex-direction: column; gap: 10px; }
.v-verdict-k { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--v-vc); }
.v-verdict-k i { width: 10px; height: 10px; border-radius: 50%; background: var(--v-vc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--v-vc) 20%, transparent); }
.v-verdict-t { font-size: 38px; line-height: 1.05; letter-spacing: -0.04em; font-weight: 750; }
.v-verdict.green { --v-vc: var(--v-ok); } .v-verdict.yellow { --v-vc: var(--v-warn); } .v-verdict.red { --v-vc: var(--v-crit); }
.v-big-num { flex: none; width: 56px; font: 650 22px/1 var(--v-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.v-meter { height: 3px; border-radius: 3px; background: var(--v-surface-2); overflow: hidden; margin-top: 6px; }
.v-meter i { display: block; height: 100%; background: var(--v-text); border-radius: 3px; }

/* ------------------------------------------------------------------ chips (horizontal filters) */
.v-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--v-pad-r)) 0 calc(-1 * var(--v-pad)); padding: 2px var(--v-pad-r) 2px var(--v-pad); }
.v-chips::-webkit-scrollbar { display: none; }
.v-chip { flex: none; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--v-surface-2); color: var(--v-text); font: 500 15px/1 var(--v-font); cursor: pointer; white-space: nowrap; }
.v-chip[aria-pressed="true"] { background: var(--v-primary); color: var(--v-on-primary); }
.v-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; background: var(--v-surface); }
.v-search svg { width: 20px; height: 20px; color: var(--v-text-3); }
.v-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--v-text); font: 400 17px var(--v-font); }
.v-search input:focus { outline: none; }

/* ------------------------------------------------------------------ small text blocks */
.v-note { font-size: 13px; line-height: 1.45; color: var(--v-text-3); }
.v-prose { font-size: 17px; line-height: 1.5; color: var(--v-text-2); }
.v-prose strong { color: var(--v-text); font-weight: 600; }
.v-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8vh; }

/* ------------------------------------------------------------------ floating tab bar */
.v-tabbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 6px; border-radius: 999px;
  background: var(--v-bar); -webkit-backdrop-filter: saturate(1.8) blur(24px); backdrop-filter: saturate(1.8) blur(24px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--v-ease), opacity 0.3s;
}
.app.no-tabbar .v-tabbar { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.v-tab { display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 18px; border-radius: 999px; color: var(--v-text-2); text-decoration: none; font: 600 14px/1 var(--v-font); transition: background 0.25s, color 0.25s; }
.v-tab svg { width: 22px; height: 22px; }
.v-tab .v-tab-l { display: none; }
.v-tab.active { background: var(--v-surface-2); color: var(--v-text); }
.v-tab.active .v-tab-l { display: inline; }
.tabbar { display: none !important; }

/* ------------------------------------------------------------------ reused sheets: smooth bottom sheets, no outlines */
.sheet-backdrop, .modal-backdrop { background: var(--v-scrim) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-sheet { background: var(--v-surface) !important; border: 0 !important; border-radius: 28px 28px 0 0 !important; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4) !important; }
.modal-sheet h2, .modal-sheet h3 { letter-spacing: -0.02em; }
.modal-grip { background: var(--v-surface-3) !important; width: 40px !important; }
.toast { background: var(--v-primary) !important; color: var(--v-on-primary) !important; border-radius: 999px !important; border: 0 !important; font-weight: 600; }
.wp-pill { border: 0 !important; border-radius: 999px !important; background: var(--v-surface-2) !important; color: var(--v-text) !important; }

/* every old card/box loses its outline; surfaces are flat fills */
.card, .quick, .sym, .part-row, .bolt-list li, .more-info, .tb-tabs, .tb-sec, .tb-guide, .retailer, .part-block,
.suggest, .explore-detail, .tray, .banner, .vchip, .chip, .badge, .code-chips, .select, .voice-btn, .rank,
.callout, .decode-result, .vehicle-banner, .warn-chip, .bchip, .glass, .glass-strong, .chip-btn, .tool-btn,
.sheet, .explore-panel, .explore-dock, .sheet-nav, .obd-card, input, select, textarea {
  border-color: transparent !important;
}
.card { background: var(--v-surface); box-shadow: none; border-radius: 22px; }
.first-card, .obd-card, .combo-card, .vcard.active, .cause.top { background: var(--v-surface) !important; }
.btn { border-radius: 999px !important; font-weight: 600; letter-spacing: -0.01em; }
.btn.primary { background: var(--v-primary); color: var(--v-on-primary); }
.btn.secondary { background: var(--v-surface-2); }
.chip, .badge { background: var(--v-surface-2); }
.num { background: var(--v-surface-2) !important; color: var(--v-text) !important; }
.lbar { background: var(--v-surface-2); } .lbar > span { background: var(--v-text); }
.obd-card-ico { background: var(--v-surface-2) !important; color: var(--v-text) !important; }
.select, .field, input[type="text"], input[type="search"] { background: var(--v-surface-2); }

/* 3D screens (engine + guide player): flat black stage, quiet floating controls */
.viewer-wrap { background: #000 !important; }
.glass, .glass-strong { background: rgba(28, 28, 30, 0.72) !important; -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-radius: 18px; }
.chip-btn, .tool-btn, .info-panel .chip { background: rgba(255, 255, 255, 0.1) !important; color: #fff; }
.tool-btn { border-radius: 16px !important; }
.tool-btn[aria-pressed="true"] { background: #fff !important; color: #000 !important; }
.info-panel .btn.secondary, .part-pop .btn.secondary, .pc-actions .btn.secondary { background: rgba(255, 255, 255, 0.12) !important; color: #fff; }
.pc-actions .btn.primary, .part-pop .btn.primary { background: #fff !important; color: #000 !important; }
.sheet { background: var(--v-surface) !important; border-radius: 28px 28px 0 0 !important; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45) !important; }
.explore-dock, .explore-panel { background: var(--v-surface) !important; }
.step-dots span { background: var(--v-surface-3) !important; }
.bchip { background: var(--v-surface-2) !important; color: var(--v-text) !important; font-family: var(--v-mono); }
.engine-chip { background: rgba(28, 28, 30, 0.72) !important; border: 0 !important; }
.screen.immersive .scr-head .vchip, .guide .vchip { display: none; }

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.leaving, .v-tabbar { animation: none !important; transition: none !important; }
}

/* the floating tab bar sits over the bottom of the screen: lift the 3D screen's own dock above it */
.app:not(.no-tabbar) .explore-dock { padding-bottom: calc(var(--v-nav-h) + 22px + env(safe-area-inset-bottom)) !important; background: transparent !important; }
.app:not(.no-tabbar) .explore-dock .btn { background: var(--v-surface) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

/* titles get focus for screen readers on navigation; never draw a box around them */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
.v-search input, .v-search input[type="search"] { background: transparent !important; }
.v-search input::-webkit-search-decoration, .v-search input::-webkit-search-cancel-button { -webkit-appearance: none; }