
/* Z's Bike Fix booking: shared look for the booking page and the owner page. */
:root{--bg:#050606;--panel:#101112;--panel2:#161718;--fg:#fff;--mute:#a8a8a6;--gold:#cc8a2a;--gold2:#e3a43f;--line:#2a2b2c;--ok:#6fbf73;--bad:#e5645a;--disp:'Barlow Condensed','Arial Narrow',sans-serif;--body:'Barlow',system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);margin:0;padding-inline:16px;padding-block:16px 64px}
.wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,7vw,3.4rem)}h2{font-size:1.7rem}h3{font-size:1.2rem}
p{margin:0}.mute{color:var(--mute)}.kick{font:600 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px}
.tabs{display:flex;gap:6px}
button,.btn{font:600 .95rem var(--body);cursor:pointer;border-radius:4px;padding:10px 16px;border:1px solid var(--gold);background:var(--gold);color:#050606}
button:hover{background:var(--gold2)}button.line{background:transparent;color:var(--fg);border-color:var(--line)}button.line:hover{border-color:var(--gold);background:transparent}
button.bad{background:transparent;color:var(--bad);border-color:#5a2a26}button.sm{padding:6px 11px;font-size:.85rem}
button[aria-pressed=true]{background:var(--gold);color:#050606;border-color:var(--gold)}
button:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px}
.note{background:var(--panel2);border-left:3px solid var(--gold);padding:10px 14px;font-size:.9rem;color:var(--mute)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.dow{font:600 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:center;padding:2px 0}
.day{min-height:62px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);border-radius:4px;font-weight:500}
.day b{font:700 1.15rem var(--disp)}.day small{font-size:.68rem;color:var(--gold2);text-align:center;line-height:1.15}
.day:hover:not(:disabled){border-color:var(--gold);background:var(--panel2)}
.day:disabled{background:transparent;border-color:transparent;color:#55565a;opacity:1}.day:disabled small{color:#55565a}
.day.sel{border-color:var(--gold2);box-shadow:inset 0 0 0 1px var(--gold2)}.day.full small,.day.blk small{color:var(--bad)}
@media(max-width:480px){.day{min-height:54px}.day small{font-size:.6rem}}
label{display:flex;flex-direction:column;gap:5px;font-size:.88rem;font-weight:600}
input,select,textarea{font:400 1rem var(--body);background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{min-height:90px;resize:vertical}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.form{display:flex;flex-direction:column;gap:14px}
.drop{background:var(--panel2);border:1px solid var(--gold);border-radius:6px;padding:14px 16px}
.drop b{font:700 1.5rem var(--disp);text-transform:uppercase;color:var(--gold2);display:block}
.err{color:var(--bad);font-size:.9rem}
.dayc{display:flex;flex-direction:column;gap:10px}
.dayc header{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.slot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--panel2)}
.slot.open{border-style:dashed;background:transparent;color:var(--mute)}
.slot .who{min-width:0;flex:1 1 220px}.slot .who span{display:block;color:var(--mute);font-size:.88rem;overflow-wrap:anywhere}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.pill{font:600 .7rem var(--body);letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--mute);margin-left:6px;vertical-align:middle}
.pill.ns{color:var(--bad);border-color:#5a2a26}.pill.dn{color:var(--ok);border-color:#2d4d2f}.pill.cx{color:var(--mute)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.row>*{flex:1 1 160px}.row>button{flex:0 0 auto}
.blocks{display:flex;gap:8px;flex-wrap:wrap}.chip{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:4px 6px 4px 12px;font-size:.88rem}
.chip button{padding:2px 9px;font-size:.8rem}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px 16px;overflow:auto;z-index:9}
.modal{background:var(--panel);border:1px solid var(--gold);border-radius:6px;padding:20px;max-width:620px;width:100%;margin-top:4vh;display:flex;flex-direction:column;gap:14px}
.mail{background:#fff;color:#1b1b1b;border-radius:4px;padding:16px;font:15px/1.55 var(--body);white-space:pre-wrap;overflow-wrap:anywhere}
.mh{font-size:.85rem;color:var(--mute);overflow-wrap:anywhere}.mh b{color:var(--fg)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--gold);color:#050606;padding:10px 18px;border-radius:4px;font-weight:600;z-index:10;max-width:90vw;text-align:center}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs img,.ph{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid var(--line);cursor:pointer;display:block;padding:0;background:var(--bg)}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}.ph{padding:0}
.big{max-width:100%;max-height:70vh;border-radius:4px;display:block;margin:0 auto}
.pill.rv{color:var(--gold2);border-color:var(--gold)}.sub{font-size:.85rem;color:var(--mute);display:block;overflow-wrap:anywhere}.sub b{color:var(--fg);font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--mute)}
details summary{cursor:pointer;color:var(--gold2);font-weight:600}
@media(prefers-reduced-motion:no-preference){.panel{animation:in .25s ease}@keyframes in{from{opacity:.4;transform:translateY(4px)}}}

.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}
.top a{color:var(--gold2);font-weight:600;text-decoration:none}.top a:hover{text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.loading{color:var(--mute)}
[hidden]{display:none!important}
.day.short{opacity:.75;border-style:dashed}
.embed .top{display:none}.embed body,.embed{background:#050606}
