/* Built by Brandon | intake pages
   Loads after style.css and reuses its tokens, buttons, nav and footer.
   This file adds the form components and the light theme.
   Light mode is the one documented exception to "dark only": the toggle
   swaps the same tokens, so every component follows for free. */

:root {
  --field-line: rgba(255,255,255,.40);   /* 3:1 against the page for form edges */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.72)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  --black:      #f2f2f2;
  --ink-0:      #0a0a0a;
  --ink-1:      rgba(0,0,0,.74);
  --ink-2:      rgba(0,0,0,.62);
  --ink-3:      rgba(0,0,0,.30);
  --rule:       rgba(0,0,0,.14);
  --rule-hi:    rgba(0,0,0,.32);
  --surface:    rgba(0,0,0,.04);
  --surface-hi: rgba(0,0,0,.08);
  --field-line: rgba(0,0,0,.45);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(0,0,0,0.7)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The starfield is drawn on black, so light mode uses the flat ground. */
[data-theme="light"] #field-canvas { display: none; }
[data-theme="light"] #nav.scrolled { background: rgba(242,242,242,.86); }

button, input, select, textarea { font-family: inherit; }

/* ── Nav extras ── */
.nav-right { display: flex; align-items: center; gap: 1.5rem; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-hi);
  border-radius: 50%;
  color: var(--ink-1);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.theme-toggle:hover { color: var(--ink-0); border-color: var(--ink-0); }

.theme-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* ── Layout ── */
.intake {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 4rem) var(--pad-x) 6rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 5rem;
  align-items: start;
}

.intake-aside {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}

.intake-kicker {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-1);
}

.intake-title {
  font-size: clamp(2.75rem, 5.4vw, 4.75rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.intake-lede {
  margin: 1.75rem 0 0;
  max-width: 30ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-1);
}

.intake-facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-1);
}

/* Step list: only exists once JS turns the form into steps. */
.steps {
  display: none;
  position: relative;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0 0 0 1.5rem;
  flex-direction: column;
  gap: 0.125rem;
}

.steps::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: var(--rule);
}

.is-wizard .steps { display: flex; }

.step-link {
  padding: 0.5rem 0;
  background: none;
  border: 0;
  font-size: 1rem;
  font-weight: 300;
  text-align: left;
  color: var(--ink-2);
  cursor: default;
  transition: color var(--dur) var(--ease);
}

.step-link[aria-current="step"] { color: var(--ink-0); font-weight: 400; }
.step-link.is-done { color: var(--ink-1); cursor: pointer; }
.step-link.is-done:hover { color: var(--ink-0); }

/* ── Progress (wizard only) ── */
.form-head { display: none; margin-bottom: 2.5rem; }
.is-wizard .form-head { display: block; }

.step-count {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.progress {
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--ink-0);
  transform-origin: left;
  transform: scaleX(0.2);
  transition: transform 500ms var(--ease);
  will-change: transform;
}

/* ── Steps ── */
.step + .step { margin-top: 4rem; }

.step-title {
  margin-bottom: 2rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.step-title:focus { outline: none; }

.is-wizard .step { display: none; margin-top: 0; }
.is-wizard .step.is-current { display: block; animation: step-in 420ms var(--ease) both; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* ── Fields ── */
.field { margin-bottom: 1.5rem; }

.field > label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink-0);
}

.field .opt {
  margin-left: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--ink-2);
}

.field .req { color: var(--ink-1); }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: 0.75rem;
  color: var(--ink-0);
  font-size: 1rem;              /* 16px: stops iOS zooming on focus */
  font-weight: 400;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-2); font-weight: 300; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-1); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--ink-0);
  outline-offset: 2px;
  border-color: var(--ink-0);
}

.field select {
  padding-right: 2.75rem;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.field select option { background: #131313; color: #fff; }
[data-theme="light"] .field select option { background: #f2f2f2; color: #0a0a0a; }

.field textarea { min-height: 7rem; resize: vertical; }
.field textarea.is-short { min-height: 5.5rem; }

/* Errors stay monochrome: a heavier edge plus text that says what to do. */
.field [aria-invalid="true"] {
  border-color: var(--ink-0);
  box-shadow: inset 0 0 0 1px var(--ink-0);
}

.hint,
.error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.hint  { color: var(--ink-2); font-weight: 300; }
.error { color: var(--ink-0); font-weight: 400; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}

/* ── Actions ── */
.step-actions {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-back, .btn-next { display: none; }
.is-wizard .btn-back, .is-wizard .btn-next { display: inline-flex; }
.is-wizard .btn-back[hidden], .is-wizard .btn-next[hidden], .btn-submit[hidden] { display: none; }

.btn-fill:disabled { opacity: 0.6; cursor: progress; }

.submit-note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.draft-note {
  margin: 0 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-1);
}

.draft-clear {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-hi);
  font-size: 0.875rem;
  color: var(--ink-0);
  cursor: pointer;
}

/* ── Success page ── */
.success {
  min-height: 100svh;
  padding: calc(var(--nav-h) + 3rem) var(--pad-x) 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 44rem;
  margin-inline: auto;
}

.success-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--rule-hi);
  border-radius: 50%;
  animation: mark-in 700ms var(--ease) both;
}

.success-mark svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--ink-0);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes mark-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}

.success-title {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.success-lede {
  margin: 1.5rem 0 0;
  max-width: 36ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-1);
}

.next-list {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.next-list li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--ink-1);
}

.next-list strong { color: var(--ink-0); font-weight: 400; }

.success-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.success-mail {
  font-size: 0.9375rem;
  color: var(--ink-1);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-hi);
}

.success-mail:hover { color: var(--ink-0); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .intake { grid-template-columns: 1fr; gap: 3rem; }
  .intake-aside { position: static; }
  .steps { display: none !important; }   /* the progress bar carries it */
}

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .step-actions { flex-direction: column-reverse; align-items: stretch; }
  .step-actions .btn-fill, .step-actions .btn-ghost { width: 100%; }
  .nav-right { gap: 1rem; }
}