/* FlamingBikes guide page. The Cars kit part is copied verbatim from _fleet/cars-bikes-kit/guide.css (from flamingcars vehicle.html), 2026-10-07.
   Load after tracker-style.css. Needs the kit classes: .dash-tabs .dash-tab .verdict .chip .btn .btn-accent .input .form-group */
.veh{max-width:60rem;margin:0 auto}
.veh-back{display:inline-flex;align-items:center;gap:.4rem;color:#9ca3af;font-size:.85rem;margin-bottom:1rem;text-decoration:none}
.veh-back:hover{color:#fff}
.veh-back svg{width:1rem;height:1rem}
.veh-head{margin-bottom:1.5rem}
.veh-make{font-size:.85rem;font-weight:600;color:#f97316;text-transform:uppercase;letter-spacing:.04em}
.veh-title{font-size:1.75rem;line-height:2.25rem;font-weight:700;color:#fff;margin:.1rem 0 .15rem}   /* guide title: Inter 28/700 (Phil 2026-09-28; 24px elsewhere) */
.veh-sub{color:#9ca3af;font-size:.95rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.card{background:var(--bg-card);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1rem}   /* crystal: guide data */
#odometer{background:var(--bg-surface)}   /* surface: it holds a form */
@media(max-width:768px){.card{border-radius:var(--radius-md);padding:1.1rem}}
.card h2{font-size:1.125rem;font-weight:600;color:#fff;margin:0 0 1rem}
.veh-notes{color:#d1d5db;line-height:1.7;font-size:.95rem}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.kv .k{font-size:.72rem;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
.kv .val{color:#fff;font-weight:600;margin-top:.15rem}

/* engine selector */
.eng-tabs{margin:0 0 1.25rem}   /* = kit .dash-tabs (underline tabs; scroll sideways on phones) */
.eng-tab{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.1rem;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit;text-align:left}
.eng-tab .et-name{font-size:.85rem;font-weight:600}
.eng-tab .et-fuel{font-size:.68rem;text-transform:capitalize;color:var(--text-tertiary)}
.fuel-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.35rem;vertical-align:middle}
.fuel-dot.diesel{background:#60a5fa}.fuel-dot.petrol{background:#fb923c}.fuel-dot.hybrid{background:#4ade80}.fuel-dot.lpg{background:#a78bfa}.fuel-dot.electric{background:#2dd4bf}

.var{display:none}
.var.active{display:block}
.var-name{font-weight:600;color:#fff;font-size:1.05rem;margin:0 0 1rem}
.var-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.85rem;margin-bottom:1.25rem}
.var-specs .k{font-size:.68rem;color:#6b7280;text-transform:uppercase;letter-spacing:.03em}
.var-specs .val{color:#e5e7eb;font-size:.9rem;font-weight:500;margin-top:.1rem}
.var-timing{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.08);border-radius:.7rem;background:rgba(255,255,255,.02);margin-bottom:1.25rem}
.var-timing svg{width:1.1rem;height:1.1rem;color:#f97316;flex-shrink:0}
.var-timing .tl{font-size:.7rem;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
.var-timing .tv{color:#fff;font-weight:600;font-size:.9rem}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:.25rem}
.pc h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .5rem}
.pc .pros h4{color:#4ade80}.pc .cons h4{color:#f87171}
.pc ul{margin:0;padding-left:1.1rem;color:#d1d5db;font-size:.88rem;line-height:1.6}
.prob{border-top:1px solid rgba(255,255,255,.06);padding-top:1rem;margin-top:1.25rem}
.prob-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#9ca3af;margin:0 0 .85rem}
.prob-row{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.6rem}
.sev{flex-shrink:0;display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:500;text-transform:capitalize;margin-top:.05rem;background:var(--bg-active);color:var(--text-secondary)}   /* = kit .badge */
.sev.high{background:var(--danger-muted);color:var(--danger)}
.sev.medium{background:var(--warning-muted);color:var(--warning)}
.prob-body{flex:1;min-width:0}
.prob-title{color:#fff;font-weight:600;font-size:.9rem}
.prob-desc{color:#9ca3af;font-size:.85rem;line-height:1.5;margin-top:.15rem}
.prob-fix{color:#86efac;font-size:.82rem;margin-top:.25rem}
.prob-meta{color:#6b7280;font-size:.78rem;margin-top:.15rem}
@media(max-width:600px){.pc{grid-template-columns:1fr}}

.veh-save{margin-top:.9rem;gap:.45rem}   /* kit secondary .btn */
.veh-save svg{width:1rem;height:1rem}
.veh-save.on{color:var(--accent);border-color:var(--accent);background:var(--accent-muted)}
.veh-save.full{opacity:.6}
.veh-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .9rem}
.veh-cmp-link{margin-top:.9rem;font-size:.85rem;font-weight:600;color:#f97316;text-decoration:none}
.veh-cmp-link[hidden]{display:none}
/* Top issues: the summary a buyer needs, inside the first phone screen. */
.top{border-color:rgba(249,115,22,.25);padding:1.1rem 1.25rem}
.top-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.top-head h2{margin:0}
.top-count{font-size:.78rem;color:#9ca3af;white-space:nowrap}
.top-count b{color:#f87171;font-weight:600}
.top .prob-row{margin-bottom:.55rem}
/* Kept to one phone screen: long titles clamp to two lines and engine names to
   one (the full text is in the list below and in the title attribute). */
.top .prob-body{min-width:0}
.top .prob-title{font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.top-scope{color:#9ca3af;font-size:.75rem;margin-top:.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .prob-meta{margin-top:.1rem}
.top-all{display:inline-block;margin-top:.2rem;font-size:.82rem;font-weight:600;color:#f97316;text-decoration:none}
.top-none{color:#9ca3af;font-size:.9rem;margin:0}
.top-links{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.rc-item{padding:.7rem 0;border-top:1px solid var(--border-subtle)}
.rc-item:first-of-type{border-top:0;padding-top:0}
.rc-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.25rem}
.rc-num{font-family:var(--font-mono);font-weight:700;font-size:.85rem;color:var(--accent);text-decoration:none}
.rc-date{font-family:var(--font-mono);font-size:.75rem;color:var(--text-tertiary)}
.rc-row{font-size:.85rem;color:var(--text-secondary);line-height:1.55;margin-top:.15rem}
.rc-row b{color:var(--text-primary);font-weight:600}
.rc-src{font-size:.75rem;color:var(--text-tertiary);margin-top:.3rem}
.rc-src a{color:var(--text-secondary)}
.rc-unv{color:var(--warning);font-size:.72rem}
#odometer,#engines,#shared-problems{scroll-margin-top:4.75rem}   /* below the sticky 58px header */
/* At this odometer */
.odo-form{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.odo-form label{font-size:.85rem;color:#9ca3af;width:100%}
.odo-in{flex:1;min-width:0;max-width:12rem}   /* kit .input */
.odo-help{color:#9ca3af;font-size:.85rem;margin:.6rem 0 0}
.odo-g{margin-top:1rem}
.odo-g h3{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0 0 .5rem}
.odo-g.now h3{color:#f87171}.odo-g.past h3{color:#fbbf24}.odo-g.soon h3{color:#38bdf8}.odo-g.any h3{color:#9ca3af}
.odo-g p.odo-why{color:#6b7280;font-size:.78rem;margin:-.3rem 0 .5rem}
.odo-g summary{cursor:pointer;color:#9ca3af;font-size:.85rem}
.odo-km{color:#6b7280;font-size:.75rem}
/* Other generations of the same model + what came before/after. */
.gens{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.25rem;margin-bottom:.25rem;-webkit-overflow-scrolling:touch}
.gen{flex-shrink:0;display:flex;flex-direction:column;padding:.45rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);text-decoration:none;color:#d1d5db;font-size:.82rem;line-height:1.3}
.gen small{color:var(--text-tertiary);font-size:.7rem;font-family:var(--font-mono)}
.gen:hover{border-color:rgba(249,115,22,.4)}
.gen.on{border-color:var(--accent);background:var(--accent-muted);color:#fff}
.gen-nav{display:grid;gap:.35rem;margin-top:.6rem;font-size:.82rem;color:#9ca3af}
.gen-nav a{color:#f97316;text-decoration:none}
.gen-nav b{color:#d1d5db;font-weight:500}

/* ==== FlamingBikes additions (2026-10-07). Everything above is the Cars kit, verbatim. ==== */
/* Green is reserved for LAMS across Bikes: a legal yes/no, never mistaken for the rating pills. */
.fuel-dot.lams{background:#4ade80}.fuel-dot.lams-some{background:#f59e0b}.fuel-dot.full{background:#6b7280}
.lams-tag{margin-left:.5rem;vertical-align:2px;font-size:.72rem}
.lams-note{margin:-.5rem 0 .9rem;font-size:.82rem;color:var(--text-secondary)}
/* "Check it's actually the LAMS one": a do-this-at-the-bike instruction, so louder than a note. */
.ident{margin:0 0 1.25rem;padding:.85rem 1rem;border-radius:var(--radius-md);border:1px solid rgba(74,222,128,.25);background:rgba(74,222,128,.05)}
.ident-h{font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#4ade80;margin-bottom:.4rem}
.ident-codes{margin:0 0 .4rem;font-size:.85rem;color:#d1d5db}
.ident-list{margin:.2rem 0 .4rem;padding-left:1.1rem;font-size:.85rem;color:var(--text-secondary);line-height:1.55}
.ident-src{font-size:.75rem;color:var(--text-tertiary)}
.veh code{font-family:var(--font-mono);font-size:.82rem;padding:.05rem .35rem;border-radius:4px;background:var(--bg-active);color:var(--text-primary)}
/* "unverified" marker: amber, dimmer than the medium-severity badge, because it's a statement
   about us, not a judgement about the bike. */
.unv{display:inline-block;margin-left:.35rem;padding:.05rem .35rem;border-radius:4px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background:rgba(180,150,60,.14);color:#c9a227;vertical-align:middle;cursor:help;white-space:nowrap}
.unv-foot{display:flex;gap:.5rem;align-items:flex-start;color:var(--text-tertiary);font-size:.8rem;line-height:1.6;margin:0 0 1rem}
.unv-foot .unv{margin-left:0;flex-shrink:0;margin-top:.2rem}
.asat{margin-left:.4rem;font-size:.7rem;font-weight:500;color:var(--text-tertiary);white-space:nowrap;cursor:help}

/* Before you buy, in the Top issues card: label column + answer, then faults as problem rows. */
.byb-list{margin:0;display:grid;gap:.7rem}
.byb-row{display:grid;grid-template-columns:7.5rem 1fr;gap:.75rem;align-items:baseline}
.byb-row dt{font-size:.7rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.byb-row dd{margin:0;color:#e5e7eb;font-size:.9rem;line-height:1.5}
.byb-row dd .verdict{margin:0 .4rem 0 0;vertical-align:1px}
.byb-row .prob-row{margin-bottom:.45rem}
.byb-row .prob-row:last-child{margin-bottom:0}
.byb-code{text-decoration:none}
@media(max-width:480px){.byb-row{grid-template-columns:1fr;gap:.2rem}}

/* Compare button: compare.js reveals it and keeps the label in step. */
.veh-save[hidden]{display:none}
.veh-save[disabled]{opacity:.6;cursor:not-allowed}

/* Recalls: Bikes keeps a defect summary and a plain-text remedy. */
.rc-fix{color:#86efac}

/* Correction form (Cars' details card). */
.corr summary{cursor:pointer;color:var(--text-secondary);font-size:.9rem;list-style:none}
.corr summary::-webkit-details-marker{display:none}
.corr summary b{color:var(--accent);font-weight:600}
.corr form{margin-top:1rem}
.corr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.corr-msg{margin:.75rem 0 0;font-size:.85rem;color:var(--text-secondary)}
.corr-msg.ok{color:var(--success)}.corr-msg.err{color:var(--danger)}

/* More like this: the closest bikes as small crystal tiles (catalog card look), then list links. */
.rel-sub{color:var(--text-secondary);font-size:.85rem;margin:-.6rem 0 1rem}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-bottom:1rem}
.rel-card{position:relative;display:flex;flex-direction:column;gap:.15rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:.85rem 1rem;text-decoration:none;overflow:hidden;transition:border-color .15s,background .15s}
.rel-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-gradient);opacity:0;transition:opacity .2s}
.rel-card:hover{background:var(--bg-hover);border-color:var(--border-hover)}
.rel-card:hover::before{opacity:1}
.rel-make{font-size:.7rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.rel-model{font-size:.95rem;font-weight:600;color:#fff;line-height:1.25}
.rel-meta{color:var(--text-secondary);font-size:.8rem}
.rel-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.rel-links{display:flex;flex-wrap:wrap;gap:.5rem}
/* "Not LAMS" in Before you buy: the kit has no red verdict, so this follows its .badge danger colours. */
.verdict-poor{color:var(--danger);background:var(--danger-muted);border-color:rgba(239,68,68,.25)}