/* The trip planner and the two desk wizards.

   One question on screen at a time, and the answer is always a big flat shape
   you press rather than a select you have to open. That is the whole idea. A
   phone keyboard never comes up until the last step, so the first four steps
   are thumb work.

   Everything here is drawn in the brand tokens. Nothing has its own literal
   color, so both schemes flip together. */

/* ---------------------------------------------------------- the step rail */

.planrail {
  display: flex;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.planrail::-webkit-scrollbar { display: none; }
.planrail li { flex: 1 1 0; min-width: 0; }

.planrail__step {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  min-height: 42px;
  padding: .5rem .7rem;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-3);
  cursor: default;
  white-space: nowrap;
}
.planrail__n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: .72rem;
  background: var(--panel);
  color: var(--ink-2);
}
.planrail__step[data-state="now"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
/* A translucent white over the brand blue lands at 4.28 to 1, which is under
   the floor for text this small. Two solid tokens that already flip together
   is both accessible and one less thing to get wrong in dark mode. */
.planrail__step[data-state="now"] .planrail__n {
  background: var(--on-brand);
  color: var(--brand);
}
.planrail__step[data-state="done"] {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-2);
  cursor: pointer;
}
.planrail__step[data-state="done"] .planrail__n { background: var(--card); color: var(--brand-2); }
.planrail__step[data-state="done"]:hover { border-color: var(--brand); }
.planrail__step:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

@media (max-width: 640px) {
  .planrail__step { justify-content: center; padding: .5rem .4rem; font-size: 0; gap: 0; }
  .planrail__step .planrail__n { font-size: .78rem; }
  .planrail__step[data-state="now"] { font-size: .84rem; gap: .45rem; padding: .5rem .8rem; }
  .planrail li { flex: 0 0 auto; }
  .planrail li:has([data-state="now"]) { flex: 1 1 auto; }
}

/* ---------------------------------------------------------- the panel */

.planpanel__hint {
  color: var(--ink-2);
  margin: 0 0 1.1rem;
  max-width: 52ch;
}
.planpanel__sum {
  margin: 1.1rem 0 0;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-2);
  font-size: .92rem;
}
.planpanel__fine { color: var(--ink-2); font-size: .82rem; margin: .8rem 0 0; }
.planpanel__done { margin: 0 0 .5rem; }

.planfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 2px dashed var(--panel-line);
}
.planfoot .btn--primary { min-width: 9rem; }

@media (max-width: 420px) {
  .planfoot { flex-direction: column-reverse; align-items: stretch; }
  .planfoot .btn { width: 100%; }
}

.linkish {
  display: inline-block;
  margin-top: 1rem;
  padding: .35rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .9rem;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { color: var(--brand-2); }
.linkish:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

/* ---------------------------------------------------------- counters */

.counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.counter__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.counter__label { font-weight: 700; }
.counter__hint { color: var(--ink-3); font-size: .84rem; }
.counter__ctl { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.counter__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.counter__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.counter__btn:disabled { color: var(--ink-3); opacity: 1; border-color: var(--line); cursor: default; }
.counter__btn:active:not(:disabled) { transform: scale(.94); }
.counter__btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.counter__n {
  min-width: 2.2rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
}

.toggle {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 0 .2rem;
  cursor: pointer;
}
.toggle input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: .15rem; accent-color: var(--brand); }
.toggle span { display: flex; flex-direction: column; gap: .1rem; }
.toggle em { font-style: normal; color: var(--ink-3); font-size: .84rem; }

/* ---------------------------------------------------------- tiles */

.destgrid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.desttile {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-start;
  text-align: left;
  min-height: 62px;
  padding: .7rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.desttile strong { font-size: .95rem; }
.desttile span { color: var(--ink-3); font-size: .8rem; font-family: var(--mono); }
.desttile:hover { border-color: var(--brand); }
.desttile:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.desttile.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.desttile.is-on span { color: var(--on-brand); }
.desttile--open { border-style: dashed; }

/* ---------------------------------------------------------- pick cards */

.pickgrid { display: grid; gap: .7rem; }
.pickcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: flex-start;
  text-align: left;
  padding: 1rem 3rem 1rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.pickcard strong { font-family: var(--display); font-size: 1.08rem; }
.pickcard span { color: var(--ink-2); font-size: .9rem; }
.pickcard:hover { border-color: var(--brand); }
.pickcard:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pickcard__tick {
  position: absolute;
  top: 1.05rem;
  right: 1rem;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
}
.pickcard.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.pickcard.is-on .pickcard__tick {
  background: var(--brand);
  border-color: var(--brand);
}
.pickcard.is-on .pickcard__tick::after {
  content: "";
  position: absolute;
  left: 7px; top: 5px;
  width: 6px; height: 11px;
  border: solid var(--on-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ---------------------------------------------------------- the shortlist */

.shortgrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 1.25rem;
}
.shortcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.shortcard__pic {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--panel);
}
.shortcard__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shortcard__body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; flex: 1; }
.shortcard__body h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.shortcard__body h3 a { color: inherit; text-decoration: none; }
.shortcard__body h3 a:hover { text-decoration: underline; }
.shortcard__spec { margin: 0; color: var(--ink-3); font-size: .84rem; font-family: var(--mono); }
.shortcard__price { display: flex; align-items: baseline; gap: .4rem; margin: .5rem 0 0; flex-wrap: wrap; }
.shortcard__price strong { font-family: var(--display); font-size: 1.5rem; }
.shortcard__price span { color: var(--ink-2); font-size: .85rem; }
.shortcard__due { margin: 0 0 .6rem; color: var(--ok); font-size: .85rem; font-weight: 600; }
.shortcard .btn { margin-top: auto; }

.planafter { margin-top: 1.25rem; }

/* ---------------------------------------------------------- the customer gallery */

/* Three photos across the top of the trip page. The unit they actually booked
   in the middle at full size, and two of the yard's own shots either side, so
   the page reads like a trip rather than a receipt. Under 720 the side shots
   drop, because a 90 pixel wide photo says nothing. */

.tripshots {
  display: grid;
  grid-template-columns: 1fr 2.1fr 1fr;
  gap: .5rem;
  align-items: stretch;
  margin-bottom: 1rem;
}
.tripshots figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; background: var(--panel); }
.tripshots img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tripshots__side { aspect-ratio: 3 / 4; }
.tripshots__main { aspect-ratio: 4 / 3; }
.tripshots figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .5rem .6rem .45rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(to top, rgba(8, 15, 32, .82), rgba(8, 15, 32, 0));
}
@media (max-width: 720px) {
  .tripshots { grid-template-columns: 1fr; }
  .tripshots__side { display: none; }
}

/* ---------------------------------------------------------- the desk wizard */

.wizsteps {
  display: flex;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.wizsteps li {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .65rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
}
.wizsteps li[data-state="now"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.wizsteps li[data-state="done"] { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-2); }

.wizgrid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .wizgrid { grid-template-columns: 1fr; } }

.wizunits { display: grid; gap: .5rem; max-height: 46vh; overflow-y: auto; padding-right: .25rem; }
.wizunit {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: .7rem;
  align-items: center;
  text-align: left;
  padding: .5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.wizunit img { width: 68px; height: 51px; object-fit: cover; border-radius: 6px; }
.wizunit b { display: block; font-size: .92rem; }
.wizunit small { color: var(--ink-3); font-family: var(--mono); font-size: .72rem; }
.wizunit em { font-style: normal; font-family: var(--display); font-weight: 700; }
.wizunit:hover { border-color: var(--brand); }
.wizunit.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wizunit:disabled { cursor: default; }
.wizunit:disabled b, .wizunit:disabled em { color: var(--ink-3); }

.wizcheck {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wizcheck li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: .7rem;
  align-items: center;
  padding: .7rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--card);
}
.wizcheck__mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: .8rem; font-weight: 700;
  background: var(--panel); color: var(--ink-3);
}
.wizcheck li[data-done="yes"] .wizcheck__mark { background: var(--ok); color: #ffffff; }
.wizcheck__text b { display: block; }
.wizcheck__text span { color: var(--ink-3); font-size: .84rem; }

/* ---------------------------------------------------------- the desk is dark

   desk.css keeps its own palette, so the shared names the wizard is drawn in
   are remapped once here rather than every component being written twice. The
   remap sits on the two boxes the wizard actually renders into, which keeps it
   away from anything else on the page. */

.desk .deskmain,
.desk .drawer__panel {
  --paper: var(--bg);
  --paper-2: var(--panel);
  --card: var(--panel-2);
  --line: var(--edge);
  --line-2: var(--edge);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --brand: var(--accent);
  --brand-2: var(--accent);
  --brand-soft: var(--panel-2);
  --on-brand: #14201a;
  --ok: var(--good);
  --input-bg: var(--panel);
  --input-edge: var(--edge);
  --label: var(--text-3);
  --sun: var(--warn);
}

/* A dark surface needs the brand tint spelled out rather than borrowed, or the
   summary strip reads as one flat block of panel. */
.desk .planpanel__sum,
.desk .wizsteps li[data-state="done"] {
  background: var(--panel-2);
  color: var(--accent);
  border: 1px solid var(--edge);
}
.desk .wizunits { max-height: 40vh; }
.desk .planfoot { border-top-color: var(--edge); }
.desk .counter { border-bottom-color: var(--edge); }

/* ---- step five, the concierge ---------------------------------------------
   The only step that takes more than one answer, so the cards read as toggles
   rather than a single choice. Two columns because eight one-column cards is a
   scroll, and the tag in the corner says which ones cost money before somebody
   ticks five of them and assumes it is all free. */

.pickgrid--two { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
@media (max-width: 560px) { .pickgrid--two { grid-template-columns: 1fr; } }

/* The tag sat top right, which is where the selected tick already lives, so
   on a ticked card the two overlapped. It reads below the text instead. */
.pickcard--wide { position: relative; padding-right: 2.6rem; }
.pickcard__tag {
  align-self: flex-start;
  margin-top: .55rem;
  font-size: .64rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-2);
}
.pickcard--wide.is-on .pickcard__tag { background: rgba(255, 255, 255, .22); color: inherit; }

/* ---- reserving the concierge ----------------------------------------------
   The estimate rides beside the steps rather than under them, because the
   whole point of the page is watching the shape of the bill change as you
   answer. Under the fold it may as well not be there. */

.bookgrid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .bookgrid { grid-template-columns: 1fr; } }

.bookside { position: sticky; top: 1.25rem; }
@media (max-width: 900px) { .bookside { position: static; } }

.estbox {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem 1.25rem;
}
.estbox--empty { color: var(--ink-2); }
.estbox--empty p { margin: 0; }

.estbox__tag {
  margin: 0 0 .8rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-2);
  background: var(--brand-soft);
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: 999px;
}
.estbox__table { width: 100%; border-collapse: collapse; }
.estbox__table th,
.estbox__table td { padding: .45rem 0; text-align: left; font-weight: 500; vertical-align: top; }
.estbox__table th { color: var(--ink-2); font-size: .9rem; }
.estbox__table td { text-align: right; font-variant-numeric: tabular-nums; }
.estbox__na { color: var(--ink-3); font-style: italic; }
.estbox__fee th, .estbox__fee td { border-top: 1px solid var(--line); padding-top: .7rem; }
.estbox__fee td { font-weight: 700; color: var(--brand-2); }
.estbox__total th, .estbox__total td { border-top: 2px solid var(--ink); padding-top: .7rem; font-weight: 700; }
.estbox__note { margin: .9rem 0 0; font-size: .8rem; color: var(--ink-2); }