@import url('/css/mobile-android.css');
/* GearShift design tokens — auto repair shop vertical.
   Palette (per spec):
     garage red  #DC2626  (primary)
     steel       #475569  (accent)
     ink         #0F172A  (text)
     bg          #F8FAFC  (page background)
   Tagline: "Bookings, estimates, and follow-ups — on every lift."
*/
:root {
  --gs-red: #DC2626;
  --gs-red-dark: #B91C1C;
  --gs-red-soft: rgba(220, 38, 38, 0.1);
  --gs-steel: #475569;
  --gs-steel-dark: #334155;
  --gs-ink: #0F172A;
  --gs-bg: #F8FAFC;
  --gs-surface: #FFFFFF;
  --gs-muted: #64748B;
  --gs-border: rgba(15, 23, 42, 0.08);
  --gs-radius: 14px;

  /* Aliases for shared components */
  --brand-primary: var(--gs-red);
  --brand-accent: var(--gs-steel);
  --brand-surface: var(--gs-surface);
  --brand-bg: var(--gs-bg);
}

body.gearshift-gradient {
  background: linear-gradient(180deg, var(--gs-bg) 0%, #FFFFFF 100%);
  color: var(--gs-ink);
}

/* Primary button */
.gs-btn-primary {
  background: var(--gs-red);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.gs-btn-primary:hover { background: var(--gs-red-dark); }

/* Accent (steel) link */
.gs-link-accent { color: var(--gs-steel); text-decoration: none; font-weight: 600; }
.gs-link-accent:hover { color: var(--gs-steel-dark); text-decoration: underline; }

/* GearShift shared nav (parity with VitalCoach .vc-nav) */
.gs-nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--gs-border); }
.gs-nav-inner { max-width:1180px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.gs-nav-logo { font-size:20px; font-weight:900; color:var(--gs-ink); text-decoration:none; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; }
.gs-nav-logo .gs-mark { color:var(--gs-red); }
.gs-nav-links { display:flex; align-items:center; gap:24px; }
.gs-nav-links a { font-size:14px; font-weight:600; color:var(--gs-muted); text-decoration:none; transition:color .15s; }
.gs-nav-links a:hover, .gs-nav-links a.active { color:var(--gs-ink); }
.gs-nav-cta { background:var(--gs-red); color:#fff !important; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; transition:background .2s; }
.gs-nav-cta:hover { background:var(--gs-red-dark); }
.gs-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:8px}
.gs-hamburger span{display:block;width:22px;height:2px;background:var(--gs-ink);border-radius:2px;transition:transform .25s,opacity .25s}
.gs-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gs-hamburger.open span:nth-child(2){opacity:0}
.gs-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gs-drawer{display:none;flex-direction:column;gap:4px;padding:12px 20px 16px;background:#fff;border-bottom:1px solid var(--gs-border);position:sticky;top:64px;z-index:49}
.gs-drawer.open{display:flex}
.gs-drawer a{padding:11px 12px;font-size:15px;font-weight:600;color:var(--gs-muted);border-radius:8px;text-decoration:none;transition:background .15s}
.gs-drawer a:hover{color:var(--gs-ink);background:#F1F5F9}
.gs-drawer-cta{background:var(--gs-red)!important;color:#fff!important;text-align:center;margin-top:4px;font-weight:700!important;border-radius:8px}
@media(max-width:640px){ .gs-nav-links{display:none} .gs-hamburger{display:flex} }

html { overflow-x: clip; }

/* ── Keyboard focus ring (App Parity 2026-06-12) ──────────────────────────
   Visible ONLY for keyboard navigation (:focus-visible) — mouse/touch users
   see no change. currentColor adapts the ring to its context. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}