/* The contact page in the brand's dots (spec docs/specs/2026-11-07-contact-form.md), on the case
   studies' styles (../case-studies/dots/case.css: the page, its head and the rows' dots boxes) and the
   form's shared rules in styles.css. Type stays in the shared roles; this file only places, sizes and
   colours. Black and white, the one hairline grey, the marks' dots; colour only in the confetti.
   No shadows. */

/* the head: the Telemyr pair turning into the contact dots, over the facts, the title and the deck */
.ct-spot { display: block; width: clamp(5.4rem, 11vw, 9rem); aspect-ratio: 1.45; }

.ct-body { position: relative; max-width: var(--cx-wide); margin: clamp(3rem, 7vw, 6rem) auto 0; }
/* the confetti flies over the screen, under the navigation, and never takes a click */
.ct-party { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* The form: one row per field between the site's thin rules, its own dots on the left, its name, then
   the box to type in. Under the pointer a row turns light grey; the row being typed in turns black
   from rule to rule, its words and dots white, as the square you are on in the navigation. */
.ct-rows { border-bottom: var(--rule); }
.ct-row {
  --inset: clamp(.75rem, 1.6vw, 1.25rem);
  display: grid; grid-template-columns: 5.5rem minmax(0, 15rem) minmax(0, 1fr); gap: .25rem clamp(1rem, 3vw, 3rem);
  align-items: center; padding: clamp(.85rem, 1.6vw, 1.15rem) 0; border-top: var(--rule); cursor: text;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, padding .35s cubic-bezier(.2, .8, .2, 1);
}
.ct-row.is-long { align-items: start; }
.ct-row.is-long .ct-label { padding-top: .3em; }
.ct-label { margin: 0; cursor: text; }
.ct-box { display: block; min-width: 0; }
.ct-input {
  display: block; width: 100%; margin: 0; padding: .3em 0; border: 0; border-radius: 0; background: transparent;
  color: inherit; caret-color: currentColor; font: inherit; letter-spacing: inherit; outline: none; appearance: none;
}
.ct-input::placeholder { color: var(--color-text-grey); opacity: 1; }
textarea.ct-input { resize: vertical; field-sizing: content; min-height: calc(4lh + .6em); max-height: 20lh; }
@media (hover: hover) {
  .ct-row:hover { background: var(--color-rule-grey); }
}
.ct-row:focus-within { background: var(--color-black); border-top-color: var(--color-black); color: var(--color-white); padding-inline: var(--inset); }
.ct-row:focus-within .cx-row-mark canvas { filter: invert(1); }
.ct-row:focus-within .ct-input::placeholder { color: color-mix(in srgb, var(--color-white) 55%, transparent); }
.ct-row .contact-field-error { margin-top: .35rem; }
.ct-row[data-invalid] .ct-label::after { content: ""; display: inline-block; width: .32em; height: .32em; margin-left: .4em; border-radius: 50%; background: currentColor; vertical-align: .55em; }

/* Send: a black pill, centred under the rows, the line on what happens under it */
.ct-send { justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.ct-form .contact-send { background: var(--color-black); color: var(--color-white); }
.ct-form .contact-send:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }
.ct-send .contact-form-status { flex-basis: 100%; text-align: center; }
.ct-send .contact-form-status:empty { display: none; }
.ct-note { margin: 1.25rem auto 0; max-width: 46ch; text-align: center; color: var(--color-text-grey); text-wrap: pretty; }
.ct-note a { color: inherit; text-underline-offset: .2em; }
.ct-note a:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }

/* once sent: the head says thank you (page.js) and the calendar follows it, centred */
.ct-done { position: relative; display: grid; justify-items: center; text-align: center; }
.ct-done[hidden] { display: none; }
.ct-done p { margin: 0; max-width: 34ch; text-wrap: pretty; }

/* the call to book, in Rafael's Calendly, inline: it loads only once the form has gone */
.ct-book { width: 100%; display: grid; justify-items: center; gap: clamp(.75rem, 1.5vw, 1rem); }
.ct-book[hidden], .ct-calendar[hidden] { display: none; }
/* no frame of ours: Calendly draws its own card, and a box in a box reads as double */
.ct-calendar { width: min(100%, 66rem); height: 44rem; }
.ct-book-link a { color: var(--color-text-grey); text-underline-offset: .2em; }
.ct-book-link a:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }

@media (max-width: 700px) {
  .ct-row { grid-template-columns: 4.25rem minmax(0, 1fr); row-gap: 0; align-items: center; }
  .ct-row .cx-row-mark { grid-row: span 2; width: 4.25rem; height: 2.8rem; }
  .ct-row.is-long .cx-row-mark { align-self: start; }
  .ct-box { grid-column: 2; }
  .ct-row.is-long .ct-label { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-row { transition: none; }
}