/* form.css: the draft request questionnaire (release 3, 2026-10-01), /assets/partials/draft-form.html.
   Same look as the live site: styles.css tokens (ink greys, cyan brand, Archivo / Plex Sans / Plex Mono), the
   .card.form card beside the $297 card, .pill-style answer chips, .btn buttons. Every token has a fallback with
   the styles.css value, so the pop-up on /about/ (no styles.css, tokens from .ch-solo) looks the same. */
.lf3 {
  --lf3-ink0: var(--ink-000, #111111);
  --lf3-ink1: var(--ink-050, #191919);
  --lf3-ink15: var(--ink-150, #282828);
  --lf3-ink3: var(--ink-300, #3d3d3d);
  --lf3-ink4: var(--ink-400, #4f4f4f);
  --lf3-ink5: var(--ink-500, #6b6b6b);
  --lf3-brand: var(--brand, #00e7ef);
  --lf3-brand-dim: var(--brand-dim, rgba(0, 231, 239, .15));
  --lf3-t1: var(--text-1, #f2f2f2);
  --lf3-t2: var(--text-2, #a6a6a6);
  --lf3-t3: var(--text-3, #8f8f8f);
  --lf3-sans: var(--font, "IBM Plex Sans", system-ui, sans-serif);
  --lf3-disp: var(--disp, "Archivo", "Helvetica Neue", Arial, sans-serif);
  --lf3-mono: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  --lf3-r: var(--r, 8px);
  --lf3-pill: var(--r-pill, 999px);
  --lf3-bad: #ff8a80;
  position: relative;
}
.lf3 *, .lf3 *::before, .lf3 *::after { box-sizing: border-box; }
.lf3 [hidden] { display: none !important; }
.lf3 .lf3-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* head (eyebrow + h2 + lede come from styles.css / chrome.css like the old form) */
.lf3 .lf3-head { display: flex; flex-direction: column; gap: 1rem; }
.lf3.clock__form .lf3-head h2 { font-size: 1.5rem; line-height: 1.15; }
@media (min-width: 48em) { .lf3.clock__form .lf3-head h2 { font-size: 1.75rem; } }
.lf3.form .lf3-head h2 { font-size: 1.75rem; line-height: 1.12; }
@media (min-width: 48em) { .lf3.form .lf3-head h2 { font-size: 2rem; } }
.lf3.clock__form { gap: 1.25rem; }

.lf3 .lf3-demo {
  margin: 0; padding: .75rem 1rem; border: 1px dashed var(--lf3-brand); border-radius: var(--lf3-r);
  color: var(--lf3-t1); font-size: .875rem; line-height: 1.5;
}
.lf3 .lf3-demo b { color: var(--lf3-brand); }
.lf3 .lf3-demo a { color: var(--lf3-brand); }

/* progress */
.lf3 .lf3-progress { margin: 0; }
.lf3 .lf3-progress__label {
  margin: 0 0 .5rem; font-family: var(--lf3-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lf3-t2);
}
.lf3 .lf3-progress__label [data-lf-progress-name] { color: var(--lf3-t1); }
.lf3 .lf3-progress__sep { color: var(--lf3-ink5); }
.lf3 .lf3-progress__track { height: 4px; border-radius: 4px; background: var(--lf3-ink3); overflow: hidden; }
.lf3 .lf3-progress__fill { display: block; height: 100%; width: 25%; background: var(--lf3-brand); border-radius: 4px; transition: width .3s ease; }
.lf3 .lf3-progress__time { margin: .5rem 0 0; font-size: .8125rem; color: var(--lf3-t3); }

/* sections */
.lf3 .lf3-section { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.lf3 .lf3-legend {
  padding: 0; margin: 0 0 .25rem; float: left; width: 100%;
  font-family: var(--lf3-disp); font-size: 1.375rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--lf3-t1);
}
.lf3 .lf3-legend + * { clear: both; }
.lf3 .lf3-legend:focus { outline: none; }
.lf3 .lf3-legend:focus-visible { outline: 2px solid var(--lf3-brand); outline-offset: 4px; border-radius: 4px; }
.lf3 .lf3-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.lf3 .lf3-follow { margin-top: -.375rem; padding-left: .875rem; border-left: 2px solid var(--lf3-ink3); }
.lf3 .lf3-row { display: grid; gap: 1.125rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .lf3 .lf3-row { grid-template-columns: 1fr 1fr; } }
.lf3 .lf3-label { font-family: var(--lf3-sans); font-weight: 600; font-size: .9375rem; line-height: 1.4; color: var(--lf3-t1); padding: 0; }
.lf3 .lf3-label--sub { font-weight: 500; color: var(--lf3-t2); margin-top: .5rem; display: block; }
.lf3 .lf3-tag {
  margin-left: .375rem; font-family: var(--lf3-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lf3-t3);
}
.lf3 .lf3-help { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--lf3-t2); max-width: 60ch; }
.lf3 .lf3-help--section { margin-top: -.5rem; }

/* inputs: the live .field look */
.lf3 .lf3-input {
  width: 100%; height: 3rem; margin: 0; padding: 0 .875rem;
  font-family: var(--lf3-sans); font-size: 1rem; /* 16px keeps iOS from zooming */
  color: var(--lf3-t1); background: var(--lf3-ink1);
  border: 1px solid var(--lf3-ink3); border-radius: var(--lf3-r);
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease;
}
.lf3 .lf3-input::placeholder { color: var(--lf3-ink5); opacity: 1; }
.lf3 .lf3-input:hover { border-color: var(--lf3-ink4); }
.lf3 .lf3-input:focus { border-color: var(--lf3-brand); outline: none; }
.lf3 .lf3-input:focus-visible { outline: 2px solid var(--lf3-brand); outline-offset: 2px; }
.lf3 .lf3-textarea { height: auto; min-height: 5.5rem; padding: .625rem .875rem; line-height: 1.5; resize: vertical; }
.lf3 .lf3-select {
  padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center; background-size: 18px;
}
.lf3 .lf3-select option { color: #111; background: #fff; }

/* yes / no answers: the live .pill look */
.lf3 .lf3-choice { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.lf3 .lf3-choice > legend { margin-bottom: .5rem; float: left; width: 100%; }
.lf3 .lf3-choice > legend + * { clear: both; }
.lf3 .lf3-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.lf3 .lf3-opt { position: relative; display: inline-flex; cursor: pointer; }
.lf3 .lf3-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lf3 .lf3-opt span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--lf3-ink3); border-radius: var(--lf3-pill); background: transparent;
  color: var(--lf3-t2); font-family: var(--lf3-disp); font-weight: 700; font-size: .9375rem; line-height: 1.2;
  transition: border-color .2s, color .2s, background .2s;
}
.lf3 .lf3-opt span::before {
  content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid var(--lf3-ink4); background: transparent;
}
.lf3 .lf3-opt input[type="checkbox"] + span::before { border-radius: 3px; }
.lf3 .lf3-opt:hover span { border-color: var(--lf3-brand); color: var(--lf3-t1); }
.lf3 .lf3-opt input:checked + span { border-color: var(--lf3-brand); background: var(--lf3-brand-dim); color: var(--lf3-t1); }
.lf3 .lf3-opt input:checked + span::before { border-color: var(--lf3-brand); background: var(--lf3-brand); box-shadow: inset 0 0 0 2px var(--lf3-ink1); }
.lf3 .lf3-opt input:focus-visible + span { outline: 2px solid var(--lf3-brand); outline-offset: 2px; }

/* single checkboxes */
.lf3 .lf3-field--check { margin-top: -.5rem; gap: .25rem; }
.lf3 .lf3-check { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; font-size: .9375rem; color: var(--lf3-t2); }
.lf3 .lf3-check input, .lf3 .lf3-consent__box { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--lf3-brand); cursor: pointer; }
.lf3 .lf3-check input:focus-visible, .lf3 .lf3-consent__box:focus-visible { outline: 2px solid var(--lf3-brand); outline-offset: 3px; }
.lf3 .lf3-consent {
  display: grid; grid-template-columns: 20px 1fr; column-gap: .875rem; align-items: start;
  padding: .875rem 1rem; border: 1px solid var(--lf3-ink3); border-radius: var(--lf3-r); background: var(--lf3-ink0);
}
.lf3 .lf3-consent__box { margin-top: .2rem; }
.lf3 .lf3-consent__text { font-size: .8125rem; line-height: 1.55; color: var(--lf3-t2); cursor: pointer; }
.lf3 .lf3-consent__text a { color: var(--lf3-t1); text-decoration: underline; text-underline-offset: 2px; }
.lf3 .lf3-consent__text a:hover { color: var(--lf3-brand); }
.lf3 .lf3-consent__note { margin-top: -.5rem; font-size: .8125rem; color: var(--lf3-t3); }

/* errors */
.lf3 .lf3-err { margin: 0; font-size: .875rem; font-weight: 600; color: var(--lf3-bad); }
.lf3 .lf3-field.is-bad .lf3-input { border-color: var(--lf3-bad); }
.lf3 .lf3-alert { margin: 0; padding: .75rem 1rem; border-left: 3px solid var(--lf3-bad); background: rgba(255, 138, 128, .08); border-radius: 0 var(--lf3-r) var(--lf3-r) 0; color: var(--lf3-t1); }
.lf3 .lf3-alert a { color: var(--lf3-brand); font-weight: 600; }

/* actions */
.lf3 .lf3-actions { display: flex; gap: .75rem; align-items: stretch; }
.lf3 .lf3-actions .btn { white-space: normal; text-align: center; }
.lf3 .lf3-go { flex: 1 1 auto; }
.lf3 .lf3-back { flex: 0 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.lf3 .btn[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.lf3 .lf3-foot { display: flex; flex-direction: column; gap: .75rem; }
.lf3 .lf3-foot .btn-ghost.btn-block { margin-top: 0; white-space: normal; text-align: center; }

/* confirmation */
.lf3 .lf3-done { display: flex; flex-direction: column; gap: 1rem; }
.lf3 .lf3-done__title { margin: 0; font-family: var(--lf3-disp); font-size: 1.75rem; line-height: 1.12; font-weight: 800; color: var(--lf3-t1); }
@media (min-width: 48em) { .lf3.form .lf3-done__title { font-size: 2rem; } }
.lf3 .lf3-done__title:focus { outline: none; }
.lf3 .lf3-voice { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--lf3-t1); max-width: 44ch; }
.lf3 .lf3-sign { margin: 0; font-family: var(--lf3-mono); font-size: .875rem; letter-spacing: .06em; color: var(--lf3-brand); }
.lf3 .lf3-done__next { margin: 0; padding-top: 1rem; border-top: 1px solid var(--lf3-ink3); color: var(--lf3-t2); font-size: .9375rem; line-height: 1.55; }
.lf3 .lf3-done__next b { color: var(--lf3-t1); font-weight: 600; }

@media (max-width: 26em) {
  .lf3 .lf3-opt span { padding: .5rem .875rem; }
  .lf3 .lf3-back { padding-left: 1.125rem; padding-right: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lf3 *, .lf3 *::before, .lf3 *::after { transition: none !important; animation: none !important; }
}