/* Booking funnel widget. Sits inside the site's own .form / .field /
   .choice / .btn styles; everything here is the rail of steps, the panel
   that slides in, the calendar grid, the time pills, the pricing box and
   the car / notice steps, on the site's CSS variables. */
.booking__choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.booking__choice{justify-content:flex-start;text-align:left}
.booking__choice input{flex:none}
.booking__step[data-step=day]{position:relative}
/* the rail (a compact row on phones, a column beside the panel from 760px) and the panel */
.booking__funnel{display:grid;gap:1.2rem;min-width:0}
.booking__rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.booking__rail li{display:flex;align-items:center;min-width:0;border-radius:var(--r,8px)}
.booking__rail .booking__railitem,.booking__rail button{display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;min-width:0;border-radius:var(--r,8px)}
.booking__rail button{all:unset;display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;border-radius:var(--r,8px);cursor:pointer;min-width:0}
.booking__rail button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.booking__rail button:hover .name{text-decoration:underline}
.booking__rail .is-current{background:rgb(var(--accent-rgb,128 128 128) / .12)}
.booking__rail .is-next{opacity:.55}
.booking__dot{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2,var(--line));display:grid;place-items:center;font-family:var(--font-mono,inherit);font-size:.72rem;font-weight:700;line-height:1}
.booking__rail .is-done .booking__dot{background:var(--accent-fill,var(--accent));border-color:var(--accent);color:var(--on-accent,#fff)}
.booking__rail .is-current .booking__dot{border-color:var(--accent);color:var(--accent)}
.booking__rail .text{display:grid;line-height:1.25;min-width:0}
.booking__rail .name{font-weight:700;font-size:.84rem;white-space:nowrap}
.booking__rail .sub{font-size:.72rem;color:var(--ink-3,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14rem}
/* The rail is one row above the panel (2026-11-06, the form lives on its own
   page now): the panel gets the full width, so day and time sit side by side. */
@media (max-width:759px){.booking__rail .is-next .text{display:none}.booking__rail .is-done .sub{display:none}}
.booking__panel{display:grid;gap:1.6rem;min-width:0;container:bkpanel/inline-size}
/* day and time: stacked in a narrow panel (month, then that day's times right
   under it), side by side in a wide one, so tapping a day never moves the page */
.booking__when{display:grid;gap:1.4rem;min-width:0}
@container bkpanel (min-width:34rem){
  .booking__when{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:2rem;align-items:start}
  .booking__when .booking__times{grid-template-columns:minmax(0,1fr)}
}
.booking__when .booking__hint{margin:0}
.booking__when [data-step=time] .booking__hint{font-size:.86rem;font-weight:500}
.cal__day.is-preview{border-style:dashed;border-color:var(--accent)}
/* the note, folded until wanted */
.booking__more{grid-column:1/-1}
.booking__more>summary{cursor:pointer;width:max-content;max-width:100%;padding:.35rem 0;font-weight:600;font-size:.92rem;color:var(--ink-2,var(--ink));text-decoration:underline;text-underline-offset:3px;list-style:none}
.booking__more>summary::-webkit-details-marker{display:none}
.booking__more>summary:hover,.booking__more>summary:focus-visible{color:var(--ink)}
.booking__more[open]>summary{margin-bottom:.6rem}
/* "Request this time" stays on screen while the details are filled in (the
   actions box gives way so the button's sticky box is the whole panel) */
.booking .form__actions{display:contents}
.booking .form__actions>*{justify-self:start}
.booking .form__submit{position:sticky;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:2;justify-self:stretch;box-shadow:0 10px 30px -6px rgb(0 0 0 / .55)}
@media (max-width:759px){
  .booking .booking__panel{gap:1.2rem}
  .booking__rail .is-done .text{display:none}
}
.booking__panel:focus{outline:none}
.booking__panel.is-enter{animation:bookingEnter .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes bookingEnter{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.booking__panel.is-enter{animation:none}}
.booking.is-funnel .form__step{display:none}
/* calendar */
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.cal__title{font-family:var(--font-display);font-size:1.1rem}
.cal__nav{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--line-2,var(--line));border-radius:var(--r,8px);background:transparent;color:var(--ink);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer}
.cal__nav[disabled]{opacity:.3;cursor:default}
.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.cal__wd{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,var(--ink));padding:.2rem 0}
.cal__day{aspect-ratio:1;min-height:40px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--r,8px);background:transparent;color:var(--ink-3,var(--ink));font:inherit;font-weight:600;font-size:.95rem;cursor:default;position:relative;transition:background .2s,border-color .2s,color .2s}
.cal__day.is-open{color:var(--ink);background:var(--bg,transparent);border-color:var(--line-2,var(--line));cursor:pointer}
.cal__day.is-open:hover{border-color:var(--accent)}
.cal__day.is-selected,.cal__day.is-selected:hover{background:var(--accent-fill,var(--accent));color:var(--on-accent,#fff);border-color:var(--accent)}
.cal__day.is-today::after{content:'';position:absolute;bottom:5px;left:50%;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateX(-50%)}
.cal__day.is-loading{opacity:.5}
.booking__times{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}
.booking__times:empty{display:none}
.booking__time{padding:.85rem .9rem;border:1px solid var(--line-2,var(--line));border-radius:var(--r,8px);background:var(--bg,transparent);color:var(--ink);font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.booking__time:hover{border-color:var(--accent)}
.booking__time.is-selected{background:var(--accent-fill,var(--accent));color:var(--on-accent,#fff);border-color:var(--accent)}
.booking__hint{font-size:.9rem;color:var(--ink-3,var(--ink));font-weight:600}
.booking__hint-sm{font-size:.84rem;color:var(--ink-3,var(--ink));margin:0}
.booking__intake{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.booking .field--wide{grid-column:1/-1}
.booking__summary{font-weight:600}
.booking__manage{text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.cal__grid{gap:.2rem}.cal__day{min-height:36px;font-size:.9rem}.booking__times{grid-template-columns:repeat(2,minmax(0,1fr))}}
.booking__empty{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.7rem}
.booking__empty .booking__hint{margin:0}
.booking__see{min-height:40px;padding:.5rem 1rem;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.booking__see:hover,.booking__see:focus-visible{background:rgb(var(--accent-rgb, 128 128 128) / .12)}
/* the pricing, right above the button */
/* the price card above "Request this time" is styled in /assets/site.css (.pricing): the home page shows it too */
/* after the request: the car, then what they noticed under the notice */
.form__done .booking__car,.form__done .booking__issues{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line-2,var(--line));text-align:left}
.form__done .booking__car>legend,.form__done .booking__issues>legend{font-size:1.1rem}
.booking__notice{margin:0;padding:.7rem .9rem;border-left:3px solid var(--accent);background:rgb(var(--accent-rgb,128 128 128) / .08);font-size:.86rem;line-height:1.5}
.booking__agree{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;cursor:pointer}
.booking__agree input{flex:none;width:1.1rem;height:1.1rem;margin:.15rem 0 0;padding:0;accent-color:var(--accent)}
.booking__buttons{display:flex;flex-wrap:wrap;gap:.6rem}
.booking__buttons .btn{width:auto}
.booking__share-status:empty{display:none}
.booking__thanks{font-weight:600}

/* the symptom picks: a wrap of small chips, the site's .choice look */
.booking__noticed{margin:0;padding:0;border:0;min-width:0}
.booking__noticed legend{padding:0;margin:0 0 .45rem;font-size:.92rem;font-weight:600}
.booking__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.booking__chip{padding:.5rem .75rem;font-size:.86rem;font-weight:500;justify-content:flex-start}
.booking__chip input{width:1rem;height:1rem}
.booking__again{width:auto}

/* contrast (2026-10-23): helper lines, labels and placeholders were the dim
   ink-3 and sat near 4.5:1 on the dark panels; they take ink-2. The links on
   the sent panel take the brighter red. */
.booking .booking__hint,.booking .booking__hint-sm,.booking .form__note,.booking .field>span,.booking .field>legend>span,.booking .booking__noticed legend{color:var(--ink-2,var(--ink))}
.booking .field input::placeholder,.booking .field textarea::placeholder{color:var(--ink-2,var(--ink));opacity:.75}
.booking .form__done a{color:var(--accent-hi,var(--accent))}

/* going back one step, and the line that says the car comes after sending */
.booking__back{justify-self:start;margin:0 0 .2rem;padding:.35rem 0;border:0;background:none;color:var(--ink-2,var(--ink));font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.booking__back:hover,.booking__back:focus-visible{color:var(--ink)}
.booking__back[hidden]{display:none}
.booking__next{margin:0;padding:.65rem .85rem;border:1px dashed var(--line-2,var(--line));border-radius:var(--r,8px);font-size:.9rem;line-height:1.45;color:var(--ink)}
/* already have a request (the server stored nothing), lost the email, find a booking by email */
.booking .form__status.is-note{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.75rem .9rem;border:1px solid var(--line-2,var(--line));border-radius:var(--r,8px);font-weight:500;line-height:1.45;color:var(--ink)}
.booking__lost{margin:.4rem 0;padding:.75rem .9rem;border:1px dashed var(--line-2,var(--line));border-radius:var(--r,8px);font-size:.9rem;line-height:1.45}
.booking__lost p{margin:0 0 .5rem}
.booking__lost[hidden],.booking__lost [hidden],.booking__find[hidden]{display:none}
.booking__find{margin:.2rem 0 0;font-size:.92rem}
.booking__find summary{cursor:pointer;font-weight:600;color:var(--ink-2,var(--ink));text-decoration:underline;text-underline-offset:3px;padding:.35rem 0}
.booking__find summary:hover,.booking__find summary:focus-visible{color:var(--ink)}
.booking__find-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0}
.booking__find-row .field{flex:1 1 14rem;margin:0}
.booking__find-row input{font-size:16px}
/* The Terms of Service popup on "Request this time" (R3 §1, 2026-11-13; booking.js
   openTerms). The admin ask() box's motion: slides down from the top, the backdrop
   fades in; reduced motion = fade only. Site tokens only. */
html.tos-lock{overflow:hidden}
.tos{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:max(1rem,env(safe-area-inset-top,0px)) 1rem 1rem;pointer-events:none}
.tos__scrim{position:absolute;inset:0;background:rgb(0 0 0 / .55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s var(--ease,ease);pointer-events:auto}
.tos__box{position:relative;width:min(660px,100%);max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;gap:.55rem;min-width:0;background:rgb(var(--bg-3-rgb,24 24 24) / .98);color:var(--ink);border:1px solid var(--line-2,var(--line));border-top:3px solid var(--accent);border-radius:var(--r-lg,0);padding:1.2rem 1.3rem 1.05rem;box-shadow:0 28px 70px -24px rgb(0 0 0 / .75),0 0 0 1px rgb(var(--sheen-rgb,255 255 255) / .03);transform:translateY(calc(-100% - 2rem));opacity:0;transition:transform .34s var(--ease,ease),opacity .2s;pointer-events:auto}
.tos.is-open .tos__scrim{opacity:1}
.tos.is-open .tos__box{transform:none;opacity:1}
.tos__kicker{margin:0;font-family:var(--font-mono,monospace);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,var(--ink))}
.tos__title{margin:0;font-family:var(--font-display);font-weight:var(--display-weight,400);font-size:clamp(1.45rem,4.6vw,1.9rem);line-height:1.05;letter-spacing:.02em}
.tos__msg{margin:0;color:var(--ink-2,var(--ink));font-size:.92rem;line-height:1.5}
.tos__english{margin:0;padding:.5rem .7rem;border:1px dashed var(--line-2,var(--line));font-size:.84rem;line-height:1.45;color:var(--ink-2,var(--ink))}
.tos__body{flex:1 1 auto;min-height:8rem;overflow:auto;overscroll-behavior:contain;display:grid;gap:.6rem;align-content:start;padding:.8rem .9rem;border:1px solid var(--line);background:rgb(var(--bg-rgb,0 0 0) / .55);font-size:.86rem;line-height:1.5;overflow-wrap:anywhere}
.tos__body:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tos__hint{margin:0;color:var(--ink-3,var(--ink))}
.tos__hint.is-bad{color:var(--accent-3,var(--accent))}
.tos__h{margin:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2,var(--ink))}
.tos__fees p,.tos__terms p{margin:0}
.tos__fees{display:grid;gap:.5rem}
.tos__fees table,.tos__terms table{width:100%;border-collapse:collapse;font-size:.8rem}
.tos__fees th,.tos__fees td,.tos__terms th,.tos__terms td{text-align:left;vertical-align:top;padding:.38rem .45rem;border-top:1px solid var(--line)}
.tos__fees thead th,.tos__terms thead th{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3,var(--ink));border-top:0}
.tos__fees tbody td:first-child{font-weight:700;color:var(--ink)}
.tos__fees table{table-layout:fixed}
.tos__fees th:nth-child(1){width:27%}
.tos__fees th:nth-child(2){width:31%}
.tos__fees tbody td:nth-child(2){color:var(--accent-2,var(--accent));font-weight:600}
.tos__full{border-top:1px solid var(--line-2,var(--line));padding-top:.55rem}
.tos__full summary{cursor:pointer;font-weight:700;color:var(--accent-2,var(--accent));padding:.25rem 0}
.tos__full summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tos__terms{display:grid;gap:.6rem;padding-top:.5rem}
.tos__terms h2{margin:.5rem 0 0;font-family:var(--font-display);font-weight:var(--display-weight,400);font-size:1.2rem;line-height:1.15;letter-spacing:.02em}
.tos__terms ul{margin:0;padding-left:1.15rem;display:grid;gap:.25rem}
.tos__terms .md-table,.tos__fees .md-table{overflow-x:auto}
.tos__agree{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1rem;padding:.75rem .85rem;border:1px solid var(--accent);background:rgb(var(--accent-rgb,128 128 128) / .07)}
.tos__check{display:flex;gap:.6rem;align-items:flex-start;flex:1 1 16rem;min-width:0;font-weight:600;font-size:.95rem;line-height:1.35;cursor:pointer}
.tos__check input{flex:none;width:1.3rem;height:1.3rem;margin:.05rem 0 0;accent-color:var(--accent);cursor:pointer}
.tos__label{display:grid;gap:.15rem;min-width:0}
.tos__en{font-weight:400;font-size:.8rem;color:var(--ink-3,var(--ink))}
.tos__open{flex:none;font-size:.85rem;color:var(--accent-2,var(--accent));text-decoration:underline;text-underline-offset:3px}
.tos__open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tos__note{margin:0;font-size:.85rem;color:var(--accent-3,var(--accent))}
.tos__note:empty{display:none}
.tos__acts{display:flex;justify-content:flex-end;gap:.5rem}
.tos__acts .btn[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:560px){
  .tos{padding:max(.5rem,env(safe-area-inset-top,0px)) .5rem .5rem}
  .tos__box{max-height:calc(100vh - 1rem);max-height:calc(100dvh - 1rem);padding:1rem .95rem .9rem}
  /* a phone: each fee stacks (what, how much, when) so no column is squeezed */
  .tos__fees thead{display:none}
  .tos__fees table,.tos__fees tbody,.tos__fees tr,.tos__fees td{display:block;width:auto}
  .tos__fees tr{display:grid;gap:.1rem;padding:.5rem 0;border-top:1px solid var(--line)}
  .tos__fees tr:first-child{border-top:0}
  .tos__fees td{border:0;padding:0}
  .tos__fees td:last-child{font-size:.78rem;color:var(--ink-3,var(--ink))}
  .tos__acts{display:grid;grid-template-columns:1fr 1.5fr}
  .tos__acts .btn{width:100%;white-space:normal;line-height:1.2;padding-left:.7rem;padding-right:.7rem}
}
@media (prefers-reduced-motion:reduce){.tos__box{transform:none;transition:opacity .15s}.tos__scrim{transition:opacity .15s}}
.booking__terms-nojs{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;margin:0 0 .8rem}