/* Loaner bike page — styled to match revolutionsmtb.com (Tom, 12 Sep 2026: "same look and feel as the
   rest of the site"). The tokens and type scale are copied from that site's css/site.css rather than
   linked (the page started life on the dashboard origin; moved to revolutionsmtb.com 24 Oct 2026). If the site's brand colors change, change them here too.
   Brand colors sampled from the team jersey logo: navy #1A3576, deep red #8B1014, goggle cyan #00ADEF. */
:root{
  --paper:#F8F8F6; --card:#FFFFFF; --navy:#1A3576; --slate:#5A6275;
  --sky:#1E6FB8; --red:#8B1014; --line:#E3E2DD; --ink:#16203A;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--sky)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line)}
.nav .mark img{width:min(250px,52vw);height:auto}
.nav nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.nav nav a{color:var(--slate);text-decoration:none;font-weight:600}
.nav nav a:hover{color:var(--navy)}

.wrap{max-width:760px;margin:0 auto}
.pad{padding:38px 22px 60px}

h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;line-height:1.15;margin:0 0 12px}
h1{font-size:clamp(27px,3.4vw,38px);color:var(--navy)}
h2{font-size:clamp(21px,2.4vw,26px);color:var(--navy)}
h3{font-size:17px}
p{margin:0 0 12px}
.muted{color:var(--slate);font-size:15px}
.status{margin:18px 2px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-bottom:18px}
.card > *:last-child{margin-bottom:0}

/* ---- one section per ride ---- */
.ride{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px}
.ride .when{font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;margin:0 0 4px}
.ride .where{color:var(--slate);font-size:15px;margin:0 0 16px}
.ride .none{color:var(--slate);font-size:15px;margin:0}

.bikes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}

/* ONE box per bike. NOTE: the child combinator matters. A plain `.bike span` also hits the size, model
   and height spans inside, which made every bike look like three separate buttons (caught 12 Sep 2026). */
.bike{display:block;cursor:pointer}
.bike input{position:absolute;opacity:0;width:0;height:0}
.bike > span{display:block;border:2px solid var(--line);border-radius:12px;padding:14px 16px;
  background:var(--paper);transition:border-color .12s,background .12s}
.bike:hover > span{border-color:var(--sky)}
.bike input:focus-visible + span{outline:3px solid var(--sky);outline-offset:2px}
.bike input:checked + span{border-color:var(--navy);background:#EEF3FB}
.bike .size{display:block;font-weight:700;color:var(--ink)}
.bike .model{display:block;font-size:14px;color:var(--slate)}
.bike .fits{display:block;font-size:13px;color:var(--slate);margin-top:4px}
.bike .taken{display:block;font-size:13px;font-weight:700;color:var(--red);margin-top:4px}
.bike.out{cursor:default}
.bike.out > span{opacity:.55;background:#F1F0EC}
.bike.out:hover > span{border-color:var(--line)}

/* ---- form ---- */
.q{margin:0 0 18px}
.q:last-child{margin-bottom:0}
.q label{display:block;font-weight:600;margin-bottom:6px}
.req{font-weight:400;font-size:13px;color:var(--red);margin-left:6px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;font:inherit;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px}
input:focus,textarea:focus{outline:3px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
textarea{resize:vertical}
.q label.check{display:flex;align-items:flex-start;gap:10px;font-weight:400}
.q label.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}

.btn{display:inline-block;border:0;border-radius:999px;padding:15px 28px;font:inherit;font-weight:700;
  text-decoration:none;cursor:pointer}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{background:#A3131A}
.btn[disabled]{opacity:.55;cursor:default}
.send{text-align:center}
.turnstile{display:flex;justify-content:center;min-height:0;margin-bottom:10px}

.message{border-radius:10px;padding:12px 14px;margin:14px 0 0;font-size:15px}
.message.error{background:#FDECEC;border:1px solid #F3C9C9;color:#7A1114}

.done h1{color:var(--red)}

.foot{padding:22px;color:var(--slate);font-size:14px;text-align:center}

@media (max-width:600px){
  .nav{padding:14px 18px}
  .pad{padding:26px 16px 48px}
  .card,.ride{padding:20px 18px}
  .bikes{grid-template-columns:1fr}
}

/* Ride buttons: one ride's bikes at a time (24 Oct 2026). Big enough to tap with a thumb. */
.ride-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.ride-tab{flex:1 1 140px;min-height:56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:10px 14px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);
  font:inherit;text-align:left;cursor:pointer}
.ride-tab .tab-day{font-size:13px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.03em}
.ride-tab .tab-title{font-weight:700;line-height:1.25}
.ride-tab[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.ride-tab[aria-pressed="true"] .tab-day{color:#cfd8ef}
.ride-tab:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
#who{scroll-margin-top:12px}
.ride-tab .tab-closed{font-size:12px;font-weight:700;color:var(--red);margin-top:2px}
.ride-tab[aria-pressed="true"] .tab-closed{color:#ffd9d9}
.closed-note{color:var(--ink)!important;background:#FBEFEF;border:1px solid #E9C9CA;border-radius:10px;padding:12px 14px}