/* 预约页共用样式。色值出处同首页 mockup：墨 #1A1A1A、苜蓿轮 #8DC21F、苜蓿花 #C3E07E、tokyobike 主底 #F0F0F0。
   余量三档是状态色，单独一条车道（the081-web-design 8.3）：取 Radix 色阶第 9 步 grass #46A758 / amber #FFB224，第 8 步 gray #BBBBBB；
   每档都配文字，不只靠颜色。 */
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Caveat;src:url(/assets/fonts/caveat.woff) format('woff');font-weight:500;font-display:swap}
:root{--clover:#8DC21F;--pale:#C3E07E;--ink:#1A1A1A;--tile:#F0F0F0;--paper:#fff;--muted:#555;--rule:1px solid var(--ink);
  --ok:#46A758;--few:#FFB224;--none:#BBBBBB;--err:#C62A2F}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 Archivo,"Hiragino Sans","PingFang SC",sans-serif}
a{color:inherit}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.hand{font-family:Caveat,"Bradley Hand",cursive;font-weight:500}
.top{display:flex;align-items:center;height:64px;border-bottom:var(--rule);padding:0 24px;gap:16px}
.top .logo img{height:30px;width:auto}
.top .back{margin-left:auto;font-size:15px}
h1{font-size:clamp(36px,5vw,56px);line-height:1;letter-spacing:-.035em;margin:40px 0 8px;font-weight:700}
.lede{color:var(--muted);margin:0 0 32px;max-width:52ch}
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:999px;background:var(--ink);color:#fff;font:600 17px Archivo,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .2s,color .2s,transform .12s}
.btn:hover{background:var(--clover);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.3;cursor:not-allowed;transform:none}
.ghost{appearance:none;border:var(--rule);background:var(--paper);border-radius:999px;height:48px;padding:0 22px;font:600 16px Archivo,sans-serif;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background .2s}
.ghost:hover{background:var(--pale)}
:focus-visible{outline:3px solid var(--clover);outline-offset:3px}
input,select{font:inherit;color:inherit}
.field{display:grid;gap:6px;margin:0 0 18px}
.field label{font-weight:600;font-size:15px}
.field input,.field select{height:52px;border:var(--rule);border-radius:12px;padding:0 14px;background:var(--paper);width:100%}
.field input:focus,.field select:focus{outline:3px solid var(--clover);outline-offset:0}
.field small{color:var(--muted);font-size:14px}
.field .err{color:var(--err);font-size:14px;font-weight:600}
.field input[aria-invalid=true]{border-color:var(--err)}
.note{background:var(--tile);border-radius:16px;padding:16px 20px;margin:0 0 20px}
.note.bad{background:#FDECEC}
.foot{border-top:var(--rule);margin-top:72px;padding:28px 0 48px;font-size:15px;color:var(--muted)}
.foot a{color:var(--ink)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.dot.green{background:var(--ok)}.dot.yellow{background:var(--few)}.dot.grey{background:var(--none)}
table.sum{width:100%;border-collapse:collapse;font-size:16px}
table.sum td{padding:6px 0;vertical-align:top}
table.sum td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
table.sum tr.tot td{border-top:var(--rule);padding-top:12px;font-weight:700}
table.sum tr.now td{font-weight:700}
.spin{display:inline-block;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;margin-right:10px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.spin{animation-duration:2s}}
/* ---------- 预约表单 ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}
@media (max-width:900px){.grid{grid-template-columns:1fr;gap:0}}
.step{border-top:var(--rule);padding:28px 0 36px}
.step h2{font-size:24px;letter-spacing:-.02em;margin:0 0 4px;display:flex;align-items:baseline;gap:12px}
.step h2 .n{font-size:15px;color:var(--muted);font-weight:600}
.step .sub{color:var(--muted);margin:0 0 20px;font-size:15px}
.seg{display:inline-flex;border:var(--rule);border-radius:999px;padding:4px;gap:4px;margin:0 0 20px}
.seg button{appearance:none;border:0;background:none;border-radius:999px;height:44px;padding:0 20px;font:600 16px Archivo,sans-serif;cursor:pointer;color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg button small{font-weight:400;margin-left:6px;opacity:.75}
.cal{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:640px){.cal{grid-template-columns:1fr}.cal .m2{display:none}}
.calwrap{position:relative;margin-top:20px}
.calnav{position:absolute;top:-8px;right:0;display:flex;gap:8px}
.calnav .ghost{height:40px;width:40px;padding:0;justify-content:center}
.calnav .ghost[disabled]{opacity:.35;cursor:default;background:none}
.month h3{font-size:17px;margin:0 0 8px}
.wk,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.wk span{font-size:12px;color:var(--muted);text-align:center;padding:4px 0}
.days button{appearance:none;border:0;background:none;border-radius:10px;aspect-ratio:1/1;min-height:40px;font:500 15px Archivo,sans-serif;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0}
.days button:hover:not([disabled]){background:var(--tile)}
.days button[disabled]{color:#9a9a9a;cursor:default}
.days button[disabled] .dot{opacity:.6}
.days button.in{background:var(--pale)}
.days button[aria-pressed=true]{background:var(--ink);color:#fff}
.days button .dot{width:6px;height:6px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:14px 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.stepper{display:inline-flex;align-items:center;border:var(--rule);border-radius:999px;height:48px}
.stepper button{appearance:none;border:0;background:none;width:46px;height:46px;border-radius:999px;font:500 22px Archivo,sans-serif;cursor:pointer;color:var(--ink)}
.stepper button:hover:not([disabled]){background:var(--pale)}
.stepper button[disabled]{color:#bbb;cursor:default}
.stepper output{min-width:34px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.bikes{list-style:none;margin:0;padding:0}
.bike{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid #C2C2C2}
.bike:last-child{border-bottom:0}
.bike img{width:120px;height:80px;object-fit:contain}
.bike h3{margin:0;font-size:18px}
.bike p{margin:2px 0 0;font-size:15px;color:var(--muted)}
.bike .av{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);margin-top:6px}
.bike .ctl{display:grid;gap:8px;justify-items:end}
.bike select{height:40px;border:var(--rule);border-radius:999px;padding:0 12px;background:var(--paper);font-size:15px}
.bike .fit{font-size:14px;color:var(--muted)}
.bike.off{opacity:.5}
.szr{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.field .stepper{justify-self:start}
@media (max-width:560px){.bike{grid-template-columns:84px 1fr}.bike img{width:84px;height:56px}.bike .ctl{grid-column:1/-1;justify-items:stretch}.szr{justify-content:space-between}}
.height{display:flex;align-items:center;gap:12px;margin:0 0 8px;flex-wrap:wrap}
.height input{width:110px;height:44px;border:var(--rule);border-radius:12px;padding:0 12px}
.sumbox{position:sticky;top:24px;padding:28px 0}
.sumbox h2{font-size:24px;margin:0 0 16px;letter-spacing:-.02em}
.sumbox .when{margin:0 0 16px}
.sumbox .btn{width:100%;margin:20px 0 12px}
.sumbox .fine{font-size:14px;color:var(--muted);margin:0 0 8px}
.sumbox .msg{font-size:15px;margin:12px 0 0}
.sumbox .msg.bad{color:var(--err);font-weight:600}
@media (max-width:900px){.sumbox{position:static;border-top:var(--rule)}}
.policy{font-size:15px;color:var(--muted)}
.policy b{color:var(--ink)}
dialog{border:var(--rule);border-radius:20px;padding:28px;max-width:440px;width:calc(100% - 40px)}
dialog::backdrop{background:rgba(26,26,26,.35)}
dialog h2{margin:0 0 10px;font-size:22px}
dialog .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.testbar{background:var(--few);color:var(--ink);text-align:center;font-size:14px;font-weight:600;padding:8px 16px}
table.sum td[colspan]{white-space:normal;text-align:left;padding-left:0;padding-bottom:12px}