/* ==========================================================================
   FlamingBikes on the fleet Tracker look (_fleet/tracker-style-kit, 2026-09-28).
   Loaded right after tracker-style.css. Bikes' own pages (catalog, guide, checklist, compare,
   LAMS lookup) keep their markup and content; this maps their components onto the kit's:
     headings  → Inter 24/32/700 (kit A.2; no Poppins except the wordmark)
     data      → crystal cards (transparent, white/6 hairline, 16px radius, blur)
     forms     → surface cards + kit inputs
     buttons   → .btn / .btn-accent / .watch-eye recipes
     pills     → .verdict / .chip / .seg-tab recipes; tables → .a-table
   Every selector is prefixed with `body` so it outranks the templates' inline <style> blocks
   (which load later in the page) without !important.
   ========================================================================== */

/* ---- page headings (kit A.2 / A.12 welcome-card) ---- */
body .cat-title, body .veh-title, body .cmp-title, body .lk2-title, body .ck-title {
  font-family: var(--font-primary); font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #fff; letter-spacing: normal;
}
body .lc-title { font-size: 1.5rem; line-height: 2rem; }                  /* a register code: stays mono */
/* Guide titles (the vehicle name) are a touch larger on guide pages only: ~28px Inter (Phil, 2026-09-28). */
body .veh-title { font-size: 1.75rem; line-height: 2.25rem; }
body .cat-sub, body .cmp-sub, body .lk2-sub, body .ck-sub { color: var(--text-secondary); font-size: .88rem; }
body .veh-make, body .ck-make, body .lc-kicker, body .cmp-bike-make { font-size: .72rem; letter-spacing: .06em; }
@media (max-width: 768px) {
  body .cat-sub, body .cmp-sub, body .lk2-sub, body .ck-sub { font-size: .75rem; }
}

/* ---- card headings inside pages (kit: card heading 18/600, Inter) ---- */
body .card h2, body .byb-h, body .lk2-h2, body .rel h2, body .lk2-box h2, body .lc-card h2, body .ck-sec h2 {
  font-family: var(--font-primary); letter-spacing: normal;
}
body .card h2, body .lk2-h2, body .rel h2 { font-size: 1.125rem; font-weight: 600; color: #fff; }

/* ---- crystal cards: data (kit A.1 "crystal") ---- */
body .vcard, body .brand-head, body .rel-card, body .cmp-wrap, body .ck-sec, body .lk2-table-wrap {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
body .vcard:hover, body .rel-card:hover, body .brand-head:hover { border-color: var(--border-hover); background: var(--bg-hover); }
body .brand-sec.open .brand-head { border-color: rgba(249,115,22,.25); }

/* ---- surface cards: forms + primary actions ---- */
body .lk2-box, body .lc-card, body .lc-answer, body .lc-warn, body .byb {
  border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
body .lk2-box, body .lc-card { background: var(--bg-surface); border: 1px solid var(--border); }

/* ---- buttons (kit A.6) ---- */
body .veh-save, body .lc-btn, body .ck-tools button, body .cmp-remove, body .cat-empty .cat-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 0;
  padding: .5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-primary); font-family: var(--font-primary); font-size: .85rem; font-weight: 500; text-decoration: none; transition: all .2s;
}
body .veh-save:hover, body .lc-btn:hover, body .ck-tools button:hover, body .cmp-remove:hover { border-color: var(--border-hover); background: var(--bg-hover); color: var(--text-primary); }
body .veh-save.on, body .lc-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-muted); }
body .ck-tools button, body .cmp-remove { padding: .35rem .8rem; font-size: .78rem; }          /* .btn-small */
body .lc-btn.primary, body .lk2-form button {                                                   /* .btn-accent */
  background: var(--accent-gradient); color: #fff; border: none; padding: .65rem 1.4rem; font-family: var(--font-primary);
  font-size: .85rem; font-weight: 500; border-radius: var(--radius-sm); box-shadow: 0 4px 16px var(--accent-glow);
}
body .lc-btn.primary:hover, body .lk2-form button:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }
body .byb-more, body .ck-link, body .lk2-box a, body .lc-also a { color: var(--accent); }

/* compare toggle on catalog cards → .watch-eye */
body .vcmp { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: .9rem; }
body .vcmp:hover { color: var(--accent); border-color: var(--accent); }
body .vcmp.on { color: var(--accent); border-color: var(--accent); background: var(--accent-muted); }
@media (max-width: 768px) { body .vcmp { width: 26px; height: 26px; min-width: 26px; } }

/* ---- inputs (kit A.7) ---- */
body .cat-search input, body .cat-select, body .lk2-form input {
  font-family: var(--font-primary); font-size: 1rem; color: var(--text-primary); background-color: rgba(255,255,255,.05);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
}
body .cat-search input:focus, body .cat-select:focus, body .lk2-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
body .cat-search { background: none; border: none; }

/* ---- filter chips → segmented pills (kit A.9 .seg-tab) ---- */
body .cat-chip { border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(255,255,255,.03);
  color: #9ca3af; font-family: var(--font-primary); font-weight: 600; font-size: .8rem; }
body .cat-chip:hover { color: #fff; border-color: var(--border-hover); }
body .cat-chip.active { background: rgba(249,115,22,.15); color: #fb923c; border-color: transparent; }
body .cat-chip.lams:not(.active) { color: #4ade80; border-color: rgba(74,222,128,.2); }

/* ---- pills / tags (kit A.8) ---- */
body .veh-tier.pick, body .vcard-tier.pick, body .rel-tag.lams, body .fuel-tag.lams, body .byb-lams.yes, body .cmp-lams.yes, body .lk2-tag.yes, body .lc-yes {
  color: #22c55e; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: 9999px; }
body .veh-tier.value, body .vcard-tier.value { color: #4ade80; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); border-radius: 9999px; }
body .veh-tier.warn, body .vcard-tier.warn, body .byb-lams.some, body .cmp-lams.some, body .lk2-tag.some, body .fuel-tag.lams-part, body .rel-tag.lams-part {
  color: #f59e0b; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25); border-radius: 9999px; }
body .byb-lams.no, body .cmp-lams.no, body .lk2-tag.no { color: var(--danger); background: var(--danger-muted); border: 1px solid rgba(239,68,68,.25); border-radius: 9999px; }
body .veh-chip, body .fuel-tag, body .rel-tag { border-radius: 4px; background: var(--bg-active); color: var(--text-tertiary); border: none; }
body code, body .byb-row code, body .lk2 code, body .lc code, body .cmp code, body .ck code {
  font-family: var(--font-mono); background: var(--bg-active); color: var(--text-primary); border-radius: 4px; }

/* ---- tables (kit A.5 .a-table) ---- */
body .cmp th, body .lk2-table th { font-family: var(--font-primary); color: var(--text-tertiary); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
body .cmp td, body .lk2-table td { color: #d1d5db; font-size: .875rem; border-bottom-color: var(--border-subtle); }
body .cmp tbody th, body .cmp thead th { background: #111; }
body .lk2-table tbody tr:hover td, body .cmp tbody tr:hover td { background: rgba(255,255,255,.02); }

/* ---- row / card titles: Inter 600 (kit: Poppins only for the wordmark + fleet-footer titles) ---- */
body .vcard-model, body .brand-name, body .rel-model, body .cmp-bike-name { font-family: var(--font-primary); font-weight: 600; letter-spacing: normal; }

/* ---- billing: Tracker keeps the plan tiles 2-up on phones (flaming.css forced 1 column) ---- */
@media (max-width: 768px) { body .cc-tiles { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---- screen-reader-only text (used by the error page's h1) ---- */
body .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Bikes-only chrome that must keep working under the kit ---- */
body .cmp-tray a { font-family: var(--font-primary); font-weight: 500; }