/* Visit: one sentence to finish, the house shown full bleed at the hour it means, and a drawing title block at the end. */

.visit__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; max-width: var(--container); margin: 0 auto var(--gutter); }
.visit__preview { position: sticky; top: var(--gutter); height: calc(100svh - 2 * var(--gutter)); min-height: 600px; border-radius: var(--r-panel); overflow: clip; background: #b9bbc0; isolation: isolate; }
.visit__form { display: grid; align-content: start; min-width: 0; min-height: calc(100svh - 2 * var(--gutter)); margin: 0; padding: clamp(84px, 9vw, 130px) var(--pad) clamp(36px, 4vw, 60px); }

/* ---------- the preview: the photograph is the hour you are booking ---------- */
.preview__plate { position: absolute; inset: 0; border-radius: 0; }
.preview__plate .pv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease); pointer-events: none; }
.preview__plate img.pv, .preview__plate .statephoto > img { object-fit: cover; object-position: 54% 60%; }
.preview__plate .pv--elev { background: var(--panel-soft); display: block; padding: 18% 10% 36%; }
.preview__plate .statephoto { background: transparent; }
.preview__plate .pv.is-on { opacity: 1; }
.preview__plate .tag { top: 20px; left: 20px; right: auto; bottom: auto; height: 30px; padding: 0 12px; }
.preview__sun { position: absolute; z-index: 3; left: clamp(14px, 1.6vw, 24px); right: clamp(14px, 1.6vw, 24px); bottom: clamp(14px, 1.6vw, 24px); display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px 22px; border-radius: 22px; }
.preview__island { width: 100%; }
.preview__island .island__orbit-line { opacity: 0.6; }
.preview__text { display: grid; gap: 4px; }
.preview__text .label { color: rgba(255, 255, 255, 0.86); }
.preview__when { font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 0.9vw, 2.1rem); line-height: 1.1; font-weight: 400; color: #ffffff; }
.preview__sunline { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }
.preview__island .dot.is-picked { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #ffffff; border-color: #ffffff; z-index: 3; }
.preview__island .island__pins > li.dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }

/* ---------- the sentence: each choice is a lime fill under the words ---------- */
.visit__sentence-wrap { display: grid; gap: 24px; }
.nobreak { white-space: nowrap; }
.visit__sentence { font-size: clamp(2rem, 0.8rem + 2.2vw, 3.6rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; text-wrap: balance; }
.visit__sentence > span { display: inline; }
.field { position: relative; display: inline-block; margin-inline: 0.06em; vertical-align: baseline; }
.field select {
  appearance: none; -webkit-appearance: none; background: var(--lime); border: 0; border-radius: 0.28em;
  font: inherit; letter-spacing: inherit; color: var(--lime-ink); padding: 0 0.95em 0.04em 0.28em; cursor: pointer; line-height: 1.12; text-overflow: clip;
  transition: background-color 250ms;
}
.field::after { content: ""; position: absolute; right: 0.36em; top: 52%; width: 0.2em; height: 0.2em; border-right: 2px solid var(--lime-ink); border-bottom: 2px solid var(--lime-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field select:hover { background: var(--lime-deep); }
.field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.field select option { font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--panel); }
.visit__translate { font-size: 1.0625rem; color: var(--muted); max-width: 42ch; min-height: 3.2em; }
.visit__translate b { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin: 0 2px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.05em; }
.visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.visit__plain { font-size: 0.875rem; color: var(--muted); max-width: 40ch; }
.visit__plain b { color: var(--ink); font-weight: 600; }
.visit__plain--big { font-size: 1rem; margin-top: 4px; max-width: 52ch; }

/* ---------- the title block ---------- */
.sheetblock { display: grid; gap: 20px; }
.sheetblock .display-l { max-width: 16ch; }
.titleblock--big { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-card); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--panel); text-align: left; }
.titleblock--big > div { padding: 14px 18px 16px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; gap: 4px; align-content: start; }
.titleblock--big > div:nth-child(2n) { border-right: 0; }
.titleblock--big > div:nth-last-child(-n + 2) { border-bottom: 0; }
.titleblock--big > div.is-wide { grid-column: 1 / -1; border-right: 0; background: var(--lime); color: var(--lime-ink); }
.titleblock--big dt { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.titleblock--big > div.is-wide dt { color: #3d4c12; }
.titleblock--big dd { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }

.vsteps { display: none; }

/* ====================================================== phone ====================================================== */
@media (max-width: 820px) {
  .visit__layout { display: block; margin: 0; }
  .visit__preview { position: relative; top: 0; height: clamp(240px, 36svh, 340px); min-height: 0; border-radius: var(--r-panel); margin-bottom: var(--gutter); }
  /* under the floating header, whose 40px bar lies over the photo's top (at 12px it sat beneath the day/night switch
     and Menu, QA work-9), on the 10px line the wordmark and the sun card keep */
  .preview__plate .tag { top: 50px; bottom: auto; left: 10px; right: auto; height: 24px; }
  .preview__sunline { display: none; }
  .preview__sun { left: 10px; right: auto; bottom: 10px; display: block; padding: 12px 14px; border-radius: 16px; max-width: calc(100% - 20px); }
  .preview__island { display: none; }
  .preview__text { gap: 2px; }
  .preview__when { font-size: 1.2rem; }
  .preview__sunline { font-size: 0.5625rem; }
  .visit__form { min-height: 0; padding: 26px var(--pad) calc(var(--dock-h, 112px) + 24px); margin-bottom: var(--gutter); }
  html.js .visit__sentence-wrap { display: none; }
  html.js .vsteps { display: grid; gap: 14px; }
  html:not(.js) .visit__sentence { font-size: 2rem; }
  .page-visit .ribbon-dock [data-season-switch] { display: none; }
  .page-visit .ribbon-dock .ribbon-dock__row { min-height: 30px; }
  .vsteps__count { color: var(--muted); }
  .vstep { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
  .vstep legend { padding: 0; margin-bottom: 12px; }
  .vstep .display-l { font-size: 2.2rem; }
  .choices { display: grid; gap: 8px; }
  .choice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 58px; padding: 10px 18px; border-radius: 16px; background: var(--panel-soft); cursor: pointer; transition: background-color 250ms, color 250ms; }
  .choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .choice .serif-line { font-size: 1.375rem; }
  .choice__side { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--muted); }
  .choice:has(input:checked) { background: var(--lime); color: var(--lime-ink); }
  .choice:has(input:checked) .choice__side { color: var(--lime-ink); }
  .choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
  .vnav { position: sticky; bottom: calc(var(--dock-h, 112px) + 8px); display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 0 0; background: var(--panel); z-index: 5; }
  .vnav .button { min-height: 52px; justify-content: space-between; }
  .vnav [data-back][hidden] + [data-next] { grid-column: 1 / -1; }
  .titleblock--big dd { font-size: 1.15rem; }
  .sheetblock { padding-top: 22px; }
  .page-visit .site-footer { margin-top: 0; }
}