/* ---------------------------------------------------------------------------
   Simple forms (/contact and any later short form)

   Built on the same tokens as the invite page, so this reads as the same
   product: bone paper, a white card, the display face for the heading and
   Inter for everything else. Deliberately its own small stylesheet rather
   than more rules in style.css — nothing here can affect the application
   form or the dashboard.
   --------------------------------------------------------------------------- */

.simple-form-page {
  background: var(--paper);
  min-height: 100vh;
  min-height: 100svh;
}

.sf-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(32px, 7vw, 72px);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* One object on the page: the brand side and the form share a single
   rounded card, split into two columns once there is room for them. */
.sf-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 36px 80px -38px rgba(20, 20, 20, 0.34);
}

/* ---- the brand side ---- */

.sf-aside {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(20px, 5vw, 38px) clamp(20px, 5vw, 38px) clamp(24px, 5vw, 38px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 4vw, 30px);
}
.sf-aside-top { display: flex; align-items: center; }
.sf-mark {
  height: 22px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}
.sf-mark-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--paper);
}
.sf-aside-body { display: flex; flex-direction: column; gap: 14px; }
.sf-aside h1 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.sf-intro {
  margin: 0;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem);
  line-height: 1.6;
  /* Tinted from the panel's own ground rather than a flat grey. */
  color: color-mix(in srgb, var(--paper) 76%, transparent);
  text-wrap: pretty;
}
.sf-intro[hidden] { display: none; }

/* Whose inbox this lands in, said with a face rather than a sentence. */
.sf-signer { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.sf-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--paper) 18%, transparent);
}
.sf-signer-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-signer-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}
.sf-signer-role {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

/* ---- the form side ---- */

.sf-main { padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 40px) clamp(26px, 5vw, 36px); }

.sf-reassure {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}

@media (min-width: 880px) {
  .sf-card { grid-template-columns: 0.85fr 1fr; align-items: stretch; }
  .sf-aside { justify-content: space-between; }
  .sf-main { display: flex; flex-direction: column; justify-content: center; }
}

.sf-fields { display: flex; flex-direction: column; gap: 20px; }

.sf-field label.sf-label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.sf-field .sf-help {
  margin: 0 0 7px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sf-field input[type="text"],
.sf-field input[type="email"],
.sf-field input[type="tel"],
.sf-field select,
.sf-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.sf-field textarea { min-height: 148px; resize: vertical; }
.sf-field input:hover, .sf-field textarea:hover, .sf-field select:hover { border-color: var(--border-strong); }
.sf-field input:focus, .sf-field textarea:focus, .sf-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.sf-field input:focus-visible, .sf-field textarea:focus-visible { outline: none; }
.sf-field input::placeholder, .sf-field textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }

/* Invalid state: the border alone is not a message, so every field that
   fails gets a sentence naming the problem, tied to the input by id. */
.sf-field.is-invalid input,
.sf-field.is-invalid textarea,
.sf-field.is-invalid select { border-color: var(--error); }
.sf-field-error {
  margin: 7px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--error);
}
.sf-count {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sf-count.is-near { color: var(--error); }

.sf-choices { display: flex; flex-direction: column; gap: 8px; }
.sf-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: 0.97rem;
}
.sf-choice:hover { border-color: var(--border-strong); }
.sf-choice input { accent-color: var(--accent); }

.sf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sf-error[hidden] { display: none; }
.sf-error {
  margin: 18px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--error) 8%, white);
  color: var(--error);
  font-size: 0.9rem;
  line-height: 1.5;
}

.sf-submit {
  margin-top: 24px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Disabled the moment it is pressed, so a second tap cannot send twice. */
.sf-submit[disabled] { opacity: 0.72; cursor: default; }
.sf-submit.is-sending .sf-submit-label::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 9px;
  vertical-align: -2px;
  border: 2px solid color-mix(in srgb, var(--accent-contrast) 40%, transparent);
  border-top-color: var(--accent-contrast);
  border-radius: 50%;
  animation: sfSpin 0.7s linear infinite;
}
@keyframes sfSpin { to { transform: rotate(360deg); } }

/* The confirmation, in place of the form. */
.sf-done[hidden] { display: none; }
.sf-done { text-align: left; animation: sfDoneIn 0.5s var(--ease-out) both; }
.sf-done-mark {
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.sf-done h2 {
  margin: 0 0 8px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sf-done p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
@keyframes sfDoneIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Embedded in a Circle lesson: no page chrome, nothing to scroll past, and
   a transparent ground so it sits on whatever the lesson's own background
   is rather than punching a bone-coloured rectangle into it. The brand
   side goes too — the lesson around it already says where this is. */
.simple-form-page.is-embed { background: transparent; min-height: 0; }
.is-embed .sf-shell {
  min-height: 0;
  /* A small gutter so the fields never touch the iframe's edges, and a
     cap so the form does not stretch the width of a wide lesson. */
  padding: 0 2px;
  max-width: 620px;
  margin: 0 auto;
  display: block;
}
.is-embed .sf-card {
  display: block;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.is-embed .sf-aside { display: none; }
.is-embed .sf-main { padding: 4px 0 8px; }
/* Without the brand side, the form needs its own heading back. */
.is-embed .sf-main::before {
  content: attr(data-title);
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .sf-done { animation: none; }
  .sf-submit.is-sending .sf-submit-label::after { animation-duration: 1.6s; }
  .sf-field input, .sf-field textarea, .sf-field select { transition: none; }
}