/* BEDROCK driver app. Light, charcoal and crimson, gold accents, 2px radius, big touch targets for gloves. */
:root{--red:#b3122b;--red-d:#8c0d21;--char:#23262b;--ink:#1d1f23;--mute:#5d636d;--gold:#b88f34;--line:#dcdfe4;--bg2:#f4f5f7;--ok:#1d6b3a;--r:2px;--logo-a:#e2354f}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 15px/1.5 "Noto Sans",system-ui,sans-serif;color:var(--ink);background:#c9cdd3;display:grid;place-items:start center;min-height:100vh;padding:clamp(0px,3vw,32px) 0;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
a{color:var(--red)}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .a{stroke:var(--red)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.app{width:min(400px,100vw);height:min(820px,100vh);background:#fff;position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.25)}
@media (max-width:440px){.app{border-radius:0;height:100vh;height:100dvh}body{padding:0}}
.sb{display:flex;justify-content:space-between;padding:10px 18px 2px;font-size:12px;font-weight:600;color:#c8ccd2;background:var(--char)}
.top{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 14px;background:var(--char);color:#fff;border-bottom:3px solid var(--red)}
.brand{display:flex;gap:10px;align-items:center}
.brand .mark{width:32px;height:32px;color:#fff}
.brand b{display:block;font:700 17px/1 "Noto Serif",serif;letter-spacing:.08em}
.brand span{font-size:12px;color:#c8ccd2}
.hos{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#ffd3da;border:1px solid #4a4f57;padding:6px 9px;border-radius:var(--r)}
main{flex:1;overflow-y:auto;padding:14px 16px 96px}
.view{display:none}.view.on{display:block}
.load{border:1px solid var(--line);border-top:3px solid var(--gold);padding:14px;border-radius:var(--r)}
.l-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.06em}
.pill{font-style:normal;background:#fdecef;color:var(--red);padding:3px 8px;border-radius:var(--r)}
.pill.ok{background:#e4f3ea;color:var(--ok)}
.load h1{font:700 21px "Noto Serif",serif;color:var(--char);margin:6px 0 2px}
.load>p{color:var(--mute);font-size:14px}
.l-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.l-g div{background:var(--bg2);padding:8px;border-radius:var(--r)}
.l-g span{display:block;font-size:11.5px;color:var(--mute)}
.l-g b{font-size:13.5px}
.prog{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.pb{flex:1;height:8px;background:var(--line);border-radius:var(--r);overflow:hidden}
.pb i{display:block;height:100%;width:0;background:var(--red);transition:width .3s}
.prog span{font-size:13px;font-weight:700;color:var(--char)}
.sub{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);position:relative}
.sub::after{content:"";position:absolute;left:0;bottom:-1px;width:40px;height:2px;background:var(--red)}
.plan{background:var(--bg2);border-radius:var(--r);padding:12px}
.plan svg{width:100%;height:auto}
.plan .dk{fill:var(--char)}
.plan .coil circle{fill:#e9ebee;stroke:var(--mute);stroke-width:2}
.plan .chn path{stroke:var(--red);stroke-width:2.4;stroke-dasharray:3 2}
.plan p{font-size:13.5px;color:var(--mute);margin-top:6px}
.plan b{color:var(--char)}
.chk li button{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:12px 4px;border-bottom:1px solid var(--line);min-height:58px}
.chk i{width:26px;height:26px;border:2px solid #b5bac2;border-radius:var(--r);flex:none;position:relative;transition:background .15s,border-color .15s}
.chk button[aria-pressed="true"] i{background:var(--red);border-color:var(--red)}
.chk button[aria-pressed="true"] i::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.chk b{display:block;font-size:14.5px}
.chk small{font-size:12.5px;color:var(--mute)}
.chk button[aria-pressed="true"] b{color:var(--mute);text-decoration:line-through}
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.photos button{aspect-ratio:1;border:1.5px dashed #b5bac2;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:var(--mute)}
.photos .ic{width:22px;height:22px}
.photos button.got{border-style:solid;border-color:var(--ok);background:#e4f3ea;color:var(--ok)}
.go{width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:var(--red);color:#fff;font-weight:700;font-size:16px;border-radius:var(--r)}
.go:disabled{background:#d6d9de;color:var(--mute);cursor:not-allowed}
.toast{min-height:1.5em;margin-top:10px;font-weight:600;color:var(--ok);font-size:14px}
.vh{font:700 24px "Noto Serif",serif;color:var(--char);margin:4px 0 4px}
.vp{color:var(--mute);margin-bottom:14px;font-size:14.5px}
.rc{border-left:2px solid var(--line);margin-left:8px}
.rc li{position:relative;padding:0 0 18px 20px}
.rc li::before{content:"";position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.rc li.due::before{border-color:var(--red);background:var(--red)}
.rc b{display:block}.rc span{font-size:13.5px;color:var(--mute)}
.rc li.due b{color:var(--red)}
.tip{display:flex;gap:10px;background:#fbf6ea;border-left:3px solid var(--gold);padding:12px;font-size:14px;margin-top:6px}
.tip .ic{color:var(--gold);margin-top:2px}
.gear li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.gear .ic{color:var(--red)}
.gear b{font-family:"Noto Serif",serif;font-size:18px;color:var(--char)}
.site{display:block;text-align:center;margin-top:20px;font-weight:600}
.tabbar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line);padding:8px 0 calc(10px + env(safe-area-inset-bottom))}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--mute)}
.tabbar .ic{width:24px;height:24px}
.tabbar button.on{color:var(--red)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* photography: always darkened */
.top{background:linear-gradient(90deg,rgba(29,31,35,.95) 40%,rgba(29,31,35,.75)),url(https://images.unsplash.com/photo-1697698532634-ea59b636ccea?w=900&q=70&auto=format&fit=crop) center/cover no-repeat,var(--char)}