/* Sonic design kit: retro drive-in. Loaded only on Sonic pages (src/lib/kits.ts). */
.kit-sonic {
  --s-blue: #0088D7; --s-red: #EA0045; --s-navy: #0B1E3F; --s-night: #071530; --s-yellow: #FFD23F; --s-cyan: #4FD8FF;
  --kit-display: 'Bungee', 'Bricolage Grotesque', system-ui, sans-serif;
  --kit-headline: 'Righteous', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* page: parking-lot stripes, cool blue surfaces */
body.kit-sonic {
  --bg: #EEF5FB; --surface: #FFFFFF; --surface-2: #E4EEF8; --line: #D2E1F0; --muted: #566A84; --ink: #10213D;
  --accent: #0A5FA3; --accent-ink: #FFFFFF; --accent-soft: #DCEBFA;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(115deg, transparent 0 58px, rgba(0, 136, 215, .055) 58px 62px);
}
@media (prefers-color-scheme: dark) {
  body.kit-sonic {
    --bg: #08132A; --surface: #0E1F3D; --surface-2: #132A52; --line: #1E3A66; --muted: #9DB4D6; --ink: #EAF3FF;
    --accent: #7CC8FF; --accent-ink: #071530; --accent-soft: #12305A;
    background-image: repeating-linear-gradient(115deg, transparent 0 58px, rgba(79, 216, 255, .045) 58px 62px);
  }
}

/* ---------- hero: simple Sonic blue with a red base line ---------- */
.b-hero.kit-sonic { color: #fff; background: linear-gradient(135deg, #0A86D6 0%, #0074C4 52%, #0062AE 100%); box-shadow: inset 0 -6px 0 var(--s-red); }
.kit-sonic .b-hero-in { padding-top: 40px; padding-bottom: 72px; }
.kit-sonic .b-crumbs { opacity: .82; margin-bottom: 26px; }
.kit-sonic .kit-brand { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.kit-sonic .kit-brand .kit-emblem { flex: none; width: 68px; height: 68px; filter: drop-shadow(0 8px 14px rgba(0, 32, 80, .35)); }
.kit-sonic .kit-kicker { margin: 0 0 5px; font: 700 .76rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.kit-sonic .kit-brand .b-eyebrow { margin: 0; max-width: 46ch; font-size: .88rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: #D6ECFF; opacity: 1; }
.b-hero.kit-sonic h1 { margin: 0 0 22px; font-family: var(--kit-headline); font-weight: 400; line-height: .95; letter-spacing: 0; color: #fff; }
.kit-sonic .h1-name { display: block; font-size: clamp(3.6rem, 8vw, 6.4rem); letter-spacing: -.01em; }
.kit-sonic .h1-rest { display: block; margin-top: .32em; font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.15; color: #CFE7FF; }
.kit-sonic .b-lede { max-width: 50ch; font-size: 1.08rem; line-height: 1.7; color: #EAF5FF; }
.kit-sonic .b-meta svg { stroke: #fff; background: var(--s-red); }
.kit-sonic .b-tabs a { border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px; color: #fff; }
.kit-sonic .b-tabs a:hover { background: rgba(255, 255, 255, .12); }
.kit-sonic .b-tabs a[aria-current] { background: #fff; color: #005A9E; border-color: #fff; }
.kit-sonic .b-frame::before { background: rgba(255, 255, 255, .14); }
.kit-sonic .b-photo img { border-radius: 24px; box-shadow: 0 34px 60px -30px rgba(0, 25, 60, .7); }
.kit-sonic .b-photo figcaption { color: #D6ECFF; opacity: .85; }

/* ---------- page body ---------- */
.kit-sonic .jump a { background: var(--s-navy); color: #fff; border-bottom: 3px solid var(--s-red); border-radius: 10px; font: 400 .78rem/1.2 var(--kit-display); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 8px 16px -10px rgba(7, 21, 48, .9); }
.kit-sonic .jump a:hover { box-shadow: 0 0 0 2px var(--s-cyan), 0 0 18px rgba(79, 216, 255, .55); }
.kit-sonic .b-fact { border: 0; border-left: 6px solid var(--s-red); border-radius: 12px; box-shadow: 0 12px 24px -18px rgba(7, 21, 48, .65); }
.kit-sonic .b-fact b { font: 400 1.4rem/1.15 var(--kit-display); color: var(--brand-text); }
.kit-sonic .note { background: var(--surface); border-left-color: var(--s-yellow); border-radius: 12px; }
.kit-sonic .sec-title { font-family: var(--kit-display); font-weight: 400; font-size: clamp(1.35rem, 3vw, 2.05rem); letter-spacing: .01em; text-transform: uppercase; }
.kit-sonic .sec-title em { color: var(--s-red); }
@media (prefers-color-scheme: dark) { .kit-sonic .sec-title em { color: #FF5C86; } }
.kit-sonic .facts-box { background: var(--s-navy); color: #EAF3FF; border: 2px solid var(--s-cyan); border-radius: 16px; box-shadow: 0 0 24px -8px rgba(79, 216, 255, .55); }
.kit-sonic .facts-box h2 { color: var(--s-yellow); font-family: var(--kit-display); font-weight: 400; text-transform: uppercase; }
.kit-sonic .facts-box dt { color: #9FDCFF; }
.kit-sonic .facts-link { color: var(--s-yellow); }
.kit-sonic .pick, .kit-sonic .deal, .kit-sonic .know-card, .kit-sonic .city-card { border: 0; border-top: 5px solid var(--s-blue); border-radius: 14px; box-shadow: 0 12px 26px -20px rgba(7, 21, 48, .7); }
.kit-sonic .pick li::before { background: var(--s-red); color: #fff; }
.kit-sonic .tools { border-radius: 14px; }
.kit-sonic details { border-radius: 12px; }
.kit-sonic details[open] { border-left-color: var(--s-red); }

/* section bars: numbered drive-in stalls under neon */
.kit-sonic #menu { counter-reset: stall; }
.kit-sonic .bar { counter-increment: stall; position: relative; text-align: left; padding: 16px 20px 16px 104px; border-radius: 14px; background: var(--s-navy); color: #fff; border: 2px solid var(--s-cyan); box-shadow: 0 0 0 4px rgba(79, 216, 255, .1), 0 0 22px rgba(79, 216, 255, .32); }
.kit-sonic .bar::before { content: "STALL\A" counter(stall, decimal-leading-zero); white-space: pre; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 74px; padding: 7px 0 6px; text-align: center; font: 400 .72rem/1.15 var(--kit-display); color: #fff; background: var(--s-red); border-radius: 9px; box-shadow: 0 0 14px rgba(234, 0, 69, .55); }
.kit-sonic .bar h2 { font-family: var(--kit-display); font-weight: 400; color: var(--s-yellow); letter-spacing: .04em; }
.kit-sonic .bar small { color: #CFE3FF; }

/* cards: menu-board panels with tag-shaped prices */
.kit-sonic .mcard { border: 0; border-top: 5px solid var(--s-blue); border-radius: 16px; box-shadow: 0 12px 26px -18px rgba(7, 21, 48, .65), 0 0 0 1px var(--line); }
.kit-sonic .mcard:hover { box-shadow: 0 0 0 2px var(--s-cyan), 0 16px 32px -16px rgba(0, 136, 215, .65); }
.kit-sonic .mcard .art { border-radius: 10px; }
.kit-sonic .pill { border-radius: 4px 10px 10px 4px; padding-left: 20px; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
.kit-sonic .pill.muted { clip-path: none; padding-left: 13px; border-radius: 10px; }
.kit-sonic .ribbon { background: var(--s-yellow); color: var(--s-night); font: 400 .62rem/1 var(--kit-display); letter-spacing: .06em; padding: 6px 9px; }
.kit-sonic .mcard .add { color: var(--s-blue); }

/* ---------- motion: cards and stall signs rise in as they scroll into view ---------- */
@keyframes ks-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  .kit-sonic .mcard, .kit-sonic .bar { animation: ks-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}
@media (prefers-reduced-motion: reduce) { .kit-sonic *, .kit-sonic *::before, .kit-sonic *::after { animation: none !important; } }

@media (max-width: 860px) {
  .kit-sonic .b-hero-in { padding-bottom: 48px; }
  .kit-sonic .kit-brand .kit-emblem { width: 58px; height: 58px; }
  .kit-sonic .bar { padding-left: 90px; }
  .kit-sonic .bar::before { width: 64px; font-size: .64rem; }
}