/* Project Car Club styles. Layout: workshop-manual website. Sticky header nav; wide pages use a 2-column guide layout (steps + checklist rail); stacks to one column on phones. */
:root{
  --bg:#e9e8e3;--surface:#f6f5f1;--ink:#1d2329;--muted:#5c646b;--line:#c9c7bf;
  --oxide:#a8442a;--oxide-soft:#f0ddd5;--on-oxide:#fbf7f4;
  --ok:#2f6b4a;--warn:#9a6a10;--bad:#a3302a;
  --beg:#2f6b4a;--int:#9a6a10;--adv:#a3302a;
  --head:#1d2329;--head-fg:#e9e8e3;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15191d;--surface:#1e2328;--ink:#e6e4de;--muted:#9aa2a9;--line:#323940;
  --oxide:#e07a5c;--oxide-soft:#3a241d;--on-oxide:#1a0f0b;--ok:#6fbf8e;--warn:#e0b25a;--bad:#ec8077;
  --beg:#6fbf8e;--int:#e0b25a;--adv:#ec8077;--head:#0e1114;--head-fg:#e6e4de;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15191d;--surface:#1e2328;--ink:#e6e4de;--muted:#9aa2a9;--line:#323940;
  --oxide:#e07a5c;--oxide-soft:#3a241d;--on-oxide:#1a0f0b;--ok:#6fbf8e;--warn:#e0b25a;--bad:#ec8077;
  --beg:#6fbf8e;--int:#e0b25a;--adv:#ec8077;--head:#0e1114;--head-fg:#e6e4de;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--head)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--head);color:var(--head-fg)}
header.top .wrap{display:flex;align-items:center;gap:8px 24px;padding-block:10px;flex-wrap:wrap}
.brand{font:800 24px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--head-fg);margin-right:auto}
.brand span{color:var(--oxide)}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{font:700 15px var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--head-fg);opacity:.75;padding:6px 10px;border-bottom:2px solid transparent}
nav.main a[aria-current="page"]{opacity:1;border-bottom-color:var(--oxide)}
nav.main a:hover{opacity:1}
.who{display:flex;align-items:center;gap:8px;font:400 12px var(--f-mono);color:var(--head-fg);opacity:.85;text-decoration:none}
.who img{width:24px;height:24px;border-radius:50%}
.badge{font:600 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor}
@media (max-width:640px){nav.main{order:3;width:100%;justify-content:space-between;flex-wrap:nowrap;gap:0}nav.main a{padding:6px 2px;font-size:13px;letter-spacing:.04em}}

main{padding-block:28px 80px}
footer{border-top:2px solid var(--ink);padding-block:20px 40px;color:var(--muted);font-size:14px}

/* type */
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.05;margin:0}
h1{font-size:clamp(40px,7vw,72px);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(26px,3.5vw,34px);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
h3{font-size:22px;font-weight:700}
p{margin:0}
.eyebrow{font:600 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oxide)}
.lede{color:var(--muted);font-size:19px;max-width:62ch}
.note{font-size:14px;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.stack-lg{display:flex;flex-direction:column;gap:36px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
hr.rule{border:0;border-top:2px solid var(--ink);margin:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:var(--surface);padding:9px 16px;font:700 16px var(--f-display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide)}
.btn.small{font-size:13px;padding:5px 10px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px}

/* level chip */
.lvl{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1.5px solid currentColor;border-radius:2px;white-space:nowrap}
.lvl.b{color:var(--beg)}.lvl.i{color:var(--int)}.lvl.a{color:var(--adv)}
.lvl .gauge{display:inline-flex;gap:2px}
.lvl .gauge i{width:4px;height:9px;background:currentColor;opacity:.25}
.lvl .gauge i.on{opacity:1}
.chip{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.free{color:var(--ok);border-color:var(--ok)}
.chip.lock{color:var(--muted)}

/* hero */
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.plate{border:2px solid var(--ink);padding:24px;position:relative;background:var(--surface)}
.plate::after{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.plate > *{position:relative;z-index:1}
.hero h1{font-size:clamp(46px,8vw,96px);line-height:.92}
.hero h1 em{font-style:normal;color:var(--oxide)}
.spec-plate{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--surface)}
.spec-plate div{padding:14px 16px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0}
.spec-plate div:nth-child(2n){border-right:0}
.spec-plate div:nth-last-child(-n+2){border-bottom:0}
.spec-plate dt{font:600 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spec-plate dd{margin:2px 0 0;font:800 40px/1 var(--f-display);font-variant-numeric:tabular-nums}
.spec-plate dd small{font:600 14px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:4px}

/* phases grid */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pcard{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border:1px solid var(--line);text-decoration:none;min-width:0}
.pcard:hover{border-color:var(--ink)}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pcard .num{font:800 40px/1 var(--f-display);color:var(--oxide);font-variant-numeric:tabular-nums}
.pcard b{font:700 22px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.pcard small{color:var(--muted);font-size:14px;line-height:1.35}
.pcard .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font:400 12px var(--f-mono);color:var(--muted);gap:8px}
.meter{display:block;width:60px;height:4px;background:var(--line)}
.meter i{display:block;height:100%;background:var(--oxide)}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
@media (max-width:760px){.how{grid-template-columns:1fr}}
.how > div{padding:18px 18px 18px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.how > div + div{padding-left:18px;border-left:1px solid var(--line)}
@media (max-width:760px){.how > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.how .k{font:600 12px var(--f-mono);color:var(--oxide);letter-spacing:.1em;text-transform:uppercase}

/* pricing */
.price{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.price{grid-template-columns:1fr}}
.tier{border:1px solid var(--line);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tier.full{border:2px solid var(--oxide)}
.tier .amt{font:800 52px/1 var(--f-display)}
.tier .amt small{font:600 16px var(--f-display);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tier ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

/* guide list */
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gitem a{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--oxide);text-decoration:none}
.gitem.locked a{border-left-color:var(--line)}
.gitem .gt{min-width:0}
.gitem .gt b{display:block;font-weight:700;font-size:18px;line-height:1.3}
.gitem .gt small{color:var(--muted);font-size:14px}
.gitem .tags{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.pbar{display:block;height:4px;background:var(--line);margin-top:8px;max-width:220px}
.pbar i{display:block;height:100%;background:var(--oxide)}

/* guide page */
.crumbs{font:400 13px var(--f-mono);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.glayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
@media (max-width:900px){.glayout{grid-template-columns:1fr}}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.rail{position:static}}
.specs{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--ink);background:var(--surface)}
.specs div{padding:10px 12px;border-right:1px solid var(--line);min-width:0}
.specs div:last-child{border-right:0}
.specs dt{font:600 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:2px 0 0;font:700 19px/1.15 var(--f-display)}
.box{border:1px solid var(--line);background:var(--surface);padding:16px}
.box h3{font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.safety{border:2px solid var(--bad);background:var(--surface);padding:14px 16px}
.safety h3{color:var(--bad);font-size:18px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.safety ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

/* checklist */
.cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cl li label{display:flex;gap:10px;align-items:flex-start;padding:5px 0;cursor:pointer;font-size:15px;line-height:1.35}
.cl input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--ink);background:var(--surface);flex-shrink:0;margin:1px 0 0;display:grid;place-items:center;cursor:pointer}
.cl input:checked{background:var(--oxide);border-color:var(--oxide)}
.cl input:checked::after{content:"";width:8px;height:5px;border-left:2px solid var(--on-oxide);border-bottom:2px solid var(--on-oxide);transform:rotate(-45deg) translate(1px,-1px)}
.cl input:checked + span{color:var(--muted);text-decoration:line-through}
.cl-h{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.ring{display:flex;align-items:center;gap:14px}
.ring svg{width:64px;height:64px;flex-shrink:0}
.ring .big{font:800 30px/1 var(--f-display);font-variant-numeric:tabular-nums}

.progressbar{display:flex;align-items:center;gap:10px;font:400 13px var(--f-mono);color:var(--muted)}
.progressbar .bar{flex:1;height:6px;background:var(--line)}
.progressbar .bar i{display:block;height:100%;background:var(--oxide);transition:width .25s}

ol.steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.step .chk{appearance:none;-webkit-appearance:none;width:42px;height:42px;border:2px solid var(--ink);background:var(--surface);cursor:pointer;display:grid;place-items:center;font:800 20px var(--f-display);color:var(--ink);margin:0}
.step .chk::before{content:attr(data-n)}
.step .chk:checked{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide)}
.step .chk:checked::before{content:"✓"}
.step .body{min-width:0;display:flex;flex-direction:column;gap:6px}
.step h3{font-size:22px}
.step h3 label{cursor:pointer}
.step.done h3{color:var(--muted)}
.step ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.manual{font-size:15px;border-left:3px solid var(--int);padding:4px 0 4px 10px;color:var(--muted)}
.manual b,.tip b{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;display:block}
.manual b{color:var(--int)}
.tip{font-size:15px;border-left:3px solid var(--oxide);padding:4px 0 4px 10px;color:var(--muted)}
.tip b{color:var(--oxide)}
.step.ghost{opacity:.35;filter:blur(1.5px);pointer-events:none;user-select:none}

.paywall{border:2px solid var(--oxide);background:var(--oxide-soft);padding:20px;display:flex;flex-direction:column;gap:10px}

/* bore log */
.log{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.log table{border-collapse:collapse;width:100%;min-width:520px;font:400 13px var(--f-mono);font-variant-numeric:tabular-nums}
.log th,.log td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.log th{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.log input,.inp-sm{width:84px;font:400 13px var(--f-mono);padding:5px 6px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:0}
.log .res{font-weight:600}
.log .flag{color:var(--bad)}
.logbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 8px}

/* forms */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);background:var(--surface);padding:10px 12px;border-radius:0;width:100%;font-size:16px}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.msg{font-size:14px;padding:10px 12px;border:1px solid var(--line);background:var(--surface)}
.msg.err{border-color:var(--bad);color:var(--bad)}
.msg.ok{border-color:var(--ok);color:var(--ok)}

/* board */
.boardgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
@media (max-width:900px){.boardgrid{grid-template-columns:1fr}}
.qlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.qlist li a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.qlist li a:hover b{text-decoration:underline}
.qlist b{font-weight:700;font-size:18px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.qlist .qm{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 12px;font:400 12px var(--f-mono);color:var(--muted)}
.solved{color:var(--ok);font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);padding:5px 10px;font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.filters button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--bg)}
.post{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.post img{width:36px;height:36px;border-radius:50%}
.post .pb{min-width:0;display:flex;flex-direction:column;gap:6px}
.post .ph{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font:400 12px var(--f-mono);color:var(--muted)}
.post .ph b{font:700 15px var(--f-body);color:var(--ink)}
.post .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.post.accepted{border-left:3px solid var(--ok);padding-left:12px;margin-left:-15px}

.empty{color:var(--muted);padding:24px;border:1px dashed var(--line);text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table td,.table th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.table th{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tablewrap{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;font-size:15px;z-index:20;max-width:calc(100% - 32px)}
/* projects */
.projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.projcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);text-decoration:none;min-width:0}
.projcard:hover{border-color:var(--ink)}
.projcard img,.projcard .ph-img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.projcard .pc{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.projcard b{font:700 22px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.carline{font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--oxide)}
.ph-img{display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--bg) 0 12px,var(--surface) 12px 24px);color:var(--muted);font:600 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;aspect-ratio:4/3;width:100%;max-width:100%;border:1px solid var(--line)}
.phero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.phero{grid-template-columns:1fr}}
.coverimg{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:2px solid var(--ink)}
.stagebar{display:grid;grid-template-columns:repeat(14,1fr);gap:3px}
.stagebar i{height:8px;background:var(--line)}
.stagebar i.on{background:var(--oxide)}
.timeline{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--ink);display:flex;flex-direction:column;gap:26px}
.tl-item{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.tl-item::before{content:"";position:absolute;left:-27px;top:3px;width:12px;height:12px;background:var(--oxide)}
.tlimg{width:100%;max-width:100%;max-height:460px;object-fit:cover;display:block;border:1px solid var(--line)}
.tl-item .ph-img{max-width:320px}
.paysteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.paysteps li::marker{font:800 18px var(--f-display);color:var(--oxide)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* auth + misc */
.signin{max-width:440px}
.hidden{display:none!important}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--oxide);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* video link + per-step equipment */
.video{display:flex;gap:14px;align-items:center;padding:14px 16px;border:2px solid var(--ink);background:var(--surface);text-decoration:none;min-width:0}
.video:hover{border-color:var(--oxide)}
.video .play{flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;background:var(--oxide);color:var(--on-oxide);font-size:18px}
.video b{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.equip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px}
.equip b{font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.equip span{border:1px solid var(--line);background:var(--bg);padding:2px 8px}
code{font-family:var(--f-mono);font-size:.9em;background:var(--surface);border:1px solid var(--line);padding:1px 5px}

/* embedded video */
.yt-wrap{margin:0;display:flex;flex-direction:column;gap:8px}
.yt{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;background:#000;border:2px solid var(--ink);overflow:hidden}
.yt iframe,.yt-play,.yt-play img{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{padding:0;cursor:pointer;background:#000}
.yt-play img{object-fit:cover;opacity:.85;transition:opacity .2s}
.yt-play:hover img{opacity:1}
.yt-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:52px;display:grid;place-items:center;background:var(--oxide);color:var(--on-oxide);font-size:22px}
.yt-wrap figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:15px}
.yt-wrap figcaption .eyebrow{margin-right:6px}
.yt-wrap figcaption a{font-size:14px;color:var(--muted)}

/* build paths on home */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line);text-decoration:none;min-width:0}
.path:nth-child(2){border-top-color:var(--int)}
.path:nth-child(3){border-top-color:var(--oxide)}
.path:first-child{border-top-color:var(--beg)}
.path:hover{border-color:var(--ink)}
.path b{font:700 22px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.path p{color:var(--muted);font-size:15px}
.path .go{margin-top:auto;font:700 14px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--oxide);padding-top:6px}

/* my car, specs, manual lookup */
.garage-top{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:760px){.garage-top{grid-template-columns:1fr}}
.carname{font:800 30px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.specs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.spec{border:1px solid var(--line);border-left:3px solid var(--ok);padding:10px 12px;background:var(--bg);display:flex;flex-direction:column;gap:3px;min-width:0}
.spec.disputed{border-left-color:var(--bad)}
.spec-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spec-top b{font-size:15px}
.spec-val{font:600 16px var(--f-mono);overflow-wrap:anywhere}
.spec-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.vote{border:1px solid var(--line);background:var(--surface);padding:2px 8px;font:600 12px var(--f-mono);cursor:pointer;color:var(--muted)}
.vote.on{border-color:var(--ok);color:var(--ok)}
.vote.down.on{border-color:var(--bad);color:var(--bad)}
.specadd summary{cursor:pointer;font:700 14px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--oxide);padding:6px 0}
.specadd form{padding-top:8px}
.mlook{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mlook-out{width:100%}
.answer{border:2px solid var(--ok);background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.answer.notfound{border-color:var(--line)}
.manuals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.manuals li{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:10px;background:var(--bg);min-width:0;overflow-wrap:anywhere}

/* logbooks + following */
.stagebar i.past{background:var(--line)}
.stagebar i.done{background:var(--oxide)}
.stagebar i.current{background:transparent;box-shadow:inset 0 0 0 2px var(--oxide)}
.chapter{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.chapter + .chapter{border-top:1px solid var(--line);padding-top:22px}
.chapter-h{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chapter-h .num{font:800 44px/1 var(--f-display);color:var(--oxide);font-variant-numeric:tabular-nums}
.chapter-h h3{font-size:24px;text-transform:uppercase;letter-spacing:.02em}
.chapter-h .chip{margin-left:auto}
.logbook{display:flex;flex-direction:column;gap:22px}
.entries{list-style:none;margin:0;padding:0 0 0 20px;border-left:2px solid var(--ink);display:flex;flex-direction:column;gap:22px}
.entry{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.entry::before{content:"";position:absolute;left:-27px;top:3px;width:12px;height:12px;background:var(--oxide)}
.photo-grid{display:grid;gap:6px;grid-template-columns:1fr 1fr}
.photo-grid.n1{grid-template-columns:1fr}
.photo-grid img,.photo-grid .ph-img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line)}
.photo-grid.n1 img{aspect-ratio:auto;max-height:520px}
.photo-grid.small{grid-template-columns:repeat(4,1fr)}
.photo-grid.small img{aspect-ratio:1}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--ink)}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 16px;font:700 16px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;display:flex;gap:6px;align-items:center}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--oxide)}
.dot{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;background:var(--oxide);color:var(--on-oxide);font:700 11px var(--f-mono);border-radius:9px;letter-spacing:0;vertical-align:1px}
.chip.new{color:var(--oxide);border-color:var(--oxide)}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feeditem{display:grid;grid-template-columns:160px 1fr;gap:14px;padding:12px;background:var(--surface);border:1px solid var(--line);text-decoration:none;min-width:0}
.feeditem.fresh{border-left:4px solid var(--oxide)}
.feeditem:hover{border-color:var(--ink)}
.feedimg{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.feeditem .fi{display:flex;flex-direction:column;gap:4px;min-width:0}
.feeditem b{font:700 20px/1.1 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere}
.feeditem p{color:var(--muted);font-size:15px;overflow-wrap:anywhere}
@media (max-width:560px){.feeditem{grid-template-columns:96px 1fr}}
.ph-img.coverimg,.ph-img.tlimg,.ph-img.feedimg{display:grid}
nav.main a{white-space:nowrap}
@media (max-width:640px){nav.main .dot{min-width:14px;height:14px;font-size:9px;padding:0 3px;margin-left:1px}}

/* simplified home */
.hero-simple{max-width:760px;padding-block:12px 4px}
.hero-simple h1{font-size:clamp(52px,9vw,104px);line-height:.92}
.hero-simple h1 em{font-style:normal;color:var(--oxide)}
.narrowfeed{max-width:760px}
/* bell */
.bell{position:relative;display:grid;place-items:center;width:34px;height:34px;color:var(--head-fg);opacity:.85}
.bell:hover{opacity:1}
.bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.bell .dot{position:absolute;top:0;right:-4px}
/* entry cards, likes, comments */
.efeed{display:flex;flex-direction:column;gap:14px}
.ecard{background:var(--surface);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ecard.fresh{border-left:4px solid var(--oxide)}
.ecard header{display:flex;flex-direction:column;gap:2px}
.etitle{text-decoration:none;display:flex;flex-direction:column}
.etitle b{font:700 22px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:anywhere}
.etitle:hover b{text-decoration:underline}
.ebody{white-space:pre-wrap;overflow-wrap:anywhere}
.eactions{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.eactions button{background:none;border:1px solid var(--line);padding:5px 12px;font:600 14px var(--f-body);cursor:pointer;color:var(--muted);display:flex;gap:6px;align-items:center}
.eactions .like.on{color:var(--oxide);border-color:var(--oxide)}
.eactions button:hover{border-color:var(--ink);color:var(--ink)}
.ecomments{display:flex;flex-direction:column;gap:8px;padding-left:2px}
.ecomment{font-size:15px;overflow-wrap:anywhere}
.ecomment b{margin-right:4px}
.cform{display:flex;gap:8px}
.cform input{flex:1;min-width:0;border:1.5px solid var(--line);background:var(--bg);padding:8px 10px;font-size:15px;border-radius:0}
.cform input:focus{border-color:var(--ink);outline:none}
.entry .eactions{border-top:0;padding-top:2px}
.flash{animation:flash 2s ease-out}
@keyframes flash{from{background:var(--oxide-soft)}to{background:transparent}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* notifications */
.nlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.nitem{display:flex;gap:12px;align-items:flex-start;padding:14px 8px;border-bottom:1px solid var(--line);text-decoration:none}
.nitem.unread{background:var(--oxide-soft)}
.nicon{flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;border:1.5px solid var(--line);font:700 15px var(--f-body);color:var(--muted)}
.nicon.like{color:var(--oxide);border-color:var(--oxide)}
.nicon.follow{color:var(--ok);border-color:var(--ok)}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}

/* legal pages */
.legal-body{display:flex;flex-direction:column;gap:12px;max-width:68ch}
.legal-body h2{font-size:24px;margin-top:14px}
.legal-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
#footlinks a{color:inherit}

/* skills and levels */
.total{font:700 18px var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.total b{font:800 40px/1 var(--f-display);color:var(--oxide);margin-left:4px;vertical-align:-4px}
#skillsbox .total b{font-size:52px}
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.skill{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto auto;column-gap:10px;row-gap:3px;align-items:center;padding:10px;border:1px solid var(--line);background:var(--bg);min-width:0}
.scode{grid-row:1/4;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--ink);font:800 16px var(--f-display);letter-spacing:.04em}
.sname{font:700 15px var(--f-display);text-transform:uppercase;letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slvl{font:800 26px/1 var(--f-display);color:var(--oxide);font-variant-numeric:tabular-nums;grid-row:1/3;grid-column:3}
.sbar{grid-column:2/4;height:5px;background:var(--line)}
.sbar i{display:block;height:100%;background:var(--oxide)}
.sxp{grid-column:2/4;font:400 11px var(--f-mono);color:var(--muted)}
.skills.compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.skills.compact .skill{grid-template-columns:32px 1fr auto;grid-template-rows:auto;padding:6px 8px}
.skills.compact .scode{grid-row:auto;width:32px;height:32px;font-size:13px}
.skills.compact .slvl{grid-row:auto;font-size:22px}
.lvl-tag{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border:1.5px solid var(--oxide);color:var(--oxide);font:700 11px var(--f-mono);vertical-align:1px;margin-right:6px}
.who .lvl-tag{border-color:var(--oxide);color:var(--oxide);margin-right:2px}
.chip.xp{color:var(--oxide);border-color:var(--oxide)}
.howxp summary{cursor:pointer;font:700 14px var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--oxide)}
.howxp ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.rule{font-size:14px;border-left:3px solid var(--oxide);padding:4px 0 4px 10px;color:var(--muted)}
.eactions .rep{margin-left:auto;border:0;padding:5px 4px;font-size:13px;text-decoration:underline}
.report{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)}
.toast.levelup{background:var(--oxide);color:var(--on-oxide);font-weight:700}
.skills:not(.compact){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.skills:not(.compact){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.skills:not(.compact){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* catch up */
.choice{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.choice{grid-template-columns:1fr}}
.choice .opt{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid var(--line);background:var(--bg);cursor:pointer}
.choice .opt:has(input:checked){border-color:var(--oxide);background:var(--oxide-soft)}
.custages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.custage{border:1px solid var(--line);background:var(--surface)}
.custage.locked{opacity:.65}
.cuhead{display:grid;grid-template-columns:24px 44px 1fr;gap:10px;align-items:center;padding:12px 14px;cursor:pointer}
.cuhead input{width:20px;height:20px;accent-color:var(--oxide)}
.cuhead .num{font:800 28px/1 var(--f-display);color:var(--oxide);font-variant-numeric:tabular-nums}
.cubody{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--line);padding-top:12px}

/* skill icons + hover cards */
.skill{position:relative;cursor:default}
.skill:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
.sicon{grid-row:1/4;width:40px;height:40px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--surface);color:var(--ink)}
.sicon svg,.th svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skills.compact .sicon{grid-row:auto;width:32px;height:32px}
.skills.compact .sicon svg{width:20px;height:20px}
.skill:hover .sicon,.skill:focus .sicon{border-color:var(--oxide);color:var(--oxide)}
.tip{position:absolute;z-index:8;left:0;bottom:calc(100% + 8px);width:260px;max-width:80vw;display:flex;flex-direction:column;gap:5px;padding:12px;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.4;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s,transform .12s;pointer-events:none}
.tip.left{left:auto;right:0}
.tip::after{content:"";position:absolute;top:100%;left:18px;border:7px solid transparent;border-top-color:var(--ink)}
.tip.left::after{left:auto;right:18px}
.skill:hover .tip,.skill:focus .tip,.skill:focus-within .tip{opacity:1;visibility:visible;transform:none}
.th{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid rgba(127,127,127,.4)}
.th b{font:800 18px var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.th span{margin-left:auto;font:700 13px var(--f-mono);color:var(--oxide)}
.tl b{color:inherit;font-weight:700}
.sname{white-space:normal}
@media (prefers-reduced-motion:reduce){.tip{transition:none}}
.tip{width:min(260px,calc(100vw - 32px))}
.tip .tl{display:block;font:400 13px/1.4 var(--f-body);text-transform:none;letter-spacing:0}
.tip .tl b{display:inline;font:700 13px var(--f-body);text-transform:none;letter-spacing:0;color:inherit}
.tip{display:none}
.skill:hover .tip,.skill:focus .tip,.skill:focus-within .tip{display:flex}
@media (max-width:620px){.sname{font-size:13px;letter-spacing:.02em}.skill{grid-template-columns:34px 1fr auto;column-gap:8px;padding:8px}.sicon{width:34px;height:34px}.sicon svg{width:20px;height:20px}.slvl{font-size:22px}}
.skills.compact{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.skills.compact .sname{font-size:13px;letter-spacing:.02em}

/* skill badges across the site */
.skchip{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px 3px 5px;border:1px solid var(--line);color:var(--ink);background:var(--surface);white-space:nowrap;vertical-align:middle}
.skchip svg,.skmark svg,.tsk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skchip .skpre{color:var(--muted)}
.skchip.xp{color:var(--oxide);border-color:var(--oxide)}
.pcard .skchip{align-self:flex-start}
.skmark{display:inline-flex;vertical-align:-3px;margin-right:5px;color:var(--oxide)}
.phlink{text-decoration:none;display:inline-flex;align-items:center}
.phlink:hover{text-decoration:underline}
.chapter-h .skchip{margin-top:4px}
.tsk{display:inline-flex;vertical-align:-3px}
.tsk svg{width:18px;height:18px}
.skchip{white-space:normal;max-width:100%;text-align:left}
.total .of{font:700 22px var(--f-display);color:var(--muted);margin-left:6px}
.buildbar{height:8px;background:var(--line)}
.buildbar i{display:block;height:100%;background:var(--oxide)}
.slvl small{font:600 12px var(--f-mono);color:var(--muted);margin-left:1px;vertical-align:2px}

/* garage car collection */
.cargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.carcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);min-width:0}
.carcard:hover{border-color:var(--ink)}
.carimg{position:relative;display:block}
.carimg img,.carimg .ph-img{width:100%;max-width:100%;aspect-ratio:16/10;object-fit:cover;display:grid;border:0;border-bottom:1px solid var(--line)}
.carimg .specs-car{position:absolute;top:10px;left:10px;background:var(--surface)}
.carbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;min-width:0}
.cartitle{font:700 24px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;overflow-wrap:anywhere}
.cartitle:hover{text-decoration:underline}
.carstats{display:flex;flex-wrap:wrap;gap:4px 14px;font:400 12px var(--f-mono);color:var(--muted)}
.carstats b{color:var(--ink);font-weight:600}
.caractions{margin-top:4px}
.addcar{border-style:dashed;justify-content:center;align-items:center;padding:24px;min-height:260px;background:transparent}
.addcar .plus{font:800 56px/1 var(--f-display);color:var(--oxide)}
.addcar b{font:700 22px var(--f-display);text-transform:uppercase}
.ulink{color:inherit;text-decoration:none;font-weight:600}
.ulink:hover{text-decoration:underline}
.carimg{text-decoration:none;color:inherit}

/* back button */
.backbtn{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 6px;margin-right:4px;background:transparent;border:1.5px solid rgba(127,127,127,.45);color:var(--head-fg);font:700 15px var(--f-display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.backbtn:hover{border-color:var(--oxide);color:var(--oxide)}
.backbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.backbtn{min-width:44px;min-height:44px;justify-content:center;padding:0 6px}.backbtn span{display:none}.brand{font-size:21px}}
@media (max-width:640px){.brand{font-size:19px;letter-spacing:.04em}.who .lvl-tag + .badge{display:none}header.top .wrap{gap:8px 12px}}
.skchip{display:inline-block;line-height:1.5}
.skchip svg{vertical-align:-3px;margin-right:6px}
@media (max-width:640px){header.top .wrap{gap:8px 8px}.brand{font-size:18px;letter-spacing:.03em}.backbtn{margin-right:0}}
@media (max-width:360px){.brand{font-size:16px}}

/* Back button floats halfway up the right-hand side on every screen size */
@media all{
  .backbtn{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));top:50%;bottom:auto;transform:translateY(-50%);z-index:15;width:58px;height:58px;min-width:58px;min-height:58px;margin:0;padding:0;justify-content:center;border-radius:50%;border:0;background:var(--oxide);color:var(--on-oxide,#fff);box-shadow:0 6px 18px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3);-webkit-tap-highlight-color:transparent;transition:transform .12s ease,opacity .15s ease;opacity:.72}
  .backbtn span{display:none}
  .backbtn svg{width:28px;height:28px;stroke-width:2.8;margin-left:-2px}
  .backbtn:hover{color:var(--on-oxide,#fff)}
  .backbtn:active,.backbtn:focus-visible{opacity:1}
  .backbtn:active{transform:translateY(-50%) scale(.92)}
  .backbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  footer{padding-bottom:40px}
}

/* Club membership: badge and card */
.mbadge{display:inline-flex;align-items:stretch;align-self:flex-start;border:1.5px solid var(--ink);font:600 12px var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;line-height:1;width:max-content;max-width:100%}
.mbadge .mb-k{padding:6px 8px;background:var(--ink);color:var(--bg)}
.mbadge b{padding:6px 9px;color:var(--ink)}
.mbadge.big{font-size:13px}
.mbadge.founding{border-color:var(--oxide)}
.mbadge.founding .mb-k{background:var(--oxide);color:var(--on-oxide,#fff)}
.mbadge.founding .mb-k::before{content:"\2605  "}
.mcard{position:relative;overflow:hidden;max-width:420px;aspect-ratio:1.586;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#252b31 0%,#1a1f24 60%,#2c3238 100%);color:#e9e6df;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.mcard::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px);pointer-events:none}
.mcard.founding{background:linear-gradient(135deg,#3a2419 0%,#1f1915 55%,#4a2a1b 100%)}
.mc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mc-club{font:800 18px var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.mc-tag{font:600 11px var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border:1px solid rgba(233,230,223,.45);white-space:nowrap}
.mcard.founding .mc-tag{border-color:#d9774f;color:#f0a17e}
.mc-no{font:600 clamp(30px,9vw,44px) var(--f-mono,monospace);letter-spacing:.12em}
.mc-bot{display:flex;gap:18px;flex-wrap:wrap}
.mc-bot span{display:flex;flex-direction:column;gap:3px;min-width:0}
.mc-bot b{font-weight:600;overflow-wrap:anywhere}
.mc-k{font:600 10px var(--f-mono,monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.65}

/* Build badges */
:root{--t-bronze:#8a4f22;--t-silver:#5d666e;--t-gold:#8a6409;--t-platinum:#3f6874;--t-concours:#a2281f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t-bronze:#e3a36b;--t-silver:#c9d0d6;--t-gold:#f2c94c;--t-platinum:#a9d3df;--t-concours:#f0866a}}
:root[data-theme="dark"]{--t-bronze:#e3a36b;--t-silver:#c9d0d6;--t-gold:#f2c94c;--t-platinum:#a9d3df;--t-concours:#f0866a}
.bbsvg{display:block;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.bbsvg.locked{filter:grayscale(1);opacity:.35}
.bbadge{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 9px 3px 4px;border-radius:999px;background:var(--surface);border:1.5px solid currentColor;width:max-content;align-self:flex-start}
.bbadge.tier-bronze{color:var(--t-bronze)}.bbadge.tier-silver{color:var(--t-silver)}.bbadge.tier-gold{color:var(--t-gold)}.bbadge.tier-platinum{color:var(--t-platinum)}.bbadge.tier-concours{color:var(--t-concours)}
.carimg{position:relative}
.carbadge{position:absolute;left:10px;top:10px}
.carbadge .bbadge{box-shadow:0 3px 10px rgba(0,0,0,.25)}
.projcard .pc .bbadge{margin-bottom:4px}
.buildwin{display:flex;gap:20px;align-items:center;padding:20px 22px;border:2px solid currentColor;background:var(--surface)}
.buildwin h2{margin:0}
.buildwin.tier-bronze{color:var(--t-bronze)}.buildwin.tier-silver{color:var(--t-silver)}.buildwin.tier-gold{color:var(--t-gold)}.buildwin.tier-platinum{color:var(--t-platinum)}.buildwin.tier-concours{color:var(--t-concours)}
.buildwin p{color:var(--ink)}
.buildwin .note{color:var(--muted)}
.bladder{display:flex;gap:6px;flex-wrap:wrap}
.bladder span{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:52px;text-align:center}
.bladder small{font:600 10px/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bladder span.on small{color:var(--ink)}
.trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.trophy{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px 10px 14px;border:1.5px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
.trophy:hover{border-color:currentColor}
.trophy b{font:800 18px var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.trophy span{font-size:14px;overflow-wrap:anywhere}
.trophy small{font:600 11px var(--f-mono);color:var(--muted)}
.trophy.tier-bronze b{color:var(--t-bronze)}.trophy.tier-silver b{color:var(--t-silver)}.trophy.tier-gold b{color:var(--t-gold)}.trophy.tier-platinum b{color:var(--t-platinum)}.trophy.tier-concours b{color:var(--t-concours)}
@media (max-width:560px){.buildwin{flex-direction:column;align-items:flex-start;gap:12px}}

/* Floating like / comment / follow buttons on a build page */
.frail{position:fixed;right:calc(24px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:14;display:flex;flex-direction:column;gap:10px}
.rbtn{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;padding:0;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:0 5px 14px rgba(0,0,0,.22);cursor:pointer;opacity:.86;transition:transform .12s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}
.rbtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rbtn span{position:absolute;bottom:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ink);color:var(--bg);font:700 11px/20px var(--f-mono);text-align:center}
.rbtn.on{color:var(--oxide);border-color:var(--oxide)}
.rbtn:hover,.rbtn:focus-visible{opacity:1}
.rbtn:active{transform:scale(.92);opacity:1}
.rbtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media all{
  .frail{right:calc(19px + env(safe-area-inset-right,0px));top:calc(50% + 41px);transform:none}
}

/* Home: scrolling feed of builds */
.hero-feed h1{font-size:clamp(40px,7vw,72px)}
.bfeed{display:grid;gap:22px;max-width:640px;width:100%;margin-inline:auto}
.fcard{background:var(--surface);border:1.5px solid var(--line);display:flex;flex-direction:column;min-width:0}
.fc-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 14px}
.fc-h .ulink{font-weight:700}
.fc-found{color:var(--oxide);font-size:14px}
.fc-follow{margin-left:auto;font:700 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border:1.5px solid var(--oxide);background:var(--oxide);color:var(--on-oxide,#fff);cursor:pointer}
.fc-follow.on{background:transparent;color:var(--oxide)}
.fc-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.fc-img img,.fc-img .ph-img{width:100%;height:100%;object-fit:cover;display:block}
.fc-body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 4px}
.fc-latest{margin:4px 0 0;overflow-wrap:anywhere}
.fc-actions{display:flex;align-items:center;gap:6px;padding:8px 8px 10px}
.fca{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:0;background:none;color:var(--ink);font:600 14px var(--f-body,inherit);text-decoration:none;cursor:pointer;min-height:44px}
.fca svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fca.on{color:var(--oxide)}
.fca-n{margin-left:auto;padding-right:8px}
.fpromo{border:2px solid var(--ink);padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.fpromo h3{margin:0}
.fpromo p{margin:0}
.fpromo .btn{align-self:flex-start}
.fpromo.alt{border-style:dashed}
.fpromo .paths{grid-template-columns:1fr}
.feedmore{text-align:center;color:var(--muted);padding:12px 0 24px;display:flex;justify-content:center;align-items:center;gap:8px}
.backbtn.up svg{transform:rotate(90deg);margin-left:0;margin-top:-2px}
.frail[hidden]{display:none}
.fcard{transition:border-color .2s ease,box-shadow .2s ease}
.fcard.focus{border-color:var(--oxide);box-shadow:0 0 0 1px var(--oxide)}

/* Home feed: one continuous column, posts run straight into each other */
.bfeed{gap:0;border:1px solid var(--line);background:var(--surface)}
.bfeed .fcard{border:0;border-bottom:1px solid var(--line);box-shadow:none;background:transparent}
.bfeed .fcard.focus{border-color:var(--line);box-shadow:none}
.bfeed .fcard:last-child,.bfeed > :last-child{border-bottom:0}
.bfeed .fpromo{border:0;border-bottom:1px solid var(--line);background:var(--bg);padding:24px 18px}
.bfeed .fpromo.alt{border-style:solid}
.bfeed .empty{border:0}
.fc-img{border-block:0}
.feeddiv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg);font:700 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--oxide)}
.feeddiv small{font:600 11px var(--f-mono);color:var(--muted);letter-spacing:.06em}
.fc-new{font:700 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-oxide,#fff);background:var(--oxide);padding:3px 6px}
@media (max-width:640px){
  .bfeed{border-inline:0;margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));width:auto;max-width:none}
}

/* Guide steps: a big, obvious tick-off button on every step */
.step .snum{width:42px;height:42px;border:2px solid var(--ink);display:grid;place-items:center;font:800 20px var(--f-display);color:var(--ink);background:var(--surface);cursor:pointer;user-select:none}
.step.done .snum{background:var(--oxide);border-color:var(--oxide);color:transparent;position:relative}
.step.done .snum::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--on-oxide,#fff);font-size:22px}
.donebtn{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:8px;min-height:50px;padding:10px 18px 10px 12px;border:2px solid var(--ink);background:var(--surface);cursor:pointer;font:700 15px var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:background .15s ease,border-color .15s ease,transform .1s ease;user-select:none}
.donebtn:hover{border-color:var(--oxide)}
.donebtn:active{transform:scale(.97)}
.donebtn .chk{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0;border:2px solid currentColor;background:var(--bg);display:grid;place-items:center;flex:none;cursor:pointer}
.step .donebtn .chk::before{content:""}
.step .donebtn .chk:checked{background:var(--on-oxide,#fff);border-color:var(--on-oxide,#fff);color:var(--oxide);font:800 18px/1 var(--f-display)}
.step .donebtn .chk:checked::before{content:"✓"}
.donebtn .chk:focus-visible{outline:3px solid var(--oxide);outline-offset:3px}
.donebtn .db-on{display:none}
.step.done .donebtn{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide,#fff)}
.step.done .donebtn .db-on{display:inline}
.step.done .donebtn .db-off{display:none}
.step.done .body > :not(.donebtn){opacity:.6}
.step.done .body h3{opacity:1}

/* Side checklist: bigger boxes and whole-row tap targets */
.cl li label{padding:8px 8px;margin-inline:-8px;font-size:15.5px;align-items:center;border-radius:4px}
.cl li label:hover{background:var(--bg)}
.cl input{width:24px;height:24px;margin:0}
.cl input:checked::after{width:10px;height:6px;border-left-width:3px;border-bottom-width:3px}

/* Build planner: Map / List switch */
.seg{display:inline-flex;border:1.5px solid var(--ink)}
.seg button{border:0;background:transparent;color:var(--ink);font:700 13px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;cursor:pointer;min-height:40px}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg)}

/* =====================================================================
   Simple theme. Clean, friendly, social-app style: one plain font, normal
   capitalisation, rounded cards with soft shadows, light dividers, pill
   buttons. Same colours as before. Delete this block to go back to the
   original workshop-manual look.
   ===================================================================== */
:root{
  --f-display:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px;--r-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.08),0 1px 6px rgba(0,0,0,.04);
  --line:#d9d7d0;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--line:#2f353b;--shadow:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--line:#2f353b;--shadow:0 1px 2px rgba(0,0,0,.4)}
body{font-size:16.5px}
/* No shouting: normal case and spacing everywhere */
*,*::before,*::after{text-transform:none!important;letter-spacing:normal!important}
h1,h2,h3,h4{font-family:var(--f-body);font-weight:700;letter-spacing:-.01em!important;line-height:1.15}
h1{font-size:clamp(28px,5vw,40px)}
h2{font-size:clamp(21px,3.4vw,26px)}
h3{font-size:19px}
.hero-feed h1,.hero-simple h1{font-size:clamp(30px,6vw,46px)}
.eyebrow{font:600 13.5px var(--f-body);color:var(--muted)}
.lede{font-size:18px}
/* Header: simple bar */
header.top .wrap{padding-block:8px}
.brand{font:800 21px/1 var(--f-body)}
nav.main a{font:600 15.5px var(--f-body);opacity:.8;padding:8px 12px;border-radius:var(--r-sm);border-bottom:0}
nav.main a:hover{background:rgba(255,255,255,.08);opacity:1}
nav.main a[aria-current="page"]{opacity:1;background:rgba(255,255,255,.12);box-shadow:inset 0 -3px 0 var(--oxide)}
/* Cards and panels: rounded, soft shadow, thin line */
.box,.pcard,.tier,.specs,.safety,.paywall,.log,.msg,.empty,.projcard,.video,.path,.spec,.answer,.feeditem,.ecard,.skill,.choice,.custage,.carcard,.buildwin,.trophy,.fcard,.fpromo,.mbranch,.mnode,.gitem a,.tip,.mcard,.yt,.manuals li{border-radius:var(--r)!important;border-width:1px!important;box-shadow:var(--shadow)}
.mnode{box-shadow:none}
.mbranch.step1{border-width:2px!important}
.pcard,.carcard,.projcard,.fcard,.mbranch,.trophy,.ecard{overflow:hidden}
.ph-img,.coverimg,.tlimg,.carimg img,.carimg .ph-img,.photo-grid img,.photo-grid .ph-img{border-radius:var(--r-sm)}
.carcard .carimg img,.carcard .carimg .ph-img,.projcard .ph-img,.projcard img{border-radius:0}
/* Buttons: rounded, softer */
.btn{border-radius:999px!important;font-family:var(--f-body)!important;font-weight:700!important;border-width:1px!important;padding-inline:18px}
.btn.small{padding-inline:14px}
.linkbtn{font-family:var(--f-body)}
.chip,.badge,.lvl,.lvl-tag,.skchip,.bbadge,.mbadge,.fc-new,.mc-tag,.fc-follow,.equip span,.vote,.nicon{border-radius:999px!important;font-family:var(--f-body)!important}
.mbadge{overflow:hidden}
.fc-follow{padding:6px 14px;font-size:14px}
.seg{border-radius:999px;overflow:hidden;border-width:1px}
.seg button{font:600 14px var(--f-body)}
.tabs button,.filters button{border-radius:999px!important}
.field input,.field select,.field textarea,.log input,.inp-sm,.cform input{border-radius:var(--r-sm)!important;border-width:1px!important}
/* Guide steps */
.step .snum{border-radius:50%;width:38px;height:38px;font:700 17px var(--f-body);border-width:1.5px}
.donebtn{border-radius:999px;font:700 15px var(--f-body);border-width:1.5px;padding:9px 18px 9px 10px}
.donebtn .chk{border-radius:50%}
.cl input{border-radius:6px}
/* Home feed: separate rounded posts like a social feed */
.bfeed{gap:14px;border:0;background:transparent}
.bfeed .fcard{border:1px solid var(--line)!important;border-radius:var(--r)!important;background:var(--surface);box-shadow:var(--shadow)}
.bfeed .fpromo{border:1px solid var(--line)!important;border-radius:var(--r)!important;background:var(--surface)}
.feeddiv{background:transparent;border:0;padding:8px 4px 0;color:var(--muted);font:700 15px var(--f-body)}
.feeddiv small{font:500 13px var(--f-body)}
.fc-actions{border-top:1px solid var(--line);margin:6px 12px 0;padding:4px 0 6px;justify-content:space-around}
.fca{flex:1;justify-content:center;border-radius:var(--r-sm);font-weight:600;color:var(--muted)}
.fca:hover{background:var(--bg)}
.fca.on{color:var(--oxide)}
.fca-n{display:none}
@media (max-width:640px){.bfeed{margin-inline:-8px}.bfeed .fcard,.bfeed .fpromo{border-radius:10px!important}}
/* Mind map */
.mm-hub{border-width:1.5px}
.mb-step,.mm-key i{font-family:var(--f-body)}
.mbranch header b{font:700 17px var(--f-body)}
.mbranch header small,.mn-n,.mc-hint,.mc-where,.mm-go{font-family:var(--f-body)!important;font-weight:600}
.mcanvas{border-radius:0}
/* Floating buttons and misc */
.trophy b,.mc-club,.mc-no{font-family:var(--f-body)}
.mc-no{font-weight:700;letter-spacing:.06em!important}
h1{font-size:clamp(28px,5vw,40px)!important;font-weight:800}
.hero-feed h1,.hero-simple h1{font-size:clamp(30px,6vw,46px)!important}
.specs,.video,.pcard,.gitem a,.carcard,.box,.tier:not(.full),.path,.ecard,.feeditem,.log,.empty,.custage,.choice,.skill,.answer,.yt{border-color:var(--line)!important}
.video .play{border-radius:var(--r-sm)}

/* Feed: skill levels earned on each build, icon + level / most possible on that build */
.bskills{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;margin-top:4px}
.bsk{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;background:var(--bg);font-size:13.5px;line-height:1;min-width:0}
.bsk svg,.bsk .sicon{width:17px;height:17px;flex:none;color:var(--oxide)}
.bsk b{font-weight:700}
.bsk small{color:var(--muted);font-size:12px}
.bsk.zero{opacity:.45}
.bsk.zero svg,.bsk.zero .sicon{color:var(--muted)}
.bsk svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bsk.maxed{background:var(--oxide-soft)}
.bsk.maxed b{color:var(--oxide)}
.bsk-note{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* Feed: tap a skill for details */
button.bsk{border:0;cursor:pointer;color:inherit;font:inherit;font-size:13.5px;-webkit-tap-highlight-color:transparent}
button.bsk:hover{background:var(--oxide-soft)}
button.bsk[aria-expanded="true"]{outline:2px solid var(--oxide);outline-offset:1px}
.skpop{position:fixed;z-index:30;display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.22);font-size:14px;line-height:1.4;animation:sppop .14s ease-out}
@keyframes sppop{from{opacity:0;transform:translateY(4px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.skpop{animation:none}}
.skpop p{margin:0}
.sp-h{display:flex;align-items:center;gap:10px}
.sp-h > div{flex:1;min-width:0}
.sp-h b{display:block;font-size:17px}
.sp-h small{color:var(--muted)}
.sp-ic{width:38px;height:38px;border-radius:50%;background:var(--oxide-soft);color:var(--oxide);display:grid;place-items:center;flex:none}
.sp-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-x{border:0;background:var(--bg);width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.sp-xp{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.sp-xp small{color:var(--muted)}
.sp-bar{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sp-bar i{display:block;height:100%;background:var(--oxide)}
.sp-s{color:var(--muted);font-size:13px}
.sp-st{display:flex;flex-wrap:wrap;gap:6px}
.sp-st span{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--muted)}
.sp-st span.on{background:var(--oxide-soft);color:var(--oxide)}
.sp-st span.out{text-decoration:line-through;opacity:.6}
.hero-feed .club-name{font:700 clamp(19px,3.2vw,24px)/1.2 var(--f-body);color:var(--oxide);margin-bottom:-4px}


/* =====================================================================
   Build planner: the build sheet. A dark, workshop-at-night panel that runs
   top to bottom in three tiers. The middle tier's jobs sit side by side
   (swipe sideways on a phone). Always dark, in light and dark mode.
   ===================================================================== */
.bsheet{--bs-bg:#121518;--bs-panel:#1a1f24;--bs-line:rgba(255,255,255,.09);--bs-text:#ece9e2;--bs-muted:#9aa1a8;--bs-cu:#d0743f;--bs-cu2:#f0a46c;--bs-num:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  position:relative;color:var(--bs-text);background:
   linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 44px,
   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/44px 100%,
   radial-gradient(120% 60% at 50% 0%,#20262c 0%,var(--bs-bg) 60%);
  border-radius:22px;padding:22px 22px 0;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.bsheet a{color:inherit}
/* the copper spine down the left */
.bsheet::before{content:"";position:absolute;left:47px;top:150px;bottom:70px;width:2px;background:linear-gradient(var(--bs-cu),rgba(208,116,63,.25));opacity:.7}
/* build plate */
.bs-plate{position:relative;display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:14px;background:linear-gradient(135deg,#2a3036,#1b2025 60%,#262c32);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.35);margin-bottom:28px;z-index:1}
.bs-rivet{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8d949b,#3b4147);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.bs-rivet.tl{top:9px;left:9px}.bs-rivet.tr{top:9px;right:9px}.bs-rivet.bl{bottom:9px;left:9px}.bs-rivet.br{bottom:9px;right:9px}
.bs-plate-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bs-kicker{font:600 12px var(--bs-num);letter-spacing:.22em!important;text-transform:uppercase!important;color:var(--bs-cu2)}
.bs-plate-t > b{font:800 clamp(26px,5vw,38px)/1 var(--bs-num);letter-spacing:.02em!important;text-transform:uppercase!important;overflow-wrap:anywhere}
.bs-stats{display:flex;gap:16px;flex-wrap:wrap;color:var(--bs-muted);font-size:14px}
.bs-stats b{color:var(--bs-text);font-weight:700}
.bs-addcar{font-size:14px;color:var(--bs-cu2)!important;text-decoration:none}
.bs-ring{--p:0;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--bs-cu) calc(var(--p) * 1%),rgba(255,255,255,.1) 0);box-shadow:0 0 24px rgba(208,116,63,.25)}
.bs-ring > span{width:68px;height:68px;border-radius:50%;background:#1a1f24;display:grid;place-items:center;font:700 13px var(--bs-num);color:var(--bs-muted)}
.bs-ring b{font:800 26px/1 var(--bs-num);color:var(--bs-text)}
/* tiers */
.bs-tier{position:relative;z-index:1;margin-bottom:30px}
.bs-th{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.bs-num{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--bs-bg);border:2px solid var(--bs-cu);font:800 22px var(--bs-num);color:var(--bs-cu2);box-shadow:0 0 0 6px var(--bs-bg)}
.bs-th h3{margin:0;font:800 clamp(24px,4vw,30px)/1 var(--bs-num)!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:var(--bs-text)}
.bs-th small{display:block;margin-top:4px;color:var(--bs-muted);font-size:14px}
.bs-lanes{display:grid;gap:14px;padding-left:68px}
.bs-lanes.multi{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.bs-lane{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:rgba(26,31,36,.86);border:1px solid var(--bs-line);backdrop-filter:blur(2px)}
.bs-lane header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bs-lane header b{font:700 15px var(--bs-num);letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--bs-cu2)}
.bs-lane header small{font-size:12px;color:var(--bs-muted)}
.bs-stages{display:flex;flex-direction:column;gap:8px}
.bs-tier.t01 .bs-stages,.bs-tier.t03 .bs-stages{flex-direction:row;flex-wrap:wrap;align-items:stretch}
.bs-tier.t01 .bs-stage,.bs-tier.t03 .bs-stage{flex:1 1 200px}
.bs-join{align-self:center;flex:none;width:18px;height:2px;background:var(--bs-cu);opacity:.6;position:relative}
.bs-join::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--bs-cu);border-right:0}
.bs-tier.t02 .bs-join{width:2px;height:12px;margin:-4px 0}
.bs-tier.t02 .bs-join::after{right:-4px;top:auto;bottom:-6px;border:5px solid transparent;border-top-color:var(--bs-cu);border-bottom:0}
.bs-stage{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:linear-gradient(180deg,#232a30,#1d2328);border:1px solid var(--bs-line);text-decoration:none;min-width:0;overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.bs-stage:hover{border-color:rgba(208,116,63,.6);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.bs-stage:active{transform:scale(.98)}
.bs-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(208,116,63,.12);border:1px solid rgba(208,116,63,.3)}
.bs-ic .skmark{display:grid;place-items:center}
.bs-ic svg{width:21px;height:21px;color:var(--bs-cu2)}
.bs-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bs-n{font:600 11px var(--bs-num);letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--bs-muted)}
.bs-n em{font-style:normal;color:var(--bs-cu2);margin-left:4px}
.bs-t b{font-size:16px;font-weight:700;line-height:1.2;overflow-wrap:break-word}
.bs-m{font-size:13px;color:var(--bs-muted)}
.bs-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.bs-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--bs-cu),var(--bs-cu2))}
.bs-seal{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bs-cu);color:#1a0f0b;font-weight:800;font-size:14px;box-shadow:0 0 12px rgba(208,116,63,.5)}
.bs-stage.done{border-color:rgba(208,116,63,.55);background:linear-gradient(180deg,#2b241f,#211c19)}
.bs-stage.skipped{opacity:.42}
.bs-stage.skipped b{text-decoration:line-through}
.bs-note{margin:0;font-size:13px;color:var(--bs-muted)}
.bs-swipe{display:none}
/* finish line */
.bs-flag{position:relative;z-index:1;margin:0 -22px;height:46px;display:grid;place-items:center;background:repeating-conic-gradient(#e9e6df 0 25%,#15191d 0 50%) 0 0/18px 18px}
.bs-flag span{padding:6px 16px;border-radius:999px;background:var(--bs-bg);color:var(--bs-text);font:800 15px var(--bs-num);letter-spacing:.2em!important;text-transform:uppercase!important;border:1px solid rgba(255,255,255,.15)}
/* phones: stack, and let the side-by-side jobs swipe sideways */
@media (max-width:720px){
  .bsheet{border-radius:0;margin-inline:-16px;padding:18px 16px 0}
  .bsheet::before{left:41px;top:160px}
  .bs-plate{padding:18px;gap:12px}
  .bs-ring{width:70px;height:70px}.bs-ring > span{width:56px;height:56px}.bs-ring b{font-size:21px}
  .bs-num{width:46px;height:46px;font-size:19px}
  .bs-lanes{padding-left:0}
  .bs-tier.t01 .bs-stages,.bs-tier.t03 .bs-stages{flex-direction:column}
  .bs-tier.t01 .bs-stage,.bs-tier.t03 .bs-stage{flex:none}
  .bs-tier.t01 .bs-join,.bs-tier.t03 .bs-join{width:2px;height:12px;margin:-4px 0}
  .bs-tier.t01 .bs-join::after,.bs-tier.t03 .bs-join::after{right:-4px;top:auto;bottom:-6px;border:5px solid transparent;border-top-color:var(--bs-cu);border-bottom:0}
  .bs-lanes.multi{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:2px 16px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .bs-lanes.multi::-webkit-scrollbar{display:none}
  .bs-lanes.multi .bs-lane{flex:0 0 84%;scroll-snap-align:center}
  .bs-swipe{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:var(--bs-muted);font-size:13px}
  .bs-dots{display:flex;gap:6px}
  .bs-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .2s,transform .2s}
  .bs-dots i.on{background:var(--bs-cu);transform:scale(1.3)}
  .bs-flag{margin:0 -16px}
}
@media (prefers-reduced-motion:reduce){.bs-stage{transition:none}}

/* Free trial invite */
.trialstrip{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;padding:18px 20px;border-radius:var(--r,12px);color:#f3efe8;background:radial-gradient(120% 140% at 0% 0%,#3a2418 0%,#1a1f24 55%,#15191d 100%);border:1px solid rgba(208,116,63,.45);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.ts-t{flex:1 1 260px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ts-k{align-self:flex-start;font:800 12px "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.18em!important;text-transform:uppercase!important;color:#1a0f0b;background:#e08a55;padding:4px 10px;border-radius:999px;margin-bottom:4px}
.ts-t b{font-size:20px;line-height:1.2}
.ts-t span:last-child{color:#c9c4bb;font-size:15px}
.trialstrip .btn.primary{background:#d0743f;border-color:#d0743f;color:#1a0f0b}
.trialstrip .btn.primary:hover{background:#e08a55}
.trialtag{margin:2px 0 0;font-weight:700;color:var(--oxide)}
.hero-feed + .trialstrip{margin-top:-8px}
.bs-stage.locked{background:linear-gradient(180deg,#1e2328,#191d21)}
.bs-stage.locked .bs-t b{color:#c9c4bb}
.bs-stage.locked .bs-ic{filter:grayscale(.6);opacity:.75}
.bs-lock{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.bs-lock svg{width:15px;height:15px;fill:none;stroke:#e08a55;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bs-unlock{position:relative;z-index:1;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin:-12px 0 28px;padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,rgba(208,116,63,.22),rgba(208,116,63,.06));border:1px solid rgba(208,116,63,.5)}
.bs-unlock > div{flex:1 1 240px;display:flex;flex-direction:column;gap:3px}
.bs-unlock b{font-size:17px;color:#f3efe8}
.bs-unlock span{color:#c9c4bb;font-size:14.5px}
.bs-unlock .btn.primary{background:#d0743f;border-color:#d0743f;color:#1a0f0b}

/* Guide: "Why we do it this way" read-more */
.why{border:1px solid var(--line);border-radius:var(--r,12px);background:var(--surface);box-shadow:var(--shadow,none);max-width:760px}
.why summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.why summary::-webkit-details-marker{display:none}
.why summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;flex:none}
.why[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.why summary > span:not(.why-ic){display:flex;flex-direction:column;gap:2px}
.why summary b{font-size:16px}
.why summary small{color:var(--muted);font-size:13.5px}
.why-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--oxide-soft);color:var(--oxide);font-weight:800}
.why ul{margin:0;padding:0 18px 16px 62px;display:flex;flex-direction:column;gap:10px}
.why li{line-height:1.5}
@media (max-width:560px){.why ul{padding-left:36px}}

/* Build sheet in the site's own style: same cards, colours and fonts as everywhere else.
   (Overrides the darker workshop look above. Delete this block to bring that back.) */
.bsheet{--bs-bg:var(--bg);--bs-text:var(--ink);--bs-muted:var(--muted);--bs-line:var(--line);--bs-cu:var(--oxide);--bs-cu2:var(--oxide);--bs-num:var(--f-body);
  color:var(--ink);background:none;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.bsheet::before{left:25px;top:130px;bottom:40px;background:var(--line);opacity:1;width:2px}
.bs-plate{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r,12px)}
.bs-rivet{display:none}
.bs-kicker,.bs-plate-t > b,.bs-th h3,.bs-lane header b,.bs-n,.bs-flag span,.bs-num{text-transform:none!important;letter-spacing:normal!important}
.bs-kicker{font:600 14px var(--f-body);color:var(--oxide)}
.bs-plate-t > b{font:800 clamp(24px,4.5vw,32px)/1.1 var(--f-body)}
.bs-stats b{color:var(--ink)}
.bs-addcar{color:var(--oxide)!important}
.bs-ring{background:conic-gradient(var(--oxide) calc(var(--p) * 1%),var(--line) 0);box-shadow:none}
.bs-ring > span{background:var(--surface);font:600 13px var(--f-body)}
.bs-ring b{font:800 24px/1 var(--f-body);color:var(--ink)}
.bs-num{background:var(--surface);border:2px solid var(--oxide);color:var(--oxide);font:800 18px var(--f-body);box-shadow:0 0 0 6px var(--bg)}
.bs-th h3{font:700 clamp(21px,3.4vw,26px)/1.15 var(--f-body)!important;color:var(--ink)}
.bs-lane{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:none;border-radius:var(--r,12px)}
.bs-lane header b{font:700 16px var(--f-body);color:var(--ink)}
.bs-stage{background:var(--bg);border:1px solid var(--line);border-radius:10px}
.bs-stage:hover{border-color:var(--oxide);box-shadow:var(--shadow)}
.bs-ic{background:var(--oxide-soft);border:0}
.bs-ic svg{color:var(--oxide)}
.bs-ic .skmark svg{stroke:currentColor}
.bs-n{font:600 12px var(--f-body);color:var(--muted)}
.bs-n em{color:var(--oxide)}
.bs-t b{color:var(--ink)}
.bs-bar{background:var(--line)}
.bs-bar i{background:var(--oxide)}
.bs-seal{background:var(--oxide);color:var(--on-oxide,#fff);box-shadow:none}
.bs-stage.done{background:var(--oxide-soft);border-color:var(--oxide)}
.bs-stage.locked{background:var(--bg)}
.bs-stage.locked .bs-t b{color:var(--ink)}
.bs-stage.locked .bs-ic{filter:grayscale(.5);opacity:.7}
.bs-lock{background:var(--surface);border:1px solid var(--line)}
.bs-lock svg{stroke:var(--oxide)}
.bs-join{background:var(--oxide)}
.bs-unlock{background:var(--oxide-soft);border:1px solid var(--oxide);border-radius:var(--r,12px)}
.bs-unlock b{color:var(--ink)}
.bs-unlock span{color:var(--muted)}
.bs-unlock .btn.primary{background:var(--oxide);border-color:var(--oxide);color:var(--on-oxide,#fff)}
.bs-flag{margin:0;height:40px;border-radius:var(--r,12px);background:repeating-conic-gradient(var(--ink) 0 25%,var(--surface) 0 50%) 0 0/16px 16px;opacity:.9}
.bs-flag span{background:var(--surface);color:var(--ink);border:1px solid var(--line);font:700 14px var(--f-body)}
.bs-dots i{background:var(--line)}
.bs-dots i.on{background:var(--oxide)}
@media (max-width:720px){
  .bsheet{margin-inline:0;padding:0}
  .bsheet::before{left:22px;top:150px}
  .bs-lanes.multi{margin-inline:-16px;padding-inline:16px}
  .bs-flag{margin:0}
}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand img{width:30px;height:30px;flex:none;border-radius:50%}
@media (max-width:400px){.brand img{width:26px;height:26px}}
.brand .bt{white-space:nowrap;color:var(--head-fg)}
.brand .bt span{color:var(--oxide)}

/* Build planner: one build sheet per car */
.cartabs{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.cartabs a{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-width:0;max-width:260px}
.cartabs a.on{border-color:var(--oxide);box-shadow:0 0 0 2px var(--oxide)}
.cartabs a:hover{border-color:var(--oxide)}
.cartabs img,.cartabs .ph-img,.ct-ph{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;font-size:0}
.ct-ph{display:grid;place-items:center;background:var(--oxide-soft);color:var(--oxide);font-size:17px;font-weight:800}
.cartabs .ph-img{overflow:hidden}
.cartabs span:last-child{display:flex;flex-direction:column;min-width:0}
.cartabs b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartabs small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartabs a.ct-add{border-style:dashed;box-shadow:none}
.carswitch{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:999px;background:var(--oxide-soft);font-size:14px;align-self:flex-start;max-width:100%}
.carswitch span{color:var(--oxide);font-weight:700}
.carswitch select{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--surface);max-width:220px}
.bs-ring > span{display:flex;align-items:center;justify-content:center;gap:1px}

/* =====================================================================
   Feed: one post per screen, swipe to snap to the next (TikTok style).
   ===================================================================== */
html.snapfeed{scroll-snap-type:y mandatory;scroll-padding-top:var(--hdr,64px)}
@media (hover:hover) and (pointer:fine){html.snapfeed{scroll-snap-type:y proximity}}
.snapfeed #view > .stack-lg > section:first-child{scroll-snap-align:start}
.snapfeed .bfeed{gap:12px}
.snapfeed .bfeed > .fcard,.snapfeed .bfeed > .fpromo{scroll-snap-align:start;scroll-snap-stop:always}
.snapfeed .bfeed > .fcard{height:calc(100svh - var(--hdr,64px) - 12px);display:flex;flex-direction:column;overflow:hidden}
.snapfeed .fc-h{flex:none;padding:10px 14px}
.snapfeed .fc-img{flex:1 1 auto;aspect-ratio:auto;min-height:0}
.snapfeed .fc-img img,.snapfeed .fc-img .ph-img{height:100%}
.snapfeed .fc-body{flex:none;padding:10px 14px 2px;gap:5px}
.snapfeed .fc-body .cartitle{font-size:20px;line-height:1.2}
.snapfeed .fc-latest{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0}
.snapfeed .bsk-note{display:none}
.snapfeed .fc-actions{flex:none;margin-top:4px}
.snapfeed .bfeed > .fpromo{min-height:calc(60svh - var(--hdr,64px));justify-content:center}
.snapfeed .feeddiv{padding-top:2px}
.snapfeed footer{scroll-snap-align:end}
@media (min-width:700px){.snapfeed .bfeed > .fcard{height:calc(100svh - var(--hdr,64px) - 28px);max-height:900px}}
@media (prefers-reduced-motion:reduce){html.snapfeed{scroll-snap-type:y proximity}}
/* On the feed the floating buttons sit over the photo, like TikTok */
.snapfeed .frail{top:calc(var(--hdr,64px) + 90px);transform:none}
.snapfeed .bskills{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px}
.snapfeed .bsk{padding:4px 6px;font-size:12.5px}
.snapfeed .bsk svg{width:15px;height:15px}
@media (min-width:900px){.snapfeed .frail{top:50%;transform:translateY(-50%)}}
.brand .bt .bt-car{color:var(--oxide)}
.brand .bt .bt-club{color:var(--head-fg);opacity:.55}
.bell svg{width:24px;height:24px;stroke-linecap:round}
.bell svg circle{fill:currentColor;fill-opacity:.18}
.bell:hover svg{transform:rotate(-8deg);transition:transform .15s ease}
.bell{width:38px}
.bell svg{width:27px;height:27px;stroke-width:1.9}
.bell .dot{left:-6px;right:auto;top:-4px}

/* Notifications: an old-school bulb horn instead of a bell */
.bell svg.horn{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.bell svg.horn circle{fill:currentColor;fill-opacity:.18}
.bell:has(.dot:not([hidden])) svg.horn{animation:honk 1.2s ease-in-out 1}
@keyframes honk{0%,100%{transform:none}20%{transform:scale(1.15) rotate(-8deg)}40%{transform:scale(.95) rotate(4deg)}60%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.bell svg.horn{animation:none!important}}

/* Logbook: stories found along the way */
.kindpick{display:flex;flex-wrap:wrap;gap:6px}
.kopt{position:relative;cursor:pointer}
.kopt input{position:absolute;opacity:0;pointer-events:none}
.kopt span{display:inline-flex;align-items:center;gap:4px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:14.5px}
.kopt input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kopt input:focus-visible + span{outline:2px solid var(--oxide);outline-offset:2px}
.kbadge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px;width:max-content}
.k-found .kbadge,.kbadge.k-found{background:#e3edf6;color:#24527a}
.k-oops .kbadge,.kbadge.k-oops{background:#f6e1dc;color:#a3302a}
.k-win .kbadge,.kbadge.k-win{background:#e2f0e7;color:#2f6b4a}
.k-tip .kbadge,.kbadge.k-tip{background:#f6edd6;color:#8a6409}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kbadge{background:rgba(255,255,255,.08)!important;color:var(--ink)!important}}
.entry.kfind{border-left:4px solid var(--line);padding-left:12px}
.entry.k-found{border-left-color:#5b8db8}.entry.k-oops{border-left-color:#c4562f}.entry.k-win{border-left-color:#4f9a6b}.entry.k-tip{border-left-color:#c9a03a}
.entry.kfind > .kbadge{margin-bottom:4px}
.ecard.kfind > .kbadge{margin:12px 14px 0}
.fc-latest .kbadge{vertical-align:1px;font-size:12px;padding:2px 8px}

/* Notifications: an old-school bulb horn instead of a bell */
.bell svg.horn{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;transform-origin:30% 60%}
.bell svg.horn circle{fill:currentColor;fill-opacity:.25}
.bell:has(.dot:not([hidden])) svg.horn{animation:honk 1.1s ease-in-out 2}
@keyframes honk{0%,100%{transform:none}20%{transform:scale(1.15) rotate(-8deg)}40%{transform:scale(.95) rotate(4deg)}60%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.bell svg.horn{animation:none!important}}

/* Logbook: stories found along the way */
.kindpick{display:flex;flex-wrap:wrap;gap:6px}
.kopt{position:relative;cursor:pointer}
.kopt input{position:absolute;opacity:0;pointer-events:none}
.kopt span{display:inline-flex;align-items:center;gap:4px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:14.5px}
.kopt input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kopt input:focus-visible + span{outline:2px solid var(--oxide);outline-offset:2px}
.kbadge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px;width:max-content}
.k-found .kbadge,.kbadge.k-found{background:#e3edf6;color:#24527a}
.k-oops .kbadge,.kbadge.k-oops{background:#f6e1dc;color:#a3302a}
.k-win .kbadge,.kbadge.k-win{background:#e2f0e7;color:#2f6b4a}
.k-tip .kbadge,.kbadge.k-tip{background:#f6edd6;color:#8a6409}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kbadge{background:rgba(255,255,255,.08)!important;color:var(--ink)!important}}
.entry.kfind{border-left:4px solid var(--line);padding-left:12px}
.entry.k-found{border-left-color:#5b8db8}.entry.k-oops{border-left-color:#c4562f}.entry.k-win{border-left-color:#4f9a6b}.entry.k-tip{border-left-color:#c9a03a}
.entry.kfind > .kbadge{margin-bottom:4px}
.ecard.kfind > .kbadge{margin:12px 14px 0}
.fc-latest .kbadge{vertical-align:1px;font-size:12px;padding:2px 8px}
.kopt > span span{padding:0;border:0;background:none;border-radius:0;font-size:inherit}
.kopt input:checked + span span{background:none}

/* Skill info boxes: show while hovering, or when reached with the keyboard. A mouse click no longer pins them open. */
.skill:focus .tip,.skill:focus-within .tip{display:none;opacity:0;visibility:hidden}
.skill:hover .tip,.skill:focus-visible .tip,.skill:has(:focus-visible) .tip{display:flex;opacity:1;visibility:visible;transform:none}

/* ---------- steps marked "not needed for my build" ---------- */
.step .stepout { display: block; align-self: flex-start; text-align: left; margin: 8px 0 0; padding: 4px 0; font-size: .85rem; color: var(--muted, #6b6b6b); }
.step .stepout:hover { color: inherit; }
.step.out { opacity: .6; }
.step.out .snum { background: transparent; border-style: dashed; color: var(--muted, #6b6b6b); }
.step.out h3 { text-decoration: line-through; text-decoration-thickness: 1px; }
.step.out .stepout { opacity: 1; font-weight: 600; }
.cl li.cl-out { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; color: var(--muted, #6b6b6b); }
.cl li.cl-out span { text-decoration: line-through; }
.cl li.cl-out small { white-space: nowrap; font-size: .75rem; }

/* ---------- entries that cover more than one stage ---------- */
.alsopick{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.alsopick summary{cursor:pointer;font-weight:600;font-size:14.5px}
.alsopick[open] summary{margin-bottom:8px}
.alsopick .note{margin:0 0 10px}
.alsopick .kopt span{font-size:13.5px;padding:6px 11px}
.alsopick .kopt input:disabled + span{opacity:.4;cursor:not-allowed}
.alsotag{white-space:normal}
.alsotag .skmark{margin-right:2px}
.entry.eref{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-left:3px solid var(--line);background:transparent}
.entry.eref .linkbtn{text-align:left;color:var(--ink);font-weight:600}

/* ---------- AI disclaimer on manual lookups ---------- */
.aiwarn{margin:6px 0 0;padding:8px 10px;border-left:3px solid #c9902b;background:rgba(201,144,43,.1);font-size:13.5px;line-height:1.4}
.ailabel{margin-left:8px;font-size:12px;color:var(--muted);white-space:nowrap}

/* ---------- swipeable car photos (profile photo first, then logbook photos) ---------- */
.pstrip,.ps-one{position:relative;display:block}
.fc-img .pstrip,.fc-img .ps-one,.fc-img .ps-track{height:100%}
.ps-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ps-track::-webkit-scrollbar{display:none}
.ps-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:block;text-decoration:none;color:inherit}
.fc-img .ps-slide img,.fc-img .ps-slide .ph-img,.fc-img .ps-one img,.fc-img .ps-one .ph-img{width:100%;height:100%;object-fit:cover;display:block}
.ps-count{position:absolute;top:10px;right:10px;padding:3px 9px;border-radius:999px;background:rgba(20,22,24,.62);color:#fff;font:600 12px/1.4 var(--f-body);pointer-events:none}
.ps-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.ps-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.4);transition:transform .15s ease,background .15s ease}
.ps-dots i.on{background:#fff;transform:scale(1.3)}
.ps-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#222;font:700 24px/1 var(--f-body);cursor:pointer;display:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.ps-arrow.prev{left:10px}.ps-arrow.next{right:10px}
@media (hover:hover){.pstrip:hover .ps-arrow:not([hidden]){display:grid;place-items:center}}
.pstrip.hero .ps-slide img,.pstrip.hero .ps-slide .ph-img,.ps-one.hero img,.ps-one.hero .ph-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pstrip.hero{border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden}
.ps-one.hero img,.ps-one.hero .ph-img{border:2px solid var(--ink);border-radius:var(--r-sm)}
.carimg .pstrip{overflow:hidden}
/* profile photo picker on your own build */
.ppick{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.ppick summary{cursor:pointer;font-weight:600}
.ppick[open] summary{margin-bottom:8px}
.ppick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:6px}
.ppick-grid button{padding:0;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;overflow:hidden}
.ppick-grid button.on{border-color:var(--oxide)}
.ppick-grid img,.ppick-grid .ph-img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pstrip{max-width:100%;overflow:hidden}
.ps-track{width:100%}
.phero>.cover,.carcard,.carimg,.fcard,.fc-img{min-width:0;max-width:100%}

/* ---------- manual page viewer ---------- */
html.mv-open{overflow:hidden}
.mview{position:fixed;inset:0;z-index:200;background:rgba(15,17,19,.6);display:flex;align-items:center;justify-content:center;padding:12px}
.mv-panel{background:var(--surface);width:min(920px,100%);height:min(94vh,1200px);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.mv-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.mv-h b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw}
.mv-h small{color:var(--muted)}
.mv-x{border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:var(--ink);padding:0 6px}
.mv-body{flex:1;overflow:auto;padding:12px;background:#e9e7e2}
.mv-body canvas{display:block;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.2)}
.mv-text{white-space:pre-wrap;background:#fff;padding:16px;border-radius:6px;font:14px/1.5 var(--f-mono,monospace);margin:0}
.mv-text mark{background:#ffe08a;padding:0 2px}
.mv-local{margin-top:12px}
.mv-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.pageref{border:1px solid var(--oxide);background:transparent;color:var(--oxide);border-radius:999px;padding:2px 10px;font:600 13px var(--f-body);cursor:pointer;margin-right:4px}
.pageref:hover{background:var(--oxide);color:#fff}

/* ---------- Ask AI ---------- */
.askai{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.askai-out{flex-basis:100%}
.ai-mini{margin:4px 0 8px;padding-left:18px}
.ai-list,.joblist,.notelist,.srclist{list-style:none;margin:0;padding:0}
.ai-list li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.ai-list label,.joblist label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1}
.ai-list input,.joblist input{margin-top:4px;width:18px;height:18px;flex:none}
.ai-list small,.joblist small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.jadd{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 10px;font:600 12.5px var(--f-body);cursor:pointer;white-space:nowrap}
.jadd.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.notelist li a{display:block;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.notelist small{display:block;color:var(--muted)}
.srclist li{padding:4px 0;overflow-wrap:anywhere}
#mynotes{min-height:160px}
/* ---------- jobs list ---------- */
.jobadd{display:flex;gap:8px}
.jobadd input{flex:1;min-width:0}
.joblist li{display:flex;gap:8px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.joblist li.done b{text-decoration:line-through;color:var(--muted)}
.jsrc{display:inline-block;font-size:12.5px;margin-top:2px}
.jdel{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}
.jdel:hover{color:var(--oxide)}