/* Start a project: details form, VASA's calendar, confirmation, done.
   One layout for every step, like "What we do" on the homepage: the heading in columns 1–3, the step in columns 4–8,
   starting level with the heading. Only the site's own type (body, small label, the three link sizes) and three spacings:
   8px inside controls, the grid gap between cells and columns, the block gap between blocks. */
.start-section {
  --start-body:min(clamp(18px,1.65vw,30px),calc(var(--section-heading-size) * .75));
  --start-small:min(clamp(14px,1vw,17px),calc(var(--section-heading-size) * .7));
  --g:clamp(14px,1.4vw,24px);
  --b:clamp(24px,2.8vw,40px);
  --cell:44px;
  min-height:100svh;
  box-sizing:border-box;
  align-items:start;
}
.start-section > h1 { grid-column:1 / 4; grid-row:1; margin:0; outline:none; }
/* Calendar step: the heading takes the top row and the calendar with its times sits centred in columns 3–6 below it. */
.start-section[data-current="calendar"] > h1 { grid-column:1 / -1; }
.start-section[data-current="calendar"] > .start-flow { grid-column:3 / 7; grid-row:2; margin-top:var(--b); }
/* The guide line over the details step (heading and form share a top) disappears once the calendar moves below the heading,
   so the calendar step draws the same line itself: full width, 20px above the heading, guide colour and weight. */
.start-section[data-current="calendar"]::before { content:""; grid-column:1 / -1; grid-row:1; align-self:start; height:0; margin:-20px 0 20px; border-top:var(--grid-weight,1px) solid currentColor; opacity:var(--grid-opacity,.3); pointer-events:none; }
html[data-grid-enabled="false"] .start-section::before { display:none; }
.start-flow { grid-column:4 / 9; grid-row:1; min-width:0; font-size:var(--start-body); line-height:1.2; }
.start-flow p { margin:0; font-size:inherit; line-height:1.2; position:static; text-align:left; }
.start-flow button, .start-flow input, .start-flow select, .start-flow textarea { font:inherit; color:inherit; }
.start-section [hidden] { display:none !important; }
.start-panel { outline:none; min-width:0; }
/* Panels swap with a hard cut: an opacity or transform entrance would isolate the difference blends inside. */

/* The step column is five grid columns wide (4–8); the form, confirm and done steps use the first four. */
.start-form, .booking-details, .booking-move, .booking-cancel, .start-done { display:grid; gap:var(--b); width:calc((100% - 4 * var(--g)) / 5 * 4 + 3 * var(--g)); }

/* Fields: small label above, one line in text colour underneath. */
.start-fields { display:grid; gap:var(--b); }
/* Label tight on its line: 4px to the input, whose text sits 4px above it; the textarea box keeps 8px. */
.start-field { display:grid; gap:4px; min-width:0; }
.start-field.start-project, .start-field.booking-notes { gap:8px; }
.start-label { position:relative; justify-self:start; width:max-content; max-width:100%; font-size:var(--start-small); line-height:1.2; }
.start-label > span { position:relative; display:block; }
.start-field input, .start-field textarea, .start-select select {
  display:block; width:100%; box-sizing:border-box; margin:0; padding:4px 0 8px;
  font-size:var(--start-body); line-height:1.2;
  background:transparent; border:0; border-bottom:1px solid currentColor; border-radius:0; outline:none;
  -webkit-appearance:none; appearance:none;
  transition:background-color 0s 600000s; /* keeps the browser's autofill fill from showing */
}
.start-field input:-webkit-autofill { -webkit-text-fill-color:#141414; caret-color:#141414; }
.start-field textarea { height:calc(4 * 1.2em + 16px); padding:8px; border:1px solid currentColor; resize:none; }
.start-field input:focus-visible, .start-select select:focus-visible { border-bottom-width:2px; padding-bottom:7px; }
.start-field textarea:focus-visible { outline:1px solid currentColor; outline-offset:0; }
.is-missing .start-label { color:white; }
.is-missing .start-label::before { content:""; position:absolute; inset:0; background:white; mix-blend-mode:difference; pointer-events:none; }
.is-missing .start-label > span { mix-blend-mode:difference; }
/* A field's own message sits on its label's line, so it never pushes the field down. */
.start-field-head { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--g); row-gap:8px; min-width:0; }
.start-field-error { font-size:var(--start-small); line-height:1.2; }
.start-field-error:empty { display:none; }

/* Message lines always keep their line, so a message never pushes anything. */
.start-error, .start-status { min-height:1.2em; font-size:var(--start-small) !important; }
/* Book my call follows the last field one block gap down; its message line sits under the button (start.html),
   so the reserved line never adds space above it. */
.start-form > .start-error { margin-top:calc(8px - var(--b)); }
.start-form > .start-error + .start-privacy { margin-top:calc(8px - var(--b)); }

/* Buttons and links: the page-link highlight box (sizes from the shared --link-* scale). */
.start-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--g); }
button.page-link { margin:0; padding:0; border:0; background:none; font:inherit; text-align:left; }
.start-button:disabled::before { background:transparent; border:1px solid white; }

/* Calendar step: month block in the first three of the five columns, times in the last two.
   Row 1 lines the month name up with the day name, row 2 the day grid with the time list (same height), row 3 the time zone. */
/* Calendar step, one vertical flow (pick a day, then scroll to its times):
   the month (header, grid gap, day grid); one block gap; the times (day name with the time zone on the same row, grid gap, all slots). */
.booking-date { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head head" "cal cal" "day zone" "times times"; column-gap:var(--g); row-gap:var(--g); align-items:end; outline:none; }
.booking-head { grid-area:head; display:flex; justify-content:space-between; align-items:center; gap:var(--g); height:40px; }
.booking-calendar { grid-area:cal; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.booking-times-day { grid-area:day; margin-top:calc(var(--b) - var(--g)); padding-bottom:8px; }
.booking-zone { grid-area:zone; width:clamp(200px,16vw,260px); margin-top:calc(var(--b) - var(--g)); }
.booking-times-list { grid-area:times; display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); grid-auto-rows:40px; gap:8px; }
.start-calendar[data-loading] .booking-date { pointer-events:none; }
.booking-month { font-size:inherit; }
.booking-nav { display:flex; gap:8px; }
button.page-link.booking-arrow { display:grid; place-items:center; width:40px; height:40px; }
.page-link.booking-arrow::before { background:transparent; border:1px solid white; }
.booking-arrow svg { position:relative; width:16px; height:16px; fill:none; stroke:white; stroke-width:1.5; mix-blend-mode:difference; }
.booking-arrow:disabled { visibility:hidden; }
.booking-days { display:contents; }
.booking-weekday { text-align:center; font-size:var(--start-small); line-height:1.2; }
.booking-calendar > span:not(.booking-weekday), .booking-days > span { height:var(--cell); }
.booking-day { position:relative; display:grid; place-items:center; width:100%; height:var(--cell); padding:0; border:0; background:transparent; font-size:var(--link-s); line-height:1; }
.booking-day:not(:disabled)::before { content:""; position:absolute; inset:0; border:1px solid white; mix-blend-mode:difference; pointer-events:none; }
.booking-day[aria-pressed="true"]::before { background:white; }
.booking-day > span { position:relative; }
.booking-day:not(:disabled) > span { color:white; mix-blend-mode:difference; }
.booking-day:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* Time pills: outline in text colour, filled when chosen (the Human/LLM switch pattern). */
.start-chip { position:relative; display:grid; place-items:center; height:40px; font-size:var(--link-s); line-height:1.2; }
.start-chip::before { content:""; position:absolute; inset:0; border:1px solid white; border-radius:64px; background:transparent; mix-blend-mode:difference; pointer-events:none; }
.start-chip:has(input:checked)::before { background:white; }
.start-chip input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; }
.start-chip > span { position:relative; white-space:nowrap; pointer-events:none; }
.start-chip:has(input:focus-visible)::after { content:""; position:absolute; inset:-3px; border:2px solid white; border-radius:68px; mix-blend-mode:difference; pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
  .booking-day:not(:disabled):hover::before, .start-chip:hover::before { animation:link-blink 140ms steps(1,end) infinite; }
}
@media (prefers-reduced-motion:reduce) {
  .booking-day:not(:disabled):hover::before, .start-chip:hover::before { animation:none; }
}
.start-select { position:relative; display:block; }
.start-select select { padding-right:32px; }
.start-select::after { content:""; position:absolute; right:6px; top:calc(50% - 6px); width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; rotate:45deg; pointer-events:none; }

/* Only the active calendar step shows; status, fallback and Back follow it one block gap below. */
.booking-step { display:none; }
.start-calendar[data-step="date"] .booking-date { display:grid; }
.start-calendar[data-step="details"] .booking-details { display:grid; }
.start-calendar > .start-status { margin-top:var(--b); }
.start-calendar > .start-fallback { margin-top:8px; font-size:var(--start-small) !important; }
.start-fallback .page-link, .start-status .page-link { display:inline-block; }
/* On the confirm step "Change time" is the way back; the fallback line and Back belong to the calendar step only. */
.start-calendar[data-step="details"] > .start-fallback { display:none; }

/* Confirm step: chosen time with Change time under it, notes, check, Confirm booking. */
.booking-choice { display:grid; gap:8px; justify-items:start; }
.booking-confirm { display:grid; justify-items:start; gap:0; }
.booking-check:empty { display:none; }
.booking-check:not(:empty) { margin-bottom:var(--g); } /* Turnstile only takes space when it shows a challenge. */

/* Done step. */
.start-done { gap:var(--g); }
.start-done h2.start-done-title { margin:0; font-size:var(--link-m); line-height:1.2; }
.booking-done-team { font-size:var(--start-small) !important; }
.start-done > .booking-done-links { margin-top:calc(var(--b) - var(--g)); }

/* Change your call (/book/manage/): the booked call above the calendar, Cancel this call instead under the times,
   then Move or Cancel laid out like the confirm step. A bad link shows only its message, at body size. */
.booking-current { display:grid; gap:8px; margin-bottom:var(--b); }
.start-flow .booking-label { font-size:var(--start-small); }
[data-variant="manage"] .booking-date { grid-template-areas:"head head" "cal cal" "day zone" "times times" "cancel cancel"; }
.booking-cancel-open { grid-area:cancel; justify-self:start; margin-top:calc(var(--b) - var(--g)); }
.start-calendar[data-step="move"] .booking-move, .start-calendar[data-step="cancel"] .booking-cancel { display:grid; }
.start-calendar:is([data-step="move"], [data-step="cancel"], [data-step="message"]) > .start-fallback { display:none; }
.start-calendar[data-step="message"] > .start-status { margin-top:0; font-size:var(--start-body) !important; }

/* Phone: heading, then the step full width. Calendar first, then the day's times in a short scroller, then the zone. */
@media (width < 768px) {
  .start-section { display:block; }
  .start-flow { margin-top:var(--b); }
  .start-form, .booking-details, .booking-move, .booking-cancel, .start-done { width:100%; }
  .booking-date { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "cal" "day" "zone" "times"; }
  [data-variant="manage"] .booking-date { grid-template-areas:"head" "cal" "day" "zone" "times" "cancel"; }
  .booking-zone { width:100%; margin-top:0; }
  .booking-times-list { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
  .booking-day { height:auto; aspect-ratio:1; }
  .booking-calendar > span:not(.booking-weekday), .booking-days > span { height:auto; }
}

/* Primary actions (Book my call, Confirm booking): the Let's collaborate pill. White fill under a black label,
   the whole pill blended with difference, so it reads black on light and white on dark. 16px, 8px 24px, round. */
html body main .start-pill.page-link { position:relative; display:inline-block; padding:8px 24px; font-size:16px; line-height:normal; white-space:nowrap; mix-blend-mode:difference; }
.start-pill.page-link::before { content:""; position:absolute; inset:0; background:white; border:0; border-radius:64px; mix-blend-mode:normal; }
.start-pill.page-link > span { position:relative; color:black; mix-blend-mode:normal; }
.start-pill.page-link:disabled { opacity:.4; }
.start-pill.page-link:disabled::before { background:white; border:0; }
.start-pill.page-link:focus-visible { outline:none; }
.start-pill.page-link:focus-visible::after { content:""; position:absolute; inset:-4px; border:2px solid white; border-radius:68px; pointer-events:none; }
/* Privacy note under the step 1 button. */
.start-form > .start-privacy { font-size:var(--start-small) !important; }
.start-privacy .page-link { display:inline-block; }