/* Get started's booking mode (/get-started?book=<job key>; tools/book.py, tools/book.js).
   Get started's own look (handyman.css .hm-tf: one question a screen, big type, a borderless input, OK beside Back),
   with the job pinned above the questions: its picture, its title, its price for the area, Change. The address's
   suggestions, the two optional rows of taps and the waitlist's line are join v5's, drawn in this page's type. */

html[data-hm-book] #hm-start { display: none !important; }
html[data-hm-book] #hm-book[hidden] { display: flex; }
html:not([data-hm-book]) #hm-book { display: none !important; }

.hm-bk { --bk-ink: var(--hm-accent-ink, #6b55cf); --bk-line: color-mix(in srgb, var(--t-bright) 12%, transparent);
  --bk-sunk: color-mix(in srgb, var(--t-bright) 4%, transparent); --bk-go: #2f7d1e; }
[color-scheme="dark"] .hm-bk { --bk-go: #9fd46d; }

/* the job */
.hm-bk__job { display: flex; align-items: center; gap: 1.4rem; margin: 1.6rem 0 0; padding: .8rem 1rem .8rem .8rem; border-radius: 2rem;
  background: var(--base-tint); box-shadow: 0 0 0 1px var(--bk-line), 0 1rem 2.6rem -1.6rem rgba(22, 22, 22, .3); min-width: 0; }
.hm-bk__pic { flex: none; width: 6.4rem; height: 6.4rem; overflow: hidden; border-radius: 1.4rem; background: #f4f5f6; }
.hm-bk__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-bk__job:not(.is-ready) .hm-bk__pic { animation: hm-bk-wait 1.4s ease-in-out infinite; }
@keyframes hm-bk-wait { 50% { opacity: .5; } }
.hm-bk__what { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; min-width: 0; }
.hm-bk__k { font: 600 1.15rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--bk-ink); }
.hm-bk__what b { font: 600 1.9rem/1.2 var(--_font-accent); letter-spacing: -.01em; color: var(--t-bright); overflow-wrap: anywhere; }
.hm-bk__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; font-size: 1.35rem; color: var(--t-muted); }
.hm-bk__price em { font: normal 600 1.5rem/1.2 var(--_font-default); color: var(--bk-go); }
.hm-bk__price em.is-q { color: var(--t-bright); }
.hm-bk__change { flex: none; display: inline-flex; align-items: center; min-height: 4.4rem; padding: 0 1.6rem; border-radius: 99rem;
  box-shadow: inset 0 0 0 1px var(--bk-line); font: 600 1.4rem/1 var(--_font-default); color: var(--t-bright); text-decoration: none; }
.hm-bk__change:hover { box-shadow: inset 0 0 0 1.5px var(--t-bright); }

/* the address */
.hm-bk__field { position: relative; width: 100%; }
.hm-bk__ic { position: absolute; left: 0; top: 50%; width: 2.8rem; height: 2.8rem; margin-top: -.8rem; color: var(--bk-ink); pointer-events: none; }
.hm-bk__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hm-bk__field .hm-tf__input { padding-left: 4rem !important; }
.hm-bk__cands { display: grid; gap: .6rem; width: 100%; margin-top: -.8rem; }
.hm-bk__cands:empty { display: none; }
.hm-bk__cand { display: flex; align-items: center; gap: 1.2rem; width: 100%; min-height: 5.2rem; padding: .8rem 1.4rem; border: 0; border-radius: 1.4rem;
  background: var(--bk-sunk); box-shadow: inset 0 0 0 1px var(--bk-line); color: var(--t-bright); text-align: left; cursor: pointer; font: inherit; }
.hm-bk__cand:hover, .hm-bk__cand:focus-visible { box-shadow: inset 0 0 0 1.5px var(--bk-ink); outline: none; }
.hm-bk__cand i { flex: none; font-size: 1.8rem; color: var(--bk-ink); }
.hm-bk__cand span { display: flex; flex-direction: column; min-width: 0; }
.hm-bk__cand b { font: 600 1.55rem/1.3 var(--_font-default); }
.hm-bk__cand small { font-size: 1.3rem; color: var(--t-muted); }
.hm-bk__away { display: flex; flex-direction: column; gap: .3rem; max-width: 62rem; padding: 1.2rem 1.6rem; border-radius: 1.6rem;
  background: rgba(230, 160, 50, .14); font-size: 1.45rem; line-height: 1.45; color: var(--t-bright); }
.hm-bk__away[hidden] { display: none; }
.hm-bk__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hm-bk__chips span { margin-right: .4rem; font-size: 1.4rem; color: var(--t-medium); }
.hm-bk__chips button { min-height: 4.4rem; padding: 0 1.6rem; border: 1px solid var(--st-muted); border-radius: 99rem; background: transparent;
  color: var(--t-medium); font: 600 1.45rem/1 var(--_font-accent); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.hm-bk__chips button:hover { border-color: var(--t-bright); }
.hm-bk__chips button[aria-pressed="true"] { border-color: var(--base-opp); background: var(--base-opp); color: var(--base); }
a.hm-tf__back { text-decoration: none; }

/* name and cell */
.hm-bk__names { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; width: 100%; }
.hm-bk__names .hm-tf__input { min-width: 0; }
.hm-bk__fine { display: flex; flex-direction: column; gap: .6rem; max-width: 64rem; font-size: 1.3rem; line-height: 1.45; color: var(--t-muted); }
.hm-bk__fine p { margin: 0; }
.hm-bk__fine a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.hm-bk__more { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.hm-bk__more:disabled { cursor: default; text-decoration: none; opacity: .7; }

/* the code */
.hm-bk__code { max-width: 32rem; letter-spacing: .4em; font-variant-numeric: tabular-nums; }

/* sending */
.hm-bk__done { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hm-bk__done li { display: flex; align-items: center; gap: 1.2rem; font: 500 1.8rem/1.3 var(--_font-accent); color: var(--t-muted); transition: color .3s ease; }
.hm-bk__done li::before { content: ""; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--st-muted); }
.hm-bk__done li.is-on { color: var(--t-bright); }
.hm-bk__done li.is-on::before { box-shadow: inset 0 0 0 2px var(--bk-ink); animation: hm-bk-wait 1s ease-in-out infinite; }
.hm-bk__done li.is-done { color: var(--t-bright); }
.hm-bk__done li.is-done::before { background: var(--bk-go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 1.5rem no-repeat; box-shadow: none; }
.hm-tf__ok.is-busy { opacity: .75; }
a.hm-tf__ok { text-decoration: none; }

/* the job's loop on the showcase (a computer): the whole picture, on its own light ground */
.hm-gs-show__vid.hm-bk-art { object-fit: contain; background: #f4f5f6; }

@media only screen and (max-width: 767px) {
  .hm-bk__job { margin-top: 1rem; gap: 1rem; padding: .6rem .8rem .6rem .6rem; border-radius: 1.6rem; }
  .hm-bk__pic { width: 5.2rem; height: 5.2rem; border-radius: 1.2rem; }
  .hm-bk__what b { font-size: 1.6rem; }
  .hm-bk__price { font-size: 1.2rem; }
  .hm-bk__price em { font-size: 1.35rem; }
  .hm-bk__change { padding: 0 1.2rem; font-size: 1.3rem; }
  .hm-bk__ic { width: 2.2rem; height: 2.2rem; margin-top: -.6rem; }
  .hm-bk__field .hm-tf__input { padding-left: 3.2rem !important; }
  .hm-bk__names { gap: 1.2rem; }
  .hm-bk__chips span { width: 100%; font-size: 1.3rem; }
  .hm-bk__chips button { padding: 0 1.3rem; font-size: 1.35rem; }
  .hm-bk__done li { font-size: 1.6rem; }
  .hm-gs .hm-bk .hm-tf__step { padding-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .hm-bk__job .hm-bk__pic, .hm-bk__done li.is-on::before { animation: none !important; } }
a.hm-tf__ok[hidden] { display: none; }