/* Shared CarMap header and site menu, used by CarBench and Tire pressure. Matches the home page header. */
.cm-head {
  --cm-bg: rgba(250, 250, 252, .88); --cm-surface: #fbfbfd; --cm-ink: #1d1d1f; --cm-muted: #6e6e73;
  --cm-line: #e5e5e7; --cm-hover: #f5f5f7; --cm-accent: #0071e3;
  position: sticky; top: 0; z-index: 60; background: var(--cm-bg); color: var(--cm-ink);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cm-menu, .cm-scrim {
  --cm-surface: #fbfbfd; --cm-ink: #1d1d1f; --cm-muted: #6e6e73; --cm-line: #e5e5e7; --cm-hover: #f5f5f7; --cm-accent: #0071e3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-head { --cm-bg: rgba(22, 22, 24, .86); --cm-ink: #f5f5f7; --cm-muted: #a1a1a6; --cm-line: #2c2c2e; --cm-hover: #232326; --cm-accent: #4ba3ff; border-bottom-color: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .cm-menu { --cm-surface: #161618; --cm-ink: #f5f5f7; --cm-muted: #a1a1a6; --cm-line: #2c2c2e; --cm-hover: #232326; --cm-accent: #4ba3ff; }
}
:root[data-theme="dark"] .cm-head { --cm-bg: rgba(22, 22, 24, .86); --cm-ink: #f5f5f7; --cm-muted: #a1a1a6; --cm-line: #2c2c2e; --cm-hover: #232326; --cm-accent: #4ba3ff; border-bottom-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .cm-menu { --cm-surface: #161618; --cm-ink: #f5f5f7; --cm-muted: #a1a1a6; --cm-line: #2c2c2e; --cm-hover: #232326; --cm-accent: #4ba3ff; }

.cm-head-in { max-width: 1180px; margin: 0 auto; min-height: 56px; padding: 8px 24px; display: flex; align-items: center; gap: 10px; }
.cm-menu-btn {
  width: 40px; height: 40px; margin-left: -8px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: none; color: var(--cm-ink); cursor: pointer; flex: none;
}
.cm-menu-btn:hover { background: var(--cm-hover); }
.cm-menu-btn svg { width: 22px; height: 22px; }
.cm-brand { font-size: 25px; font-weight: 700; letter-spacing: -1.2px; text-decoration: none; color: var(--cm-ink); line-height: 1; white-space: nowrap; }
.cm-brand b { font-weight: inherit; }
.cm-brand b:nth-child(1) { color: #0071e3; } .cm-brand b:nth-child(2) { color: #5856d6; } .cm-brand b:nth-child(3) { color: #ff9f0a; }
.cm-brand b:nth-child(4) { color: #ff375f; } .cm-brand b:nth-child(5) { color: #af52de; } .cm-brand b:nth-child(6) { color: #34c759; }
.cm-brand small { font-size: 10px; vertical-align: super; margin-left: 4px; color: var(--cm-muted); letter-spacing: 0; font-weight: 600; }
.cm-page { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--cm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cm-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .2s ease; }
.cm-scrim.open { opacity: 1; }
.cm-menu {
  position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(320px, 86vw); height: 100dvh; overflow: auto;
  background: var(--cm-surface); color: var(--cm-ink); border-right: 1px solid var(--cm-line); padding: 22px 20px;
  box-shadow: 12px 0 30px rgba(0, 0, 0, .14); transform: translateX(-105%); transition: transform .22s ease;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cm-menu.open { transform: translateX(0); }
.cm-menu-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--cm-line); font-size: 15px; font-weight: 600; }
.cm-menu-head button { border: 0; background: none; color: var(--cm-ink); font-size: 28px; line-height: 1; padding: 2px 6px; border-radius: 8px; cursor: pointer; }
.cm-menu-head button:hover { background: var(--cm-hover); }

/* Tool links: shared by the menu here and the home page's side menu. */
.cm-tools { display: grid; gap: 2px; padding-top: 14px; }
.cm-tools a {
  display: block; text-decoration: none; color: var(--cm-ink); font-size: 20px; letter-spacing: -.3px; line-height: 1.2;
  padding: 13px 10px 13px 14px; border-left: 4px solid transparent; border-radius: 0 10px 10px 0;
}
.cm-tools a span { display: block; font-size: 12px; letter-spacing: 0; color: var(--cm-muted); margin-top: 5px; }
.cm-tools a:hover { background: var(--cm-hover); color: var(--cm-accent); }
.cm-tools a[aria-current="page"] { background: var(--cm-hover); font-weight: 600; }
.cm-tools a:nth-child(1) { border-left-color: #0071e3; }
.cm-tools a:nth-child(2) { border-left-color: #5856d6; }
.cm-tools a:nth-child(3) { border-left-color: #ff9f0a; }
.cm-menu-foot { margin-top: 26px; font-size: 11px; line-height: 1.7; color: var(--cm-muted); }

.cm-menu-btn:focus-visible, .cm-menu-head button:focus-visible, .cm-tools a:focus-visible, .cm-brand:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
body.cm-menu-open { overflow: hidden; }
@media (max-width: 650px) { .cm-head-in { padding: 8px 16px; } .cm-brand { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .cm-menu, .cm-scrim { transition: none; } }