/* =============================================================================
   Apply page + firm signup form styles.

   Ported verbatim from:
     - src/app/apply/apply.module.css  (page chrome — .applyPage etc.)
     - src/app/page.module.css          (form styles — .sfForm etc.)

   CSS Modules' scope hashing is gone (the source files were *.module.css);
   class names are now global because everything is owned by the apply
   surface. Where two surfaces share a class (nav, footer), we reuse
   landing.css rather than redefining.
   ============================================================================= */

/* ── Page chrome ────────────────────────────────────────────────────────── */

.applyPage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.applyMain {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding:
    calc(var(--header-height) + var(--space-16))
    var(--space-6)
    var(--space-20);
}

.applyHeader {
  text-align: center;
  margin-bottom: var(--space-10);
}

.applyEyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-4);
}

.applyTitle {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 400;
  color: var(--color-brand-900);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
}

.applyLede {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

.applyFineprint {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.applyFineprint a {
  color: var(--color-accent-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .applyMain {
    padding:
      calc(var(--header-height) + var(--space-10))
      var(--space-5)
      var(--space-16);
  }

  .applyTitle {
    font-size: var(--text-5xl);
  }

  .applyLede {
    font-size: var(--text-md);
  }
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.sfForm {
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-10) var(--space-12);
  max-width: 820px;
  margin: 0 auto;
  color: var(--color-text-primary);
  animation: sfFormFadeIn var(--duration-slower) var(--ease-default);
}

@keyframes sfFormFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfSection {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-10) 0;
}

.sfSection:last-of-type {
  margin-bottom: var(--space-8);
}

.sfSectionLegend {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-brand-900);
  letter-spacing: -0.01em;
  padding: 0 0 var(--space-3) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
}

.sfFieldRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.sfFieldRow:last-child {
  margin-bottom: 0;
}

.sfField {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.sfSection > .sfField + .sfField,
.sfSection > .sfFieldRow + .sfField,
.sfSection > .sfField + .sfFieldRow {
  margin-top: var(--space-5);
}

.sfLabel {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.sfRequired {
  color: var(--color-accent-600);
  font-weight: 600;
}

.sfInput,
.sfTextarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-brand-900);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
  outline: none;
  line-height: 1.5;
}

.sfInput:hover:not(:focus):not(:disabled),
.sfTextarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-brand-400);
}

.sfInput:focus,
.sfTextarea:focus {
  border-color: var(--color-accent-600);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px hsla(262, 83%, 58%, 0.12);
}

.sfInput::placeholder,
.sfTextarea::placeholder {
  color: var(--color-brand-400);
}

.sfInput:disabled,
.sfTextarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-brand-100);
}

.sfTextarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-sans);
}

.sfInputError,
.sfInputError:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px hsla(0, 50%, 55%, 0.14);
}

.sfFieldError {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-error);
  line-height: 1.4;
}

/* ── Tom Select (ZDL overrides) ─────────────────────────────────────────
   Tom Select's default theme is loaded site-wide via base.html. These
   overrides retheme the .ts-wrapper / .ts-control / .ts-dropdown nodes
   to match the ZDL token palette + typography. Selector specificity
   intentionally matches Tom Select's own (single class) so cascade
   ordering (apply.css after tom-select.css) wins.

   Hide the native <select> until Tom Select replaces it. Tom Select
   adds the ".ts-wrapper" sibling and "tomselected" class on the
   original; until then we hide via opacity to avoid a layout shift.
   ────────────────────────────────────────────────────────────────── */

/* IMPORTANT: scope this to the actual <select> element. Tom Select
   copies the original select's class list onto the .ts-wrapper <div>
   it inserts, so an unscoped `.sfSelect:not(.tomselected)` would also
   match the wrapper (which is NOT marked `tomselected` — that class
   stays on the hidden original). Without `select`, the wrapper would
   inherit padding + border here and the `.ts-control` chrome below,
   double-stacking the chrome and breaking visual parity with .sfInput. */
select.sfSelect:not(.tomselected) {
  /* Pre-TomSelect: render the native control with the same chrome as
     .sfInput so flash-of-native-select is visually identical. */
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-brand-900);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-md);
  outline: none;
  line-height: 1.5;
}

.ts-wrapper {
  /* Layout-only element — chrome lives on the inner .ts-control so
     the wrapper doesn't double-stack padding/border. width:100% +
     border-box are belt-and-suspenders against any inherited box
     model. Typography is set here so the inner <input> inherits
     font-size / line-height and the .ts-control height matches
     .sfInput's exactly. */
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-brand-900);
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  min-height: auto;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-brand-900);
  background: var(--color-bg-primary);
  background-image: none;
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-md);
  box-shadow: none;
  line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
}

/* Tom Select renders an inner <input> for the typed query. Base
   tom-select.css forces its font-size to 13px / line-height 18px,
   which makes the .ts-control 4-5px shorter than a sibling .sfInput
   (whose 16px / 1.5 line-height drives a 50px outer height). Force
   the inner input to inherit so .ts-control's content box rises to
   24px tall and the outer box lands at 50px (12+24+12 + 2 borders),
   matching .sfInput exactly. */
.ts-wrapper.single .ts-control > input,
.ts-wrapper.multi .ts-control > input {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
}

/* Single-select must stay ONE line after selection. Base tom-select.css
   sets flex-wrap: wrap on .ts-control and gives the inner query <input>
   `flex: 1 1 auto; min-width: 7rem`. Flex line-breaking is decided on
   the input's *hypothetical* size (its auto flex-basis, ~10rem for an
   empty <input>), so once a selected .item is in the row the input
   wraps to a second line — control grows two lines tall with the caret
   under the item — whenever the space beside the item is under that
   hypothetical width. With an item present the input only hosts the
   type-to-filter caret, so give it a zero flex-basis (never forces a
   wrap) and let flex-grow hand it whatever space remains on the item's
   line. Same net effect as Tom Select's input_autogrow plugin, in pure
   CSS. Scoped to .single: multi-select genuinely wraps items. */
.ts-wrapper.single.has-items .ts-control > input {
  flex: 1 1 0;
  min-width: 0;
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
  border-color: var(--color-brand-400);
}

.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--color-accent-600);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px hsla(262, 83%, 58%, 0.12);
}

.ts-wrapper.sfInputError .ts-control,
.ts-wrapper.sfInputError.focus .ts-control {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px hsla(0, 50%, 55%, 0.14);
}

.ts-wrapper .ts-control > input::placeholder {
  color: var(--color-brand-400);
}

.ts-wrapper.single .ts-control .item {
  color: var(--color-brand-900);
}

.ts-dropdown {
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-brand-800);
}

.ts-dropdown .option {
  padding: var(--space-2) var(--space-4);
  color: var(--color-brand-800);
  border-left: 3px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.ts-dropdown .option.active,
.ts-dropdown .active {
  background: var(--color-accent-50);
  border-left-color: var(--color-accent-500);
  color: var(--color-brand-900);
}

.ts-dropdown .option.selected,
.ts-dropdown .selected {
  font-weight: 600;
  color: var(--color-accent-600);
  background: transparent;
}

.ts-dropdown .option.active.selected {
  background: var(--color-accent-50);
}

.ts-dropdown .no-results {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-brand-400);
  font-style: italic;
}

/* ── CalBar prefill card ── */

.sfPrefillCard {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-left: 3px solid var(--color-accent-600);
  border-radius: var(--radius-md);
  animation: sfPrefillFadeIn var(--duration-normal) var(--ease-default);
}

@keyframes sfPrefillFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfPrefillCardOk {
  background: var(--color-accent-50);
  border-color: var(--color-accent-200);
  border-left-color: var(--color-accent-600);
}

.sfPrefillCardWarn {
  background: hsl(38, 80%, 96%);
  border-color: hsl(38, 60%, 82%);
  border-left-color: var(--color-warning);
}

.sfPrefillBadge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}

.sfPrefillCardWarn .sfPrefillBadge {
  color: var(--color-warning);
}

.sfPrefillName {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-brand-900);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.sfPrefillSubtitle {
  font-size: var(--text-md);
  color: var(--color-brand-700);
  line-height: 1.5;
  margin-bottom: var(--space-1);
}

.sfPrefillMeta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.sfPrefillMessage {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-brand-700);
  line-height: 1.6;
}

.sfPrefillCardWarn .sfPrefillMessage {
  color: hsl(30, 40%, 30%);
}

.sfPrefillActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.sfPrefillBtnPrimary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--color-brand-900);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-brand-900);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.sfPrefillBtnPrimary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
}

.sfPrefillBtnGhost {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: transparent;
  color: var(--color-brand-700);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-brand-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.sfPrefillBtnGhost:hover {
  background: #FFFFFF;
  border-color: var(--color-brand-500);
  color: var(--color-brand-900);
}

/* ── Submit row ── */

.sfSubmitRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}

/* Solo submit row — used by the /apply/verify resend card, where the
   .sfForm's only visible content IS the submit row (the siblings are
   hidden inputs). The field/submit separator above has nothing to
   separate there and reads as a stray rule across the card, so drop
   it. The notice/error line rendered after a resend attempt lives
   INSIDE the row and keeps its gap spacing. */
.sfSubmitRow.sfSubmitRowSolo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sfSubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-10);
  background: var(--color-brand-900);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-brand-900);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.sfSubmit:hover:not(:disabled) {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.sfSubmit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsla(262, 83%, 58%, 0.25);
}

.sfSubmit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.sfFormError {
  font-size: var(--text-sm);
  color: var(--color-error);
  line-height: 1.5;
}

.sfFormNotice {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .sfForm {
    padding: var(--space-6);
  }

  .sfFieldRow {
    grid-template-columns: 1fr;
  }
}