/* AR Website IF — booking form.
   Colours and type lifted from the Movermate form as measured on 05/08/2026:
   accent oklch(0.871 0.179 95.332), Arial stack, 1px #e5e7eb borders. */

:root {
  --accent:        oklch(0.871 0.179 95.332);
  --accent-dark:   oklch(0.79 0.17 95.332);
  --ink:           #18181b;
  --ink-soft:      #52525b;
  --line:          #e5e7eb;
  --line-strong:   #d4d4d8;
  --bg:            #fff;
  --bg-soft:       #fafafa;
  --danger:        #dc2626;
  --radius:        6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* header ------------------------------------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}
.site-header .logo { height: 44px; width: auto; }
.site-header .phone {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.site-header .phone:hover { color: var(--accent-dark); }

/* shell -------------------------------------------------------------- */

.shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 96px;
}
.shell:has(.step-wide:not([hidden])) { max-width: 1000px; }

h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: .01em;
}
h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 6px;
}
.sub {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14px;
}

/* fields ------------------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.field-wide { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.req { color: var(--danger); }

input[type=text],
input[type=email],
input[type=tel],
input[type=search],
.notes {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  /* 16px, or iOS Safari zooms the whole page when a field takes focus
     and the customer is left stranded in a magnified layout. */
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
}
input:focus, .notes:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
}
input::placeholder { color: #a1a1aa; }

.error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 13px;
}
.error-form { margin-top: 16px; }

/* address combobox --------------------------------------------------- */

.combo { position: relative; }
.combo .clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 6px;
}

/* The original renders this balloon over its own Next button, which
   swallows the click. Kept inside the combo and below the input so it
   cannot cover anything that matters. */
.suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / .10);
}
.suggestions .opt {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}
.suggestions .opt:hover,
.suggestions .opt.is-active { background: var(--bg-soft); }
.suggestions .opt .muted { color: var(--ink-soft); }
.suggestions .empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

/* cards & chips ------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.card {
  min-height: 48px;
  padding: 14px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.card:hover { border-color: var(--accent); }
.card.is-selected {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, white);
  font-weight: 600;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.is-selected {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 16%, white);
  font-weight: 600;
}
.date-mode { margin-bottom: 20px; }

.notes { margin-top: 14px; }

/* calendar ----------------------------------------------------------- */

.calendars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 640px) {
  .calendars { grid-template-columns: 1fr; }
}
.cal-title {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.cal-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--bg-soft); }
.cal-day.is-today { font-weight: 700; text-decoration: underline; }
.cal-day.is-selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.cal-day:disabled { color: #d4d4d8; cursor: default; }
.cal-day.is-blank { visibility: hidden; }

.calendars[hidden] { display: none; }

/* The page turn above the pair (SPEC_2026-09-17_THE_CALENDAR_TURNS_ITS_PAGES):
   one row across both months, ‹ › at its ends, the end controls disabled
   rather than hidden. */
.cal-nav {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 14px;
}
.cal-turn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line, #d4d4d8);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cal-turn:hover:not(:disabled) { background: var(--bg-soft); }
.cal-turn:disabled { color: #d4d4d8; cursor: default; }

/* inventory ---------------------------------------------------------- */
/* Rooms stack vertically, one open at a time. A horizontal strip of 23
   tabs was unusable on a phone, which is where most quotes are asked for. */

.acc {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 8px 0 14px;
  border: 0;
  background: var(--bg);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.acc.is-open .acc-head {
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--accent) 8%, white);
}
.acc-head .caret { color: var(--ink-soft); font-size: 12px; width: 14px; }
.acc-head .ttl { font-weight: 700; font-size: 15px; flex: 1; }
/* Black on the amber: white gives about 1.9:1 at this lightness and is
   unreadable at 12px, black roughly 11:1. */
.acc-head .cnt {
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.acc-head .cnt[hidden] { display: none; }
.acc-head .act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  font-size: 20px;
  color: var(--ink-soft);
  cursor: pointer;
}
.acc-head .act:hover { background: var(--bg-soft); color: var(--ink); }

.acc-body { padding: 10px 12px 14px; }
.acc-body[hidden] { display: none; }

/* Opened by the pencil in the heading rather than standing above the search,
   where it read as the panel's first question. */
.alias { margin-bottom: 10px; }
.alias[hidden] { display: none; }
.alias label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.alias .hint { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.room-search { margin-bottom: 0; }

.results {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 10px;
}
.results .group {
  padding: 8px 12px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: var(--bg-soft);
}
.results .none { padding: 28px; text-align: center; color: var(--ink-soft); font-size: 14px; }

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }
.item .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
  background: var(--bg-soft);
  border-radius: 4px;
}
.item .nm {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* − field + read as one control and sit flush. The delete is held apart by
   a deliberate margin: close enough to find, far enough that a thumb aiming
   at − does not wipe the line. */
.item .stepper { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.item .stepper button {
  width: 40px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.item .stepper button:hover { background: var(--bg-soft); }
.item .stepper button:disabled { opacity: .3; cursor: default; }
/* The × draws small inside its em box and needs more size than the rest. */
.item .stepper .rm { color: var(--danger); font-size: 30px; margin-right: 10px; }
.item .stepper .rm[hidden] { display: none; }
/* Typable, because thirty buckets should be two keystrokes and not thirty
   presses. 16px so iOS does not zoom the page; native spinners off. */
.item .stepper input {
  width: 46px;
  height: 44px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: 0;
  -moz-appearance: textfield;
}
.item .stepper input::-webkit-outer-spin-button,
.item .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* On a narrow screen the controls ate the item name. Trim the widths; the
   heights stay 44 so the touch target survives. */
@media (max-width: 480px) {
  .item { padding: 6px 4px; gap: 6px; }
  .item img { width: 32px; height: 32px; }
  .item .who { gap: 8px; }
  .item .nm { font-size: 13.5px; }
  .item .stepper button { width: 34px; font-size: 20px; }
  .item .stepper .rm { margin-right: 10px; font-size: 28px; }
  .item .stepper input { width: 40px; }
}

/* actions ------------------------------------------------------------ */

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  /* Clears the iPhone gesture bar, which otherwise sits over the button. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.actions .spacer { flex: 1; }
.actions button {
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-next {
  background: var(--accent);
  color: var(--ink);
}
.btn-next:hover { background: var(--accent-dark); }
.btn-next:disabled { opacity: .6; cursor: default; }
.btn-back, .btn-skip {
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-back:hover, .btn-skip:hover { border-color: var(--accent); }

/* summary ------------------------------------------------------------ */

.step-done h1 { margin-bottom: 8px; }
.summary { margin-top: 24px; }
.summary h3 {
  font-size: 15px;
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.summary dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; }
.summary .ref {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--accent) 18%, white);
  font-weight: 700;
}

/* The token pages borrow the inventory step's vocabulary, and need two things
   the form does not: a read-only quantity, and a room that is open on arrival
   with no caret to press. See views/action_inventory.php. */
.acc.is-open > .acc-body { display: block; }
.item .qty-read {
  min-width: 2.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-soft);
}
/* The token pages' read-only quantity, and a stepper input that has to look
   like the form's without inheriting its width rules. */
.item .qty-read {
  min-width: 2.4em; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--ink-soft);
}
.sheet .stepper input[type=number] {
  width: 62px; margin-top: 0; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.sheet .stepper input[type=number]::-webkit-outer-spin-button,
.sheet .stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sheet .stepper button {
  width: 38px; min-height: 38px; padding: 0; font-size: 20px; line-height: 1;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
.sheet .stepper button:hover { background: var(--bg-soft); border-color: var(--accent); }
.sheet .stepper { display: flex; align-items: center; gap: 6px; }
.sheet .acc-head .ttl { font-weight: 700; }

/* mobile ------------------------------------------------------------- */
/*
   Measured at 375×812 on 22/08/2026, after Altamir opened the hub on a phone.
   Most of the form was already right — inputs at 16px so iOS does not zoom on
   focus, 44px tap targets, cards two to a row, nothing overflowing sideways.
   Three things were not.

   The header was padded 24px against the shell's 20px, so the logo sat four
   pixels left of everything under it. Nobody names that when they see it; they
   just find the page slightly untidy.

   The phone number was a 23px tap target. On a removals company's site opened
   on a phone it is arguably the most valuable tap on the page, and it was the
   smallest thing on it. It is a link, so it needs no more than somewhere to
   put the padding.

   And the logo at 44px crowds the number on a narrow screen. 36 leaves room
   without making the brand small. */
@media (max-width: 640px) {
  .site-header { padding: 12px 20px; }
  .site-header .logo { height: 36px; }
  .site-header .phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    margin-right: -6px;
  }
  .shell { padding: 24px 20px 96px; }
  h1 { font-size: 20px; }
}

/* The option cards of step five.

   They lived inline in `views/capture_menu.php` while the question was a page
   of its own. The question is a panel now, so the rules belong to the form's
   stylesheet — and they gained a selected state, which a page of links never
   needed because clicking one left the page. */
.options { display: grid; gap: 12px; margin-top: 4px; }
.option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.option:hover, .option:focus-visible {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, white);
  outline: none;
}
/* Chosen, and still changeable. The border carries it rather than a tick in
   the corner: the card is the control, so the whole card should look pressed. */
.option.is-selected {
  border-color: var(--accent);
  border-width: 2px;
  padding: 17px 19px;
  background: color-mix(in oklch, var(--accent) 10%, white);
}
.option h2 { font-size: 17px; margin: 0 0 4px; }
.option p  { margin: 0; color: var(--ink-soft); font-size: 14px; }
.option .note {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  /* The blurb is the sentence a customer decides on, and the note under it is
     the one that stops them choosing wrongly. Neither is decoration. */
  .option { padding: 16px; }
  .option.is-selected { padding: 15px; }
  .option h2 { font-size: 16px; }
  .option p { font-size: 14.5px; }
  .option .note { font-size: 13px; margin-top: 12px; }
  .options { gap: 10px; }
}

/* The estimate, on the one screen that shows a figure. */
.estimate {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--accent) 7%, white);
}
.estimate-amount {
  margin: 0 0 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}
.estimate .sub { margin: 6px 0 0; }
@media (max-width: 640px) {
  .estimate { padding: 16px; }
  .estimate-amount { font-size: 28px; }
}
.estimate-pending {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

/* ── The video call slot ────────────────────────────────────────────────────
   A month beside a column of times. The two are read together — a time means
   nothing without the day it belongs to — so they sit side by side and the
   column heads itself with the chosen date once there is one. */
.call-slot { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: start; }
.call-slot-cal { min-width: 0; }
.call-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted, #6b7280); }
.call-times-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted, #6b7280); padding-bottom: 8px; border-bottom: 1px solid var(--line, #e4e4e7); }
.call-times-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-top: 10px; }
.call-time { text-align: center; padding: 9px 10px; border: 1px solid var(--line, #e4e4e7); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-size: 14px; }
.call-time:hover { background: var(--bg-soft, #f9fafb); }
.call-time.is-selected { border-color: #f9d204; background: #fffbe6; font-weight: 700; }
/* A weekend is drawn and refused rather than hidden: a customer who looked for
   Saturday should see why it cannot be picked. */
.cal-day.is-weekend { color: #d4d4d8; }
@media (max-width: 640px) {
  .call-slot { grid-template-columns: 1fr; }
  .call-times-list { max-height: none; flex-direction: row; flex-wrap: wrap; }
  .call-time { flex: 1 1 30%; }
}

/* The multi-line boxes. The width rules above reach inputs and `.notes` and
   never reached a bare textarea, so both of them — the notes before the call
   and the notes with an uploaded list — rendered at the browser's default
   column width: a narrow box for the one question on the screen that invites a
   paragraph. */
.field textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  /* 16px, or iOS Safari zooms the page when the field takes focus. */
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  resize: vertical;
}
.field textarea:focus { outline: 2px solid var(--focus, #f9d204); outline-offset: 1px; }