/* Familiar shell mockups (D-024/D-025/D-031): light chrome, Bikes · Record · Rides · Video · More. */
.phone.light,.mini-phone.light{--canvas:#f7f8f5;--surface:#fff;--raised:#fff;--ink:#12140f;--ink2:#5b6159;--ink3:#8a9086;--line:#8a90865c;--levo:#c8102e;--rider:#1e6f5c;--motor:#2d6cb5;--energy:#5f3dc4;--heart:#b23a55;--eco:#3fa34d;--caution:#d68a1e;--stale:#8a9086}
.phone.light .screen,.mini-phone.light .screen{background:var(--canvas);color:var(--ink)}
.phone.light{box-shadow:0 0 90px rgba(200,16,46,.10),0 38px 100px rgba(0,0,0,.55),0 0 0 1.5px rgba(255,255,255,.5)}
.light .island{background:#050606}
.tabbar.four{grid-template-columns:repeat(4,1fr)}
.tabbar.five{grid-template-columns:repeat(5,1fr)}
.light .tabbar{background:#ffffffef;border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.light .tabbar span{color:var(--ink3);font-weight:600}
.light .tabbar span.active{color:var(--ink)}
.light .tabbar i{opacity:.9}
.light .mtile,.light .pcard,.light .chartbox,.light .settings-group{background:var(--surface);border:1px solid var(--line)}
.light .pbtn{background:var(--ink);color:#fff;border-radius:11px}
.light .pbtn.quiet{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.light .chip{background:var(--surface);border:1px solid var(--line);color:var(--ink2)}

/* Record */
.rec-map{position:absolute;left:0;right:0;top:0;height:44%;overflow:hidden;background:#eef0e9;
  background-image:linear-gradient(#dfe3da 1.5px,transparent 1.5px),linear-gradient(90deg,#dfe3da 1.5px,transparent 1.5px);background-size:46px 46px}
.rec-map .park{position:absolute;background:#cfe3bf;border-radius:30% 60% 50% 40%;width:38%;height:34%;right:-6%;top:12%}
.rec-map .park.b{width:22%;height:18%;left:4%;bottom:6%;right:auto;top:auto;border-radius:50%}
.rec-map .road{position:absolute;background:#fff;height:5px;left:-5%;right:-5%;top:38%;transform:rotate(-6deg);box-shadow:0 0 0 1px #d8dcd3}
.rec-map .road.v{width:5px;height:120%;left:46%;top:-10%;right:auto;transform:rotate(8deg)}
.rec-map .me{position:absolute;left:45%;top:47%;width:16px;height:16px;border-radius:50%;background:#0a0a0a;border:3px solid #fff;box-shadow:0 1px 4px #0004}
.rec-map .mapctl{position:absolute;right:10px;top:38%;width:34px;background:#fff;border-radius:10px;box-shadow:0 4px 12px #0002;display:grid}
.rec-map .mapctl i{display:block;height:34px;position:relative}
.rec-map .mapctl i+i{border-top:1px solid var(--line)}
.rec-map .mapctl i::after{content:"";position:absolute;inset:10px;border:1.6px solid var(--ink);border-radius:3px}
.rec-map .mapctl.gear{top:calc(38% + 120px)}
.rec-map .mapctl.gear i::after{border-radius:50%;inset:9px;border-width:2px}
.rec-map .maps{position:absolute;left:10px;bottom:8px;font-size:8px;font-weight:800;color:#555}
.rec-body{position:absolute;left:0;right:0;top:44%;bottom:61px;padding:12px 12px 0;display:flex;flex-direction:column;gap:11px}
.bike-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.bike-card .bk{width:54px;height:36px;flex:none;display:grid;place-items:center}
.bike-card .bk svg{width:48px;height:30px;stroke:var(--levo);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bike-card .bk img{width:54px;height:auto;display:block}
.bike-card b{font-size:12.5px;flex:1}
.bike-card .conn{display:flex;align-items:center;gap:4px;font-size:8px;color:var(--ink2)}
.bike-card .conn i{width:6px;height:6px;border-radius:50%;background:var(--eco);display:block}
.bike-card .chev{width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin:0 4px 4px 2px}
.stat6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px;padding:4px 0}
.stat6 div{text-align:center}
.stat6 b{display:block;font-size:13px;font-weight:700;color:var(--ink3);letter-spacing:.5px}
.stat6 b.live{color:var(--ink)}
.stat6 b small{font-size:8px;font-weight:500;color:var(--ink3);margin-left:2px}
.stat6 span{display:block;font-size:8px;color:var(--ink2);margin-top:3px}
.start-btn{background:var(--ink);color:#fff;border-radius:11px;text-align:center;font-weight:700;font-size:12px;padding:11px}
.ready-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 10px;font-size:8px;color:var(--ink2)}
.ready-row b{display:block;font-size:9.5px;color:var(--ink)}
.ready-row i{width:10px;height:10px;border-radius:3px;background:var(--energy);display:block;flex:none}
.ready-row .chev{margin-left:auto;width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(-45deg)}

/* Bikes */
.nav-inline{position:absolute;left:0;right:0;top:36px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:34px}
.nav-inline .mock-h4{font-size:12px;font-weight:700;margin:0;flex:1;text-align:center}
.nav-inline .ic{width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--line);position:relative}
.nav-inline .ic.back::after{content:"";position:absolute;left:11px;top:9px;width:7px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.nav-inline .ic.dots::after{content:"";position:absolute;left:12px;top:7px;width:3px;height:3px;border-radius:50%;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 10px 0 var(--ink)}
.nav-inline .ic.stack::after{content:"";position:absolute;inset:8px 9px;border:1.6px solid var(--ink);border-radius:2px;box-shadow:2px -2px 0 -0.2px var(--surface),2px -2px 0 1.4px var(--ink)}
.sh-body{position:absolute;left:0;right:0;top:76px;bottom:61px;padding:0 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.sh-body .mock-h5{font-size:11px;font-weight:700;margin:0}
.act-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}
.act-card small{display:block;font-size:8px;color:var(--ink2)}
.act-card b{display:block;font-size:20px;font-weight:800;letter-spacing:-.5px;margin-top:2px}
.act-card b i{font-style:normal;font-size:9px;font-weight:700;margin-left:2px}
.set-list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.set-list div{display:flex;align-items:center;gap:9px;padding:9px 11px;font-size:10.5px;border-top:1px solid var(--line)}
.set-list div:first-child{border-top:none}
.set-list div i{width:11px;height:11px;border:1.5px solid var(--ink);border-radius:3px;flex:none}
.set-list div em{margin-left:auto;font-style:normal;font-size:8px;color:var(--ink3)}
.set-list div s{text-decoration:none;width:6px;height:6px;border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:rotate(-45deg);margin-left:6px}
.set-list div em+s{margin-left:6px}
.set-list div:not(:has(em)) s{margin-left:auto}

/* Section of three light mini-phones on the homepage */
.shell-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start;margin-top:26px}
@media (max-width:860px){.shell-trio{grid-template-columns:1fr;justify-items:center}}
.shell-trio .mini-phone{aspect-ratio:390/844;position:relative}
.shell-trio .mini-phone .screen{inset:8px;border-radius:33px}
.shell-trio figcaption{font-size:13px;color:var(--ink2);margin-top:10px;text-align:center}

/* Tune (Studio) on light */
.light .studio-banner,.light .mode-tune,.light .profile-picker,.light .apply-locked,.light .pcard{background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
.light .slider{background:#e3e6df}
.light .profile-picker b,.light .mode-tune .mock-h5,.light .pcard .mock-h5{color:var(--ink)}

/* Cockpit on light (default: follows system) */
.nav-inline .end{font-size:10px;font-weight:600;color:var(--levo);width:auto;min-width:28px;text-align:right}
.rec-strip{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:10px}
.rec-strip .rec{display:flex;align-items:center;gap:5px;color:var(--levo);font-weight:700;font-variant-numeric:tabular-nums}
.rec-strip .rec i{width:8px;height:8px;border-radius:50%;background:var(--levo);display:block;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--levo)}
.rec-strip .mode{font-size:8px;font-weight:700;color:var(--ink2);background:var(--canvas);border:1px solid var(--line);border-radius:99px;padding:2px 7px}
.rec-strip b{margin-left:auto;text-align:right;font-weight:700}
.rec-strip b small{display:block;font-weight:500;font-size:7px;color:var(--ink3)}
.light .coach-chip{background:var(--surface);border:1px solid var(--line);color:var(--rider)}
.light .energy-ring{border-color:#e6e8e2;border-top-color:var(--energy);border-right-color:var(--energy);border-bottom-color:var(--energy)}
.light .page-dots i{background:#c9cdc4}.light .page-dots .on{background:var(--ink)}
.light .duet{background:#e6e8e2}

/* Performance (BR-16) */
.seg{display:grid;grid-template-columns:repeat(4,1fr);background:#e6e8e2;border-radius:9px;padding:2px}
.seg span{text-align:center;font-size:9px;padding:5px 0;color:var(--ink2);border-radius:7px}
.seg span.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px #0002}
.perf-sub{font-size:9px;color:var(--ink2)}
.perf-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.perf-totals b{display:block;font-size:13px;font-weight:800;letter-spacing:-.3px}
.perf-totals b small{font-size:7px;font-weight:500;color:var(--ink3);margin-left:2px}
.perf-totals span{display:block;font-size:7.5px;color:var(--ink2)}
.perf-totals em{display:block;font-style:normal;font-size:7px;font-weight:700}
.perf-totals em.up{color:var(--eco)}.perf-totals em.dn{color:var(--caution)}
.goalrow{display:flex;gap:8px;overflow:hidden}
.goal{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 4px;text-align:center;min-width:0}
.goal .ring{--p:0;width:46px;height:46px;border-radius:50%;margin:0 auto 5px;display:grid;place-items:center;
  background:conic-gradient(var(--levo) calc(var(--p)*1%),#e6e8e2 0)}
.goal .ring.done{background:conic-gradient(var(--eco) 100%,#e6e8e2 0)}
.goal .ring b{width:34px;height:34px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:8.5px}
.goal span{display:block;font-size:7.5px;color:var(--ink2)}
.goal small{display:block;font-size:6.5px;color:var(--ink3)}
.perf-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.perf-card>b{font-size:11px}
.perf-card>small{font-size:8px;color:var(--ink2);margin-top:-4px}
.perf-card p{font-size:8px;margin:0;color:var(--ink);line-height:1.4}
.perf-card .prov{font-size:7px;color:var(--ink3)}
.duetbars{display:flex;gap:10px;align-items:flex-end;height:70px;padding:4px 6px 0}
.duetbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:1px}
.duetbar i{display:block;border-radius:2px}
.duetbar i.r{background:var(--rider)}.duetbar i.m{background:var(--motor)}.duetbar i.e{background:var(--energy)}
.legend{font-size:7.5px;color:var(--ink2);display:flex;gap:5px;align-items:center}
.legend i{width:7px;height:7px;border-radius:50%;display:inline-block}.legend i.r{background:var(--rider)}.legend i.m{background:var(--motor)}
.mixrow{display:flex;gap:12px;align-items:center}
.donut{width:64px;height:64px;border-radius:50%;flex:none;background:conic-gradient(var(--eco) 0 34%,var(--motor) 34% 82%,var(--levo) 82% 100%);
  -webkit-mask:radial-gradient(circle,transparent 19px,#000 20px);mask:radial-gradient(circle,transparent 19px,#000 20px)}
.mixlist{flex:1;display:flex;flex-direction:column;gap:4px;font-size:8.5px}
.mixlist div{display:flex;align-items:center;gap:5px}
.mixlist i{width:7px;height:7px;border-radius:50%}.mixlist i.eco{background:var(--eco)}.mixlist i.trail{background:var(--motor)}.mixlist i.turbo{background:var(--levo)}
.mixlist span{margin-left:auto;font-weight:700}.mixlist em{font-style:normal;color:var(--ink2);width:52px;text-align:right}
.scatter{width:100%;height:72px}.scatter circle{fill:var(--heart);opacity:.55}

/* Icons: inline stroke SVGs replace the placeholder squares */
i.ic{display:inline-grid;place-items:center;width:14px;height:14px;border:none!important;border-radius:0!important;background:none!important;color:var(--ink)}
i.ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.set-list div i.ic{width:14px;height:14px}
.tabbar span i.ic{display:grid;width:16px;height:16px;margin:0 auto 3px;opacity:1;box-shadow:none!important;outline:none}
.tabbar span.active i.ic{box-shadow:none!important;background:none!important}
.tabbar span.active i.ic{color:var(--ink)}
.rec-map .mapctl i.ic{width:34px;height:34px;padding:8px;box-sizing:border-box}
.rec-map .mapctl i.ic::after{display:none}
.rec-map .mapctl.gear i.ic{padding:7px}
.ready-row i.ic.energy{width:18px;height:18px;color:var(--energy);background:none}
.ready-row i.ic.energy svg{fill:currentColor;stroke:none}
.nav-inline .ic.dots,.nav-inline .ic.back,.nav-inline .ic.stack{display:block}

/* Illustrative cards now follow the light shell */
.dark-mock.light-mock{--mock-canvas:#fff;--mock-surface:#f7f8f5;--mock-raised:#f0f2ec;--mock-ink:#12140f;--mock-ink2:#5b6159;--mock-ink3:#8a9086;--ink:#12140f;--ink2:#5b6159;--ink3:#8a9086;--surface:#f7f8f5;--raised:#f0f2ec;--line:#8a90865c;--rider:#1e6f5c;--motor:#2d6cb5;--energy:#5f3dc4;--heart:#b23a55;--eco:#3fa34d;--levo:#c8102e;background:#fff;color:var(--ink);border:1px solid #8a90865c;border-radius:14px}
.dark-mock.light-mock .mock-stat,.dark-mock.light-mock .maint-row,.dark-mock.light-mock .coach-card,.dark-mock.light-mock .target-tabs span{background:var(--surface)}
.dark-mock.light-mock .duet{background:#e6e8e2}
.dark-mock.light-mock svg path{stroke:var(--levo)}
.mini-phone.light .map-mini{background:#eef0e9}
.mini-phone.light .map-mini svg path{stroke:var(--levo)}
.mini-phone.light .map-chip{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mini-phone.light .map-bottom{background:#ffffffee;border-top:1px solid var(--line)}
.mini-phone.light .s-title .mock-h4,.mini-phone.light .s-title span{color:var(--ink)}
.mini-phone.light .rec-strip{font-size:8.5px;padding:6px 8px}
.nav-inline .done{font-size:10px;font-weight:600;color:var(--ink);width:auto}
.nav-inline .ic.film{display:grid;place-items:center}
.nav-inline .ic.film svg{width:14px;height:14px;fill:none;stroke:var(--levo);stroke-width:1.8}
.dark-mock.light-mock .selected,.dark-mock.light-mock .target-tabs .selected{color:#fff;background:var(--rider)}
.dark-mock.light-mock .bike-picker span.selected{color:#fff}

/* Route follow on light full phones + ghost pacer (BR-07.17/D-035) */
.phone.light .map-mini{background:#eef0e9}
.phone.light .map-mini svg path{stroke:var(--levo)}
.phone.light .map-chip{background:#fff;color:var(--ink);border:1px solid var(--line)}
.phone.light .map-bottom{background:#ffffffee;border:1px solid var(--line)}
.ghost-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:7.5px;color:var(--ink3)}
.ghost-row b{font:800 12px var(--round);font-variant-numeric:tabular-nums}
.ghost-row .ahead{color:var(--rider)}
.ghost-row .behind{color:var(--caution)}
.race-strip{position:relative;height:6px;border-radius:99px;background:#e6e8e2;margin:8px 0 7px}
.race-strip i{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%)}
.race-strip .you{background:var(--rider);box-shadow:0 0 0 2px #fff}
.race-strip .ghost{background:#fff;border:2px solid var(--ink3)}
.watch-route .ghost-row{margin-top:3px}
.watch-route .ghost-row b{font-size:9px}

/* Ride story whole-ride capture (BR-05.11/.12): assist mix band, sparklines */
.mixband{display:flex;height:8px;border-radius:99px;overflow:hidden;background:#e6e8e2}
.mixband i{display:block;height:100%}
.mixband .eco{background:var(--eco)}
.mixband .trail{background:var(--motor)}
.mixband .turbo{background:var(--levo)}
.mixlbl{display:flex;justify-content:space-between;font-size:7.5px;color:var(--ink2);margin-top:4px;font-weight:700}
.sparkline{display:block;width:100%;height:22px}
.sparkline path{fill:none;stroke:var(--energy);stroke-width:2;stroke-linecap:round}
.elevline{display:block;width:100%;height:26px}
.elevline path{stroke:var(--rider);stroke-width:1.6;fill:color-mix(in srgb,#1e6f5c 16%,transparent)}

/* Wrench mockups (BR-17): interpreted chips, observations, Ask */
.wchip{display:inline-block;font-size:6px;font-weight:800;letter-spacing:.09em;color:var(--levo);background:rgba(192,36,40,.1);background:color-mix(in srgb,var(--levo) 12%,transparent);border-radius:99px;padding:2px 6px}
.wrico{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex:none}
.wr-cite::before{content:"—";margin-right:3px;color:var(--ink3)}
.wr-head{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:800;color:var(--levo)}
.wr-claim{font-size:10.5px;font-weight:700;line-height:1.35}
.wr-cite{font-size:7px;color:var(--ink3);line-height:1.4}
.wr-actions{display:flex;justify-content:space-between;font-size:7.5px;color:var(--ink3)}
.wr-actions b{color:var(--ink);font-weight:700}
.wr-retracted .wr-claim{color:var(--ink3);text-decoration:line-through}
.wr-note{font-size:7px;color:var(--ink3);font-style:italic}
.wr-confirm{font-size:6.5px;color:#1e6f5c;font-weight:700}
.askq{align-self:flex-end;background:var(--ink);color:#fff;border-radius:12px 12px 3px 12px;padding:6px 9px;font-size:9px;max-width:82%;line-height:1.35}
.askbar{display:flex;gap:6px;align-items:center;margin-top:8px}
.askbar span{flex:1;border:1px solid var(--line);border-radius:99px;padding:6px 10px;font-size:8px;color:var(--ink3);background:var(--surface)}
.askbar .send{width:20px;height:20px;border-radius:50%;background:var(--levo);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800}
.askchip{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:4px 8px;font-size:7.5px;color:var(--ink);background:var(--surface);margin:2px 2px 0 0}
.ptag.sh{color:var(--eco);background:#2777381a}.ptag.nx{color:var(--motor);background:#225f9f1a}.ptag.ev{color:var(--caution);background:#b86d0e1a}